@extends('public.layout.app')

@section('title', 'Winners List')

@section('content')
<style>
    .city-section {
        margin-bottom: 30px;
    }
    .city-title {
        font-size: 1.5rem;
        font-weight: bold;
        color: black;
        background-color: #f8d25b;
        padding: 10px;
        border-radius: 5px 5px 0 0;
        text-align: center;
    }
    .table {
        margin: 0;
        vertical-align: middle;
    }
    .table th, .table td {
        color: white;
        text-align: center;
    }

    .table-striped tbody tr:nth-of-type(odd) {
        background-color: #fffbea;
    }

    .table-striped tbody tr:nth-of-type(even) {
        background-color: #ffffff;
    }

    .prize-image {
        width: 100px;
        height: 100px;
    }
    nav {
        padding: 2px;
    }
    .nav-tabs .nav-link {
        color: white;
    }
    .nav-tabs .nav-link.active {
        color: white;
        background-color: unset;
    }
</style>
<h1 class="apply title fw-bold text-center">
    <div class="yellow-color">Winners List </div>
</h1>
<nav>
    <div class="nav nav-tabs" id="nav-tab" role="tablist">
        @foreach(draws() as $key => $draw)
            <button 
                class="nav-link {{ $key==0 ? 'active' : '' }}" 
                id="{{ 'nav-'.$key.'-tab' }}" 
                data-bs-toggle="tab" 
                data-bs-target="#{{ 'nav-'.$key }}" 
                type="button" 
                role="tab" 
                aria-controls="{{ 'nav-'.$key }}" 
                aria-selected="true">
                {{ $draw->title }}
            </button>
        @endforeach
    </div>
</nav>
<div class="tab-content" id="nav-tabContent">
    @forelse(draws() as $key => $draw)
        <div class="tab-pane fade {{ $key==0 ? 'show active' : '' }}" id="{{ 'nav-'.$key }}" role="tabpanel" aria-labelledby="{{ 'nav-'.$key.'-tab' }}">
            @forelse(seeWinners($draw->date) as $cityId => $cityWinners)
                <div class="city-section">
                    <div class="city-title">
                        {{ App\Models\City::find($cityId)->name }}
                    </div>
                    <div class="table-responsive">
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Won At</th>
                                    <th>Participant Name</th>
                                    <th>Prize Name</th>
                                    <th>Prize Image</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($cityWinners as $index => $winner)
                                    <tr>
                                        <td>{{ $index + 1 }}</td>
                                        <td>{{ $winner->created_at->format('d M Y') }}</td>
                                        <td>{{ $winner->participant->name ?? 'N/A' }}</td>
                                        <td>{{ $winner->prize->name ?? 'N/A' }}</td>
                                        <td>
                                            <img 
                                                src="{{ $winner->prize->image }}" 
                                                alt="{{ $winner->prize->name ?? 'Prize Image' }}" 
                                                class="prize-image"
                                            >
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            @empty
                <div class="city-section text-center">
                    <div class="p-4 border border-danger rounded shadow-sm bg-light">
                        <h2 class="text-danger fw-bold">Coming Soon</h2>
                        <p class="text-muted">Stay tuned! Winners will be announced here shortly.</p>
                        <i class="bi bi-hourglass-split text-danger" style="font-size: 2rem;"></i>
                    </div>
                </div>
            @endforelse
        </div>
    @empty
    <div class="city-section text-center">
        <div class="p-4 border border-danger rounded shadow-sm bg-light">
            <h2 class="text-danger fw-bold">Coming Soon</h2>
            <p class="text-muted">Stay tuned! Winners will be announced here shortly.</p>
            <i class="bi bi-hourglass-split text-danger" style="font-size: 2rem;"></i>
        </div>
    </div>
    @endforelse
</div>
<a href="{{ route('promocode') }}" class="register-btn btn">Back</a>
@endsection

@section('script')
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
@endsection