<div x-data="{ activeTab: @entangle('activeTab') }">
    {{-- Flash Messages --}}
    @if(session('success'))
    <div class="mb-4 p-4 bg-green-50 border border-green-200 rounded-lg text-green-700 text-sm">
        {{ session('success') }}
    </div>
    @endif
    @if(session('error'))
    <div class="mb-4 p-4 bg-red-50 border border-red-200 rounded-lg text-red-700 text-sm">
        {{ session('error') }}
    </div>
    @endif

    {{-- Header Card --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6 mb-4 sm:mb-6">
        <div class="flex flex-col sm:flex-row sm:items-start justify-between gap-4">
            <div class="flex items-center gap-4">
                <div class="w-14 h-14 rounded-full bg-indigo-100 flex items-center justify-center">
                    @php
                        $typeIcons = [
                            'field' => 'M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6',
                            'court' => 'M4 6h16M4 10h16M4 14h16M4 18h16',
                            'pool' => 'M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z',
                            'gym' => 'M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10',
                        ];
                        $icon = $typeIcons[$facility->type?->value ?? ''] ?? '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';
                    @endphp
                    <svg class="w-7 h-7 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="{{ $icon }}"/>
                    </svg>
                </div>
                <div>
                    <h1 class="text-xl font-bold text-gray-800">
                        {{ $facility->name_ar }}
                    </h1>
                    @if($facility->name)
                    <p class="text-sm text-gray-500" dir="ltr">
                        {{ $facility->name }}
                    </p>
                    @endif
                    <div class="flex items-center gap-3 mt-1 flex-wrap">
                        @if($facility->code)
                        <span class="text-sm text-gray-500 font-mono" dir="ltr">{{ $facility->code }}</span>
                        @endif
                        @php
                            $statusValue = $facility->status->value ?? $facility->status;
                            $statusColors = [
                                'active' => 'green',
                                'maintenance' => 'amber',
                                'closed' => 'red',
                                'reserved' => 'blue',
                                'unavailable' => 'gray',
                            ];
                            $color = $statusColors[$statusValue] ?? 'gray';
                        @endphp
                        <span class="px-2 py-0.5 text-xs bg-{{ $color }}-100 text-{{ $color }}-700 rounded-full font-medium">
                            {{ $facility->status->label() }}
                        </span>
                        <span class="text-xs text-gray-500">
                            {{ $facility->type?->label() }}
                        </span>
                        @if($facility->branch)
                        <span class="text-xs text-gray-400">|</span>
                        <span class="text-xs text-gray-500">
                            {{ $facility->branch->name_ar }}
                        </span>
                        @endif
                    </div>
                </div>
            </div>
            <div class="flex items-center gap-2 self-start sm:self-auto flex-wrap">
                @can('facilities.update')
                <a href="{{ route('facilities.edit', $facility) }}" wire:navigate
                   class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 text-sm font-medium transition-colors">
                    {{ __('تعديل') }}
                </a>
                @endcan
                @can('facilities.manage_layouts')
                <a href="{{ route('facilities.layouts', $facility) }}" wire:navigate
                   class="px-4 py-2 bg-indigo-50 text-indigo-700 rounded-lg hover:bg-indigo-100 text-sm font-medium transition-colors">
                    {{ __('إدارة التخطيطات') }}
                </a>
                @endcan
                <a href="{{ route('facilities.list') }}" wire:navigate
                   class="px-4 py-2 text-gray-600 hover:text-gray-800 text-sm">
                    {{ __('رجوع') }}
                </a>
            </div>
        </div>
    </div>

    {{-- KPI Row --}}
    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3 sm:gap-4 mb-4 sm:mb-6">
        {{-- Total Layouts --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-lg bg-indigo-50 flex items-center justify-center">
                    <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>
                </div>
                <div>
                    <p class="text-xs text-gray-500">{{ __('التخطيطات') }}</p>
                    <p class="text-lg font-bold text-gray-800">{{ $totalLayouts }}</p>
                </div>
            </div>
        </div>

        {{-- Total Segments --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-lg bg-purple-50 flex items-center justify-center">
                    <svg class="w-5 h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 14v6m-3-3h6M6 10h2a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v2a2 2 0 002 2zm10 0h2a2 2 0 002-2V6a2 2 0 00-2-2h-2a2 2 0 00-2 2v2a2 2 0 002 2zM6 20h2a2 2 0 002-2v-2a2 2 0 00-2-2H6a2 2 0 00-2 2v2a2 2 0 002 2z"/>
                    </svg>
                </div>
                <div>
                    <p class="text-xs text-gray-500">{{ __('الأجزاء') }}</p>
                    <p class="text-lg font-bold text-gray-800">{{ $totalSegments }}</p>
                </div>
            </div>
        </div>

        {{-- Active Reservations Today --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-lg bg-green-50 flex items-center justify-center">
                    <svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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>
                </div>
                <div>
                    <p class="text-xs text-gray-500">{{ __('حجوزات اليوم') }}</p>
                    <p class="text-lg font-bold text-gray-800">{{ $activeReservationsToday }}</p>
                </div>
            </div>
        </div>

        {{-- Capacity --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-lg bg-blue-50 flex items-center justify-center">
                    <svg class="w-5 h-5 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 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
                    </svg>
                </div>
                <div>
                    <p class="text-xs text-gray-500">{{ __('السعة') }}</p>
                    <p class="text-lg font-bold text-gray-800">{{ $facility->capacity ?? '—' }}</p>
                </div>
            </div>
        </div>

        {{-- Area --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-lg bg-amber-50 flex items-center justify-center">
                    <svg class="w-5 h-5 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"/>
                    </svg>
                </div>
                <div>
                    <p class="text-xs text-gray-500">{{ __('المساحة') }}</p>
                    <p class="text-lg font-bold text-gray-800" dir="ltr">
                        {{ $facility->area_sqm ? $facility->area_sqm . ' م²' : '—' }}
                    </p>
                </div>
            </div>
        </div>

        {{-- Utilization --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-lg bg-teal-50 flex items-center justify-center">
                    <svg class="w-5 h-5 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
                    </svg>
                </div>
                <div>
                    <p class="text-xs text-gray-500">{{ __('الإشغال اليوم') }}</p>
                    <p class="text-lg font-bold text-gray-800">{{ $utilizationPercent }}%</p>
                </div>
            </div>
        </div>
    </div>

    {{-- Tabs --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
        {{-- Tab Navigation --}}
        <div class="border-b border-gray-200">
            <nav class="flex overflow-x-auto -mb-px">
                <button @click="activeTab = 'overview'"
                        :class="activeTab === 'overview' ? 'border-indigo-500 text-indigo-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                        class="whitespace-nowrap py-3 px-6 border-b-2 font-medium text-sm transition-colors">
                    {{ __('نظرة عامة') }}
                </button>
                <button @click="activeTab = 'layouts'"
                        :class="activeTab === 'layouts' ? 'border-indigo-500 text-indigo-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                        class="whitespace-nowrap py-3 px-6 border-b-2 font-medium text-sm transition-colors">
                    {{ __('التخطيطات') }}
                    <span class="ms-1 text-xs bg-gray-100 text-gray-600 rounded-full px-2 py-0.5">{{ $totalLayouts }}</span>
                </button>
                <button @click="activeTab = 'reservations'"
                        :class="activeTab === 'reservations' ? 'border-indigo-500 text-indigo-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                        class="whitespace-nowrap py-3 px-6 border-b-2 font-medium text-sm transition-colors">
                    {{ __('الحجوزات') }}
                    <span class="ms-1 text-xs bg-gray-100 text-gray-600 rounded-full px-2 py-0.5">{{ $upcomingReservations->count() }}</span>
                </button>
                <button @click="activeTab = 'schedule'"
                        :class="activeTab === 'schedule' ? 'border-indigo-500 text-indigo-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                        class="whitespace-nowrap py-3 px-6 border-b-2 font-medium text-sm transition-colors">
                    {{ __('جدول اليوم') }}
                </button>
            </nav>
        </div>

        {{-- Tab Content --}}
        <div class="p-4 sm:p-6">

            {{-- Overview Tab --}}
            <div x-show="activeTab === 'overview'" x-cloak>
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    {{-- Facility Info Card --}}
                    <div class="space-y-4">
                        <h3 class="text-base font-semibold text-gray-800 mb-3">{{ __('معلومات المنشأة') }}</h3>
                        <div class="bg-gray-50 rounded-lg p-4 space-y-3">
                            <div class="flex justify-between items-center">
                                <span class="text-sm text-gray-500">{{ __('النوع') }}</span>
                                <span class="text-sm font-medium text-gray-800">{{ $facility->type?->label() ?? '—' }}</span>
                            </div>
                            <div class="border-t border-gray-200"></div>
                            <div class="flex justify-between items-center">
                                <span class="text-sm text-gray-500">{{ __('الفرع') }}</span>
                                <span class="text-sm font-medium text-gray-800">{{ $facility->branch?->name_ar ?? '—' }}</span>
                            </div>
                            <div class="border-t border-gray-200"></div>
                            <div class="flex justify-between items-center">
                                <span class="text-sm text-gray-500">{{ __('السعة') }}</span>
                                <span class="text-sm font-medium text-gray-800">{{ $facility->capacity ? $facility->capacity . ' ' . __('فرد') : '—' }}</span>
                            </div>
                            <div class="border-t border-gray-200"></div>
                            <div class="flex justify-between items-center">
                                <span class="text-sm text-gray-500">{{ __('المساحة') }}</span>
                                <span class="text-sm font-medium text-gray-800" dir="ltr">{{ $facility->area_sqm ? $facility->area_sqm . ' م²' : '—' }}</span>
                            </div>
                            @if($facility->length_m && $facility->width_m)
                            <div class="border-t border-gray-200"></div>
                            <div class="flex justify-between items-center">
                                <span class="text-sm text-gray-500">{{ __('الأبعاد') }}</span>
                                <span class="text-sm font-medium text-gray-800" dir="ltr">{{ $facility->length_m }} × {{ $facility->width_m }} {{ __('م') }}</span>
                            </div>
                            @endif
                            <div class="border-t border-gray-200"></div>
                            <div class="flex justify-between items-center">
                                <span class="text-sm text-gray-500">{{ __('نوع السطح') }}</span>
                                <span class="text-sm font-medium text-gray-800">{{ $facility->surface_type ?? '—' }}</span>
                            </div>
                            <div class="border-t border-gray-200"></div>
                            <div class="flex justify-between items-center">
                                <span class="text-sm text-gray-500">{{ __('داخلي/خارجي') }}</span>
                                <span class="text-sm font-medium text-gray-800">{{ $facility->is_indoor ? __('داخلي') : __('خارجي') }}</span>
                            </div>
                            <div class="border-t border-gray-200"></div>
                            <div class="flex items-center gap-4">
                                @if($facility->has_lighting)
                                <span class="inline-flex items-center gap-1 text-xs text-green-700 bg-green-50 px-2 py-1 rounded-full">
                                    <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20"><path d="M11 3a1 1 0 10-2 0v1a1 1 0 102 0V3zM15.657 5.757a1 1 0 00-1.414-1.414l-.707.707a1 1 0 001.414 1.414l.707-.707zM18 10a1 1 0 01-1 1h-1a1 1 0 110-2h1a1 1 0 011 1zM5.05 6.464A1 1 0 106.464 5.05l-.707-.707a1 1 0 00-1.414 1.414l.707.707zM4 11a1 1 0 100-2H3a1 1 0 000 2h1zM10 18a1 1 0 001-1v-1a1 1 0 10-2 0v1a1 1 0 001 1z"/><path fill-rule="evenodd" d="M10 2a8 8 0 100 16 8 8 0 000-16zm0 14a6 6 0 110-12 6 6 0 010 12z" clip-rule="evenodd"/></svg>
                                    {{ __('إضاءة') }}
                                </span>
                                @endif
                                @if($facility->has_ac)
                                <span class="inline-flex items-center gap-1 text-xs text-blue-700 bg-blue-50 px-2 py-1 rounded-full">
                                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
                                    {{ __('تكييف') }}
                                </span>
                                @endif
                            </div>
                            @if($facility->operating_start || $facility->operating_end)
                            <div class="border-t border-gray-200"></div>
                            <div class="flex justify-between items-center">
                                <span class="text-sm text-gray-500">{{ __('ساعات العمل') }}</span>
                                <span class="text-sm font-medium text-gray-800" dir="ltr">
                                    {{ $facility->operating_start ? \Carbon\Carbon::parse($facility->operating_start)->format('H:i') : '' }}
                                    —
                                    {{ $facility->operating_end ? \Carbon\Carbon::parse($facility->operating_end)->format('H:i') : '' }}
                                </span>
                            </div>
                            @endif
                            @if($facility->rental_cost_per_hour)
                            <div class="border-t border-gray-200"></div>
                            <div class="flex justify-between items-center">
                                <span class="text-sm text-gray-500">{{ __('تكلفة الإيجار/ساعة') }}</span>
                                <span class="text-sm font-medium text-gray-800">{{ number_format($facility->rental_cost_per_hour / 100, 2) }} {{ __('ج.م') }}</span>
                            </div>
                            @endif
                        </div>

                        @if($facility->description_ar || $facility->description)
                        <div class="mt-4">
                            <h4 class="text-sm font-medium text-gray-700 mb-2">{{ __('الوصف') }}</h4>
                            <p class="text-sm text-gray-600 leading-relaxed">
                                {{ $facility->description_ar ?? $facility->description }}
                            </p>
                        </div>
                        @endif

                        @if($facility->notes)
                        <div class="mt-4">
                            <h4 class="text-sm font-medium text-gray-700 mb-2">{{ __('ملاحظات') }}</h4>
                            <p class="text-sm text-gray-600 leading-relaxed">{{ $facility->notes }}</p>
                        </div>
                        @endif
                    </div>

                    {{-- Amenities Card --}}
                    <div>
                        <h3 class="text-base font-semibold text-gray-800 mb-3">{{ __('المرافق والخدمات') }}</h3>
                        @if(!empty($facility->amenities) && is_array($facility->amenities) && count($facility->amenities) > 0)
                        <div class="flex flex-wrap gap-2">
                            @foreach($facility->amenities as $amenity)
                            <span class="inline-flex items-center px-3 py-1.5 rounded-lg bg-indigo-50 text-indigo-700 text-sm font-medium">
                                <svg class="w-4 h-4 me-1.5 text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                                </svg>
                                {{ $amenity }}
                            </span>
                            @endforeach
                        </div>
                        @else
                        <div class="bg-gray-50 rounded-lg p-6 text-center">
                            <svg class="w-10 h-10 text-gray-300 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/>
                            </svg>
                            <p class="text-sm text-gray-500">{{ __('لا توجد مرافق مسجلة') }}</p>
                        </div>
                        @endif

                        {{-- Quick Info --}}
                        @if($facility->address)
                        <div class="mt-6">
                            <h4 class="text-sm font-medium text-gray-700 mb-2">{{ __('العنوان') }}</h4>
                            <p class="text-sm text-gray-600">{{ $facility->address }}</p>
                        </div>
                        @endif

                        @if($facility->creator)
                        <div class="mt-6 pt-4 border-t border-gray-200">
                            <p class="text-xs text-gray-400">
                                {{ __('أنشئت بواسطة') }}: {{ $facility->creator->name }}
                                &middot;
                                {{ $facility->created_at?->translatedFormat('d M Y') }}
                            </p>
                        </div>
                        @endif
                    </div>
                </div>
            </div>

            {{-- Layouts Tab --}}
            <div x-show="activeTab === 'layouts'" x-cloak>
                @if($facility->layouts->count() > 0)
                <div class="space-y-4">
                    @foreach($facility->layouts as $layout)
                    <div class="border border-gray-200 rounded-lg p-4 hover:border-indigo-200 transition-colors">
                        <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
                            <div class="flex items-center gap-3">
                                <div class="w-10 h-10 rounded-lg {{ $layout->is_active ? 'bg-green-50' : 'bg-gray-100' }} flex items-center justify-center">
                                    @if($layout->layout_type?->value === 'grid')
                                    <svg class="w-5 h-5 {{ $layout->is_active ? 'text-green-600' : 'text-gray-400' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"/>
                                    </svg>
                                    @elseif($layout->layout_type?->value === 'lanes')
                                    <svg class="w-5 h-5 {{ $layout->is_active ? 'text-green-600' : 'text-gray-400' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
                                    </svg>
                                    @else
                                    <svg class="w-5 h-5 {{ $layout->is_active ? 'text-green-600' : 'text-gray-400' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 14v6m-3-3h6M6 10h2a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v2a2 2 0 002 2zm10 0h2a2 2 0 002-2V6a2 2 0 00-2-2h-2a2 2 0 00-2 2v2a2 2 0 002 2zM6 20h2a2 2 0 002-2v-2a2 2 0 00-2-2H6a2 2 0 00-2 2v2a2 2 0 002 2z"/>
                                    </svg>
                                    @endif
                                </div>
                                <div>
                                    <h4 class="text-sm font-semibold text-gray-800">
                                        {{ $layout->name_ar ?? $layout->name ?? __('تخطيط بدون اسم') }}
                                    </h4>
                                    <div class="flex items-center gap-2 mt-0.5 flex-wrap">
                                        <span class="text-xs px-2 py-0.5 rounded-full {{ $layout->is_active ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-500' }}">
                                            {{ $layout->is_active ? __('مفعل') : __('معطل') }}
                                        </span>
                                        <span class="text-xs text-gray-500">
                                            {{ $layout->layout_type?->label() }}
                                        </span>
                                        @if($layout->layout_config)
                                            @php
                                                $config = $layout->layout_config;
                                            @endphp
                                            @if(isset($config['rows']) && isset($config['columns']))
                                            <span class="text-xs text-gray-400" dir="ltr">
                                                ({{ $config['rows'] }}&times;{{ $config['columns'] }})
                                            </span>
                                            @elseif(isset($config['lane_count']))
                                            <span class="text-xs text-gray-400">
                                                {{ $config['lane_count'] }} {{ __('حارة') }}
                                            </span>
                                            @endif
                                        @endif
                                    </div>
                                </div>
                            </div>
                            <div class="flex items-center gap-4 text-sm">
                                {{-- Segments count --}}
                                <div class="text-center">
                                    <p class="text-lg font-bold text-gray-800">{{ $layout->segments->count() }}</p>
                                    <p class="text-xs text-gray-500">{{ __('جزء') }}</p>
                                </div>
                                {{-- Time period --}}
                                <div class="text-end">
                                    @php
                                        $dayNames = [0 => 'الأحد', 1 => 'الإثنين', 2 => 'الثلاثاء', 3 => 'الأربعاء', 4 => 'الخميس', 5 => 'الجمعة', 6 => 'السبت'];
                                    @endphp
                                    @if($layout->is_recurring && $layout->effective_day_of_week !== null)
                                    <p class="text-xs text-gray-600 font-medium">
                                        {{ $dayNames[$layout->effective_day_of_week] ?? '' }}
                                    </p>
                                    @elseif(!$layout->is_recurring && $layout->effective_date)
                                    <p class="text-xs text-gray-600 font-medium">
                                        {{ $layout->effective_date->format('Y-m-d') }}
                                    </p>
                                    @endif
                                    @if($layout->start_time && $layout->end_time)
                                    <p class="text-xs text-gray-400" dir="ltr">
                                        {{ \Carbon\Carbon::parse($layout->start_time)->format('H:i') }} - {{ \Carbon\Carbon::parse($layout->end_time)->format('H:i') }}
                                    </p>
                                    @endif
                                </div>
                            </div>
                        </div>

                        {{-- Segments list --}}
                        @if($layout->segments->count() > 0)
                        <div class="mt-3 pt-3 border-t border-gray-100">
                            <div class="flex flex-wrap gap-1.5">
                                @foreach($layout->segments as $segment)
                                <span class="inline-flex items-center text-xs px-2 py-1 rounded {{ $segment->is_available ? 'bg-green-50 text-green-700 border border-green-200' : 'bg-red-50 text-red-700 border border-red-200' }}">
                                    {{ $segment->name_ar ?? $segment->name ?? $segment->code }}
                                    @if(!$segment->is_available)
                                    <svg class="w-3 h-3 ms-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M13.477 14.89A6 6 0 015.11 6.524l8.367 8.368zm1.414-1.414L6.524 5.11a6 6 0 018.367 8.367zM18 10a8 8 0 11-16 0 8 8 0 0116 0z" clip-rule="evenodd"/></svg>
                                    @endif
                                </span>
                                @endforeach
                            </div>
                        </div>
                        @endif
                    </div>
                    @endforeach
                </div>
                @else
                <div class="text-center py-12">
                    <svg class="w-16 h-16 text-gray-300 mx-auto mb-4" 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>
                    <h3 class="text-sm font-medium text-gray-700 mb-1">{{ __('لا توجد تخطيطات') }}</h3>
                    <p class="text-sm text-gray-500 mb-4">{{ __('لم يتم إنشاء أي تخطيط مساحة لهذه المنشأة بعد') }}</p>
                    @can('facilities.manage_layouts')
                    <a href="{{ route('facilities.layouts', $facility) }}" wire:navigate
                       class="inline-flex items-center px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 text-sm font-medium transition-colors">
                        <svg class="w-4 h-4 me-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                        </svg>
                        {{ __('إنشاء تخطيط') }}
                    </a>
                    @endcan
                </div>
                @endif
            </div>

            {{-- Reservations Tab --}}
            <div x-show="activeTab === 'reservations'" x-cloak>
                @if($upcomingReservations->count() > 0)
                <div class="overflow-x-auto">
                    <table class="w-full text-sm">
                        <thead>
                            <tr class="text-start">
                                <th class="text-start px-4 py-3 text-xs font-medium text-gray-500 uppercase bg-gray-50 rounded-ss-lg">{{ __('التاريخ') }}</th>
                                <th class="text-start px-4 py-3 text-xs font-medium text-gray-500 uppercase bg-gray-50">{{ __('الوقت') }}</th>
                                <th class="text-start px-4 py-3 text-xs font-medium text-gray-500 uppercase bg-gray-50">{{ __('العنوان') }}</th>
                                <th class="text-start px-4 py-3 text-xs font-medium text-gray-500 uppercase bg-gray-50">{{ __('الأجزاء المحجوزة') }}</th>
                                <th class="text-start px-4 py-3 text-xs font-medium text-gray-500 uppercase bg-gray-50 rounded-se-lg">{{ __('الحالة') }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-100">
                            @foreach($upcomingReservations as $reservation)
                            <tr class="hover:bg-gray-50 transition-colors">
                                <td class="px-4 py-3 text-gray-800 font-medium">
                                    {{ $reservation->reservation_date?->translatedFormat('D d M') }}
                                </td>
                                <td class="px-4 py-3 text-gray-600" dir="ltr">
                                    {{ \Carbon\Carbon::parse($reservation->start_time)->format('H:i') }}
                                    -
                                    {{ \Carbon\Carbon::parse($reservation->end_time)->format('H:i') }}
                                </td>
                                <td class="px-4 py-3 text-gray-800">
                                    {{ $reservation->title ?? __('حجز بدون عنوان') }}
                                </td>
                                <td class="px-4 py-3">
                                    @if(!empty($reservation->segment_ids) && is_array($reservation->segment_ids))
                                    <span class="text-xs bg-gray-100 text-gray-600 px-2 py-0.5 rounded-full">
                                        {{ count($reservation->segment_ids) }} {{ __('جزء') }}
                                    </span>
                                    @else
                                    <span class="text-xs text-gray-400">—</span>
                                    @endif
                                </td>
                                <td class="px-4 py-3">
                                    @php
                                        $resStatusValue = $reservation->status->value ?? $reservation->status;
                                        $resStatusColors = [
                                            'confirmed' => 'green',
                                            'tentative' => 'amber',
                                            'cancelled' => 'red',
                                        ];
                                        $resColor = $resStatusColors[$resStatusValue] ?? 'gray';
                                    @endphp
                                    <span class="px-2 py-0.5 text-xs bg-{{ $resColor }}-100 text-{{ $resColor }}-700 rounded-full font-medium">
                                        {{ $reservation->status->label() }}
                                    </span>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                @else
                <div class="text-center py-12">
                    <svg class="w-16 h-16 text-gray-300 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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>
                    <h3 class="text-sm font-medium text-gray-700 mb-1">{{ __('لا توجد حجوزات قادمة') }}</h3>
                    <p class="text-sm text-gray-500">{{ __('لا يوجد أي حجوزات خلال الأيام السبعة القادمة') }}</p>
                </div>
                @endif
            </div>

            {{-- Schedule Tab (Today) --}}
            <div x-show="activeTab === 'schedule'" x-cloak>
                <div class="mb-4">
                    <h3 class="text-sm font-semibold text-gray-800">
                        {{ __('جدول اليوم') }} — {{ now()->translatedFormat('l d F Y') }}
                    </h3>
                </div>

                @if($todaySchedule->count() > 0)
                <div class="space-y-3">
                    @foreach($todaySchedule as $slot)
                    <div class="flex items-start gap-4 p-3 rounded-lg border border-gray-100 hover:border-indigo-100 transition-colors">
                        {{-- Time --}}
                        <div class="flex-shrink-0 text-center w-20">
                            <p class="text-sm font-bold text-gray-800" dir="ltr">
                                {{ \Carbon\Carbon::parse($slot->start_time)->format('H:i') }}
                            </p>
                            <p class="text-xs text-gray-400" dir="ltr">
                                {{ \Carbon\Carbon::parse($slot->end_time)->format('H:i') }}
                            </p>
                        </div>
                        {{-- Divider --}}
                        <div class="w-px self-stretch bg-indigo-200"></div>
                        {{-- Details --}}
                        <div class="flex-1 min-w-0">
                            <p class="text-sm font-medium text-gray-800 truncate">
                                {{ $slot->title ?? __('حجز') }}
                            </p>
                            @if(!empty($slot->segment_ids) && is_array($slot->segment_ids))
                            <p class="text-xs text-gray-500 mt-0.5">
                                {{ count($slot->segment_ids) }} {{ __('جزء مشغول') }}
                            </p>
                            @endif
                            @if($slot->notes)
                            <p class="text-xs text-gray-400 mt-1 truncate">{{ $slot->notes }}</p>
                            @endif
                        </div>
                        {{-- Status --}}
                        <div class="flex-shrink-0">
                            @php
                                $slotStatusValue = $slot->status->value ?? $slot->status;
                                $slotColor = $resStatusColors[$slotStatusValue] ?? 'gray';
                            @endphp
                            <span class="px-2 py-0.5 text-xs bg-{{ $slotColor }}-100 text-{{ $slotColor }}-700 rounded-full font-medium">
                                {{ $slot->status->label() }}
                            </span>
                        </div>
                    </div>
                    @endforeach
                </div>
                @else
                <div class="text-center py-12">
                    <svg class="w-16 h-16 text-gray-300 mx-auto mb-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>
                    <h3 class="text-sm font-medium text-gray-700 mb-1">{{ __('لا يوجد جدول اليوم') }}</h3>
                    <p class="text-sm text-gray-500">{{ __('لا توجد حجوزات أو جلسات مجدولة لهذا اليوم') }}</p>
                </div>
                @endif
            </div>

        </div>
    </div>
</div>
