@extends('layouts.app')

@section('title', 'Jadwal Piala Dunia 2026')

@push('css')
<style>
.admin-layout{display:flex;min-height:calc(100vh - 70px)}.admin-sidebar{width:250px;background:#0d1117;border-right:1px solid #1e293b;padding:1rem 0;position:fixed;top:64px;left:0;bottom:0;overflow-y:auto}.admin-sidebar-header{padding:1rem 1.25rem;display:flex;align-items:center;gap:.75rem;border-bottom:1px solid #1e293b;margin-bottom:.5rem;color:#10b981;font-weight:700}.admin-logo{width:32px;height:32px;background:#10b981;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#0a0f1a;font-weight:900;font-size:14px}.admin-nav{display:flex;flex-direction:column;gap:2px;padding:0 .5rem}.admin-nav-item{display:flex;align-items:center;gap:.75rem;padding:.625rem .75rem;color:#94a3b8;text-decoration:none;border-radius:8px;font-size:.875rem;transition:all .2s}.admin-nav-item:hover{background:#1e293b;color:#e2e8f0}.admin-nav-item.active{background:rgba(16,185,129,.1);color:#10b981;font-weight:600}.nav-icon{font-size:16px;width:20px;text-align:center}.admin-main{margin-left:250px;flex:1;padding:1.5rem}

/* Page header */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.page-header h2 {
    font-size: 1.35rem;
    font-weight: 700;
    color: #e2e8f0;
}

.btn-add {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: #10b981;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s, box-shadow 0.2s;
}

.btn-add:hover {
    background: #059669;
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3);
    transform: translateY(-1px);
}

.btn-add:active {
    transform: translateY(0);
}

/* Filters */
.filters-bar {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    align-items: center;
}

.filters-bar select {
    padding: 0.5rem 0.75rem;
    background: #111827;
    border: 1px solid #1e293b;
    border-radius: 8px;
    color: #e2e8f0;
    font-size: 0.8125rem;
    font-family: inherit;
    outline: none;
    cursor: pointer;
    transition: border-color 0.2s;
}

.filters-bar select:focus {
    border-color: #10b981;
}

.filters-bar label {
    color: #94a3b8;
    font-size: 0.8125rem;
    font-weight: 500;
}

/* Matches table */
.matches-table-wrapper {
    overflow-x: auto;
    border: 1px solid #1e293b;
    border-radius: 12px;
    background: #111827;
}

.matches-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
    white-space: nowrap;
}

.matches-table thead th {
    background: #0f172a;
    padding: 0.75rem 0.75rem;
    text-align: left;
    color: #94a3b8;
    font-weight: 600;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #1e293b;
}

.matches-table tbody td {
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid rgba(30, 41, 59, 0.5);
    color: #e2e8f0;
    vertical-align: middle;
}

.matches-table tbody tr:hover {
    background: rgba(16, 185, 129, 0.03);
}

.matches-table tbody tr:last-child td {
    border-bottom: none;
}

.score-cell {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #f59e0b;
    text-align: center;
    min-width: 60px;
    display: inline-block;
}

/* Badges */
.badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.badge-scheduled {
    background: rgba(100, 116, 139, 0.15);
    color: #94a3b8;
    border: 1px solid rgba(100, 116, 139, 0.3);
}

.badge-live {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
    animation: pulse-badge 2s infinite;
}

@keyframes pulse-badge {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.badge-completed {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

/* Action buttons */
.btn-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.6rem;
    border: 1px solid #1e293b;
    border-radius: 6px;
    font-size: 0.75rem;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    color: #94a3b8;
    background: transparent;
    gap: 0.3rem;
    margin-right: 0.35rem;
}

.btn-action:hover {
    border-color: #10b981;
    color: #10b981;
    background: rgba(16, 185, 129, 0.05);
}

.btn-action.btn-delete:hover {
    border-color: #ef4444;
    color: #ef4444;
    background: rgba(239, 68, 68, 0.05);
}

/* Modal */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal {
    background: #111827;
    border: 1px solid #1e293b;
    border-radius: 16px;
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
    transform: translateY(20px);
    transition: transform 0.3s;
}

.modal-overlay.active .modal {
    transform: translateY(0);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #1e293b;
}

.modal-header h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #e2e8f0;
}

