@push('header')
    <script src="https://js.stripe.com/v3/"></script>
@endpush
@push('footer')
@php 
  if ($page->slug === 'international-finance-forum-2023') {
    $product = config('services.stripe.iff-2023.product');
  }
  if ($page->slug === 'international-finance-forum-2024') {
    $product = config('services.stripe.iff-2024.product');
  }  
  if ($page->slug === 'asia-finance-forum-2023') {
    $product = config('services.stripe.aff-2023.product');
  }
@endphp

<script>
  // This is your test publishable API key.
  const stripe = Stripe("{{config('services.stripe.public')}}");

  // The items the customer wants to buy
  const items = [{ id: "{{$product}}" }];

  let elements;

  initialize();
  checkStatus();

  document
    .querySelector("#payment-form")
    .addEventListener("submit", handleSubmit);

  // Fetches a payment intent and captures the client secret
  async function initialize() {
    const { clientSecret } = await fetch("/api/page/{{$page->slug}}/checkout/intent?promo={{session('promo')}}&email={{session('email')}}", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ items }),
    }).then((r) => r.json());

    elements = stripe.elements({ clientSecret });


    const paymentElementOptions = {
      layout: "tabs",
    };

    const paymentElement = elements.create("payment", paymentElementOptions);
    paymentElement.mount("#payment-element");
  }

  async function handleSubmit(e) {
    e.preventDefault();
    setLoading(true);

    const { error } = await stripe.confirmPayment({
      elements,
      confirmParams: {
        // Make sure to change this to your payment completion page
        return_url: "{{route('page.checkout-complete', ['page' => $page->slug])}}",
        receipt_email: "{{session('email')}}",
      },
    });

    // This point will only be reached if there is an immediate error when
    // confirming the payment. Otherwise, your customer will be redirected to
    // your `return_url`. For some payment methods like iDEAL, your customer will
    // be redirected to an intermediate site first to authorize the payment, then
    // redirected to the `return_url`.
    if (error.type === "card_error" || error.type === "validation_error") {
      showMessage(error.message);
    } else {
      showMessage("An unexpected error occurred.");
    }

    setLoading(false);
  }

  // Fetches the payment intent status after payment submission
  async function checkStatus() {
    const clientSecret = new URLSearchParams(window.location.search).get(
      "payment_intent_client_secret"
    );

    if (!clientSecret) {
      return;
    }

    const { paymentIntent } = await stripe.retrievePaymentIntent(clientSecret);

    switch (paymentIntent.status) {
      case "succeeded":
        showMessage("Payment succeeded!");
        break;
      case "processing":
        showMessage("Your payment is processing.");
        break;
      case "requires_payment_method":
        showMessage("Your payment was not successful, please try again.");
        break;
      default:
        showMessage("Something went wrong.");
        break;
    }
  }

  // ------- UI helpers -------

  function showMessage(messageText) {
    const messageContainer = document.querySelector("#payment-message");

    messageContainer.classList.remove("hidden");
    messageContainer.textContent = messageText;

    setTimeout(function () {
      messageContainer.classList.add("hidden");
      messageText.textContent = "";
    }, 4000);
  }

  // Show a spinner on payment submission
  function setLoading(isLoading) {
    if (isLoading) {
      // Disable the button and show a spinner
      document.querySelector("#submit").disabled = true;
      document.querySelector("#spinner").classList.remove("hidden");
      document.querySelector("#button-text").classList.add("hidden");
    } else {
      document.querySelector("#submit").disabled = false;
      document.querySelector("#spinner").classList.add("hidden");
      document.querySelector("#button-text").classList.remove("hidden");
    }
  }
  </script>
@endpush
<x-app> 
  <x-slot name="title">{{ $page->title }}</x-slot>
  <x-slot name="description">{{ $page->description }}</x-slot>
  <div class="bg-techcapital-red py-8 mb-4">
    <div class="container lg:max-w-screen-lg mx-auto">  
      <h1 class="font-altgothic uppercase text-3xl text-white">Make A Payment</h1>
      <h2 class="text-white">Pay for your {{$page->title}} Ticket</h2>
    </div>
  </div>
  <div class="container lg:max-w-screen-lg mx-auto bg-white mb-4">  
    <div class="p-4">
      <p class="font-bold text-lg">You will be charged &#163;{{number_format($amount, 2)}} + VAT (&#163;{{ number_format($amountPlusVat, 2)}})</p>
      <p>Please make a payment using the form below.</p>
      <p class="mb-4">Your payment will be processed securely with Stripe.</p>
      <form id="payment-form">
        <div id="payment-message" class="hidden bg-red-100 border border-red-400 text-red-400 p-4 mb-4"></div>
        <div id="payment-element" class="mb-4">
          <!--Stripe.js injects the Payment Element-->
        </div>
        <p class="mb-4">If you require an invoice for your ticket purchase, please email <a href="mailto:finance@thetechcapital.co.uk">finance@thetechcapital.co.uk</a> after payment</p>
        <button id="submit" class="inline-block p-2 pl-4 pr-4 bg-techcapital-red border border-techcapital-red text-white uppercase font-altgothic">
          <div class="spinner hidden" id="spinner"></div>
          <span id="button-text">Pay now</span>
        </button>
      </form>        
    </div>
  </div>
</x-app>