<x-navbar>
    <div class="container d-flex justify-content-center align-items-center" style="min-height: 100vh;">
        <div class="card p-3"
            style="width: 100%; max-width: 900px; background-color: #ffffffe8; font-family: 'Poppins', sans-serif; border-radius: 16px;">
            <strong style="color: rgb(0, 0, 0)" align="center">
                PLEASE SCREENSHOT YOUR E-TICKET
            </strong>

            @php
                $bgColor = '#ffffff'; // Default background color
                if ($ticket->category == 'league') {
                    $bgColor = $payment->chair_type == 'red_A_B' ? '#cc0000' : '#87cefa';
                } elseif ($ticket->category == 'cup') {
                    $bgColor = $payment->chair_type == 'dark_A_B' ? '#00008B' : '#87cefa';
                }
            @endphp

            <div class="ticket d-flex mb-4 justify-content-center"
                style="overflow-x: auto; border-radius: 24px; border-color: black;">

                <input type="hidden" name="ticket_id" value="{{ $ticket->id }}">

                <!-- Left Branding Section -->
                <div class="branding d-flex flex-column justify-content-center align-items-center w-25"
                    style="background-color: #fff; padding: 40px; text-align: center; border-radius: 24px 0 0 24px;">

                    <img src="{{ url('assets/image/cpl.png') }}" alt="Logo" style="width: 60px;">

                    <!-- Improved Info Box Section -->
                    <div class="ticket-info mt-3 d-flex flex-md-column flex-row gap-2 w-100">
                        <div class="info-box text-center p-2" style="border: 2px solid #ff0000; border-radius: 10px;">
                            <div class="label fw-bold text-uppercase text-black" style="font-size: 12px;">Price</div>
                            <div class="value" style="font-weight: 600; font-size: 14px;">
                                ${{ $payment->total ?? '0.00' }}
                            </div>
                        </div>

                        <div class="info-box text-center p-2" style="border: 2px solid #ff0000; border-radius: 10px;">
                            <div class="label fw-bold text-uppercase text-black" style="font-size: 12px;">Seat Type
                            </div>
                            <div class="value" style="font-weight: 600; font-size: 14px;">
                                {{ $payment->chair_type == 'red_A_B' ? 'Red A&B' : 'Blue C&D' }}
                            </div>
                        </div>

                        <div class="info-box text-center p-2" style="border: 2px solid #ff0000; border-radius: 10px;">
                            <div class="label fw-bold text-uppercase text-black" style="font-size: 12px;">Seats</div>
                            <div class="value" style="font-weight: 600; font-size: 14px;">
                                {{ $payment->number_chair ?? '0' }}
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Right Details Section -->
                <div class="details d-flex flex-column justify-content-between w-75"
                    style="background-color: {{ $bgColor }}; color: {{ in_array($bgColor, ['#ffffff', '#87cefa']) ? '#000' : '#fff' }}; padding: 30px; border-radius: 0 24px 24px 0;">

                    <div class="event-title text-center" style="font-size: 12px; font-weight: 600; line-height: 1;">
                        <p style="margin: 5px 0; font-size: 16px; font-weight: 400;">
                            <strong style="color: rgb(255, 255, 255)">
                                {{ $ticket->category == 'league' ? 'Cambodian Premier League 2024/25' : 'Hun Sen Cup 2024/25' }}
                            </strong>
                        </p>
                    </div>

                    <div class="logos d-flex justify-content-center align-items-center mb-4">
                        <div class="team text-center mx-4">
                            <img src="{{ asset($ticket->image1) }}" alt="Team A Logo"
                                style="width: 50px; height: 50px; object-fit: contain; margin-bottom: 2px;">
                            <p>{{ $ticket->nameteam1 ?? 'Team A' }}</p>
                        </div>

                        <div class="vs-qr-code-container d-flex flex-column align-items-center mx-4">
                            <span style="font-size: 18px; font-weight: 600;">VS</span>

                            <!-- QR Code ALWAYS Visible -->
                            <div class="qr-code text-center mt-4">
                                {!! QrCode::size(70)->generate($qrData) !!}
                            </div> 
                        </div>

                        <div class="team text-center mx-4">
                            <img src="{{ asset($ticket->image2) }}" alt="Team B Logo"
                                style="width: 50px; height: 50px; object-fit: contain; margin-bottom: 2px;">
                            <p>{{ $ticket->nameteam2 ?? 'Team B' }}</p>
                        </div>
                    </div>

                    <div class="info d-flex justify-content-between border-bottom"
                        style="font-size: 16px; padding: 5px 0;">
                        <span>Date & Time:</span>
                        <span>{{ $ticket->date ?? 'January 25, 2025' }} - {{ $ticket->time ?? '7:00 PM' }}</span>
                    </div>

                    <div class="info d-flex justify-content-between border-bottom"
                        style="font-size: 16px; padding: 5px 0;">
                        <span>Stadium:</span>
                        <span>{{ $ticket->stadium ?? 'National Stadium' }}</span>
                    </div>

                    <div class="seat"
                        style="background-color: #fff; color: red; padding: 10px; text-align: center; border: 1px solid #fff; border-radius: 8px; font-weight: 600;">
                        Ticket No: {{ $payment->tran_id ?? 'TKT-123456' }}
                    </div>
                </div>
            </div>

            <a href="{{ route('payment.downloadTicket', ['paymentId' => $payment->id]) }}"
                class="btn btn-outline-success">Download E-Ticket</a>

            <a href="{{ route('welcome') }}" class="btn btn-outline-primary mt-4 w-100"
                style="font-size: 16px; font-weight: 600;">Booking Again</a>
        </div>
    </div>
