@extends('admin.layout')
@section('title', 'Quản lý Voucher')
@section('greeting') QUẢN LÝ <span>VOUCHER</span> @endsection
@section('subtitle') Tạo và quản lý mã giảm giá @endsection

@section('content')
    {{-- Create Form --}}
    <div class="card" style="margin-bottom:16px;">
        <div class="card-header">
            <h3><i class="fas fa-plus-circle" style="color:var(--accent);margin-right:8px;"></i>Tạo Voucher mới</h3>
        </div>
        <div style="padding:22px;">
            <form method="POST" action="{{ route('admin.vouchers.create') }}" class="flex flex-wrap gap-3 items-end">
                @csrf
                <div>
                    <label style="display:block;font-size:11px;font-weight:600;color:var(--text-muted);margin-bottom:6px;">Mã voucher</label>
                    <input type="text" name="code" class="ad-input uppercase" placeholder="VD: SALE50" required style="width:140px;">
                </div>
                <div>
                    <label style="display:block;font-size:11px;font-weight:600;color:var(--text-muted);margin-bottom:6px;">Loại</label>
                    <select name="type" class="ad-input ad-select" style="width:120px;" id="vType" onchange="document.getElementById('vLabel').textContent=this.value==='percent'?'Giá trị (%)':'Giá trị (đ)'">
                        <option value="percent">Giảm %</option>
                        <option value="fixed">Giảm tiền</option>
                    </select>
                </div>
                <div>
                    <label style="display:block;font-size:11px;font-weight:600;color:var(--text-muted);margin-bottom:6px;" id="vLabel">Giá trị (%)</label>
                    <input type="number" name="value" class="ad-input" placeholder="50" required style="width:100px;" min="1">
                </div>
                <div>
                    <label style="display:block;font-size:11px;font-weight:600;color:var(--text-muted);margin-bottom:6px;">Áp dụng gói</label>
                    <select name="plan_id" class="ad-input ad-select" style="width:120px;">
                        <option value="">Tất cả</option>
                        <option value="free">Free</option>
                        <option value="pro">Pro</option>
                        <option value="premium">Premium</option>
                    </select>
                </div>
                <div>
                    <label style="display:block;font-size:11px;font-weight:600;color:var(--text-muted);margin-bottom:6px;">Số lần dùng</label>
                    <input type="number" name="max_uses" class="ad-input" value="100" style="width:80px;" min="1">
                </div>
                <div>
                    <label style="display:block;font-size:11px;font-weight:600;color:var(--text-muted);margin-bottom:6px;">Hết hạn</label>
                    <input type="date" name="expires_at" class="ad-input" style="width:150px;">
                </div>
                <button type="submit" class="btn btn-primary"><i class="fas fa-plus"></i> Tạo voucher</button>
            </form>

            @if($errors->any())
            <div style="margin-top:12px;padding:12px 16px;border-radius:14px;background:#fce4ec;border:1px solid #f8bbd0;color:#c62828;font-size:12px;">
                <i class="fas fa-exclamation-triangle"></i>
                @foreach($errors->all() as $err) <div>{{ $err }}</div> @endforeach
            </div>
            @endif
        </div>
    </div>

    {{-- List --}}
    <div class="card">
        <div class="card-header">
            <h3><i class="fas fa-ticket-alt" style="color:var(--accent);margin-right:8px;"></i>Danh sách voucher ({{ $vouchers->total() }})</h3>
        </div>
        <div class="overflow-x-auto">
            <table class="ad-table">
                <thead>
                    <tr><th>ID</th><th>Mã</th><th>Loại</th><th>Giá trị</th><th>Gói</th><th>Đã dùng</th><th>Trạng thái</th><th>Hết hạn</th><th>Actions</th></tr>
                </thead>
                <tbody>
                    @forelse($vouchers as $v)
                    <tr>
                        <td style="color:var(--text-muted);font-size:12px;font-family:monospace;">#{{ $v->id }}</td>
                        <td style="font-weight:700;font-family:monospace;font-size:14px;color:var(--accent);">{{ $v->code }}</td>
                        <td>
                            @if($v->type === 'percent')<span class="badge badge-info"><i class="fas fa-percent"></i> Giảm %</span>
                            @else<span class="badge badge-success"><i class="fas fa-money-bill"></i> Giảm tiền</span>@endif
                        </td>
                        <td style="font-weight:700;color:var(--text);">{{ $v->type === 'percent' ? $v->value . '%' : number_format($v->value) . 'đ' }}</td>
                        <td>{{ $v->plan_id ? strtoupper($v->plan_id) : 'Tất cả' }}</td>
                        <td>{{ $v->used_count }}/{{ $v->max_uses }}</td>
                        <td>
                            @if($v->is_active)<span class="badge badge-success"><i class="fas fa-check-circle"></i> Active</span>
                            @else<span class="badge badge-danger"><i class="fas fa-ban"></i> Inactive</span>@endif
                        </td>
                        <td style="font-size:12px;color:var(--text-muted);">{{ $v->expires_at ? \Carbon\Carbon::parse($v->expires_at)->format('d/m/Y') : '∞' }}</td>
                        <td>
                            <div class="flex gap-1.5">
                                <button type="button" class="btn btn-outline btn-sm" style="color:var(--accent);border-color:var(--accent);" onclick="editVoucher({{ json_encode($v) }})" title="Sửa">
                                    <i class="fas fa-pen"></i>
                                </button>
                                <form method="POST" action="{{ route('admin.vouchers.toggle', $v->id) }}">
                                    @csrf @method('PUT')
                                    <button type="submit" class="btn btn-outline btn-sm" title="Bật/Tắt">
                                        <i class="fas {{ $v->is_active ? 'fa-ban' : 'fa-check' }}"></i>
                                    </button>
                                </form>
                                <form method="POST" action="{{ route('admin.vouchers.delete', $v->id) }}" onsubmit="return confirm('Xóa voucher {{ $v->code }}?')">
                                    @csrf @method('DELETE')
                                    <button type="submit" class="btn btn-danger btn-sm" title="Xóa"><i class="fas fa-trash"></i></button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr><td colspan="9" style="text-align:center;color:var(--text-muted);padding:40px;">Chưa có voucher nào.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($vouchers->hasPages())
        <div class="flex justify-center gap-1 py-4" style="border-top:1px solid rgba(0,0,0,0.04);">
            {!! $vouchers->links('pagination::simple-bootstrap-5') !!}
        </div>
        @endif
    </div>

    {{-- Edit Modal --}}
    <div id="editModal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:100;align-items:center;justify-content:center;">
        <div class="card" style="width:100%;max-width:500px;margin:20px;">
            <div class="card-header" style="display:flex;justify-content:space-between;align-items:center;">
                <h3 style="font-size:16px;"><i class="fas fa-pen" style="color:var(--accent);margin-right:8px;"></i>Sửa Voucher</h3>
                <button onclick="closeEditModal()" class="btn btn-outline btn-sm"><i class="fas fa-times"></i></button>
            </div>
            <div style="padding:20px;">
                <form id="editForm" method="POST" class="flex flex-col gap-4">
                    @csrf @method('PUT')
                    <div>
                        <label style="display:block;font-size:12px;font-weight:600;margin-bottom:6px;">Mã voucher</label>
                        <input type="text" name="code" id="edit_code" class="ad-input w-full uppercase" required>
                    </div>
                    <div class="flex gap-4">
                        <div class="flex-1">
                            <label style="display:block;font-size:12px;font-weight:600;margin-bottom:6px;">Loại</label>
                            <select name="type" id="edit_type" class="ad-input w-full" onchange="document.getElementById('edit_vLabel').textContent=this.value==='percent'?'Giá trị (%)':'Giá trị (đ)'">
                                <option value="percent">Giảm %</option>
                                <option value="fixed">Giảm tiền</option>
                            </select>
                        </div>
                        <div class="flex-1">
                            <label style="display:block;font-size:12px;font-weight:600;margin-bottom:6px;" id="edit_vLabel">Giá trị</label>
                            <input type="number" name="value" id="edit_value" class="ad-input w-full" required min="1">
                        </div>
                    </div>
                    <div class="flex gap-4">
                        <div class="flex-1">
                            <label style="display:block;font-size:12px;font-weight:600;margin-bottom:6px;">Áp dụng gói</label>
                            <select name="plan_id" id="edit_plan_id" class="ad-input w-full">
                                <option value="">Tất cả</option>
                                <option value="free">Free</option>
                                <option value="pro">Pro</option>
                                <option value="premium">Premium</option>
                            </select>
                        </div>
                        <div class="flex-1">
                            <label style="display:block;font-size:12px;font-weight:600;margin-bottom:6px;">Số lần dùng (Max)</label>
                            <input type="number" name="max_uses" id="edit_max_uses" class="ad-input w-full" required min="1">
                        </div>
                    </div>
                    <div>
                        <label style="display:block;font-size:12px;font-weight:600;margin-bottom:6px;">Hết hạn</label>
                        <input type="date" name="expires_at" id="edit_expires_at" class="ad-input w-full">
                    </div>
                    <div style="margin-top:10px;">
                        <button type="submit" class="btn btn-primary w-full"><i class="fas fa-save"></i> Cập nhật</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>
        function editVoucher(v) {
            document.getElementById('editForm').action = '/admin/vouchers/' + v.id;
            document.getElementById('edit_code').value = v.code;
            document.getElementById('edit_type').value = v.type;
            document.getElementById('edit_value').value = v.value;
            document.getElementById('edit_vLabel').textContent = v.type === 'percent' ? 'Giá trị (%)' : 'Giá trị (đ)';
            document.getElementById('edit_plan_id').value = v.plan_id || '';
            document.getElementById('edit_max_uses').value = v.max_uses;
            document.getElementById('edit_expires_at').value = v.expires_at ? v.expires_at.split(' ')[0] : '';
            
            document.getElementById('editModal').style.display = 'flex';
        }

        function closeEditModal() {
            document.getElementById('editModal').style.display = 'none';
        }
    </script>
@endsection