@extends('admin.layout')
@section('title', 'Mệnh giá ' . $game->name)
@section('heading', 'Mệnh giá & tiền ảo')

@section('content')
    <div class="admin-panel">
        <div class="panel-head">
            <h2>{{ $game->name }} <span class="muted">— tiền ảo nhận: {{ $game->currency_label }}</span></h2>
            <a href="{{ route('admin.games') }}" class="btn-ghost">&#8592; Quay lại danh sách game</a>
        </div>

        <div class="pkg-grid">
            <div class="table-wrap" style="flex:1;">
                <table class="admin-table">
                    <thead>
                        <tr><th>#</th><th>Số tiền (VND)</th><th>Tiền ảo nhận</th><th>Nhãn</th><th>Hiển thị</th><th></th></tr>
                    </thead>
                    <tbody>
                        @forelse($packages as $p)
                            <tr>
                                <td>{{ $p->id }}</td>
                                <td>{{ number_format($p->price, 0, ',', '.') }}đ</td>
                                <td><strong>{{ number_format($p->virtual_amount) }}</strong> {{ $game->currency_label }}</td>
                                <td>{{ $p->label ?: '—' }}</td>
                                <td>{!! $p->active ? '<span class="status-pill st-success">Bật</span>' : '<span class="status-pill st-failed">Tắt</span>' !!}</td>
                                <td class="row-actions">
                                    <button type="button" class="btn-ghost sm" onclick='editPkg(@json($p))'>Sửa</button>
                                    <form method="POST" action="{{ route('admin.packages.delete', $p) }}" onsubmit="return confirm('Xóa mệnh giá này?')">
                                        @csrf @method('DELETE')
                                        <button class="btn-ghost sm danger">Xóa</button>
                                    </form>
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="6" class="empty">Chưa có mệnh giá nào.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <div class="pkg-form card-panel">
                <h3 id="pkgFormTitle">Thêm mệnh giá</h3>
                <form method="POST" action="{{ route('admin.packages.store', $game) }}" id="pkgForm" data-store="{{ route('admin.packages.store', $game) }}">
                    @csrf
                    <input type="hidden" name="_method" value="POST" id="pkgMethod">
                    <label class="fld"><span>Số tiền thanh toán (VND)</span>
                        <input type="number" name="price" class="input" required placeholder="20000">
                    </label>
                    <label class="fld"><span>Tiền ảo nhận ({{ $game->currency_label }})</span>
                        <input type="number" name="virtual_amount" class="input" required placeholder="113">
                    </label>
                    <label class="fld"><span>Nhãn (tùy chọn)</span>
                        <input type="text" name="label" class="input" placeholder="Gói phổ biến">
                    </label>
                    <label class="chk"><input type="checkbox" name="active" value="1" checked> Hiển thị</label>
                    <button type="submit" class="btn-install" style="margin-top:12px;">Lưu</button>
                    <button type="button" class="btn-ghost" style="width:100%;margin-top:8px;display:none;" id="pkgCancel" onclick="resetPkgForm()">Hủy sửa</button>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
var pkgForm = document.getElementById('pkgForm');
function editPkg(p) {
    pkgForm.action = '{{ url('admin/packages') }}/' + p.id;
    document.getElementById('pkgMethod').value = 'PUT';
    pkgForm.querySelector('[name=price]').value = p.price;
    pkgForm.querySelector('[name=virtual_amount]').value = p.virtual_amount;
    pkgForm.querySelector('[name=label]').value = p.label || '';
    pkgForm.querySelector('[name=active]').checked = !!p.active;
    document.getElementById('pkgFormTitle').textContent = 'Sửa mệnh giá #' + p.id;
    document.getElementById('pkgCancel').style.display = '';
    window.scrollTo(0, 0);
}
function resetPkgForm() {
    pkgForm.reset();
    pkgForm.action = pkgForm.dataset.store;
    document.getElementById('pkgMethod').value = 'POST';
    document.getElementById('pkgFormTitle').textContent = 'Thêm mệnh giá';
    document.getElementById('pkgCancel').style.display = 'none';
}
</script>
@endpush