@extends('admin.layout')

@section('title', 'Promosi & Voucher')

@section('content')
<div class="space-y-6">
    <div class="flex justify-between items-center">
        <div>
            <h2 class="font-headline-lg text-3xl font-bold text-on-surface">Promosi & Voucher</h2>
            <p class="text-body-md text-on-surface-variant">Kelola kampanye diskon dan voucher pelanggan.</p>
        </div>
        <a href="{{ route('admin.promotions.create') }}" class="px-6 py-2.5 bg-primary text-on-primary rounded-xl font-label-lg hover:bg-primary/90 transition-colors flex items-center gap-2">
            <span class="material-symbols-outlined">add</span> Tambah Promo
        </a>
    </div>

    @if(session('success'))
    <div class="p-4 bg-green-50 text-green-700 rounded-xl">
        {{ session('success') }}
    </div>
    @endif

    <div class="bg-surface border border-outline-variant rounded-2xl overflow-hidden shadow-sm">
        <div class="overflow-x-auto">
            <table class="w-full text-left border-collapse">
                <thead>
                    <tr class="border-b border-outline-variant bg-surface-container-lowest">
                        <th class="p-4 font-label-lg text-on-surface">Info Promo</th>
                        <th class="p-4 font-label-lg text-on-surface">Benefit</th>
                        <th class="p-4 font-label-lg text-on-surface">Target & Kuota</th>
                        <th class="p-4 font-label-lg text-on-surface">Periode</th>
                        <th class="p-4 font-label-lg text-on-surface text-center">Status</th>
                        <th class="p-4 font-label-lg text-on-surface text-right">Aksi</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-outline-variant">
                    @forelse($promotions as $promo)
                    <tr class="hover:bg-surface-container-lowest transition-colors">
                        <td class="p-4">
                            <div class="font-bold text-on-surface">{{ $promo->name }}</div>
                            <div class="text-sm text-on-surface-variant flex items-center gap-1 mt-1">
                                <span class="material-symbols-outlined text-[16px]">local_offer</span>
                                @if($promo->code)
                                    <span class="font-mono bg-primary/10 text-primary px-1.5 rounded text-xs">{{ $promo->code }}</span>
                                @else
                                    <span class="italic">Tanpa Kode</span>
                                @endif
                            </div>
                        </td>
                        <td class="p-4">
                            <div class="font-bold text-primary">
                                @if($promo->discount_type === 'percentage')
                                    {{ (float) $promo->discount_value }}%
                                @else
                                    Rp {{ number_format($promo->discount_value, 0, ',', '.') }}
                                @endif
                            </div>
                            @if($promo->discount_type === 'percentage' && $promo->max_discount_amount)
                                <div class="text-xs text-on-surface-variant">Max: Rp {{ number_format($promo->max_discount_amount, 0, ',', '.') }}</div>
                            @endif
                        </td>
                        <td class="p-4">
                            <div class="text-sm">
                                <span class="font-bold">User:</span> {{ $promo->eligible_user_type === 'new_user' ? 'Pengguna Baru' : 'Semua Pengguna' }}
                            </div>
                            <div class="text-sm mt-1">
                                <span class="font-bold">Kuota:</span> {{ $promo->used_count }} / {{ $promo->quota ?? '∞' }}
                            </div>
                        </td>
                        <td class="p-4">
                            <div class="text-sm">{{ $promo->start_date->format('d M Y, H:i') }}</div>
                            <div class="text-sm text-on-surface-variant">s.d. {{ $promo->end_date->format('d M Y, H:i') }}</div>
                        </td>
                        <td class="p-4 text-center">
                            <form action="{{ route('admin.promotions.toggle', $promo->id) }}" method="POST">
                                @csrf
                                @method('PATCH')
                                <button type="submit" class="px-3 py-1 rounded-full text-xs font-bold {{ $promo->is_active ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700' }}">
                                    {{ $promo->is_active ? 'Aktif' : 'Nonaktif' }}
                                </button>
                            </form>
                        </td>
                        <td class="p-4 text-right flex justify-end gap-2">
                            <a href="{{ route('admin.promotions.edit', $promo->id) }}" class="p-2 text-primary hover:bg-primary/10 rounded-lg transition-colors">
                                <span class="material-symbols-outlined">edit</span>
                            </a>
                            <form action="{{ route('admin.promotions.destroy', $promo->id) }}" method="POST" onsubmit="return confirm('Yakin ingin menghapus promo ini?');">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="p-2 text-error hover:bg-error/10 rounded-lg transition-colors">
                                    <span class="material-symbols-outlined">delete</span>
                                </button>
                            </form>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="6" class="p-8 text-center text-on-surface-variant">
                            Belum ada promosi atau voucher yang dibuat.
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection