@extends('admin.layout')

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

@section('content')
<div class="max-w-4xl mx-auto">
    <div class="flex items-center gap-3 mb-6">
        <a href="{{ route('admin.vouchers.index') }}" class="text-gray-400 hover:text-gray-600 transition">
            <i class="fa-solid fa-arrow-left"></i>
        </a>
        <div>
            <h1 class="text-2xl font-bold text-gray-800">Detail Voucher</h1>
            <code class="bg-indigo-50 text-indigo-700 px-2 py-0.5 rounded font-mono text-sm">{{ $voucher->code }}</code>
        </div>
        <div class="ml-auto">
            <a href="{{ route('admin.vouchers.edit', $voucher) }}"
               class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition">
                <i class="fa-solid fa-pen mr-1"></i> Edit
            </a>
        </div>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-6">
        <div class="bg-white rounded-xl p-5 shadow-sm border-l-4 border-indigo-500">
            <p class="text-xs text-gray-500 uppercase tracking-wide mb-1">Total Penggunaan</p>
            <p class="text-3xl font-bold text-gray-800">{{ $voucher->used_count }}</p>
            @if($voucher->max_uses)
                <p class="text-xs text-gray-400 mt-1">dari {{ $voucher->max_uses }} maks.</p>
            @endif
        </div>
        <div class="bg-white rounded-xl p-5 shadow-sm border-l-4 border-green-500">
            <p class="text-xs text-gray-500 uppercase tracking-wide mb-1">Nilai Diskon</p>
            <p class="text-3xl font-bold text-gray-800">
                @if($voucher->type === 'percentage'){{ $voucher->discount_value }}%
                @else Rp {{ number_format($voucher->discount_value, 0, ',', '.') }}
                @endif
            </p>
            <p class="text-xs text-gray-400 mt-1">{{ $voucher->type === 'percentage' ? 'Persentase' : 'Nominal Tetap' }}</p>
        </div>
        <div class="bg-white rounded-xl p-5 shadow-sm border-l-4 border-{{ $voucher->status_label === 'Aktif' ? 'green' : ($voucher->status_label === 'Sudah digunakan' ? 'orange' : 'red') }}-500">
            <p class="text-xs text-gray-500 uppercase tracking-wide mb-1">Status</p>
            <p class="text-3xl font-bold text-gray-800">{{ $voucher->status_label }}</p>
        </div>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6">
        <div class="bg-white rounded-xl shadow-sm p-5">
            <h3 class="font-semibold text-gray-700 mb-3">Informasi Voucher</h3>
            <dl class="space-y-2 text-sm">
                <div class="flex justify-between">
                    <dt class="text-gray-500">Nama</dt>
                    <dd class="font-medium text-gray-800">{{ $voucher->name }}</dd>
                </div>
                @if($voucher->description)
                <div>
                    <dt class="text-gray-500 mb-1">Deskripsi</dt>
                    <dd class="text-gray-700">{{ $voucher->description }}</dd>
                </div>
                @endif
                <div class="flex justify-between">
                    <dt class="text-gray-500">Min. Pembelian</dt>
                    <dd class="font-medium text-gray-800">
                        {{ $voucher->min_purchase > 0 ? 'Rp ' . number_format($voucher->min_purchase, 0, ',', '.') : 'Tidak ada' }}
                    </dd>
                </div>
                @if($voucher->max_discount)
                <div class="flex justify-between">
                    <dt class="text-gray-500">Maks. Diskon</dt>
                    <dd class="font-medium text-gray-800">Rp {{ number_format($voucher->max_discount, 0, ',', '.') }}</dd>
                </div>
                @endif
                <div class="flex justify-between">
                    <dt class="text-gray-500">Berlaku Mulai</dt>
                    <dd class="font-medium text-gray-800">{{ $voucher->valid_from?->format('d M Y H:i') ?? 'Tidak terbatas' }}</dd>
                </div>
                <div class="flex justify-between">
                    <dt class="text-gray-500">Berlaku Sampai</dt>
                    <dd class="font-medium text-gray-800">{{ $voucher->valid_until?->format('d M Y H:i') ?? 'Tidak terbatas' }}</dd>
                </div>
                <div class="flex justify-between">
                    <dt class="text-gray-500">Dibuat</dt>
                    <dd class="font-medium text-gray-800">{{ $voucher->created_at->format('d M Y H:i') }}</dd>
                </div>
            </dl>
        </div>

        <div class="bg-white rounded-xl shadow-sm p-5">
            <h3 class="font-semibold text-gray-700 mb-3">Statistik Penggunaan</h3>
            @if($voucher->max_uses)
                @php $pct = $voucher->max_uses > 0 ? ($voucher->used_count / $voucher->max_uses * 100) : 0; @endphp
                <div class="mb-4">
                    <div class="flex justify-between text-xs text-gray-500 mb-1">
                        <span>Dipakai: {{ $voucher->used_count }}</span>
                        <span>Maks: {{ $voucher->max_uses }}</span>
                    </div>
                    <div class="w-full bg-gray-100 rounded-full h-3">
                        <div class="bg-indigo-500 h-3 rounded-full transition-all"
                             style="width: {{ min($pct, 100) }}%"></div>
                    </div>
                    <p class="text-xs text-gray-400 mt-1">{{ number_format($pct, 1) }}% terpakai</p>
                </div>
            @else
                <p class="text-sm text-gray-500">Penggunaan tidak dibatasi</p>
            @endif
        </div>
    </div>

    {{-- Riwayat Penggunaan --}}
    <div class="bg-white rounded-xl shadow-sm overflow-hidden">
        <div class="px-5 py-4 border-b border-gray-100 flex items-center justify-between">
            <h3 class="font-semibold text-gray-700">Riwayat Penggunaan</h3>
            <span class="text-xs text-gray-400">{{ $usages->total() }} total</span>
        </div>
        @if($usages->isEmpty())
            <div class="py-12 text-center text-gray-400">
                <i class="fa-solid fa-clock-rotate-left text-3xl mb-2 block opacity-30"></i>
                Belum ada riwayat penggunaan
            </div>
        @else
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead class="bg-gray-50 text-gray-500 text-xs uppercase">
                        <tr>
                            <th class="px-4 py-3 text-left">Waktu</th>
                            <th class="px-4 py-3 text-left">Identitas</th>
                            <th class="px-4 py-3 text-left">Order ID</th>
                            <th class="px-4 py-3 text-right">Diskon Diterapkan</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100">
                        @foreach($usages as $usage)
                            <tr class="hover:bg-gray-50">
                                <td class="px-4 py-3 text-gray-600">{{ $usage->created_at->format('d M Y H:i') }}</td>
                                <td class="px-4 py-3 text-gray-700">{{ $usage->user_identifier ?? '-' }}</td>
                                <td class="px-4 py-3 text-gray-700">{{ $usage->order_id ?? '-' }}</td>
                                <td class="px-4 py-3 text-right font-medium text-green-600">
                                    Rp {{ number_format($usage->discount_applied, 0, ',', '.') }}
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            @if($usages->hasPages())
                <div class="px-4 py-3 border-t border-gray-100">
                    {{ $usages->links() }}
                </div>
            @endif
        @endif
    </div>
</div>
@endsection