@php
    $employeeServices = $employeeServices ?? false;
    $title = $employeeServices ? 'خدمات الموظفين' : 'طلبات الخدمات';
    $title = __('modules.jomhor.resources_views_services_show_create.text_d400ff3e40');
@endphp
@php
    $title = $employeeServices ? 'خدمات الموظفين' : $title;
@endphp
<x-jomhor::layout  :title="$title">
    <x-slot name="actions">

    </x-slot>

        <div class="min-h-screen bg-gray-50">
            {{-- Header --}}
            <div class="bg-white border-b border-b-gray-200 ">
                <div class="mx-auto px-4 sm:px-6 lg:px-8 py-7">
                    <div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
                        <div>
                            <h1 class="text-2xl font-extrabold tracking-tight text-gray-900">{{ __('modules.jomhor.resources_views_services_show_create.text_4c2272fc3d') }}</h1>
                            <p class="mt-1 text-sm text-gray-600">{{ __('modules.jomhor.resources_views_services_show_create.text_9936209033') }}</p>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Categories Grid --}}
            <div class="mx-auto  px-4 sm:px-6 lg:px-8 py-8">
                <div id="categoriesGrid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                    @foreach($categories as $cat)
                        @php
                            $servicesCount = $cat->services?->count() ?? 0;
                            $shortDesc = $cat->description ?? '';
                        @endphp

                        <button
                            type="button"
                            class="relative overflow-visible mr-24 rounded-2xl border border-gray-200 bg-white shadow-sm hover:shadow-lg transition"
                            data-name="{{ mb_strtolower($cat->name ?? '') }}"
                            data-modal-target="#categoryModal-{{ (int)$cat->id }}"
                        >
                            <div class="absolute top-1/2 -translate-y-1/2 -right-24 w-[200px] flex justify-center">
                                <div class="relative">
                                    {{-- Glow --}}
                                    <div class="absolute inset-0 rounded-full bg-blue-200/40 blur-2xl"></div>

                                    {{-- Circle --}}
                                    <div class="relative h-36 w-36 rounded-full bg-white border border-gray-200 shadow-xl flex items-center justify-center">
                                        <img
                                            src="{{ $cat->image_url }}"
                                            alt="{{ $cat->name }}"
                                            class="w-full rounded-full object-contain"
                                        >
                                    </div>
                                </div>
                            </div>

                            {{-- Content --}}
                            <div class="pt-4 pb-4 pl-4 pr-24">
                                <div class="flex items-start gap-3">

                                    <div class="min-w-0 flex-1">
                                        <div class="flex items-start justify-between gap-2">
                                            <h3 class="text-sm font-extrabold text-gray-900 line-clamp-2">{{ $cat->name }}</h3>
                                            <span class="shrink-0 inline-flex items-center rounded-full border border-gray-200 bg-gray-50 px-2.5 py-1 text-[11px] font-bold text-gray-700">
                                        {{ $servicesCount }} خدمة
                                    </span>
                                        </div>

                                        @if(!empty($shortDesc))
                                            <p class="mt-2 text-xs leading-6 text-gray-600 line-clamp-3">
                                                {{ $shortDesc }}
                                            </p>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </button>
                    @endforeach
                </div>

                {{-- Modals per category (HTML only) --}}
                @foreach($categories as $cat)
                    @php
                        $services = $cat->services ?? collect();
                    @endphp

                    <div id="categoryModal-{{ (int)$cat->id }}" class="modal hidden fixed inset-0 z-50">
                        {{-- Backdrop --}}
                        <div class="modal-backdrop absolute inset-0 bg-black/50"></div>

                        {{-- Panel --}}
                        <div class="relative h-full w-full flex items-end sm:items-center justify-center p-4">
                            <div class="modal-panel w-full sm:max-w-5xl rounded-2xl bg-white shadow-xl overflow-hidden">
                            {{-- Modal Header --}}
                                <div class="px-5 sm:px-6 py-4 bg-gray-50">
                                    <div class="flex items-start justify-between gap-4">
                                        <div class="flex items-start gap-3 min-w-0">
                                            <div class="shrink-0">
                                                @if(!empty($cat->image_url))
                                                    <img src="{{ $cat->image_url }}" class="h-18 w-18 rounded object-cover bg-white" alt="{{ $cat->name }}">
                                                @else
                                                    <div class="h-18 w-18 rounded-2xl border bg-white flex items-center justify-center">
                                                        <svg class="h-6 w-6 text-gray-400" viewBox="0 0 24 24" fill="none">
                                                            <path d="M4 7h16M4 12h16M4 17h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
                                                        </svg>
                                                    </div>
                                                @endif
                                            </div>

                                            <div class="min-w-0">
                                                <div class="flex flex-wrap items-center gap-2">
                                                    <h3 class="text-base sm:text-lg font-extrabold text-gray-900 truncate">{{ $cat->name }}</h3>
                                                    <span class="inline-flex items-center rounded-full border border-gray-200 bg-white px-3 py-1 text-xs font-bold text-gray-700">
                                                {{ $services->count() }} خدمة
                                            </span>
                                                </div>

                                                @if(!empty($cat->description))
                                                    <p class="mt-1 text-sm text-gray-600 line-clamp-2">{{ $cat->description }}</p>
                                                @endif
                                            </div>
                                        </div>

                                        <button type="button" class="modal-close inline-flex items-center justify-center rounded-xl border border-gray-200 bg-white px-3 py-2 text-sm font-bold text-gray-800 hover:bg-gray-100">
                                            إغلاق
                                        </button>
                                    </div>
                                </div>

                                {{-- Modal Body --}}
                                <div class="p-5 sm:p-6 max-h-[75vh] overflow-auto">
                                    @if($services->count())
                                        <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-2 gap-4">
                                            @foreach($services as $srv)
                                                @php
                                                    $fees = (float) ($srv->service_fees ?? 0);
                                                @endphp
                                                <div class="relative overflow-visible mr-24 rounded-2xl border border-gray-200 bg-white shadow-sm hover:shadow-lg transition">

                                                    {{-- Side Icon Wrapper --}}
                                                    <div class="absolute top-1/2 -translate-y-1/2 -right-24 w-[200px] flex justify-center">
                                                        <div class="relative">
                                                            {{-- Glow --}}
                                                            <div class="absolute inset-0 rounded-full bg-blue-200/40 blur-2xl"></div>

                                                            {{-- Circle --}}
                                                            <div class="relative h-36 w-36 rounded-full bg-white border border-gray-200 shadow-xl flex items-center justify-center">
                                                                <img
                                                                    src="{{ $srv->image_url }}"
                                                                    alt="{{ $srv->name }}"
                                                                    class="w-full rounded-full object-contain"
                                                                >
                                                            </div>
                                                        </div>
                                                    </div>

                                                    {{-- Content --}}
                                                    <div class="pt-4 pb-4 pl-4 pr-24">
                                                        {{-- Price --}}
                                                        <h4 class="text-base font-extrabold text-gray-900">
                                                            {{ $srv->name }}
                                                        </h4>

                                                        @if($srv->description)
                                                            <p class="mt-2 text-sm leading-6 text-gray-600 line-clamp-3">
                                                                {{ $srv->description }}
                                                            </p>
                                                        @endif

                                                        <div class="mt-4 flex justify-between align-items-center flex-wrap gap-2">
                                                            <a href="{{ route('jomhor.services.create_service', $srv->id) }}"
                                                               class="inline-flex items-center justify-center rounded-xl bg-blue-600 px-4 py-2 text-sm font-bold text-white hover:bg-blue-700">
                                                                تقديم الطلب
                                                            </a>
                                                            <span class="inline-flex items-center rounded-full px-3 py-1 text-xs font-bold
                                                                {{ $fees > 0 ? 'bg-amber-50 text-amber-700' : 'bg-green-50 text-green-700' }}">
                                                                {{ $fees > 0 ? number_format($fees,0).' شيكل' : 'مجانية' }}
                                                            </span>

                                                        </div>
                                                    </div>
                                                </div>

                                            @endforeach
                                        </div>
                                    @else
                                        <div class="rounded-2xl border bg-gray-50 p-8 text-center">
                                            <div class="mx-auto h-14 w-14 rounded-2xl border bg-white flex items-center justify-center">
                                                <svg class="h-7 w-7 text-gray-400" viewBox="0 0 24 24" fill="none">
                                                    <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Z" stroke="currentColor" stroke-width="1.5"/>
                                                    <path d="M8 12h8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
                                                </svg>
                                            </div>
                                            <p class="mt-3 text-sm font-bold text-gray-800">{{ __('modules.jomhor.resources_views_services_show_create.text_f53b506100') }}</p>
                                            <p class="mt-1 text-xs text-gray-500">{{ __('modules.jomhor.resources_views_services_show_create.text_965a7c043a') }}</p>
                                        </div>
                                    @endif
                                </div>

                                {{-- Modal Footer --}}
                                <div class="px-5 sm:px-6 py-4 border-t border-t-gray-200 bg-gray-50 flex items-center justify-between">
                                    <div class="text-xs text-gray-600">
                                        اضغط خارج النافذة أو زر <span class="font-bold">{{ __('modules.jomhor.resources_views_services_show_create.text_12e6f4df3d') }}</span> للخروج.
                                    </div>
                                    <button type="button" class="modal-close inline-flex items-center justify-center rounded-xl bg-gray-900 px-4 py-2 text-sm font-bold text-white hover:bg-black">
                                        إغلاق النافذة
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>






