@extends('admin.layout')

@section('title', 'Daftar Voucher')

@section('content')
<div class="flex items-center justify-between mb-6">
    <div>
        <h1 class="text-2xl font-bold text-gray-800">Daftar Voucher</h1>
        <p class="text-gray-500 text-sm mt-1">Kelola semua voucher diskon</p>
    </div>
    <a href="{{ route('admin.vouchers.create') }}"
       class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg font-medium transition flex items-center gap-2">
        <i class="fa-solid fa-plus"></i> Buat Voucher
    </a>
</div>

{{-- Stats --}}
<div class="grid grid-cols-1 sm:grid-cols-4 gap-4 mb-6">
    @php
        $total  = $vouchers->total();
        $active = \App\Models\Voucher::where('is_active', true)->count();
        $totalUsed = \App\Models\Voucher::sum('used_count');
    @endphp
    <div class="bg-white rounded-xl p-4 shadow-sm border-l-4 border-indigo-500">
        <p class="text-xs text-gray-500 uppercase tracking-wide">Total Voucher</p>
        <p class="text-2xl font-bold text-gray-800">{{ \App\Models\Voucher::count() }}</p>
    </div>
    <div class="bg-white rounded-xl p-4 shadow-sm border-l-4 border-green-500">
        <p class="text-xs text-gray-500 uppercase tracking-wide">Aktif</p>
        <p class="text-2xl font-bold text-gray-800">{{ $active }}</p>
    </div>
    <div class="bg-white rounded-xl p-4 shadow-sm border-l-4 border-yellow-500">
        <p class="text-xs text-gray-500 uppercase tracking-wide">Total Dipakai</p>
        <p class="text-2xl font-bold text-gray-800">{{ $totalUsed }}</p>
    </div>
    <div class="bg-white rounded-xl p-4 shadow-sm border-l-4 border-red-500">
        <p class="text-xs text-gray-500 uppercase tracking-wide">Nonaktif</p>
        <p class="text-2xl font-bold text-gray-800">{{ \App\Models\Voucher::where('is_active', false)->count() }}</p>
    </div>
</div>

{{-- Filter --}}
<div class="bg-white rounded-xl shadow-sm p-4 mb-4">
    <form method="GET" class="flex gap-3 flex-wrap">
        <input type="text" name="search" value="{{ request('search') }}"
               placeholder="Cari kode atau nama voucher..."
               class="flex-1 min-w-48 border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-indigo-400 outline-none">
        <select name="status" class="border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-indigo-400 outline-none">
            <option value="">Semua Status</option>
            <option value="active" @selected(request('status') === 'active')>Aktif</option>
            <option value="inactive" @selected(request('status') === 'inactive')>Nonaktif</option>
        </select>
        <button type="submit" class="bg-indigo-600 text-white px-4 py-2 rounded-lg text-sm hover:bg-indigo-700 transition">
            <i class="fa-solid fa-search mr-1"></i> Cari
        </button>
        @if(request()->hasAny(['search', 'status']))
            <a href="{{ route('admin.vouchers.index') }}" class="border border-gray-300 text-gray-600 px-4 py-2 rounded-lg text-sm hover:bg-gray-50 transition">
                Reset
            </a>
        @endif
    </form>
</div>

