@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);
}

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

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

.match-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
}

.team img {
    width: 64px;
    height: 64px;
    object-fit: contain;
}

.team h6 {
    margin-top: 8px;
    font-weight: 600;
}

.match-center h2 {
    font-weight: 700;
    color: var(--primary);
}

.match-center .time {
    color: var(--muted);
    font-size: 14px;
}

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

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

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

/* Tables */
.table {
    background: var(--card);
    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;
}

/* Score Header */
.score {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: #fff;
    border-radius: 12px;
    padding: 14px 18px;
    margin: 20px 0 10px;
    font-weight: 600;
}

.score span {
    font-size: 18px;
    font-weight: 700;
}

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

@php
    $match_time = strtotime($match->date_time_gmt . ' +5 hours 30 minutes');
@endphp

<div class="container-fluid">
    <div class="page-title mb-3">
        <div class="row align-items-center">
            <div class="col-8">
                <h3>Match Details</h3>
            </div>
            <div class="col-4 text-end">
                <a href="{{ url('admin/view-predictions') }}" class="btn btn-secondary">
                    <i class="fa fa-arrow-left"></i>
                </a>
            </div>
        </div>
    </div>
</div>

<div class="container">

    {{-- Match Card --}}
    <div class="match-card mb-4">
        <div class="match-header">
            <div class="team">
                <img src="{{ $match->mt1teamimg }}">
                <h6>{{ $match->team_1 }}</h6>
            </div>

            <div class="match-center">
                <h2>{{ date('h:i A', $match_time) }}</h2>
                <div class="time">{{ date('d M Y', $match_time) }}</div>
                <div class="time">{{ $match->venue }}</div>
            </div>

            <div class="team">
                <img src="{{ $match->mt2teamimg }}">
                <h6>{{ $match->team_2 }}</h6>
            </div>
        </div>
    </div>

    {{-- Tabs --}}
    <ul class="nav nav-tabs mb-3" id="predictionTabs">
        <li class="nav-item">
            <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#prediction">Prediction</button>
        </li>
        <li class="nav-item">
            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#scoreboard">Scoreboard</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 mb-4">

        {{-- Prediction --}}
        <div class="tab-pane fade show active" id="prediction">
            <div class="table-responsive">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Doctor</th>
                            <th>Winner</th>
                            <th>Batsman</th>
                            <th>Batsman Score</th>
                            <th>Bowler</th>
                            <th>Bowler Wicket</th>
                            <!--<th>TM Name</th>
                            <th>TM ID</th>-->
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($prediction as $p)
                            <tr>
                                <td>{{ $p->doctorname }}</td>
                                <td>{{ $p->winner }}</td>
                                <td>{{ $p->top_batter }}</td>
                                <td>{{ $p->top_batter_score }}</td>
                                <td>{{ $p->top_bowler }}</td>
                                <td>{{ $p->top_bowler_wicket }}</td>
                                <!--<td>{{ $p->name }}</td>
                                <td>{{ $p->email }}</td>-->
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>

        {{-- Scoreboard --}}
        <div class="tab-pane fade" id="scoreboard">

            @foreach([$match->mt1id, $match->mt2id] as $team)
                @php
                    $teamId = $team;
                    $opponentTeamId = $teamId == $match->mt1id ? $match->mt2id : $match->mt1id;
                    $teamname = App\Models\MatchTeam::find($teamId)->teamname;
                    $score = App\Models\Scorecard::where('match_id',$match->match_id)
                            ->where('team_name',$teamname." Inning 1")->first();
                @endphp

                @if($score)
                    <div class="score">
                        {{ $teamname }} Inning
                        <span>{{ $score->runs }}-{{ $score->wickets }} / {{ $score->overs }} Ov</span>
                    </div>

                    <div class="table-responsive mb-3">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>Batsman</th>
                                    <th>R</th>
                                    <th>B</th>
                                    <th>4s</th>
                                    <th>6s</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($batsmens->where('team_id',$teamId) as $b)
                                    <tr>
                                        <td>{{ $b->name }}</td>
                                        <td>{{ $b->runs }}</td>
                                        <td>{{ $b->balls }}</td>
                                        <td>{{ $b->fours }}</td>
                                        <td>{{ $b->sixes }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>

                    <div class="table-responsive">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>Bowler</th>
                                    <th>O</th>
                                    <th>M</th>
                                    <th>W</th>
                                    <th>R</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($bowlers->where('team_id',$opponentTeamId) as $bw)
                                    <tr>
                                        <td>{{ $bw->name }}</td>
                                        <td>{{ $bw->overs }}</td>
                                        <td>{{ $bw->maidens }}</td>
                                        <td>{{ $bw->wickets }}</td>
                                        <td>{{ $bw->runs_conceded }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @endif
            @endforeach

        </div>

        {{-- Winner --}}
        <div class="tab-pane fade" id="winner">
            <div class="table-responsive">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Rank</th>
                            <th>User</th>
                            <th>Points</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($dailyWinners as $i => $u)
                            <tr>
                                <td>#{{ $i+1 }}</td>
                                <td>
                                    @if($i==0) 🥇
                                    @elseif($i==1) 🥈
                                    @elseif($i==2) 🥉
                                    @endif
                                    {{ $u->doctorname }}
                                </td>
                                <td>{{ $u->total_points }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>

    </div>
</div>

@endsection