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


@section('content')
<div x-data="roleData()" x-init="init()" x-cloak>
    <!-- Delete Confirmation Modal -->
    <div 
        x-show="showDeleteModal"
        x-cloak
        class="fixed inset-0 z-50 overflow-y-auto"
        style="display: none;"
        @keydown.escape.window="showDeleteModal = false"
    >
        <!-- Backdrop -->
        <div 
            class="fixed inset-0 bg-gray-900 bg-opacity-50 transition-opacity"
            @click="showDeleteModal = false"
            x-show="showDeleteModal"
            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="showDeleteModal"
                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-red-100 flex items-center justify-center">
                                <span class="material-icons text-red-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.confirm_delete')}}
                            </h3>
                        </div>
                        <button 
                            type="button" 
                            @click="showDeleteModal = 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.delete_confirm')}} <span x-text="itemNameToDelete" class="font-semibold text-gray-900"></span>?
                        </p>
                        <p class="text-xs text-red-600 mt-2 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                            {{__('messages.common.cannot_undo')}}
                        </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="showDeleteModal = false"
                            class="px-4 py-2.5 text-sm font-semibold text-gray-700 bg-white border-2 border-gray-200 rounded-xl hover:bg-gray-50 hover:border-gray-300 transition-all duration-200"
                        >
                            {{__('messages.common.cancel')}}
                        </button>
                        <form 
                            method="POST" 
                            x-bind:action="'{{ url('roles') }}/' + itemIdToDelete"
                            class="inline"
                            @submit="showDeleteModal = false"
                        >
                            @csrf
                            @method('DELETE')
                            <button
                                type="submit"
                                class="px-4 py-2.5 text-sm font-semibold text-white bg-gradient-to-r from-red-600 to-red-500 rounded-xl hover:from-red-700 hover:to-red-600 transition-all duration-200 shadow-sm hover:shadow-md"
                            >
                                {{__('messages.common.delete')}}
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Page Header -->
    <div class="mb-8">
        <div class="flex items-center justify-between">
            <div>
                <h2 class="text-3xl font-bold text-gray-900 mb-2">{{__('messages.user_roles_page.user roles')}}</h2>
                <p class="text-gray-600">{{__('messages.user_roles_page.manage_roles_description')}}</p>
            </div>
            <a href="{{ \App\Helpers\UrlHelper::routeWithCityBuilding('roles.create') }}" class="inline-flex items-center px-6 py-3 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" dir="ltr">
                <span class="material-icons mr-2">add</span>
                {{__('messages.user_roles_page.add user role')}}
            </a>
        </div>
    </div>

    <!-- Roles Table Card -->
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100" style="overflow: visible !important;">
        <div class="overflow-x-auto" style="overflow-y: visible !important; position: relative;">
            <table class="min-w-full divide-y divide-gray-200" style="position: relative;">
                <thead class="bg-gradient-to-r from-gray-50 to-gray-100">
                    <tr>
                        <th scope="col" class="px-6 py-4 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif text-xs font-bold text-gray-700 uppercase tracking-wider">
                            #
                        </th>
                        <th scope="col" class="px-6 py-4 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif text-xs font-bold text-gray-700 uppercase tracking-wider">
                            {{__('messages.user_roles_page.name')}}
                        </th>
                        <th scope="col" class="px-6 py-4 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif text-xs font-bold text-gray-700 uppercase tracking-wider">
                            {{__('messages.user_roles_page.service')}}
                        </th>
                        <th scope="col" class="px-6 py-4 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif text-xs font-bold text-gray-700 uppercase tracking-wider">
                            {{__('messages.service_page.building')}}
                        </th>
                        @if(\App\Helpers\ServerHelper::isApiServer())
                        <th scope="col" class="px-6 py-4 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif text-xs font-bold text-gray-700 uppercase tracking-wider">
                            {{__('messages.settings.city')}}
                        </th>
                        @endif
                        <th scope="col" class="px-6 py-4 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif text-xs font-bold text-gray-700 uppercase tracking-wider">
                            {{__('messages.user_roles_page.action')}}
                        </th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200" style="position: relative; overflow: visible;">
                    @forelse($roles as $key=>$role)
                    <tr class="hover:bg-blue-50/50 transition-all duration-200 group">
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm font-medium text-gray-900">{{ ($roles->currentPage() - 1) * $roles->perPage() + $loop->iteration }}</div>
                        </td>
                        <td class="px-6 py-4">
                            <div class="text-sm font-medium text-gray-900">{{$role->name}}</div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm text-gray-700">
                                {{$role->service ? $role->service->name : __('messages.user_roles_page.all services')}}
                            </div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm text-gray-700">
                                @if($role->location)
                                    {{$role->location->translated_name ?? $role->location->name}}
                                @else
                                    {{__('messages.common.all_building')}}
                                @endif
                            </div>
                        </td>
                        @if(\App\Helpers\ServerHelper::isApiServer())
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm text-gray-700">
                                @if($role->city)
                                    {{$role->city->name}}
                                @elseif($role->location && $role->location->city)
                                    {{$role->location->city->name}}
                                @else
                                    {{__('messages.service_page.unknown')}}
                                @endif
                            </div>
                        </td>
                        @endif
                        <td class="px-6 py-4 whitespace-nowrap @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif text-sm font-medium" style="position: static; overflow: visible;">
                            @if($role->id == 1)
                            <div class="inline-flex items-center justify-center w-10 h-10 rounded-xl bg-gray-100 text-gray-400 cursor-not-allowed border border-gray-200" title="{{__('messages.user_roles_page.cannot_edit_super_admin')}}">
                                <span class="material-icons text-xl">lock</span>
                            </div>
                            @else
                            <div class="relative inline-block" x-data="{ 
                                open: false,
                                isRTL: {{ \App::currentLocale() == 'iq' || \App::currentLocale() == 'ku' ? 'true' : 'false' }},
                                positionDropdown() {
                                    if (!this.open) return;
                                    const button = this.$refs.button;
                                    const dropdown = this.$refs.dropdown;
                                    if (!button || !dropdown) return;
                                    
                                    const rect = button.getBoundingClientRect();
                                    dropdown.style.position = 'fixed';
                                    dropdown.style.zIndex = '9999';
                                    
                                    if (this.isRTL) {
                                        dropdown.style.left = rect.left + 'px';
                                        dropdown.style.right = 'auto';
                                    } else {
                                        dropdown.style.right = (window.innerWidth - rect.right) + 'px';
                                        dropdown.style.left = 'auto';
                                    }
                                    
                                    // First position it below to measure actual height
                                    dropdown.style.top = (rect.bottom + 8) + 'px';
                                    dropdown.style.bottom = 'auto';
                                    
                                    // Wait for dropdown to render, then recalculate
                                    setTimeout(() => {
                                        const dropdownHeight = dropdown.offsetHeight || 200;
                                        const spaceBelow = window.innerHeight - rect.bottom;
                                        const spaceAbove = rect.top;
                                        const shouldOpenUpward = spaceBelow < dropdownHeight + 8 && spaceAbove > spaceBelow;
                                        
                                        if (shouldOpenUpward) {
                                            dropdown.style.top = (rect.top - dropdownHeight - 8) + 'px';
                                            dropdown.style.bottom = 'auto';
                                        } else {
                                            dropdown.style.top = (rect.bottom + 8) + 'px';
                                            dropdown.style.bottom = 'auto';
                                        }
                                    }, 10);
                                }
                            }" 
                            x-init="$watch('open', () => { setTimeout(() => positionDropdown(), 10) })"
                            style="position: static;">
                                <!-- Options Button -->
                                <button 
                                    x-ref="button"
                                    @click="open = !open; $nextTick(() => positionDropdown())" 
                                    @click.away="open = false"
                                    class="inline-flex items-center justify-center w-10 h-10 rounded-xl bg-gray-100 text-gray-700 hover:bg-gray-200 transition-all duration-200 shadow-sm hover:shadow-md hover:scale-105 active:scale-95 border border-gray-200"
                                    title="{{__('messages.common.action')}}"
                                >
                                    <span class="material-icons text-xl">more_vert</span>
                                </button>
                                
                                <!-- Dropdown Menu -->
                                <div 
                                    x-ref="dropdown"
                                    x-show="open" 
                                    x-transition:enter="transition ease-out duration-100"
                                    x-transition:enter-start="opacity-0 transform scale-95"
                                    x-transition:enter-end="opacity-100 transform scale-100"
                                    x-transition:leave="transition ease-in duration-75"
                                    x-transition:leave-start="opacity-100 transform scale-100"
                                    x-transition:leave-end="opacity-0 transform scale-95"
                                    x-cloak
                                    class="w-48 bg-white rounded-xl shadow-xl border border-gray-200 py-2 overflow-hidden"
                                    dir="ltr"
                                >
                                    <!-- Edit Option -->
                                    <a 
                                        href="{{ \App\Helpers\UrlHelper::routeWithCityBuilding('roles.edit', [$role->id]) }}" 
                                        class="flex items-center px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 transition-colors @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') flex-row-reverse @endif"
                                        @click="open = false"
                                    >
                                        <span class="material-icons text-base @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') ml-3 @else mr-3 @endif text-blue-600">edit</span>
                                        <span class="@if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">{{__('messages.common.edit')}}</span>
                                    </a>
                                    
                                    <!-- Divider -->
                                    <div class="border-t border-gray-200 my-1"></div>
                                    
                                    <!-- Delete Option -->
                                    <button 
                                        type="button"
                                        @click="
                                            itemIdToDelete = {{ $role->id }};
                                            itemNameToDelete = '{{ addslashes($role->name) }}';
                                            showDeleteModal = true;
                                            open = false;
                                        "
                                        class="w-full flex items-center px-4 py-2.5 text-sm text-red-600 hover:bg-red-50 transition-colors @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-3 @else mr-3 @endif">delete</span>
                                        <span class="@if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">{{__('messages.common.delete')}}</span>
                                    </button>
                                </div>
                            </div>
                            @endif
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="{{ \App\Helpers\ServerHelper::isApiServer() ? '6' : '5' }}" class="px-6 py-12 text-center">
                            <div class="flex flex-col items-center justify-center">
                                <div class="w-16 h-16 rounded-full bg-gray-100 flex items-center justify-center mb-4">
                                    <span class="material-icons text-3xl text-gray-400">admin_panel_settings</span>
                                </div>
                                <h3 class="text-sm font-semibold text-gray-900 mb-1">{{__('messages.user_roles_page.no_roles')}}</h3>
                                <p class="text-sm text-gray-500">{{__('messages.user_roles_page.no_roles_description')}}</p>
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        
        <!-- Pagination -->
        @if($roles->hasPages())
        @php
            $paginationParams = [];
            if (request()->query('city')) {
                $paginationParams['city'] = request()->query('city');
            }
            if (request()->query('building')) {
                $paginationParams['building'] = request()->query('building');
            }
        @endphp
        <div class="px-6 py-4 border-t border-gray-200 bg-gray-50">
            <div class="flex items-center justify-between @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') flex-row-reverse @endif">
                <div class="text-sm text-gray-700">
                    {{__('messages.common.showing')}} 
                    <span class="font-medium">{{ $roles->firstItem() }}</span>
                    {{__('messages.common.to')}} 
                    <span class="font-medium">{{ $roles->lastItem() }}</span>
                    {{__('messages.common.of')}} 
                    <span class="font-medium">{{ $roles->total() }}</span>
                    {{__('messages.common.results')}}
                </div>
                <div class="flex items-center space-x-2 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') space-x-reverse @endif">
                    @if($roles->onFirstPage())
                        <span class="px-3 py-2 text-sm font-medium text-gray-400 bg-white border border-gray-300 rounded-lg cursor-not-allowed">
                            {{__('messages.common.previous')}}
                        </span>
                    @else
                        <a href="{{ $roles->appends($paginationParams)->previousPageUrl() }}" class="px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
                            {{__('messages.common.previous')}}
                        </a>
                    @endif
                    
                    @foreach($roles->appends($paginationParams)->getUrlRange(max(1, $roles->currentPage() - 2), min($roles->lastPage(), $roles->currentPage() + 2)) as $page => $url)
                        @if($page == $roles->currentPage())
                            <span class="px-3 py-2 text-sm font-medium text-white bg-blue-600 border border-blue-600 rounded-lg">{{ $page }}</span>
                        @else
                            <a href="{{ $url }}" class="px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">{{ $page }}</a>
                        @endif
                    @endforeach
                    
                    @if($roles->hasMorePages())
                        <a href="{{ $roles->appends($paginationParams)->nextPageUrl() }}" class="px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
                            {{__('messages.common.next')}}
                        </a>
                    @else
                        <span class="px-3 py-2 text-sm font-medium text-gray-400 bg-white border border-gray-300 rounded-lg cursor-not-allowed">
                            {{__('messages.common.next')}}
                        </span>
                    @endif
                </div>
            </div>
        </div>
        @endif
    </div>
</div>

@push('scripts')
<script>
function roleData() {
    return {
        showDeleteModal: false,
        itemIdToDelete: null,
        itemNameToDelete: '',
        init() {
            // Handle window resize and scroll to reposition dropdowns
            const handleReposition = () => {
                document.querySelectorAll('[x-ref="dropdown"]').forEach(dropdown => {
                    if (dropdown.style.position === 'fixed' && dropdown.style.display !== 'none') {
                        const button = dropdown.closest('[x-data]')?.querySelector('[x-ref="button"]');
                        if (button && window.Alpine && window.Alpine.$data(button.closest('[x-data]'))) {
                            const data = window.Alpine.$data(button.closest('[x-data]'));
                            if (data && data.positionDropdown) {
                                data.positionDropdown();
                            }
                        }
                    }
                });
            };
            
            window.addEventListener('scroll', handleReposition, true);
            window.addEventListener('resize', handleReposition);
        }
    }
}
</script>
@endpush
@endsection