@extends('layouts.app')

@php
    $locale = app()->getLocale();
    $isRtl = $locale === 'ar';
    $currency = \App\Models\Setting::currencyLabel($locale);
@endphp

@section('title', $isRtl ? 'إصدار بطاقة دخول' : 'Issue Access Card')

@section('content')
<div class="max-w-3xl mx-auto space-y-8">
    <!-- Header -->
    <div class="flex items-center gap-3">
        <a href="{{ route('access-cards.index') }}" class="p-2 hover:bg-slate-100 rounded-xl transition-colors">
            <i data-lucide="arrow-{{ $isRtl ? 'right' : 'left' }}" class="w-5 h-5 text-slate-600"></i>
        </a>
        <div>
            <h1 class="text-3xl font-black text-slate-800">{{ $isRtl ? 'إصدار بطاقة دخول' : 'Issue Access Card' }}</h1>
            <p class="text-slate-500 mt-1">{{ $isRtl ? 'إصدار بطاقة جديدة لعضو' : 'Issue a new access card for a member' }}</p>
        </div>
    </div>

    @if($errors->any())
        <div class="bg-rose-50 border-2 border-rose-200 rounded-3xl p-6 text-rose-700">
            <div class="flex items-center gap-3 mb-3">
                <div class="w-10 h-10 bg-rose-500 rounded-xl flex items-center justify-center">
                    <i data-lucide="alert-circle" class="w-5 h-5 text-white"></i>
                </div>
                <p class="font-bold">{{ $isRtl ? 'يرجى تصحيح الأخطاء التالية:' : 'Please fix the following errors:' }}</p>
            </div>
            <ul class="list-disc {{ $isRtl ? 'pr-6' : 'pl-6' }} space-y-1 text-sm">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    @if(($members ?? collect())->count() === 0)
        <div class="bg-white rounded-3xl border-2 border-slate-200 p-8">
            <div class="flex items-start gap-4">
                <div class="w-12 h-12 bg-amber-100 rounded-2xl flex items-center justify-center">
                    <i data-lucide="info" class="w-6 h-6 text-amber-700"></i>
                </div>
                <div class="flex-1">
                    <p class="font-black text-slate-800 text-lg">{{ $isRtl ? 'لا يوجد أعضاء متاحون' : 'No members available' }}</p>
                    <p class="text-slate-500 mt-1">
                        {{ $isRtl ? 'كل الأعضاء لديهم بطاقة نشطة حالياً، أو لا يوجد أعضاء نشطون.' : 'All members already have an active card, or there are no active members.' }}
                    </p>
                    <div class="mt-5 flex flex-wrap gap-3">
                        <a href="{{ route('access-cards.index') }}" class="px-6 py-3 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-xl font-semibold transition-colors">
                            {{ $isRtl ? 'عودة' : 'Back' }}
                        </a>
                    </div>
                </div>
            </div>
        </div>
    @else
        <form action="{{ route('access-cards.store') }}" method="POST" class="space-y-8">
            @csrf

            <div class="bg-white rounded-3xl border-2 border-slate-200 p-8 space-y-8">
                <!-- Member -->
                <div>
                    <label class="block text-sm font-bold text-slate-700 mb-2">{{ $isRtl ? 'العضو' : 'Member' }} *</label>
                    <select name="member_id" required
                            class="w-full px-4 py-3 bg-slate-50 border-2 border-slate-200 rounded-xl focus:border-emerald-500 focus:ring-4 focus:ring-emerald-500/10 outline-none transition-all">
                        <option value="">{{ $isRtl ? 'اختر العضو' : 'Select member' }}</option>
                        @foreach($members as $member)
                            <option value="{{ $member->id }}" {{ old('member_id') == $member->id ? 'selected' : '' }}>
                                {{ $member->full_name }} - {{ $member->member_id }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <!-- Card Type -->
                <div>
                    <label class="block text-sm font-bold text-slate-700 mb-3">{{ $isRtl ? 'نوع البطاقة' : 'Card Type' }} *</label>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        @php
                            $types = [
                                'magnetic' => ['label_ar' => 'مغناطيسية', 'label_en' => 'Magnetic', 'icon' => 'magnet'],
                                'rfid' => ['label_ar' => 'RFID', 'label_en' => 'RFID', 'icon' => 'radio'],
                                'nfc' => ['label_ar' => 'NFC', 'label_en' => 'NFC', 'icon' => 'smartphone'],
                                'qr' => ['label_ar' => 'QR', 'label_en' => 'QR', 'icon' => 'qr-code'],
                            ];
                        @endphp
                        @foreach($types as $key => $t)
                            <label class="relative cursor-pointer block">
                                <input type="radio" name="card_type" value="{{ $key }}" class="peer sr-only" required
                                       {{ old('card_type', 'rfid') === $key ? 'checked' : '' }}>
                                <div class="p-5 bg-slate-50/60 rounded-2xl border-2 border-slate-200 hover:border-slate-300 hover:bg-slate-50 transition-all peer-checked:border-emerald-500 peer-checked:bg-emerald-50">
                                    <div class="absolute top-4 {{ $isRtl ? 'left-4' : 'right-4' }} hidden peer-checked:flex w-9 h-9 bg-emerald-500 rounded-xl items-center justify-center shadow-lg shadow-emerald-500/30">
                                        <i data-lucide="check" class="w-5 h-5 text-white"></i>
                                    </div>
                                    <div class="flex items-center gap-4">
                                        <div class="w-12 h-12 rounded-2xl bg-white border border-slate-200 flex items-center justify-center">
                                            <i data-lucide="{{ $t['icon'] }}" class="w-6 h-6 text-slate-700"></i>
                                        </div>
                                        <div>
                                            <p class="font-black text-slate-800">{{ $isRtl ? $t['label_ar'] : $t['label_en'] }}</p>
                                            <p class="text-sm text-slate-500">{{ $isRtl ? 'اختيار نوع البطاقة' : 'Select card type' }}</p>
                                        </div>
                                    </div>
                                </div>
                            </label>
                        @endforeach
                    </div>
                </div>

                <!-- Card Number -->
                <div>
                    <label class="block text-sm font-bold text-slate-700 mb-2">{{ $isRtl ? 'رقم البطاقة (اختياري)' : 'Card Number (optional)' }}</label>
                    <input type="text" name="card_number" value="{{ old('card_number') }}"
                           placeholder="{{ $isRtl ? 'اتركه فارغاً للتوليد التلقائي' : 'Leave empty for auto generation' }}"
                           class="w-full px-4 py-3 bg-slate-50 border-2 border-slate-200 rounded-xl focus:border-emerald-500 focus:ring-4 focus:ring-emerald-500/10 outline-none transition-all font-mono">
                </div>

                <!-- Deposit / Expiry -->
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-bold text-slate-700 mb-2">{{ $isRtl ? 'مبلغ التأمين' : 'Deposit Amount' }} *</label>
                        <div class="relative">
                            <input type="number" name="deposit_amount" step="0.01" required value="{{ old('deposit_amount', 0) }}"
                                   class="w-full {{ $isRtl ? 'pl-16' : 'pr-16' }} px-4 py-3 bg-slate-50 border-2 border-slate-200 rounded-xl focus:border-emerald-500 focus:ring-4 focus:ring-emerald-500/10 outline-none transition-all">
                            <span class="absolute {{ $isRtl ? 'left-4' : 'right-4' }} top-1/2 -translate-y-1/2 text-sm font-bold text-slate-500">{{ $currency }}</span>
                        </div>
                        <p class="text-xs text-slate-400 mt-2">{{ $isRtl ? 'يُسجَّل المبلغ كدفعة "أخرى" عند الإصدار.' : 'Recorded as an “other” payment on issue.' }}</p>
                    </div>
                    <div>
                        <label class="block text-sm font-bold text-slate-700 mb-2">{{ $isRtl ? 'تاريخ الانتهاء (اختياري)' : 'Expiry Date (optional)' }}</label>
                        <input type="date" name="expiry_date" value="{{ old('expiry_date') }}"
                               class="w-full px-4 py-3 bg-slate-50 border-2 border-slate-200 rounded-xl focus:border-emerald-500 focus:ring-4 focus:ring-emerald-500/10 outline-none transition-all">
                        <p class="text-xs text-slate-400 mt-2">{{ $isRtl ? 'اتركه فارغاً إذا لا يوجد تاريخ انتهاء.' : 'Leave empty if no expiry date.' }}</p>
                    </div>
                </div>

                <!-- Notes -->
                <div>
                    <label class="block text-sm font-bold text-slate-700 mb-2">{{ $isRtl ? 'ملاحظات' : 'Notes' }}</label>
                    <textarea name="notes" rows="2"
                              class="w-full px-4 py-3 bg-slate-50 border-2 border-slate-200 rounded-xl focus:border-emerald-500 focus:ring-4 focus:ring-emerald-500/10 outline-none transition-all resize-none">{{ old('notes') }}</textarea>
                </div>
            </div>

            <!-- Actions -->
            <div class="flex flex-wrap items-center justify-end gap-3">
                <a href="{{ route('access-cards.index') }}" class="px-6 py-3 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-xl font-semibold transition-colors">
                    {{ $isRtl ? 'إلغاء' : 'Cancel' }}
                </a>
                <button type="submit" class="px-7 py-3 bg-gradient-to-r from-emerald-500 to-emerald-600 hover:from-emerald-600 hover:to-emerald-700 text-white rounded-xl transition-all flex items-center gap-2 font-bold shadow-lg shadow-emerald-500/30 hover:shadow-emerald-500/50">
                    <i data-lucide="badge-check" class="w-5 h-5"></i>
                    {{ $isRtl ? 'إصدار البطاقة' : 'Issue Card' }}
                </button>
            </div>
        </form>
    @endif
</div>
@endsection