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

@section('content')
<div x-data="messageData()" 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.message_page.delete_confirm')}}
                        </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="deleteActionUrl"
                            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.message_page.title')}}</h2>
                <p class="text-gray-600">{{__('messages.message_page.manage_messages_description')}}</p>
            </div>
            <a href="{{ \App\Helpers\UrlHelper::routeWithCityBuilding('messages.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.message_page.add_message')}}
            </a>
        </div>
    </div>

    <!-- Messages 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.menu.message')}}
                        </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.common.type')}}
                        </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.message_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.message_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.common.priority')}}
                        </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.common.status')}}
                        </th>
                        <th scope="col" class="px-6 py-4 text-center text-xs font-bold text-gray-700 uppercase tracking-wider">
                            {{__('messages.message_page.global')}}
                        </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.common.action')}}
                        </th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200" style="position: relative; overflow: visible;">
                    @forelse($messages as $key=>$message)
                    <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">{{ ($messages->currentPage() - 1) * $messages->perPage() + $loop->iteration }}</div>
                            <!-- Debug: Message ID {{ $message->id }}, Created: {{ $message->created_at }} -->
                        </td>
                        <td class="px-6 py-4">
                            <div class="text-sm text-gray-900 max-w-xs space-y-1">
                                @if($message->message_text_ku)
                                    <div class="truncate group-hover:text-blue-700 transition-colors" title="{{ $message->message_text_ku }}">
                                        <span class="text-xs font-semibold text-gray-500">{{__('messages.settings.language_kurdish')}}:</span> {{ Str::limit($message->message_text_ku, 40) }}
                                    </div>
                                @endif
                                @if($message->message_text_iq)
                                    <div class="truncate group-hover:text-blue-700 transition-colors" title="{{ $message->message_text_iq }}">
                                        <span class="text-xs font-semibold text-gray-500">{{__('messages.settings.language_arabic')}}:</span> {{ Str::limit($message->message_text_iq, 40) }}
                                    </div>
                                @endif
                                @if($message->message_text_en)
                                    <div class="truncate group-hover:text-blue-700 transition-colors" title="{{ $message->message_text_en }}">
                                        <span class="text-xs font-semibold text-gray-500">{{__('messages.settings.language_english')}}:</span> {{ Str::limit($message->message_text_en, 40) }}
                                    </div>
                                @endif
                                @if(!$message->message_text_ku && !$message->message_text_iq && !$message->message_text_en && $message->message_text)
                                    <div class="truncate group-hover:text-blue-700 transition-colors" title="{{ $message->message_text }}">
                                        {{ Str::limit($message->message_text, 50) }}
                                    </div>
                                @endif
                            </div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="inline-flex items-center px-2.5 py-1 rounded-md text-xs font-semibold bg-blue-100 text-blue-800 ring-1 ring-inset ring-blue-600/20">
                                {{__('messages.message_types.' . $message->message_type)}}
                            </span>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            @if($message->is_global_override)
                                <span class="inline-flex items-center px-2.5 py-1 rounded-md text-xs font-semibold bg-red-100 text-red-800 ring-1 ring-inset ring-red-600/20">
                                    {{__('messages.message_page.global')}}
                                </span>
                            @else
                                <div class="text-sm text-gray-700">{{ $message->location->translated_name ?? __('messages.message_page.n_a') }}</div>
                            @endif
                        </td>
                        @if(\App\Helpers\ServerHelper::isApiServer())
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm text-gray-700">
                                @if($message->location && $message->location->city)
                                    {{$message->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">{{ $message->service->name ?? __('messages.message_page.all_services') }}</div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            @if($message->priority_level == 1)
                                <span class="inline-flex items-center px-2.5 py-1 rounded-md text-xs font-semibold bg-red-100 text-red-800 ring-1 ring-inset ring-red-600/20">
                                    {{__('messages.message_page.global')}}
                                </span>
                            @elseif($message->priority_level == 2)
                                <span class="inline-flex items-center px-2.5 py-1 rounded-md text-xs font-semibold bg-orange-100 text-orange-800 ring-1 ring-inset ring-orange-600/20">
                                    {{__('messages.message_page.building')}}
                                </span>
                            @else
                                <span class="inline-flex items-center px-2.5 py-1 rounded-md text-xs font-semibold bg-blue-100 text-blue-800 ring-1 ring-inset ring-blue-600/20">
                                    {{__('messages.message_page.service')}}
                                </span>
                            @endif
                        </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 {{ $message->is_active ? '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($message->is_active)
                                    <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
                                {{ $message->is_active ? __('messages.message_page.active') : __('messages.message_page.inactive') }}
                            </span>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-center">
                            @if($message->is_global_override)
                                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-green-100 text-green-600">
                                    <span class="material-icons text-base">check_circle</span>
                                </span>
                            @else
                                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-gray-100 text-gray-400">
                                    <span class="material-icons text-base">cancel</span>
                                </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: {{ \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 - Using fixed positioning to escape table overflow -->
                                <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('messages.edit', [$message->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.message_page.edit')}}</span>
                                    </a>
                                    
                                    <!-- Divider -->
                                    <div class="border-t border-gray-200 my-1"></div>
                                    
                                    <!-- Toggle Status Option -->
                                    <button 
                                        onclick="toggleStatus({{ $message->id }}); $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 {{ $message->is_active ? 'text-orange-600' : 'text-green-600' }}">{{ $message->is_active ? 'pause' : 'play_arrow' }}</span>
                                        <span class="@if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">{{ $message->is_active ? __('messages.message_page.deactivate') : __('messages.message_page.activate') }}</span>
                                    </button>
                                    
                                    <!-- Divider -->
                                    <div class="border-t border-gray-200 my-1"></div>
                                    
                                    <!-- Delete Option -->
                                        <button 
                                        type="button"
                                        @click="
                                            deleteActionUrl = '{{ route('messages.destroy', $message) }}';
                                            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.message_page.delete')}}</span>
                                        </button>
                                </div>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="{{ \App\Helpers\ServerHelper::isApiServer() ? 10 : 9 }}" 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">inbox</span>
                                </div>
                                <h3 class="text-sm font-semibold text-gray-900 mb-1">{{__('messages.message_page.no_messages')}}</h3>
                                <p class="text-sm text-gray-500">{{__('messages.message_page.no_messages_description')}}</p>
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        
        <!-- Pagination -->
        @if($messages->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">{{ $messages->firstItem() }}</span>
                    {{__('messages.common.to')}} 
                    <span class="font-medium">{{ $messages->lastItem() }}</span>
                    {{__('messages.common.of')}} 
                    <span class="font-medium">{{ $messages->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($messages->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="{{ $messages->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($messages->getUrlRange(max(1, $messages->currentPage() - 2), min($messages->lastPage(), $messages->currentPage() + 2)) as $page => $url)
                        @if($page == $messages->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($messages->hasMorePages())
                        <a href="{{ $messages->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 messageData() {
    return {
        showDeleteModal: false,
        deleteActionUrl: '',
        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(messageId) {
    fetch(`/messages/${messageId}/toggle-status`, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Content-Type': 'application/json',
        },
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            location.reload();
        }
    })
    .catch(error => {
        console.error('Error:', error);
    });
}
</script>
@endpush
@endsection