@extends('layouts.app')

@section('title', 'Ngân hàng & Thẻ | GreenCard.vn')

@section('content')
<main class="container dash-layout">
    @include('partials.dash-sidebar')

    <section class="dash-main card-panel">
        <h1>Ngân hàng &amp; Thẻ</h1>
        <p class="page-sub">Quản lý tài khoản ngân hàng và thẻ tín dụng để thanh toán</p>

        {{-- Thẻ tín dụng --}}
        <div class="block-head">
            <h2>Thẻ Tín Dụng/Ghi Nợ</h2>
            <button type="button" class="add-link solid" onclick="openModal('cardModal')">+ Thêm thẻ mới</button>
        </div>
        @forelse($cards as $card)
            <div class="pay-card">
                <span class="brand">{{ $card->brand === 'mastercard' ? 'MC' : 'VISA' }}</span>
                <span>
                    <span class="num">**** **** **** {{ $card->last4 }}</span><br>
                    <span class="exp">Hết hạn: {{ $card->expiry }}</span><br>
                    @if($card->is_default)<span class="default-badge">&#10003; Mặc định</span>@endif
                </span>
                <form method="POST" action="{{ route('user.bank.card.delete', $card) }}" style="margin-left:auto;" onsubmit="return confirm('Xóa thẻ này?')">
                    @csrf @method('DELETE')
                    <button type="submit" class="trash">&#128465;</button>
                </form>
            </div>
        @empty
            <div class="empty-state" style="min-height:80px;">Chưa có thẻ nào.</div>
        @endforelse

        {{-- Tài khoản ngân hàng --}}
        <div class="block-head" style="margin-top:38px;">
            <h2>Tài Khoản Ngân Hàng</h2>
            <button type="button" class="add-link outline" onclick="openModal('accountModal')">+ Thêm tài khoản</button>
        </div>
        @forelse($accounts as $acc)
            <div class="pay-card" style="max-width:none;">
                <span class="bank-avatar">&#127974;</span>
                <span>
                    <span class="num" style="display:inline-flex;align-items:center;gap:8px;">{{ $acc->bank_name }} @if($acc->is_default)<span class="inline-badge">Mặc định</span>@endif</span><br>
                    <span class="exp">{{ $acc->holder }}</span><br>
                    <span class="exp">**** **** {{ $acc->last4 }}</span><br>
                    @if($acc->branch)<span class="exp" style="color:var(--slate-light);">{{ $acc->branch }}</span>@endif
                </span>
                <form method="POST" action="{{ route('user.bank.account.delete', $acc) }}" style="margin-left:auto;" onsubmit="return confirm('Xóa tài khoản này?')">
                    @csrf @method('DELETE')
                    <button type="submit" class="trash">&#128465;</button>
                </form>
            </div>
        @empty
            <div class="empty-state" style="min-height:80px;">Chưa có tài khoản ngân hàng.</div>
        @endforelse
    </section>
</main>

{{-- Modal thêm thẻ: preview trực tiếp --}}
<div class="modal-backdrop" id="cardModal">
    <div class="modal">
        <button type="button" class="close-x" onclick="closeModal('cardModal')">&#10005;</button>
        <h3>Thêm Thẻ Mới</h3>

        <div class="cc-scene">
            <div class="cc-flip" id="ccFlip">
                <div class="cc-preview cc-front" id="ccPreview">
                    <div class="chip"></div>
                    <div class="brand-logo" id="ccBrand"></div>
                    <div class="cc-num" id="ccNum">&#8226;&#8226;&#8226;&#8226; &#8226;&#8226;&#8226;&#8226; &#8226;&#8226;&#8226;&#8226; &#8226;&#8226;&#8226;&#8226;</div>
                    <div class="cc-row">
                        <span id="ccName">YOUR NAME HERE</span>
                        <span style="text-align:right;"><span class="lbl">valid thru</span><br><span id="ccExp">&#8226;&#8226;/&#8226;&#8226;</span></span>
                    </div>
                </div>
                <div class="cc-preview cc-back" id="ccPreviewBack">
                    <div class="stripe"></div>
                    <div class="sign-strip"><span id="ccCvc"></span></div>
                    <div class="brand-logo back-logo" id="ccBrandBack"></div>
                </div>
            </div>
        </div>

        <form method="POST" action="{{ route('user.bank.card') }}" autocomplete="off">
            @csrf
            <input class="input" name="number" id="inNumber" placeholder="Số thẻ" maxlength="19" inputmode="numeric">
            <input class="input" name="holder" id="inHolder" placeholder="TÊN IN TRÊN THẺ" style="text-transform:uppercase;">
            <div class="row-2">
                <input class="input" name="expiry" id="inExpiry" placeholder="MM/YY" maxlength="5">
                <input class="input" name="cvc" id="inCvc" placeholder="CVC" maxlength="4" inputmode="numeric">
            </div>
            <div class="actions">
                <button type="button" class="btn btn-outline" onclick="closeModal('cardModal')">Hủy</button>
                <button type="submit" class="btn btn-green">Lưu Thẻ</button>
            </div>
        </form>
    </div>