</x-navbar>


<style>
    /* ===================== */
    /* Mobile First Approach */
    /* ===================== */
    @media (max-width: 768px) {
        .vs-qr-code-container {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .qr-code {
            margin-top: 5px;
        }

        .price-container {
            display: flex;
            justify-content: space-between;
            width: 100%;
            gap: 10px;
            flex-wrap: nowrap;
            /* Keep all in one row */
        }

        .info-box {
            background-color: #fff;
            color: #000;
            border: 2px solid #cc0000;
            border-radius: 8px;
            font-weight: bold;
            padding: 8px;
            font-size: 12px;
            text-align: center;
            flex: 1;
            /* Evenly distributes space */
            min-width: 70px;
        }

        /* Ticket Container */
        .ticket {
            flex-direction: column !important;
            border-radius: 16px !important;
        }

        /* Branding Section (Left Side) */
        .branding {
            width: 100% !important;
            border-radius: 16px 16px 0 0 !important;
            padding: 20px !important;
            border-bottom: none !important;
        }

        /* Details Section (Right Side) */
        .details {
            width: 100% !important;
            border-radius: 0 0 16px 16px !important;
            padding: 10px !important;
        }

        /* Team Logos Section */
        .logos {
            display: flex !important;
            justify-content: center !important;
            align-items: center !important;
            flex-wrap: nowrap !important;
            gap: 15px !important;
        }

        .team img {
            width: 40px !important;
            height: 40px !important;
            object-fit: contain !important;
        }

        /* Typography Adjustments */
        h1 {
            font-size: 12px !important;
        }

        .event-title {
            font-size: 18px !important;
            line-height: 1.4 !important;
        }

        /* Seat Info */
        .seat {
            font-size: 12px !important;
            padding: 8px !important;
            margin-top: 1rem !important;
        }
    }

    /* ======================= */
    /* Small Mobile Adjustment */
    /* ======================= */
    @media (max-width: 480px) {
        .card {
            border-radius: 12px !important;
            padding: 15px !important;
        }

        .branding,
        .details {
            padding: 20px !important;
        }

        /* Compact Info Groups */
        .branding>div {
            gap: 8px !important;
        }

        .info-box {
            font-size: 14px !important;
            padding: 5px !important;
            border: 2px solid #ff0000;
        }
    }

    /* ===================== */
    /* Desktop Styles */
    /* ===================== */
    @media (min-width: 769px) {
        .price-container {
            display: flex;
            justify-content: center;
            gap: 20px;
        }

        .info-box {
            background-color: #fff;
            color: #000;
            border: 2px solid #cc0000;
            border-radius: 8px;
            font-weight: bold;
            padding: 10px;
            font-size: 16px;
            text-align: center;
            width: 100px;
            /* Fixed width for uniformity */
        }

        .qr-code {
            width: 100px;
            /* Fixed QR size for better clarity */
            height: 100px;
        }

        .vs-qr-code-container {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
    }
</style>

<script>
    // Disable the back button on mobile and desktop
    history.pushState(null, null, location.href);
    window.onpopstate = function() {
        history.pushState(null, null, location.href);
    };

    // Optional: Warn user before leaving the page
    window.addEventListener('beforeunload', function(e) {
        e.preventDefault();
        e.returnValue = 'Are you sure you want to leave this page?';
    });
</script>
