@extends('layouts.app')

@section('title', 'Mua thẻ cào | GreenCard.vn')

@section('content')
<main class="container" style="padding-top:24px;">
    <h2 class="section-title red" style="color:#7f1d1d;">Mua thẻ cào</h2>

    <div class="shop-layout">
        {{-- Cột trái --}}
        <div>
            <div class="notice-box">
                - Mua mã thẻ điện thoại, thẻ game online<br>
                - Nạp topup điện thoại giá rẻ tại đây. Nạp topup vào game Teamobi tại đây. Link nạp mã thẻ Carot (Giftcode) tại đây<br>
                - Mua thẻ thông báo Chờ xử lý tức là giao dịch thất bại hệ thống sẽ hoàn lại tiền vào tài khoản Quý khách sau<br>
                - Kết nối API mua thẻ, toup game team, topup tiền điện thoại giá gốc
            </div>

            <form method="POST" action="{{ route('mua-the.submit') }}" id="buyForm">
                @csrf
                <input type="hidden" name="card_type" id="fCardType">
                <input type="hidden" name="price" id="fPrice">
                <input type="hidden" name="payment_method" id="fPayment" value="bank">

                <h3 class="subhead">Chọn loại thẻ</h3>
                <div class="choice-grid" id="typeGrid">
                    @foreach($cardTypes as $type)
                        <button type="button" class="choice" data-type="{{ $type }}" onclick="pickType(this)">{{ $type }}</button>
                    @endforeach
                </div>

                <h3 class="subhead">Mệnh giá</h3>
                <div class="placeholder-strip" id="pricePlaceholder">Mời bạn chọn loại thẻ phía trên để xem mệnh giá</div>
                <div class="choice-grid prices" id="priceGrid" style="display:none;">
                    @foreach($cardPrices as $p)
                        <button type="button" class="choice" data-price="{{ $p }}" onclick="pickPrice(this)">{{ number_format($p, 0, ',', '.') }}đ</button>
                    @endforeach
                </div>

                <h3 class="subhead">Số lượng</h3>
                <div class="qty-row">
                    <button type="button" onclick="changeQty(-1)">&minus;</button>
                    <input type="number" name="quantity" id="fQty" value="1" min="1" max="100" onchange="updateSummary()">
                    <button type="button" onclick="changeQty(1)">+</button>
                </div>

                <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>

                <h3 class="subhead">Email mua hàng</h3>
                <input class="input" type="email" name="email" id="fEmail" placeholder="nhap-email-cua-ban@gmail.com" oninput="updateSummary()">
                <p style="color:var(--red);font-size:12.5px;margin-top:8px;">&#9432;&nbsp; QUAN TRỌNG: Vui lòng dùng Email thật để nhận mã thẻ. Hệ thống sẽ gửi thông tin giao dịch tự động vào hòm thư này.</p>
            </form>
        </div>

        {{-- Cột phải: tóm tắt đơn hàng --}}
        <aside class="card-panel order-summary">
            <h3>Tóm tắt đơn hàng</h3>
            <div class="summary-row"><span>Email mua hàng</span><b id="sEmail">Chưa nhập email</b></div>
            <div class="summary-row"><span>Sản phẩm</span><b id="sProduct">-</b></div>
            <div class="summary-row"><span>Mệnh giá</span><b id="sPrice">0 đ</b></div>
            <div class="summary-row"><span>Số lượng</span><b id="sQty">1</b></div>
            <div class="summary-total">
                <span class="label">TỔNG THANH TOÁN</span>
                <span class="value" id="sTotal">0 đ</span>
            </div>
            <div class="summary-note">* Kiểm tra kỹ Email. Mã thẻ sẽ được gửi tự động ngay sau khi thanh toán thành công.</div>
            <button type="submit" form="buyForm" class="btn btn-green btn-block" style="margin-top:16px;">Tạo đơn hàng</button>
        </aside>
    </div>
</main>
@endsection

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

function pickType(btn) {
    document.querySelectorAll('#typeGrid .choice').forEach(function (b) { b.classList.remove('active'); });
    btn.classList.add('active');
    document.getElementById('fCardType').value = btn.dataset.type;
    document.getElementById('pricePlaceholder').style.display = 'none';
    document.getElementById('priceGrid').style.display = '';
    updateSummary();
}

function pickPrice(btn) {
    document.querySelectorAll('#priceGrid .choice').forEach(function (b) { b.classList.remove('active'); });
    btn.classList.add('active');
    document.getElementById('fPrice').value = btn.dataset.price;
    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 changeQty(delta) {
    var input = document.getElementById('fQty');
    var v = Math.min(100, Math.max(1, (parseInt(input.value, 10) || 1) + delta));
    input.value = v;
    updateSummary();
}

function updateSummary() {
    var email = document.getElementById('fEmail').value.trim();
    var type = document.getElementById('fCardType').value;
    var price = parseInt(document.getElementById('fPrice').value, 10) || 0;
    var qty = parseInt(document.getElementById('fQty').value, 10) || 1;
    document.getElementById('sEmail').textContent = email || 'Chưa nhập email';
    document.getElementById('sProduct').textContent = type || '-';
    document.getElementById('sPrice').textContent = fmt(price);
    document.getElementById('sQty').textContent = qty;
    document.getElementById('sTotal').textContent = fmt(price * qty);
}

document.getElementById('buyForm').addEventListener('submit', function (e) {
    if (!document.getElementById('fCardType').value) { e.preventDefault(); showToast('Mời bạn chọn loại thẻ!', 'error'); return; }
    if (!document.getElementById('fPrice').value) { e.preventDefault(); showToast('Mời bạn chọn mệnh giá!', 'error'); return; }
    if (!document.getElementById('fEmail').value.trim()) { e.preventDefault(); showToast('Vui lòng nhập email nhận mã thẻ!', 'error'); }
});
</script>
@endpush