@push('scripts')
            <script>
                function filterCategories(q) {
                    q = (q || '').toLowerCase().trim();
                    document.querySelectorAll('.cat-card').forEach(el => {
                        const name = (el.getAttribute('data-name') || '');
                        el.style.display = (!q || name.includes(q)) ? '' : 'none';
                    });
                }

                function openModal(selector) {
                    const modal = document.querySelector(selector);
                    if (!modal) return;
                    modal.classList.remove('hidden');
                    document.documentElement.classList.add('overflow-hidden');
                    document.body.classList.add('overflow-hidden');
                }

                function closeModal(modal) {
                    modal.classList.add('hidden');
                    document.documentElement.classList.remove('overflow-hidden');
                    document.body.classList.remove('overflow-hidden');
                }

                // Open by data-modal-target
                document.addEventListener('click', function(e) {
                    const opener = e.target.closest('[data-modal-target]');
                    if (opener) {
                        const target = opener.getAttribute('data-modal-target');
                        openModal(target);
                        return;
                    }

                    // Close buttons
                    const closeBtn = e.target.closest('.modal-close');
                    if (closeBtn) {
                        const modal = e.target.closest('.modal');
                        if (modal) closeModal(modal);
                        return;
                    }

                    // Close on backdrop click
                    if (e.target.classList.contains('modal-backdrop')) {
                        const modal = e.target.closest('.modal');
                        if (modal) closeModal(modal);
                        return;
                    }
                });

                // Close on ESC
                document.addEventListener('keydown', function(e) {
                    if (e.key === 'Escape') {
                        const openModalEl = document.querySelector('.modal:not(.hidden)');
                        if (openModalEl) closeModal(openModalEl);
                    }
                });
            </script>
    @endpush



</x-jomhor::layout>