@extends('layouts.app')

@section('content')

<style>
:root {
    --primary: #1a2693;
    --secondary: #f2a32e;
    --thrid: #52b7f0;
    --bg: #f8fafc;
    --card: #ffffff;
    --text: #0f172a;
    --muted: #64748b;
    --border: #e5e7eb;
}
.table thead tr th {
    color: #FFF;
}
.table thead {
    background: var(--thrid) ! important;
}
.table td:first-child {
    color: #1f2f3e;
    vertical-align: middle;
    font-weight: 600;
}

body{
    background:var(--bg);
}

/* Page title */
.page-title h3{
    font-weight:700;
    color:var(--text);
}

/* Tabs */
.nav-tabs{
    border-bottom:none;
    gap:10px;
}

.nav-tabs .nav-link{
    border:none;
    border-radius:999px;
    padding:8px 20px;
    background:#eef2ff;
    color:var(--primary);
    font-weight:600;
}

.nav-tabs .nav-link.active{
    background:var(--primary);
    color:#fff;
}

/* Card wrapper */
.report-card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:14px;
    padding:20px;
}

/* Tables */
.table{
    background:#fff;
    border-radius:12px;
    overflow:hidden;
}

.table thead{
    background:#f1f5f9;
}

.table th{
    font-weight:600;
    color:var(--text);
}

.table td{
    color:var(--muted);
    vertical-align:middle;
}

/* Rank badge */
.rank-badge{
    font-weight:700;
    color:var(--primary);
}

/* Winner date header */
.week-title{
    font-weight:700;
    color:var(--text);
    margin-top:25px;
}

/* Alert */
.alert{
    border-radius:12px;
    font-weight:600;
}

/* Mobile */
@media(max-width:768px){
    .table-responsive{
        overflow-x:auto;
    }
}
</style>

<!-- Header -->
<div class="container-fluid">
    <div class="page-title mb-3">
        <div class="row align-items-center">
            <div class="col-8">
                <h3>Weekly Report</h3>
            </div>
            <div class="col-4 text-end">
                <a href="{{ url('home') }}" class="btn btn-secondary">
                    <i class="fa fa-arrow-left"></i>
                </a>
            </div>
        </div>
    </div>
</div>

<div class="container default-dashboard">
    <div class="row">
        <div class="col-xl-12 mb-4">

            {{-- Tabs --}}
            <ul class="nav nav-tabs mt-4">
                <li class="nav-item">
                    <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#leaderboard">
                        Leaderboard
                    </button>
                </li>
                <li class="nav-item">
                    <button class="nav-link" data-bs-toggle="tab" data-bs-target="#winner">
                        Winner
                    </button>
                </li>
            </ul>

            <div class="tab-content mt-4">

                {{-- LEADERBOARD --}}
                <div class="tab-pane fade show active" id="leaderboard">
                    
                        <div class="table-responsive">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>Rank</th>
                                        <th>User Name</th>
                                        <th>Zone</th>
                                        <th>Points</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($weeklyScores as $index => $user)
                                        <tr>
                                            <td class="rank-badge">
                                                #{{ $index + 1 }}
                                            </td>
                                            <td>
                                                @if($index==0) 🥇
                                                @elseif($index==1) 🥈
                                                @elseif($index==2) 🥉
                                                @endif
                                                {{ $user->doctorname }}
                                            </td>
                                            <td>{{ $user->hq }}</td>
                                            <td><strong>{{ $user->total_points }}</strong></td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    
                </div>

                {{-- WINNER --}}
                <div class="tab-pane fade" id="winner">

                    <!--<div class="alert alert-warning text-center mb-4">
                        Winner of 19 May to 27 May will be declared on 28 May (Wednesday)
                    </div>-->

                    @foreach($weeklyranking as $week => $data)
                        <div class="mb-4">

                            <div class="week-title">
                                {{ \Carbon\Carbon::parse($data['start_date'])->format('M d') }}
                                -
                                {{ \Carbon\Carbon::parse($data['end_date'])->format('M d, Y') }}
                            </div>

                            <div class="table-responsive mt-3">
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th>Rank</th>
                                            <th>User Name</th>
                                            <th>Zone</th>
                                            <th>Points</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($data['rankings'] as $ranking)
                                            <tr>
                                                <td class="rank-badge">#{{ $ranking->rank }}</td>
                                                <td>{{ $ranking->doctorname }}</td>
                                                <td>{{ $ranking->hq }}</td>
                                                <td><strong>{{ $ranking->total_points }}</strong></td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>

                        </div>
                    @endforeach

                </div>

            </div>
        </div>
    </div>
</div>

@endsection