<div x-data="{ showModal: @entangle('showModal'), showDelete: @entangle('showDelete') }">

    {{-- Header --}}
    <div class="flex items-center justify-between mb-6">
        <div>
            <h1 class="text-2xl font-bold text-slate-800">Voucher</h1>
            <p class="text-sm text-slate-500 mt-0.5">Kelola kode diskon untuk customer.</p>
        </div>
        @can('voucher.create')
            <button type="button" wire:click="create"
                class="inline-flex items-center gap-2 px-4 py-2 bg-orange-500 text-white text-sm font-medium rounded-lg hover:bg-orange-600 transition-colors">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                </svg>
                Buat Voucher
            </button>
        @endcan
    </div>

    {{-- Statistik --}}
    <div class="grid grid-cols-2 sm:grid-cols-4 gap-3 mb-6">
        <div class="bg-white rounded-xl border border-slate-200 p-4">
            <p class="text-xs text-slate-400 mb-1">Total Voucher</p>
            <p class="text-xl font-bold text-slate-800">{{ $stats['total'] }}</p>
        </div>
        <div class="bg-white rounded-xl border border-slate-200 p-4">
            <p class="text-xs text-slate-400 mb-1">Voucher Aktif</p>
            <p class="text-xl font-bold text-green-600">{{ $stats['active'] }}</p>
        </div>
        <div class="bg-white rounded-xl border border-slate-200 p-4">
            <p class="text-xs text-slate-400 mb-1">Voucher Kadaluarsa</p>
            <p class="text-xl font-bold text-red-500">{{ $stats['expired'] }}</p>
        </div>
        <div class="bg-white rounded-xl border border-slate-200 p-4">
            <p class="text-xs text-slate-400 mb-1">Voucher Terpakai</p>
            <p class="text-xl font-bold text-slate-800">{{ $stats['used'] }}</p>
        </div>
    </div>

    {{-- Filter Status (tab) --}}
    <div class="flex flex-wrap gap-2 mb-4">
        <button type="button" wire:click="$set('filterStatus', '')"
            class="px-3.5 py-1.5 rounded-lg text-sm font-medium transition-colors
                {{ $filterStatus === '' ? 'bg-orange-500 text-white' : 'bg-white text-slate-600 border border-slate-200 hover:bg-slate-50' }}">
            Semua
        </button>
        <button type="button" wire:click="$set('filterStatus', 'active')"
            class="px-3.5 py-1.5 rounded-lg text-sm font-medium transition-colors
                {{ $filterStatus === 'active' ? 'bg-orange-500 text-white' : 'bg-white text-slate-600 border border-slate-200 hover:bg-slate-50' }}">
            Aktif
        </button>
        <button type="button" wire:click="$set('filterStatus', 'inactive')"
            class="px-3.5 py-1.5 rounded-lg text-sm font-medium transition-colors
                {{ $filterStatus === 'inactive' ? 'bg-orange-500 text-white' : 'bg-white text-slate-600 border border-slate-200 hover:bg-slate-50' }}">
            Nonaktif
        </button>
        <button type="button" wire:click="$set('filterStatus', 'expired')"
            class="px-3.5 py-1.5 rounded-lg text-sm font-medium transition-colors
                {{ $filterStatus === 'expired' ? 'bg-orange-500 text-white' : 'bg-white text-slate-600 border border-slate-200 hover:bg-slate-50' }}">
            Kadaluarsa
        </button>
    </div>

    {{-- Search & Sort --}}
    <div class="bg-white rounded-xl border border-slate-200 p-4 mb-4">
        <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
            <div class="sm:col-span-2">
                <label class="block text-xs font-medium text-slate-500 mb-1">Cari</label>
                <div class="relative">
                    <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                    </svg>
                    <input wire:model.live.debounce.400ms="search" type="text"
                        placeholder="Cari kode voucher..."
                        class="w-full pl-9 pr-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-orange-500" />
                </div>
            </div>
            <div>
                <label class="block text-xs font-medium text-slate-500 mb-1">Urutkan</label>
                <select wire:model.live="sortBy"
                    class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-orange-500 bg-white">
                    <option value="created_at">Tanggal Dibuat</option>
                    <option value="code">Kode</option>
                    <option value="valid_until">Tanggal Berakhir</option>
                </select>
            </div>
        </div>
    </div>

    {{-- Loading indicator --}}
    <div wire:loading.flex wire:target="search, filterStatus, sortBy"
        class="items-center gap-2 text-sm text-slate-400 mb-3">
        <svg class="animate-spin w-4 h-4 text-orange-500" fill="none" viewBox="0 0 24 24">
            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
        </svg>
        Memuat data...
    </div>

    {{-- Tabel --}}
    <div class="bg-white rounded-xl border border-slate-200 overflow-hidden" wire:loading.class="opacity-60" wire:target="search, filterStatus, sortBy">
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead class="bg-slate-50 border-b border-slate-200">
                    <tr>
                        <th class="text-left px-4 py-3 font-semibold text-slate-600 whitespace-nowrap">
                            <button type="button" wire:click="sortByColumn('code')" class="flex items-center gap-1 hover:text-slate-900">
                                Kode Voucher
                                @if ($sortBy === 'code')
                                    <span class="text-orange-500">{{ $sortDirection === 'asc' ? '↑' : '↓' }}</span>
                                @endif
                            </button>
                        </th>
                        <th class="text-left px-4 py-3 font-semibold text-slate-600 whitespace-nowrap">Tipe</th>
                        <th class="text-right px-4 py-3 font-semibold text-slate-600 whitespace-nowrap">Nilai Diskon</th>
                        <th class="text-right px-4 py-3 font-semibold text-slate-600 whitespace-nowrap">Min. Belanja</th>
                        <th class="text-left px-4 py-3 font-semibold text-slate-600 whitespace-nowrap">
                            <button type="button" wire:click="sortByColumn('valid_until')" class="flex items-center gap-1 hover:text-slate-900">
                                Masa Berlaku
                                @if ($sortBy === 'valid_until')
                                    <span class="text-orange-500">{{ $sortDirection === 'asc' ? '↑' : '↓' }}</span>
                                @endif
                            </button>
                        </th>
                        <th class="text-center px-4 py-3 font-semibold text-slate-600 whitespace-nowrap">Kuota</th>
                        <th class="text-center px-4 py-3 font-semibold text-slate-600 whitespace-nowrap">Terpakai</th>
                        <th class="text-center px-4 py-3 font-semibold text-slate-600 whitespace-nowrap">Status</th>
                        <th class="text-center px-4 py-3 font-semibold text-slate-600 whitespace-nowrap">Aksi</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    @forelse ($vouchers as $v)
                        @php
                            $isExpired = $v->valid_until && $v->valid_until->isPast();
                            $isUsedUp  = $v->quota && $v->used_count >= $v->quota;
                        @endphp
                        <tr class="hover:bg-slate-50 transition-colors" wire:key="v-{{ $v->id }}">
                            <td class="px-4 py-3">
                                <span class="inline-flex items-center gap-2 bg-slate-100 text-slate-800 font-mono font-bold text-sm px-3 py-1.5 rounded-lg">
                                    {{ $v->code }}
                                </span>
                            </td>
                            <td class="px-4 py-3 text-slate-600 whitespace-nowrap">
                                {{ $v->type === 'percent' ? 'Persentase' : 'Nominal Tetap' }}
                            </td>
                            <td class="px-4 py-3 text-right">
                                <span class="font-semibold text-green-700">
                                    {{ $v->type === 'percent' ? $v->value . '%' : 'Rp ' . number_format($v->value, 0, ',', '.') }}
                                </span>
                                @if ($v->type === 'percent' && $v->max_discount)
                                    <p class="text-xs text-slate-400">maks Rp {{ number_format($v->max_discount, 0, ',', '.') }}</p>
                                @endif
                            </td>
                            <td class="px-4 py-3 text-right text-slate-600 whitespace-nowrap">
                                {{ $v->min_order > 0 ? 'Rp ' . number_format($v->min_order, 0, ',', '.') : '—' }}
                            </td>
                            <td class="px-4 py-3 whitespace-nowrap">
                                @if ($v->valid_from || $v->valid_until)
                                    <p class="text-slate-700 text-xs">{{ $v->valid_from?->format('d M Y') ?? '∞' }} – {{ $v->valid_until?->format('d M Y') ?? '∞' }}</p>
                                    @if ($isExpired) <span class="text-xs text-red-500 font-medium">Kadaluarsa</span> @endif
                                @else
                                    <span class="text-slate-400 text-xs">Tidak ada batas</span>
                                @endif
                            </td>
                            <td class="px-4 py-3 text-center text-slate-600">
                                {{ $v->quota ?? '∞' }}
                            </td>
                            <td class="px-4 py-3 text-center">
                                <span class="{{ $isUsedUp ? 'text-red-600 font-semibold' : 'text-slate-600' }}">{{ $v->used_count }}</span>
                            </td>
                            <td class="px-4 py-3 text-center">
                                @if ($isExpired || $isUsedUp)
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-slate-100 text-slate-600">
                                        {{ $isExpired ? 'Kadaluarsa' : 'Habis' }}
                                    </span>
                                @else
                                    <button type="button" wire:click="toggleActive({{ $v->id }})">
                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium cursor-pointer
                                            {{ $v->is_active ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
                                            {{ $v->is_active ? 'Aktif' : 'Nonaktif' }}
                                        </span>
                                    </button>
                                @endif
                            </td>
                            <td class="px-4 py-3">
                                <div class="flex items-center justify-center gap-1">
                                    @can('voucher.edit')
                                        <button type="button" wire:click="edit({{ $v->id }})"
                                            class="p-1.5 text-slate-500 hover:text-orange-600 hover:bg-orange-50 rounded-lg transition-colors"
                                            title="Edit">
                                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                                            </svg>
                                        </button>
                                    @endcan
                                    @can('voucher.delete')
                                        <button type="button" wire:click="confirmDelete({{ $v->id }})"
                                            class="p-1.5 text-slate-500 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors"
                                            title="Hapus">
                                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                                            </svg>
                                        </button>
                                    @endcan
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="9" class="px-4 py-16 text-center">
                                <svg class="w-12 h-12 mx-auto mb-3 text-slate-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.568 3H5.25A2.25 2.25 0 003 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 005.223-5.223c.542-.827.369-1.908-.33-2.607L9.568 3z"/>
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 6h.008v.008H6V6z"/>
                                </svg>
                                <p class="text-slate-400">Belum ada voucher.</p>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <div class="px-4 py-3 border-t border-slate-100">{{ $vouchers->links() }}</div>
    </div>

    {{-- ── Modal Form ──────────────────────────────────────────────────── --}}
    <div x-show="showModal" x-cloak class="fixed inset-0 z-50 flex items-center justify-center p-4"
        x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100">
        <div class="absolute inset-0 bg-black/50" @click="$wire.set('showModal', false)"></div>
        <div class="relative bg-white rounded-2xl shadow-xl w-full max-w-xl max-h-[90vh] overflow-y-auto" @click.stop>
            <div class="p-6">
                <h3 class="text-lg font-semibold text-slate-800 mb-5">
                    {{ $editingId ? 'Edit Voucher' : 'Buat Voucher' }}
                </h3>

                <form wire:submit.prevent="save" class="space-y-4">

                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1">Kode Voucher <span class="text-red-500">*</span></label>
                        <div class="flex gap-2">
                            <input wire:model="code" type="text" placeholder="Contoh: SELAMAT10" style="font-family:monospace;text-transform:uppercase"
                                class="flex-1 px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-orange-500" />
                            <button type="button" wire:click="generateCode"
                                class="px-3 py-2 text-sm text-slate-600 bg-slate-100 hover:bg-slate-200 rounded-lg transition-colors">
                                Generate
                            </button>
                        </div>
                        <p class="mt-1 text-xs text-slate-400">Hanya huruf dan angka, harus unik.</p>
                        @error('code') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                    </div>

                    <div class="grid grid-cols-2 gap-3">
                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-1">Jenis Diskon <span class="text-red-500">*</span></label>
                            <select wire:model.live="type"
                                class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-orange-500 bg-white">
                                <option value="percent">Persentase (%)</option>
                                <option value="fixed">Nominal Tetap (Rp)</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-1">Nilai Diskon <span class="text-red-500">*</span></label>
                            <div class="relative">
                                <span class="absolute left-3 top-1/2 -translate-y-1/2 text-sm text-slate-400 font-medium">{{ $type === 'percent' ? '%' : 'Rp' }}</span>
                                <input wire:model="value" type="number" min="0" step="0.01" placeholder="0"
                                    class="w-full pl-9 pr-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-orange-500" />
                            </div>
                            @error('value') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                        </div>
                    </div>

                    <div class="grid grid-cols-2 gap-3">
                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-1">Minimal Belanja</label>
                            <div class="relative">
                                <span class="absolute left-3 top-1/2 -translate-y-1/2 text-sm text-slate-400">Rp</span>
                                <input wire:model="min_order" type="number" min="0" placeholder="0"
                                    class="w-full pl-9 pr-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-orange-500" />
                            </div>
                            @error('min_order') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                        </div>
                        @if ($type === 'percent')
                            <div>
                                <label class="block text-sm font-medium text-slate-700 mb-1">Maksimum Diskon</label>
                                <div class="relative">
                                    <span class="absolute left-3 top-1/2 -translate-y-1/2 text-sm text-slate-400">Rp</span>
                                    <input wire:model="max_discount" type="number" min="0" placeholder="kosong = tanpa batas"
                                        class="w-full pl-9 pr-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-orange-500" />
                                </div>
                                @error('max_discount') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                            </div>
                        @endif
                    </div>

                    <div class="grid grid-cols-2 gap-3">
                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-1">Kuota</label>
                            <input wire:model="quota" type="number" min="1" placeholder="kosong = tanpa batas"
                                class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-orange-500" />
                            @error('quota') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-1">Status</label>
                            <select wire:model="is_active"
                                class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-orange-500 bg-white">
                                <option value="1">Aktif</option>
                                <option value="0">Nonaktif</option>
                            </select>
                        </div>
                    </div>

                    <div class="grid grid-cols-2 gap-3">
                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-1">Berlaku Mulai</label>
                            <input wire:model="valid_from" type="date"
                                class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-orange-500" />
                            @error('valid_from') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-1">Berlaku Sampai</label>
                            <input wire:model="valid_until" type="date"
                                class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-orange-500" />
                            @error('valid_until') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                        </div>
                    </div>

                    <div class="flex gap-3 justify-end pt-2">
                        <button type="button" wire:click="$set('showModal', false)"
                            class="px-4 py-2 text-sm font-medium text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50">
                            Batal
                        </button>
                        <button type="submit"
                            class="px-4 py-2 text-sm font-medium text-white bg-orange-500 rounded-lg hover:bg-orange-600"
                            wire:loading.attr="disabled" wire:target="save">
                            <span wire:loading.remove wire:target="save">{{ $editingId ? 'Simpan' : 'Buat Voucher' }}</span>
                            <span wire:loading wire:target="save">Menyimpan...</span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- ── Modal Hapus ─────────────────────────────────────────────────── --}}
    <div x-show="showDelete" x-cloak class="fixed inset-0 z-50 flex items-center justify-center p-4"
        x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100">
        <div class="absolute inset-0 bg-black/50" @click="$wire.set('showDelete', false)"></div>
        <div class="relative bg-white rounded-2xl shadow-xl w-full max-w-sm" @click.stop>
            <div class="p-6 text-center">
                <div class="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
                    <svg class="w-6 h-6 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                    </svg>
                </div>
                <h3 class="text-lg font-semibold text-slate-800 mb-1">Hapus Voucher?</h3>
                <p class="text-sm text-slate-500 mb-6">Tindakan ini tidak dapat dibatalkan.</p>
                <div class="flex gap-3">
                    <button type="button" wire:click="$set('showDelete', false)"
                        class="flex-1 px-4 py-2 text-sm font-medium text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50">
                        Batal
                    </button>
                    <button type="button" wire:click="delete"
                        class="flex-1 px-4 py-2 text-sm font-medium text-white bg-red-500 rounded-lg hover:bg-red-600"
                        wire:loading.attr="disabled" wire:target="delete">
                        <span wire:loading.remove wire:target="delete">Hapus</span>
                        <span wire:loading wire:target="delete">Menghapus...</span>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <x-admin.toast />
</div>
