@extends('layouts.app')

@section('content')

<style>
:root {
    --primary: #1a2693;
    --secondary: #f2a32e;
    --thrid: #52b7f0;
    --bg: #f8fafc;
    --card: #ffffff;
    --text: #0f172a;
    --muted: #64748b;
    --border: #e5e7eb;
}

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 18px;
    background: #eef2ff;
    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: 14px;
    padding: 16px 20px;
    border: 1px solid var(--border);
    margin-bottom: 16px;
    transition: all 0.25s ease;
}

.match-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

.match-type {
    font-size: 13px;
    font-weight: 600;
    color: var(--thrid);
    margin-bottom: 10px;
    text-transform: uppercase;
}

/* 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 {
    margin-top: 6px;
    font-weight: 600;
    font-size: 14px;
}

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

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

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

.match-center .btn {
    margin-top: 8px;
}

/* Status */
.status-live {
    color: #16a34a;
}

.status-ended {
    color: #dc2626;
}

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

    .team {
        width: auto;
    }
}
</style>

<!-- Header -->
<div class="container-fluid">
    <div class="page-title mb-3">
        <div class="row align-items-center">
            <div class="col-8">
                <h3>Match List</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">

            {{-- Tabs --}}
            <ul class="nav nav-tabs mt-3">
                <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 mb-4">

                {{-- UPCOMING --}}
                <div class="tab-pane fade show active" id="upcoming">
                    @foreach ($matches 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>
                                        {{ $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)) }}
                                    </div>
                                    <a class="btn btn-sm btn-primary"
                                       href="{{ url('admin/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() > 0)
                        @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)) }}
                                        </div>
                                        <a class="btn btn-sm btn-primary"
                                           href="{{ url('admin/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)) }}
                                    </div>
                                    <a class="btn btn-sm btn-primary"
                                       href="{{ url('admin/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>
    </div>
</div>

@endsection