<x-navbar>
    <style>
        .table-wrapper {
            width: 100%;
            overflow-x: auto;
            /* Enables horizontal scrolling */
        }

        .table-container {
            width: 100%;
            margin: 20px 0;
            border-collapse: collapse;
            min-width: 700px;
            /* Ensures the table retains a minimum width */
        }

        .table-container th,
        .table-container td {
            padding: 12px 15px;
            text-align: center;
            border-bottom: 1px solid #ddd;
        }

        .table-container th {
            background-color: #f0f7ff;
            font-weight: bold;
        }

        .table-container td {
            background-color: #ffffff;
            vertical-align: middle;
        }

        .table-container tr:hover td {
            background-color: #e0e9ff;
        }

        .team-info {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 15px;
        }

        .team-logo img {
            max-height: 40px;
            width: auto;
        }

        .team-name {
            font-size: 0.8rem;
            font-weight: bold;
        }

        .stadium-info {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .stadium-info img {
            height: 25px;
            width: auto;
        }

        .arrow-link {
            font-size: 1.8rem;
            color: #000000;
            text-decoration: none;
        }

        .arrow-link:hover {
            color: #0056b3;
        }

        /* For smaller screens, adjust padding to make the table more compact */
        @media (max-width: 768px) {

            .table-container th,
            .table-container td {
                padding: 8px 10px;
            }

            .team-name {
                font-size: 0.7rem;
            }

            .arrow-link {
                font-size: 1.5rem;
            }
        }
    </style>

    <div class="container my-4">
        <!-- Wrap the table inside a scrollable wrapper -->
        <div class="table-wrapper">
            <table class="table-container">
                <thead>
                    <tr>
                        <th>League</th>
                        <th>Teams</th>
                        <th>Time</th>
                        <th>Date</th>
                        <th>Stadium</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($tickets as $ticket)
                        <tr onclick="window.location.href='{{ route('welcome') }}'" style="cursor: pointer;">
                            <!-- League Logo -->
                            <td>
                                <img src="https://pkrsvayriengfc.com/wp-content/uploads/2022/03/CPL-Logo-1.png"
                                    alt="League Logo" style="height: 40px;">
                            </td>

                            <!-- Team Information -->
                            <td>
                                <div class="team-info">
                                    <!-- Team 1 Logo -->
                                    <div class="team-logo">
                                        <img src="{{ url($ticket->image1) }}" alt="{{ $ticket->nameteam1 }} Logo">
                                    </div>
                                    <!-- Team Names -->
                                    <span class="team-name">{{ $ticket->nameteam1 }}</span>
                                    <span class="team-name">VS</span>
                                    <span class="team-name">{{ $ticket->nameteam2 }}</span>
                                    <!-- Team 2 Logo -->
                                    <div class="team-logo">
                                        <img src="{{ url($ticket->image2) }}" alt="{{ $ticket->nameteam2 }} Logo">
                                    </div>
                                </div>
                            </td>

                            <!-- Match Time -->
                            <td><i class="bi bi-clock"></i>{{ $ticket->time }}</td>

                            <!-- Match Date -->
                            <td><i class="bi bi-calendar-week"></i> {{ $ticket->date }}</td>

                            <!-- Stadium Info -->
                            <td>
                                <div class="stadium-info">
                                    <img src="https://cdn-icons-png.flaticon.com/512/88/88961.png" alt="Stadium Icon">
                                    <span>{{ $ticket->stadium }}</span>
                                </div>
                            </td>

                            <!-- Action (Arrow Link) -->
                            <td>
                                <a href="{{ route('welcome') }}" class="arrow-link">
                                    <i class="bi bi-arrow-right"></i>
                                </a>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</x-navbar>
