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

@section('content')
<div x-data="locationFormData()" 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.location_page.add location')}}</h2>
                <p class="text-gray-600">{{__('messages.location_page.add_location_description')}}</p>
            </div>
            <a href="{{ \App\Helpers\UrlHelper::routeWithCityBuilding('locations.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="location_form" method="post" action="{{ \App\Helpers\UrlHelper::routeWithCityBuilding('locations.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

            <!-- Name (Default) -->
            <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.location_page.name')}} ({{__('messages.common.default')}}) <span class="text-red-500">*</span>
                </label>
                <div class="relative">
                    <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.location_page.enter_name')}}"
                        required
                    >
                </div>
                <div class="name">
                                            @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>
                                    </div>

            <!-- Name Translations -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6" dir="@if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') rtl @else ltr @endif">
                <div>
                    <label for="name_en" 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.location_page.name')}} (English)
                    </label>
                    <input 
                        type="text" 
                        id="name_en" 
                        name="name_en" 
                        value="{{ old('name_en') }}"
                        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 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif"
                        placeholder="Name in English"
                    >
                                        </div>
                <div>
                    <label for="name_ar" 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.location_page.name')}} (العربية)
                    </label>
                    <input 
                        type="text" 
                        id="name_ar" 
                        name="name_ar" 
                        value="{{ old('name_ar') }}"
                        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 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif"
                        placeholder="الاسم بالعربية"
                    >
                                        </div>
                <div>
                    <label for="name_ku" 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.location_page.name')}} (کوردی)
                    </label>
                    <input 
                        type="text" 
                        id="name_ku" 
                        name="name_ku" 
                        value="{{ old('name_ku') }}"
                        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 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif"
                        placeholder="ناوی بە کوردی"
                    >
                                        </div>
                                    </div>

            <!-- Address and Description sections hidden - not needed -->
            <div class="hidden">
                <!-- Address (Default) -->
                <div>
                    <label for="address" 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.location_page.address')}} ({{__('messages.common.default')}})
                    </label>
                    <div class="relative">
                        <textarea 
                            id="address" 
                            name="address" 
                            rows="3"
                            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('address') border-red-500 @enderror @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif"
                            placeholder="{{__('messages.location_page.enter_address')}}"
                        >{{ old('address') }}</textarea>
                    </div>
                    <div class="address">
                        @error('address')
                        <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>

                <!-- Address Translations -->
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6" dir="@if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') rtl @else ltr @endif">
                    <div>
                        <label for="address_en" 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.location_page.address')}} (English)
                        </label>
                        <textarea 
                            id="address_en" 
                            name="address_en" 
                            rows="3"
                            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 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif"
                            placeholder="Address in English"
                        >{{ old('address_en') }}</textarea>
                    </div>
                    <div>
                        <label for="address_ar" 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.location_page.address')}} (العربية)
                        </label>
                        <textarea 
                            id="address_ar" 
                            name="address_ar" 
                            rows="3"
                            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 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif"
                            placeholder="العنوان بالعربية"
                        >{{ old('address_ar') }}</textarea>
                    </div>
                    <div>
                        <label for="address_ku" 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.location_page.address')}} (کوردی)
                        </label>
                        <textarea 
                            id="address_ku" 
                            name="address_ku" 
                            rows="3"
                            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 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif"
                            placeholder="ناونیشان بە کوردی"
                        >{{ old('address_ku') }}</textarea>
                    </div>
                </div>

                <!-- Description (Default) -->
                <div>
                    <label for="description" 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.location_page.description')}} ({{__('messages.common.default')}})
                    </label>
                    <div class="relative">
                        <textarea 
                            id="description" 
                            name="description" 
                            rows="3"
                            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('description') border-red-500 @enderror @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif"
                            placeholder="{{__('messages.location_page.enter_description')}}"
                        >{{ old('description') }}</textarea>
                    </div>
                    <div class="description">
                        @error('description')
                        <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>

                <!-- Description Translations -->
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6" dir="@if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') rtl @else ltr @endif">
                    <div>
                        <label for="description_en" 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.location_page.description')}} (English)
                        </label>
                        <textarea 
                            id="description_en" 
                            name="description_en" 
                            rows="3"
                            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 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif"
                            placeholder="Description in English"
                        >{{ old('description_en') }}</textarea>
                    </div>
                    <div>
                        <label for="description_ar" 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.location_page.description')}} (العربية)
                        </label>
                        <textarea 
                            id="description_ar" 
                            name="description_ar" 
                            rows="3"
                            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 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif"
                            placeholder="الوصف بالعربية"
                        >{{ old('description_ar') }}</textarea>
                    </div>
                    <div>
                        <label for="description_ku" 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.location_page.description')}} (کوردی)
                        </label>
                        <textarea 
                            id="description_ku" 
                            name="description_ku" 
                            rows="3"
                            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 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif"
                            placeholder="وەسف بە کوردی"
                        >{{ old('description_ku') }}</textarea>
                    </div>
                </div>
            </div>

            <!-- Status 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="status" 
                    name="status" 
                    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('status', true) ? 'checked' : '' }}
                >
                <label for="status" class="text-sm font-medium text-gray-700 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                                                    {{__('messages.common.active')}}
                                                </label>
                                            </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.common.submit')}}'"></span>
                                            </button>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
function locationFormData() {
    return {
        loading: false,
        init() {
            // Initialize any needed functionality
            }
        }
}
</script>
@endpush
@endsection