@extends('layouts.front-layout')
@section('title', 'Complete Payment')

@section('content')

    <style>
        /* Optional: Add custom styles if needed */
    </style>
    <div class="container mt-5">
        <div class="row justify-content-center">
            <div class="col-md-6">
                <div class="card shadow-lg border-0 rounded">
                    <div class="card-body p-5">
                        <h2 class="text-center text-dark mb-4">Complete Your Payment</h2>

                        <!-- Event Name -->
                        <p class="lead text-muted">Event Name: <strong>{{ $eventName ?? 'N/A' }}</strong></p>

                        <!-- Price -->
                        <p class="lead text-muted">Price: <strong>${{ $price ?? '0.00' }}</strong></p>

                        <!-- Payment Form -->
                        <form id="payment-form">
                            <!-- Card Details -->
                            <div id="card-element" class="form-control mb-4 p-3 border border-secondary rounded"></div>
                            <div id="card-errors" role="alert" class="text-danger mb-3"></div>

                            <!-- Hidden Token Input -->
                            <input type="hidden" id="stripeToken">

                            <!-- Submit Button -->
                            <button id="submit" class="btn btn-primary btn-lg btn-block">
                                Pay ${{ $price ?? '0.00' }}
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Stripe JS -->

@endsection
@section('script')
    <script src="https://js.stripe.com/v3/"></script>

    <script>
        $(document).ready(function () {
            var price = @json($price);
            var id = @json($id);
            var successRoute = @json(route('payment.success'));
            const stripe = Stripe('{{ env('STRIPE_KEY') }}');
            const elements = stripe.elements();

            const card = elements.create('card');
            card.mount('#card-element');

            $('#payment-form').on('submit', async function (e) {
                e.preventDefault();

                const name = $('#name').val();
                const phone_number = $('#phone-number').val();
                const email = $('#email').val();
                const event = '{{ $eventName ?? '' }}';
                const cardHolderName = $('#card-holder-name').val();

                const { token, error } = await stripe.createToken(card);

                if (error) {
                    $('#card-errors').text(error.message);
                } else {
                    $('#stripeToken').val(token.id);

                    $.ajax({
                        url: '{{ route('email.payment') }}',
                        method: 'POST',
                        data: {
                            stripeToken: $('#stripeToken').val(),
                            _token: '{{ csrf_token() }}',
                            price: price,
                            id: id,
                        },
                        success: function (response) {
                            window.location.href = successRoute;
                            $('#paymentModal').modal('hide');
                        },
                        error: function (error) {
                            alert('Payment Failed!');
                            console.error(error);
                        }
                    });
                }
            });
        });
    </script>
@endsection