@props(['service', 'date', 'slots', 'selectedSlot' => null, 'disabled' => false])

@php
    $daysOfWeek = ['الأحد', 'الإثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة', 'السبت'];
    $months = ['يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو', 'يوليو', 'أغسطس', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر'];
    
    $currentDate = \Carbon\Carbon::parse($date);
    $currentMonth = $currentDate->month - 1;
    $currentYear = $currentDate->year;
    $firstDay = \Carbon\Carbon::createFromDate($currentYear, $currentMonth + 1, 1)->dayOfWeek;
    $daysInMonth = $currentDate->daysInMonth;
@endphp

<div class="booking-calendar" x-data="{ 
    currentDate: '{{ $date }}',
    selectedDate: null,
    selectedSlot: '{{ $selectedSlot }}',
    showSlots: false,
    slots: {{ json_encode($slots) }},
    
    init() {
        if (this.selectedSlot) {
            this.showSlots = true;
        }
    },
    
    selectDate(date) {
        if (!this.isDateAvailable(date)) return;
        
        this.selectedDate = date;
        this.showSlots = true;
    },
    
    selectSlot(slot) {
        this.selectedSlot = slot;
    },
    
    isDateAvailable(date) {
        return this.slots.hasOwnProperty(date);
    },
    
    getAvailableSlots() {
        return this.selectedDate ? this.slots[this.selectedDate] || [] : [];
    },
    
    formatDate(date) {
        const parts = date.split('-');
        return `${parts[2]}/${parts[1]}/${parts[0]}`;
    }
}">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <!-- رأس التقويم -->
        <div class="bg-blue-600 text-white p-4">
            <div class="flex justify-between items-center">
                <button type="button" class="text-white hover:bg-blue-700 rounded-full p-1" 
                        @click="currentDate = '{{ $currentDate->copy()->subMonth()->format('Y-m-d') }}'">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                    </svg>
                </button>
                <h3 class="text-xl font-bold">{{ $months[$currentMonth] }} {{ $currentYear }}</h3>
                <button type="button" class="text-white hover:bg-blue-700 rounded-full p-1" 
                        @click="currentDate = '{{ $currentDate->copy()->addMonth()->format('Y-m-d') }}'">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                    </svg>
                </button>
            </div>
        </div>
        
        <!-- أيام الأسبوع -->
        <div class="grid grid-cols-7 gap-1 p-2 border-b border-gray-200 dark:border-gray-700">
            @foreach ($daysOfWeek as $day)
                <div class="text-center text-sm font-medium text-gray-700 dark:text-gray-300">{{ $day }}</div>
            @endforeach
        </div>
        
        <!-- أيام الشهر -->
        <div class="grid grid-cols-7 gap-1 p-2">
            @for ($i = 0; $i < $firstDay; $i++)
                <div class="p-2"></div>
            @endfor
            
            @for ($day = 1; $day <= $daysInMonth; $day++)
                @php
                    $date = sprintf('%04d-%02d-%02d', $currentYear, $currentMonth + 1, $day);
                    $isAvailable = isset($slots[$date]) && count($slots[$date]) > 0;
                    $isToday = $date === now()->format('Y-m-d');
                    $isPast = $date < now()->format('Y-m-d');
                @endphp
                
                <div class="p-1">
                    <button type="button" 
                            class="w-full h-10 rounded-md flex items-center justify-center text-sm
                                  {{ $isAvailable && !$isPast ? 'cursor-pointer hover:bg-blue-100 dark:hover:bg-blue-900' : 'cursor-not-allowed opacity-50' }}
                                  {{ $isToday ? 'bg-blue-100 dark:bg-blue-900 font-bold' : '' }}
                                  {{ $date === $selectedSlot ? 'bg-blue-500 text-white' : 'bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200' }}"
                            @click="selectDate('{{ $date }}')"
                            {{ $disabled || !$isAvailable || $isPast ? 'disabled' : '' }}>
                        {{ $day }}
                    </button>
                </div>
            @endfor
        </div>
        
        <!-- الفترات المتاحة -->
        <div x-show="showSlots" class="p-4 border-t border-gray-200 dark:border-gray-700">
            <h4 class="text-lg font-medium text-gray-800 dark:text-gray-200 mb-3">الفترات المتاحة</h4>
            <div class="grid grid-cols-3 gap-2">
                <template x-for="slot in getAvailableSlots()" :key="slot">
                    <button type="button" 
                            class="p-2 border rounded-md text-sm text-center transition-colors"
                            :class="selectedSlot === selectedDate + ' ' + slot ? 'bg-blue-500 text-white border-blue-500' : 'bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 border-gray-300 dark:border-gray-700 hover:bg-blue-50 dark:hover:bg-blue-900'"
                            @click="selectSlot(selectedDate + ' ' + slot)"
                            {{ $disabled ? 'disabled' : '' }}>
                        <span x-text="slot"></span>
                    </button>
                </template>
            </div>
        </div>
    </div>
    
    <input type="hidden" name="selected_slot" x-model="selectedSlot" />
</div>