@extends('layouts.app')

@section('content')

@php
        $locale = app()->getLocale();
        $customer = $profile['customer'];
        $rental_summary = $profile['rental_summary'];
        $payment_summary = $profile['payment_summary'];
        $status_info = $profile['status_info'];
        $rating_info = $profile['rating_info'];
    @endphp

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        <!-- Back Button & Header -->
        <div class="mb-6 flex justify-between items-center">
            <a href="{{ route('admin.customers.index') }}" class="text-[#d4af37] hover:text-[#e8c547] flex items-center gap-2 font-bold">
                ← {{ $locale == 'ar' ? 'العودة' : 'Back' }}
            </a>
            @if($profile['status_info']['status'] === 'blacklisted')
                <span class="px-4 py-2 bg-red-500/20 text-red-400 rounded-full text-sm font-bold">🚫 {{ $locale == 'ar' ? 'محظور' : 'Blacklisted' }}</span>
            @else
                @php
                    $colorMap = [
                        'danger' => 'bg-red-500/20 text-red-400',
                        'warning' => 'bg-yellow-500/20 text-yellow-400',
                        'info' => 'bg-blue-500/20 text-blue-400',
                        'success' => 'bg-green-500/20 text-green-400',
                    ];
                @endphp
                <span class="px-4 py-2 rounded-full text-sm font-bold {{ $colorMap[$status_info['color']] ?? 'bg-gray-500/20 text-gray-400' }}">
                    {{ $status_info['icon'] }} {{ $status_info['label'] }}
                </span>
            @endif
        </div>

        <!-- Customer Header Card -->
        <div class="bg-[#111] border border-gray-800 rounded-2xl shadow-2xl overflow-hidden mb-6">
            <div class="bg-gradient-to-r from-[#d4af37] to-[#8b7500] px-8 py-6">
                <div class="flex justify-between items-start">
                    <div>
                        <h1 class="text-4xl font-bold text-white mb-2">{{ $customer->name }}</h1>
                        <div class="flex gap-6 text-white/70 text-sm">
                            <span>📱 {{ $customer->phone }}</span>
                            <span>📧 {{ $customer->email ?? '—' }}</span>
                            <span>📅 {{ $customer->created_at->format('Y-m-d') }}</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Quick Stats -->
            <div class="grid grid-cols-1 md:grid-cols-4 gap-4 px-8 py-6">
                <!-- Total Contracts -->
                <div class="bg-black/50 border border-gray-700 rounded-xl p-4">
                    <div class="text-xs text-white uppercase">{{ $locale == 'ar' ? 'إجمالي العقود' : 'Total Contracts' }}</div>
                    <div class="text-3xl font-black text-[#d4af37] mt-2">{{ $rental_summary['total_contracts'] }}</div>
                    <div class="text-xs text-white mt-1">
                        {{ $rental_summary['active_contracts'] }} {{ $locale == 'ar' ? 'نشط' : 'active' }},
                        {{ $rental_summary['completed_contracts'] }} {{ $locale == 'ar' ? 'منتهية' : 'completed' }}
                    </div>
                </div>

                <!-- Total Paid -->
                <div class="bg-black/50 border border-gray-700 rounded-xl p-4">
                    <div class="text-xs text-white uppercase">{{ $locale == 'ar' ? 'إجمالي المدفوع' : 'Total Paid' }}</div>
                    <div class="text-2xl font-black text-green-400 mt-2">
                        {{ number_format($payment_summary['total_paid'], 0) }}
                    </div>
                    <div class="text-xs text-white mt-1">{{ $payment_summary['payment_percentage'] }}% {{ $locale == 'ar' ? 'من الإجمالي' : 'of total' }}</div>
                </div>

                <!-- Total Outstanding -->
                <div class="bg-black/50 border border-gray-700 rounded-xl p-4">
                    <div class="text-xs text-white uppercase">{{ $locale == 'ar' ? 'إجمالي التأخير' : 'Total Outstanding' }}</div>
                    <div class="text-2xl font-black {{ $payment_summary['overdue_amount'] > 0 ? 'text-red-400' : 'text-green-400' }} mt-2">
                        {{ number_format($payment_summary['overdue_amount'], 0) }}
                    </div>
                    <div class="text-xs text-white mt-1">{{ $locale == 'ar' ? 'ر.س' : 'SAR' }}</div>
                </div>

                <!-- Risk Level -->
                <div class="bg-black/50 border border-gray-700 rounded-xl p-4">
                    <div class="text-xs text-white uppercase">{{ $locale == 'ar' ? 'تقييم' : 'Rating' }}</div>
                    <div class="text-3xl font-black text-yellow-400 mt-2">{{ $rating_info['average_rating'] }}/5</div>
                    <div class="text-xs text-white mt-1">
                        {{ $rating_info['violation_count'] }} {{ $locale == 'ar' ? 'مخالفات' : 'violations' }}
                    </div>
                </div>
            </div>
        </div>

        <!-- Main Content Grid -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
            <!-- Left Column: Details -->
            <div class="lg:col-span-2 space-y-6">
                <!-- Payment Summary Card -->
                <div class="bg-[#111] border border-gray-800 rounded-2xl shadow-2xl overflow-hidden">
                    <div class="bg-gradient-to-r from-[#d4af37] to-[#8b7500] px-8 py-4">
                        <h2 class="text-xl font-bold text-white">{{ $locale == 'ar' ? '💰 ملخص الدفع' : '💰 Payment Summary' }}</h2>
                    </div>
                    <div class="p-8">
                        <div class="grid grid-cols-2 gap-6">
                            <div>
                                <div class="text-sm text-white mb-1">{{ $locale == 'ar' ? 'إجمالي المبلغ' : 'Total Amount' }}</div>
                                <div class="text-3xl font-bold text-white">{{ number_format($payment_summary['total_amount'], 0) }}</div>
                            </div>
                            <div>
                                <div class="text-sm text-white mb-1">{{ $locale == 'ar' ? 'المدفوع' : 'Paid' }}</div>
                                <div class="text-3xl font-bold text-green-400">{{ number_format($payment_summary['total_paid'], 0) }}</div>
                            </div>
                            <div>
                                <div class="text-sm text-white mb-1">{{ $locale == 'ar' ? 'المتبقي' : 'Remaining' }}</div>
                                <div class="text-3xl font-bold text-orange-400">{{ number_format($payment_summary['total_remaining'], 0) }}</div>
                            </div>
                            <div>
                                <div class="text-sm text-white mb-1">{{ $locale == 'ar' ? 'رسوم التأخير' : 'Late Fees' }}</div>
                                <div class="text-3xl font-bold text-red-400">{{ number_format($payment_summary['total_late_fees'], 0) }}</div>
                            </div>
                        </div>

                        <!-- Payment Status Bar -->
                        <div class="mt-6">
                            <div class="flex justify-between text-xs text-white mb-2">
                                <span>{{ $locale == 'ar' ? 'نسبة السداد' : 'Payment Progress' }}</span>
                                <span>{{ $payment_summary['payment_percentage'] }}%</span>
                            </div>
                            <div class="w-full bg-gray-800 rounded-full h-3 overflow-hidden">
                                <div class="bg-gradient-to-r from-green-500 to-[#d4af37] h-full rounded-full transition-all" 
                                     style="width: {{ $payment_summary['payment_percentage'] }}%"></div>
                            </div>
                        </div>

                        <!-- Payment Delays Info -->
                        @if($payment_summary['total_delays'] > 0)
                            <div class="mt-6 p-4 bg-red-500/10 border border-red-500/30 rounded-lg">
                                <div class="text-sm font-bold text-red-400 mb-2">⚠️ {{ $locale == 'ar' ? 'تأخيرات قائمة' : 'Pending Delays' }}</div>
                                <div class="grid grid-cols-2 gap-4 text-sm">
                                    <div>
                                        <span class="text-white">{{ $locale == 'ar' ? 'عدد التأخيرات:' : 'Count:' }}</span>
                                        <span class="text-red-400 font-bold">{{ $payment_summary['pending_delays'] }}</span>
                                    </div>
                                    <div>
                                        <span class="text-white">{{ $locale == 'ar' ? 'المبلغ المتأخر:' : 'Amount:' }}</span>
                                        <span class="text-red-400 font-bold">{{ number_format($payment_summary['total_delay_amount'], 0) }}</span>
                                    </div>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>

                <!-- Rental History -->
                <div class="bg-[#111] border border-gray-800 rounded-2xl shadow-2xl overflow-hidden">
                    <div class="bg-gradient-to-r from-[#d4af37] to-[#8b7500] px-8 py-4">
                        <h2 class="text-xl font-bold text-white">{{ $locale == 'ar' ? '📋 سجل العقود' : '📋 Contract History' }}</h2>
                    </div>
                    <div class="overflow-x-auto">
                        <table class="w-full">
                            <thead class="bg-black/50 border-b border-gray-700">
                                <tr>
                                    <th class="px-6 py-3 text-left text-xs font-bold text-[#d4af37] uppercase">{{ $locale == 'ar' ? 'رقم العقد' : 'Contract #' }}</th>
                                    <th class="px-6 py-3 text-left text-xs font-bold text-[#d4af37] uppercase">{{ $locale == 'ar' ? 'السيارة' : 'Car' }}</th>
                                    <th class="px-6 py-3 text-left text-xs font-bold text-[#d4af37] uppercase">{{ $locale == 'ar' ? 'التاريخ' : 'Date' }}</th>
                                    <th class="px-6 py-3 text-right text-xs font-bold text-[#d4af37] uppercase">{{ $locale == 'ar' ? 'المبلغ' : 'Amount' }}</th>
                                    <th class="px-6 py-3 text-right text-xs font-bold text-[#d4af37] uppercase">{{ $locale == 'ar' ? 'المدفوع' : 'Paid' }}</th>
                                    <th class="px-6 py-3 text-right text-xs font-bold text-[#d4af37] uppercase">{{ $locale == 'ar' ? 'الحالة' : 'Status' }}</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-800">
                                @forelse($contracts as $contract)
                                    <tr class="hover:bg-black/30 transition">
                                        <td class="px-6 py-4 font-bold text-[#d4af37]">#{{ $contract['contract_number'] }}</td>
                                        <td class="px-6 py-4 text-white">{{ $contract['car'] }}</td>
                                        <td class="px-6 py-4 text-gray-400 text-sm">
                                            {{ $contract['start_date']->format('M d, Y') }} - {{ $contract['end_date']->format('M d, Y') }}
                                            <br><span class="text-xs">{{ $contract['days'] }} {{ $locale == 'ar' ? 'أيام' : 'days' }}</span>
                                        </td>
                                        <td class="px-6 py-4 text-right font-bold text-white">{{ number_format($contract['total_amount'], 0) }}</td>
                                        <td class="px-6 py-4 text-right font-bold text-green-400">{{ number_format($contract['paid_amount'], 0) }}</td>
                                        <td class="px-6 py-4 text-right">
                                            @if($contract['status'] === 'active')
                                                <span class="px-2 py-1 bg-blue-500/20 text-blue-400 rounded text-xs font-bold">⏳ {{ $locale == 'ar' ? 'نشط' : 'Active' }}</span>
                                            @elseif($contract['status'] === 'completed')
                                                <span class="px-2 py-1 bg-green-500/20 text-green-400 rounded text-xs font-bold">✅ {{ $locale == 'ar' ? 'منتهية' : 'Completed' }}</span>
                                            @else
                                                <span class="px-2 py-1 bg-red-500/20 text-red-400 rounded text-xs font-bold">❌ {{ $locale == 'ar' ? 'ملغاة' : 'Cancelled' }}</span>
                                            @endif
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="6" class="px-6 py-8 text-center text-gray-400">
                                            {{ $locale == 'ar' ? 'لا توجد عقود' : 'No contracts' }}
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- Violations & Delays -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- Violations -->
                    <div class="bg-[#111] border border-gray-800 rounded-2xl shadow-2xl overflow-hidden">
                        <div class="bg-gradient-to-r from-red-500 to-red-700 px-6 py-3">
                            <h3 class="text-lg font-bold text-white">⚠️ {{ $locale == 'ar' ? 'المخالفات' : 'Violations' }}</h3>
                        </div>
                        <div class="p-6">
                            @if($violations->count() > 0)
                                <div class="space-y-3">
                                    @foreach($violations->take(5) as $violation)
                                        <div class="p-3 bg-red-500/10 border border-red-500/30 rounded-lg">
                                            <div class="text-sm text-white">{{ $violation->description ?? '—' }}</div>
                                            <div class="text-xs text-white mt-1">{{ $violation->created_at->format('Y-m-d H:i') }}</div>
                                        </div>
                                    @endforeach
                                    @if($violations->count() > 5)
                                        <div class="text-center text-xs text-white">
                                            +{{ $violations->count() - 5 }} {{ $locale == 'ar' ? 'مخالفات أخرى' : 'more violations' }}
                                        </div>
                                    @endif
                                </div>
                            @else
                                <div class="text-center text-white py-4">✅ {{ $locale == 'ar' ? 'لا توجد مخالفات' : 'No violations' }}</div>
                            @endif
                        </div>
                    </div>

                    <!-- Payment Delays -->
                    <div class="bg-[#111] border border-gray-800 rounded-2xl shadow-2xl overflow-hidden">
                        <div class="bg-gradient-to-r from-orange-500 to-orange-700 px-6 py-3">
                            <h3 class="text-lg font-bold text-white">📅 {{ $locale == 'ar' ? 'تأخيرات السداد' : 'Payment Delays' }}</h3>
                        </div>
                        <div class="p-6">
                            @if($paymentDelays->count() > 0)
                                <div class="space-y-3">
                                    @foreach($paymentDelays->take(5) as $delay)
                                        <div class="p-3 bg-orange-500/10 border border-orange-500/30 rounded-lg">
                                            <div class="flex justify-between items-start mb-1">
                                                <span class="text-sm font-bold text-white">{{ number_format($delay->delayed_amount, 0) }} {{ $locale == 'ar' ? 'ر.س' : 'SAR' }}</span>
                                                <span class="text-xs px-2 py-1 bg-{{ $delay->status === 'paid' ? 'green' : 'red' }}-500/20 text-{{ $delay->status === 'paid' ? 'green' : 'red' }}-400 rounded">
                                                    {{ $delay->status }}
                                                </span>
                                            </div>
                                            <div class="text-xs text-white">{{ $locale == 'ar' ? 'مستحق:' : 'Due:' }} {{ $delay->due_date->format('Y-m-d') }}</div>
                                        </div>
                                    @endforeach
                                    @if($paymentDelays->count() > 5)
                                        <div class="text-center text-xs text-white">
                                            +{{ $paymentDelays->count() - 5 }} {{ $locale == 'ar' ? 'تأخيرات أخرى' : 'more delays' }}
                                        </div>
                                    @endif
                                </div>
                            @else
                                <div class="text-center text-white py-4">✅ {{ $locale == 'ar' ? 'لا توجد تأخيرات' : 'No delays' }}</div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>

            <!-- Right Column: Status & Actions -->
            <div class="space-y-6">
                <!-- Status Card -->
                <div class="bg-[#111] border border-gray-800 rounded-2xl shadow-2xl overflow-hidden">
                    <div class="bg-gradient-to-r from-purple-500 to-purple-700 px-6 py-4">
                        <h3 class="text-lg font-bold text-white">{{ $locale == 'ar' ? '📊 الحالة الحالية' : '📊 Current Status' }}</h3>
                    </div>
                    <div class="p-6">
                        <div class="text-center mb-6">
                            <div class="text-4xl mb-2">{{ $status_info['icon'] }}</div>
                            <div class="text-xl font-bold text-white mb-1">{{ $status_info['label'] }}</div>
                            <div class="text-sm text-white">{{ $locale == 'ar' ? 'الحالة:' : 'Status:' }} {{ $status_info['status'] }}</div>
                        </div>

                        @if($status_info['status'] === 'blacklisted' && isset($status_info['reason']))
                            <div class="p-3 bg-red-500/10 border border-red-500/30 rounded-lg text-sm">
                                <div class="text-red-400 font-bold mb-2">{{ $locale == 'ar' ? 'سبب الحظر:' : 'Blacklist Reason:' }}</div>
                                <div class="text-white">{{ $status_info['reason'] }}</div>
                                @if($status_info['until'])
                                    <div class="text-xs text-white mt-2">
                                        {{ $locale == 'ar' ? 'حتى:' : 'Until:' }} {{ $status_info['until']->format('Y-m-d') }}
                                    </div>
                                @endif
                            </div>
                        @endif
                    </div>
                </div>

                <!-- Rating Card -->
                <div class="bg-[#111] border border-gray-800 rounded-2xl shadow-2xl overflow-hidden">
                    <div class="bg-gradient-to-r from-yellow-500 to-yellow-700 px-6 py-4">
                        <h3 class="text-lg font-bold text-white">{{ $locale == 'ar' ? '⭐ التقييم' : '⭐ Rating' }}</h3>
                    </div>
                    <div class="p-6">
                        <div class="text-center mb-6">
                            <div class="text-5xl font-black text-yellow-400 mb-2">
                                {{ $rating_info['average_rating'] }}
                            </div>
                            <div class="text-sm text-white">{{ $locale == 'ar' ? 'من 5 نقاط' : 'out of 5' }}</div>
                        </div>

                        <div class="space-y-3 border-t border-gray-700 pt-4">
                            <div class="flex justify-between">
                                <span class="text-white text-sm">{{ $locale == 'ar' ? 'المخالفات:' : 'Violations:' }}</span>
                                <span class="font-bold text-white">{{ $rating_info['violation_count'] }}</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="text-white text-sm">{{ $locale == 'ar' ? 'التأخيرات:' : 'Late Payments:' }}</span>
                                <span class="font-bold text-white">{{ $rating_info['late_payment_count'] }}</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="text-white text-sm">{{ $locale == 'ar' ? 'العقود:' : 'Contracts:' }}</span>
                                <span class="font-bold text-white">{{ $rating_info['rental_count'] }}</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="text-white text-sm">{{ $locale == 'ar' ? 'مستوى الخطر:' : 'Risk Level:' }}</span>
                                <span class="font-bold text-white uppercase">{{ $rating_info['risk_level'] }}</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Rental Summary -->
                <div class="bg-[#111] border border-gray-800 rounded-2xl shadow-2xl overflow-hidden">
                    <div class="bg-gradient-to-r from-blue-500 to-blue-700 px-6 py-4">
                        <h3 class="text-lg font-bold text-white">{{ $locale == 'ar' ? '📅 ملخص العقود' : '📅 Rental Summary' }}</h3>
                    </div>
                    <div class="p-6 space-y-3">
                        <div class="flex justify-between">
                            <span class="text-white">{{ $locale == 'ar' ? 'إجمالي العقود:' : 'Total Contracts:' }}</span>
                            <span class="font-bold text-[#d4af37]">{{ $rental_summary['total_contracts'] }}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-white">{{ $locale == 'ar' ? 'نشطة:' : 'Active:' }}</span>
                            <span class="font-bold text-blue-400">{{ $rental_summary['active_contracts'] }}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-white">{{ $locale == 'ar' ? 'منتهية:' : 'Completed:' }}</span>
                            <span class="font-bold text-green-400">{{ $rental_summary['completed_contracts'] }}</span>
                        </div>
                        <div class="flex justify-between border-t border-gray-700 pt-3">
                            <span class="text-white">{{ $locale == 'ar' ? 'عدد أيام الإيجار:' : 'Total Rental Days:' }}</span>
                            <span class="font-bold text-white">{{ $rental_summary['total_rental_days'] }}</span>
                        </div>
                    </div>
                </div>

                <!-- Export Button -->
                <a href="{{ route('admin.customers.export', $customer) }}" class="w-full block text-center px-6 py-3 bg-[#d4af37] text-black font-bold rounded-lg hover:bg-[#e8c547] transition">
                    📄 {{ $locale == 'ar' ? 'تحميل الملف' : 'Export Profile' }}
                </a>
            </div>
        </div>
    </div>
</div>
@endsection