@php
    // تحديد المنطقة الزمنية الحالية للمستخدم
    $userTimezone = session('timezone', 'UTC');
    $timezones = [
        'Africa/Cairo' => 'القاهرة (توقيت مصر)',
        'Asia/Riyadh' => 'الرياض (توقيت السعودية)',
        'Asia/Dubai' => 'دبي (توقيت الإمارات)',
        'Asia/Baghdad' => 'بغداد (توقيت العراق)',
        'Africa/Tunis' => 'تونس (توقيت تونس)',
        'Africa/Casablanca' => 'الدار البيضاء (توقيت المغرب)',
        'Asia/Amman' => 'عمان (توقيت الأردن)',
        'Asia/Beirut' => 'بيروت (توقيت لبنان)',
        'Europe/Istanbul' => 'إسطنبول (توقيت تركيا)',
        'Europe/London' => 'لندن (توقيت غرينتش)',
        'Europe/Paris' => 'باريس (توقيت وسط أوروبا)',
        'America/New_York' => 'نيويورك (التوقيت الشرقي)',
        'America/Chicago' => 'شيكاغو (التوقيت المركزي)',
        'America/Denver' => 'دنفر (توقيت الجبال)',
        'America/Los_Angeles' => 'لوس أنجلوس (التوقيت الباسيفيكي)',
        'Asia/Tokyo' => 'طوكيو (توقيت اليابان)',
        'Asia/Singapore' => 'سنغافورة (توقيت سنغافورة)',
        'Australia/Sydney' => 'سيدني (توقيت أستراليا الشرقي)',
        'UTC' => 'التوقيت العالمي المنسق (UTC)',
    ];
@endphp

<div class="timezone-selector" x-data="{ open: false, timezone: '{{ $userTimezone }}' }">
    <div class="mb-4">
        <label for="timezone" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
            المنطقة الزمنية
        </label>
        <div class="relative">
            <button type="button" 
                    @click="open = !open" 
                    class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm py-2 px-4 w-full flex items-center justify-between text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500">
                <span x-text="'{{ $timezones[$userTimezone] }}'"></span>
                <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                    <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
                </svg>
            </button>
            
            <div x-show="open" 
                 @click.away="open = false"
                 x-transition:enter="transition ease-out duration-100"
                 x-transition:enter-start="transform opacity-0 scale-95"
                 x-transition:enter-end="transform opacity-100 scale-100"
                 x-transition:leave="transition ease-in duration-75"
                 x-transition:leave-start="transform opacity-100 scale-100"
                 x-transition:leave-end="transform opacity-0 scale-95"
                 class="absolute z-10 mt-1 w-full bg-white dark:bg-gray-800 shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm">
                
                @foreach ($timezones as $tz => $label)
                    <button type="button"
                            @click="timezone = '{{ $tz }}'; open = false; $dispatch('timezone-changed', { timezone: '{{ $tz }}' })"
                            class="w-full text-right px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"
                            :class="{ 'bg-blue-100 dark:bg-blue-900 text-blue-900 dark:text-blue-100': timezone === '{{ $tz }}' }">
                        {{ $label }}
                    </button>
                @endforeach
            </div>
        </div>
    </div>
    
    <input type="hidden" name="timezone" x-model="timezone">
</div>

<script>
    document.addEventListener('timezone-changed', function(e) {
        // إرسال طلب AJAX لتحديث المنطقة الزمنية في الجلسة
        fetch('/update-timezone', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            body: JSON.stringify({
                timezone: e.detail.timezone
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // تحديث الصفحة لتطبيق المنطقة الزمنية الجديدة
                window.location.reload();
            }
        });
    });
</script>