@extends('examples.modern-layout-v2')
@section('title', __('messages.user_roles_page.edit user role'))
@section('roles', 'bg-blue-50 text-blue-700')

@section('content')
<div x-data="roleFormData()" x-init="init()">
    <!-- Permission Validation Modal -->
    <div 
        x-show="showPermissionModal"
        x-cloak
        class="fixed inset-0 z-50 overflow-y-auto"
        style="display: none;"
        @keydown.escape.window="showPermissionModal = false"
    >
        <!-- Backdrop -->
        <div 
            class="fixed inset-0 bg-gray-900 bg-opacity-50 transition-opacity"
            @click="showPermissionModal = false"
            x-show="showPermissionModal"
            x-transition:enter="ease-out duration-300"
            x-transition:enter-start="opacity-0"
            x-transition:enter-end="opacity-100"
            x-transition:leave="ease-in duration-200"
            x-transition:leave-start="opacity-100"
            x-transition:leave-end="opacity-0"
        ></div>
        
        <!-- Modal -->
        <div class="flex items-center justify-center min-h-screen px-4 py-4">
            <div 
                class="relative bg-white rounded-2xl overflow-hidden shadow-xl transform transition-all w-full max-w-lg"
                @click.stop
                x-show="showPermissionModal"
                x-transition:enter="ease-out duration-300"
                x-transition:enter-start="opacity-0 scale-95"
                x-transition:enter-end="opacity-100 scale-100"
                x-transition:leave="ease-in duration-200"
                x-transition:leave-start="opacity-100 scale-100"
                x-transition:leave-end="opacity-0 scale-95"
            >
                <div class="bg-white px-6 pt-6 pb-4">
                    <div class="flex items-center justify-between mb-4">
                        <div class="flex items-center">
                            <div class="flex-shrink-0 w-12 h-12 rounded-full bg-yellow-100 flex items-center justify-center">
                                <span class="material-icons text-yellow-600 text-2xl">warning</span>
                            </div>
                            <h3 class="text-xl font-bold text-gray-900 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') mr-3 @else ml-3 @endif">
                                {{__('messages.common.validation_error') ?? 'Validation Error'}}
                            </h3>
                        </div>
                        <button 
                            type="button" 
                            @click="showPermissionModal = false"
                            class="text-gray-400 hover:text-gray-600 transition-colors"
                        >
                            <span class="material-icons text-2xl">close</span>
                        </button>
                    </div>
                    
                    <div class="mt-4">
                        <p class="text-sm text-gray-600 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                            {{__('messages.user_roles_page.at_least_one_permission_required') ?? 'At least one permission must be selected.'}}
                        </p>
                    </div>
                    
                    <div class="mt-6 flex items-center @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') justify-start flex-row-reverse space-x-reverse @else justify-end @endif space-x-3">
                        <button
                            type="button"
                            @click="showPermissionModal = false"
                            class="px-4 py-2.5 text-sm font-semibold text-white bg-gradient-to-r from-blue-600 to-blue-500 rounded-xl hover:from-blue-700 hover:to-blue-600 transition-all duration-200 shadow-sm hover:shadow-md"
                        >
                            {{__('messages.common.ok') ?? 'OK'}}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 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.user_roles_page.edit user role')}}</h2>
                <p class="text-gray-600">{{__('messages.user_roles_page.edit_role_description')}}</p>
            </div>
            <a href="{{ \App\Helpers\UrlHelper::routeWithCityBuilding('roles.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="role_form" method="post" action="{{ \App\Helpers\UrlHelper::routeWithCityBuilding('roles.update', [$role->id]) }}" class="space-y-6" @submit.prevent="validateAndSubmit()">
            @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

            <!-- Role 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.user_roles_page.role name')}} <span class="text-red-500">*</span>
                </label>
                <div class="relative">
                    <input 
                        type="text" 
                        id="name" 
                        name="name" 
                        value="{{ old('name', $role->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.user_roles_page.enter_role_name')}}"
                        required
                    >
                </div>
                @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>

            <!-- Role Type Selection (Radio Buttons) -->
            <div class="space-y-4">
                <div class="flex items-center justify-between mb-3">
                    <p class="text-sm font-medium text-gray-700 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                        {{__('messages.user_roles_page.select_role_type') ?? 'Select Role Type (Optional)'}}
                    </p>
                    <button 
                        type="button"
                        @click="resetRoleType()"
                        x-show="roleType !== ''"
                        class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-gray-600 bg-gray-100 border border-gray-300 rounded-lg hover:bg-gray-200 hover:text-gray-700 transition-colors"
                    >
                        <span class="material-icons text-sm">refresh</span>
                        {{__('messages.common.reset') ?? 'Reset'}}
                    </button>
                </div>
                
                <!-- Is Caller Role Radio -->
                <div class="bg-blue-50 border border-blue-200 rounded-xl p-4">
                    <label class="flex items-center cursor-pointer @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') flex-row-reverse @endif" dir="ltr">
                        <input 
                            type="radio" 
                            name="role_type"
                            value="caller"
                            x-model="roleType"
                            @change="toggleRoleMode()"
                            class="w-5 h-5 text-blue-600 border-gray-300 focus:ring-blue-500 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') ml-3 @else mr-3 @endif"
                        >
                        <div class="flex-1 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                            <span class="text-sm font-semibold text-gray-900 block">
                                {{__('messages.user_roles_page.is_caller_role')}}
                            </span>
                            <span class="text-xs text-gray-600 block mt-1">
                                {{__('messages.user_roles_page.is_caller_role_description')}}
                            </span>
                        </div>
                    </label>
                </div>

                <!-- Is Reporter Role Radio -->
                <div class="bg-green-50 border border-green-200 rounded-xl p-4">
                    <label class="flex items-center cursor-pointer @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') flex-row-reverse @endif" dir="ltr">
                        <input 
                            type="radio" 
                            name="role_type"
                            value="reporter"
                            x-model="roleType"
                            @change="toggleRoleMode()"
                            class="w-5 h-5 text-green-600 border-gray-300 focus:ring-green-500 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') ml-3 @else mr-3 @endif"
                        >
                        <div class="flex-1 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                            <span class="text-sm font-semibold text-gray-900 block">
                                {{__('messages.user_roles_page.is_reporter_role') ?? 'Is Reporter Role'}}
                            </span>
                            <span class="text-xs text-gray-600 block mt-1">
                                {{__('messages.user_roles_page.is_reporter_role_description') ?? 'Automatically checks View Reports and View Messages permissions. Grants access to all locations.'}}
                            </span>
                        </div>
                    </label>
                </div>

                <!-- Is Manager Role Radio (Only for Super-Admin) -->
                @if(auth()->user()->hasRole('Super-Admin'))
                <div class="bg-purple-50 border border-purple-200 rounded-xl p-4">
                    <label class="flex items-center cursor-pointer @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') flex-row-reverse @endif" dir="ltr">
                        <input
                            type="radio"
                            name="role_type"
                            value="manager"
                            x-model="roleType"
                            @change="toggleRoleMode()"
                            class="w-5 h-5 text-purple-600 border-gray-300 focus:ring-purple-500 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') ml-3 @else mr-3 @endif"
                        >
                        <div class="flex-1 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                            <span class="text-sm font-semibold text-gray-900 block">
                                {{__('messages.user_roles_page.is_manager_role')}}
                            </span>
                            <span class="text-xs text-gray-600 block mt-1">
                                {{__('messages.user_roles_page.is_manager_role_description')}}
                            </span>
                        </div>
                    </label>
                </div>
                @endif

                <!-- Is Admin Role Radio (Only for Super-Admin) -->
                @if(auth()->user()->hasRole('Super-Admin'))
                <div class="bg-orange-50 border border-orange-200 rounded-xl p-4">
                    <label class="flex items-center cursor-pointer @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') flex-row-reverse @endif" dir="ltr">
                        <input
                            type="radio"
                            name="role_type"
                            value="admin"
                            x-model="roleType"
                            @change="toggleRoleMode()"
                            class="w-5 h-5 text-orange-600 border-gray-300 focus:ring-orange-500 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') ml-3 @else mr-3 @endif"
                        >
                        <div class="flex-1 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                            <span class="text-sm font-semibold text-gray-900 block">
                                {{__('messages.user_roles_page.is_admin_role')}}
                            </span>
                            <span class="text-xs text-gray-600 block mt-1">
                                {{__('messages.user_roles_page.is_admin_role_description')}}
                            </span>
                        </div>
                    </label>
                </div>
                @endif

                <!-- Is Administrator Role Radio (Only for Super-Admin) -->
                @if(auth()->user()->hasRole('Super-Admin'))
                <div class="bg-indigo-50 border border-indigo-200 rounded-xl p-4">
                    <label class="flex items-center cursor-pointer @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') flex-row-reverse @endif" dir="ltr">
                        <input
                            type="radio"
                            name="role_type"
                            value="administrator"
                            x-model="roleType"
                            @change="toggleRoleMode()"
                            class="w-5 h-5 text-indigo-600 border-gray-300 focus:ring-indigo-500 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') ml-3 @else mr-3 @endif"
                        >
                        <div class="flex-1 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                            <span class="text-sm font-semibold text-gray-900 block">
                                {{__('messages.user_roles_page.is_administrator_role') ?? 'Is Administrator Role'}}
                            </span>
                            <span class="text-xs text-gray-600 block mt-1">
                                {{__('messages.user_roles_page.is_administrator_role_description') ?? 'Mark this role as an administrator role. Administrators have full permissions for services, counters, users, roles, and messages. Cannot view Super Admin users. When enabled, location will be set to all locations.'}}
                            </span>
                        </div>
                    </label>
                </div>
                @endif
            </div>
            
            <!-- Hidden inputs for backend compatibility -->
            <input type="hidden" name="is_reporter_role" :value="roleType === 'reporter' ? 1 : 0">
            <input type="hidden" name="is_manager_role" :value="roleType === 'manager' ? 1 : 0">
            <input type="hidden" name="is_admin_role" :value="roleType === 'admin' ? 1 : 0">
            <input type="hidden" name="is_administrator_role" :value="roleType === 'administrator' ? 1 : 0">

            <!-- City and Location (Only show city dropdown on API server) -->
            @if(\App\Helpers\ServerHelper::isApiServer())
            <div>
                <label for="city_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.settings.city')}}
                </label>
                <div class="relative">
                    <select 
                        id="city_id" 
                        name="city_id_filter"
                        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 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif"
                    >
                        <option value="">{{__('messages.user_page.select_city')}}</option>
                        @foreach($cities as $city)
                            <option value="{{$city->id}}" {{isset($selectedCityId) && $selectedCityId == $city->id ? 'selected' : ''}}>{{$city->name}}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            @endif
            
            <!-- Location and Service -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Location -->
                <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.user_roles_page.location')}}
                    </label>
                    <div class="relative">
                        <select 
                            id="location_id" 
                            name="location_id" 
                            :disabled="roleType === 'manager' || roleType === 'admin' || roleType === 'administrator' || roleType === 'reporter'"
                            :class="{'opacity-50 cursor-not-allowed': roleType === 'manager' || roleType === 'admin' || roleType === 'administrator' || roleType === 'reporter'}"
                            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"
                        >
                            <option value="" {{(old('location_id') !== null ? old('location_id') : $role->location_id) == null || (old('location_id') !== null ? old('location_id') : $role->location_id) == '' ? 'selected' : ''}}>{{__('messages.user_roles_page.all locations')}}</option>
                            @foreach($locations as $location)
                                <option value="{{$location->id}}" data-city-id="{{$location->city_id}}" {{(old('location_id') !== null ? old('location_id') : $role->location_id) == $location->id ? 'selected' : ''}}>{{$location->translated_name ?? $location->name}}</option>
                            @endforeach
                        </select>
                    </div>
                    @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>

                <!-- Service -->
                <div x-show="roleType === 'caller'" x-transition>
                    <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.user_roles_page.service')}}
                    </label>
                    <div class="relative">
                        <select 
                            id="service_id" 
                            name="service_id" 
                            :disabled="roleType !== 'caller' || roleType === 'manager'"
                            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 disabled:bg-gray-100 disabled:cursor-not-allowed @error('service_id') border-red-500 @enderror @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif"
                        >
                            <option value="" :disabled="roleType === 'caller'">{{__('messages.user_roles_page.all services')}}</option>
                            @foreach($services as $service)
                                <option value="{{$service->id}}" data-location-id="{{$service->location_id}}" {{old('service_id', $role->service_id) == $service->id ? 'selected' : ''}}>{{$service->name}}</option>
                            @endforeach
                        </select>
                    </div>
                    @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>

            <!-- Permissions Section -->
            <div class="mt-8">
                <div class="flex items-center justify-between mb-6">
                    <h3 class="text-lg font-semibold text-gray-900 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                        {{__('messages.user_roles_page.user roles')}}
                    </h3>
                    <label class="flex items-center cursor-pointer @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') flex-row-reverse @endif" dir="ltr">
                        <input 
                            type="checkbox" 
                            id="select_all" 
                            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"
                        >
                        <span class="text-sm font-medium text-gray-700 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                            {{__('messages.user_roles_page.select all')}}
                        </span>
                    </label>
                </div>

                <div class="bg-gray-50 rounded-xl p-6 border border-gray-200">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <!-- Permission Items -->
                        <div class="flex items-center p-3 bg-white rounded-lg border border-gray-200 hover:border-blue-300 hover:shadow-sm transition-all @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') flex-row-reverse @endif" dir="ltr">
                            <input type="checkbox" class="checkbox 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" id="dashboard" name="permission[view dashboard]" {{ in_array('view dashboard', $permissions) ? 'checked' : '' }}>
                            <label for="dashboard" class="text-sm font-medium text-gray-700 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif cursor-pointer flex-1">
                                {{__('messages.user_roles_page.view dashboard')}}
                            </label>
                        </div>

                        <div class="flex items-center p-3 bg-white rounded-lg border border-gray-200 hover:border-blue-300 hover:shadow-sm transition-all @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') flex-row-reverse @endif" dir="ltr">
                            <input type="checkbox" class="checkbox 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" id="counters" name="permission[view counters]" {{ in_array('view counters', $permissions) ? 'checked' : '' }}>
                            <label for="counters" class="text-sm font-medium text-gray-700 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif cursor-pointer flex-1">
                                {{__('messages.user_roles_page.view counters')}}
                            </label>
                        </div>

                        <div class="flex items-center p-3 bg-white rounded-lg border border-gray-200 hover:border-blue-300 hover:shadow-sm transition-all @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') flex-row-reverse @endif" dir="ltr">
                            <input type="checkbox" class="checkbox 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" id="services" name="permission[view services]" {{ in_array('view services', $permissions) ? 'checked' : '' }}>
                            <label for="services" class="text-sm font-medium text-gray-700 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif cursor-pointer flex-1">
                                {{__('messages.user_roles_page.view services')}}
                            </label>
                        </div>

                        <div class="flex items-center p-3 bg-white rounded-lg border border-gray-200 hover:border-blue-300 hover:shadow-sm transition-all @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') flex-row-reverse @endif" dir="ltr">
                            <input type="checkbox" class="checkbox 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" id="users" name="permission[view users]" {{ in_array('view users', $permissions) ? 'checked' : '' }}>
                            <label for="users" class="text-sm font-medium text-gray-700 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif cursor-pointer flex-1">
                                {{__('messages.user_roles_page.view users')}}
                            </label>
                        </div>

                        <div class="flex items-center p-3 bg-white rounded-lg border border-gray-200 hover:border-blue-300 hover:shadow-sm transition-all @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') flex-row-reverse @endif" dir="ltr">
                            <input 
                                type="checkbox" 
                                class="checkbox call-token-checkbox 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" 
                                id="call_token" 
                                name="permission[call token]" 
                                {{ in_array('call token', $permissions) ? 'checked' : '' }}
                                :disabled="roleType !== 'caller'"
                                :class="{'opacity-50 cursor-not-allowed': roleType !== 'caller'}"
                            >
                            <label for="call_token" class="text-sm font-medium text-gray-700 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif cursor-pointer flex-1" :class="{'opacity-50': roleType !== 'caller'}">
                                {{__('messages.user_roles_page.call token')}}
                            </label>
                        </div>

                        <div class="flex items-center p-3 bg-white rounded-lg border border-gray-200 hover:border-blue-300 hover:shadow-sm transition-all @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') flex-row-reverse @endif" dir="ltr">
                            <input type="checkbox" class="checkbox 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" id="issue_token" name="permission[issue token]" {{ in_array('issue token', $permissions) ? 'checked' : '' }}>
                            <label for="issue_token" class="text-sm font-medium text-gray-700 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif cursor-pointer flex-1">
                                {{__('messages.user_roles_page.issue token')}}
                            </label>
                        </div>

                        <div class="flex items-center p-3 bg-white rounded-lg border border-gray-200 hover:border-blue-300 hover:shadow-sm transition-all @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') flex-row-reverse @endif" dir="ltr">
                            <input type="checkbox" class="checkbox 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" id="view_display" name="permission[view display]" {{ in_array('view display', $permissions) ? 'checked' : '' }}>
                            <label for="view_display" class="text-sm font-medium text-gray-700 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif cursor-pointer flex-1">
                                {{__('messages.user_roles_page.view display')}}
                            </label>
                        </div>

                        <div class="flex items-center p-3 bg-white rounded-lg border border-gray-200 hover:border-blue-300 hover:shadow-sm transition-all @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') flex-row-reverse @endif" dir="ltr">
                            <input type="checkbox" class="checkbox 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" id="reports" name="permission[view reports]" {{ in_array('view reports', $permissions) ? 'checked' : '' }}>
                            <label for="reports" class="text-sm font-medium text-gray-700 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif cursor-pointer flex-1">
                                {{__('messages.user_roles_page.view reports')}}
                            </label>
                        </div>

                        <div class="flex items-center p-3 bg-white rounded-lg border border-gray-200 hover:border-blue-300 hover:shadow-sm transition-all @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') flex-row-reverse @endif" dir="ltr">
                            <input type="checkbox" class="checkbox 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" id="profile" name="permission[view profile]" {{ in_array('view profile', $permissions) ? 'checked' : '' }}>
                            <label for="profile" class="text-sm font-medium text-gray-700 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif cursor-pointer flex-1">
                                {{__('messages.user_roles_page.view profile')}}
                            </label>
                        </div>

                        <div class="flex items-center p-3 bg-white rounded-lg border border-gray-200 hover:border-blue-300 hover:shadow-sm transition-all @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') flex-row-reverse @endif" dir="ltr">
                            <input type="checkbox" class="checkbox 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" id="settings" name="permission[view settings]" {{ in_array('view settings', $permissions) ? 'checked' : '' }}>
                            <label for="settings" class="text-sm font-medium text-gray-700 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif cursor-pointer flex-1">
                                {{__('messages.user_roles_page.view settings')}}
                            </label>
                        </div>

                        <div class="flex items-center p-3 bg-white rounded-lg border border-gray-200 hover:border-blue-300 hover:shadow-sm transition-all @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') flex-row-reverse @endif" dir="ltr">
                            <input type="checkbox" class="checkbox 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" id="userroles" name="permission[view user_roles]" {{ in_array('view user_roles', $permissions) ? 'checked' : '' }}>
                            <label for="userroles" class="text-sm font-medium text-gray-700 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif cursor-pointer flex-1">
                                {{__('messages.user_roles_page.view user roles')}}
                            </label>
                        </div>

                        <div class="flex items-center p-3 bg-white rounded-lg border border-gray-200 hover:border-blue-300 hover:shadow-sm transition-all @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') flex-row-reverse @endif" dir="ltr">
                            <input type="checkbox" class="checkbox 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" id="messages" name="permission[view messages]" {{ in_array('view messages', $permissions) ? 'checked' : '' }}>
                            <label for="messages" class="text-sm font-medium text-gray-700 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif cursor-pointer flex-1">
                                {{__('messages.user_roles_page.view messages')}}
                            </label>
                        </div>

                        <div class="flex items-center p-3 bg-white rounded-lg border border-gray-200 hover:border-blue-300 hover:shadow-sm transition-all @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') flex-row-reverse @endif" dir="ltr" style="display: none;">
                            <input 
                                type="checkbox" 
                                class="checkbox call-token-checkbox 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" 
                                id="locations" 
                                name="permission[view locations]" 
                                {{ in_array('view locations', $permissions) ? 'checked' : '' }}
                                style="display: none;"
                            >
                            <label for="locations" class="text-sm font-medium text-gray-700 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif cursor-pointer flex-1" style="display: none;">
                                {{__('messages.user_roles_page.view locations')}}
                            </label>
                        </div>
                    </div>
                </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">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>
