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

@section('content')
<div x-data="counterFormData()" 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.counter_page.edit counter')}}</h2>
                <p class="text-gray-600">{{__('messages.counter_page.edit_counter_description')}}</p>
            </div>
            <a href="{{ \App\Helpers\UrlHelper::routeWithCityBuilding('counters.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="counter_form" method="post" action="{{ \App\Helpers\UrlHelper::routeWithCityBuilding('counters.update', [$counter->id]) }}" 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
            @method('PATCH')
            
            @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

            @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')}}</option>
                    @foreach($locations as $location)
                        <option value="{{ $location->id }}" {{ old('location_id', $counter->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

            <!-- Counter 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.counter_page.counter name')}} <span class="text-red-500">*</span>
                </label>
                <input 
                    type="text" 
                    id="name" 
                    name="name" 
                    value="{{ old('name', $counter->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.counter_page.enter_counter_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>

            <!-- Service Selection -->
            <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.counter_page.service')}} <span class="text-red-500">*</span>
                </label>
                <select 
                    id="service_id" 
                    name="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('service_id') border-red-500 @enderror @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif"
                    required
                >
                    <option value="">{{__('messages.counter_page.select service')}}</option>
                    @foreach($services as $service)
                        <option value="{{$service->id}}" {{ old('service_id', $counter->service_id) == $service->id ? 'selected' : '' }}>{{$service->name}}</option>
                    @endforeach
                </select>
                @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>

            <!-- 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">save</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.update')}}'"></span>
                </button>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script src="{{asset('app-assets/vendors/jquery-validation/jquery.validate.min.js')}}"></script>
<script>
function counterFormData() {
    return {
        loading: false,
        init() {
            // Initialize form validation
            $('#counter_form').validate({
                rules: {
                    name: {
                        required: true,
                    },
                    service_id: {
                        required: true,
                    },
                },
                errorElement: 'div',
                errorPlacement: function(error, element) {
                    error.addClass('mt-2 text-sm text-red-600');
                    error.insertAfter(element);
                }
            });
        }
    }
}
</script>
@endpush
@endsection