@extends('admin.layout')
@section('title', 'Quản lý Game')
@section('heading', 'Quản lý Game')

@section('content')
    <div class="admin-panel">
        <div class="panel-head">
            <h2>Danh sách game ({{ $games->count() }})</h2>
            <button type="button" class="btn-install" style="margin:0;width:auto;padding:10px 18px;" onclick="openModal('addGame')">+ Thêm game</button>
        </div>
        <div class="table-wrap">
            <table class="admin-table">
                <thead>
                    <tr><th>#</th><th>Ảnh</th><th>Tên game</th><th>Tiền ảo</th><th>Mệnh giá</th><th>HOT</th><th>Hiển thị</th><th>Thao tác</th></tr>
                </thead>
                <tbody>
                    @forelse($games as $g)
                        <tr>
                            <td>{{ $g->id }}</td>
                            <td><span class="tbl-thumb">@if($g->image)<img src="{{ asset($g->image) }}" alt="">@endif</span></td>
                            <td><strong>{{ $g->name }}</strong><br><span class="muted">{{ $g->slug }}</span></td>
                            <td>{{ $g->currency_label }}</td>
                            <td><a href="{{ route('admin.packages', $g) }}" class="link">{{ $g->packages_count }} gói</a></td>
                            <td>{!! $g->hot ? '<span class="status-pill st-success">HOT</span>' : '<span class="muted">—</span>' !!}</td>
                            <td>{!! $g->active ? '<span class="status-pill st-success">Bật</span>' : '<span class="status-pill st-failed">Tắt</span>' !!}</td>
                            <td class="row-actions">
                                <a href="{{ route('admin.packages', $g) }}" class="btn-ghost sm">Mệnh giá</a>
                                <button type="button" class="btn-ghost sm"
                                    onclick='editGame(@json($g))'>Sửa</button>
                                <form method="POST" action="{{ route('admin.games.delete', $g) }}" onsubmit="return confirm('Xóa game này?')">
                                    @csrf @method('DELETE')
                                    <button type="submit" class="btn-ghost sm danger">Xóa</button>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="8" class="empty">Chưa có game nào.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    {{-- Modal thêm game --}}
    <div class="admin-modal" id="addGame">
        <div class="admin-modal-box">
            <div class="modal-head"><h3>Thêm game</h3><button type="button" onclick="closeModal('addGame')">&times;</button></div>
            <form method="POST" action="{{ route('admin.games.store') }}">
                @csrf
                @include('admin.partials.game-fields', ['g' => null])
                <button type="submit" class="btn-install" style="margin-top:16px;">Lưu game</button>
            </form>
        </div>
    </div>

    {{-- Modal sửa game --}}
    <div class="admin-modal" id="editGame">
        <div class="admin-modal-box">
            <div class="modal-head"><h3>Sửa game</h3><button type="button" onclick="closeModal('editGame')">&times;</button></div>
            <form method="POST" action="" id="editGameForm">
                @csrf @method('PUT')
                @include('admin.partials.game-fields', ['g' => null, 'edit' => true])
                <button type="submit" class="btn-install" style="margin-top:16px;">Cập nhật</button>
            </form>
        </div>
    </div>
@endsection

@push('scripts')
<script>
function editGame(g) {
    var f = document.getElementById('editGameForm');
    f.action = '{{ url('admin/games') }}/' + g.id;
    f.querySelector('[name=name]').value = g.name;
    f.querySelector('[name=image]').value = g.image || '';
    f.querySelector('[name=currency_label]').value = g.currency_label;
    f.querySelector('[name=sort]').value = g.sort;
    f.querySelector('[name=hot]').checked = !!g.hot;
    f.querySelector('[name=active]').checked = !!g.active;
    openModal('editGame');
}
</script>
@endpush