<x-app-layout>
    <x-slot name="title">Kelola Match</x-slot>

    <div class="d-flex align-items-start justify-content-between mb-4 flex-wrap gap-3">
        <div>
            <div style="font-size:20px;font-weight:800;color:#0f172a;font-family:'Plus Jakarta Sans',sans-serif">Kelola Match</div>
            <div style="font-size:13px;color:#64748b">Review dan resolve pertandingan</div>
        </div>
        <div class="d-flex gap-2 flex-wrap">
            @foreach([''=>'Semua','pending'=>'Pending','in_progress'=>'Live','disputed'=>'Sengketa','completed'=>'Selesai'] as $s=>$l)
            <a href="{{ route('admin.matches', $s ? ['status'=>$s] : []) }}"
               style="text-decoration:none;padding:5px 12px;border-radius:20px;font-size:12px;font-weight:700;{{ request('status') === $s || (!request('status') && !$s) ? 'background:#1d4ed8;color:#fff' : 'background:#f1f5f9;color:#64748b' }}">
                {{ $l }}
            </a>
            @endforeach
        </div>
    </div>

    <div class="pes-card">
        <div style="overflow-x:auto">
            <table class="pes-table">
                <thead>
                    <tr>
                        <th style="width:50px">#</th>
                        <th>Host</th>
                        <th>Guest</th>
                        <th>Skor</th>
                        <th>Status</th>
                        <th class="d-none d-lg-table-cell">Tanggal</th>
                        <th>Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($matches as $match)
                    <tr>
                        <td style="font-size:11px;color:#94a3b8;font-family:monospace">{{ $match->id }}</td>
                        <td>
                            <div class="d-flex align-items-center gap-2">
                                <img src="{{ $match->host->avatar ?? 'https://ui-avatars.com/api/?name=Host&background=1d4ed8&color=fff' }}"
                                     style="width:30px;height:30px;border-radius:8px" alt="">
                                <span style="font-size:13px;font-weight:500;color:#0f172a">{{ $match->host->username }}</span>
                            </div>
                        </td>
                        <td>
                            <div class="d-flex align-items-center gap-2">
                                <img src="{{ $match->guest->avatar ?? 'https://ui-avatars.com/api/?name=Guest&background=7c3aed&color=fff' }}"
                                     style="width:30px;height:30px;border-radius:8px" alt="">
                                <span style="font-size:13px;font-weight:500;color:#0f172a">{{ $match->guest->username }}</span>
                            </div>
                        </td>
                        <td>
                            @if($match->status === 'completed')
                                <span style="font-size:14px;font-weight:800;font-family:'Plus Jakarta Sans',sans-serif">{{ $match->score_host }}–{{ $match->score_guest }}</span>
                            @elseif($match->status === 'disputed')
                                <div style="font-size:11px;color:#ca8a04">
                                    <div>Host: {{ $match->submitted_host_score_host }}-{{ $match->submitted_host_score_guest }}</div>
                                    <div>Guest: {{ $match->submitted_guest_score_host }}-{{ $match->submitted_guest_score_guest }}</div>
                                </div>
                            @else
                                <span style="color:#94a3b8">—</span>
                            @endif
                        </td>
                        <td>
                            @php
                                $s = $match->status;
                                $ss = match($s) { 'completed'=>'background:#f0fdf4;color:#15803d', 'disputed'=>'background:#fef9c3;color:#ca8a04', 'in_progress'=>'background:#eff6ff;color:#1d4ed8', default=>'background:#f1f5f9;color:#64748b' };
                            @endphp
                            <span style="padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;{{ $ss }}">
                                {{ ucfirst(str_replace('_',' ',$s)) }}
                            </span>
                        </td>
                        <td class="d-none d-lg-table-cell" style="font-size:12px;color:#64748b">{{ $match->created_at->format('d M Y H:i') }}</td>
                        <td>
                            @if($match->status === 'disputed')
                                <button class="btn-pes-secondary" style="font-size:12px;padding:5px 12px;background:#fef9c3;color:#ca8a04;border-color:#fde68a"
                                        data-bs-toggle="modal" data-bs-target="#resolve-{{ $match->id }}">
                                    <i class="ti ti-gavel"></i> Resolve
                                </button>
                                <!-- Resolve modal -->
                                <div class="modal fade" id="resolve-{{ $match->id }}" tabindex="-1">
                                    <div class="modal-dialog modal-dialog-centered">
                                        <div class="modal-content" style="border-radius:20px;border:none">
                                            <div class="modal-header" style="border-bottom:1px solid #f1f5f9;padding:20px 24px">
                                                <h5 class="modal-title" style="font-size:15px;font-weight:700">
                                                    Resolve Match #{{ $match->id }}
                                                </h5>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                            </div>
                                            <form method="POST" action="{{ route('admin.matches.resolve', $match->id) }}">
                                                @csrf
                                                <div class="modal-body" style="padding:20px 24px">
                                                    <div style="font-size:13px;color:#64748b;margin-bottom:14px">
                                                        {{ $match->host->username }} vs {{ $match->guest->username }}
                                                    </div>
                                                    <div class="row g-3 mb-3">
                                                        <div class="col-6">
                                                            <label class="pes-label">Gol Host</label>
                                                            <input type="number" name="score_host" min="0" max="99" class="pes-input"
                                                                   style="text-align:center;font-size:24px;font-weight:900;padding:12px;font-family:'Plus Jakarta Sans',sans-serif" required>
                                                        </div>
                                                        <div class="col-6">
                                                            <label class="pes-label">Gol Guest</label>
                                                            <input type="number" name="score_guest" min="0" max="99" class="pes-input"
                                                                   style="text-align:center;font-size:24px;font-weight:900;padding:12px;font-family:'Plus Jakarta Sans',sans-serif" required>
                                                        </div>
                                                    </div>
                                                    <label class="pes-label">Catatan Admin (opsional)</label>
                                                    <textarea name="admin_note" rows="2" class="pes-input" style="font-size:13px" placeholder="Alasan keputusan..."></textarea>
                                                </div>
                                                <div class="modal-footer" style="border-top:1px solid #f1f5f9;padding:16px 24px;gap:8px">
                                                    <button type="submit" class="btn-pes-primary"><i class="ti ti-check"></i> Konfirmasi</button>
                                                    <button type="button" class="btn-pes-secondary" data-bs-dismiss="modal">Batal</button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            @else
                                <a href="{{ route('match.show', $match->id) }}" class="btn-pes-ghost" style="font-size:12px;text-decoration:none;padding:5px 10px">
                                    <i class="ti ti-eye"></i>
                                </a>
                            @endif
                        </td>
                    </tr>
                    @empty
                        <tr><td colspan="7" style="text-align:center;padding:48px;color:#94a3b8">Tidak ada match ditemukan</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($matches->hasPages())
        <div style="padding:14px 20px;border-top:1px solid #f1f5f9">{{ $matches->links() }}</div>
        @endif
    </div>
</x-app-layout>
