@extends('layouts.app')

@section('content')

<div class="py-12">
    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        <!-- Back Button -->
        <div class="mb-6">
            <a href="{{ route('admin.dashboard') }}" class="text-[#d4af37] hover:text-[#e8c547] flex items-center gap-2 font-bold">
                ← {{ app()->getLocale() == 'ar' ? 'العودة' : 'Back' }}
            </a>
        </div>

        <div class="bg-[#111] border border-gray-800 rounded-2xl shadow-2xl overflow-hidden">
            <!-- Header -->
            <div class="bg-gradient-to-r from-[#d4af37] to-[#8b7500] px-8 py-6">
                <div class="flex items-center justify-between {{ app()->getLocale() == 'ar' ? 'flex-row-reverse' : '' }}">
                    <div class="{{ app()->getLocale() == 'ar' ? 'text-right' : 'text-left' }}">
                        <h2 class="text-3xl font-bold text-white">
                            {{ app()->getLocale() == 'ar' ? '📊 إدارة مستخدمي الموقع' : '📊 Site Users Management' }}
                        </h2>
                        <p class="text-white/70 text-sm mt-1">
                            {{ app()->getLocale() == 'ar' ? 'جميع المستخدمين المسجلين في الموقع' : 'All users registered on the site' }}
                        </p>
                    </div>
                    <button onclick="openAddCustomerModal()" class="px-6 py-2.5 bg-[#d4af37] text-black font-bold rounded-lg hover:bg-[#e8c547] transition text-sm {{ app()->getLocale() == 'ar' ? 'ml-8' : 'mr-8' }}">
                        {{ app()->getLocale() == 'ar' ? '➕ إضافة عميل جديد' : '➕ Add New Customer' }}
                    </button>
                </div>
            </div>

            <!-- Filters -->
            <div class="px-8 py-6 border-b border-gray-800">
                <form method="GET" class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <!-- Search -->
                    <div>
                        <input type="text" name="search" placeholder="{{ app()->getLocale() == 'ar' ? 'ابحث بالاسم أو الهاتف...' : 'Search by name or phone...' }}" 
                               value="{{ $search }}" class="w-full px-4 py-2 bg-black/50 border border-gray-700 rounded-lg text-white placeholder-gray-500 focus:border-[#d4af37] focus:outline-none">
                    </div>

                    <!-- Status Filter -->
                    <div>
                        <select name="status" class="w-full px-4 py-2 bg-black/50 border border-gray-700 rounded-lg text-white focus:border-[#d4af37] focus:outline-none">
                            <option value="">{{ app()->getLocale() == 'ar' ? 'جميع الحالات' : 'All Status' }}</option>
                            <option value="active" {{ $status === 'active' ? 'selected' : '' }}>{{ app()->getLocale() == 'ar' ? '✅ نشط' : '✅ Active' }}</option>
                            <option value="defaulter" {{ $status === 'defaulter' ? 'selected' : '' }}>{{ app()->getLocale() == 'ar' ? '⚠️ متعثر' : '⚠️ Defaulter' }}</option>
                            <option value="blacklisted" {{ $status === 'blacklisted' ? 'selected' : '' }}>{{ app()->getLocale() == 'ar' ? '🚫 محظور' : '🚫 Blacklisted' }}</option>
                        </select>
                    </div>

                    <div class="flex gap-2">
                        <button type="submit" class="flex-1 px-6 py-2 bg-[#d4af37] text-black font-bold rounded-lg hover:bg-[#e8c547] transition">
                            {{ app()->getLocale() == 'ar' ? 'بحث' : 'Search' }}
                        </button>
                        <a href="{{ route('admin.customers.index') }}" class="flex-1 px-6 py-2 bg-gray-700 text-white font-bold rounded-lg hover:bg-gray-600 transition text-center">
                            {{ app()->getLocale() == 'ar' ? 'مسح' : 'Clear' }}
                        </a>
                    </div>
                </form>
            </div>

            <!-- Customers Table -->
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead class="bg-black/50 border-b border-gray-700">
                        <tr>
                            <th class="px-8 py-4 text-left text-xs font-bold text-[#d4af37] uppercase">{{ app()->getLocale() == 'ar' ? 'العميل' : 'Customer' }}</th>
                            <th class="px-8 py-4 text-left text-xs font-bold text-[#d4af37] uppercase">{{ app()->getLocale() == 'ar' ? 'الحالة' : 'Status' }}</th>
                            <th class="px-8 py-4 text-left text-xs font-bold text-[#d4af37] uppercase">{{ app()->getLocale() == 'ar' ? 'العقود' : 'Contracts' }}</th>
                            <th class="px-8 py-4 text-left text-xs font-bold text-[#d4af37] uppercase">{{ app()->getLocale() == 'ar' ? 'المبلغ المتأخر' : 'Outstanding' }}</th>
                            <th class="px-8 py-4 text-left text-xs font-bold text-[#d4af37] uppercase">{{ app()->getLocale() == 'ar' ? 'المخالفات' : 'Violations' }}</th>
                            <th class="px-8 py-4 text-center text-xs font-bold text-[#d4af37] uppercase">{{ app()->getLocale() == 'ar' ? 'الإجراءات' : 'Actions' }}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-800">
                        @forelse($customers as $customer)
                            @php
                                $rating = $customer->rating;
                                $pendingDelays = $customer->paymentDelays()->where('status', '!=', 'paid')->sum('delayed_amount');
                                $violations = $customer->violations()->count();
                                $isBlacklisted = $customer->isBlacklisted();
                            @endphp
                            <tr class="hover:bg-black/30 transition">
                                <td class="px-8 py-4">
                                    <div class="flex items-center gap-3">
                                        <div class="w-10 h-10 rounded-full bg-gradient-to-br from-[#d4af37] to-[#8b7500] flex items-center justify-center font-bold text-black">
                                            {{ substr($customer->name, 0, 1) }}
                                        </div>
                                        <div>
                                            <div class="font-bold text-white">{{ $customer->name }}</div>
                                            <div class="text-xs text-gray-400">{{ $customer->phone }}</div>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-8 py-4">
                                    @if($isBlacklisted)
                                        <span class="px-3 py-1 bg-red-500/20 text-red-400 rounded-full text-xs font-bold">🚫 {{ app()->getLocale() == 'ar' ? 'محظور' : 'Blacklisted' }}</span>
                                    @elseif($rating)
                                        @if($rating->risk_level == 'critical')
                                            <span class="px-3 py-1 bg-red-500/20 text-red-400 rounded-full text-xs font-bold">🔴 {{ app()->getLocale() == 'ar' ? 'حرج' : 'Critical' }}</span>
                                        @elseif($rating->risk_level == 'high')
                                            <span class="px-3 py-1 bg-orange-500/20 text-orange-400 rounded-full text-xs font-bold">🟠 {{ app()->getLocale() == 'ar' ? 'مرتفع' : 'High' }}</span>
                                        @elseif($rating->risk_level == 'medium')
                                            <span class="px-3 py-1 bg-yellow-500/20 text-yellow-400 rounded-full text-xs font-bold">🟡 {{ app()->getLocale() == 'ar' ? 'متوسط' : 'Medium' }}</span>
                                        @else
                                            <span class="px-3 py-1 bg-green-500/20 text-green-400 rounded-full text-xs font-bold">🟢 {{ app()->getLocale() == 'ar' ? 'منخفض' : 'Low' }}</span>
                                        @endif
                                    @else
                                        <span class="px-3 py-1 bg-blue-500/20 text-blue-400 rounded-full text-xs font-bold">🆕 {{ app()->getLocale() == 'ar' ? 'جديد' : 'New' }}</span>
                                    @endif
                                </td>
                                <td class="px-8 py-4">
                                    <div class="font-bold text-white">{{ $customer->rentals()->count() }}</div>
                                    <div class="text-xs text-gray-400">
                                        @php
                                            $active = $customer->rentals()->where('status', 'active')->count();
                                        @endphp
                                        {{ $active }} {{ app()->getLocale() == 'ar' ? 'نشط' : 'active' }}
                                    </div>
                                </td>
                                <td class="px-8 py-4">
                                    <div class="font-bold {{ $pendingDelays > 0 ? 'text-red-400' : 'text-green-400' }}">
                                        {{ number_format($pendingDelays, 0) }} {{ app()->getLocale() == 'ar' ? 'ر.س' : 'SAR' }}
                                    </div>
                                </td>
                                <td class="px-8 py-4">
                                    @if($violations > 0)
                                        <span class="px-3 py-1 bg-red-500/20 text-red-400 rounded-full text-xs font-bold">⚠️ {{ $violations }}</span>
                                    @else
                                        <span class="text-gray-500 text-sm">—</span>
                                    @endif
                                </td>
                                <td class="px-8 py-4 text-center">
                                    <a href="{{ route('admin.customers.show', $customer) }}" class="inline-block px-4 py-2 bg-[#d4af37] text-black font-bold rounded-lg hover:bg-[#e8c547] transition text-sm">
                                        {{ app()->getLocale() == 'ar' ? 'عرض الملف' : 'View Profile' }}
                                    </a>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="px-8 py-8 text-center text-gray-400">
                                    {{ app()->getLocale() == 'ar' ? 'لا توجد عملاء' : 'No customers found' }}
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <!-- Pagination -->
            <div class="px-8 py-6 border-t border-gray-800">
                {{ $customers->links() }}
            </div>
        </div>
    </div>
