@extends('layouts.app')

@section('title', 'Klasemen 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}

/* Group cards */
.groups-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

@media (max-width: 1200px) {
    .groups-grid {
        grid-template-columns: 1fr;
    }
}

.group-card {
    background: #111827;
    border: 1px solid #1e293b;
    border-radius: 12px;
    overflow: hidden;
}

.group-card-header {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.05));
    padding: 0.75rem 1rem;
    font-weight: 700;
    font-size: 0.95rem;
    color: #10b981;
    border-bottom: 1px solid #1e293b;
    letter-spacing: 0.5px;
}

.group-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.group-table thead th {
    background: #0f172a;
    padding: 0.5rem 0.4rem;
    text-align: center;
    color: #94a3b8;
    font-weight: 600;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-bottom: 1px solid #1e293b;
    white-space: nowrap;
}

.group-table thead th:first-child {
    text-align: left;
    padding-left: 0.75rem;
}

.group-table tbody td {
    padding: 0.4rem;
    text-align: center;
    border-bottom: 1px solid rgba(30, 41, 59, 0.5);
    vertical-align: middle;
}

.group-table tbody td:first-child {
    text-align: left;
    padding-left: 0.75rem;
}

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

.team-name-cell {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.team-flag {
    font-size: 1.1rem;
    line-height: 1;
}

.team-label {
    color: #e2e8f0;
    font-weight: 500;
}

.group-table input[type="number"] {
    width: 42px;
    padding: 4px 2px;
    background: #0f172a;
    border: 1px solid #1e293b;
    border-radius: 6px;
    color: #e2e8f0;
    font-size: 0.8rem;
    text-align: center;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s;
    -moz-appearance: textfield;
}

.group-table input[type="number"]::-webkit-outer-spin-button,
.group-table input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.group-table input[type="number"]:focus {
    border-color: #10b981;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.15);
}

.auto-calc {
    color: #94a3b8;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    min-width: 28px;
    display: inline-block;
}

.auto-calc.gd-positive {
    color: #10b981;
}

.auto-calc.gd-negative {
    color: #ef4444;
}

.auto-calc.pts-highlight {
    color: #f59e0b;
    font-weight: 700;
}

.group-table select {
    padding: 3px 4px;
    background: #0f172a;
    border: 1px solid #1e293b;
    border-radius: 6px;
    color: #e2e8f0;
    font-size: 0.7rem;
    font-family: inherit;
    outline: none;
    cursor: pointer;
    transition: border-color 0.2s;
    min-width: 90px;
}

.group-table select:focus {
    border-color: #10b981;
}

.status-playing { color: #3b82f6; }
.status-qualified_1st { color: #10b981; }
.status-qualified_2nd { color: #22d3ee; }
.status-qualified_3rd { color: #a78bfa; }
.status-eliminated { color: #64748b; }

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

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

.btn-save {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.5rem;
    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-save:hover {
    background: #059669;
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3);
    transform: translateY(-1px);
}

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

.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;
}
</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 active"><span class="nav-icon">&#9733;</span> Klasemen WC</a>
            <a href="/admin/worldcup/matches" class="admin-nav-item"><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

        <form method="POST" action="/admin/worldcup/groups">
            @csrf
            @method('PUT')

            <div class="page-header">
                <h2>&#127942; Klasemen Grup Piala Dunia 2026</h2>
                <button type="submit" class="btn-save">&#128190; Simpan Klasemen</button>
            </div>

            <div class="groups-grid">
                @foreach($groups as $groupName => $teams)
                    <div class="group-card">
                        <div class="group-card-header">Grup {{ $groupName }}</div>
                        <table class="group-table">
                            <thead>
                                <tr>
                                    <th>Tim</th>
                                    <th>M</th>
                                    <th>M</th>
                                    <th>S</th>
                                    <th>K</th>
                                    <th>GM</th>
                                    <th>GK</th>
                                    <th>SG</th>
                                    <th>Pts</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($teams as $index => $team)
                                <tr>
                                    <td>
                                        <input type="hidden" name="groups[{{ $team->id }}][id]" value="{{ $team->id }}">
                                        <div class="team-name-cell">
                                            <span class="team-flag">{{ $team->flag_emoji }}</span>
                                            <span class="team-label">{{ $team->team_name }}</span>
                                        </div>
                                    </td>
                                    <td>
                                        <input type="number" name="groups[{{ $team->id }}][played]" value="{{ $team->played }}" min="0" max="10"
                                               data-team-id="{{ $team->id }}" data-field="played">
                                    </td>
                                    <td>
                                        <input type="number" name="groups[{{ $team->id }}][won]" value="{{ $team->won }}" min="0" max="10"
                                               data-team-id="{{ $team->id }}" data-field="won">
                                    </td>
                                    <td>
                                        <input type="number" name="groups[{{ $team->id }}][drawn]" value="{{ $team->drawn }}" min="0" max="10"
                                               data-team-id="{{ $team->id }}" data-field="drawn">
                                    </td>
                                    <td>
                                        <input type="number" name="groups[{{ $team->id }}][lost]" value="{{ $team->lost }}" min="0" max="10"
                                               data-team-id="{{ $team->id }}" data-field="lost">
                                    </td>
                                    <td>
                                        <input type="number" name="groups[{{ $team->id }}][goals_for]" value="{{ $team->goals_for }}" min="0"
                                               data-team-id="{{ $team->id }}" data-field="goals_for">
                                    </td>
                                    <td>
                                        <input type="number" name="groups[{{ $team->id }}][goals_against]" value="{{ $team->goals_against }}" min="0"
                                               data-team-id="{{ $team->id }}" data-field="goals_against">
                                    </td>
                                    <td>
                                        <span class="auto-calc {{ $team->goal_difference > 0 ? 'gd-positive' : ($team->goal_difference < 0 ? 'gd-negative' : '') }}"
                                              id="gd-{{ $team->id }}">
                                            {{ $team->goal_difference > 0 ? '+' : '' }}{{ $team->goal_difference }}
                                        </span>
                                    </td>
                                    <td>
                                        <span class="auto-calc pts-highlight" id="pts-{{ $team->id }}">
                                            {{ $team->points }}
                                        </span>
                                    </td>
                                    <td>
                                        <select name="groups[{{ $team->id }}][status]">
                                            <option value="playing" {{ $team->status === 'playing' ? 'selected' : '' }}>Playing</option>
                                            <option value="qualified_1st" {{ $team->status === 'qualified_1st' ? 'selected' : '' }}>Qualified 1st</option>
                                            <option value="qualified_2nd" {{ $team->status === 'qualified_2nd' ? 'selected' : '' }}>Qualified 2nd</option>
                                            <option value="qualified_3rd" {{ $team->status === 'qualified_3rd' ? 'selected' : '' }}>Qualified 3rd</option>
                                            <option value="eliminated" {{ $team->status === 'eliminated' ? 'selected' : '' }}>Eliminated</option>
                                        </select>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @endforeach
            </div>

            <div style="margin-top: 1.5rem; text-align: center;">
                <button type="submit" class="btn-save">&#128190; Simpan Klasemen</button>
            </div>
        </form>
    </main>
</div>
@endsection

@push('js')
<script>
(function() {
    function recalcRow(teamId) {
        var gfInput = document.querySelector('input[data-team-id="' + teamId + '"][data-field="goals_for"]');
        var gaInput = document.querySelector('input[data-team-id="' + teamId + '"][data-field="goals_against"]');
        var wonInput = document.querySelector('input[data-team-id="' + teamId + '"][data-field="won"]');
        var drawnInput = document.querySelector('input[data-team-id="' + teamId + '"][data-field="drawn"]');

        if (!gfInput || !gaInput || !wonInput || !drawnInput) return;

        var gf = parseInt(gfInput.value) || 0;
        var ga = parseInt(gaInput.value) || 0;
        var won = parseInt(wonInput.value) || 0;
        var drawn = parseInt(drawnInput.value) || 0;

        var gd = gf - ga;
        var pts = (won * 3) + drawn;

        var gdEl = document.getElementById('gd-' + teamId);
        var ptsEl = document.getElementById('pts-' + teamId);

        if (gdEl) {
            gdEl.textContent = (gd > 0 ? '+' : '') + gd;
            gdEl.className = 'auto-calc' + (gd > 0 ? ' gd-positive' : (gd < 0 ? ' gd-negative' : ''));
        }

        if (ptsEl) {
            ptsEl.textContent = pts;
        }
    }

    document.addEventListener('input', function(e) {
        if (e.target.matches('input[data-team-id][data-field]')) {
            recalcRow(e.target.getAttribute('data-team-id'));
        }
    });

    document.addEventListener('change', function(e) {
        if (e.target.matches('input[data-team-id][data-field]')) {
            recalcRow(e.target.getAttribute('data-team-id'));
        }
    });
})();
</script>
@endpush