{{-- Table --}}
<div class="bg-white rounded-xl shadow-sm overflow-hidden">
    <div class="overflow-x-auto">
        <table class="w-full text-sm">
            <thead class="bg-gray-50 text-gray-600 uppercase text-xs">
                <tr>
                    <th class="px-4 py-3 text-left">Kode</th>
                    <th class="px-4 py-3 text-left">Nama</th>
                    <th class="px-4 py-3 text-left">Tipe</th>
                    <th class="px-4 py-3 text-left">Diskon</th>
                    <th class="px-4 py-3 text-left">Penggunaan</th>
                    <th class="px-4 py-3 text-left">Berlaku</th>
                    <th class="px-4 py-3 text-left">Status</th>
                    <th class="px-4 py-3 text-center">Aksi</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                @forelse($vouchers as $voucher)
                    <tr class="hover:bg-gray-50 transition">
                        <td class="px-4 py-3">
                            <code class="bg-indigo-50 text-indigo-700 px-2 py-1 rounded font-mono font-bold text-xs">
                                {{ $voucher->code }}
                            </code>
                        </td>
                        <td class="px-4 py-3 text-gray-800 font-medium">{{ $voucher->name }}</td>
                        <td class="px-4 py-3">
                            @if($voucher->type === 'percentage')
                                <span class="bg-blue-100 text-blue-700 px-2 py-0.5 rounded-full text-xs">Persen</span>
                            @else
                                <span class="bg-orange-100 text-orange-700 px-2 py-0.5 rounded-full text-xs">Fixed</span>
                            @endif
                        </td>
                        <td class="px-4 py-3 font-semibold text-gray-800">
                            @if($voucher->type === 'percentage')
                                {{ $voucher->discount_value }}%
                                @if($voucher->max_discount)
                                    <span class="text-xs text-gray-400 font-normal">(maks Rp {{ number_format($voucher->max_discount, 0, ',', '.') }})</span>
                                @endif
                            @else
                                Rp {{ number_format($voucher->discount_value, 0, ',', '.') }}
                            @endif
                        </td>
                        <td class="px-4 py-3 text-gray-600">
                            {{ $voucher->used_count }}
                            @if($voucher->max_uses)
                                / {{ $voucher->max_uses }}
                            @else
                                / &infin;
                            @endif
                        </td>
                        <td class="px-4 py-3 text-gray-600 text-xs">
                            @if($voucher->valid_from || $voucher->valid_until)
                                @if($voucher->valid_from)
                                    {{ $voucher->valid_from->format('d/m/Y') }}<br>
                                @endif
                                @if($voucher->valid_until)
                                    s/d {{ $voucher->valid_until->format('d/m/Y') }}
                                @endif
                            @else
                                <span class="text-gray-400">Tidak terbatas</span>
                            @endif
                        </td>
                        <td class="px-4 py-3">
                            @php $label = $voucher->status_label; @endphp
                            @if($label === 'Aktif')
                                <span class="bg-green-100 text-green-700 px-2 py-0.5 rounded-full text-xs font-medium">Aktif</span>
                            @elseif($label === 'Nonaktif')
                                <span class="bg-gray-100 text-gray-600 px-2 py-0.5 rounded-full text-xs font-medium">Nonaktif</span>
                            @elseif($label === 'Kadaluarsa')
                                <span class="bg-red-100 text-red-600 px-2 py-0.5 rounded-full text-xs font-medium">Kadaluarsa</span>
                            @elseif($label === 'Sudah digunakan')
                                <span class="bg-orange-100 text-orange-700 px-2 py-0.5 rounded-full text-xs font-medium">Sudah digunakan</span>
                            @else
                                <span class="bg-purple-100 text-purple-700 px-2 py-0.5 rounded-full text-xs font-medium">{{ $label }}</span>
                            @endif
                        </td>
                        <td class="px-4 py-3">
                            <div class="flex items-center justify-center gap-1">
                                <a href="{{ route('admin.vouchers.show', $voucher) }}"
                                   class="text-blue-500 hover:text-blue-700 p-1.5 rounded hover:bg-blue-50 transition" title="Detail">
                                    <i class="fa-solid fa-eye text-xs"></i>
                                </a>
                                <a href="{{ route('admin.vouchers.edit', $voucher) }}"
                                   class="text-indigo-500 hover:text-indigo-700 p-1.5 rounded hover:bg-indigo-50 transition" title="Edit">
                                    <i class="fa-solid fa-pen text-xs"></i>
                                </a>
                                <form method="POST" action="{{ route('admin.vouchers.destroy', $voucher) }}"
                                      onsubmit="return confirm('Hapus voucher {{ $voucher->code }}?')">
                                    @csrf @method('DELETE')
                                    <button type="submit"
                                            class="text-red-500 hover:text-red-700 p-1.5 rounded hover:bg-red-50 transition" title="Hapus">
                                        <i class="fa-solid fa-trash text-xs"></i>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="8" class="px-4 py-12 text-center text-gray-400">
                            <i class="fa-solid fa-ticket text-4xl mb-2 block opacity-30"></i>
                            Belum ada voucher. <a href="{{ route('admin.vouchers.create') }}" class="text-indigo-600 hover:underline">Buat sekarang</a>
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    @if($vouchers->hasPages())
        <div class="px-4 py-3 border-t border-gray-100">
            {{ $vouchers->links() }}
        </div>
    @endif
</div>
@endsection
