@extends('layouts.app')

@section('title', 'Nạp Game trực tuyến | GreenCard.vn')

@section('content')
<main class="container" style="padding-top:24px;">
    <h2 class="section-title red" style="color:#7f1d1d;">Nạp tiền game</h2>

    <div class="shop-layout">
        {{-- Cột trái --}}
        <div>
            <form method="POST" action="{{ route('nap-game.submit') }}" id="topupForm">
                @csrf
                <input type="hidden" name="game" id="fGame" value="{{ $selected && isset($games[$selected]) ? $selected : '' }}">
                <input type="hidden" name="package" id="fPackage">
                <input type="hidden" name="payment_method" id="fPayment" value="bank">

                <h3 class="subhead">Sản phẩm</h3>
                <div class="game-grid" id="gameGrid" style="grid-template-columns:repeat(6, 1fr);">
                    @foreach($games as $slug => [$name, $img, $hot])
                        <button type="button" class="game-item {{ $selected === $slug ? 'active' : '' }}" data-slug="{{ $slug }}" data-name="{{ $name }}" onclick="pickGame(this)">
                            <div class="art">
                                <img src="{{ asset($img) }}" alt="{{ $name }}" loading="lazy">
                                @if($hot)<span class="hot">HOT</span>@endif
                            </div>
                            <div class="name">{{ $name }}</div>
                        </button>
                    @endforeach
                </div>

                <h3 class="subhead">Số tiền nạp</h3>
                <div class="pack-grid" id="packGrid">
                    @foreach($packages as $i => $pkg)
                        <button type="button" class="pack" data-index="{{ $i }}" data-diamonds="{{ $pkg['diamonds'] }}" data-price="{{ $pkg['price'] }}" onclick="pickPack(this)">
                            <div class="kc">{{ $pkg['diamonds'] }} <span class="gem">&#128142;</span></div>
                            <div class="price">{{ number_format($pkg['price'], 0, ',', '.') }}đ</div>
                        </button>
                    @endforeach
                </div>

                <h3 class="subhead">ID nhân vật (VD: 132573333)</h3>
                <input class="input" name="player_id" placeholder="ID nhân vật (VD: 132573333)">

                <h3 class="subhead">Phương thức thanh toán</h3>
                <div class="payment-option active" data-method="bank" onclick="pickPayment(this)">
                    <span class="p-ico" style="background:#22c55e;">&#127974;</span>
                    <span>
                        <span class="p-title">CHUYỂN KHOẢN / QR CODE</span><br>
                        <span class="p-sub">Hỗ trợ Ngân hàng, Ví điện tử, MoMo, ZaloPay, Viettel Money</span>
                    </span>
                    <span class="check">&#10003;</span>
                </div>
                <div class="payment-option" data-method="balance" onclick="pickPayment(this)">
                    <span class="p-ico" style="background:#3b82f6;">&#128179;</span>
                    <span>
                        <span class="p-title">SỐ DƯ TÀI KHOẢN</span><br>
                        <span class="p-sub">Thanh toán bằng số dư tài khoản của bạn</span>
                    </span>
                    <span class="check">&#10003;</span>
                </div>
                <div class="payment-option" data-method="binance" onclick="pickPayment(this)">
                    <span class="p-ico" style="background:#f0b90b;">&#9670;</span>
                    <span>
                        <span class="p-title">THANH TOÁN BINANCE</span><br>
                        <span class="p-sub">Thanh toán qua Binance Pay (USDT)</span>
                    </span>
                    <span class="check">&#10003;</span>
                </div>
            </form>
        </div>

        {{-- Cột phải: tóm tắt --}}
        <aside>
            <div class="card-panel order-summary">
                <h3>Tóm tắt đơn hàng</h3>
                <div class="summary-row"><span>Sản phẩm</span><b id="sProduct">-</b></div>
                <div class="summary-row"><span>Giá thành</span><b id="sPrice">-</b></div>
                <div class="summary-row"><span>Kim cương</span><b id="sDiamonds">0</b></div>
                <div class="summary-row"><span>Giảm giá</span><b id="sDiscount">0%</b></div>
                <div class="summary-total">
                    <span class="label">TỔNG THANH TOÁN</span>
                    <span class="value" id="sTotal">0 đ</span>
                </div>
                <input class="input" placeholder="Mã giảm giá ( nếu có )" style="margin:10px 0 14px;">
                <button type="submit" form="topupForm" class="btn btn-green btn-block">Tạo đơn hàng</button>
            </div>
            <div class="notice-box" style="margin-top:22px;">
                Cung cấp API bản kim cương giá rẻ, ổn định<br><br>
                Nạp kim cương cho game Free Fire sẽ xong ngay lập tức sau 5s.<br><br>
                Đơn bị hủy là do ID ở nước ngoài, hệ thống k nạp ID nước ngoài. Trường hợp thất bại nhưng ID trong nước do hệ thống quá tải vui lòng nạp lại.<br><br>
                Nạp chờ (Chiết khấu bên phải): Là nạp chậm, để hủy đơn ấn vào biểu tượng xóa<br><br>
                Nạp ngay (~5%): Là loại nạp topup xong ngay lập tức sau 9s, chạy từ bội 50k trở lên (không nạp mệnh giá 20k)
            </div>
        </aside>
    </div>
</main>
@endsection

@push('scripts')
<script>
function fmt(n) { return n.toLocaleString('vi-VN') + ' đ'; }

function pickGame(btn) {
    document.querySelectorAll('#gameGrid .game-item').forEach(function (b) { b.classList.remove('active'); });
    btn.classList.add('active');
    document.getElementById('fGame').value = btn.dataset.slug;
    updateSummary();
}

function pickPack(btn) {
    document.querySelectorAll('#packGrid .pack').forEach(function (b) { b.classList.remove('active'); });
    btn.classList.add('active');
    document.getElementById('fPackage').value = btn.dataset.index;
    updateSummary();
}

function pickPayment(el) {
    document.querySelectorAll('.payment-option').forEach(function (o) { o.classList.remove('active'); });
    el.classList.add('active');
    document.getElementById('fPayment').value = el.dataset.method;
}

function updateSummary() {
    var game = document.querySelector('#gameGrid .game-item.active');
    var pack = document.querySelector('#packGrid .pack.active');
    document.getElementById('sProduct').textContent = game ? game.dataset.name : '-';
    document.getElementById('sPrice').textContent = pack ? fmt(parseInt(pack.dataset.price, 10)) : '-';
    document.getElementById('sDiamonds').textContent = pack ? pack.dataset.diamonds : '0';
    document.getElementById('sTotal').textContent = pack ? fmt(parseInt(pack.dataset.price, 10)) : '0 đ';
}

document.getElementById('topupForm').addEventListener('submit', function (e) {
    if (!document.getElementById('fGame').value) { e.preventDefault(); showToast('Vui lòng chọn sản phẩm!', 'error'); return; }
    if (!document.getElementById('fPackage').value) { e.preventDefault(); showToast('Vui lòng chọn số tiền nạp!', 'error'); return; }
    if (!document.querySelector('[name=player_id]').value.trim()) { e.preventDefault(); showToast('Vui lòng nhập ID nhân vật!', 'error'); }
});

updateSummary();
</script>
@endpush