@extends('layouts.admin')

@section('title', 'Activation PINs - ' . $appName . ' Admin')

@section('content')
<div class="space-y-6">
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div>
            <h1 class="text-2xl font-bold text-slate-900 dark:text-white">Activation Codes & PINs</h1>
            <p class="text-xs text-slate-500 dark:text-slate-400">Generate encrypted registration keys and PINs for membership activation.</p>
        </div>

        <!-- Quick Code Generator Card -->
        <form method="POST" action="{{ route('admin.codes.generate') }}" class="flex flex-wrap sm:flex-nowrap items-center gap-2 bg-white dark:bg-slate-900 p-2 rounded-2xl border border-slate-200 dark:border-slate-800 shadow-xs transition-colors w-full sm:w-auto">
            @csrf
            <select name="package_id" required class="flex-1 min-w-[140px] px-3 py-1.5 border border-slate-200 dark:border-slate-700 rounded-xl text-xs bg-slate-50 dark:bg-slate-800 text-slate-800 dark:text-slate-200">
                @foreach($packages as $p)
                    <option value="{{ $p->id }}">{{ $p->name }} (₱{{ number_format($p->price, 0) }})</option>
                @endforeach
            </select>
            <input type="number" name="quantity" value="5" min="1" max="50" class="w-14 sm:w-16 px-2 py-1.5 border border-slate-200 dark:border-slate-700 rounded-xl text-xs text-center font-bold bg-slate-50 dark:bg-slate-800 text-slate-800 dark:text-slate-200">
            <button type="submit" class="px-3.5 py-1.5 bg-sky-600 hover:bg-sky-700 text-white rounded-xl text-xs font-bold shadow transition flex items-center justify-center gap-1 shrink-0">
                <i data-lucide="plus" class="w-3.5 h-3.5"></i>
                <span>Generate</span>
            </button>
        </form>
    </div>

    <!-- Codes Table -->
    <div class="bg-white dark:bg-slate-900 rounded-2xl border border-slate-200 dark:border-slate-800 shadow-xs overflow-hidden transition-colors">
        <div class="overflow-x-auto">
            <table class="w-full text-left text-xs">
                <thead class="bg-slate-50 dark:bg-slate-800/80 text-slate-600 dark:text-slate-300 font-bold uppercase tracking-wider">
                    <tr>
                        <th class="px-6 py-4">Code</th>
                        <th class="px-6 py-4">Security PIN</th>
                        <th class="px-6 py-4">Package</th>
                        <th class="px-6 py-4">Created Date</th>
                        <th class="px-6 py-4">Status</th>
                        <th class="px-6 py-4">Used By</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100 dark:divide-slate-800 text-slate-700 dark:text-slate-300">
                    @forelse($codes as $code)
                        <tr class="hover:bg-slate-50 dark:hover:bg-slate-800/50 font-mono">
                            <td class="px-6 py-4 font-bold text-sky-600 dark:text-sky-400">{{ $code->code }}</td>
                            <td class="px-6 py-4 font-bold text-amber-600 dark:text-amber-400">{{ $code->pin }}</td>
                            <td class="px-6 py-4 font-sans font-bold text-slate-900 dark:text-white">{{ $code->package->name ?? 'Starter' }}</td>
                            <td class="px-6 py-4 font-sans text-slate-500 dark:text-slate-400">{{ $code->created_at->format('M d, Y') }}</td>
                            <td class="px-6 py-4 font-sans">
                                <span class="px-2 py-0.5 rounded-full text-[10px] font-bold {{ $code->is_used ? 'bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400' : 'bg-emerald-100 dark:bg-emerald-950/50 text-emerald-800 dark:text-emerald-300' }}">
                                    {{ $code->is_used ? 'Used' : 'Available' }}
                                </span>
                            </td>
                            <td class="px-6 py-4 font-sans text-slate-500 dark:text-slate-400">
                                {{ $code->usedByUser ? $code->usedByUser->full_name : '—' }}
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="px-6 py-12 text-center text-slate-400 font-sans">No activation codes generated yet. Use the form above to generate codes.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($codes->hasPages())
            <div class="p-4 border-t border-slate-100 dark:border-slate-800">
                {{ $codes->links() }}
            </div>
        @endif
    </div>
</div>
@endsection