@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' ? 'جدول المواعيد' : 'Booking Calendar' }}
            </h2>
            <div class="flex items-center gap-4">
                <a href="{{ route('admin.rentals.dashboard') }}" class="bg-gray-800 text-white px-4 py-1.5 rounded-lg text-xs font-bold hover:bg-gray-700 transition-colors">
                    {{ app()->getLocale() == 'ar' ? 'عودة' : 'Back' }}
                </a>
                <form action="{{ route('admin.rentals.calendar') }}" method="GET" class="flex items-center gap-2">
                    <input type="month" name="month" value="{{ $month->format('Y-m') }}" class="bg-black border-gray-800 rounded-lg px-3 py-1 text-xs text-white focus:border-[#d4af37] outline-none" onchange="this.form.submit()">
                </form>
            </div>
        </div>


    <div class="py-12">
        <div class="max-w-full mx-auto sm:px-6 lg:px-8">
            <div class="bg-[#111] border border-gray-800 rounded-2xl overflow-x-auto">
                <table class="w-full text-center border-collapse">
                    <thead>
                        <tr class="bg-black/50">
                            <th class="px-4 py-3 text-xs text-gray-500 uppercase border-r border-gray-800 sticky left-0 bg-[#111] z-10 w-48 text-right">{{ app()->getLocale() == 'ar' ? 'السيارة' : 'Car' }}</th>
                            @for($i = 1; $i <= $daysInMonth; $i++)
                                <th class="px-2 py-3 text-[10px] text-gray-500 border-r border-gray-800 {{ $month->copy()->day($i)->isToday() ? 'bg-[#d4af37]/20 text-[#d4af37]' : '' }}">
                                    {{ $i }}<br>{{ $month->copy()->day($i)->format('D') }}
                                </th>
                            @endfor
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($cars as $car)
                        <tr class="border-t border-gray-800">
                            <td class="px-4 py-3 text-xs font-bold text-white border-r border-gray-800 sticky left-0 bg-[#111] z-10 text-right">
                                {{ $car->title }}
                                <div class="text-[9px] text-gray-500 font-normal">{{ $car->plate_number }}</div>
                            </td>
                            @for($i = 1; $i <= $daysInMonth; $i++)
                                @php
                                    $currentDate = $month->copy()->day($i);
                                    $rental = $car->rentals->first(fn($r) => $currentDate->between($r->start_date->startOfDay(), $r->end_date->endOfDay()));
                                    $status = 'available';
                                    if ($rental) $status = 'rented';
                                    elseif ($car->rental_status == 'maintenance') $status = 'maintenance';
                                @endphp
                                <td class="p-1 border-r border-gray-800 h-12 min-w-[40px]">
                                    @if($status == 'rented')
                                        <div class="w-full h-full bg-red-500/30 border border-red-500/50 rounded flex items-center justify-center cursor-pointer group relative" title="{{ $rental->customer->name }}">
                                            <div class="hidden group-hover:block absolute bottom-full mb-1 bg-black text-white text-[10px] p-2 rounded z-50 whitespace-nowrap border border-gray-700">
                                                {{ $rental->customer->name }}<br>
                                                {{ $rental->contract_number }}
                                            </div>
                                        </div>
                                    @elseif($status == 'maintenance')
                                        <div class="w-full h-full bg-gray-500/30 border border-gray-500/50 rounded"></div>
                                    @else
                                        <div class="w-full h-full bg-green-500/10 hover:bg-green-500/20 rounded transition-colors"></div>
                                    @endif
                                </td>
                            @endfor
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <div class="mt-8 flex gap-8 justify-center">
                <div class="flex items-center gap-2">
                    <div class="w-4 h-4 rounded bg-green-500/20 border border-green-500/50"></div>
                    <span class="text-xs text-gray-500">{{ app()->getLocale() == 'ar' ? 'متاح' : 'Available' }}</span>
                </div>
                <div class="flex items-center gap-2">
                    <div class="w-4 h-4 rounded bg-red-500/30 border border-red-500/50"></div>
                    <span class="text-xs text-gray-500">{{ app()->getLocale() == 'ar' ? 'مؤجر' : 'Rented' }}</span>
                </div>
                <div class="flex items-center gap-2">
                    <div class="w-4 h-4 rounded bg-gray-500/30 border border-gray-500/50"></div>
                    <span class="text-xs text-gray-500">{{ app()->getLocale() == 'ar' ? 'صيانة' : 'Maintenance' }}</span>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection