@extends('dashboard.layouts.subsidiary')
@section('title', __('trans.payment-confirmation'))
@section('content')
<div class="container-xxl">
  <div class="row vh-100 d-flex justify-content-center">
    <div class="col-12 align-self-center">
      <div class="row">
        <div class="col-lg-6 mx-auto">
          <div class="card p-2">
            <div class="card-body">
              <div class="text-center">
                <h4 class="text-center">{{ __('trans.payment-confirmation') }}</h4>
                <p class="text-center">{{ __('trans.amount-to-pay') }}: ${{ number_format($package->price, 2) }}</p>
              </div>
            </div>
            <div class="card-body">
              <div id="payment-container"></div>
              <button id="confirmPaymentButton" class="btn btn-success w-100 mt-3">{{ __('trans.confirm-payment') }}</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection
@section('js')
<script src="https://js.stripe.com/v3/"></script>
<script>
  document.addEventListener('DOMContentLoaded', function () {
    const stripe = Stripe('{{ $publishableKey }}');
    const clientSecret = '{{ $clientSecret }}';

    const elements = stripe.elements();
    const cardElement = elements.create('card');
    cardElement.mount('#payment-container');

    document.getElementById('confirmPaymentButton').addEventListener('click', async function () {
      const { paymentIntent, error } = await stripe.confirmCardPayment(clientSecret, {
        payment_method: {
          card: cardElement,
        },
      });

      if (error) {
        alert(error.message);
      } else if (paymentIntent.status === 'succeeded') {
        window.location.href = '{{ route("dashboard.subscribes.payment-success") }}?payment_intent_id=' + paymentIntent.id + '&status=' + paymentIntent.status;
      }
    });
  });
</script>
@endsection