.modal-close {
    background: none;
    border: none;
    color: #64748b;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
    transition: color 0.2s;
}

.modal-close:hover {
    color: #e2e8f0;
}

.modal-body {
    padding: 1.5rem;
}

.modal-body .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.modal-body .form-group {
    margin-bottom: 0;
}

.modal-body .form-group.full-width {
    grid-column: 1 / -1;
}

@media (max-width: 500px) {
    .modal-body .form-grid {
        grid-template-columns: 1fr;
    }
}

.modal-body label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: #94a3b8;
    margin-bottom: 0.375rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.modal-body input,
.modal-body select {
    width: 100%;
    padding: 0.6rem 0.75rem;
    background: #0f172a;
    border: 1px solid #1e293b;
    border-radius: 8px;
    color: #e2e8f0;
    font-size: 0.85rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.modal-body input:focus,
.modal-body select:focus {
    border-color: #10b981;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.15);
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid #1e293b;
}

.btn-cancel {
    padding: 0.6rem 1.25rem;
    background: transparent;
    border: 1px solid #1e293b;
    border-radius: 8px;
    color: #94a3b8;
    font-size: 0.85rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-cancel:hover {
    border-color: #64748b;
    color: #e2e8f0;
}

.btn-submit {
    padding: 0.6rem 1.25rem;
    background: #10b981;
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-submit:hover {
    background: #059669;
}

/* Alert */
.alert {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 0.8125rem;
    margin-bottom: 1.25rem;
    border: 1px solid;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.alert-success {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.3);
    color: #10b981;
}

.alert-danger {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

/* Empty state */
.empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
    color: #64748b;
}

.empty-state p {
    font-size: 0.9rem;
    margin-top: 0.5rem;
}
</style>
@endpush

@section('content')
<div class="admin-layout">
    <aside class="admin-sidebar">
        <div class="admin-sidebar-header"><span class="admin-logo">SP</span><span>Admin Panel</span></div>
        <nav class="admin-nav">
            <a href="/admin" class="admin-nav-item"><span class="nav-icon">&#9638;</span> Dashboard</a>
            <a href="/admin/streams" class="admin-nav-item"><span class="nav-icon">&#9654;</span> Streams</a>
            <a href="/admin/ads" class="admin-nav-item"><span class="nav-icon">&#9672;</span> Iklan</a>
            <a href="/admin/settings" class="admin-nav-item"><span class="nav-icon">&#9881;</span> Pengaturan</a>
            <a href="/admin/worldcup/groups" class="admin-nav-item"><span class="nav-icon">&#9733;</span> Klasemen WC</a>
            <a href="/admin/worldcup/matches" class="admin-nav-item active"><span class="nav-icon">&#9998;</span> Jadwal WC</a>
            <a href="/admin/seed" class="admin-nav-item" onclick="return confirm('Seed ulang data? Data lama akan direset!')"><span class="nav-icon">&#8635;</span> Seed Data</a>
        </nav>
    </aside>
    <main class="admin-main">
        @if(session('success'))
            <div class="alert alert-success">
                <span>{{ session('success') }}</span>
            </div>
        @endif

        @if(session('error'))
            <div class="alert alert-danger">
                <span>{{ session('error') }}</span>
            </div>
        @endif

        <div class="page-header">
            <h2>&#9917; Jadwal Pertandingan Piala Dunia 2026</h2>
            <button type="button" class="btn-add" onclick="openModal()">+ Tambah Pertandingan</button>
        </div>

        {{-- Filters --}}
        <div class="filters-bar">
            <label>Grup:</label>
            <select id="filterGroup" onchange="applyFilters()">
                <option value="">Semua Grup</option>
                <option value="A" {{ request('group') === 'A' ? 'selected' : '' }}>Grup A</option>
                <option value="B" {{ request('group') === 'B' ? 'selected' : '' }}>Grup B</option>
                <option value="C" {{ request('group') === 'C' ? 'selected' : '' }}>Grup C</option>
                <option value="D" {{ request('group') === 'D' ? 'selected' : '' }}>Grup D</option>
                <option value="E" {{ request('group') === 'E' ? 'selected' : '' }}>Grup E</option>
                <option value="F" {{ request('group') === 'F' ? 'selected' : '' }}>Grup F</option>
                <option value="G" {{ request('group') === 'G' ? 'selected' : '' }}>Grup G</option>
                <option value="H" {{ request('group') === 'H' ? 'selected' : '' }}>Grup H</option>
                <option value="R16" {{ request('group') === 'R16' ? 'selected' : '' }}>Babak 16 Besar</option>
                <option value="QF" {{ request('group') === 'QF' ? 'selected' : '' }}>Perempat Final</option>
                <option value="SF" {{ request('group') === 'SF' ? 'selected' : '' }}>Semi Final</option>
                <option value="F" {{ request('group') === 'F' ? 'selected' : '' }}>Final</option>
                <option value="3P" {{ request('group') === '3P' ? 'selected' : '' }}>Perebutan Juara 3</option>
            </select>

            <label>Status:</label>
            <select id="filterStatus" onchange="applyFilters()">
                <option value="">Semua Status</option>
                <option value="scheduled" {{ request('status') === 'scheduled' ? 'selected' : '' }}>Dijadwalkan</option>
                <option value="live" {{ request('status') === 'live' ? 'selected' : '' }}>Sedang Berlangsung</option>
                <option value="completed" {{ request('status') === 'completed' ? 'selected' : '' }}>Selesai</option>
            </select>
        </div>

        {{-- Matches Table --}}
        <div class="matches-table-wrapper">
            @if($matches->count() > 0)
            <table class="matches-table" id="matchesTable">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Grup</th>
                        <th>Tim Rumah</th>
                        <th>Skor</th>
                        <th>Tim Tamu</th>
                        <th>Tanggal</th>
                        <th>Waktu</th>
                        <th>Stadion</th>
                        <th>Status</th>
                        <th>Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($matches as $match)
                    <tr data-group="{{ $match->group_name ?? '' }}" data-status="{{ $match->status ?? '' }}">
                        <td>#{{ $match->id }}</td>
                        <td>
                            @if($match->round && $match->round !== 'group')
                                {{ ucfirst(str_replace('_', ' ', $match->round)) }}
                            @else
                                {{ $match->group_name ? 'Grup ' . $match->group_name : '-' }}
                            @endif
                        </td>
                        <td>
                            <span style="margin-right:0.35rem;">{{ $match->home_team_code ? $match->home_team_code : '' }}</span>
                            {{ $match->home_team }}
                        </td>
                        <td class="score-cell">
                            {{ $match->home_score ?? '-' }} - {{ $match->away_score ?? '-' }}
                        </td>
                        <td>
                            <span style="margin-right:0.35rem;">{{ $match->away_team_code ? $match->away_team_code : '' }}</span>
                            {{ $match->away_team }}
                        </td>
                        <td>{{ $match->match_date ? \Carbon\Carbon::parse($match->match_date)->format('d M Y') : '-' }}</td>
                        <td>{{ $match->match_time ?? '-' }}</td>
                        <td>
                            {{ $match->stadium ?? '-' }}
                            @if($match->city)
                                <br><span style="color:#64748b;font-size:0.75rem;">{{ $match->city }}</span>
                            @endif
                        </td>
                        <td>
                            @php
                                $statusClass = 'badge-scheduled';
                                $statusLabel = 'Dijadwalkan';
                                if(($match->status ?? '') === 'live') { $statusClass = 'badge-live'; $statusLabel = 'Live'; }
                                elseif(($match->status ?? '') === 'completed') { $statusClass = 'badge-completed'; $statusLabel = 'Selesai'; }
                            @endphp
                            <span class="badge {{ $statusClass }}">{{ $statusLabel }}</span>
                        </td>
                        <td>
                            <button type="button" class="btn-action" onclick="editMatch({{ $match->id }})">&#9998; Edit</button>
                            <button type="button" class="btn-action btn-delete" onclick="deleteMatch({{ $match->id }})">&#128465; Hapus</button>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
            @else
            <div class="empty-state">
                <p>Belum ada data pertandingan.</p>
            </div>
            @endif
        </div>
    </main>
</div>

{{-- Modal Add/Edit --}}
<div class="modal-overlay" id="matchModal">
    <div class="modal">
        <div class="modal-header">
            <h3 id="modalTitle">Tambah Pertandingan</h3>
            <button type="button" class="modal-close" onclick="closeModal()">&times;</button>
        </div>
        <form id="matchForm" method="POST" action="/admin/worldcup/matches">
            @csrf
            <input type="hidden" name="_method" value="POST" id="formMethod">
            <input type="hidden" name="match_id" id="matchId" value="">

            <div class="modal-body">
                <div class="form-grid">
                    <div class="form-group">
                        <label for="inputGroup">Grup</label>
                        <select name="group_name" id="inputGroup">
                            <option value="A">Grup A</option>
                            <option value="B">Grup B</option>
                            <option value="C">Grup C</option>
                            <option value="D">Grup D</option>
                            <option value="E">Grup E</option>
                            <option value="F">Grup F</option>
                            <option value="G">Grup G</option>
                            <option value="H">Grup H</option>
                            <option value="R16">Babak 16 Besar</option>
                            <option value="QF">Perempat Final</option>
                            <option value="SF">Semi Final</option>
                            <option value="F">Final</option>
                            <option value="3P">Perebutan Juara 3</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="inputRound">Babak</label>
                        <select name="round" id="inputRound">
                            <option value="group">Fase Grup</option>
                            <option value="round_of_16">Babak 16 Besar</option>
                            <option value="quarter_final">Perempat Final</option>
                            <option value="semi_final">Semi Final</option>
                            <option value="third_place">Perebutan Juara 3</option>
                            <option value="final">Final</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="inputHomeTeam">Tim Rumah</label>
                        <input type="text" name="home_team" id="inputHomeTeam" placeholder="Nama tim rumah" required>
                    </div>
                    <div class="form-group">
                        <label for="inputAwayTeam">Tim Tamu</label>
                        <input type="text" name="away_team" id="inputAwayTeam" placeholder="Nama tim tamu" required>
                    </div>
                    <div class="form-group">
                        <label for="inputHomeCode">Kode Tim Rumah</label>
                        <input type="text" name="home_team_code" id="inputHomeCode" placeholder="Contoh: ARG" maxlength="5">
                    </div>
                    <div class="form-group">
                        <label for="inputAwayCode">Kode Tim Tamu</label>
                        <input type="text" name="away_team_code" id="inputAwayCode" placeholder="Contoh: BRA" maxlength="5">
                    </div>
                    <div class="form-group">
                        <label for="inputHomeScore">Skor Rumah</label>
                        <input type="number" name="home_score" id="inputHomeScore" value="" min="0">
                    </div>
                    <div class="form-group">
                        <label for="inputAwayScore">Skor Tamu</label>
                        <input type="number" name="away_score" id="inputAwayScore" value="" min="0">
                    </div>
                    <div class="form-group">
                        <label for="inputDate">Tanggal Pertandingan</label>
                        <input type="date" name="match_date" id="inputDate">
                    </div>
                    <div class="form-group">
                        <label for="inputTime">Waktu</label>
                        <input type="time" name="match_time" id="inputTime">
                    </div>
                    <div class="form-group">
                        <label for="inputStadium">Stadion</label>
                        <input type="text" name="stadium" id="inputStadium" placeholder="Nama stadion">
                    </div>
                    <div class="form-group">
                        <label for="inputCity">Kota</label>
                        <input type="text" name="city" id="inputCity" placeholder="Nama kota">
                    </div>
                    <div class="form-group full-width">
                        <label for="inputStatus">Status</label>
                        <select name="status" id="inputStatus">
                            <option value="scheduled">Dijadwalkan</option>
                            <option value="live">Sedang Berlangsung</option>
                            <option value="completed">Selesai</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn-cancel" onclick="closeModal()">Batal</button>
                <button type="submit" class="btn-submit" id="btnSubmit">Simpan</button>
            </div>
        </form>
    </div>
</div>
@endsection

@push('js')
<script>
(function() {
    var modal = document.getElementById('matchModal');
    var matchForm = document.getElementById('matchForm');
    var modalTitle = document.getElementById('modalTitle');
    var formMethod = document.getElementById('formMethod');
    var matchIdInput = document.getElementById('matchId');

    window.openModal = function() {
        modalTitle.textContent = 'Tambah Pertandingan';
        formMethod.value = 'POST';
        matchForm.action = '/admin/worldcup/matches';
        matchIdInput.value = '';
        matchForm.reset();
        modal.classList.add('active');
    };

    window.closeModal = function() {
        modal.classList.remove('active');
    };

    window.editMatch = function(id) {
        var row = document.querySelector('tr td:first-child');
        // Find the row containing this match
        var rows = document.querySelectorAll('#matchesTable tbody tr');
        var matchRow = null;
        for (var i = 0; i < rows.length; i++) {
            var firstTd = rows[i].querySelector('td');
            if (firstTd && firstTd.textContent.trim() === '#' + id) {
                matchRow = rows[i];
                break;
            }
        }

        if (!matchRow) return;

        var tds = matchRow.querySelectorAll('td');

        modalTitle.textContent = 'Edit Pertandingan #' + id;
        formMethod.value = 'PUT';
        matchForm.action = '/admin/worldcup/matches/' + id;
        matchIdInput.value = id;

        // Group - parse from the display text
        var groupText = tds[1].textContent.trim();
        var groupMap = {
            'Grup A': 'A', 'Grup B': 'B', 'Grup C': 'C', 'Grup D': 'D',
            'Grup E': 'E', 'Grup F': 'F', 'Grup G': 'G', 'Grup H': 'H',
            'Babak 16 Besar': 'R16', 'Perempat Final': 'QF',
            'Semi Final': 'SF', 'Final': 'F', 'Perebutan Juara 3': '3P'
        };
        document.getElementById('inputGroup').value = groupMap[groupText] || 'A';

        // Round
        var roundMap = {
            'Grup A': 'group', 'Grup B': 'group', 'Grup C': 'group', 'Grup D': 'group',
            'Grup E': 'group', 'Grup F': 'group', 'Grup G': 'group', 'Grup H': 'group',
            'Babak 16 Besar': 'round_of_16', 'Perempat Final': 'quarter_final',
            'Semi Final': 'semi_final', 'Final': 'final', 'Perebutan Juara 3': 'third_place'
        };
        document.getElementById('inputRound').value = roundMap[groupText] || 'group';

        // Home team
        var homeTd = tds[2].innerHTML.trim();
        var homeParts = homeTd.split(/<span[^>]*>(.*?)<\/span>\s*/);
        document.getElementById('inputHomeTeam').value = (homeParts[2] || homeTd).trim();
        var homeCodeMatch = homeTd.match(/<span[^>]*>(.*?)<\/span>/);
        document.getElementById('inputHomeCode').value = homeCodeMatch ? homeCodeMatch[1].trim() : '';

        // Score
        var scoreText = tds[3].textContent.trim();
        var scoreParts = scoreText.split(' - ');
        document.getElementById('inputHomeScore').value = scoreParts[0] === '-' ? '' : scoreParts[0].trim();
        document.getElementById('inputAwayScore').value = scoreParts[1] === '-' ? '' : scoreParts[1].trim();

        // Away team
        var awayTd = tds[4].innerHTML.trim();
        var awayParts = awayTd.split(/<span[^>]*>(.*?)<\/span>\s*/);
        document.getElementById('inputAwayTeam').value = (awayParts[2] || awayTd).trim();
        var awayCodeMatch = awayTd.match(/<span[^>]*>(.*?)<\/span>/);
        document.getElementById('inputAwayCode').value = awayCodeMatch ? awayCodeMatch[1].trim() : '';

        // Date
        var dateText = tds[5].textContent.trim();
        if (dateText && dateText !== '-') {
            // Parse Indonesian date format back to YYYY-MM-DD
            var months = {
                'Jan': '01', 'Feb': '02', 'Mar': '03', 'Apr': '04',
                'Mei': '05', 'Jun': '06', 'Jul': '07', 'Agu': '08',
                'Sep': '09', 'Okt': '10', 'Nov': '11', 'Des': '12'
            };
            var dateParts = dateText.split(' ');
            if (dateParts.length === 3) {
                var day = dateParts[0].padStart(2, '0');
                var month = months[dateParts[1]] || '01';
                var year = dateParts[2];
                document.getElementById('inputDate').value = year + '-' + month + '-' + day;
            }
        }

        // Time
        var timeText = tds[6].textContent.trim();
        document.getElementById('inputTime').value = (timeText && timeText !== '-') ? timeText : '';

        // Stadium & City
        var stadiumFull = tds[7].innerHTML.trim();
        var stadiumLines = stadiumFull.split(/<br[^>]*>/);
        document.getElementById('inputStadium').value = stadiumLines[0].trim();
        if (stadiumLines[1]) {
            var cityMatch = stadiumLines[1].match(/>(.*?)</);
            document.getElementById('inputCity').value = cityMatch ? cityMatch[1].trim() : '';
        } else {
            document.getElementById('inputCity').value = '';
        }

        // Status
        var statusText = tds[8].textContent.trim().toLowerCase();
        var statusVal = 'scheduled';
        if (statusText === 'live') statusVal = 'live';
        else if (statusText === 'selesai' || statusText === 'completed') statusVal = 'completed';
        document.getElementById('inputStatus').value = statusVal;

        modal.classList.add('active');
    };

    window.deleteMatch = function(id) {
        if (!confirm('Yakin ingin menghapus pertandingan #' + id + '?')) return;

        var token = document.querySelector('meta[name="csrf-token"]');
        var csrfToken = token ? token.getAttribute('content') : '';

        fetch('/admin/worldcup/matches/' + id, {
            method: 'DELETE',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': csrfToken,
                'Accept': 'application/json'
            }
        })
        .then(function(response) { return response.json(); })
        .then(function(data) {
            if (data.success) {
                window.location.reload();
            } else {
                alert(data.message || 'Gagal menghapus pertandingan.');
            }
        })
        .catch(function() {
            alert('Terjadi kesalahan saat menghapus pertandingan.');
        });
    };

    // Close modal on overlay click
    modal.addEventListener('click', function(e) {
        if (e.target === modal) {
            closeModal();
        }
    });

    // Close modal on Escape key
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape' && modal.classList.contains('active')) {
            closeModal();
        }
    });

    // Form submit with AJAX
    matchForm.addEventListener('submit', function(e) {
        e.preventDefault();

        var isEdit = formMethod.value === 'PUT';
        var url = matchForm.action;
        var formData = new FormData(matchForm);
        var csrfToken = formData.get('_token');

        fetch(url, {
            method: isEdit ? 'PUT' : 'POST',
            headers: {
                'X-CSRF-TOKEN': csrfToken,
                'Accept': 'application/json'
            },
            body: formData
        })
        .then(function(response) {
            if (response.redirected) {
                window.location.href = response.url;
                return;
            }
            return response.json();
        })
        .then(function(data) {
            if (data && data.success === false) {
                alert(data.message || 'Terjadi kesalahan.');
            } else {
                window.location.reload();
            }
        })
        .catch(function() {
            window.location.reload();
        });
    });

    // Filter functionality
    window.applyFilters = function() {
        var groupFilter = document.getElementById('filterGroup').value;
        var statusFilter = document.getElementById('filterStatus').value;
        var rows = document.querySelectorAll('#matchesTable tbody tr');

        for (var i = 0; i < rows.length; i++) {
            var row = rows[i];
            var rowGroup = row.getAttribute('data-group') || '';
            var rowStatus = row.getAttribute('data-status') || '';

            // Also check round-based groups
            var roundEl = row.querySelector('td:nth-child(2)');
            var rowGroupText = roundEl ? roundEl.textContent.trim() : '';

            var matchGroup = true;
            var matchStatus = true;

            if (groupFilter) {
                var filterGroupMap = {
                    'R16': 'Babak 16 Besar',
                    'QF': 'Perempat Final',
                    'SF': 'Semi Final',
                    'F': 'Final',
                    '3P': 'Perebutan Juara 3'
                };
                var expectedGroup = (filterGroupMap[groupFilter] || 'Grup ' + groupFilter);
                matchGroup = (rowGroupText === expectedGroup);
            }

            if (statusFilter) {
                matchStatus = (rowStatus === statusFilter);
            }

            row.style.display = (matchGroup && matchStatus) ? '' : 'none';
        }
    };
})();
</script>
@endpush