@extends('examples.modern-layout-v2')
@section('title', __('messages.message_page.create_title'))
@section('messages', 'bg-blue-50 text-blue-700')

@section('content')
<div x-data="messageFormData()" x-init="init()">
    <!-- Page Header -->
    <div class="mb-8">
        <div class="flex items-center justify-between">
            <div class="@if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                <h2 class="text-3xl font-bold text-gray-900 mb-2">{{__('messages.message_page.create_title')}}</h2>
                <p class="text-gray-600">{{__('messages.message_page.create_description')}}</p>
            </div>
            <a href="{{ \App\Helpers\UrlHelper::routeWithCityBuilding('messages.index') }}" class="inline-flex items-center px-5 py-2.5 text-sm font-semibold text-gray-700 bg-white border-2 border-gray-200 rounded-xl hover:bg-blue-50 hover:border-blue-300 hover:text-blue-700 transition-all duration-200 shadow-sm hover:shadow-md">
                <span class="material-icons @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') ml-2 @else mr-2 @endif text-base">arrow_back</span>
                {{__('messages.message_page.go_back')}}
            </a>
        </div>
    </div>

    <!-- Form Card -->
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 hover:shadow-md transition-shadow duration-200 relative" :class="{ 'opacity-50 pointer-events-none': loading }">
        <!-- Loading Overlay -->
        <div x-show="loading" x-cloak class="absolute inset-0 bg-white/80 backdrop-blur-sm rounded-2xl flex items-center justify-center z-50">
            <div class="flex flex-col items-center">
                <div class="animate-spin rounded-full h-12 w-12 border-4 border-blue-200 border-t-blue-600 mb-4"></div>
                <p class="text-gray-700 font-medium">{{__('messages.common.saving')}}</p>
            </div>
        </div>

        <form id="message_form" method="post" action="{{ \App\Helpers\UrlHelper::routeWithCityBuilding('messages.store') }}" class="space-y-6" @submit="loading = true">
            @if(\App\Helpers\ServerHelper::isApiServer() && request()->query('city'))
                <input type="hidden" name="city" value="{{ request()->query('city') }}">
            @endif
            @if(request()->query('building'))
                <input type="hidden" name="building" value="{{ request()->query('building') }}">
            @endif
            @csrf
            
            @if($errors->any())
                <div class="bg-red-50 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') border-r-4 @else border-l-4 @endif border-red-500 rounded-xl p-5 shadow-sm">
                    <div class="flex items-start @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') flex-row-reverse @endif">
                        <div class="flex-shrink-0">
                            <span class="material-icons text-red-600 text-2xl">error_outline</span>
                        </div>
                        <div class="@if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') mr-4 @else ml-4 @endif flex-1">
                            <h5 class="text-red-800 font-semibold text-base mb-2 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">{{__('messages.errors.validation_errors')}}</h5>
                            <ul class="list-disc @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') list-inside text-right @else list-inside text-left @endif text-red-700 text-sm space-y-1">
                                @foreach($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                </div>
            @endif

            <!-- Message Text - Three Language Fields -->
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                    {{__('messages.message_page.message_text')}}
                </label>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <!-- Kurdish (Required) -->
                    <div>
                        <label for="message_text_ku" class="block text-xs font-medium text-gray-600 mb-1 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                            {{__('messages.settings.language_kurdish')}} <span class="text-red-500">*</span>
                        </label>
                        <textarea 
                            id="message_text_ku" 
                            name="message_text_ku" 
                            rows="4"
                            class="block w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors @error('message_text_ku') border-red-500 @enderror @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif"
                            placeholder="{{__('messages.message_page.enter_message_text')}} ({{__('messages.settings.language_kurdish')}})"
                            required
                        >{{ old('message_text_ku') }}</textarea>
                        @error('message_text_ku')
                            <p class="mt-1 text-xs text-red-600 flex items-center @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') flex-row-reverse @endif">
                                <span class="material-icons text-sm @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') ml-1 @else mr-1 @endif">error_outline</span>
                                {{ $message }}
                            </p>
                        @enderror
                    </div>
                    
                    <!-- Arabic (Optional) -->
                    <div>
                        <label for="message_text_iq" class="block text-xs font-medium text-gray-600 mb-1 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                            {{__('messages.settings.language_arabic')}}
                        </label>
                        <textarea 
                            id="message_text_iq" 
                            name="message_text_iq" 
                            rows="4"
                            class="block w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors @error('message_text_iq') border-red-500 @enderror @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif"
                            placeholder="{{__('messages.message_page.enter_message_text')}} ({{__('messages.settings.language_arabic')}})"
                        >{{ old('message_text_iq') }}</textarea>
                        @error('message_text_iq')
                            <p class="mt-1 text-xs text-red-600 flex items-center @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') flex-row-reverse @endif">
                                <span class="material-icons text-sm @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') ml-1 @else mr-1 @endif">error_outline</span>
                                {{ $message }}
                            </p>
                        @enderror
                    </div>
                    
                    <!-- English (Optional) -->
                    <div>
                        <label for="message_text_en" class="block text-xs font-medium text-gray-600 mb-1 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                            {{__('messages.settings.language_english')}}
                        </label>
                        <textarea 
                            id="message_text_en" 
                            name="message_text_en" 
                            rows="4"
                            class="block w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors @error('message_text_en') border-red-500 @enderror @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif"
                            placeholder="{{__('messages.message_page.enter_message_text')}} ({{__('messages.settings.language_english')}})"
                        >{{ old('message_text_en') }}</textarea>
                        @error('message_text_en')
                            <p class="mt-1 text-xs text-red-600 flex items-center @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') flex-row-reverse @endif">
                                <span class="material-icons text-sm @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') ml-1 @else mr-1 @endif">error_outline</span>
                                {{ $message }}
                            </p>
                        @enderror
                    </div>
                </div>
            </div>

            <!-- Message Type and Priority Level -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Message Type -->
                <div>
                    <label for="message_type" class="block text-sm font-medium text-gray-700 mb-2 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                        {{__('messages.menu.message')}} {{__('messages.common.type')}}
                    </label>
                    <div class="relative">
                        <select 
                            id="message_type" 
                            name="message_type" 
                            class="block w-full px-4 py-2.5 pr-10 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-300 transition-all duration-200 bg-white appearance-none cursor-pointer hover:bg-gray-50 hover:border-blue-300 shadow-sm hover:shadow-md @error('message_type') border-red-500 @enderror @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif"
                            required
                        >
                            <option value="">{{__('messages.message_types.select_message_type')}}</option>
                            <option value="announcement" {{ old('message_type') == 'announcement' ? 'selected' : '' }}>{{__('messages.message_types.announcement')}}</option>
                            <option value="welcome" {{ old('message_type') == 'welcome' ? 'selected' : '' }}>{{__('messages.message_types.welcome')}}</option>
                            <option value="maintenance" {{ old('message_type') == 'maintenance' ? 'selected' : '' }}>{{__('messages.message_types.maintenance')}}</option>
                            <option value="notice" {{ old('message_type') == 'notice' ? 'selected' : '' }}>{{__('messages.message_types.notice')}}</option>
                            <option value="system" {{ old('message_type') == 'system' ? 'selected' : '' }}>{{__('messages.message_types.system')}}</option>
                        </select>
                    </div>
                    <div class="message_type">
                        @error('message_type')
                            <p class="mt-2 text-sm text-red-600 flex items-center">
                                <span class="material-icons text-base @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') ml-1 @else mr-1 @endif">error_outline</span>
                                {{ $message }}
                            </p>
                        @enderror
                    </div>
                </div>

                <!-- Priority Level -->
                <div>
                    <label for="priority_level" class="block text-sm font-medium text-gray-700 mb-2 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                        {{__('messages.priority_levels.select_priority_level')}}
                    </label>
                    <div class="relative">
                        <select 
                            id="priority_level" 
                            name="priority_level" 
                            x-on:change="updateFormFields()"
                            class="block w-full px-4 py-2.5 pr-10 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-300 transition-all duration-200 bg-white appearance-none cursor-pointer hover:bg-gray-50 hover:border-blue-300 shadow-sm hover:shadow-md @error('priority_level') border-red-500 @enderror @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif"
                            required
                        >
                            <option value="">{{__('messages.priority_levels.select_priority_level')}}</option>
                            <option value="1" {{ old('priority_level') == '1' ? 'selected' : '' }}>{{__('messages.priority_levels.global_highest')}}</option>
                            <option value="2" {{ old('priority_level') == '2' ? 'selected' : '' }}>{{__('messages.priority_levels.building_level')}}</option>
                            <option value="3" {{ old('priority_level') == '3' ? 'selected' : '' }}>{{__('messages.priority_levels.service_level')}}</option>
                        </select>
                    </div>
                    <div class="priority_level">
                        @error('priority_level')
                            <p class="mt-2 text-sm text-red-600 flex items-center">
                                <span class="material-icons text-base @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') ml-1 @else mr-1 @endif">error_outline</span>
                                {{ $message }}
                            </p>
                        @enderror
                    </div>
                </div>
            </div>

            <!-- Global Override Checkbox -->
            <div class="flex items-center p-4 bg-white rounded-xl border border-gray-200 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') flex-row-reverse @endif" dir="ltr">
                <input 
                    type="checkbox" 
                    id="is_global_override" 
                    name="is_global_override" 
                    value="1" 
                    x-on:change="toggleBuildingSelection()"
                    class="w-5 h-5 text-blue-600 border-gray-300 rounded focus:ring-blue-500 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') ml-3 @else mr-3 @endif"
                    {{ old('is_global_override') ? 'checked' : '' }}
                >
                <label for="is_global_override" class="text-sm font-medium text-gray-700 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                    {{__('messages.message_page.global_override')}}
                </label>
            </div>

            <!-- Building and Service Selection -->
            <div id="building-selection" class="grid grid-cols-1 md:grid-cols-2 gap-6" dir="@if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') rtl @else ltr @endif">
                <!-- Building -->
                <div>
                    <label for="location_id" class="block text-sm font-medium text-gray-700 mb-2 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                        {{__('messages.message_page.building')}}
                    </label>
                    <div class="relative">
                        <select 
                            id="location_id" 
                            name="location_id" 
                            class="block w-full px-4 py-2.5 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') pl-10 pr-4 @else pr-10 pl-4 @endif border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-300 transition-all duration-200 bg-white appearance-none cursor-pointer hover:bg-gray-50 hover:border-blue-300 shadow-sm hover:shadow-md @error('location_id') border-red-500 @enderror @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif"
                        >
                            <option value="">{{__('messages.message_page.select_building')}}</option>
                            @foreach($locations as $location)
                                <option value="{{ $location->id }}" {{ old('location_id') == $location->id ? 'selected' : '' }}>
                                    {{ $location->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="location_id">
                        @error('location_id')
                            <p class="mt-2 text-sm text-red-600 flex items-center @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') flex-row-reverse @endif">
                                <span class="material-icons text-base @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') ml-1 @else mr-1 @endif">error_outline</span>
                                {{ $message }}
                            </p>
                        @enderror
                    </div>
                </div>

                <!-- Service -->
                <div>
                    <label for="service_id" class="block text-sm font-medium text-gray-700 mb-2 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                        {{__('messages.message_page.service')}}
                    </label>
                    <div class="relative">
                        <select 
                            id="service_id" 
                            name="service_id" 
                            class="block w-full px-4 py-2.5 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') pl-10 pr-4 @else pr-10 pl-4 @endif border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-300 transition-all duration-200 bg-white appearance-none cursor-pointer hover:bg-gray-50 hover:border-blue-300 shadow-sm hover:shadow-md @error('service_id') border-red-500 @enderror @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif"
                        >
                            <option value="">{{__('messages.message_page.all_services')}}</option>
                            @foreach($services as $service)
                                <option value="{{ $service->id }}" data-location-id="{{ $service->location_id }}" {{ old('service_id') == $service->id ? 'selected' : '' }}>
                                    {{ $service->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="service_id">
                        @error('service_id')
                            <p class="mt-2 text-sm text-red-600 flex items-center @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') flex-row-reverse @endif">
                                <span class="material-icons text-base @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') ml-1 @else mr-1 @endif">error_outline</span>
                                {{ $message }}
                            </p>
                        @enderror
                    </div>
                </div>
            </div>

            <!-- Active Checkbox -->
            <div class="flex items-center p-4 bg-white rounded-xl border border-gray-200 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') flex-row-reverse @endif" dir="ltr">
                <input 
                    type="checkbox" 
                    id="is_active" 
                    name="is_active" 
                    value="1" 
                    class="w-5 h-5 text-blue-600 border-gray-300 rounded focus:ring-blue-500 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') ml-3 @else mr-3 @endif"
                    {{ old('is_active', true) ? 'checked' : '' }}
                >
                <label for="is_active" class="text-sm font-medium text-gray-700 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                    {{__('messages.message_page.active_message')}}
                </label>
            </div>

            <!-- Show on Missed Only Checkbox -->
            <div class="flex items-start p-4 bg-amber-50/30 rounded-xl border border-amber-200/50 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') flex-row-reverse @endif" dir="ltr">
                <input 
                    type="checkbox" 
                    id="show_on_missed_only" 
                    name="show_on_missed_only" 
                    value="1" 
                    class="w-5 h-5 text-amber-600 border-gray-300 rounded focus:ring-amber-500 mt-0.5 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') ml-3 @else mr-3 @endif"
                    {{ old('show_on_missed_only') ? 'checked' : '' }}
                >
                <div class="@if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') mr-3 text-right @else ml-3 text-left @endif">
                    <label for="show_on_missed_only" class="text-sm font-medium text-gray-700 block">
                        {{__('messages.message_page.show_on_missed_only')}}
                    </label>
                    <p class="text-xs text-gray-500 mt-1">
                        {{__('messages.message_page.show_on_missed_only_description')}}
                    </p>
                </div>
            </div>

            <!-- Show on Missed Page Checkbox -->
            <div class="flex items-start p-4 bg-blue-50/30 rounded-xl border border-blue-200/50 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') flex-row-reverse @endif" dir="ltr">
                <input 
                    type="checkbox" 
                    id="show_on_missed_page" 
                    name="show_on_missed_page" 
                    value="1" 
                    class="w-5 h-5 text-blue-600 border-gray-300 rounded focus:ring-blue-500 mt-0.5 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') ml-3 @else mr-3 @endif"
                    {{ old('show_on_missed_page', true) ? 'checked' : '' }}
                >
                <div class="@if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') mr-3 text-right @else ml-3 text-left @endif">
                    <label for="show_on_missed_page" class="text-sm font-medium text-gray-700 block">
                        {{__('messages.message_page.show_on_missed_page')}}
                    </label>
                    <p class="text-xs text-gray-500 mt-1">
                        {{__('messages.message_page.show_on_missed_page_description')}}
                    </p>
                </div>
            </div>

            <!-- Submit Button -->
            <div class="flex items-center @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') justify-start @else justify-end @endif pt-4 border-t border-gray-100">
                <button 
                    type="submit" 
                    :disabled="loading"
                    class="inline-flex items-center px-8 py-3.5 bg-gradient-to-r from-blue-600 to-blue-500 text-white font-semibold rounded-xl hover:from-blue-700 hover:to-blue-600 transition-all duration-300 shadow-lg hover:shadow-xl transform hover:scale-105 active:scale-95 border border-blue-400/20 disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none" dir="ltr"
                >
                    <span x-show="!loading" class="material-icons mr-2">send</span>
                    <span x-show="loading" class="animate-spin rounded-full h-5 w-5 border-2 border-white border-t-transparent mr-2"></span>
                    <span x-text="loading ? '{{__('messages.common.saving')}}...' : '{{__('messages.message_page.submit')}}'"></span>
                </button>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
function messageFormData() {
    return {
        loading: false,
        allServices: [], // Store all services for filtering
        init() {
            // Store all service options for filtering
            const serviceSelect = document.getElementById('service_id');
            if (serviceSelect) {
                this.allServices = Array.from(serviceSelect.options).map(option => ({
                    value: option.value,
                    text: option.text,
                    locationId: option.getAttribute('data-location-id') || null,
                    element: option.cloneNode(true)
                }));
            }
            
            // Add event listener for building/location change
            const locationSelect = document.getElementById('location_id');
            if (locationSelect) {
                locationSelect.addEventListener('change', () => this.filterServicesByLocation());
            }
            
            // Initial filter
            this.filterServicesByLocation();
            this.updateFormFields();
        },
        filterServicesByLocation() {
            const locationSelect = document.getElementById('location_id');
            const serviceSelect = document.getElementById('service_id');
            
            if (!locationSelect || !serviceSelect || this.allServices.length === 0) return;
            
            const selectedLocationId = locationSelect.value;
            const currentServiceValue = serviceSelect.value;
            
            // Get "All Services" text from the first option (empty value)
            const allServicesText = this.allServices.find(s => !s.value)?.text || 'All Services';
            
            // Clear existing options
            serviceSelect.innerHTML = '';
            
            // Add "All Services" option
            const allServicesOption = document.createElement('option');
            allServicesOption.value = '';
            allServicesOption.textContent = allServicesText;
            serviceSelect.appendChild(allServicesOption);
            
            // Filter and add services based on selected location
            this.allServices.forEach(service => {
                // Skip the "All Services" option (empty value)
                if (!service.value) return;
                
                // If no location selected, show all services
                // If location selected, only show services for that location
                // Compare as strings to handle both string and number IDs
                if (!selectedLocationId || String(service.locationId) === String(selectedLocationId)) {
                    const option = document.createElement('option');
                    option.value = service.value;
                    option.textContent = service.text;
                    option.setAttribute('data-location-id', service.locationId || '');
                    if (service.element.selected) {
                        option.selected = true;
                    }
                    serviceSelect.appendChild(option);
                }
            });
            
            // Restore previously selected service if it's still in the filtered list
            if (currentServiceValue) {
                const optionExists = Array.from(serviceSelect.options).some(opt => opt.value === currentServiceValue);
                if (optionExists) {
                    serviceSelect.value = currentServiceValue;
                } else {
                    serviceSelect.value = ''; // Clear if service is not in filtered list
                }
            }
        },
        updateFormFields() {
            const priorityLevel = document.getElementById('priority_level')?.value;
            const isGlobalOverride = document.getElementById('is_global_override');
            const buildingSelection = document.getElementById('building-selection');
            const locationSelect = document.getElementById('location_id');
            const serviceSelect = document.getElementById('service_id');
            
            if (!priorityLevel) return;
            
            // Reset all fields first
            if (isGlobalOverride) {
                isGlobalOverride.disabled = false;
                isGlobalOverride.required = false;
            }
            if (locationSelect) {
                locationSelect.disabled = false;
                locationSelect.required = false;
            }
            if (serviceSelect) {
                serviceSelect.disabled = false;
                serviceSelect.required = false;
                serviceSelect.style.opacity = '1';
                serviceSelect.style.pointerEvents = 'auto';
            }
            if (buildingSelection) {
                buildingSelection.style.display = 'grid';
            }
            
            if (priorityLevel === '1') {
                // Global Priority
                if (isGlobalOverride) {
                    isGlobalOverride.checked = true;
                    isGlobalOverride.disabled = true;
                }
                if (locationSelect) locationSelect.disabled = true;
                if (serviceSelect) serviceSelect.disabled = true;
                if (buildingSelection) buildingSelection.style.display = 'none';
                if (locationSelect) locationSelect.value = '';
                if (serviceSelect) serviceSelect.value = '';
            } else if (priorityLevel === '2') {
                // Building Priority
                if (isGlobalOverride) {
                    isGlobalOverride.checked = false;
                    isGlobalOverride.disabled = true;
                }
                if (locationSelect) {
                    locationSelect.disabled = false;
                    locationSelect.required = true;
                }
                if (serviceSelect) {
                    serviceSelect.disabled = true;
                    serviceSelect.value = '';
                    serviceSelect.style.opacity = '0.5';
                    serviceSelect.style.pointerEvents = 'none';
                }
            } else if (priorityLevel === '3') {
                // Service Priority
                if (isGlobalOverride) {
                    isGlobalOverride.checked = false;
                    isGlobalOverride.disabled = true;
                }
                if (locationSelect) {
                    locationSelect.disabled = false;
                    locationSelect.required = true;
                }
                if (serviceSelect) {
                    serviceSelect.disabled = false;
                    serviceSelect.required = true;
                    serviceSelect.style.opacity = '1';
                    serviceSelect.style.pointerEvents = 'auto';
                }
                // Filter services when switching to service level
                this.filterServicesByLocation();
            }
        },
        toggleBuildingSelection() {
            const isGlobalOverride = document.getElementById('is_global_override')?.checked;
            const buildingSelection = document.getElementById('building-selection');
            
            if (buildingSelection) {
                if (isGlobalOverride) {
                    buildingSelection.style.display = 'none';
                    const locationSelect = document.getElementById('location_id');
                    const serviceSelect = document.getElementById('service_id');
                    if (locationSelect) locationSelect.value = '';
                    if (serviceSelect) serviceSelect.value = '';
                } else {
                    buildingSelection.style.display = 'grid';
                }
            }
        }
    }
}
</script>
@endpush
@endsection