<div>
    {{-- Calendar Header --}}
    <div class="bg-white dark:bg-zinc-800 shadow rounded-lg mb-6">
        <div class="px-6 py-4 border-b border-zinc-200 dark:border-zinc-700">
            {{-- Top Row: Title and Today Button --}}
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-xl font-semibold text-zinc-900 dark:text-white dark:text-white">
                    {{ $currentPeriodLabel }}
                </h2>
                <button wire:click="today" class="px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-zinc-300 dark:border-zinc-600 rounded-md hover:bg-zinc-50 focus:outline-none focus:ring-2 focus:ring-indigo-500">
                    Today
                </button>
            </div>

            {{-- Bottom Row: Controls --}}
            <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between space-y-3 lg:space-y-0">
                {{-- Left Side: Technician Filter --}}
                <div class="flex-shrink-0">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                        Filter by Technician
                    </label>
                    <select wire:model.live="selectedTechnician" class="block w-full lg:w-64 rounded-md border-zinc-300 dark:border-zinc-600 border border-zinc-200 dark:border-zinc-700 focus:border-indigo-500 focus:ring-indigo-500 dark:border-zinc-700 dark:bg-gray-900 dark:text-gray-300 text-sm">
                        <option value="">All Technicians</option>
                        @foreach($technicians as $technician)
                            <option value="{{ $technician->id }}">
                                {{ $technician->first_name }} {{ $technician->last_name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                {{-- Right Side: View Controls and Navigation --}}
                <div class="flex items-center space-x-4">
                    {{-- View Type Toggles --}}
                    <div class="flex rounded-md border border-zinc-200 dark:border-zinc-700">
                        <button 
                            wire:click="setViewType('month')"
                            class="px-3 py-2 text-sm font-medium rounded-l-md border transition-colors duration-200 {{ $viewType === 'month' ? 'bg-indigo-600 text-white border-indigo-600 z-10' : 'bg-white text-gray-700 border-zinc-300 dark:border-zinc-600 hover:bg-zinc-50' }}"
                        >
                            Month
                        </button>
                        <button 
                            wire:click="setViewType('week')"
                            class="px-3 py-2 text-sm font-medium border-t border-b -ml-px transition-colors duration-200 {{ $viewType === 'week' ? 'bg-indigo-600 text-white border-indigo-600 z-10' : 'bg-white text-gray-700 border-zinc-300 dark:border-zinc-600 hover:bg-zinc-50' }}"
                        >
                            Week
                        </button>
                        <button 
                            wire:click="setViewType('day')"
                            class="px-3 py-2 text-sm font-medium rounded-r-md border -ml-px transition-colors duration-200 {{ $viewType === 'day' ? 'bg-indigo-600 text-white border-indigo-600 z-10' : 'bg-white text-gray-700 border-zinc-300 dark:border-zinc-600 hover:bg-zinc-50' }}"
                        >
                            Day
                        </button>
                    </div>

                    {{-- Navigation --}}
                    <div class="flex items-center space-x-1 border border-zinc-300 dark:border-zinc-600 rounded-md">
                        <button 
                            wire:click="previousPeriod" 
                            class="p-2 text-zinc-500 dark:text-zinc-400 hover:text-gray-700 hover:bg-zinc-100 rounded-l-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-indigo-500"
                            title="Previous {{ $viewType }}"
                        >
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
                            </svg>
                        </button>
                        <button 
                            wire:click="nextPeriod" 
                            class="p-2 text-zinc-500 dark:text-zinc-400 hover:text-gray-700 hover:bg-zinc-100 rounded-r-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-indigo-500"
                            title="Next {{ $viewType }}"
                        >
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                            </svg>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Calendar Content --}}
    <div class="bg-white dark:bg-zinc-800 shadow rounded-lg">
        @if($viewType === 'month')
            {{-- Month View --}}
            <div class="p-6">
                {{-- Day Headers --}}
                <div class="grid grid-cols-7 gap-1 mb-2">
                    @foreach(['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] as $day)
                        <div class="text-center text-sm font-medium text-zinc-500 dark:text-zinc-400 dark:text-gray-400 py-2">
                            {{ $day }}
                        </div>
                    @endforeach
                </div>

                {{-- Calendar Days --}}
                <div class="grid grid-cols-7 gap-1">
                    @foreach($calendarDays as $day)
                        <div 
                            wire:click="selectDate('{{ $day['date'] }}')"
                            class="min-h-24 p-1 border border-zinc-200 dark:border-zinc-700 cursor-pointer hover:bg-zinc-50 dark:hover:bg-zinc-700 transition-colors
                                {{ $day['isCurrentMonth'] ? 'bg-white dark:bg-zinc-800' : 'bg-zinc-50 dark:bg-gray-900' }}
                                {{ $day['isToday'] ? 'ring-2 ring-blue-500' : '' }}
                                {{ $day['isSelected'] ? 'bg-blue-50 dark:bg-blue-900' : '' }}"
                        >
                            <div class="text-sm {{ $day['isCurrentMonth'] ? 'text-zinc-900 dark:text-white dark:text-white' : 'text-gray-400' }} 
                                {{ $day['isToday'] ? 'font-bold' : '' }}">
                                {{ $day['day'] }}
                            </div>
                            
                            {{-- Appointments for this day --}}
                            @if(isset($appointments[$day['date']]))
                                <div class="mt-1 space-y-1">
                                    @foreach(array_slice($appointments[$day['date']], 0, 3) as $appointment)
                                        <div 
                                            wire:click.stop="showAppointmentDetails({{ $appointment['id'] }})"
                                            class="text-xs p-1 rounded cursor-pointer transition-colors
                                                @if($appointment['status'] === 'confirmed')
                                                    bg-green-100 text-green-800 hover:bg-green-200
                                                @elseif($appointment['status'] === 'scheduled')
                                                    bg-blue-100 text-blue-800 hover:bg-blue-200
                                                @elseif($appointment['status'] === 'in_progress')
                                                    bg-yellow-100 text-yellow-800 hover:bg-yellow-200
                                                @elseif($appointment['status'] === 'completed')
                                                    bg-emerald-100 text-emerald-800 hover:bg-emerald-200
                                                @else
                                                    bg-gray-100 text-gray-800 hover:bg-gray-200
                                                @endif"
                                        >
                                            <div class="font-medium">
                                                {{ \Carbon\Carbon::parse($appointment['scheduled_datetime'])->format('g:i A') }}
                                            </div>
                                            <div class="truncate">
                                                {{ $appointment['customer']['first_name'] ?? 'Unknown' }}
                                            </div>
                                        </div>
                                    @endforeach
                                    @if(count($appointments[$day['date']]) > 3)
                                        <div class="text-xs text-zinc-500 dark:text-zinc-400">
                                            +{{ count($appointments[$day['date']]) - 3 }} more
                                        </div>
                                    @endif
                                </div>
                            @endif
                        </div>
                    @endforeach
                </div>
            </div>

        @elseif($viewType === 'week')
            {{-- Week View --}}
            <div class="flex">
                {{-- Time Column --}}
                <div class="w-20 border-r border-zinc-200 dark:border-zinc-700">
                    <div class="h-12 border-b border-zinc-200 dark:border-zinc-700"></div>
                    @foreach($timeSlots as $slot)
                        <div class="h-12 text-xs text-zinc-500 dark:text-zinc-400 dark:text-gray-400 p-2 border-b border-gray-100 dark:border-gray-800">
                            {{ $slot['label'] }}
                        </div>
                    @endforeach
                </div>

                {{-- Days Columns --}}
                <div class="flex-1 grid grid-cols-7">
                    @foreach($calendarDays as $day)
                        <div class="border-r border-zinc-200 dark:border-zinc-700 last:border-r-0">
                            {{-- Day Header --}}
                            <div class="h-12 border-b border-zinc-200 dark:border-zinc-700 p-2 text-center
                                {{ $day['isToday'] ? 'bg-blue-50 dark:bg-blue-900' : '' }}">
                                <div class="text-sm font-medium text-zinc-900 dark:text-white dark:text-white">
                                    {{ $day['dayName'] }}
                                </div>
                                <div class="text-lg {{ $day['isToday'] ? 'text-blue-600 font-bold' : 'text-gray-700 dark:text-gray-300' }}">
                                    {{ $day['day'] }}
                                </div>
                            </div>

                            {{-- Time Slots --}}
                            <div class="relative">
                                @foreach($timeSlots as $slot)
                                    <div class="h-12 border-b border-gray-100 dark:border-gray-800 relative">
                                        {{-- Appointments for this time slot --}}
                                        @if(isset($appointments[$day['date']]))
                                            @foreach($appointments[$day['date']] as $appointment)
                                                @php
                                                    $appointmentTime = \Carbon\Carbon::parse($appointment['scheduled_datetime'])->format('H:i');
                                                @endphp
                                                @if($appointmentTime === $slot['time'])
                                                    <div 
                                                        wire:click="showAppointmentDetails({{ $appointment['id'] }})"
                                                        class="absolute inset-x-1 top-1 bottom-1 p-1 rounded text-xs cursor-pointer transition-colors
                                                            @if($appointment['status'] === 'confirmed')
                                                                bg-green-100 text-green-800 hover:bg-green-200
                                                            @elseif($appointment['status'] === 'scheduled')
                                                                bg-blue-100 text-blue-800 hover:bg-blue-200
                                                            @elseif($appointment['status'] === 'in_progress')
                                                                bg-yellow-100 text-yellow-800 hover:bg-yellow-200
                                                            @elseif($appointment['status'] === 'completed')
                                                                bg-emerald-100 text-emerald-800 hover:bg-emerald-200
                                                            @else
                                                                bg-gray-100 text-gray-800 hover:bg-gray-200
                                                            @endif"
                                                    >
                                                        <div class="font-medium truncate">{{ $appointment['customer']['first_name'] ?? '' }} {{ $appointment['customer']['last_name'] ?? '' }}</div>
                                                        <div class="text-xs truncate">{{ $appointment['service_requested'] }}</div>
                                                    </div>
                                                @endif
                                            @endforeach
                                        @endif
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>

        @else
            {{-- Day View --}}
            <div class="flex">
                {{-- Time Column --}}
                <div class="w-20 border-r border-zinc-200 dark:border-zinc-700">
                    <div class="h-16 border-b border-zinc-200 dark:border-zinc-700 p-4">
                        <div class="text-sm font-medium text-zinc-900 dark:text-white dark:text-white">
                            {{ $calendarDays[0]['fullDate'] ?? '' }}
                        </div>
                    </div>
                    @foreach($timeSlots as $slot)
                        <div class="h-16 text-sm text-zinc-500 dark:text-zinc-400 dark:text-gray-400 p-3 border-b border-gray-100 dark:border-gray-800">
                            {{ $slot['label'] }}
                        </div>
                    @endforeach
                </div>

                {{-- Day Content --}}
                <div class="flex-1">
                    <div class="h-16 border-b border-zinc-200 dark:border-zinc-700 p-4">
                        <div class="text-lg font-medium text-zinc-900 dark:text-white dark:text-white">
                            Schedule
                        </div>
                    </div>
                    
                    <div class="relative">
                        @foreach($timeSlots as $slot)
                            <div class="h-16 border-b border-gray-100 dark:border-gray-800 relative px-4">
                                {{-- Appointments for this time slot --}}
                                @if(isset($appointments[$selectedDate]))
                                    @foreach($appointments[$selectedDate] as $appointment)
                                        @php
                                            $appointmentTime = \Carbon\Carbon::parse($appointment['scheduled_datetime'])->format('H:i');
                                        @endphp
                                        @if($appointmentTime === $slot['time'])
                                            <div 
                                                wire:click="showAppointmentDetails({{ $appointment['id'] }})"
                                                class="absolute inset-x-4 top-2 bottom-2 p-3 rounded-lg shadow cursor-pointer transition-colors border
                                                    @if($appointment['status'] === 'confirmed')
                                                        bg-green-50 border-green-200 hover:bg-green-100
                                                    @elseif($appointment['status'] === 'scheduled')
                                                        bg-blue-50 border-blue-200 hover:bg-blue-100
                                                    @elseif($appointment['status'] === 'in_progress')
                                                        bg-yellow-50 border-yellow-200 hover:bg-yellow-100
                                                    @elseif($appointment['status'] === 'completed')
                                                        bg-emerald-50 border-emerald-200 hover:bg-emerald-100
                                                    @else
                                                        bg-zinc-50 border-zinc-200 hover:bg-zinc-100
                                                    @endif"
                                            >
                                                <div class="flex items-center justify-between">
                                                    <div>
                                                        <div class="font-medium 
                                                            @if($appointment['status'] === 'confirmed')
                                                                text-green-900
                                                            @elseif($appointment['status'] === 'scheduled')
                                                                text-blue-900
                                                            @elseif($appointment['status'] === 'in_progress')
                                                                text-yellow-900
                                                            @elseif($appointment['status'] === 'completed')
                                                                text-emerald-900
                                                            @else
                                                                text-zinc-900 dark:text-white
                                                            @endif">
                                                            {{ $appointment['customer']['first_name'] ?? '' }} {{ $appointment['customer']['last_name'] ?? '' }}
                                                        </div>
                                                        <div class="text-sm 
                                                            @if($appointment['status'] === 'confirmed')
                                                                text-green-700
                                                            @elseif($appointment['status'] === 'scheduled')
                                                                text-blue-700
                                                            @elseif($appointment['status'] === 'in_progress')
                                                                text-yellow-700
                                                            @elseif($appointment['status'] === 'completed')
                                                                text-emerald-700
                                                            @else
                                                                text-gray-700
                                                            @endif">
                                                            {{ $appointment['service_requested'] }}
                                                        </div>
                                                        <div class="text-xs 
                                                            @if($appointment['status'] === 'confirmed')
                                                                text-green-600
                                                            @elseif($appointment['status'] === 'scheduled')
                                                                text-blue-600
                                                            @elseif($appointment['status'] === 'in_progress')
                                                                text-yellow-600
                                                            @elseif($appointment['status'] === 'completed')
                                                                text-emerald-600
                                                            @else
                                                                text-zinc-600 dark:text-zinc-400
                                                            @endif">
                                                            {{ $appointment['assigned_technician']['first_name'] ?? '' }} {{ $appointment['assigned_technician']['last_name'] ?? '' }}
                                                        </div>
                                                    </div>
                                                    <div class="text-sm 
                                                        @if($appointment['status'] === 'confirmed')
                                                            text-green-700
                                                        @elseif($appointment['status'] === 'scheduled')
                                                            text-blue-700
                                                        @elseif($appointment['status'] === 'in_progress')
                                                            text-yellow-700
                                                        @elseif($appointment['status'] === 'completed')
                                                            text-emerald-700
                                                        @else
                                                            text-gray-700
                                                        @endif">
                                                        {{ \Carbon\Carbon::parse($appointment['scheduled_datetime'])->format('g:i A') }}
                                                    </div>
                                                </div>
                                            </div>
                                        @endif
                                    @endforeach
                                @endif
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        @endif
    </div>

    {{-- Appointment Details Modal --}}
    @if($showAppointmentModal && $selectedAppointment)
        <div class="fixed inset-0 bg-zinc-500 bg-opacity-75 flex items-center justify-center z-50">
            <div class="bg-white dark:bg-zinc-800 rounded-lg shadow-xl max-w-md w-full mx-4">
                <div class="px-6 py-4 border-b border-zinc-200 dark:border-zinc-700">
                    <div class="flex items-center justify-between">
                        <h3 class="text-lg font-medium text-zinc-900 dark:text-white dark:text-white">
                            Appointment Details
                        </h3>
                        <button wire:click="closeAppointmentModal" class="text-gray-400 hover:text-zinc-600 dark:text-zinc-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="M6 18L18 6M6 6l12 12"></path>
                            </svg>
                        </button>
                    </div>
                </div>
                
                <div class="px-6 py-4 space-y-4">
                    <div>
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                            @if($selectedAppointment->status === 'confirmed')
                                bg-green-100 text-green-800
                            @elseif($selectedAppointment->status === 'scheduled')
                                bg-blue-100 text-blue-800
                            @elseif($selectedAppointment->status === 'in_progress')
                                bg-yellow-100 text-yellow-800
                            @elseif($selectedAppointment->status === 'completed')
                                bg-emerald-100 text-emerald-800
                            @elseif($selectedAppointment->status === 'cancelled')
                                bg-red-100 text-red-800
                            @else
                                bg-gray-100 text-gray-800
                            @endif">
                            {{ ucfirst(str_replace('_', ' ', $selectedAppointment->status)) }}
                        </span>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Customer</label>
                        <p class="text-zinc-900 dark:text-white dark:text-white">
                            {{ $selectedAppointment->customer->first_name }} {{ $selectedAppointment->customer->last_name }}
                        </p>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Vehicle</label>
                        <p class="text-zinc-900 dark:text-white dark:text-white">
                            {{ $selectedAppointment->vehicle->year }} {{ $selectedAppointment->vehicle->make }} {{ $selectedAppointment->vehicle->model }}
                        </p>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Technician</label>
                        <p class="text-zinc-900 dark:text-white dark:text-white">
                            {{ $selectedAppointment->assignedTechnician->first_name }} {{ $selectedAppointment->assignedTechnician->last_name }}
                        </p>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Date & Time</label>
                        <p class="text-zinc-900 dark:text-white dark:text-white">
                            {{ $selectedAppointment->formatted_date_time }}
                        </p>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Service Requested</label>
                        <p class="text-zinc-900 dark:text-white dark:text-white">
                            {{ $selectedAppointment->service_requested }}
                        </p>
                    </div>
                    
                    @if($selectedAppointment->customer_notes)
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Customer Notes</label>
                            <p class="text-zinc-900 dark:text-white dark:text-white">
                                {{ $selectedAppointment->customer_notes }}
                            </p>
                        </div>
                    @endif
                </div>
                
                <div class="px-6 py-4 border-t border-zinc-200 dark:border-zinc-700">
                    <button wire:click="closeAppointmentModal" class="w-full px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500">
                        Close
                    </button>
                </div>
            </div>
        </div>
    @endif
</div>
