@php
    $title = __('modules.jomhor.resources_views_services_index.text_18817477f1');
@endphp
<x-jomhor::layout  :title="$title">
    <x-slot name="actions">
        <x-layout.button type="href" permission="dashboard.view" modaltitle="{{ __('modules.jomhor.resources_views_services_index.text_2515cad179') }}" href="{{route('jomhor.services.create')}}">
            <i class="ki-filled ki-plus "></i>
            اضافة
        </x-layout.button>
    </x-slot>
    <x-search  :searchable="\Modules\PublicService\Entities\Service::getSearchable()"/>
    @php
        $statusOptions = [
            '' => 'كل الحالات',
            'new' => 'جديد',
            'ongoing' => 'قيد المعالجة',
            'rejected' => 'مرفوض',
            'hold' => 'معلق',
            'completed' => 'مكتمل',
        ];

        $statusColors = [
            'new' => 'bg-blue-100 text-blue-700',
            'ongoing' => 'bg-green-100 text-green-700',
            'rejected' => 'bg-red-100 text-red-700',
            'hold' => 'bg-yellow-100 text-yellow-700',
            'completed' => 'bg-gray-200 text-gray-700',
        ];

        $dueBadge = function($service) {
            if (!$service->due_date) return null;
            $due = \Carbon\Carbon::parse($service->due_date)->startOfDay();
            $today = now()->startOfDay();
            $days = $today->diffInDays($due, false); // ممكن سالب

            if ($days < 0) return ['text' => 'متأخر '.abs($days).' يوم', 'class' => 'bg-red-100 text-red-700'];
            if ($days === 0) return ['text' => 'اليوم آخر موعد', 'class' => 'bg-orange-100 text-orange-700'];
            if ($days <= 2) return ['text' => 'متبقي '.$days.' يوم', 'class' => 'bg-yellow-100 text-yellow-700'];
            return ['text' => 'متبقي '.$days.' يوم', 'class' => 'bg-emerald-100 text-emerald-700'];
        };
    @endphp

    <x-layout.card :title="$title">
        <x-slot:actions>
            <label class="input input-sm">
                <i class="ki-filled ki-magnifier">
                </i>
                <input data-kt-table-filter="search" placeholder="{{ __('modules.jomhor.resources_views_services_index.text_68ae2d6285') }}" type="text" value=""/>

            </label>
        </x-slot:actions>



        <x-layout.table>
            <x-slot:thead>
                <th class="w-[20px] text-center p-[5px]">
                    #
                </th>
                <th class="">{{ __('modules.jomhor.resources_views_services_index.text_72b9ea2ae3') }}</th>
                <th class="">{{ __('modules.jomhor.resources_views_services_index.text_d977daf8aa') }}</th>
                <th class="">{{ __('modules.jomhor.resources_views_services_index.text_b772817abb') }}</th>
                <th class="">{{ __('modules.jomhor.resources_views_services_index.text_86003fbd61') }}</th>
                <th class="">{{ __('modules.jomhor.resources_views_services_index.text_5db4e53cc6') }}</th>
                <th class="">{{ __('modules.jomhor.resources_views_services_index.text_8b544ce7c7') }}</th>
                <th class="">{{ __('modules.jomhor.resources_views_services_index.text_49505b8bc3') }}</th>
{{--                <th class="">{{ __('modules.jomhor.resources_views_services_index.text_f4a9e7d6d9') }}</th>--}}
{{--                <th class="">{{ __('modules.jomhor.resources_views_services_index.text_bc79510dc0') }}</th>--}}
                <th class="">{{ __('modules.jomhor.resources_views_services_index.text_65029e6fb4') }}</th>
            </x-slot:thead>
            @forelse($services as $service)
                @php
                    $statusClass = $statusColors[$service->service_status] ?? 'bg-gray-100 text-gray-600';
                    $badge = $dueBadge($service);
                @endphp

                <tr class="hover:bg-gray-50">
                    <td class="">
                        {{ $loop->iteration + ($services->currentPage() - 1) * $services->perPage() }}
                    </td>

                    <td class=" font-mono text-xs">
                        {{ $service->service_code }}
                    </td>

                    <td class="">
                        {{ $service->service_template->name ?? '-' }}
                    </td>

                    <td class="">
                        {{ $service->service_category->name ?? '-' }}
                    </td>
                    <td class="">
                        {{ $service->citizen->full_name ?? '-' }}
                    </td>

                    <td class="">
                        {{ $service->citizen->mobile ?? '-' }}
                    </td>

                    <td class="">
                            <span class="px-2 py-1 rounded text-xs font-semibold {{ $statusClass }}">
                                {{ $statusOptions[$service->service_status] ?? $service->service_status }}
                            </span>
                    </td>

                    <td class="">
                        @if($badge)
                            <span class="px-2 py-1 rounded text-xs font-semibold {{ $badge['class'] }}">
                                    {{ $badge['text'] }}
                                </span>
                        @else
                            <span class="text-gray-400">-</span>
                        @endif
                    </td>

