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


@section('content')
<div x-data="counterData()" @toggle-status.window="toggleStatus($event.detail.id, $event.detail.status)" x-cloak>
    <!-- Assign User Modal -->
    <div 
        id="assignUserModal"
        x-show="showAssignUserModal"
        x-cloak
        class="fixed inset-0 z-50 overflow-y-auto"
        style="display: none;"
        @keydown.escape.window="showAssignUserModal = false"
    >
        <!-- Backdrop -->
        <div 
            class="fixed inset-0 bg-gray-900 bg-opacity-50 transition-opacity"
            @click="showAssignUserModal = false"
            x-show="showAssignUserModal"
            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="showAssignUserModal"
                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-blue-100 flex items-center justify-center">
                                <span class="material-icons text-blue-600 text-2xl">person_add</span>
                            </div>
                            <h3 class="text-xl font-bold text-gray-900 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') mr-3 @else ml-3 @endif">
                                Assign User to Counter
                            </h3>
                        </div>
                        <button 
                            type="button" 
                            @click="showAssignUserModal = 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">
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-2 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @endif">
                                Select User
                            </label>
                            <select id="assignUserSelect" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                <option value="">Loading users...</option>
                            </select>
                        </div>
                        <p class="text-xs text-gray-500 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                            This will assign the selected user to this counter. The user will be able to use the counter in the Chrome extension.
                        </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="showAssignUserModal = 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>
                        <button
                            type="button"
                            onclick="assignUserToCounter()"
                            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"
                        >
                            Assign User
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Free Counter Confirmation Modal -->
    <div 
        x-show="showFreeCounterModal"
        x-cloak
        class="fixed inset-0 z-50 overflow-y-auto"
        style="display: none;"
        @keydown.escape.window="showFreeCounterModal = false"
    >
        <!-- Backdrop -->
        <div 
            class="fixed inset-0 bg-gray-900 bg-opacity-50 transition-opacity"
            @click="showFreeCounterModal = false"
            x-show="showFreeCounterModal"
            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="showFreeCounterModal"
                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-orange-100 flex items-center justify-center">
                                <span class="material-icons text-orange-600 text-2xl">lock_open</span>
                            </div>
                            <h3 class="text-xl font-bold text-gray-900 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') mr-3 @else ml-3 @endif">
                                Free Counter
                            </h3>
                        </div>
                        <button 
                            type="button" 
                            @click="showFreeCounterModal = 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">
                            Are you sure you want to free <span x-text="counterNameToFree" class="font-semibold text-gray-900"></span>? This will release it from the current user.
                        </p>
                        <p class="text-xs text-orange-600 mt-2 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                            The user will be redirected to select a new service and counter in the Chrome extension.
                        </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="showFreeCounterModal = 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>
                        <button
                            type="button"
                            onclick="confirmFreeCounter()"
                            class="px-4 py-2.5 text-sm font-semibold text-white bg-gradient-to-r from-orange-600 to-orange-500 rounded-xl hover:from-orange-700 hover:to-orange-600 transition-all duration-200 shadow-sm hover:shadow-md"
                        >
                            Free Counter
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 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.counter_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('counters') }}/' + 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 class="@if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                <h2 class="text-3xl font-bold text-gray-900 mb-2">{{__('messages.counter_page.counters')}}</h2>
                <p class="text-gray-600">{{__('messages.counter_page.manage_counters_description')}}</p>
            </div>
            <a href="{{route('counters.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.counter_page.add counter')}}
            </a>
        </div>
    </div>

    <!-- Counters 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.counter_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.counter_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.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.counter_page.status')}}</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">Busy Status</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.counter_page.action')}}</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200" style="position: relative; overflow: visible;">
                    @forelse($counters as $key=>$counter)
                    <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">{{ ($counters->currentPage() - 1) * $counters->perPage() + $loop->iteration }}</div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm font-medium text-gray-900">{{$counter->name}}</div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm text-gray-700">{{$counter->service ? $counter->service->name : __('messages.counter_page.no_service')}}</div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm text-gray-700">
                                @if($counter->location)
                                    {{$counter->location->translated_name ?? $counter->location->name}}
                                @else
                                    {{__('messages.service_page.unknown')}}
                                @endif
                            </div>
                        </td>
                        @if(\App\Helpers\ServerHelper::isApiServer())
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm text-gray-700">
                                @if($counter->location && $counter->location->city)
                                    {{$counter->location->city->name}}
                                @else
                                    {{__('messages.service_page.unknown')}}
                                @endif
                            </div>
                        </td>
                        @endif
                        <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 {{$counter->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($counter->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
                                {{$counter->status ? __('messages.common.active') : __('messages.common.inactive')}}
                            </span>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            @if(isset($counter->is_busy) && $counter->is_busy)
                                <div class="flex flex-col gap-1">
                                    <span class="inline-flex items-center gap-x-1.5 rounded-md px-2.5 py-1 text-xs font-semibold bg-red-50 text-red-700 ring-1 ring-inset ring-red-600/20">
                                        <span class="h-1.5 w-1.5 rounded-full bg-red-600"></span>
                                        Busy
                                    </span>
                                    @if($counter->busy_user)
                                        <span class="text-xs text-gray-600">
                                            User: <strong>{{ $counter->busy_user->username ?? $counter->busy_user->name ?? 'Unknown' }}</strong>
                                        </span>
                                    @endif
                                </div>
                            @else
                                <span class="inline-flex items-center gap-x-1.5 rounded-md px-2.5 py-1 text-xs font-semibold bg-green-50 text-green-700 ring-1 ring-inset ring-green-600/20">
                                    <span class="h-1.5 w-1.5 rounded-full bg-green-600"></span>
                                    Available
                                </span>
                            @endif
                        </td>
                        <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('counters.edit', [$counter->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 
                                        type="button"
                                        onclick="toggleStatus({{$counter->id}}, {{$counter->status ? 0 : 1}}); $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 {{ $counter->status ? 'text-orange-600' : 'text-green-600' }}">{{ $counter->status ? 'pause' : 'play_arrow' }}</span>
                                        <span class="@if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">{{ $counter->status ? __('messages.message_page.deactivate') : __('messages.message_page.activate') }}</span>
                                    </button>
                                    
                                    @if(isset($counter->is_busy) && $counter->is_busy)
                                    <!-- Divider -->
                                    <div class="border-t border-gray-200 my-1"></div>
                                    
                                    <!-- Free Counter Option -->
                                    <button 
                                        type="button"
                                        @click="
                                            counterIdToFree = {{ $counter->id }};
                                            counterNameToFree = '{{ addslashes($counter->name) }}';
                                            showFreeCounterModal = true;
                                            open = false;
                                        "
                                        class="w-full flex items-center px-4 py-2.5 text-sm text-orange-600 hover:bg-orange-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">lock_open</span>
                                        <span class="@if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">Free Counter</span>
                                    </button>
                                    @else
                                    <!-- Divider -->
                                    <div class="border-t border-gray-200 my-1"></div>
                                    
                                    <!-- Assign User Option -->
                                    <button 
                                        type="button"
                                        onclick="openAssignUserModal({{$counter->id}}, {{$counter->service_id}})" 
                                        class="w-full flex items-center px-4 py-2.5 text-sm text-blue-600 hover:bg-blue-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">person_add</span>
                                        <span class="@if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">Assign User</span>
                                    </button>
                                    @endif
                                    
                                    <!-- Divider -->
                                    <div class="border-t border-gray-200 my-1"></div>
                                    
                                    <!-- Delete Option -->
                                    <button 
                                        type="button"
                                        @click="
                                            itemIdToDelete = {{ $counter->id }};
                                            itemNameToDelete = '{{ addslashes($counter->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>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="8" 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">countertops</span>
                                </div>
                                <h3 class="text-sm font-semibold text-gray-900 mb-1">{{__('messages.counter_page.no_counters')}}</h3>
                                <p class="text-sm text-gray-500 mb-6">{{__('messages.counter_page.no_counters_description')}}</p>
                                <a href="{{ \App\Helpers\UrlHelper::routeWithCityBuilding('counters.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.counter_page.add counter')}}
                                </a>
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        
        <!-- Pagination -->
        @if($counters->hasPages())
        @php
            $paginationParams = [];
            $cityParam = request()->query('city');
            $buildingParam = request()->query('building');
            
            if ($cityParam !== null && $cityParam !== '') {
                $paginationParams['city'] = $cityParam;
            }
            if ($buildingParam !== null && $buildingParam !== '') {
                $paginationParams['building'] = $buildingParam;
            }
        @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">{{ $counters->firstItem() }}</span>
                    {{__('messages.common.to')}} 
                    <span class="font-medium">{{ $counters->lastItem() }}</span>
                    {{__('messages.common.of')}} 
                    <span class="font-medium">{{ $counters->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($counters->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="{{ $counters->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($counters->appends($paginationParams)->getUrlRange(max(1, $counters->currentPage() - 2), min($counters->lastPage(), $counters->currentPage() + 2)) as $page => $url)
                        @if($page == $counters->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($counters->hasMorePages())
                        <a href="{{ $counters->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 counterData() {
    return {
        showDeleteModal: false,
        showAssignUserModal: false,
        showFreeCounterModal: false,
        itemIdToDelete: null,
        itemNameToDelete: '',
        counterIdToFree: null,
        counterNameToFree: '',
        assignCounterId: null,
        assignServiceId: null,
        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(counterId, newStatus) {
    const formData = new FormData();
    formData.append('id', counterId);
    formData.append('_token', document.querySelector('meta[name="csrf-token"]').getAttribute('content'));
    
    fetch('{{ route("counter_change_status") }}', {
        method: 'POST',
        body: formData
    })
    .then(response => response.text())
    .then(data => {
        if (data === 'Success' || data.includes('Success')) {
            // Reload page to show updated status
            window.location.reload();
        } else {
            alert('{{__('messages.errors.something_went_wrong')}}');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('{{__('messages.errors.something_went_wrong')}}');
    });
}

function confirmFreeCounter() {
    const data = window.Alpine ? window.Alpine.$data(document.querySelector('[x-data="counterData()"]')) : null;
    if (!data || !data.counterIdToFree) {
        console.error('Counter ID not found');
        return;
    }
    
    const counterId = data.counterIdToFree;
    
    // Close modal
    data.showFreeCounterModal = false;
    
    const formData = new FormData();
    formData.append('_token', document.querySelector('meta[name="csrf-token"]').getAttribute('content'));
    
    fetch('{{ url("counters") }}/' + counterId + '/free', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(result => {
        if (result.success) {
            // Reload page to show updated status
            window.location.reload();
        } else {
            // Show error message (you could use a toast notification here instead of alert)
            const errorMsg = result.message || '{{__('messages.errors.something_went_wrong')}}';
            // For now using alert, but you could replace with a toast notification
            alert(errorMsg);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('{{__('messages.errors.something_went_wrong')}}');
    });
}

function openAssignUserModal(counterId, serviceId) {
    const data = window.Alpine ? window.Alpine.$data(document.querySelector('[x-data="counterData()"]')) : null;
    if (data) {
        data.assignCounterId = counterId;
        data.assignServiceId = serviceId;
        data.showAssignUserModal = true;
    }
    
    // Get city and building parameters from URL
    const urlParams = new URLSearchParams(window.location.search);
    const cityParam = urlParams.get('city');
    const buildingParam = urlParams.get('building');
    
    // Build URL with parameters
    let usersUrl = '{{ route("get_users_for_assignment") }}';
    const params = new URLSearchParams();
    if (cityParam) {
        params.append('city', cityParam);
    }
    if (buildingParam) {
        params.append('building', buildingParam);
    }
    // CRITICAL: Add service_id to filter users by counter's service
    if (serviceId) {
        params.append('service_id', serviceId);
    }
    if (params.toString()) {
        usersUrl += '?' + params.toString();
    }
    
    // Load users for assignment
    fetch(usersUrl)
        .then(response => response.json())
        .then(data => {
            const select = document.getElementById('assignUserSelect');
            select.innerHTML = '<option value="">Select a user...</option>';
            if (data.users && data.users.length > 0) {
                data.users.forEach(user => {
                    const option = document.createElement('option');
                    option.value = user.id;
                    option.textContent = user.username + (user.name ? ' (' + user.name + ')' : '');
                    select.appendChild(option);
                });
            } else {
                select.innerHTML = '<option value="">No users available</option>';
            }
        })
        .catch(error => {
            console.error('Error loading users:', error);
            const select = document.getElementById('assignUserSelect');
            select.innerHTML = '<option value="">Error loading users</option>';
        });
}

function assignUserToCounter() {
    const data = window.Alpine ? window.Alpine.$data(document.querySelector('[x-data="counterData()"]')) : null;
    if (!data || !data.assignCounterId || !data.assignServiceId) {
        if (typeof showGlobalErrorNotification === 'function') {
            showGlobalErrorNotification('Invalid counter or service information');
        } else {
            console.error('Invalid counter or service information');
        }
        return;
    }
    
    const userId = document.getElementById('assignUserSelect').value;
    if (!userId) {
        if (typeof showGlobalErrorNotification === 'function') {
            showGlobalErrorNotification('Please select a user');
        } else {
            console.error('Please select a user');
        }
        return;
    }
    
    const formData = new FormData();
    formData.append('user_id', userId);
    formData.append('service_id', data.assignServiceId);
    formData.append('_token', document.querySelector('meta[name="csrf-token"]').getAttribute('content'));
    
    fetch('{{ url("counters") }}/' + data.assignCounterId + '/assign-user', {
        method: 'POST',
        headers: {
            'X-Requested-With': 'XMLHttpRequest',
            'Accept': 'application/json'
        },
        body: formData
    })
    .then(response => {
        // Check if response is ok
        if (!response.ok) {
            return response.json().then(err => {
                throw new Error(err.message || 'Server error');
            });
        }
        return response.json();
    })
    .then(result => {
        if (result.success) {
            data.showAssignUserModal = false;
            // Show success notification (no browser popup)
            if (result.message && typeof showGlobalSuccessNotification === 'function') {
                showGlobalSuccessNotification(result.message);
            }
            // Reload page to show updated status
            setTimeout(() => {
                window.location.reload();
            }, 500);
        } else {
            // Show error notification
            if (typeof showGlobalErrorNotification === 'function') {
                showGlobalErrorNotification(result.message || '{{__('messages.errors.something_went_wrong')}}');
            } else {
                console.error('Error:', result.message || '{{__('messages.errors.something_went_wrong')}}');
            }
        }
    })
    .catch(error => {
        console.error('Error assigning user:', error);
        // Show error notification
        if (typeof showGlobalErrorNotification === 'function') {
            showGlobalErrorNotification(error.message || '{{__('messages.errors.something_went_wrong')}}');
        } else {
            console.error('Error:', error.message || '{{__('messages.errors.something_went_wrong')}}');
        }
    });
}
</script>
@endpush
@endsection