</div>

<!-- Add Customer Modal -->
<div id="addCustomerModal" class="hidden fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 overflow-y-auto py-8">
    <div class="bg-[#111] border-2 border-[#d4af37] rounded-2xl w-full max-w-2xl p-8 shadow-2xl">
        <!-- Modal Header -->
        <div class="flex justify-between items-center mb-8">
            <h2 class="text-2xl font-bold text-[#d4af37]">
                {{ app()->getLocale() == 'ar' ? '➕ إضافة عميل جديد' : '➕ Add New Customer' }}
            </h2>
            <button onclick="closeAddCustomerModal()" class="text-gray-400 hover:text-white text-3xl font-bold">×</button>
        </div>

        <form action="{{ route('admin.customers.store') ?? '#' }}" method="POST" enctype="multipart/form-data" class="space-y-6">
            @csrf

            <!-- Personal Information -->
            <div class="bg-black/40 border border-gray-700 rounded-xl p-6">
                <h3 class="text-lg font-bold text-[#d4af37] mb-4">{{ app()->getLocale() == 'ar' ? '👤 معلومات شخصية' : '👤 Personal Information' }}</h3>
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm text-gray-400 mb-2">{{ app()->getLocale() == 'ar' ? 'الاسم' : 'Full Name' }} *</label>
                        <input type="text" name="name" required class="w-full bg-black border border-gray-700 rounded-lg px-4 py-2.5 text-white focus:border-[#d4af37] outline-none">
                    </div>
                    <div>
                        <label class="block text-sm text-gray-400 mb-2">{{ app()->getLocale() == 'ar' ? 'البريد الإلكتروني' : 'Email' }} *</label>
                        <input type="email" name="email" required class="w-full bg-black border border-gray-700 rounded-lg px-4 py-2.5 text-white focus:border-[#d4af37] outline-none">
                    </div>
                    <div>
                        <label class="block text-sm text-gray-400 mb-2">{{ app()->getLocale() == 'ar' ? 'الهاتف' : 'Phone' }} *</label>
                        <input type="text" name="phone" required class="w-full bg-black border border-gray-700 rounded-lg px-4 py-2.5 text-white focus:border-[#d4af37] outline-none">
                    </div>
                    <div>
                        <label class="block text-sm text-gray-400 mb-2">{{ app()->getLocale() == 'ar' ? 'الجنسية' : 'Nationality' }}</label>
                        <input type="text" name="nationality" class="w-full bg-black border border-gray-700 rounded-lg px-4 py-2.5 text-white focus:border-[#d4af37] outline-none">
                    </div>
                    <div class="col-span-2">
                        <label class="block text-sm text-gray-400 mb-2">{{ app()->getLocale() == 'ar' ? 'كلمة المرور' : 'Password' }} *</label>
                        <input type="password" name="password" required class="w-full bg-black border border-gray-700 rounded-lg px-4 py-2.5 text-white focus:border-[#d4af37] outline-none">
                    </div>
                </div>
                <div class="mt-4">
                    <label class="block text-sm text-gray-400 mb-2">{{ app()->getLocale() == 'ar' ? 'العنوان' : 'Address' }}</label>
                    <textarea name="address" rows="2" class="w-full bg-black border border-gray-700 rounded-lg px-4 py-2.5 text-white focus:border-[#d4af37] outline-none"></textarea>
                </div>
            </div>

            <!-- ID Documents -->
            <div class="bg-black/40 border border-gray-700 rounded-xl p-6">
                <h3 class="text-lg font-bold text-[#d4af37] mb-4">{{ app()->getLocale() == 'ar' ? '📄 الوثائق الشخصية' : '📄 ID Documents' }}</h3>
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm text-gray-400 mb-2">{{ app()->getLocale() == 'ar' ? 'رقم الهوية' : 'ID Number' }} *</label>
                        <input type="text" name="id_number" required class="w-full bg-black border border-gray-700 rounded-lg px-4 py-2.5 text-white focus:border-[#d4af37] outline-none">
                    </div>
                    <div>
                        <label class="block text-sm text-gray-400 mb-2">{{ app()->getLocale() == 'ar' ? 'نوع الهوية' : 'ID Type' }} *</label>
                        <select name="id_type" required class="w-full bg-black border border-gray-700 rounded-lg px-4 py-2.5 text-white focus:border-[#d4af37] outline-none">
                            <option value="">{{ app()->getLocale() == 'ar' ? 'اختر نوع الهوية' : 'Select ID Type' }}</option>
                            <option value="national_id">{{ app()->getLocale() == 'ar' ? 'بطاقة هوية وطنية' : 'National ID' }}</option>
                            <option value="passport">{{ app()->getLocale() == 'ar' ? 'جواز سفر' : 'Passport' }}</option>
                            <option value="license">{{ app()->getLocale() == 'ar' ? 'رخصة قيادة' : 'Driving License' }}</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm text-gray-400 mb-2">{{ app()->getLocale() == 'ar' ? 'تاريخ انتهاء الهوية' : 'ID Expiry Date' }} *</label>
                        <input type="date" name="id_expiry_date" required class="w-full bg-black border border-gray-700 rounded-lg px-4 py-2.5 text-white focus:border-[#d4af37] outline-none">
                    </div>
                    <div>
                        <label class="block text-sm text-gray-400 mb-2">{{ app()->getLocale() == 'ar' ? 'صورة الهوية' : 'ID Photo' }}</label>
                        <input type="file" name="id_photo" accept="image/*" class="w-full bg-black border border-gray-700 rounded-lg px-4 py-2.5 text-white focus:border-[#d4af37] outline-none">
                    </div>
                </div>
            </div>

            <!-- Driving License -->
            <div class="bg-black/40 border border-gray-700 rounded-xl p-6">
                <h3 class="text-lg font-bold text-[#d4af37] mb-4">{{ app()->getLocale() == 'ar' ? '🚗 رخصة القيادة' : '🚗 Driving License' }}</h3>
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm text-gray-400 mb-2">{{ app()->getLocale() == 'ar' ? 'رقم الرخصة' : 'License Number' }}</label>
                        <input type="text" name="license_number" class="w-full bg-black border border-gray-700 rounded-lg px-4 py-2.5 text-white focus:border-[#d4af37] outline-none">
                    </div>
                    <div>
                        <label class="block text-sm text-gray-400 mb-2">{{ app()->getLocale() == 'ar' ? 'تاريخ انتهاء الرخصة' : 'License Expiry' }}</label>
                        <input type="date" name="license_expiry_date" class="w-full bg-black border border-gray-700 rounded-lg px-4 py-2.5 text-white focus:border-[#d4af37] outline-none">
                    </div>
                    <div class="col-span-2">
                        <label class="block text-sm text-gray-400 mb-2">{{ app()->getLocale() == 'ar' ? 'صورة الرخصة' : 'License Photo' }}</label>
                        <input type="file" name="license_photo" accept="image/*" class="w-full bg-black border border-gray-700 rounded-lg px-4 py-2.5 text-white focus:border-[#d4af37] outline-none">
                    </div>
                </div>
            </div>

            <!-- Action Buttons -->
            <div class="flex gap-3 pt-4">
                <button type="submit" class="flex-1 px-6 py-3 bg-[#d4af37] hover:bg-[#e8c547] text-black font-bold rounded-lg transition">
                    {{ app()->getLocale() == 'ar' ? '✅ إضافة العميل' : '✅ Add Customer' }}
                </button>
                <button type="button" onclick="closeAddCustomerModal()" class="flex-1 px-6 py-3 bg-gray-700 hover:bg-gray-600 text-white font-bold rounded-lg transition">
                    {{ app()->getLocale() == 'ar' ? '❌ إلغاء' : '❌ Cancel' }}
                </button>
            </div>
        </form>
    </div>
</div>

<script>
function openAddCustomerModal() {
    document.getElementById('addCustomerModal').classList.remove('hidden');
}

function closeAddCustomerModal() {
    document.getElementById('addCustomerModal').classList.add('hidden');
}

// Close modal when clicking outside
document.getElementById('addCustomerModal')?.addEventListener('click', function(e) {
    if (e.target === this) {
        closeAddCustomerModal();
    }
});
</script>

@endsection