{{--                    <td class="">--}}
{{--                        {{ \Carbon\Carbon::parse($service->added_at)->format('Y-m-d') }}--}}
{{--                    </td>--}}

{{--                    <td class="">--}}
{{--                        {{ $service->due_date ? \Carbon\Carbon::parse($service->due_date)->format('Y-m-d') : '-' }}--}}
{{--                    </td>--}}

                    @php
                        $json=json_encode([
                             "service_code" => $service->service_code,
                            "status" => $statusOptions[$service->service_status] ?? $service->service_status,
                            "template" => $service->service_template->name ?? "-",
                            "category" => $service->service_category->name ?? "-",
                            "street_number" => $service->street_number,
                            "build_number" => $service->build_number,
                            "details" => $service->service_details,
                            "comments" => $service->service_comments,
                            "added_at" => $service->added_at,
                            "due_date" => $service->due_date,
                        ], JSON_UNESCAPED_UNICODE);
                    @endphp
                    <td class=" flex justify-center gap-2">
                        <button
                            type="button"
                            class="kt-btn  flex justify-center gap-2 min-w-[100px] transition ease-in-out hover:scale-105 bg-indigo-500 duration-150"
                            data-modal-open="1"
                            data-service='{!! $json !!}'
                        >
                            عرض سريع
                        </button>

                        <a href="{{ route('jomhor.'.$service->active_path->route_name,$service->public_id) }}"
                           class="kt-btn  flex justify-center gap-2 min-w-[100px] transition ease-in-out hover:scale-105 hover:bg-indigo-500 duration-150">
                            التفاصيل
                        </a>
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="9" class="px-4 py-6 text-center text-gray-500">
                        لا توجد طلبات
                    </td>
                </tr>
            @endforelse

            <x-slot:pagination>
                {{$services->links()}}
            </x-slot:pagination>
        </x-layout.table>

    </x-layout.card>
    <div>




        {{-- ✅ Modal --}}
        <div id="serviceModal" class="fixed inset-0 z-50 hidden" style="z-index: 1052">
            <div class="absolute inset-0 bg-black/40" data-modal-close="1"></div>

            <div class="relative max-w-2xl mx-auto mt-16 bg-white rounded-xl shadow-lg overflow-hidden">
                <div class="p-4 border-b flex items-center justify-between">
                    <div>
                        <div class="text-sm text-gray-500">{{ __('modules.jomhor.resources_views_services_index.text_ca1f027f43') }}</div>
                        <div class="font-bold text-gray-800" id="m_service_code">-</div>
                    </div>

                    <button class="p-2 rounded hover:bg-gray-100" data-modal-close="1" aria-label="close">
                        ✕
                    </button>
                </div>

                <div class="p-4 space-y-3 text-sm">
                    <div class="flex flex-wrap gap-2">
                        <span class="px-2 py-1 rounded bg-gray-100 text-gray-700" id="m_status">-</span>
                        <span class="px-2 py-1 rounded bg-gray-100 text-gray-700" id="m_template">-</span>
                        <span class="px-2 py-1 rounded bg-gray-100 text-gray-700" id="m_category">-</span>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                        <div class="bg-gray-50 rounded-lg p-3">
                            <div class="text-gray-500 mb-1">{{ __('modules.jomhor.resources_views_services_index.text_d496bc96c7') }}</div>
                            <div id="m_address">-</div>
                        </div>
                        <div class="bg-gray-50 rounded-lg p-3">
                            <div class="text-gray-500 mb-1">{{ __('modules.jomhor.resources_views_services_index.text_d79557dd8f') }}</div>
                            <div id="m_dates">-</div>
                        </div>
                    </div>

                    <div class="bg-gray-50 rounded-lg p-3">
                        <div class="text-gray-500 mb-1">{{ __('modules.jomhor.resources_views_services_index.text_5253e1115e') }}</div>
                        <div class="whitespace-pre-line" id="m_details">-</div>
                    </div>

                    <div class="bg-gray-50 rounded-lg p-3">
                        <div class="text-gray-500 mb-1">{{ __('modules.jomhor.resources_views_services_index.text_0f03b53f98') }}</div>
                        <div class="whitespace-pre-line" id="m_comments">-</div>
                    </div>
                </div>

                <div class="p-4 border-t flex justify-end">
                    <button class="px-4 py-2 rounded-md bg-gray-100 hover:bg-gray-200" data-modal-close="1">
                        إغلاق
                    </button>
                </div>
            </div>
        </div>

        {{-- ✅ JS للـ Modal --}}
        <script>
            (function () {
                const modal = document.getElementById('serviceModal');
                const els = {
                    code: document.getElementById('m_service_code'),
                    status: document.getElementById('m_status'),
                    template: document.getElementById('m_template'),
                    category: document.getElementById('m_category'),
                    address: document.getElementById('m_address'),
                    dates: document.getElementById('m_dates'),
                    details: document.getElementById('m_details'),
                    comments: document.getElementById('m_comments'),
                };

                function openModal(payload) {
                    els.code.textContent = payload.service_code ?? '-';
                    els.status.textContent = 'الحالة: ' + (payload.status ?? '-');
                    els.template.textContent = 'الخدمة: ' + (payload.template ?? '-');
                    els.category.textContent = 'التصنيف: ' + (payload.category ?? '-');

                    const street = payload.street_number ?? '-';
                    const build  = payload.build_number ?? '-';
                    els.address.textContent = `شارع: ${street} | مبنى: ${build}`;

                    const added = payload.added_at ? String(payload.added_at).slice(0,10) : '-';
                    const due   = payload.due_date ? String(payload.due_date).slice(0,10) : '-';
                    els.dates.textContent = `الإضافة: ${added} | الاستحقاق: ${due}`;

                    els.details.textContent = payload.details ?? '-';
                    els.comments.textContent = payload.comments ?? '-';

                    modal.classList.remove('hidden');
                    document.body.classList.add('overflow-hidden');
                }

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

                document.addEventListener('click', function (e) {
                    const openBtn = e.target.closest('[data-modal-open="1"]');
                    if (openBtn) {
                        try {
                            const payload = JSON.parse(openBtn.getAttribute('data-service'));
                            console.log(payload);
                            openModal(payload);
                        } catch (err) {}
                        return;
                    }

                    if (e.target.closest('[data-modal-close="1"]')) {
                        closeModal();
                    }
                });

                document.addEventListener('keydown', function (e) {
                    if (e.key === 'Escape' && !modal.classList.contains('hidden')) closeModal();
                });
            })();
        </script>
        <script>
            setInterval(function () {
                ReloadMe();
            }, 15000); // 15 ثانية
        </script>
    </div>

</x-jomhor::layout>