@extends('layouts.app')

@section('title', 'Dashboard Admin')

@push('css')
<style>
    /* ===== ADMIN LAYOUT OVERRIDES ===== */
    body {
        background-color: #f0f2f5 !important;
        color: #1e293b !important;
        padding-top: 0 !important;
    }
    body > *:not(.admin-wrapper) {
        display: none !important;
    }

    .admin-wrapper {
        display: flex !important;
        min-height: 100vh;
        width: 100%;
    }

    /* ===== SIDEBAR ===== */
    .admin-sidebar {
        width: 250px;
        min-height: 100vh;
        background-color: #0d1117;
        color: #c9d1d9;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 1000;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
    }

    .admin-sidebar .sidebar-brand {
        padding: 20px 24px;
        font-size: 18px;
        font-weight: 700;
        color: #ffffff;
        border-bottom: 1px solid #21262d;
        display: flex;
        align-items: center;
        gap: 10px;
        letter-spacing: -0.3px;
    }

    .admin-sidebar .sidebar-brand .brand-icon {
        width: 32px;
        height: 32px;
        background: linear-gradient(135deg, #ef4444, #f97316);
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
    }

    .admin-sidebar .sidebar-nav {
        list-style: none;
        padding: 12px 0;
        margin: 0;
        flex: 1;
    }

    .admin-sidebar .sidebar-nav li a {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 24px;
        color: #8b949e;
        text-decoration: none;
        font-size: 14px;
        font-weight: 500;
        transition: all 0.15s ease;
        border-left: 3px solid transparent;
    }

    .admin-sidebar .sidebar-nav li a:hover {
        color: #ffffff;
        background-color: #161b22;
        text-decoration: none;
    }

    .admin-sidebar .sidebar-nav li a.active {
        color: #ffffff;
        background-color: #161b22;
        border-left-color: #ef4444;
    }

    .admin-sidebar .sidebar-nav li a .nav-icon {
        font-size: 18px;
        width: 24px;
        text-align: center;
        flex-shrink: 0;
    }

    /* ===== MAIN CONTENT ===== */
    .admin-main {
        margin-left: 250px;
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }

    /* ===== TOP BAR ===== */
    .admin-topbar {
        background: #ffffff;
        border-bottom: 1px solid #e2e8f0;
        padding: 0 32px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: sticky;
        top: 0;
        z-index: 100;
    }

    .admin-topbar .topbar-left {
        font-size: 15px;
        font-weight: 600;
        color: #334155;
    }

    .admin-topbar .topbar-right {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .admin-topbar .admin-info {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 14px;
        color: #475569;
    }

    .admin-topbar .admin-avatar {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: linear-gradient(135deg, #6366f1, #8b5cf6);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-weight: 700;
    }

    .admin-topbar .btn-logout {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 7px 16px;
        background: #fee2e2;
        color: #dc2626;
        border: none;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        text-decoration: none;
        transition: background 0.15s;
    }

    .admin-topbar .btn-logout:hover {
        background: #fecaca;
        text-decoration: none;
        color: #b91c1c;
    }

    /* ===== CONTENT AREA ===== */
    .admin-content {
        padding: 28px 32px;
        flex: 1;
    }

    /* ===== STAT CARDS ===== */
    .stat-cards {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        margin-bottom: 28px;
    }

    .stat-card {
        background: #ffffff;
        border-radius: 12px;
        padding: 24px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
        border-left: 4px solid transparent;
        transition: transform 0.15s, box-shadow 0.15s;
    }

    .stat-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }

    .stat-card.red { border-left-color: #ef4444; }
    .stat-card.blue { border-left-color: #3b82f6; }
    .stat-card.amber { border-left-color: #f59e0b; }
    .stat-card.green { border-left-color: #22c55e; }

    .stat-card .stat-icon {
        width: 44px;
        height: 44px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        margin-bottom: 14px;
    }

    .stat-card.red .stat-icon { background: #fee2e2; }
    .stat-card.blue .stat-icon { background: #dbeafe; }
    .stat-card.amber .stat-icon { background: #fef3c7; }
    .stat-card.green .stat-icon { background: #dcfce7; }

    .stat-card .stat-label {
        font-size: 13px;
        color: #64748b;
        font-weight: 500;
        margin-bottom: 4px;
    }

    .stat-card .stat-value {
        font-size: 28px;
        font-weight: 800;
        color: #1e293b;
        line-height: 1.1;
    }

    /* ===== TABLE ===== */
    .admin-card {
        background: #ffffff;
        border-radius: 12px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
        overflow: hidden;
    }

    .admin-card .card-header {
        padding: 20px 24px;
        border-bottom: 1px solid #f1f5f9;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .admin-card .card-header h2 {
        font-size: 16px;
        font-weight: 700;
        color: #1e293b;
    }

    .admin-table {
        width: 100%;
        border-collapse: collapse;
    }

    .admin-table thead {
        background: #f8fafc;
    }

    .admin-table th {
        padding: 12px 16px;
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #64748b;
        text-align: left;
        border-bottom: 1px solid #e2e8f0;
    }

    .admin-table td {
        padding: 12px 16px;
        font-size: 14px;
        color: #334155;
        border-bottom: 1px solid #f1f5f9;
        vertical-align: middle;
    }

    .admin-table tbody tr:hover {
        background-color: #f8fafc;
    }

    .admin-table .text-muted {
        color: #94a3b8;
        font-size: 13px;
    }

    /* ===== BADGES ===== */
    .badge {
        display: inline-flex;
        align-items: center;
        padding: 3px 10px;
        border-radius: 20px;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.3px;
    }

    .badge-live {
        background: #fee2e2;
        color: #dc2626;
    }

    .badge-ended {
        background: #f1f5f9;
        color: #64748b;
    }

    .badge-scheduled {
        background: #dbeafe;
        color: #2563eb;
    }

    .badge-live::before {
        content: '';
        width: 6px;
        height: 6px;
        background: #dc2626;
        border-radius: 50%;
        margin-right: 6px;
        animation: pulse-dot 1.5s infinite;
    }

    @keyframes pulse-dot {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.3; }
    }

    /* ===== ACTION BUTTONS ===== */
    .btn-action {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 5px 10px;
        border: none;
        border-radius: 6px;
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
        text-decoration: none;
        transition: all 0.15s;
        margin-right: 4px;
    }

    .btn-toggle-live {
        background: #fef3c7;
        color: #d97706;
    }
    .btn-toggle-live:hover {
        background: #fde68a;
    }
    .btn-toggle-live.is-live {
        background: #fee2e2;
        color: #dc2626;
    }
    .btn-toggle-live.is-live:hover {
        background: #fecaca;
    }

    .btn-edit {
        background: #dbeafe;
        color: #2563eb;
        text-decoration: none;
    }
    .btn-edit:hover {
        background: #bfdbfe;
        text-decoration: none;
    }

    .empty-state {
        text-align: center;
        padding: 48px 24px;
        color: #94a3b8;
    }
    .empty-state .empty-icon {
        font-size: 40px;
        margin-bottom: 12px;
    }
    .empty-state p {
        font-size: 14px;
    }
</style>
@endpush

@section('content')
<div class="admin-wrapper">

    {{-- ===== SIDEBAR ===== --}}
    <aside class="admin-sidebar">
        <div class="sidebar-brand">
            <span class="brand-icon">📺</span>
            SportStream Admin
        </div>
        <ul class="sidebar-nav">
            <li>
                <a href="/admin/" class="active">
                    <span class="nav-icon">⊞</span>
                    Dashboard
                </a>
            </li>
            <li>
                <a href="/admin/streams">
                    <span class="nav-icon">▶</span>
                    Streams
                </a>
            </li>
            <li>
                <a href="/admin/ads">
                    <span class="nav-icon">📢</span>
                    Iklan
                </a>
            </li>
            <li>
                <a href="/admin/settings">
                    <span class="nav-icon">⚙</span>
                    Pengaturan
                </a>
            </li>
            <li>
                <a href="/admin/worldcup/groups">
                    <span class="nav-icon">🏆</span>
                    Klasemen WC
                </a>
            </li>
            <li>
                <a href="/admin/worldcup/matches">
                    <span class="nav-icon">📅</span>
                    Jadwal WC
                </a>
            </li>
            <li>
                <a href="/admin/seed">
                    <span class="nav-icon">🗃</span>
                    Seed Data
                </a>
            </li>
        </ul>
    </aside>

    {{-- ===== MAIN ===== --}}
    <div class="admin-main">

        {{-- TOP BAR --}}
        <header class="admin-topbar">
            <div class="topbar-left">📋 Dashboard</div>
            <div class="topbar-right">
                <div class="admin-info">
                    <div class="admin-avatar">A</div>
                    <span>{{ Auth::check() ? Auth::user()->name : 'Admin' }}</span>
                </div>
                <a href="{{ route('logout') }}" class="btn-logout" onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
                    ⏻ Keluar
                </a>
                <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display:none;">
                    @csrf
                </form>
            </div>
        </header>

        {{-- CONTENT --}}
        <div class="admin-content">

            {{-- STAT CARDS --}}
            <div class="stat-cards">
                <div class="stat-card red">
                    <div class="stat-icon">🔴</div>
                    <div class="stat-label">Live Streams</div>
                    <div class="stat-value">{{ $stats['live_streams'] ?? 0 }}</div>
                </div>
                <div class="stat-card blue">
                    <div class="stat-icon">▶</div>
                    <div class="stat-label">Total Streams</div>
                    <div class="stat-value">{{ $stats['total_streams'] ?? 0 }}</div>
                </div>
                <div class="stat-card amber">
                    <div class="stat-icon">📢</div>
                    <div class="stat-label">Total Iklan</div>
                    <div class="stat-value">{{ $stats['total_ads'] ?? 0 }}</div>
                </div>
                <div class="stat-card green">
                    <div class="stat-icon">🏆</div>
                    <div class="stat-label">Grup WC</div>
                    <div class="stat-value">{{ $stats['groups'] ?? 0 }}</div>
                </div>
            </div>

            {{-- RECENT STREAMS TABLE --}}
            <div class="admin-card">
                <div class="card-header">
                    <h2>📨 Stream Terbaru</h2>
                    <a href="/admin/streams" class="btn-action btn-edit" style="padding: 7px 14px; font-size: 13px;">Lihat Semua →</a>
                </div>
                @if($recentStreams->count())
                <table class="admin-table">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Judul</th>
                            <th>Tim</th>
                            <th>Skor</th>
                            <th>Channel</th>
                            <th>Status</th>
                            <th>Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($recentStreams as $stream)
                        <tr>
                            <td class="text-muted">#{{ $stream->id }}</td>
                            <td style="font-weight:600; max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">{{ $stream->title }}</td>
                            <td>
                                {{ $stream->home_team ?? '-' }} vs {{ $stream->away_team ?? '-' }}
                            </td>
                            <td>
                                @if($stream->is_live)
                                    <strong style="color:#dc2626;">{{ $stream->home_score ?? 0 }} - {{ $stream->away_score ?? 0 }}</strong>
                                @else
                                    <span class="text-muted">-</span>
                                @endif
                            </td>
                            <td>{{ $stream->channel_name ?? '-' }}</td>
                            <td>
                                @if($stream->is_live)
                                    <span class="badge badge-live">LIVE</span>
                                @elseif($stream->status === 'scheduled' || (isset($stream->match_time) && $stream->match_time && $stream->match_time->isFuture()))
                                    <span class="badge badge-scheduled">Terjadwal</span>
                                @else
                                    <span class="badge badge-ended">Selesai</span>
                                @endif
                            </td>
                            <td>
                                <button class="btn-action btn-toggle-live {{ $stream->is_live ? 'is-live' : '' }}"
                                        onclick="toggleLive({{ $stream->id }}, this)"
                                        title="{{ $stream->is_live ? 'Matikan Live' : 'Aktifkan Live' }}">
                                    {{ $stream->is_live ? '⏹ Stop' : '🔴 Live' }}
                                </button>
                                <a href="/admin/streams/{{ $stream->id }}/edit" class="btn-action btn-edit">✏️ Edit</a>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
                @else
                <div class="empty-state">
                    <div class="empty-icon">📭</div>
                    <p>Belum ada stream terbaru.</p>
                </div>
                @endif
            </div>

        </div>
    </div>
</div>
@endsection

@push('js')
<script>
async function toggleLive(streamId, btn) {
    if (!confirm('Yakin ingin mengubah status live stream ini?')) return;

    btn.disabled = true;
    btn.textContent = '⏳...';

    try {
        const res = await fetch(`/admin/streams/${streamId}/toggle-live`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content
                    || document.querySelector('input[name="_token"]')?.value
            }
        });

        if (res.ok) {
            location.reload();
        } else {
            alert('Gagal mengubah status live.');
            btn.disabled = false;
            btn.textContent = btn.classList.contains('is-live') ? '⏹ Stop' : '🔴 Live';
        }
    } catch (e) {
        alert('Terjadi kesalahan jaringan.');
        btn.disabled = false;
        btn.textContent = btn.classList.contains('is-live') ? '⏹ Stop' : '🔴 Live';
    }
}
</script>
@endpush