@extends('layouts.checkout')
@section('title', 'Checkout — '.config('app.name', 'Honey B'))
@section('content')
  <a href="#checkout-main" class="visually-hidden skip-to-content">Skip to content</a>

  <header class="checkout-header">
    <div style="max-width: 1060px; margin: 0 auto;">
      <a href="{{ url('/') }}" aria-label="Beekeeper's Naturals Home">
        <img class="checkout-logo" src="https://www.beekeepersnaturals.com/cdn/shop/files/BKN2022_Logo.png?v=1658248969&amp;width=160" width="80" height="80" alt="Beekeeper's Naturals" loading="eager">
      </a>
    </div>
  </header>

  <main id="checkout-main" class="checkout-main">
    <div class="checkout-form-column" id="checkout-form-column">
      <h1 class="visually-hidden">Beekeeper's Naturals Checkout</h1>

      <div class="checkout-govx" role="region" aria-label="GOVX ID">
        <div class="checkout-govx-logo" aria-hidden="true">
          <span class="checkout-govx-logo__mark">GOVX</span>
          <span class="checkout-govx-logo__sub">ID</span>
        </div>
        <div class="checkout-govx-copy">
          <p class="checkout-govx-title">{{ __('GOVX ID') }}</p>
          <p class="checkout-govx-desc">{{ __('A service used to verify military, first responder, nurse or teachers to qualify them for discounts.') }}</p>
          <p class="checkout-govx-desc">{{ __('Discount available for Military, First Responders, Medical Workers and Teachers') }}</p>
        </div>
      </div>

      <form class="checkout-form" action="{{ route('checkout.submit') }}" method="post" id="checkout-form">
        @csrf
        @if ($errors->any())
          <div class="checkout-errors" role="alert">
            <p><strong>{{ __('Please fix the following:') }}</strong></p>
            <ul>
              @foreach ($errors->all() as $err)
                <li>{{ $err }}</li>
              @endforeach
            </ul>
          </div>
        @endif
        <section class="checkout-form-section" aria-label="Contact">
          <div class="checkout-section-head">
            <h2 id="contact">Contact</h2>
            <a href="{{ route('login') }}" class="checkout-sign-in">Sign in</a>
          </div>
          <div class="checkout-field">
            <label for="email">Email</label>
            <input type="email" id="email" name="email" value="{{ old('email') }}" placeholder="Email" required autocomplete="email">
          </div>
          <div class="checkout-checkbox">
            <input type="checkbox" id="marketing" name="marketing" checked>
            <label for="marketing">Email me with news and offers</label>
          </div>
        </section>

        <section class="checkout-form-section" aria-label="Delivery address">
          <h2 id="deliveryAddress">Delivery</h2>
          <div class="checkout-field">
            <label for="country">Country/Region</label>
            <select id="country" name="country" required>
              <option value="US" @selected(old('country', 'US') === 'US')>United States</option>
              <option value="CA" @selected(old('country', 'US') === 'CA')>Canada</option>
            </select>
          </div>
          <div class="checkout-field checkout-field-row">
            <div class="checkout-field">
              <label for="firstname">First name</label>
              <input type="text" id="firstname" name="firstname" value="{{ old('firstname') }}" placeholder="First name" required autocomplete="given-name">
            </div>
            <div class="checkout-field">
              <label for="lastname">Last name</label>
              <input type="text" id="lastname" name="lastname" value="{{ old('lastname') }}" placeholder="Last name" required autocomplete="family-name">
            </div>
          </div>
          <div class="checkout-field checkout-field-with-icon">
            <label for="address1">Address</label>
            <input type="text" id="address1" name="address1" value="{{ old('address1') }}" placeholder="Address" required autocomplete="street-address">
            <span class="checkout-field-icon" aria-hidden="true">🔍</span>
          </div>
          <div class="checkout-field">
            <label for="address2">Apartment, suite, etc. (optional)</label>
            <input type="text" id="address2" name="address2" value="{{ old('address2') }}" placeholder="Apartment, suite, etc." autocomplete="address-line2">
          </div>
          <div class="checkout-field checkout-field-row" style="grid-template-columns: 1fr 1fr 1fr;">
            <div class="checkout-field">
              <label for="city">City</label>
              <input type="text" id="city" name="city" value="{{ old('city') }}" placeholder="City" required autocomplete="address-level2">
            </div>
            <div class="checkout-field">
              <label for="zone">State</label>
              <select id="zone" name="zone" required autocomplete="address-level1">
                <option value="">Select state</option>
                <option value="AL">Alabama</option><option value="AK">Alaska</option><option value="AZ">Arizona</option><option value="AR">Arkansas</option><option value="CA">California</option><option value="CO">Colorado</option><option value="CT">Connecticut</option><option value="DE">Delaware</option><option value="FL">Florida</option><option value="GA">Georgia</option><option value="HI">Hawaii</option><option value="ID">Idaho</option><option value="IL">Illinois</option><option value="IN">Indiana</option><option value="IA">Iowa</option><option value="KS">Kansas</option><option value="KY">Kentucky</option><option value="LA">Louisiana</option><option value="ME">Maine</option><option value="MD">Maryland</option><option value="MA">Massachusetts</option><option value="MI">Michigan</option><option value="MN">Minnesota</option><option value="MS">Mississippi</option><option value="MO">Missouri</option><option value="MT">Montana</option><option value="NE">Nebraska</option><option value="NV">Nevada</option><option value="NH">New Hampshire</option><option value="NJ">New Jersey</option><option value="NM">New Mexico</option><option value="NY">New York</option><option value="NC">North Carolina</option><option value="ND">North Dakota</option><option value="OH">Ohio</option><option value="OK">Oklahoma</option><option value="OR">Oregon</option><option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option><option value="SD">South Dakota</option><option value="TN">Tennessee</option><option value="TX">Texas</option><option value="UT">Utah</option><option value="VT">Vermont</option><option value="VA">Virginia</option><option value="WA">Washington</option><option value="DC">Washington DC</option><option value="WV">West Virginia</option><option value="WI">Wisconsin</option><option value="WY">Wyoming</option>
                <option value="AS">American Samoa</option><option value="FM">Federated States of Micronesia</option><option value="GU">Guam</option><option value="MH">Marshall Islands</option><option value="MP">Northern Mariana Islands</option><option value="PW">Palau</option><option value="PR">Puerto Rico</option><option value="VI">U.S. Virgin Islands</option><option value="AA">Armed Forces Americas</option><option value="AE">Armed Forces Europe</option><option value="AP">Armed Forces Pacific</option>
              </select>
            </div>
            <div class="checkout-field">
              <label for="postalCode">ZIP code</label>
              <input type="text" id="postalCode" name="postalCode" value="{{ old('postalCode') }}" placeholder="ZIP code" required autocomplete="postal-code">
            </div>
          </div>
          <div class="checkout-field">
            <label for="phone">Phone (optional)</label>
            <input type="tel" id="phone" name="phone" placeholder="Phone" autocomplete="tel">
          </div>
          <div class="checkout-checkbox">
            <input type="checkbox" id="sms_marketing" name="sms_marketing">
            <label for="sms_marketing">Text me with news and offers</label>
          </div>
        </section>

        <section class="checkout-shipping-method" aria-label="Shipping method">
          <h2 id="shippingMethod">Shipping method</h2>
          <p>Enter your shipping address to view available shipping methods.</p>
        </section>

        <section class="checkout-form-section checkout-payment" aria-labelledby="paymentHeading">
          <div class="checkout-payment-panel">
            <div class="checkout-payment-panel__head">
              <div class="checkout-payment-panel__title-row">
                <h2 id="paymentHeading">Payment</h2>
                <span class="checkout-payment-trust-badge" title="Encrypted checkout">
                  <svg class="checkout-payment-trust-badge__icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                    <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
                    <path d="M9 12l2 2 4-4"/>
                  </svg>
                  <span>Secure checkout</span>
                </span>
              </div>
              <p class="checkout-secure-msg checkout-payment-panel__lead">Your payment details are encrypted. Select a method below, then complete your purchase with <strong>Pay now</strong> in the order summary.</p>
            </div>

            <fieldset class="checkout-payment-fieldset">
              <legend class="visually-hidden">Payment method</legend>

              <div class="checkout-payment-method checkout-payment-method--card is-selected" data-checkout-gateway="stripe" data-payment-stripe>
                <label class="checkout-payment-method__header">
                  <input type="radio" name="payment_method" value="stripe" class="checkout-payment-method__radio" @checked(old('payment_method', 'stripe') === 'stripe')>
                  <span class="checkout-payment-method__radio-ui" aria-hidden="true"></span>
                  <span class="checkout-payment-method__icon-wrap checkout-payment-method__icon-wrap--stripe" aria-hidden="true">
                    <span class="checkout-payment-wordmark checkout-payment-wordmark--stripe">stripe</span>
                  </span>
                  <span class="checkout-payment-method__title-block">
                    <span class="checkout-payment-method__title">Card</span>
                    <span class="checkout-payment-method__subtitle">Visa, Mastercard, Amex &amp; more</span>
                  </span>
                  <span class="checkout-card-logos" aria-hidden="true">
                    <span class="checkout-card-logo checkout-card-logo--visa">VISA</span>
                    <span class="checkout-card-logo checkout-card-logo--mc">MC</span>
                    <span class="checkout-card-logo checkout-card-logo--amex">AMEX</span>
                  </span>
                </label>

                <div class="checkout-card-fields" id="checkout-stripe-fields">
                  <p class="checkout-card-fields__hint">Card details are processed by Stripe. We never store your full card number.</p>
                  <div id="payment-element" class="checkout-payment-element-mount"></div>
                </div>
              </div>

              <div class="checkout-payment-method checkout-payment-method--card" data-checkout-gateway="paypal" data-payment-paypal>
                <label class="checkout-payment-method__header checkout-payment-method__header--paypal">
                  <input type="radio" name="payment_method" value="paypal" class="checkout-payment-method__radio" @checked(old('payment_method') === 'paypal')>
                  <span class="checkout-payment-method__radio-ui" aria-hidden="true"></span>
                  <span class="checkout-payment-method__icon-wrap checkout-payment-method__icon-wrap--paypal" aria-hidden="true">
                    <span class="checkout-payment-wordmark checkout-payment-wordmark--paypal">PayPal</span>
                  </span>
                  <span class="checkout-payment-method__title-block">
                    <span class="checkout-payment-method__title">PayPal</span>
                    <span class="checkout-payment-method__subtitle">Pay with balance or linked card</span>
                  </span>
                </label>
                <div class="checkout-card-fields checkout-card-fields--paypal" id="checkout-paypal-fields">
                  <p class="checkout-card-fields__hint">You&rsquo;ll leave this page briefly to sign in to PayPal and approve the payment. Return here if prompted.</p>
                </div>
              </div>

              <div class="checkout-payment-method checkout-payment-method--card checkout-payment-method--square" data-checkout-gateway="square" data-payment-square>
                <label class="checkout-payment-method__header checkout-payment-method__header--square">
                  <input type="radio" name="payment_method" value="square" class="checkout-payment-method__radio" @checked(old('payment_method') === 'square')>
                  <span class="checkout-payment-method__radio-ui" aria-hidden="true"></span>
                  <span class="checkout-payment-method__icon-wrap checkout-payment-method__icon-wrap--square" aria-hidden="true">
                    <svg class="checkout-payment-brand-svg" viewBox="0 0 80 80" width="28" height="28" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                      <rect width="80" height="80" rx="12" fill="#000"/>
                      <path fill="#fff" d="M52 28H28v24h24V28zm-8 16H36V36h8v8z"/>
                    </svg>
                  </span>
                  <span class="checkout-payment-method__title-block">
                    <span class="checkout-payment-method__title">Square</span>
                    <span class="checkout-payment-method__subtitle">Cards &amp; digital wallets</span>
                  </span>
                </label>
                <div class="checkout-card-fields checkout-card-fields--square" id="checkout-square-fields">
                  <label class="checkout-field checkout-field--square-token">
                    <span class="checkout-field__label">Sandbox payment token</span>
                    <input type="text" id="square_source_id" value="{{ old('square_source_id') }}" placeholder="e.g. cnon:card-nonce-ok" autocomplete="off" inputmode="text">
                    <span class="checkout-field__hint">For development: paste a test token from Square. In production this is filled by the Web Payments SDK.</span>
                  </label>
                </div>
              </div>
            </fieldset>
          </div>

          <div class="checkout-save-panel">
            <h3 class="checkout-save-panel__title">Save my information for a faster checkout</h3>
            <div class="checkout-phone-row">
              <span class="checkout-phone-row__prefix">+1</span>
              <span class="checkout-phone-row__icon" aria-hidden="true">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75"><rect x="6" y="3" width="12" height="18" rx="2"/><path d="M10 18h4"/></svg>
              </span>
              <div class="checkout-float-field checkout-float-field--phone">
                <input type="tel" id="save_mobile" name="save_mobile" value="{{ old('save_mobile') }}" placeholder=" " autocomplete="tel-national">
                <label for="save_mobile">Mobile phone (optional)</label>
              </div>
            </div>
            <p class="checkout-shop-disclaimer">
              By providing your phone number, you agree to create a Shop account subject to Shop&apos;s <a href="https://shop.app/terms-of-service" target="_blank" rel="noopener noreferrer">Terms</a> and <a href="https://shop.app/legal/privacy" target="_blank" rel="noopener noreferrer">Privacy Policy</a>.
            </p>
          </div>

          <div class="checkout-form-submit">
            <button type="submit" class="checkout-submit-order">{{ __('Submit') }}</button>
            <p class="checkout-form-submit__hint">{{ __('Saves your contact and delivery details. Use Pay now in the summary to complete payment.') }}</p>
          </div>
        </section>
      </form>
    </div>

    <aside class="checkout-order-summary" id="checkout-order-summary" aria-label="Order summary">
      <button type="button" class="checkout-mobile-summary" id="checkout-mobile-summary" aria-expanded="false" aria-controls="checkout-order-summary-body">
        Order summary <span id="checkout-mobile-total">$0.00</span>
      </button>
      <div class="checkout-order-summary-body" id="checkout-order-summary-body">
        <h2 class="visually-hidden">Order summary</h2>
        <div id="checkout-items-wrap" class="checkout-items">
          <table class="checkout-cart-table" id="checkout-cart-table"><thead><tr><th scope="col">Product</th><th scope="col" class="col-qty">Qty</th><th scope="col" class="col-price">Total</th></tr></thead><tbody id="checkout-items"></tbody></table>
        </div>
        <div id="checkout-empty" class="checkout-empty" style="display:none;">
          <p>Your cart is empty.</p>
          <p><a href="{{ url('/') }}">Continue shopping</a></p>
        </div>
        <div class="checkout-upsell">
          <h3>Try Our Liposomal Formulas</h3>
          <div class="checkout-upsell-item">
            <img src="https://www.beekeepersnaturals.com/cdn/shop/files/Royal_Jelly_7b507b55-6e8f-4cef-b963-15133fef1ce6.png?height=200&amp;v=1729097546" alt="Royal Jelly Brain Health Liposomal" width="48" height="48" loading="lazy">
            <div class="info"><strong>Royal Jelly Brain Health Liposomal</strong><span>$24.99</span></div>
            <button type="button" class="add-btn">Add</button>
          </div>
          <div class="checkout-upsell-item">
            <img src="https://www.beekeepersnaturals.com/cdn/shop/files/Propolis_c35ad5fc-551b-4f40-bb1f-fe8b63dfc9c8.png?height=200&amp;v=1729097545" alt="Propolis Stress Support Liposomal" width="48" height="48" loading="lazy">
            <div class="info"><strong>Propolis Stress Support Liposomal</strong><span>$24.99</span></div>
            <button type="button" class="add-btn">Add</button>
          </div>
        </div>
        <div id="checkout-costs" class="checkout-costs" style="display:none;">
          <h3 class="visually-hidden">Discount code or gift card</h3>
          <div class="checkout-discount">
            <input type="text" id="discount-code" placeholder="Discount code or gift card" aria-label="Discount code or gift card">
            <button type="button" id="apply-discount">Apply</button>
          </div>
          <p id="checkout-discount-message" class="checkout-discount-message" style="display:none;" role="status"></p>
          <div class="checkout-cost-row"><span>Subtotal</span><span id="checkout-subtotal">$0.00</span></div>
          <div class="checkout-cost-row"><span>Shipping</span><span id="checkout-shipping" class="checkout-shipping-hint"><span class="hint-icon" aria-hidden="true">?</span> <span id="checkout-shipping-text">Enter shipping address</span></span></div>
          <div class="checkout-cost-row total"><span>Total</span><span id="checkout-total">USD $0.00</span></div>
          <button type="button" class="checkout-pay" id="checkout-pay-btn">Pay now</button>
          <p id="checkout-payment-msg" class="checkout-discount-message" style="display:none;margin-top:0.75rem;" role="status"></p>
          <div class="checkout-trust">
            <div class="checkout-reviews"><strong>20,000+</strong> <span class="checkout-stars">★★★★★</span> <strong>5 star reviews</strong></div>
            <div class="checkout-badges">
              <div class="checkout-badge"><span class="checkout-badge-icon" aria-hidden="true">🪙</span> 100% Money Back Guarantee</div>
              <div class="checkout-badge"><span class="checkout-badge-icon" aria-hidden="true">🩺</span> Formulated with Doctors</div>
              <div class="checkout-badge"><span class="checkout-badge-icon" aria-hidden="true">🧪</span> 3rd Party Lab Tested</div>
            </div>
          </div>
        </div>
      </div>
    </aside>
  </main>

  <footer class="checkout-footer">
    <ul>
      <li><a href="https://www.beekeepersnaturals.com/policies/refund-policy">Refund policy</a></li>
      <li><a href="https://www.beekeepersnaturals.com/policies/shipping-policy">Shipping</a></li>
      <li><a href="https://www.beekeepersnaturals.com/policies/privacy-policy">Privacy policy</a></li>
      <li><a href="https://www.beekeepersnaturals.com/policies/terms-of-service">Terms of service</a></li>
      <li><a href="https://www.beekeepersnaturals.com/policies/refund-policy#cancellations">Cancellations</a></li>
    </ul>
  </footer>
@push('scripts')
<script src="https://js.stripe.com/v3/"></script>
<script>
  window.paymentSessionUrl = @json(route('payments.session'));
  window.csrfToken = @json(csrf_token());
</script>
<script src="{{ asset('js/checkout-payments.js') }}"></script>
@if (old('zone'))
<script>
(function () {
  var z = document.getElementById('zone');
  if (z) z.value = @json(old('zone'));
})();
</script>
@endif
@endpush
@endsection
