@extends('layouts.main')

@section('page-id', '6038e1adcdc186b06b46f6e2')

@section('content')
  <div class="section transparent basket">
    <div class="wide-container">
      <div class="sheet sign-in checkout">
        <div class="text-center">
          <h1 class="h1-2 mt-0 mb-20">Checkout</h1>
        </div>
        <div class="checkout-content-wrapper">
          <div class="register-form w-form">
            <div class="form-row checkout">
              <form class="form-column checkout-left" action="{{ route('submit-order') }}" method="POST" id="payment-form">
                @csrf

                <input type="hidden" name="payment-intent-id" id="payment-intent-id" value="">
                <div class="form-item title">
                  <h2 class="mt-0 mb-0">Payment Information</h2>
                </div>
                <div class="form-item" id="error" style="display:none;">
                  <div class="alert mt-0" role="alert">
                    <p id="error-message"></p>
                    <p class="mb-0">If this problem persists, please <a href="{{ route('contact') }}">contact us</a> and we'll try to rectify this problem for you.</p>
                  </div>
                </div>
                <div class="form-item mb-20">
                  <div class="stripe-wrapper">
                    <span id="card-element"></span>
                  </div>
                </div>
                <div class="form-item title form-footer">
                  <a href="{{ route('checkout') }}">&lt; Return to shipping</a>
                  <button type="button" id="card-button" class="button w-button">Place Order</button>
                </div>
              </form>
              <div class="form-column checkout-right">
                <div class="form-checkout-summary-wrapper">
@foreach (cookieService()->getProducts() as $key => $product)
                  <div class="form-item checkout-product">
                    <div class="checkout-product-content">
                      <div>{{ $product['name'] }}</div>
@foreach ($product['addons'] as $addon)
                      <div class="checkout-product-subtext addon">Addon: {{ $addon['name'] }}</div>
@endforeach
                      <div class="checkout-product-subtext">Unit: {{ $product['unit'] === 'ac' ? 'Acres' : ($product['unit'] === 'ha' ? 'Hectares' : 'Kgs') }}</div>
                      <div class="checkout-product-subtext">Quantity: {{ $product['quantity'] }}</div>
                    </div>
                    <div>£{{ number_format($product['total'], 2) }}</div>
                  </div>
@endforeach
                  <div class="form-item totals-row">
                    <div class="checkout-total-item">Subtotal <span>£{{ cookieService()->getSubtotalText() }}</span></div>
                    <div class="checkout-total-item">Delivery Total <span>£{{ cookieService()->getShippingText() }}</span></div>
                  </div>
                  <div class="form-item totals-row">
                    <div class="checkout-total-item">Total <span class="checkout-final-total">£{{ cookieService()->getTotalText() }}</span></div>
                  </div>
                  </div>
              </div>
              <div class="form-checkout-mobile-toggle-wrapper">
                <div>Show order summary</div>
                <div class="checkout-final-total">£{{ cookieService()->getTotalText() }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
@endsection

@section('custom_scripts')
<script src="https://js.stripe.com/v3/"></script>
<script>
  const style = {
      base: {
          'fontSize': '1.11rem',
          'color': '#495057',
          'fontFamily': 'apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif',
      }
  };
  const stripe = Stripe("{{ config('app.stripe_key') }}");

  const elements = stripe.elements();
  const card = elements.create('card', {
    'style': style,
    'hidePostalCode': true
  });
  card.mount('#card-element');

  const cardButton = document.getElementById('card-button');
  cardButton.addEventListener('click', function () {
    cardButton.classList.add("loading");
    cardButton.disabled = true;

    document.getElementById("error").style.display = "none";

    payWithCard(stripe, card, "{{ $clientSecret }}");
  });

  const payWithCard = function(stripe, card, clientSecret) {
    stripe
      .confirmCardPayment(clientSecret, {
        payment_method: {
          card: card
        }
      })
      .then(function(result) {
        if (result.error) {
          document.getElementById("error-message").innerHTML = result.error.message;
          document.getElementById("error").style.display = "block";
          cardButton.classList.remove("loading");
          cardButton.disabled = false;
        } else {
          document.getElementById("payment-intent-id").value = result.paymentIntent.id;
          document.getElementById("payment-form").submit();
        }
      });
  };
</script>
@endsection