@php
    $title = __('modules.jomhor.resources_views_services_archive.text_5eed07c670');
@endphp
<x-jomhor::layout  :title="$title">
    <x-slot name="actions">

    </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_archive.text_5950e54e8f') }}" 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_archive.text_f2dd59d978') }}</th>
                <th class="">{{ __('modules.jomhor.resources_views_services_archive.text_27dac454b0') }}</th>
                <th class="">{{ __('modules.jomhor.resources_views_services_archive.text_436bdd1217') }}</th>
                <th class="">{{ __('modules.jomhor.resources_views_services_archive.text_35c77a2d99') }}</th>
                <th class="">{{ __('modules.jomhor.resources_views_services_archive.text_85c9ea9aba') }}</th>
                <th class="">{{ __('modules.jomhor.resources_views_services_archive.text_bb7ef0ccff') }}</th>
                <th class="">{{ __('modules.jomhor.resources_views_services_archive.text_49baace8c2') }}</th>
                <th class="">{{ __('modules.jomhor.resources_views_services_archive.text_c00a274c6f') }}</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->citizen->full_name ?? '-' }}
                    </td>

                    <td class="">
                        {{ $service->citizen->mobile ?? '-' }}
                    </td>
                    <td class="">
                        @if($service->current_path && $service->current_path->job_place)
                        القسم : {{ $service->current_path->job_place->name }}
                        <br>
                        المسار : ({{ $service->current_path->name }})
                        <br>
                        الموظف : ({{@ $service->current_path->employee->name }})
                        @else
                        لا يوجد مسار
                        @endif
                    </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="">
                         اضافة : {{ \Carbon\Carbon::parse($service->added_at)->format('Y-m-d') }}
                        <br>
                         استحقاق :{{ $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">
                        <a href="{{ route('jomhor.services.show',$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>
                        @can('services.delete')
                            <form action="{{ route('jomhor.services.delete', $service->public_id) }}" method="POST" onsubmit="return confirm('هل أنت متأكد من حذف هذا الطلب؟');">
                                @csrf
                                <button type="submit"
                                        class="kt-btn flex justify-center gap-2 min-w-[100px] bg-red-100 text-red-700 transition ease-in-out hover:scale-105 hover:bg-red-200 duration-150">
                                    حذف
                                </button>
                            </form>
                        @endcan
                    </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_archive.text_cc2e4e8501') }}</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_archive.text_5178a41d54') }}</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_archive.text_49baace8c2') }}</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_archive.text_ee21da7a50') }}</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_archive.text_4b908c40a9') }}</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>
    </div>

</x-jomhor::layout>