<div x-data="{ confirmSave: false }">
    <!-- Header with stepper -->
    <div class="mb-8">
        <h1 class="text-xl sm:text-2xl font-bold text-gray-900">{{ __('تعيين المجموعات على الملاعب') }}</h1>
        <p class="mt-1 text-sm text-gray-500">{{ __('اختر المجموعة، حدد الجدول، ثم انقر على القطع المطلوبة من الملعب') }}</p>

        <!-- Progress Steps -->
        <div class="mt-6 flex items-center gap-2 overflow-x-auto pb-2">
            @foreach([
                1 => 'اختيار المجموعة',
                2 => 'اختيار الجدول',
                3 => 'اختيار المنشأة',
                4 => 'تحديد المساحة',
                5 => 'تم التعيين',
            ] as $num => $label)
                <div class="flex items-center gap-2 shrink-0">
                    <button
                        wire:click="goToStep({{ $num }})"
                        @class([
                            'w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold transition-all',
                            'bg-blue-600 text-white shadow-md' => $step === $num,
                            'bg-emerald-500 text-white' => $step > $num,
                            'bg-gray-200 text-gray-500' => $step < $num,
                        ])
                        @disabled($step < $num)>
                        @if($step > $num)
                            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
                        @else
                            {{ $num }}
                        @endif
                    </button>
                    <span @class([
                        'text-xs font-medium whitespace-nowrap',
                        'text-blue-700' => $step === $num,
                        'text-emerald-600' => $step > $num,
                        'text-gray-400' => $step < $num,
                    ])>{{ __($label) }}</span>
                    @if($num < 5)
                        <div @class([
                            'w-8 h-0.5 rounded',
                            'bg-emerald-400' => $step > $num,
                            'bg-gray-200' => $step <= $num,
                        ])></div>
                    @endif
                </div>
            @endforeach
        </div>
    </div>

    @if(session('success'))
        <div class="mb-4 p-4 bg-emerald-50 border border-emerald-200 text-emerald-700 rounded-xl text-sm flex items-center gap-2">
            <svg class="w-5 h-5 shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>
            {{ session('success') }}
        </div>
    @endif
    @if(session('error'))
        <div class="mb-4 p-4 bg-red-50 border border-red-200 text-red-700 rounded-xl text-sm flex items-center gap-2">
            <svg class="w-5 h-5 shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/></svg>
            {{ session('error') }}
        </div>
    @endif

    <!-- STEP 1: Select Group -->
    @if($step === 1)
        <div class="bg-white rounded-2xl border border-gray-200 p-6 shadow-sm">
            <div class="max-w-xl mx-auto">
                <div class="text-center mb-6">
                    <div class="w-16 h-16 bg-blue-50 rounded-2xl flex items-center justify-center mx-auto mb-3">
                        <svg class="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                    </div>
                    <h2 class="text-lg font-bold text-gray-900">{{ __('اختر المجموعة التدريبية') }}</h2>
                    <p class="text-sm text-gray-500 mt-1">{{ __('ابحث بالاسم أو الكود') }}</p>
                </div>

                <div class="relative">
                    <input type="text" wire:model.live.debounce.300ms="groupSearch"
                        class="w-full px-4 py-3 pe-10 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
                        placeholder="{{ __('ابحث عن المجموعة...') }}">
                    <svg class="absolute top-3.5 end-3 w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
                </div>

                @if($searchResults->count() > 0)
                    <div class="mt-3 space-y-2 max-h-80 overflow-y-auto">
                        @foreach($searchResults as $group)
                            <button wire:click="selectGroup({{ $group->id }})" type="button"
                                class="w-full flex items-center gap-4 p-4 rounded-xl border border-gray-200 hover:border-blue-300 hover:bg-blue-50/50 transition-all text-start group">
                                <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center shrink-0">
                                    <span class="text-white font-bold text-sm">{{ mb_substr($group->name_ar, 0, 1) }}</span>
                                </div>
                                <div class="flex-1 min-w-0">
                                    <p class="font-semibold text-gray-900 truncate group-hover:text-blue-700 transition-colors">{{ $group->name_ar }}</p>
                                    <p class="text-xs text-gray-500">{{ $group->program?->name_ar ?? '-' }} — {{ $group->code }}</p>
                                </div>
                                <div class="text-end shrink-0">
                                    <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium {{ $group->status === 'active' ? 'bg-emerald-100 text-emerald-700' : 'bg-gray-100 text-gray-600' }}">
                                        {{ $group->current_count }}/{{ $group->max_capacity }}
                                    </span>
                                </div>
                                <svg class="w-5 h-5 text-gray-300 group-hover:text-blue-500 transition-colors shrink-0" 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"/></svg>
                            </button>
                        @endforeach
                    </div>
                @elseif(strlen($groupSearch) >= 2)
                    <div class="mt-4 text-center py-8 text-gray-500 text-sm">
                        {{ __('لا توجد مجموعات مطابقة') }}
                    </div>
                @endif
            </div>
        </div>
    @endif

    <!-- STEP 2: Select Schedule -->
    @if($step === 2)
        <div class="bg-white rounded-2xl border border-gray-200 p-6 shadow-sm">
            <!-- Selected group summary -->
            @if($selectedGroup)
                <div class="mb-6 p-4 bg-blue-50 rounded-xl border border-blue-100 flex items-center gap-3">
                    <div class="w-10 h-10 rounded-lg bg-blue-600 flex items-center justify-center shrink-0">
                        <span class="text-white font-bold">{{ mb_substr($selectedGroup['name_ar'], 0, 1) }}</span>
                    </div>
                    <div>
                        <p class="font-semibold text-blue-900">{{ $selectedGroup['name_ar'] }}</p>
                        <p class="text-xs text-blue-700">{{ $selectedGroup['program_name'] }}</p>
                    </div>
                </div>
            @endif

            <h2 class="text-lg font-bold text-gray-900 mb-4">{{ __('اختر الموعد المراد تعيين مساحة له') }}</h2>

            @if(empty($schedules))
                <div class="text-center py-12 text-gray-500">
                    <svg class="mx-auto h-12 w-12 text-gray-300 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                    <p class="font-medium">{{ __('لا توجد مواعيد لهذه المجموعة') }}</p>
                    <p class="text-sm mt-1">{{ __('يجب إنشاء جدول تدريبي أولاً') }}</p>
                </div>
            @else
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                    @foreach($schedules as $schedule)
                        <button wire:click="selectSchedule({{ $schedule['id'] }})" type="button"
                            class="p-4 rounded-xl border-2 transition-all text-start group
                                {{ $schedule['has_space_template'] ? 'border-emerald-200 bg-emerald-50/50 hover:border-emerald-400' : 'border-gray-200 hover:border-blue-300 hover:bg-blue-50/30' }}">
                            <div class="flex items-center justify-between mb-2">
                                <span class="text-lg font-bold text-gray-900">{{ $schedule['day_name'] }}</span>
                                @if($schedule['has_space_template'])
                                    <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs bg-emerald-100 text-emerald-700">
                                        <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
                                        {{ __('معيّن') }}
                                    </span>
                                @endif
                            </div>
                            <div class="space-y-1 text-sm text-gray-600">
                                <p dir="ltr" class="text-start font-mono">{{ $schedule['start_time'] }} - {{ $schedule['end_time'] }}</p>
                                <p>{{ __('المدرب') }}: {{ $schedule['trainer_name'] }}</p>
                            </div>
                        </button>
                    @endforeach
                </div>
            @endif
        </div>
    @endif

    <!-- STEP 3: Select Facility -->
    @if($step === 3)
        <div class="bg-white rounded-2xl border border-gray-200 p-6 shadow-sm">
            <h2 class="text-lg font-bold text-gray-900 mb-4">{{ __('اختر المنشأة') }}</h2>

            @if(empty($facilities))
                <div class="text-center py-12 text-gray-500">
                    <p>{{ __('لا توجد منشآت نشطة') }}</p>
                </div>
            @else
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                    @foreach($facilities as $facility)
                        <button wire:click="selectFacility({{ $facility['id'] }})" type="button"
                            class="p-5 rounded-xl border-2 border-gray-200 hover:border-blue-300 hover:bg-blue-50/30 transition-all text-start group">
                            <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-emerald-400 to-teal-600 flex items-center justify-center mb-3">
                                <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg>
                            </div>
                            <p class="font-semibold text-gray-900 group-hover:text-blue-700 transition-colors">{{ $facility['name_ar'] }}</p>
                            <p class="text-xs text-gray-500 mt-1">{{ $facility['type'] }}</p>
                        </button>
                    @endforeach
                </div>
            @endif
        </div>
    @endif

    <!-- STEP 4: Visual Grid Selection (THE STAR) -->
    @if($step === 4)
        <div class="space-y-4">
            <!-- Context bar -->
            <div class="bg-white rounded-xl border border-gray-200 p-4 flex flex-wrap items-center gap-4 text-sm">
                @if($selectedGroup)
                    <div class="flex items-center gap-2">
                        <span class="w-2 h-2 rounded-full bg-blue-500"></span>
                        <span class="font-medium text-gray-700">{{ $selectedGroup['name_ar'] }}</span>
                    </div>
                @endif
                @php
                    $currentSchedule = collect($schedules)->firstWhere('id', $selectedScheduleId);
                @endphp
                @if($currentSchedule)
                    <div class="flex items-center gap-2 text-gray-500">
                        <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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                        <span>{{ $currentSchedule['day_name'] }} {{ $currentSchedule['start_time'] }}-{{ $currentSchedule['end_time'] }}</span>
                    </div>
                @endif
                <div class="flex items-center gap-2 ms-auto">
                    <span class="text-xs font-medium text-gray-500">{{ __('محدد:') }}</span>
                    <span class="inline-flex items-center justify-center w-6 h-6 rounded-full bg-blue-100 text-blue-700 text-xs font-bold">{{ count($selectedSegmentIds) }}</span>
                </div>
            </div>

            @if(empty($segments))
                <div class="bg-white rounded-2xl border border-gray-200 p-12 text-center">
                    <svg class="mx-auto h-16 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">{{ __('يجب إنشاء تخطيط (شبكة/حارات/مناطق) أولاً من إعدادات المنشأة') }}</p>
                </div>
            @else
                <div class="grid grid-cols-1 lg:grid-cols-4 gap-4">
                    <!-- Grid visualization -->
                    <div class="lg:col-span-3 bg-white rounded-2xl border border-gray-200 p-6 shadow-sm">
                        <div class="flex items-center justify-between mb-4">
                            <h3 class="font-semibold text-gray-900">{{ __('انقر لتحديد القطع') }}</h3>
                            <div class="flex gap-2">
                                <button wire:click="selectAll" type="button" class="text-xs px-3 py-1.5 rounded-lg bg-blue-50 text-blue-700 hover:bg-blue-100 font-medium transition-colors">{{ __('تحديد الكل') }}</button>
                                <button wire:click="clearSelection" type="button" class="text-xs px-3 py-1.5 rounded-lg bg-gray-100 text-gray-600 hover:bg-gray-200 font-medium transition-colors">{{ __('مسح') }}</button>
                            </div>
                        </div>

                        <!-- Grid Layout — Unified Surface -->
                        @if($layoutType === 'grid')
                            <div class="facility-surface facility-surface--{{ $facilityType }} select-none"
                                style="grid-template-columns: repeat({{ $gridCols }}, 1fr);">
                                @foreach($segments as $segment)
                                    @php
                                        $isSelected = in_array($segment['id'], $selectedSegmentIds);
                                        $isOccupied = isset($occupiedSegments[$segment['id']]);
                                        $isUnavailable = !$segment['is_available'];
                                    @endphp
                                    <button wire:click="toggleSegment({{ $segment['id'] }})" type="button"
                                        @class([
                                            'relative aspect-square flex flex-col items-center justify-center p-2 border-e border-b transition-all duration-150',
                                            'facility-cell--selected text-blue-900' => $isSelected,
                                            'facility-cell--occupied bg-red-500/10 text-red-600/80 cursor-not-allowed' => $isOccupied,
                                            'facility-cell--unavailable text-gray-400 cursor-not-allowed opacity-50' => $isUnavailable && !$isOccupied,
                                            'text-gray-700 hover:bg-white/40 cursor-pointer' => !$isSelected && !$isOccupied && !$isUnavailable,
                                        ])
                                        @disabled($isOccupied || $isUnavailable)
                                        title="{{ $isOccupied ? ($occupiedSegments[$segment['id']]['title'] ?? __('محجوز')) : $segment['name_ar'] }}">

                                        @if($isSelected)
                                            <svg class="absolute top-1.5 end-1.5 w-4 h-4 text-blue-600" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
                                        @endif
                                        @if($isOccupied)
                                            <svg class="w-5 h-5 mb-1 text-red-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd"/></svg>
                                        @endif

                                        <span class="text-xs font-bold">{{ $segment['code'] }}</span>
                                        <span class="text-[10px] mt-0.5 opacity-70">{{ $segment['name_ar'] }}</span>
                                        @if($segment['capacity'])
                                            <span class="text-[9px] mt-0.5 opacity-50">{{ $segment['capacity'] }} {{ __('فرد') }}</span>
                                        @endif
                                    </button>
                                @endforeach
                            </div>

                        <!-- Lanes Layout — Pool-like Surface -->
                        @elseif($layoutType === 'lanes')
                            <div class="facility-surface facility-surface--lanes facility-surface--pool select-none">
                                @foreach($segments as $segment)
                                    @php
                                        $isSelected = in_array($segment['id'], $selectedSegmentIds);
                                        $isOccupied = isset($occupiedSegments[$segment['id']]);
                                        $isUnavailable = !$segment['is_available'];
                                    @endphp
                                    <button wire:click="toggleSegment({{ $segment['id'] }})" type="button"
                                        @class([
                                            'w-full flex items-center gap-4 px-5 py-4 transition-all duration-150',
                                            'facility-cell--selected' => $isSelected,
                                            'facility-cell--occupied bg-red-500/10 cursor-not-allowed' => $isOccupied,
                                            'facility-cell--unavailable cursor-not-allowed opacity-50' => $isUnavailable && !$isOccupied,
                                            'hover:bg-white/30 cursor-pointer' => !$isSelected && !$isOccupied && !$isUnavailable,
                                        ])
                                        @disabled($isOccupied || $isUnavailable)>
                                        <div @class([
                                            'w-10 h-10 rounded-full flex items-center justify-center font-bold text-sm border-2',
                                            'bg-blue-600/20 border-blue-500 text-blue-800' => $isSelected,
                                            'bg-red-500/15 border-red-300 text-red-600' => $isOccupied,
                                            'bg-white/50 border-current text-gray-600' => !$isSelected && !$isOccupied,
                                        ])>{{ $segment['lane_number'] ?? $segment['code'] }}</div>
                                        <div class="flex-1 text-start">
                                            <p class="font-medium {{ $isSelected ? 'text-blue-900' : 'text-gray-800' }}">{{ $segment['name_ar'] }}</p>
                                            @if($segment['capacity'])
                                                <p class="text-[10px] {{ $isSelected ? 'text-blue-600' : 'text-gray-400' }}">{{ $segment['capacity'] }} {{ __('فرد') }}</p>
                                            @endif
                                        </div>
                                        @if($isSelected)
                                            <svg class="w-5 h-5 text-blue-600" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
                                        @endif
                                        @if($isOccupied)
                                            <svg class="w-5 h-5 text-red-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd"/></svg>
                                        @endif
                                    </button>
                                @endforeach
                            </div>

                        <!-- Zones/Custom Layout — Unified Surface -->
                        @else
                            <div class="facility-surface facility-surface--{{ $facilityType }} select-none"
                                style="grid-template-columns: repeat({{ min(count($segments), 3) }}, 1fr);">
                                @foreach($segments as $segment)
                                    @php
                                        $isSelected = in_array($segment['id'], $selectedSegmentIds);
                                        $isOccupied = isset($occupiedSegments[$segment['id']]);
                                        $isUnavailable = !$segment['is_available'];
                                    @endphp
                                    <button wire:click="toggleSegment({{ $segment['id'] }})" type="button"
                                        @class([
                                            'p-5 border-e border-b transition-all duration-150 text-center',
                                            'facility-cell--selected text-blue-900' => $isSelected,
                                            'facility-cell--occupied bg-red-500/10 text-red-600/80 cursor-not-allowed' => $isOccupied,
                                            'facility-cell--unavailable text-gray-400 cursor-not-allowed opacity-50' => $isUnavailable && !$isOccupied,
                                            'text-gray-700 hover:bg-white/40 cursor-pointer' => !$isSelected && !$isOccupied && !$isUnavailable,
                                        ])
                                        @disabled($isOccupied || $isUnavailable)>
                                        <p class="font-bold text-sm">{{ $segment['code'] }}</p>
                                        <p class="text-xs mt-1 opacity-70">{{ $segment['name_ar'] }}</p>
                                        @if($segment['capacity'] ?? null)
                                            <p class="text-[9px] mt-1 opacity-50">{{ $segment['capacity'] }} {{ __('فرد') }}</p>
                                        @endif
                                    </button>
                                @endforeach
                            </div>
                        @endif

                        <!-- Legend -->
                        <div class="mt-6 flex flex-wrap gap-4 pt-4 border-t border-gray-100">
                            <div class="flex items-center gap-2 text-xs text-gray-600">
                                <div class="w-4 h-4 rounded bg-surface-field/60 border border-line-field"></div>
                                {{ __('متاح') }}
                            </div>
                            <div class="flex items-center gap-2 text-xs text-gray-600">
                                <div class="w-4 h-4 rounded facility-cell--selected"></div>
                                {{ __('محدد') }}
                            </div>
                            <div class="flex items-center gap-2 text-xs text-gray-600">
                                <div class="w-4 h-4 rounded facility-cell--occupied bg-red-500/10 border border-red-300"></div>
                                {{ __('محجوز') }}
                            </div>
                            <div class="flex items-center gap-2 text-xs text-gray-600">
                                <div class="w-4 h-4 rounded facility-cell--unavailable border border-gray-300"></div>
                                {{ __('غير متاح') }}
                            </div>
                        </div>
                    </div>

                    <!-- Side Panel: Selection summary + conflicts -->
                    <div class="space-y-4">
                        <!-- Selection Summary -->
                        <div class="bg-white rounded-xl border border-gray-200 p-4">
                            <h4 class="font-semibold text-gray-900 mb-3">{{ __('ملخص التحديد') }}</h4>
                            @if(empty($selectedSegmentIds))
                                <p class="text-sm text-gray-500">{{ __('لم يتم تحديد أي قطعة بعد') }}</p>
                            @else
                                <div class="space-y-2">
                                    @foreach($segments as $segment)
                                        @if(in_array($segment['id'], $selectedSegmentIds))
                                            <div class="flex items-center gap-2 text-sm">
                                                <div class="w-2 h-2 rounded-full bg-blue-500"></div>
                                                <span class="font-medium">{{ $segment['code'] }}</span>
                                                <span class="text-gray-500">{{ $segment['name_ar'] }}</span>
                                            </div>
                                        @endif
                                    @endforeach
                                </div>
                                <div class="mt-3 pt-3 border-t border-gray-100 text-xs text-gray-500">
                                    {{ count($selectedSegmentIds) }} {{ __('قطعة محددة') }}
                                    @php $totalCapacity = collect($segments)->whereIn('id', $selectedSegmentIds)->sum('capacity'); @endphp
                                    @if($totalCapacity)
                                        — {{ __('سعة') }}: {{ $totalCapacity }}
                                    @endif
                                </div>
                            @endif
                        </div>

                        <!-- Conflicts -->
                        @if(!empty($conflicts))
                            <div class="bg-red-50 rounded-xl border border-red-200 p-4">
                                <h4 class="font-semibold text-red-800 mb-2 flex items-center gap-2">
                                    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/></svg>
                                    {{ __('تعارضات') }}
                                </h4>
                                @foreach($conflicts as $conflict)
                                    <div class="text-sm text-red-700 mb-1">
                                        <span class="font-medium">{{ $conflict['title'] ?? __('حجز') }}</span>
                                        <span class="text-xs">({{ $conflict['time'] }})</span>
                                    </div>
                                @endforeach
                            </div>
                        @endif

                        @if(!empty($warnings))
                            <div class="bg-amber-50 rounded-xl border border-amber-200 p-4">
                                <h4 class="font-semibold text-amber-800 mb-2">{{ __('حجوزات مبدئية') }}</h4>
                                @foreach($warnings as $warning)
                                    <div class="text-sm text-amber-700 mb-1">
                                        {{ $warning['title'] ?? __('حجز مبدئي') }}
                                    </div>
                                @endforeach
                            </div>
                        @endif

                        <!-- Save Button -->
                        <button
                            @click="confirmSave = true"
                            type="button"
                            @class([
                                'w-full py-3.5 rounded-xl font-bold text-sm transition-all',
                                'bg-blue-600 text-white hover:bg-blue-700 shadow-lg shadow-blue-200' => !empty($selectedSegmentIds) && empty($conflicts),
                                'bg-gray-200 text-gray-400 cursor-not-allowed' => empty($selectedSegmentIds) || !empty($conflicts),
                            ])
                            @disabled(empty($selectedSegmentIds) || !empty($conflicts))>
                            {{ __('حفظ التعيين') }}
                        </button>
                    </div>
                </div>
            @endif
        </div>

        <!-- Confirmation Modal -->
        <div x-show="confirmSave" x-transition class="fixed inset-0 z-50 flex items-center justify-center p-4" style="display: none;">
            <div class="fixed inset-0 bg-black/50" @click="confirmSave = false"></div>
            <div class="relative bg-white rounded-2xl shadow-2xl p-6 max-w-md w-full">
                <h3 class="text-lg font-bold text-gray-900 mb-2">{{ __('تأكيد التعيين') }}</h3>
                <p class="text-sm text-gray-600 mb-6">{{ __('سيتم حفظ هذا التعيين وسيُستخدم تلقائياً عند إنشاء حصص جديدة لهذا الموعد. هل تريد المتابعة؟') }}</p>
                <div class="flex gap-3">
                    <button wire:click="saveAssignment" @click="confirmSave = false" type="button"
                        class="flex-1 py-2.5 bg-blue-600 text-white font-medium rounded-xl hover:bg-blue-700 transition-colors">
                        <span wire:loading.remove wire:target="saveAssignment">{{ __('نعم، حفظ') }}</span>
                        <span wire:loading wire:target="saveAssignment">{{ __('جارٍ الحفظ...') }}</span>
                    </button>
                    <button @click="confirmSave = false" type="button"
                        class="flex-1 py-2.5 bg-gray-100 text-gray-700 font-medium rounded-xl hover:bg-gray-200 transition-colors">
                        {{ __('إلغاء') }}
                    </button>
                </div>
            </div>
        </div>
    @endif

    <!-- STEP 5: Success -->
    @if($step === 5)
        <div class="bg-white rounded-2xl border border-gray-200 p-12 text-center shadow-sm">
            <div class="w-20 h-20 bg-emerald-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <svg class="w-10 h-10 text-emerald-600" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
            </div>
            <h2 class="text-xl font-bold text-gray-900 mb-2">{{ __('تم التعيين بنجاح!') }}</h2>
            <p class="text-gray-600 mb-8">{{ __('المساحة المحددة ستُحجز تلقائياً عند إنشاء حصص جديدة لهذا الموعد.') }}</p>
            <div class="flex flex-col sm:flex-row gap-3 justify-center">
                <button wire:click="startOver" type="button" class="px-6 py-3 bg-blue-600 text-white font-medium rounded-xl hover:bg-blue-700 transition-colors">
                    {{ __('تعيين مجموعة أخرى') }}
                </button>
                <a href="{{ route('facilities.list') }}" class="px-6 py-3 bg-gray-100 text-gray-700 font-medium rounded-xl hover:bg-gray-200 transition-colors">
                    {{ __('العودة للمنشآت') }}
                </a>
            </div>
        </div>
    @endif
</div>
