@extends('doctor.layouts.app')

@section('content')

<style>


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

/* Logo ticker */
.logo-marquee img{
    margin:0 25px;
    opacity:.9;
}

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

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

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

/* Match Card */
.match-card{
    background:var(--card);
    border-radius:16px;
    padding:18px 20px;
    border:1px solid var(--border);
    margin-bottom:18px;
    position:relative;
    transition:.25s ease;
}

.match-card:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 30px rgba(0,0,0,.06);
}

.match-type {
    font-size: 14px;
    font-weight: 600;
    color: var(--thrid);
    margin-bottom: 0px;
    text-transform: uppercase;
    text-align: center;
}

/* Predicted badge */
.predicted{
    position:absolute;
    top:14px;
    right:14px;
    background:#22c55e;
    color:#fff;
    font-size:11px;
    padding:4px 10px;
    border-radius:999px;
    font-weight:600;
}

/* Match row */
.match-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

/* Team */
.team{
    text-align:center;
    width:90px;
}

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

.team-name{
    font-size:14px;
    font-weight:600;
    margin-top:6px;
}

/* Center */
.match-center{
    text-align:center;
}

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

.match-center .time{
    font-size:13px;
    color:var(--muted);
    margin:4px 0 8px;
}

/* Status */
.status-live{color:var(--live);}
.status-ended{color:var(--ended);}

/* Button */
.btn-base {
    background: var(--secondary);
    border: none;
    border-radius: 999px;
    padding: 5px 18px;
    color: #fff;
    font-weight: 400;
    height: 30px;
    line-height: 20px;
    font-size: 14px;
}

/* Mobile */
@media(max-width:768px){
    .match-row{
        gap:10px;
    }
    .team{width:auto;}
}
</style>

{{-- Logo Marquee --}}
@include('doctor.logos')

<div class="sports-wrap mt-4">

    {{-- Tabs --}}
    <ul class="nav nav-tabs">
        <li class="nav-item">
            <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#upcoming">Upcoming</button>
        </li>
        <li class="nav-item">
            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#live">Live</button>
        </li>
        <li class="nav-item">
            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#end">End</button>
        </li>
    </ul>

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

        {{-- UPCOMING --}}
        <div class="tab-pane fade show active" id="upcoming">
            @foreach ($matches as $match)
                <div class="match-card">

                    @if(App\Models\Prediction::where('match_id',$match->match_id)
                        ->where('doctor_id',Auth::guard('enroll_doctor')->user()->doctorid)->exists())
                        <span class="predicted">Predicted</span>
                    @endif

                    <div class="match-type">{{ $match->match_type }}</div>

                    <div class="match-row">
                        <div class="team">
                            <img src="{{ $match->mt1teamimg }}">
                            <div class="team-name">{{ $match->mt1shortname }}</div>
                        </div>

                        <div class="match-center">
                            <h2>
                                {{ $match->match_started ? 'Live' : date('h:i A', strtotime($match->date_time_gmt.' +5 hours 30 minutes')) }}
                            </h2>
                            <div class="time">
                                {{ date('d M Y, H:i', strtotime($match->date_time_gmt.' +5 hours 30 minutes')) }}
                            </div>
                            <a class="btn btn-base" href="{{ url('doctor/matchdetail/'.$match->match_id) }}">
                                View Details
                            </a>
                        </div>

                        <div class="team">
                            <img src="{{ $match->mt2teamimg }}">
                            <div class="team-name">{{ $match->mt2shortname }}</div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        {{-- LIVE --}}
        <div class="tab-pane fade" id="live">
            @if($livematches->count())
                @foreach ($livematches as $match)
                    <div class="match-card">
                        <div class="match-type">{{ $match->match_type }}</div>

                        <div class="match-row">
                            <div class="team">
                                <img src="{{ $match->mt1teamimg }}">
                                <div class="team-name">{{ $match->mt1shortname }}</div>
                            </div>

                            <div class="match-center">
                                <h2 class="{{ $match->match_ended ? 'status-ended' : 'status-live' }}">
                                    {{ $match->match_ended ? 'ENDED' : 'LIVE' }}
                                </h2>
                                <div class="time">
                                    {{ date('d M Y, H:i', strtotime($match->date_time_gmt.' +5 hours 30 minutes')) }}
                                </div>
                                <a class="btn btn-base" href="{{ url('doctor/matchdetail/'.$match->match_id) }}">
                                    View Details
                                </a>
                            </div>

                            <div class="team">
                                <img src="{{ $match->mt2teamimg }}">
                                <div class="team-name">{{ $match->mt2shortname }}</div>
                            </div>
                        </div>
                    </div>
                @endforeach
            @else
                <p class="text-center text-muted mt-4">No Live Match Right Now</p>
            @endif
        </div>

        {{-- END --}}
        <div class="tab-pane fade" id="end">
            @foreach ($endmatches as $match)
                <div class="match-card">
                    <div class="match-type">{{ $match->match_type }}</div>

                    <div class="match-row">
                        <div class="team">
                            <img src="{{ $match->mt1teamimg }}">
                            <div class="team-name">{{ $match->mt1shortname }}</div>
                        </div>

                        <div class="match-center">
                            <h2 class="status-ended">ENDED</h2>
                            <div class="time">
                                {{ date('d M Y, H:i', strtotime($match->date_time_gmt.' +5 hours 30 minutes')) }}
                            </div>
                            <a class="btn btn-base" href="{{ url('doctor/matchdetail/'.$match->match_id) }}">
                                View Details
                            </a>
                        </div>

                        <div class="team">
                            <img src="{{ $match->mt2teamimg }}">
                            <div class="team-name">{{ $match->mt2shortname }}</div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

    </div>
</div>

@endsection