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

@section('content')
<div x-data="serviceFormData()" 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.service_page.add service')}}</h2>
                <p class="text-gray-600">{{__('messages.service_page.add_service_description')}}</p>
            </div>
            <a href="{{ \App\Helpers\UrlHelper::routeWithCityBuilding('services.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="service_form" method="post" action="{{ \App\Helpers\UrlHelper::routeWithCityBuilding('services.store') }}" class="space-y-8" @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

            <!-- Basic Service Information -->
            <div class="space-y-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-4 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">{{__('messages.service_page.basic_information')}}</h3>
                
                @if(isset($currentBuildingId) && ($currentBuildingId === 'all' || $currentBuildingId === '' || $currentBuildingId === null))
                <!-- Building Selection (Only shown when 'All Buildings' is selected) -->
                <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.menu.locations')}} <span class="text-red-500">*</span>
                    </label>
                    <select 
                        id="location_id" 
                        name="location_id" 
                        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('location_id') border-red-500 @enderror @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif"
                        required
                    >
                        <option value="">{{__('messages.locations.select_location') ?? 'Select Building'}}</option>
                        @foreach($locations as $location)
                            <option value="{{ $location->id }}" {{ old('location_id') == $location->id ? 'selected' : '' }}>
                                {{ $location->translated_name ?? $location->name }}
                            </option>
                        @endforeach
                    </select>
                    @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>
                @endif

                <!-- Service Name -->
                <div>
                    <label for="name" 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.service_page.service name')}} <span class="text-red-500">*</span>
                    </label>
                    <input 
                        type="text" 
                        id="name" 
                        name="name" 
                        value="{{ old('name') }}"
                        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('name') border-red-500 @enderror @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif"
                        placeholder="{{__('messages.service_page.enter_service_name')}}"
                        required
                    >
                    @error('name')
                        <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>

                <!-- Letter and Starting Number -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label for="letter" 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.service_page.letter')}} <span class="text-red-500">*</span>
                        </label>
                        <input 
                            type="text" 
                            id="letter" 
                            name="letter" 
                            value="{{ old('letter') }}"
                            maxlength="2"
                            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('letter') border-red-500 @enderror @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif"
                            placeholder="{{__('messages.service_page.enter_letter')}}"
                            required
                        >
                        @error('letter')
                            <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>
                        <label for="start_number" 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.service_page.starting number')}} <span class="text-red-500">*</span>
                        </label>
                        <input 
                            type="number" 
                            id="start_number" 
                            name="start_number" 
                            value="{{ old('start_number') }}"
                            min="0"
                            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('start_number') border-red-500 @enderror @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif"
                            placeholder="{{__('messages.service_page.enter_starting_number')}}"
                            required
                        >
                        @error('start_number')
                            <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>

            <!-- Token Configuration -->
            <div class="space-y-6 pt-6 border-t border-gray-200">
                <h3 class="text-lg font-semibold text-gray-900 mb-4 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">{{__('messages.service_page.token_configuration')}}</h3>
                
                <!-- Name Configuration -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label for="ask_name" 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.service_page.Ask Name For Token')}} <span class="text-red-500">*</span>
                        </label>
                        <select 
                            id="ask_name" 
                            name="ask_name" 
                            onchange="enableRequired()"
                            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('ask_name') border-red-500 @enderror @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif"
                            required
                        >
                            <option value="0" selected>{{__('messages.common.no')}}</option>
                            <option value="1">{{__('messages.common.yes')}}</option>
                        </select>
                        @error('ask_name')
                            <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>
                        <label for="name_required" 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.service_page.Name is required')}}
                        </label>
                        <select 
                            id="name_required" 
                            name="name_required" 
                            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('name_required') border-red-500 @enderror @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif"
                        >
                            <option value="0" selected>{{__('messages.common.no')}}</option>
                            <option value="1">{{__('messages.common.yes')}}</option>
                        </select>
                        @error('name_required')
                            <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>

                <!-- Email Configuration -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label for="ask_email" 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.service_page.Ask Email For Token')}} <span class="text-red-500">*</span>
                        </label>
                        <select 
                            id="ask_email" 
                            name="ask_email" 
                            onchange="enableRequired()"
                            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('ask_email') border-red-500 @enderror @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif"
                            required
                        >
                            <option value="0" selected>{{__('messages.common.no')}}</option>
                            <option value="1">{{__('messages.common.yes')}}</option>
                        </select>
                        @error('ask_email')
                            <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>
                        <label for="email_required" 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.service_page.Email is required')}}
                        </label>
                        <select 
                            id="email_required" 
                            name="email_required" 
                            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('email_required') border-red-500 @enderror @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif"
                        >
                            <option value="0" selected>{{__('messages.common.no')}}</option>
                            <option value="1">{{__('messages.common.yes')}}</option>
                        </select>
                        @error('email_required')
                            <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>

                <!-- Phone Configuration -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label for="ask_phone" 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.service_page.Ask Phone For Token')}} <span class="text-red-500">*</span>
                        </label>
                        <select 
                            id="ask_phone" 
                            name="ask_phone" 
                            onchange="enableRequired()"
                            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('ask_phone') border-red-500 @enderror @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif"
                            required
                        >
                            <option value="0" selected>{{__('messages.common.no')}}</option>
                            <option value="1">{{__('messages.common.yes')}}</option>
                        </select>
                        @error('ask_phone')
                            <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>
                        <label for="phone_required" 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.service_page.Phone is required')}}
                        </label>
                        <select 
                            id="phone_required" 
                            name="phone_required" 
                            onchange="enableOrDisableSms()"
                            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('phone_required') border-red-500 @enderror @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif"
                        >
                            <option value="0" selected>{{__('messages.common.no')}}</option>
                            <option value="1">{{__('messages.common.yes')}}</option>
                        </select>
                        @error('phone_required')
                            <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>

                @if($settings->sms_enabled)
                <div>
                    <label for="sms" 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.settings.SMS Enabled')}}
                    </label>
                    <select 
                        id="sms" 
                        name="sms" 
                        onchange="changeSMS()"
                        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('sms') border-red-500 @enderror @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif"
                    >
                        <option value="0" selected>{{__('messages.common.no')}}</option>
                        <option value="1">{{__('messages.common.yes')}}</option>
                    </select>
                    @error('sms')
                        <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>
                @endif
            </div>

            <!-- SMS Settings -->
            @if($settings->sms_enabled)
            <div id="sms_tab" class="space-y-6 pt-6 border-t border-gray-200" style="display: none;">
                <h3 class="text-lg font-semibold text-gray-900 mb-4 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">{{__('messages.settings.sms_settings')}}</h3>
                
                <!-- Optin and Call Messages -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label for="optin_message" 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.service_page.Optin Message')}}
                        </label>
                        <select 
                            id="optin_message" 
                            name="optin_message" 
                            onchange="changeOptinMessage()"
                            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"
                        >
                            <option value="0" selected>{{__('messages.common.no')}}</option>
                            <option value="1">{{__('messages.common.yes')}}</option>
                        </select>
                    </div>

                    <div>
                        <label for="call_message" 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.service_page.Call Message')}}
                        </label>
                        <select 
                            id="call_message" 
                            name="call_message" 
                            onchange="changeCallMessage()"
                            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"
                        >
                            <option value="0" selected>{{__('messages.common.no')}}</option>
                            <option value="1">{{__('messages.common.yes')}}</option>
                        </select>
                    </div>
                </div>

                <!-- Optin and Call Message Formats -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div id="optin_message_tab" style="display: none;">
                        <label for="optin_message_format" 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.service_page.Optin Message Format')}}
                        </label>
                        <textarea 
                            id="optin_message_format" 
                            name="optin_message_format" 
                            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 resize-none @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif"
                        >Your token number is '$token_number$'. You are #$position$ in the '$service_name$' queue</textarea>
                    </div>

                    <div id="call_message_tab" style="display: none;">
                        <label for="call_message_format" 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.service_page.Call Message Format')}}
                        </label>
                        <textarea 
                            id="call_message_format" 
                            name="call_message_format" 
                            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 resize-none @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif"
                        >Your token number '$token_number$' is next to see to '$service_name$' queue</textarea>
                    </div>
                </div>

                <!-- No Show and Completed Messages -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label for="noshow_message" 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.service_page.No Show Message')}}
                        </label>
                        <select 
                            id="noshow_message" 
                            name="noshow_message" 
                            onchange="changeNoshowMessage()"
                            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"
                        >
                            <option value="0" selected>{{__('messages.common.no')}}</option>
                            <option value="1">{{__('messages.common.yes')}}</option>
                        </select>
                    </div>

                    <div>
                        <label for="completed_message" 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.service_page.Service Completed Message')}}
                        </label>
                        <select 
                            id="completed_message" 
                            name="completed_message" 
                            onchange="changeCompletedMessage()"
                            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"
                        >
                            <option value="0" selected>{{__('messages.common.no')}}</option>
                            <option value="1">{{__('messages.common.yes')}}</option>
                        </select>
                    </div>
                </div>

                <!-- No Show and Completed Message Formats -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div id="noshow_message_tab" style="display: none;">
                        <label for="noshow_message_format" 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.service_page.No Show Message Format')}}
                        </label>
                        <textarea 
                            id="noshow_message_format" 
                            name="noshow_message_format" 
                            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 resize-none @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif"
                        >Your token number `$token_number$` is marked as no show</textarea>
                    </div>

                    <div id="completed_message_tab" style="display: none;">
                        <label for="completed_message_format" 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.service_page.Service Completed Message Format')}}
                        </label>
                        <textarea 
                            id="completed_message_format" 
                            name="completed_message_format" 
                            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 resize-none @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif"
                        >Thank you for using our service, Have a good day</textarea>
                    </div>
                </div>

                <!-- Status Message -->
                <div>
                    <label for="status_message" 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.service_page.Status Message')}}
                    </label>
                    <select 
                        id="status_message" 
                        name="status_message" 
                        onchange="changeStatusMessage()"
                        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"
                    >
                        <option value="0" selected>{{__('messages.common.no')}}</option>
                        <option value="1">{{__('messages.common.yes')}}</option>
                    </select>
                </div>

                <!-- Status Message Configuration -->
                <div id="status_message_tab" style="display: none;" class="space-y-6">
                    <div>
                        <label for="status_message_positions" 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.service_page.Send status message when position is')}}
                        </label>
                        <select 
                            id="status_message_positions" 
                            name="status_message_positions[]" 
                            multiple
                            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"
                        >
                            <option value="3" selected>3</option>
                            <option value="5">5</option>
                            <option value="10">10</option>
                            <option value="15">15</option>
                            <option value="20">20</option>
                        </select>
                    </div>

                    <div>
                        <label for="status_message_format" 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.service_page.Status Message Format')}}
                        </label>
                        <textarea 
                            id="status_message_format" 
                            name="status_message_format" 
                            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 resize-none @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif"
                        >Your token number `$token_number$` is at #$position$ in the `$service_name$` queue</textarea>
                    </div>
                </div>

                <!-- Message Keywords -->
                <div class="bg-gray-50 rounded-xl p-4 border border-gray-200">
                    <h4 class="text-sm font-semibold text-gray-900 mb-3 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">{{__('messages.service_page.Message Keywords')}}</h4>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm">
                        <div class="flex items-center @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') flex-row-reverse @endif">
                            <code class="bg-white px-2 py-1 rounded border border-gray-300 font-mono text-blue-600">$token_number$</code>
                            <span class="@if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') mr-2 @else ml-2 @endif text-gray-700">{{__('messages.service_page.Token Number')}}</span>
                        </div>
                        <div class="flex items-center @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') flex-row-reverse @endif">
                            <code class="bg-white px-2 py-1 rounded border border-gray-300 font-mono text-blue-600">$service_name$</code>
                            <span class="@if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') mr-2 @else ml-2 @endif text-gray-700">{{__('messages.service_page.Name of the service from which user has taken the token')}}</span>
                        </div>
                        <div class="flex items-center @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') flex-row-reverse @endif">
                            <code class="bg-white px-2 py-1 rounded border border-gray-300 font-mono text-blue-600">$date$</code>
                            <span class="@if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') mr-2 @else ml-2 @endif text-gray-700">{{__('messages.service_page.Token Date')}}</span>
                        </div>
                        <div class="flex items-center @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') flex-row-reverse @endif">
                            <code class="bg-white px-2 py-1 rounded border border-gray-300 font-mono text-blue-600">$counter_name$</code>
                            <span class="@if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') mr-2 @else ml-2 @endif text-gray-700">{{__('messages.service_page.Name of the counter')}}</span>
                        </div>
                        <div class="flex items-center @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') flex-row-reverse @endif">
                            <code class="bg-white px-2 py-1 rounded border border-gray-300 font-mono text-blue-600">$position$</code>
                            <span class="@if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') mr-2 @else ml-2 @endif text-gray-700">{{__('messages.service_page.Current position of user in the queue')}}</span>
                        </div>
                    </div>
                </div>
            </div>
            @endif

            <!-- Linked Service Configuration -->
            <div class="space-y-6 pt-6 border-t border-gray-200">
                <h3 class="text-lg font-semibold text-gray-900 mb-4 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">{{__('messages.service_page.Linked Service Configuration')}}</h3>
                
                <div>
                    <label for="linked_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.service_page.Linked Service')}}
                    </label>
                    <select 
                        id="linked_service_id" 
                        name="linked_service_id" 
                        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('linked_service_id') border-red-500 @enderror @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif"
                    >
                        <option value="">{{__('messages.service_page.Select Linked Service')}}</option>
                        @foreach($services as $service)
                            <option value="{{ $service->id }}" {{ old('linked_service_id') == $service->id ? 'selected' : '' }}>
                                {{ $service->name }} ({{ $service->letter }})
                            </option>
                        @endforeach
                    </select>
                    @error('linked_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>

            <!-- Submit Button -->
            <div class="flex items-center @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') justify-start @else justify-end @endif pt-6 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.common.submit')}}'"></span>
                </button>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script src="{{asset('app-assets/vendors/jquery-validation/jquery.validate.min.js')}}"></script>
<script>
function serviceFormData() {
    return {
        loading: false,
        init() {
            // Initialize hidden tabs
            $('#sms_tab,#optin_message_tab,#call_message_tab,#noshow_message_tab,#completed_message_tab,#status_message_tab').hide();
            enableRequired();
            enableOrDisableSms();
            
            // Initialize form validation
            $('#service_form').validate({
                ignore: [],
                rules: {
                    name: {
                        required: true,
                    },
                    letter: {
                        required: true,
                        maxlength: 2
                    },
                    start_number: {
                        required: true,
                        min: 0
                    },
                    linked_service_id: {
                        required: false
                    },
                    call_message_format: {
                        required: function(element) {
                            return $("#call_message").val() == "1";
                        },
                    },
                    optin_message_format: {
                        required: function(element) {
                            return $("#optin_message").val() == "1";
                        },
                    },
                    noshow_message_format: {
                        required: function(element) {
                            return $("#noshow_message").val() == "1";
                        },
                    },
                    completed_message_format: {
                        required: function(element) {
                            return $("#completed_message").val() == "1";
                        },
                    },
                    'status_message_positions[]': {
                        required: function(element) {
                            return $("#status_message").val() == "1";
                        },
                    },
                    status_message_format: {
                        required: function(element) {
                            return $("#status_message").val() == "1";
                        },
                    }
                },
                errorElement: 'div',
                errorPlacement: function(error, element) {
                    error.addClass('mt-2 text-sm text-red-600');
                    error.insertAfter(element);
                }
            });
        }
    }
}

function changeSMS() {
    if ($('#sms').val() == 1) {
        $('#sms_tab').slideDown();
    } else {
        $('#sms_tab').slideUp();
    }
}

function changeOptinMessage() {
    if ($('#optin_message').val() == 1) {
        $('#optin_message_tab').slideDown();
    } else {
        $('#optin_message_tab').slideUp();
    }
}

function changeCallMessage() {
    if ($('#call_message').val() == 1) {
        $('#call_message_tab').slideDown();
    } else {
        $('#call_message_tab').slideUp();
    }
}

function changeNoshowMessage() {
    if ($('#noshow_message').val() == 1) {
        $('#noshow_message_tab').slideDown();
    } else {
        $('#noshow_message_tab').slideUp();
    }
}

function changeCompletedMessage() {
    if ($('#completed_message').val() == 1) {
        $('#completed_message_tab').slideDown();
    } else {
        $('#completed_message_tab').slideUp();
    }
}

function changeStatusMessage() {
    if ($('#status_message').val() == 1) {
        $('#status_message_tab').slideDown();
    } else {
        $('#status_message_tab').slideUp();
    }
}

function enableRequired() {
    if ($('#ask_name').val() == 1) {
        $('#name_required').prop('disabled', false);
    } else {
        $('#name_required').val(0);
        $('#name_required').prop('disabled', true);
    }
    if ($('#ask_email').val() == 1) {
        $('#email_required').prop('disabled', false);
    } else {
        $('#email_required').val(0);
        $('#email_required').prop('disabled', true);
    }
    if ($('#ask_phone').val() == 1) {
        $('#phone_required,#sms').prop('disabled', false);
    } else {
        $('#sms,#phone_required').val(0);
        $('#phone_required,#sms').prop('disabled', true);
        $('#sms_tab').slideUp();
    }
}

function enableOrDisableSms() {
    if ($('#phone_required').val() == 1) {
        $('#sms').prop('disabled', false);
    } else {
        $('#sms').prop('disabled', true);
        $('#sms').val(0);
        $('#sms_tab').slideUp();
    }
}
</script>
@endpush
@endsection