function roleFormData() {
    return {
        loading: false,
        roleType: @if($role->is_manager_role ?? false)'manager'@elseif($role->is_administrator_role ?? false)'administrator'@elseif($role->is_admin_role ?? false)'admin'@elseif($role->is_reporter_role ?? false)'reporter'@elseif(in_array('call token', $permissions))'caller'@else''@endif,
        showPermissionModal: false,
        validateAndSubmit() {
            // Check if at least one permission is selected
            const checkboxes = document.querySelectorAll('.checkbox:not(:disabled)');
            const atLeastOneChecked = Array.from(checkboxes).some(cb => cb.checked);
            
            if (!atLeastOneChecked) {
                // Show custom modal instead of browser alert
                this.showPermissionModal = true;
                return false;
            }
            
            // If validation passes, submit the form
            this.loading = true;
            document.getElementById('role_form').submit();
        },
        resetRoleType() {
            this.roleType = '';
            // Uncheck all radio buttons
            const radioButtons = document.querySelectorAll('input[name="role_type"]');
            radioButtons.forEach(radio => {
                radio.checked = false;
            });
            // Re-enable all checkboxes
            const allCheckboxes = document.querySelectorAll('.checkbox');
            allCheckboxes.forEach(cb => {
                cb.disabled = false;
                cb.checked = false;
            });
            // Reset location and service selects
            const locationSelect = document.getElementById('location_id');
            const serviceSelect = document.getElementById('service_id');
            if (locationSelect) {
                locationSelect.disabled = false;
                locationSelect.classList.remove('opacity-50', 'cursor-not-allowed');
            }
            if (serviceSelect) {
                serviceSelect.disabled = false;
            }
        },
        toggleRoleMode() {
            // Re-enable all checkboxes first
            const allCheckboxes = document.querySelectorAll('.checkbox');
            allCheckboxes.forEach(cb => {
                cb.disabled = false;
                // Don't uncheck if they were already checked (preserve existing permissions)
                if (this.roleType === '') {
                    cb.checked = false;
                }
            });
            
            const locationSelect = document.getElementById('location_id');
            const serviceSelect = document.getElementById('service_id');
            
            if (this.roleType === 'caller') {
                // Check Call Token permission
                const callTokenCheckbox = document.getElementById('call_token');
                if (callTokenCheckbox) {
                    callTokenCheckbox.checked = true;
                }
                
                // Disable all other permission checkboxes (except Call Token)
                allCheckboxes.forEach(cb => {
                    if (cb.id !== 'call_token') {
                        cb.disabled = true;
                        cb.checked = false;
                    }
                });
                
                // Re-enable location and service selects
                if (locationSelect) {
                    locationSelect.disabled = false;
                    locationSelect.classList.remove('opacity-50', 'cursor-not-allowed');
                }
                if (serviceSelect) {
                    serviceSelect.disabled = false;
                }
            } else if (this.roleType === 'reporter') {
                // Check View Reports and View Messages permissions
                const reportsCheckbox = document.getElementById('reports');
                if (reportsCheckbox) {
                    reportsCheckbox.checked = true;
                }
                
                const messagesCheckbox = document.getElementById('messages');
                if (messagesCheckbox) {
                    messagesCheckbox.checked = true;
                }
                
                // Disable all other permission checkboxes (except View Reports and View Messages)
                allCheckboxes.forEach(cb => {
                    if (cb.id !== 'reports' && cb.id !== 'messages') {
                        cb.disabled = true;
                        cb.checked = false;
                    }
                });
                
                // Set location_id to null (all locations)
                if (locationSelect) {
                    locationSelect.value = '';
                    locationSelect.disabled = true;
                    locationSelect.classList.add('opacity-50', 'cursor-not-allowed');
                }
                if (serviceSelect) {
                    serviceSelect.value = '';
                    serviceSelect.disabled = true;
                }
            } else if (this.roleType === 'manager') {
                // Manager role - auto-check Dashboard and Reports, disable all other permissions
                const dashboardCheckbox = document.getElementById('dashboard');
                const reportsCheckbox = document.getElementById('reports');
                
                // Check Dashboard and Reports permissions
                if (dashboardCheckbox) {
                    dashboardCheckbox.checked = true;
                }
                if (reportsCheckbox) {
                    reportsCheckbox.checked = true;
                }
                
                // Disable all other permission checkboxes (except Dashboard and Reports)
                allCheckboxes.forEach(cb => {
                    if (cb.id !== 'dashboard' && cb.id !== 'reports') {
                        cb.disabled = true;
                        cb.checked = false;
                    }
                });
                
                // Disable location and service
                if (locationSelect) {
                    locationSelect.value = '';
                    locationSelect.disabled = true;
                    locationSelect.classList.add('opacity-50', 'cursor-not-allowed');
                }
                if (serviceSelect) {
                    serviceSelect.value = '';
                    serviceSelect.disabled = true;
                }
            } else if (this.roleType === 'admin') {
                // Admin role - disable location
                if (locationSelect) {
                    locationSelect.value = '';
                    locationSelect.disabled = true;
                    locationSelect.classList.add('opacity-50', 'cursor-not-allowed');
                }
                if (serviceSelect) {
                    serviceSelect.value = '';
                    serviceSelect.disabled = true;
                }
            } else if (this.roleType === 'administrator') {
                // Administrator role - disable location (same as admin)
                if (locationSelect) {
                    locationSelect.value = '';
                    locationSelect.disabled = true;
                    locationSelect.classList.add('opacity-50', 'cursor-not-allowed');
                }
                if (serviceSelect) {
                    serviceSelect.value = '';
                    serviceSelect.disabled = true;
                }
            } else {
                // No role type selected - re-enable everything
                if (locationSelect) {
                    locationSelect.disabled = false;
                    locationSelect.classList.remove('opacity-50', 'cursor-not-allowed');
                }
                if (serviceSelect) {
                    serviceSelect.disabled = false;
                }
            }
        },
        init() {
            // CRITICAL: Wait for DOM to be fully ready before manipulating checkboxes
            // This ensures server-side checked states are preserved
            setTimeout(() => {
                // Initialize role mode based on current roleType
                if (this.roleType) {
                    this.toggleRoleMode();
                }
            }, 50); // Small delay to ensure DOM is ready
            // Select All functionality
            const selectAll = document.getElementById('select_all');
            const checkboxes = document.querySelectorAll('.checkbox');
            
            // Set initial state of select all (only count enabled checkboxes, but exclude "View Location" permission)
            if (selectAll && checkboxes.length > 0) {
                const enabledCheckboxes = Array.from(checkboxes).filter(cb => !cb.disabled && cb.id !== 'locations');
                const allChecked = enabledCheckboxes.length > 0 && enabledCheckboxes.every(cb => cb.checked);
                selectAll.checked = allChecked;
            }
            
            if (selectAll) {
                selectAll.addEventListener('change', function() {
                    checkboxes.forEach(checkbox => {
                        // Only check enabled checkboxes, but exclude "View Location" permission
                        if (!checkbox.disabled && checkbox.id !== 'locations') {
                            checkbox.checked = this.checked;
                        }
                    });
                });
            }
            
            // Update select all when individual checkboxes change
            checkboxes.forEach(checkbox => {
                checkbox.addEventListener('change', function() {
                    // Only count enabled checkboxes, but exclude "View Location" permission
                    const enabledCheckboxes = Array.from(checkboxes).filter(cb => !cb.disabled && cb.id !== 'locations');
                    const allChecked = enabledCheckboxes.length > 0 && enabledCheckboxes.every(cb => cb.checked);
                    if (selectAll) {
                        selectAll.checked = allChecked;
                    }
                });
            });

            // Filter locations based on city (only on API server)
            const citySelect = document.getElementById('city_id');
            const locationSelect = document.getElementById('location_id');
            const serviceSelect = document.getElementById('service_id');
            const allServices = @json($services);
            const currentServiceId = '{{ $role->service_id }}';
            
            function filterLocationsByCity(cityId) {
                const locationOptions = locationSelect.querySelectorAll('option');
                locationOptions.forEach(option => {
                    if (option.value === '') {
                        option.style.display = 'block'; // Keep "All Locations" option
                    } else if (!cityId || option.dataset.cityId == cityId) {
                        option.style.display = 'block';
                    } else {
                        option.style.display = 'none';
                    }
                });
                
                // Reset location selection if currently selected location is not in filtered city
                if (locationSelect.value) {
                    const selectedOption = locationSelect.querySelector(`option[value="${locationSelect.value}"]`);
                    if (selectedOption && selectedOption.style.display === 'none') {
                        locationSelect.value = '';
                        filterServicesByLocation(''); // Also reset services
                    }
                }
            }
            
            if (citySelect) {
                citySelect.addEventListener('change', function() {
                    filterLocationsByCity(this.value);
                    // Reset service selection when city changes
                    if (serviceSelect) {
                        serviceSelect.value = '';
                    }
                });
                
                // Initialize locations based on default city selection
                filterLocationsByCity(citySelect.value);
            }
            
            function filterServicesByLocation(locationId) {
                if (!serviceSelect) return;

                // Clear existing options except "All Services"
                const allServicesOption = serviceSelect.querySelector('option[value=""]');
                serviceSelect.innerHTML = '';
                if (allServicesOption) {
                    serviceSelect.appendChild(allServicesOption);
                }
                
                if (locationId && locationId !== '') {
                    // Filter services by location
                    const filteredServices = allServices.filter(service => {
                        return service.location_id == locationId;
                    });
                    
                    filteredServices.forEach(service => {
                        const option = document.createElement('option');
                        option.value = service.id;
                        option.textContent = service.name;
                        option.setAttribute('data-location-id', service.location_id);
                        if (service.id == currentServiceId) {
                            option.selected = true;
                        }
                        serviceSelect.appendChild(option);
                    });
                }
                // IMPORTANT: If no location selected, do NOT append all services.
                // This forces a location selection and prevents mixing services
                // from all cities/buildings in the caller role dropdown.
            }
            
            if (locationSelect) {
                locationSelect.addEventListener('change', function() {
                    filterServicesByLocation(this.value);
                });
                
                // Initialize services based on current location selection
                filterServicesByLocation(locationSelect.value);
            }
            
        }
    }
}
</script>
@endpush
@endsection