<div>
    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4 sm:mb-6">
        <div>
            <h1 class="text-xl sm:text-2xl font-bold text-gray-900">{{ __('تخطيط المنشأة') }}: {{ $facility->name_ar }}</h1>
            <p class="mt-1 text-sm text-gray-500">{{ __('إدارة تقسيمات الملعب (شبكة، حارات، مناطق)') }}</p>
        </div>
        <button wire:click="openCreateForm" type="button"
            class="w-full sm:w-auto px-4 py-2.5 bg-blue-600 text-white font-medium rounded-xl hover:bg-blue-700 transition-colors flex items-center justify-center gap-2">
            <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="M12 4v16m8-8H4"/></svg>
            {{ __('تخطيط جديد') }}
        </button>
    </div>

    @if(session('success'))
        <div class="mb-4 p-3 bg-emerald-50 border border-emerald-200 text-emerald-700 rounded-xl text-sm">{{ session('success') }}</div>
    @endif
    @if(session('error'))
        <div class="mb-4 p-3 bg-red-50 border border-red-200 text-red-700 rounded-xl text-sm">{{ session('error') }}</div>
    @endif

    <!-- Create/Edit Form -->
    @if($showForm)
        <div class="mb-6 bg-white rounded-2xl border border-gray-200 p-4 sm:p-6 shadow-sm">
            <h3 class="text-base sm:text-lg font-bold text-gray-900 mb-4">{{ $editingLayoutId ? __('تعديل التخطيط') : __('تخطيط جديد') }}</h3>

            <form wire:submit="save" class="space-y-5">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-3 sm:gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الاسم بالعربية') }} *</label>
                        <input type="text" wire:model="name_ar" class="w-full border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500 py-2.5" placeholder="{{ __('مثال: تقسيم صباحي') }}">
                        @error('name_ar') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الاسم بالإنجليزية') }} *</label>
                        <input type="text" wire:model="name" dir="ltr" class="w-full border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500 py-2.5" placeholder="Morning layout">
                        @error('name') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                    </div>
                </div>

                <!-- Layout Type -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">{{ __('نوع التخطيط') }}</label>
                    <div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
                        @foreach([
                            'grid' => ['شبكة', 'M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z'],
                            'lanes' => ['حارات', 'M4 6h16M4 10h16M4 14h16M4 18h16'],
                            'zones' => ['مناطق', 'M9 3v18m12-13H9m12 8H9'],
                            'custom' => ['مخصص', 'M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35'],
                        ] as $type => [$label, $icon])
                            <label class="cursor-pointer">
                                <input type="radio" wire:model.live="layout_type" value="{{ $type }}" class="sr-only peer">
                                <div class="p-3 rounded-xl border-2 text-center transition-all peer-checked:border-blue-500 peer-checked:bg-blue-50 border-gray-200 hover:border-gray-300">
                                    <svg class="w-6 h-6 mx-auto text-gray-600 peer-checked:text-blue-600 mb-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="{{ $icon }}"/></svg>
                                    <span class="text-xs font-medium">{{ __($label) }}</span>
                                </div>
                            </label>
                        @endforeach
                    </div>
                </div>

                <!-- Config based on type -->
                @if($layout_type === 'grid')
                    <div class="grid grid-cols-2 gap-3 sm:gap-4 p-4 bg-gray-50 rounded-xl">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('عدد الصفوف') }}</label>
                            <input type="number" wire:model.live="grid_rows" min="1" dir="ltr" class="w-full border-gray-300 rounded-lg py-2.5">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('عدد الأعمدة') }}</label>
                            <input type="number" wire:model.live="grid_columns" min="1" dir="ltr" class="w-full border-gray-300 rounded-lg py-2.5">
                        </div>
                        <p class="col-span-2 text-xs text-gray-500">{{ __('سيتم إنشاء') }} {{ $grid_rows * $grid_columns }} {{ __('قطعة') }}</p>
                    </div>
                @elseif($layout_type === 'lanes')
                    <div class="p-4 bg-gray-50 rounded-xl">
                        <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('عدد الحارات') }}</label>
                        <input type="number" wire:model.live="lane_count" min="1" dir="ltr" class="w-32 border-gray-300 rounded-lg py-2.5">
                    </div>
                @elseif($layout_type === 'zones' || $layout_type === 'custom')
                    <div class="p-4 bg-gray-50 rounded-xl space-y-3">
                        <div class="flex items-center justify-between">
                            <label class="text-sm font-medium text-gray-700">{{ __('المناطق') }}</label>
                            <button wire:click="addZone" type="button" class="text-xs px-3 py-1.5 bg-blue-100 text-blue-700 rounded-lg hover:bg-blue-200">+ {{ __('إضافة منطقة') }}</button>
                        </div>
                        @foreach($zone_definitions as $index => $zone)
                            <div class="flex flex-wrap sm:flex-nowrap items-center gap-2 p-2 bg-white rounded-lg border">
                                <input type="text" wire:model="zone_definitions.{{ $index }}.code" dir="ltr" placeholder="Z1" class="w-16 text-xs border-gray-300 rounded py-2.5">
                                <input type="text" wire:model="zone_definitions.{{ $index }}.name_ar" placeholder="{{ __('اسم المنطقة') }}" class="flex-1 min-w-0 text-sm border-gray-300 rounded py-2.5">
                                <input type="number" wire:model="zone_definitions.{{ $index }}.capacity" placeholder="{{ __('السعة') }}" dir="ltr" class="w-20 text-xs border-gray-300 rounded py-2.5">
                                <button wire:click="removeZone({{ $index }})" type="button" class="text-red-500 hover:text-red-700 p-2">
                                    <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="M6 18L18 6M6 6l12 12"/></svg>
                                </button>
                            </div>
                        @endforeach
                    </div>
                @endif

                <!-- Time & Scheduling -->
                <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3 sm:gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('من الساعة') }}</label>
                        <input type="time" wire:model="start_time" dir="ltr" class="w-full border-gray-300 rounded-lg py-2.5">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('إلى الساعة') }}</label>
                        <input type="time" wire:model="end_time" dir="ltr" class="w-full border-gray-300 rounded-lg py-2.5">
                    </div>
                    <div class="sm:col-span-2 md:col-span-1">
                        <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('نوع الجدولة') }}</label>
                        <select wire:model.live="is_recurring" class="w-full border-gray-300 rounded-lg py-2.5">
                            <option value="1">{{ __('متكرر (يوم محدد)') }}</option>
                            <option value="0">{{ __('تاريخ محدد') }}</option>
                        </select>
                    </div>
                </div>

                @if($is_recurring)
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('يوم الأسبوع') }}</label>
                        <select wire:model="effective_day_of_week" class="w-full sm:max-w-xs border-gray-300 rounded-lg py-2.5">
                            @foreach(['الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة', 'السبت'] as $i => $day)
                                <option value="{{ $i }}">{{ $day }}</option>
                            @endforeach
                        </select>
                    </div>
                @else
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('التاريخ') }}</label>
                        <input type="date" wire:model="effective_date" dir="ltr" class="w-full sm:max-w-xs border-gray-300 rounded-lg py-2.5">
                    </div>
                @endif

                <div class="flex flex-col-reverse sm:flex-row gap-3 pt-2">
                    <button wire:click="$set('showForm', false)" type="button"
                        class="w-full sm:w-auto px-6 py-2.5 bg-gray-100 text-gray-700 font-medium rounded-xl hover:bg-gray-200 transition-colors">
                        {{ __('إلغاء') }}
                    </button>
                    <button type="submit" wire:loading.attr="disabled" wire:target="save"
                        class="w-full sm:w-auto px-6 py-2.5 bg-blue-600 text-white font-medium rounded-xl hover:bg-blue-700 disabled:bg-blue-400 transition-colors">
                        <span wire:loading.remove wire:target="save">{{ $editingLayoutId ? __('تحديث') : __('إنشاء') }}</span>
                        <span wire:loading wire:target="save">{{ __('جارٍ الحفظ...') }}</span>
                    </button>
                </div>
            </form>
        </div>
    @endif

    <!-- Existing Layouts -->
    @if(empty($layouts) && !$showForm)
        <div class="bg-white rounded-2xl border border-gray-200 p-8 sm:p-12 text-center">
            <svg class="mx-auto h-12 w-12 sm:h-16 sm:w-16 text-gray-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"/></svg>
            <p class="font-medium text-gray-700 mb-2">{{ __('لا توجد تخطيطات بعد') }}</p>
            <p class="text-sm text-gray-500 mb-4">{{ __('أنشئ أول تخطيط لهذه المنشأة لبدء تعيين المجموعات') }}</p>
            <button wire:click="openCreateForm" type="button" class="w-full sm:w-auto px-6 py-2.5 bg-blue-600 text-white font-medium rounded-xl hover:bg-blue-700 transition-colors">
                {{ __('إنشاء تخطيط') }}
            </button>
        </div>
    @else
        <div class="space-y-4">
            @foreach($layouts as $layout)
                <div class="bg-white rounded-xl border border-gray-200 overflow-hidden">
                    <!-- Layout header -->
                    <div class="p-3 sm:p-4 flex flex-col sm:flex-row sm:items-center justify-between gap-3 border-b border-gray-100">
                        <div class="flex items-center gap-3 min-w-0">
                            <div class="w-10 h-10 rounded-lg bg-indigo-100 flex items-center justify-center shrink-0">
                                @if($layout['layout_type'] === 'grid')
                                    <svg class="w-5 h-5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"/></svg>
                                @else
                                    <svg class="w-5 h-5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"/></svg>
                                @endif
                            </div>
                            <div class="min-w-0">
                                <h4 class="font-semibold text-gray-900 truncate">{{ $layout['name_ar'] }}</h4>
                                <div class="flex items-center gap-2 text-xs text-gray-500 flex-wrap">
                                    <span class="px-1.5 py-0.5 bg-gray-100 rounded">{{ $layout['layout_type'] }}</span>
                                    <span>{{ $layout['start_time'] }} - {{ $layout['end_time'] }}</span>
                                    @if($layout['is_recurring'])
                                        @php $days = ['الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة', 'السبت']; @endphp
                                        <span>— {{ $days[$layout['effective_day_of_week']] ?? '' }}</span>
                                    @else
                                        <span>— {{ $layout['effective_date'] }}</span>
                                    @endif
                                </div>
                            </div>
                        </div>
                        <div class="flex items-center gap-2 self-end sm:self-auto">
                            <button wire:click="editLayout({{ $layout['id'] }})" class="p-2 text-gray-400 hover:text-blue-600 rounded-lg hover:bg-blue-50 transition-colors">
                                <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.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"/></svg>
                            </button>
                            <button wire:click="deleteLayout({{ $layout['id'] }})" wire:confirm="{{ __('هل أنت متأكد من حذف هذا التخطيط؟ سيتم حذف جميع القطع المرتبطة.') }}"
                                class="p-2 text-gray-400 hover:text-red-600 rounded-lg hover:bg-red-50 transition-colors">
                                <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="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"/></svg>
                            </button>
                        </div>
                    </div>

                    <!-- Visual segments preview -->
                    @if(!empty($layout['segments']))
                        <div class="p-3 sm:p-4 overflow-x-auto">
                            @if($layout['layout_type'] === 'grid')
                                @php
                                    $config = $layout['layout_config'] ?? [];
                                    $cols = $config['columns'] ?? 3;
                                @endphp
                                <div class="grid gap-2 min-w-[280px]" style="grid-template-columns: repeat({{ $cols }}, 1fr);">
                                    @foreach($layout['segments'] as $seg)
                                        <button wire:click="toggleSegmentAvailability({{ $seg['id'] }})" type="button"
                                            @class([
                                                'p-2 rounded-lg text-center text-xs font-medium border transition-colors min-h-[44px]',
                                                'bg-white border-gray-200 text-gray-700 hover:border-blue-300' => $seg['is_available'],
                                                'bg-gray-100 border-gray-300 text-gray-400 line-through' => !$seg['is_available'],
                                            ])
                                            title="{{ $seg['is_available'] ? __('انقر لتعطيل') : __('انقر لتفعيل') }}">
                                            {{ $seg['code'] }}
                                        </button>
                                    @endforeach
                                </div>
                            @else
                                <div class="flex flex-wrap gap-2">
                                    @foreach($layout['segments'] as $seg)
                                        <button wire:click="toggleSegmentAvailability({{ $seg['id'] }})" type="button"
                                            @class([
                                                'px-3 py-2.5 rounded-lg text-xs font-medium border transition-colors',
                                                'bg-white border-gray-200 text-gray-700 hover:border-blue-300' => $seg['is_available'],
                                                'bg-gray-100 border-gray-300 text-gray-400 line-through' => !$seg['is_available'],
                                            ])>
                                            {{ $seg['code'] }} — {{ $seg['name_ar'] }}
                                        </button>
                                    @endforeach
                                </div>
                            @endif
                            <p class="mt-2 text-xs text-gray-400">{{ __('انقر على القطعة لتفعيلها/تعطيلها') }}</p>
                        </div>
                    @endif
                </div>
            @endforeach
        </div>
    @endif
</div>
