<x-navbar>
    <div class="container d-flex justify-content-center align-items-center" style="min-height: 100vh;">
        <div class="card shadow-lg p-4" style="width: 100%; max-width: 600px; border-radius: 15px;">
            <h1 class="text-center mb-4 text-primary fw-bold">Ticket Review</h1>

            <div class="mb-4 text-center">
                <p class="lead">Please review your ticket details before confirming the payment.</p>
            </div>

            <!-- Ticket Details Section -->
            <div class="bg-light p-3 rounded mb-4 shadow-sm">
                <ul class="list-group list-group-flush">
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        <strong>Name:</strong>
                        <span>{{ $ticketData['name'] ?? 'N/A' }}</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        <strong>Phone Number:</strong>
                        <span>{{ $ticketData['phone_number'] ?? 'N/A' }}</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        <strong>Seats Type:</strong>
                        <span>{{ $ticketData['seat_type_name'] ?? 'N/A' }}</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        <strong>Number of Seats:</strong>
                        <span>{{ $ticketData['number_chair'] ?? 'N/A' }}</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        <strong>Total Price:</strong>
                        <span class="text-success fw-bold">
                            ${{ isset($amount) ? number_format($amount, 2) : '0.00' }}
                        </span>
                    </li>
                </ul>
            </div>

            <!-- Payment Instructions -->
            <div class="alert alert-warning text-center fw-bold" role="alert">
                <i class="fas fa-info-circle me-2"></i> Please proceed to complete your payment via ABA PayWay.
            </div>

            <!-- Payment Form -->
            <form method="POST"
                action="https://checkout.payway.com.kh/api/payment-gateway/v1/payments/purchase"
                target="aba_webservice" id="aba_merchant_request">
                @csrf
                <input type="hidden" name="req_time" value="{{ $req_time }}" />
                <input type="hidden" name="merchant_id" value="{{ $merchantId }}">
                <input type="hidden" name="tran_id" value="{{ $tranId }}" id="tran_id">
                <input type="hidden" name="amount" value="{{ $amount }}" id="amount">
                <input type="hidden" name="continue_success_url" value="{{ $continue_success_url }}"
                    id="continue_success_url">
                <input type="hidden" name="payment_option" value="{{ $payment_option }}" />
                <input type="hidden" name="return_deeplink" value="{{ $return_deeplink }}">
                <input type="hidden" name="hash" value="{{ $hash }}" id="hash">
            </form>

            <!-- Proceed to Payment Button -->
            <input type="button" id="checkout_button" class="btn btn-outline-success w-100 py-2"
                style="font-size: 18px;" value="Proceed to Payment">

            <!-- Edit Details Button -->
            <div class="text-center mt-4">
                <a href="{{ route('payment.create', [
                    'ticketId' => $ticketData['ticket_id'] ?? 'N/A',
                    'name' => $ticketData['name'] ?? 'N/A',
                    'phone_number' => $ticketData['phone_number'] ?? 'N/A',
                    'seat_type_name' => $ticketData['seat_type_name'] ?? 'N/A',
                    'number_chair' => $ticketData['number_chair'] ?? 'N/A',
                ]) }}"
                    class="btn btn-outline-secondary w-100" style="font-size: 16px;">
                    <i class="fas fa-edit"></i> Edit Details
                </a>
            </div>

            <!-- Payment Plugin Integration -->
            <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
            <script src="https://checkout.payway.com.kh/plugins/checkout2-0.js"></script>

            <script>
                $(document).ready(function() {
                    $('#checkout_button').click(function() {
                        $('#aba_merchant_request').append($(".payment_option:checked"));
                        AbaPayway.checkout();
                    });
                });
            </script>
        </div>
    </div>
</x-navbar>
