@extends('layouts.master')
@section('css')
<style>
  #payment-container {
    border: 1px solid rgb(121, 121, 121);
    border-radius: 5px;
    padding: 60px;
    background-color: rgb(121, 121, 121);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  }
</style>
@endsection
@section('contents')
<section class="banner pt-5 pb-0">
  <div class="container pt-md-5">
    <div class="checkout__wrapper pt-5 pb-5">
      <div class="card">
        <div class="row" data-aos="fade-left" data-aos-duration="1000">
          <div class="col-md-7 mx-auto text-center">
            <div class="card-body">
              <h1 class="mb-3 text-yellow">{{ __('trans.payment-confirmation') }}</h1>
              <p>{{ __('trans.amount-to-pay') }} : <span style="font-weight: bold;">{{ number_format($totalPrice, 2) }}$</span></p>
              <img src="{{ asset('assets/images/vis.png') }}" class="img" style="width: 90px;">
              <img src="{{ asset('assets/images/m-card.png') }}" class="img" style="width: 90px;">
            </div>
            <div class="card-body">
              <div id="payment-container"></div>
              <button id="confirmPaymentButton" class="trk-btn trk-btn--primary trk-btn--arrow mt-4">{{ __('trans.confirm-payment') }}</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
@endsection
@section('js')
<script src="https://js.stripe.com/v3/"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
  const stripe = Stripe('{{ $publishableKey }}');
  const clientSecret = '{{ $clientSecret }}';

  const appearance = {
    theme: 'night',
  };

  const elements = stripe.elements({ clientSecret, appearance });

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

  document.getElementById('submitButton').addEventListener('click', async function () {
    const { paymentIntent, error } = await stripe.confirmPayment({
      elements,
      confirmParams: {
        'return_url': '/',
      }
    });

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