@extends('layouts.app')

@php
    $locale = app()->getLocale();
    $isRtl = $locale === 'ar';

    $name = $isRtl && $gate->name_ar ? $gate->name_ar : $gate->name;

    $typeLabels = [
        'entry' => $isRtl ? 'دخول' : 'Entry',
        'exit' => $isRtl ? 'خروج' : 'Exit',
        'both' => $isRtl ? 'دخول/خروج' : 'Both',
    ];

    $locationLabels = [
        'main' => $isRtl ? 'رئيسية' : 'Main',
        'side' => $isRtl ? 'جانبية' : 'Side',
        'emergency' => $isRtl ? 'طوارئ' : 'Emergency',
        'vip' => $isRtl ? 'VIP' : 'VIP',
    ];

    $genderLabels = [
        'none' => $isRtl ? 'بدون' : 'None',
        'male' => $isRtl ? 'رجال' : 'Male',
        'female' => $isRtl ? 'نساء' : 'Female',
    ];
@endphp

@section('title', ($isRtl ? 'بوابة' : 'Gate') . ' - ' . $name)

@section('content')
<div class="max-w-7xl mx-auto space-y-8">
    <div class="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-4">
        <div class="flex items-start gap-3">
            <a href="{{ route('gates.index') }}" class="p-2 hover:bg-slate-100 rounded-xl transition-colors mt-1">
                <i data-lucide="arrow-{{ $isRtl ? 'right' : 'left' }}" class="w-5 h-5 text-slate-600"></i>
            </a>
            <div>
                <div class="flex items-center gap-3 flex-wrap">
                    <h1 class="text-3xl font-black text-slate-800">{{ $name }}</h1>
                    <span class="px-3 py-1.5 rounded-full text-xs font-bold {{ $gate->is_active ? 'bg-emerald-100 text-emerald-700' : 'bg-slate-100 text-slate-700' }}">
                        {{ $gate->is_active ? ($isRtl ? 'نشطة' : 'Active') : ($isRtl ? 'غير نشطة' : 'Inactive') }}
                    </span>
                    <span class="px-3 py-1.5 rounded-full text-xs font-bold bg-slate-100 text-slate-700 font-mono">{{ $gate->code }}</span>
                </div>
                <p class="text-slate-500 mt-1">
                    {{ $typeLabels[$gate->type] ?? $gate->type }}
                    <span class="text-slate-400">•</span>
                    {{ $locationLabels[$gate->location] ?? $gate->location }}
                    <span class="text-slate-400">•</span>
                    {{ $isRtl ? 'قيود:' : 'Restriction:' }} {{ $genderLabels[$gate->gender_restriction] ?? $gate->gender_restriction }}
                </p>
            </div>
        </div>

        <div class="flex flex-wrap items-center gap-3">
            <a href="{{ route('gates.terminal', $gate) }}"
               class="inline-flex items-center gap-2 px-5 py-3 bg-emerald-600 hover:bg-emerald-700 text-white rounded-xl font-semibold transition-colors">
                <i data-lucide="monitor" class="w-5 h-5"></i>
                {{ $isRtl ? 'واجهة البوابة' : 'Terminal' }}
            </a>
            <a href="{{ route('gates.logs', ['gate_id' => $gate->id]) }}"
               class="inline-flex items-center gap-2 px-5 py-3 bg-white border-2 border-slate-200 hover:bg-slate-50 text-slate-700 rounded-xl font-semibold transition-colors">
                <i data-lucide="list" class="w-5 h-5"></i>
                {{ $isRtl ? 'السجلات' : 'Logs' }}
            </a>
            <a href="{{ route('gates.edit', $gate) }}"
               class="inline-flex items-center gap-2 px-5 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-xl font-semibold transition-colors">
                <i data-lucide="pencil" class="w-5 h-5"></i>
                {{ $isRtl ? 'تعديل' : 'Edit' }}
            </a>
        </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
        <div class="bg-emerald-50 rounded-3xl border-2 border-emerald-200 p-6">
            <p class="text-sm text-emerald-700">{{ $isRtl ? 'دخول اليوم' : 'Entries Today' }}</p>
            <p class="text-3xl font-black text-emerald-700 mt-1">{{ $stats['entries_today'] ?? 0 }}</p>
        </div>
        <div class="bg-orange-50 rounded-3xl border-2 border-orange-200 p-6">
            <p class="text-sm text-orange-700">{{ $isRtl ? 'خروج اليوم' : 'Exits Today' }}</p>
            <p class="text-3xl font-black text-orange-700 mt-1">{{ $stats['exits_today'] ?? 0 }}</p>
        </div>
        <div class="bg-rose-50 rounded-3xl border-2 border-rose-200 p-6">
            <p class="text-sm text-rose-700">{{ $isRtl ? 'مرفوض اليوم' : 'Denied Today' }}</p>
            <p class="text-3xl font-black text-rose-700 mt-1">{{ $stats['denied_today'] ?? 0 }}</p>
        </div>
        <div class="bg-white rounded-3xl border-2 border-slate-200 p-6">
            <p class="text-sm text-slate-500">{{ $isRtl ? 'إجمالي السجلات' : 'Total Logs' }}</p>
            <p class="text-3xl font-black text-slate-800 mt-1">{{ $stats['total_logs'] ?? 0 }}</p>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div class="bg-white rounded-3xl border-2 border-slate-200 p-7 lg:col-span-1 space-y-4">
            <h2 class="text-xl font-black text-slate-800">{{ $isRtl ? 'تفاصيل البوابة' : 'Gate Details' }}</h2>

            <div class="space-y-3 text-sm">
                <div class="flex justify-between">
                    <span class="text-slate-500">{{ $isRtl ? 'النوع' : 'Type' }}</span>
                    <span class="font-bold text-slate-800">{{ $typeLabels[$gate->type] ?? $gate->type }}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-slate-500">{{ $isRtl ? 'الموقع' : 'Location' }}</span>
                    <span class="font-bold text-slate-800">{{ $locationLabels[$gate->location] ?? $gate->location }}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-slate-500">{{ $isRtl ? 'قيود الجنس' : 'Gender restriction' }}</span>
                    <span class="font-bold text-slate-800">{{ $genderLabels[$gate->gender_restriction] ?? $gate->gender_restriction }}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-slate-500">{{ $isRtl ? 'يتطلب اشتراك' : 'Requires subscription' }}</span>
                    <span class="font-bold {{ $gate->requires_active_subscription ? 'text-emerald-700' : 'text-slate-700' }}">
                        {{ $gate->requires_active_subscription ? ($isRtl ? 'نعم' : 'Yes') : ($isRtl ? 'لا' : 'No') }}
                    </span>
                </div>
                <div class="flex justify-between">
                    <span class="text-slate-500">{{ $isRtl ? 'الجهاز' : 'Device ID' }}</span>
                    <span class="font-mono text-slate-800">{{ $gate->device_id ?: '—' }}</span>
                </div>
            </div>

            @if($gate->description)
                <div class="pt-4 border-t border-slate-200">
                    <p class="text-slate-500 text-sm">{{ $isRtl ? 'الوصف' : 'Description' }}</p>
                    <p class="text-slate-700 mt-1">{{ $gate->description }}</p>
                </div>
            @endif
        </div>

        <div class="bg-white rounded-3xl border-2 border-slate-200 overflow-hidden lg:col-span-2">
            <div class="p-6 border-b-2 border-slate-200 flex items-center justify-between">
                <div>
                    <h2 class="text-xl font-black text-slate-800">{{ $isRtl ? 'أحدث السجلات' : 'Recent Logs' }}</h2>
                    <p class="text-slate-500 text-sm mt-1">{{ $isRtl ? 'آخر 25 عملية' : 'Last 25 events' }}</p>
                </div>
                <a href="{{ route('gates.logs', ['gate_id' => $gate->id]) }}" class="text-emerald-600 hover:text-emerald-700 font-bold text-sm inline-flex items-center gap-2">
                    {{ $isRtl ? 'عرض الكل' : 'View all' }}
                    <i data-lucide="arrow-{{ $isRtl ? 'left' : 'right' }}" class="w-4 h-4"></i>
                </a>
            </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 ? 'الوقت' : 'Time' }}</th>
                            <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 ? 'النوع' : 'Type' }}</th>
                            <th class="text-center px-6 py-4 font-bold">{{ $isRtl ? 'الحالة' : 'Status' }}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100">
                        @forelse($recentLogs as $log)
                            <tr class="hover:bg-slate-50/50 transition-colors">
                                <td class="px-6 py-4 font-mono text-slate-700">{{ $log->access_time?->format('Y-m-d H:i') }}</td>
                                <td class="px-6 py-4">
                                    <p class="font-bold text-slate-800">{{ $log->member?->full_name ?? '—' }}</p>
                                    <p class="text-xs text-slate-400 mt-1 font-mono">{{ $log->member?->member_id ?? '' }}</p>
                                </td>
                                <td class="px-6 py-4 text-center">
                                    <span class="px-3 py-1 rounded-lg text-xs font-bold {{ $log->access_type === 'entry' ? 'bg-emerald-100 text-emerald-700' : 'bg-orange-100 text-orange-700' }}">
                                        {{ $log->access_type === 'entry' ? ($isRtl ? 'دخول' : 'Entry') : ($isRtl ? 'خروج' : 'Exit') }}
                                    </span>
                                </td>
                                <td class="px-6 py-4 text-center">
                                    <span class="px-3 py-1 rounded-lg text-xs font-bold {{ $log->status === 'granted' ? 'bg-emerald-100 text-emerald-700' : 'bg-rose-100 text-rose-700' }}">
                                        {{ $log->status === 'granted' ? ($isRtl ? 'مسموح' : 'Granted') : ($isRtl ? 'مرفوض' : 'Denied') }}
                                    </span>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="4" class="px-6 py-16 text-center text-slate-500">{{ $isRtl ? 'لا توجد سجلات' : 'No logs' }}</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection