<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Your E-Ticket</title>
    <style>
        /* Page setup for PDF */
        @page {
            size: A4;
            margin: 10mm;
        }

        body {
            font-family: 'Poppins', sans-serif;
            background-color: #f5f5f5;
            margin: 0;
            padding: 0;
        }

        /* Ticket container styling */
        .ticket-container {
            max-width: 750px;
            margin: 20px auto;
            background-color: #fff;
            border-radius: 12px;
            padding: 20px;
            border: 2px solid #000;
        }

        h1 {
            text-align: center;
            font-size: 22px;
            font-weight: 600;
            margin-bottom: 20px;
            border-bottom: 2px solid #000;
            padding-bottom: 10px;
        }

        /* Table layout for ticket */
        table.ticket {
            width: 100%;
            border-collapse: collapse;
        }

        table.ticket td {
            vertical-align: top;
            padding: 15px;
        }

        /* Define Colors Based on Category & Chair Type */
        @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' ? '#000000': '#00008B'; // White C&D is now Dark Blue
        }

        $textColor =in_array($bgColor, ['#ffffff', '#87cefa']) ? '#000' : '#fff';
        @endphp

        /* Left Column – Branding */
        .branding {
            width: 30%;
            text-align: center;
            border: 2px solid #000;
            padding: 10px;
        }

        .branding img {
            width: 60px;
            margin-bottom: 10px;
        }

        .branding .info-label {
            font-size: 12px;
            font-weight: bold;
            text-transform: uppercase;
            margin-bottom: 4px;
            display: block;
        }

        .branding .info-box {
            font-size: 14px;
            font-weight: bold;
            border-radius: 6px;
            padding: 8px;
            margin-bottom: 12px;
            text-align: center;
        }

        /* Right Column – Details */
        .details {
            width: 70%;
            border: 2px 2px 2px 0 solid #000;
            padding: 15px;
            background-color: {{ $bgColor }};
            color: {{ $textColor }};
        }

        .event-title {
            text-align: center;
            font-size: 24px;
            font-weight: 600;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid {{ $textColor }};
        }

        .event-title p {
            margin: 0;
            font-size: 20px;
            font-weight: 400;
        }

        /* Teams Section – Display Team Names in One Line */
        .teams {
            margin-bottom: 15px;
        }

        .teams-table {
            width: 100%;
            border-collapse: collapse;
        }

        .teams-table td {
            vertical-align: middle;
            text-align: center;
        }

        .teams-table .team-name {
            font-size: 20px;
            font-weight: 700;
            color: {{ $textColor }};
            text-transform: uppercase;
            padding: 5px 10px;
        }

        .teams-table .vs {
            font-size: 20px;
            font-weight: 700;
            color: {{ $textColor }};
            padding: 5px 10px;
        }

        /* Match Details – Label Left, Data Right */
        .match-details {
            display: flex;
            font-size: 14px;
            font-weight: bold;
            margin-bottom: 10px;
            padding: 5px 0;
            border-bottom: 1px solid {{ $textColor }};
        }

        .match-details .match-label {
            font-size: 15px;
            text-align: left;
        }

        .match-details .match-data {
            font-size: 15px;
            text-align: right;
        }

        .seat {
            text-align: center;
            font-size: 14px;
            font-weight: 600;
            background-color: #fff;
            color: red;
            border: 1px solid red;
            border-radius: 6px;
            padding: 8px;
            margin-top: 33px;
        }

        /* Styling the info-box with category-based border colors */
        .info-box {
            font-size: 14px;
            font-weight: bold;
            padding: 10px;
            margin-bottom: 10px;
            text-align: center;
            border-radius: 8px;
            border-width: 3px;
            border-style: solid;
            background-color: #fff;
            color: #000;
        }

        /* Red border for League - Red A&B */
        .info-box.red {
            border-color: #cc0000;
        }

        /* Blue border for League - Blue C&D */
        .info-box.blue {
            border-color: #87cefa;
        }

        /* Black border for Cup - Dark A&B */
        .info-box.black {
            border-color: #00008B;
        }

        /* Dark Blue border for Cup - White C&D */
        .info-box.darkblue {
            border-color: #87cefa;
        }
    </style>
</head>

<body>
    <div class="ticket-container">
        <h1>Your E-Ticket</h1>
        <h1>Please screenshot Your E-ticket</h1>
        <table class="ticket">
            <tr>
                <!-- Left Branding Section -->
                <td class="branding">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bd/Cambodian_Premier_League_01.png/800px-Cambodian_Premier_League_01.png"
                        alt="Logo">
                    <span class="info-label">Price</span>
                    <div class="info-box">${{ $payment->total ?? '0.00' }}</div>
                    <span class="info-label">Seat Type</span>
                    <div class="info-box">
                        @if ($ticket->category == 'league')
                            {{ $payment->chair_type == 'red_A_B' ? 'Red A&B' : 'Blue C&D' }}
                        @else
                            {{ $payment->chair_type == 'dark_A_B' ? 'Dark A&B' : 'White C&D' }}
                        @endif
                    </div>
                    <span class="info-label">Seats</span>
                    <div class="info-box">{{ $payment->number_chair ?? '0' }}</div>
                </td>

                <!-- Right Details Section -->
                <td class="details">
                    <div class="event-title">
                        <p><strong>
                                {{ $ticket->category == 'league' ? 'Cambodian Premier League 2024/25' : 'Hun Sen Cup 2024/25' }}
                            </strong></p>
                    </div>
                    <div class="teams">
                        <table class="teams-table">
                            <tr>
                                <td class="team-name">{{ $ticket->nameteam1 ?? 'Team A' }}</td>
                                <td class="vs">VS</td>
                                <td class="team-name">{{ $ticket->nameteam2 ?? 'Team B' }}</td>
                            </tr>
                        </table>
                    </div>
                    <div class="match-details">
                        <span class="match-label">Date & Time:</span>
                        <span class="match-data"> {{ $ticket->date ?? 'January 25, 2025' }} -
                            {{ $ticket->time ?? '7:00 PM' }}</span>
                    </div>
                    <div class="match-details">
                        <span class="match-label">Stadium:</span>
                        <span class="match-data">{{ $ticket->stadium ?? 'National Stadium' }}</span>
                    </div>
                    <div class="seat">
                        Ticket No: {{ $payment->tran_id ?? 'TKT-123456' }}
                    </div>
                </td>
            </tr>
        </table>
    </div>
</body>

</html>
