@extends('layouts.app')

@section('content')

        <div class="flex justify-between items-center">
            <h2 class="font-semibold text-xl text-[#d4af37] leading-tight">
                {{ app()->getLocale() == 'ar' ? 'إغلاق عقد التأجير' : 'Close Rental Contract' }} - {{ $rental->contract_number }}
            </h2>
            <a href="{{ route('admin.rentals.show', $rental->id) }}" class="bg-gray-800 text-white px-4 py-2 rounded-lg text-sm font-bold hover:bg-gray-700 transition-colors">
                {{ app()->getLocale() == 'ar' ? 'عودة' : 'Back' }}
            </a>
        </div>


    <div class="py-12" x-data="closeRentalForm()">
        <div class="max-w-4xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-[#111] border border-gray-800 rounded-2xl overflow-hidden">
                <div class="p-8">
                    <div class="flex items-center gap-6 mb-8 bg-black/50 p-4 rounded-xl border border-gray-800">
                        <div class="w-16 h-16 rounded-lg bg-gray-800 flex items-center justify-center text-[#d4af37]">
                            <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                        </div>
                        <div>
                            <div class="text-white font-bold">{{ $rental->car->title }}</div>
                            <div class="text-sm text-gray-500">{{ $rental->customer->name }} | {{ $rental->start_date->format('Y-m-d') }}</div>
                        </div>
                    </div>

                    <form action="{{ route('admin.rentals.close', $rental->id) }}" method="POST">
                        @csrf
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
                            <div>
                                <label class="block text-xs text-gray-500 mb-2 uppercase tracking-wider">{{ app()->getLocale() == 'ar' ? 'عداد القراءة عند العودة' : 'Return Odometer' }}</label>
                                <div class="relative">
                                    <input type="number" name="end_odometer" x-model="end_odometer" @input="calculateKm()" class="w-full bg-black border-gray-800 rounded-lg px-4 py-3 text-white focus:border-[#d4af37] outline-none" required>
                                    <span class="absolute right-4 top-3.5 text-gray-600 text-xs">KM</span>
                                </div>
                                <div class="mt-2 flex justify-between text-[10px]">
                                    <span class="text-gray-500">{{ app()->getLocale() == 'ar' ? 'البداية:' : 'Start:' }} {{ $rental->start_odometer }} KM</span>
                                    <span class="text-[#d4af37]" x-show="total_km > 0"><span x-text="total_km"></span> KM Used</span>
                                </div>
                                @error('end_odometer') <span class="text-red-500 text-xs mt-1">{{ $message }}</span> @enderror
                            </div>

                            <div>
                                <label class="block text-xs text-gray-500 mb-2 uppercase tracking-wider">{{ app()->getLocale() == 'ar' ? 'مستوى الوقود عند العودة' : 'Return Fuel Level' }}</label>
                                <div class="relative">
                                    <input type="number" name="fuel_level_in" class="w-full bg-black border-gray-800 rounded-lg px-4 py-3 text-white focus:border-[#d4af37] outline-none" required min="0" max="100">
                                    <span class="absolute right-4 top-3.5 text-gray-600 text-xs">%</span>
                                </div>
                                <div class="mt-2 text-[10px] text-gray-500">{{ app()->getLocale() == 'ar' ? 'البداية:' : 'Out:' }} {{ $rental->fuel_level_out }}%</div>
                                @error('fuel_level_in') <span class="text-red-500 text-xs mt-1">{{ $message }}</span> @enderror
                            </div>
                        </div>

                        <!-- Violations Section -->
                        <div class="mb-8 border-t border-gray-800 pt-8">
                            <div class="flex justify-between items-center mb-4">
                                <h3 class="text-white font-bold">{{ app()->getLocale() == 'ar' ? 'المخالفات (إن وجدت)' : 'Violations (If any)' }}</h3>
                                <button type="button" @click="addViolation()" class="text-xs text-[#d4af37] border border-[#d4af37]/30 px-3 py-1 rounded-lg hover:bg-[#d4af37] hover:text-black transition-all">
                                    + {{ app()->getLocale() == 'ar' ? 'إضافة مخالفة' : 'Add Violation' }}
                                </button>
                            </div>
                            
                            <template x-for="(v, index) in violations" :key="index">
                                <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-4 bg-black/30 p-4 rounded-xl border border-gray-800/50">
                                    <div class="md:col-span-2">
                                        <input type="text" :name="'violations['+index+'][description]'" placeholder="Description" class="w-full bg-black border-gray-800 rounded-lg px-4 py-2 text-sm text-white focus:border-[#d4af37] outline-none">
                                    </div>
                                    <div>
                                        <input type="number" step="0.01" :name="'violations['+index+'][amount]'" placeholder="Amount" class="w-full bg-black border-gray-800 rounded-lg px-4 py-2 text-sm text-white focus:border-[#d4af37] outline-none">
                                    </div>
                                    <div class="flex gap-2">
                                        <select :name="'violations['+index+'][status]'" class="w-full bg-black border-gray-800 rounded-lg px-2 py-2 text-xs text-white focus:border-[#d4af37] outline-none">
                                            <option value="pending">Pending</option>
                                            <option value="paid">Paid</option>
                                            <option value="deducted">Deducted</option>
                                        </select>
                                        <button type="button" @click="removeViolation(index)" class="text-red-500 hover:text-red-400">
                                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
                                        </button>
                                    </div>
                                </div>
                            </template>
                        </div>

                        <div class="flex justify-end gap-4 border-t border-gray-800 pt-8">
                            <a href="{{ route('admin.rentals.show', $rental->id) }}" class="px-8 py-3 rounded-xl bg-gray-800 text-white font-bold hover:bg-gray-700 transition-all">
                                {{ app()->getLocale() == 'ar' ? 'إلغاء' : 'Cancel' }}
                            </a>
                            <button type="submit" class="px-12 py-3 rounded-xl bg-[#d4af37] text-black font-bold hover:bg-[#b08d2a] transition-all shadow-lg shadow-[#d4af37]/20">
                                {{ app()->getLocale() == 'ar' ? 'إغلاق العقد نهائياً' : 'Close Contract & Finalize' }}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    @push('scripts')
    <script>
        function closeRentalForm() {
            return {
                end_odometer: '',
                start_odometer: {{ $rental->start_odometer }},
                total_km: 0,
                violations: [],

                calculateKm() {
                    this.total_km = Math.max(0, parseInt(this.end_odometer || 0) - this.start_odometer);
                },

                addViolation() {
                    this.violations.push({ description: '', amount: '', status: 'pending' });
                },

                removeViolation(index) {
                    this.violations.splice(index, 1);
                }
            }
        }
    </script>
    @endpush
</div>
@endsection