@extends('layouts.app')

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

@section('title', $isRtl ? 'بطاقات الدخول' : 'Access Cards')

@section('content')
<div class="space-y-8">
    <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
        <div class="flex items-center gap-3">
            <a href="{{ route('gates.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 ? 'بطاقات الدخول' : 'Access Cards' }}</h1>
                <p class="text-slate-500 mt-1">{{ $isRtl ? 'هذه الصفحة قديمة — يفضّل استخدام صفحة بطاقات الدخول الجديدة' : 'Legacy page — use the newer Access Cards module' }}</p>
            </div>
        </div>
        <a href="{{ route('access-cards.index') }}" class="inline-flex items-center gap-2 px-6 py-3 bg-emerald-600 hover:bg-emerald-700 text-white rounded-xl font-semibold shadow-lg shadow-emerald-500/20 transition-all">
            <i data-lucide="external-link" class="w-5 h-5"></i>
            {{ $isRtl ? 'فتح إدارة البطاقات' : 'Open Access Cards' }}
        </a>
    </div>

    <div class="bg-white rounded-3xl border-2 border-slate-200 overflow-hidden">
        <div class="p-6 border-b-2 border-slate-200 flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
            <form method="GET" class="flex flex-wrap items-center gap-3">
                <div class="relative">
                    <i data-lucide="search" class="absolute {{ $isRtl ? 'right-4' : 'left-4' }} top-1/2 -translate-y-1/2 w-5 h-5 text-slate-400"></i>
                    <input type="text" name="search" value="{{ request('search') }}" placeholder="{{ $isRtl ? 'بحث...' : 'Search...' }}"
                           class="w-72 bg-slate-100/80 border-0 rounded-xl {{ $isRtl ? 'pr-12 pl-4' : 'pl-12 pr-4' }} py-3 focus:ring-2 focus:ring-emerald-500/30">
                </div>
                <select name="status" class="bg-slate-100/80 border-0 rounded-xl px-4 py-3 focus:ring-2 focus:ring-emerald-500/30">
                    <option value="">{{ $isRtl ? 'كل الحالات' : 'All status' }}</option>
                    <option value="active" {{ request('status') === 'active' ? 'selected' : '' }}>{{ $isRtl ? 'نشطة' : 'Active' }}</option>
                    <option value="blocked" {{ request('status') === 'blocked' ? 'selected' : '' }}>{{ $isRtl ? 'محظورة' : 'Blocked' }}</option>
                    <option value="lost" {{ request('status') === 'lost' ? 'selected' : '' }}>{{ $isRtl ? 'مفقودة' : 'Lost' }}</option>
                </select>
                <button type="submit" class="px-6 py-3 bg-slate-900 hover:bg-slate-800 text-white rounded-xl font-semibold transition-colors inline-flex items-center gap-2">
                    <i data-lucide="filter" class="w-5 h-5"></i>
                    {{ $isRtl ? 'تصفية' : 'Filter' }}
                </button>
            </form>
        </div>

        <div class="overflow-x-auto">
            <table class="w-full">
                <thead class="bg-slate-100 text-slate-700 text-sm">
                    <tr>
                        <th class="text-{{ $isRtl ? 'right' : 'left' }} px-6 py-4 font-bold">{{ $isRtl ? 'العضو' : 'Member' }}</th>
                        <th class="text-center px-6 py-4 font-bold">{{ $isRtl ? 'رقم البطاقة' : 'Card #' }}</th>
                        <th class="text-center px-6 py-4 font-bold">{{ $isRtl ? 'النوع' : 'Type' }}</th>
                        <th class="text-center px-6 py-4 font-bold">{{ $isRtl ? 'الحالة' : 'Status' }}</th>
                        <th class="text-center px-6 py-4 font-bold">{{ $isRtl ? 'التأمين' : 'Deposit' }}</th>
                        <th class="text-center px-6 py-4 font-bold">{{ $isRtl ? 'الانتهاء' : 'Expiry' }}</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    @forelse($cards as $card)
                        <tr class="hover:bg-slate-50/50 transition-colors">
                            <td class="px-6 py-4">
                                <p class="font-bold text-slate-800">{{ $card->member?->full_name ?? '—' }}</p>
                                <p class="text-xs text-slate-400 mt-1 font-mono">{{ $card->member?->member_id ?? '' }}</p>
                            </td>
                            <td class="px-6 py-4 text-center font-mono text-slate-700">{{ $card->card_number }}</td>
                            <td class="px-6 py-4 text-center">{{ strtoupper($card->card_type) }}</td>
                            <td class="px-6 py-4 text-center">
                                <span class="px-3 py-1.5 rounded-full text-xs font-bold {{ $card->status === 'active' ? 'bg-emerald-100 text-emerald-700' : ($card->status === 'blocked' ? 'bg-rose-100 text-rose-700' : 'bg-amber-100 text-amber-700') }}">
                                    {{ strtoupper($card->status) }}
                                </span>
                            </td>
                            <td class="px-6 py-4 text-center font-mono text-slate-700">{{ number_format((float)$card->deposit_amount, 2) }} <span class="text-xs text-slate-500">{{ $currency }}</span></td>
                            <td class="px-6 py-4 text-center font-mono text-slate-700">{{ $card->expiry_date ? $card->expiry_date->format('Y-m-d') : '—' }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="px-6 py-16 text-center text-slate-500">{{ $isRtl ? 'لا توجد بطاقات' : 'No cards found' }}</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($cards->hasPages())
            <div class="px-6 py-4 border-t border-slate-200">
                {{ $cards->links() }}
            </div>
        @endif
    </div>
</div>
@endsection