</div>

{{-- Modal thêm tài khoản ngân hàng --}}
<div class="modal-backdrop" id="accountModal">
    <div class="modal">
        <button type="button" class="close-x" onclick="closeModal('accountModal')">&#10005;</button>
        <h3>Thêm Tài Khoản Ngân Hàng</h3>
        <form method="POST" action="{{ route('user.bank.account') }}" autocomplete="off">
            @csrf
            <input class="input" name="bank_name" placeholder="Tên ngân hàng (VD: Vietcombank)">
            <input class="input" name="holder" placeholder="CHỦ TÀI KHOẢN" style="text-transform:uppercase;">
            <input class="input" name="number" placeholder="Số tài khoản" inputmode="numeric">
            <input class="input" name="branch" placeholder="Chi nhánh (không bắt buộc)">
            <div class="actions">
                <button type="button" class="btn btn-outline" onclick="closeModal('accountModal')">Hủy</button>
                <button type="submit" class="btn btn-green">Lưu Tài Khoản</button>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
// Preview thẻ trực tiếp trong modal
var inNumber = document.getElementById('inNumber');
var inHolder = document.getElementById('inHolder');
var inExpiry = document.getElementById('inExpiry');
var inCvc = document.getElementById('inCvc');

function setBrand(digits) {
    var front = document.getElementById('ccPreview');
    var back = document.getElementById('ccPreviewBack');
    var brandEl = document.getElementById('ccBrand');
    var brandBack = document.getElementById('ccBrandBack');
    front.classList.remove('visa');
    back.classList.remove('visa');
    brandEl.innerHTML = '';
    brandBack.innerHTML = '';
    if (digits.startsWith('4')) {
        // Chỉ VISA đổi màu thẻ sang xanh
        front.classList.add('visa');
        back.classList.add('visa');
        brandEl.textContent = 'VISA';
        brandBack.textContent = 'VISA';
    } else if (/^(5[1-5]|2)/.test(digits) && digits.length >= 2) {
        // Mastercard: chỉ hiện logo, thẻ giữ màu xám như video
        var logo = '<span class="mc-logo"><span class="mc-circles"><span class="c red"></span><span class="c orange"></span></span><span class="mc-word">mastercard</span></span>';
        brandEl.innerHTML = logo;
        brandBack.innerHTML = logo;
    }
}

inNumber.addEventListener('input', function () {
    var digits = this.value.replace(/\D/g, '').slice(0, 16);
    this.value = digits.replace(/(.{4})/g, '$1 ').trim();
    setBrand(digits);

    var groups = [];
    for (var i = 0; i < 16; i += 4) {
        var g = digits.slice(i, i + 4);
        while (g.length < 4) g += '\u2022';
        groups.push(g);
    }
    document.getElementById('ccNum').textContent = groups.join(' ');
});

inHolder.addEventListener('input', function () {
    document.getElementById('ccName').textContent = this.value.toUpperCase() || 'YOUR NAME HERE';
});

inExpiry.addEventListener('input', function () {
    var v = this.value.replace(/\D/g, '').slice(0, 4);
    if (v.length > 2) v = v.slice(0, 2) + '/' + v.slice(2);
    this.value = v;
    document.getElementById('ccExp').textContent = v || '\u2022\u2022/\u2022\u2022';
});

// Lật thẻ khi nhập CVC (giống video)
inCvc.addEventListener('focus', function () { document.getElementById('ccFlip').classList.add('flipped'); });
inCvc.addEventListener('blur', function () { document.getElementById('ccFlip').classList.remove('flipped'); });
inCvc.addEventListener('input', function () {
    this.value = this.value.replace(/\D/g, '').slice(0, 4);
    document.getElementById('ccCvc').textContent = this.value;
});
</script>
@endpush