@extends('layouts.app')

@section('title', 'Kho Voucher | GreenCard.vn')

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

    <section class="dash-main card-panel" style="padding:24px;">
        <div class="voucher-head">
            <h1>Kho Voucher</h1>
            <div class="save-box">
                <input type="text" placeholder="NHẬP MÃ VOUCHER..." id="voucherCode">
                <button type="button" onclick="saveVoucher()">Lưu mã</button>
            </div>
        </div>

        <nav class="htabs">
            <a href="{{ route('user.vouchers') }}" class="{{ $tab === 'all' ? 'active' : '' }}">Tất cả</a>
            <a href="{{ route('user.vouchers', ['tab' => 'card']) }}" class="{{ $tab === 'card' ? 'active' : '' }}">Nạp thẻ cào</a>
            <a href="{{ route('user.vouchers', ['tab' => 'game']) }}" class="{{ $tab === 'game' ? 'active' : '' }}">Nạp game</a>
            <a href="{{ route('user.vouchers', ['tab' => 'expiring']) }}" class="{{ $tab === 'expiring' ? 'active' : '' }}">Sắp hết hạn</a>
        </nav>

        <div class="voucher-grid">
            @forelse($vouchers as $v)
                <div class="voucher-card {{ $v->used ? 'used' : '' }}">
                    <span class="punch top"></span>
                    <span class="punch bot"></span>
                    <div class="stub">
                        <span class="s-ico">{{ str_contains($v->title, '%') || str_contains($v->title, 'Giảm') ? '％' : '🚚' }}</span>
                        {{ $v->badge }}
                    </div>
                    <div class="v-body">
                        <div class="v-title">{{ $v->title }}</div>
                        <div class="v-line">{{ $v->subtitle }}</div>
                        <div class="v-line">{{ $v->condition }}</div>
                        <div class="v-foot">
                            @if($v->used)
                                <span class="v-exp">Đã sử dụng ngày {{ $v->used_at->format('d/m/Y') }}</span>
                            @elseif($v->expiring_soon)
                                <span class="v-exp danger">&#9200; Hết hạn trong 2 ngày</span>
                                <button type="button" class="use-btn" onclick="showToast('Voucher đã được kích hoạt!')">Dùng ngay</button>
                            @else
                                <span class="v-exp">Hết hạn: {{ $v->expires_at->format('d/m/Y') }}</span>
                                <button type="button" class="use-btn" onclick="showToast('Voucher đã được kích hoạt!')">Dùng ngay</button>
                            @endif
                        </div>
                    </div>
                </div>
            @empty
                <div class="empty-state" style="grid-column:1/-1;">Không có voucher nào.</div>
            @endforelse
        </div>
    </section>
</main>
@endsection

@push('scripts')
<script>
function saveVoucher() {
    var input = document.getElementById('voucherCode');
    if (!input.value.trim()) { showToast('Vui lòng nhập mã voucher!', 'error'); return; }
    showToast('Mã voucher không hợp lệ hoặc đã hết lượt!', 'error');
    input.value = '';
}
</script>
@endpush