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


@section('content')
@php
    $userRole = auth()->user()->roles->first();
    $isAdminRole = $userRole && method_exists($userRole, 'isAdminRole') ? $userRole->isAdminRole() : ($userRole && ($userRole->is_admin_role == 1 || $userRole->is_admin_role === true));
@endphp
<div x-data="serviceData()" 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.service_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('services') }}/' + 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.service_page.services')}}</h2>
                <p class="text-gray-600">{{__('messages.service_page.manage_services_description')}}</p>
            </div>
            @if(!$isAdminRole)
            <a href="{{ \App\Helpers\UrlHelper::routeWithCityBuilding('services.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.service_page.add service')}}
            </a>
            @endif
        </div>
    </div>

    <!-- Services 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.service_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.service_page.letter')}}
                        </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.starting number')}}
                        </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.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.service_page.LinkedService')}}
                        </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.status')}}
                        </th>
                        @if(!$isAdminRole)
                        <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.action')}}
                        </th>
                        @endif
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200" style="position: relative; overflow: visible;">
                    @forelse($services as $key=>$service)
                    <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">{{ ($services->currentPage() - 1) * $services->perPage() + $loop->iteration }}</div>
                        </td>
                        <td class="px-6 py-4">
                            <div class="text-sm font-medium text-gray-900">{{$service->name}}</div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm text-gray-700">{{$service->letter}}</div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm text-gray-700">{{$service->start_number}}</div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm text-gray-700">{{$service->location ? ($service->location->translated_name ?? $service->location->name) : __('messages.service_page.unknown')}}</div>
                        </td>
                        @if(\App\Helpers\ServerHelper::isApiServer())
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm text-gray-700">
                                @if($service->location && $service->location->city)
                                    {{$service->location->city->name}}
                                @else
                                    {{__('messages.service_page.unknown')}}
                                @endif
                            </div>
                        </td>
                        @endif
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm text-gray-700">
                                @if($service->linkedService)
                                    <span class="font-medium">{{ $service->linkedService->name }}</span>
                                    <span class="text-gray-500">({{ $service->linkedService->letter }})</span>
                                @else
                                    <span class="text-gray-400">—</span>
                                @endif
                            </div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="inline-flex items-center gap-x-1.5 rounded-md px-2.5 py-1 text-xs font-semibold {{ $service->status ? 'bg-green-50 text-green-700 ring-1 ring-inset ring-green-600/20' : 'bg-gray-50 text-gray-600 ring-1 ring-inset ring-gray-500/10' }}">
                                @if($service->status)
                                    <span class="h-1.5 w-1.5 rounded-full bg-green-600"></span>
                                @else
                                    <span class="h-1.5 w-1.5 rounded-full bg-gray-400"></span>
                                @endif
                                {{ $service->status ? __('messages.common.active') : __('messages.common.inactive') }}
                            </span>
                        </td>
                        @if(!$isAdminRole)
                        <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;">
                            <div class="relative inline-block" x-data="{ 
                                open: false,
                                isRTL: @js(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku'),
                                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('services.edit', [$service->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>
                                    
                                    <!-- Toggle Status Option -->
                                    <button 
                                        onclick="toggleStatus({{ $service->id }}, {{ $service->status ? 'false' : 'true' }}); $dispatch('close-dropdown')" 
                                        class="w-full 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 {{ $service->status ? 'text-orange-600' : 'text-green-600' }}">{{ $service->status ? 'pause' : 'play_arrow' }}</span>
                                        <span class="@if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">{{ $service->status ? __('messages.message_page.deactivate') : __('messages.message_page.activate') }}</span>
                                    </button>
                                    
                                    <!-- Divider -->
                                    <div class="border-t border-gray-200 my-1"></div>
                                    
                                    <!-- Display Option -->
                                    <a 
                                        href="{{route('display.building.service', ['building_id' => $service->location_id, 'service_id' => $service->id])}}" 
                                        target="_blank"
                                        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-purple-600">desktop_windows</span>
                                        <span class="@if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">{{__('messages.display.display')}}</span>
                                    </a>
                                    
                                    <!-- Divider -->
                                    <div class="border-t border-gray-200 my-1"></div>
                                    
                                    <!-- Delete Option -->
                                    <button 
                                        type="button"
                                        @click="
                                            itemIdToDelete = {{ $service->id }};
                                            itemNameToDelete = '{{ addslashes($service->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>
                        </td>
                        @endif
                    </tr>
                    @empty
                    <tr>
                        <td colspan="{{ (\App\Helpers\ServerHelper::isApiServer() ? 9 : 8) - ($isAdminRole ? 1 : 0) }}" class="px-6 py-16 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">business_center</span>
                                </div>
                                <h3 class="text-sm font-semibold text-gray-900 mb-1">{{__('messages.service_page.no_services')}}</h3>
                                <p class="text-sm text-gray-500 mb-6">{{__('messages.service_page.no_services_description')}}</p>
                                @if(!$isAdminRole)
                                <a href="{{ \App\Helpers\UrlHelper::routeWithCityBuilding('services.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.service_page.add service')}}
                                </a>
                                @endif
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        
        <!-- Pagination -->
        @if($services->hasPages())
        <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">{{ $services->firstItem() }}</span>
                    {{__('messages.common.to')}} 
                    <span class="font-medium">{{ $services->lastItem() }}</span>
                    {{__('messages.common.of')}} 
                    <span class="font-medium">{{ $services->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($services->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="{{ $services->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($services->getUrlRange(max(1, $services->currentPage() - 2), min($services->lastPage(), $services->currentPage() + 2)) as $page => $url)
                        @if($page == $services->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($services->hasMorePages())
                        <a href="{{ $services->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 serviceData() {
    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);
        }
    }
}

function toggleStatus(serviceId, newStatus) {
    const formData = new FormData();
    formData.append('id', serviceId);
    formData.append('_token', document.querySelector('meta[name="csrf-token"]').getAttribute('content'));
    
    fetch('{{ route("service_change_status") }}', {
        method: 'POST',
        body: formData
    })
    .then(response => response.text())
    .then(data => {
        if (data === 'Success' || data.includes('Success')) {
            location.reload();
        } else {
            alert('{{__("messages.errors.something_went_wrong")}}');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('{{__("messages.errors.something_went_wrong")}}');
    });
}
</script>
@endpush
@endsection