@php
    use Carbon\Carbon;

      $title = __('modules.jomhor.resources_views_services_show.text_bd7bbd3047');


    $paths = collect($service->paths ?? [])->sortBy('step_number')->values();

    $activePath = $paths->first(fn($p) => (int)($p->is_active ?? 0) === 1);

    // تلوين حالات الرد
    $responseMap = [
        'accept' => ['label' => 'مقبول', 'class' => 'bg-green-100 text-green-700'],
        'forward' => ['label' => 'تم التحويل', 'class' => 'bg-blue-100 text-blue-700'],
        'reject' => ['label' => 'مرفوض', 'class' => 'bg-red-100 text-red-700'],
        'hold' => ['label' => 'معلق', 'class' => 'bg-yellow-100 text-yellow-700'],
    ];

    // حالة الطلب العامة
    $responseMap['transfer'] = ['label' => 'تم تغيير الموظف', 'class' => 'bg-indigo-100 text-indigo-700'];
    $responseMap['change_step'] = ['label' => 'تم تغيير المرحلة', 'class' => 'bg-orange-100 text-orange-700'];
    $responseMap['request_citizen_attachments'] = ['label' => 'تم طلب مرفقات', 'class' => 'bg-amber-100 text-amber-700'];

    $serviceStatusMap = [
        'new' => ['label' => 'جديد', 'class' => 'bg-blue-100 text-blue-700'],
        'ongoing' => ['label' => 'قيد المعالجة', 'class' => 'bg-green-100 text-green-700'],
        'rejected' => ['label' => 'مرفوض', 'class' => 'bg-red-100 text-red-700'],
        'hold' => ['label' => 'معلق', 'class' => 'bg-yellow-100 text-yellow-700'],
        'completed' => ['label' => 'مكتمل', 'class' => 'bg-gray-200 text-gray-700'],
    ];

    // عداد الأيام المتبقية
    $dueBadge = null;
    if (!empty($service->due_date)) {
        $due = Carbon::parse($service->due_date)->startOfDay();
        $today = now()->startOfDay();
        $days = $today->diffInDays($due, false);

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

    $additionalDataRows = collect();
    $decodedAdditionalData = json_decode((string) ($service->additional_data_form ?? ''), true);
    if (is_array($decodedAdditionalData)) {
        if (array_is_list($decodedAdditionalData)) {
            $additionalDataRows = collect($decodedAdditionalData)
                ->filter(fn($row) => is_array($row) && !empty($row['title'] ?? $row['key'] ?? null))
                ->map(function ($row) {
                    return [
                        'title' => $row['title'] ?? $row['key'] ?? '-',
                        'value' => $row['value'] ?? '-',
                    ];
                })
                ->values();
        } else {
            $additionalDataRows = collect($decodedAdditionalData)
                ->map(function ($value, $key) {
                    return [
                        'title' => $key,
                        'value' => $value ?: '-',
                    ];
                })
                ->values();
        }
    }
    if(!isset($show_responses)){
         $show_responses=true;
    }
    if(!isset($show_attachments)){
         $show_attachments=true;
    }
    if(!isset($show_paths)){
         $show_paths=true;
    }

    $mapRouteParameters = filled($service->latitude) && filled($service->longitude)
        ? [
            'lat' => $service->latitude,
            'lng' => $service->longitude,
        ]
        : [
            'build' => $service->build_number,
            'street' => $service->street_number,
        ];

@endphp

<x-jomhor::layout :title="$title">
    <x-slot name="actions">

    </x-slot>
    @if(($canDepartmentPullFromDetails ?? false) && $activePath)
        <div class="mb-3 rounded-xl border border-amber-200 bg-amber-50 px-4 py-3">
            <div class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
                <div class="text-sm font-semibold text-amber-800">
                    الطلب محجوز لدى الموظف: {{ $departmentPullEmployeeName ?: 'غير محدد' }}
                </div>
                <form action="{{ route('jomhor.services.department_requests.pull', $service->public_id) }}" method="post">
                    @csrf
                    <input type="hidden" name="redirect_to" value="show">
                    <button type="submit" class="kt-btn kt-btn-secondary">
                        سحب الطلب لحسابي
                    </button>
                </form>
            </div>
        </div>
    @endif
    <div class="kt-card kt-card-accent">
        <div class="kt-card-header flex flex-col md:flex-row md:items-center md:justify-between gap-3 mb-0">
            {{-- Header --}}

            <div>
                <h1 class="text-2xl font-bold text-gray-800 font-mono">طلب رقم : {{ $service->service_code }}</h1>

            </div>


            <div class="flex gap-2">
                @can('services.print')
                    <a href="{{ route('jomhor.services.print', $service->public_id) }}"
                       target="_blank"
                       class="px-4 py-2 rounded-md bg-emerald-100 text-emerald-700 hover:bg-emerald-200">
                        طباعة الطلب
                    </a>
                @endcan
                @can('services.change_active_employee')
                    @if($activePath)
                    <a href="{{ route('jomhor.services.change_active_employee.show', $service->public_id) }}"
                       class="px-4 py-2 rounded-md bg-blue-100 text-blue-700 hover:bg-blue-200 OpenModal"
                       data-title="{{ __('modules.jomhor.resources_views_services_show.text_4a47047b20') }}"
                       level="1">
                        تغيير الموظف الحالي
                    </a>
                    @endif
                @endcan
                @if(($canDepartmentDelegate ?? false) && $activePath)
                    <button
                        type="button"
                        class="px-4 py-2 rounded-md bg-indigo-100 text-indigo-700 hover:bg-indigo-200"
                        onclick="openDepartmentDelegateModal()"
                    >
                        تفويض موظف من قسمي
                    </button>
                @endif
                @can('services.delete')
                    <form action="{{ route('jomhor.services.delete', $service->public_id) }}" method="POST" onsubmit="return confirm('هل أنت متأكد من حذف هذا الطلب؟');">
                        @csrf
                        <button type="submit" class="px-4 py-2 rounded-md bg-red-100 text-red-700 hover:bg-red-200">
                            حذف الطلب
                        </button>
                    </form>
                @endcan
                <a href="{{ route('jomhor.services.index') }}"
                   class="px-4 py-2 rounded-md bg-gray-100 text-gray-700 hover:bg-gray-200">
                    رجوع للقائمة
                </a>
            </div>


        </div>
        <div class="kt-card-content">
            <div class="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-4">
                <h3 class="text-xl">
                    <span>{{ __('modules.jomhor.resources_views_services_show.text_126eb6e9ef') }}  </span>
                    <span>{{ $service->service_template->name ?? '-' }}</span>
                </h3>

                <h3 class="text-xl">
                    <span>{{ __('modules.jomhor.resources_views_services_show.text_fec45ec6d3') }} </span>
                    <span
                        class="px-2 py-1 rounded text-xs font-semibold {{ $serviceStatusMap[$service->service_status]['class'] ?? 'bg-gray-100 text-gray-600' }}">
                    {{ $serviceStatusMap[$service->service_status]['label'] ?? $service->service_status }}
                </span>
                </h3>
                {{--                <div>--}}
                @if($dueBadge)
                    <h3 class="text-lg">
                        <span>{{ __('modules.jomhor.resources_views_services_show.text_d418173151') }}  </span>
                        <span class="px-2 py-1 rounded text-xs font-semibold {{ $dueBadge['class'] }}">
                        {{ $dueBadge['text'] }}
                    </span>
                    </h3>

                @endif
                <h3 class="text-lg">
                    <span>{{ __('modules.jomhor.resources_views_services_show.text_7a3a45f55e') }}  </span>
                    <span
                        class="font-semibold {{ (int)($service->is_fees_collected ?? 0) && $service->service_fees ? 'text-green-700' : 'text-red-600' }}"

                    >{{ $service->service_fees?$service->{{ __('modules.jomhor.resources_views_services_show.text_9eadeaff50') }}</span>
                    <span
                        class="font-semibold {{ (int)($service->is_fees_collected ?? 0) ? 'text-green-700' : 'text-red-600' }}">
                        {{ (int)($service->is_fees_collected ?? 0) ? '(تم التحصيل)' : '(غير محصل)' }}
                    </span>
                </h3>


                {{--                </div>--}}

            </div>
        </div>
    </div>
    <div class="kt-card kt-card-accent">
        <div class="kt-card-header flex flex-col md:flex-row md:items-center md:justify-between gap-3 mb-0">
            {{-- Header --}}

            <div>
                <h1 class="text-2xl font-bold text-gray-800 font-mono">{{ __('modules.jomhor.resources_views_services_show.text_345b3c5495') }} </h1>

            </div>
            <div class="flex flex-wrap justify-center gap-3 md:gap-5">
                @if($service->build_number && $service->street_number)
                    <a href="{{ route('view_all_data',['build'=>$service->build_number,'street'=>$service->street_number]) }}"
                       target="_blank"
                       class="px-4 py-2 rounded-md bg-orange-200 text-gray-700 hover:bg-gray-200">
                        عرض التفاصيل
                    </a>
                @endif

                <a href="{{ route('map', $mapRouteParameters) }}"
                   target="_blank"
                   class="px-4 py-2 rounded-md bg-violet-300 text-gray-700 hover:bg-gray-200">
                    عرض على الخريطة
                </a>
            </div>

        </div>
        <div class="kt-card-content">
            <div class="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
                <div>
                    <div class="flex">
                        @if($service->citizen->image)
                            <img src="{{$service->citizen->image}}" class="border-2 me-2 rounded-xl w-16" alt="">
                        @endif
                        <div>
                            <h3>الاسم : {{$service->citizen->full_name}}</h3>
                            <h4>الجوال : {{$service->citizen->mobile}}</h4>
                            <h4>رقم الهوية : {{$service->citizen->national_id}}</h4>
                            @if($service->citizen->email)
                                <h4>الايميل : {{$service->citizen->email}}</h4>
                            @endif

                        </div>
                    </div>
                </div>
                <div>
                    <h3 class="text-xl">
                        <span>{{ __('modules.jomhor.resources_views_services_show.text_b5511e66cb') }}  </span>
                        <span>{{ $service->block ?? '-' }}  </span>

                    </h3>
                    <h3 class="text-xl">
                        <span> {{ __('modules.jomhor.resources_views_services_show.text_fe4e6b01f7') }}  </span>
                        <span>{{ $service->address_text ?? '-' }}</span>
                    </h3>
                    <h3 class="text-xl">
                        <span>{{ __('modules.jomhor.resources_views_services_show.text_efa4ae041e') }}  </span>
                        <span>{{ $service->street_number ?? '-' }}  </span>
                        <span>  {{ __('modules.jomhor.resources_views_services_show.text_ea08d62b9a') }}  </span>

                        <span> {{ __('modules.jomhor.resources_views_services_show.text_deb0029781') }}  </span>
                        <span>{{ $service->build_number ?? '-' }}</span>
                    </h3>
                </div>
                <div>
                    <h3 class="text-xl">
                        <span>{{ __('modules.jomhor.resources_views_services_show.text_c50b771f94') }}  </span>
                        <span>{{ $service->added_at ? Carbon::parse($service->added_at)->format('Y-m-d') : '-' }}  </span>

                    </h3>
                    <h3 class="text-xl">
                        <span>{{ __('modules.jomhor.resources_views_services_show.text_3505ef8482') }}  </span>
                        <span>{{ $service->due_date ? Carbon::parse($service->due_date)->format('Y-m-d') : '-' }}  </span>

                    </h3>
                    <h3 class="text-xl">
                        <span>{{ __('modules.jomhor.resources_views_services_show.text_2e52aff1ae') }}  </span>
                        @if($service->added_by_type == "Modules\PublicService\Entities\Citizen")
                            <span>المواطن / {{  $service->added_by->full_name }}  </span>

                        @else
                            <span>الموظف / {{  $service->added_by->name }}  </span>

                        @endif

                    </h3>
                </div>


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

    <div class="grid grid-cols-1 gap-2 xl:grid-cols-3">
        <div class="xl:col-span-2">
            <div class="kt-card kt-card-accent ">
                <div class="kt-card-header">
                    <div class="kt-card-heading">
                        <h2 class="kt-card-title">{{ __('modules.jomhor.resources_views_services_show.text_11f98c09a3') }}</h2>
                    </div>

                </div>
                <div class="kt-card-content py-1 min-h-40">
                    {{ $service->service_details ?? '-' }}

                </div>

            </div>
        </div>
        <div class="kt-card kt-card-accent ">
            <div class="kt-card-header">
                <div class="kt-card-heading">
                    <h2 class="kt-card-title">{{ __('modules.jomhor.resources_views_services_show.text_c9fcc72c76') }}</h2>
                </div>

            </div>
            <div class="kt-card-content py-1 min-h-40">
                {{ $service->service_comments ?? '' }}

            </div>

        </div>
    </div>
    @if($additionalDataRows->isNotEmpty())
        <div class="kt-card kt-card-accent mt-2">
            <div class="kt-card-header">
                <div class="kt-card-heading">
                    <h2 class="kt-card-title">{{ __('modules.jomhor.resources_views_services_show.text_55764c0dc5') }}</h2>
                </div>
            </div>
            <div class="kt-card-content py-3">
                <div class="grid grid-cols-1 gap-3 md:grid-cols-2">
                    @foreach($additionalDataRows as $row)
                        <div class="rounded border border-gray-200 p-3">
                            <div class="text-sm text-gray-600">{{ $row['title'] }}</div>
                            <div class="text-base font-semibold">{{ $row['value'] }}</div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    @endif
    @if($show_paths)
        <div class="kt-card kt-card-accent ">
            <div class="kt-card-header">
                <div class="kt-card-heading">
                    <h2 class="kt-card-title">{{ __('modules.jomhor.resources_views_services_show.text_fbd6891f0c') }}</h2>
                </div>

            </div>
            <div class="kt-card-content py-1">
                @if($paths->isEmpty())
                    <div class="text-center text-gray-500 py-8">{{ __('modules.jomhor.resources_views_services_show.text_002b3cf0de') }}</div>
                @else

                    @php
                        $perRow = 5;
                        $rows = collect($paths)->chunk($perRow);

                        $getColors = function ($p) {
                            $isActive = (int)($p->is_active ?? 0) === 1;
                            $isPassed = (int)($p->is_passed ?? 0) === 1;

                            $bg = 'bg-gray-200';
                            $badge = 'bg-slate-400';

                            if ($isPassed) { $bg = 'bg-green-200'; $badge = 'bg-green-500'; }
                            if ($isActive) { $bg = 'bg-blue-200'; $badge = 'bg-blue-400'; }

                            if (($p->response_status ?? '') === 'reject' || ($p->response_status ?? '') === 'rejected') {
                                $bg = 'bg-red-200'; $badge = 'bg-red-500';
                            }
                            if (($p->response_status ?? '') === 'hold' || ($p->response_status ?? '') === 'hold') {
                                $bg = 'bg-orange-200'; $badge = 'bg-orange-500';
                            }

                            return [$bg, $badge];
                        };
                    @endphp

                    <div class="p-5 mb-5">

                        @foreach($rows as $rowIndex => $row)
                            @php
                                // سطر 0: RTL (1..5 من اليمين لليسار)
                                // سطر 1: LTR (6..10 من اليسار لليمين)
                                $dir = $rowIndex % 2 === 0 ? 'rtl' : 'ltr';
                                $isLastRow = $rowIndex === ($rows->count() - 1);

                                // جهة نهاية السطر: RTL نهايته يسار، LTR نهايته يمين
                                $endSide = $dir === 'rtl' ? 'left' : 'right';
                            @endphp

                            {{-- ROW --}}
                            <div dir="{{ $dir }}"
                                 class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-5">

                                @php $ind=0; @endphp
                                @foreach($row as $index => $p)
                                    @php
                                        [$bg, $badge] = $getColors($p);

                                        // هل نرسم سهم أفقي؟
                                        $showArrow = $ind != 0;
                                        $ind++;

                                        // اتجاه السهم حسب السطر
                                        $arrowSide = $dir === 'ltr' ? '-left-5' : '-right-5';
                                        $arrowRotate = $dir === 'rtl' ? '' : 'rotate-180';
                                    @endphp

                                    <div class="relative rounded-2xl shadow-xl {{ $bg }} min-h-[76px]">

                                        {{-- السهم الأفقي --}}
                                        @if($showArrow)
                                            <div
                                                class="absolute top-1/2 {{ $arrowSide }} -translate-y-1/2 text-slate-300">
                                                <svg xmlns="http://www.w3.org/2000/svg"
                                                     class="w-6 h-6 {{ $arrowRotate }}"
                                                     viewBox="0 0 24 24"
                                                     fill="currentColor">
                                                    <path d="M10 6l-6 6 6 6v-4h10v-4H10V6z"/>
                                                </svg>
                                            </div>
                                        @endif

                                        {{-- شريط الرقم --}}
                                        <div
                                            class="absolute rounded-2xl inset-y-0 right-0 w-12 {{ $badge }} flex items-center justify-center">
                                            <span class="text-white font-bold">{{ $p->step_number }}</span>
                                        </div>

                                        {{-- المحتوى --}}
                                        <div class="h-full pr-14 pl-4 py-3 flex flex-col justify-center">
                                            <div class="text-sm font-extrabold text-slate-800 leading-tight">
                                                {{ $p->name ?? '-' }}
                                            </div>
                                            <div class="text-xs text-slate-700 mt-1">
                                                {{ $p->job_place->name ?? '-' }}
                                            </div>
                                        </div>

                                    </div>
                                @endforeach


                            </div>

                            {{-- سهم بين الأسطر (ينزل من آخر عنصر للسطر التالي) --}}
                            @unless($isLastRow)
                                <div dir="ltr" class="flex {{ $endSide === 'left' ? 'justify-start' : 'justify-end' }}">
                                    <div class="w-12 flex items-center justify-center">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8 text-slate-300"
                                             viewBox="0 0 24 24" fill="currentColor">
                                            <path d="M12 21l-6-6h4V3h4v12h4l-6 6z"/>
                                        </svg>
                                    </div>
                                </div>
                            @endunless

                        @endforeach

                    </div>

                @endif


            </div>

        </div>
    @endif
    @if($show_paths || $show_attachments)
        <div class="grid grid-cols-1 gap-2 lg:grid-cols-4">
            @if($show_paths)
                <div class="lg:col-span-3">
                    <div class="kt-card h-full kt-card-accent ">
                        <div class="kt-card-header">
                            <div class="kt-card-heading">
                                <h2 class="kt-card-title">{{ __('modules.jomhor.resources_views_services_show.text_fb534552ec') }}</h2>
                            </div>
                            <div class="kt-card-toolbar">
                                @can('services.edit')
                                    <div class="relative">
                                        <button type="button" class="kt-btn kt-btn-xs kt-btn-outline kt-btn-icon" onclick="toggleReplyActionsMenu()">
                                            <svg
                                                xmlns="http://www.w3.org/2000/svg"
                                                width="24"
                                                height="24"
                                                viewBox="0 0 24 24"
                                                fill="none"
                                                stroke="currentColor"
                                                stroke-width="2"
                                                stroke-linecap="round"
                                                stroke-linejoin="round"
                                                class="lucide lucide-settings"
                                                aria-hidden="true"
                                            >
                                                <path
                                                    d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"
                                                ></path>
                                                <circle cx="12" cy="12" r="3"></circle>
                                            </svg>
                                        </button>
                                        <div id="replyActionsMenu" class="hidden absolute left-0 top-8 z-20 min-w-56 rounded-xl border border-gray-200 bg-white p-2 shadow-lg">
                                            <button type="button" class="block w-full rounded-lg px-3 py-2 text-right text-sm text-gray-700 hover:bg-gray-100" onclick="openChangeStepModal()">
                                                تغيير المرحلة النشطة
                                            </button>
                                            <button type="button" class="block w-full rounded-lg px-3 py-2 text-right text-sm text-gray-700 hover:bg-gray-100" onclick="openAddPathStepModal()">
                                                إضافة مرحلة جديدة للمسار
                                            </button>
                                        </div>
                                    </div>
                                @endcan
                            </div>
                        </div>
                        <div class="kt-card-content py-1">
                            @if(count($service->responses)==0)
                                <div class="text-center text-gray-500 py-8">{{ __('modules.jomhor.resources_views_services_show.text_e8afe7c79e') }}</div>
                            @else
                                <div class="service-responses-table overflow-x-auto rounded-xl border border-border">
                                    <table class="w-full divide-y divide-border lg:table-fixed">
                                        <tbody class="divide-y divide-border bg-white">
                                            @foreach($service->responses as $p)
                                                @php $resp = $responseMap[$p->response_action ?? ''] ?? null; @endphp
                                                <tr class="align-top">
                                                    <td class="px-4 py-4 align-top lg:w-[280px]">
                                                        <div class="flex items-center gap-3">
                                                            <div class="kt-avatar size-8">
                                                                <div class="kt-avatar-image">
                                                                    <img src="{{ @$p->employee->user->image_url }}"
                                                                         alt="{{ @$p->employee->name }}"/>
                                                                </div>
                                                            </div>
                                                            <div class="min-w-0">
                                                                <div class="font-medium text-gray-900">{{ $p->employee->name ?? '-' }}</div>
                                                                <div class="text-sm font-normal text-muted-foreground">
                                                                    {{ $p->path->job_place->name ?? '-' }} ({{ $p->path->name }})
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </td>


                                                    <td class="w-full px-4 py-4 align-top lg:w-full">
                                                        <div class="w-full rounded-xl border border-dashed border-border p-3 text-sm">
                                                            @include('jomhor::service_actions.'.$p->response_view,['path'=>$p->path,'response'=>$p])
                                                            @if($p->path->citizen_response_summary)
                                                                <p class="mt-2">
                                                                    <span>{{ __('modules.jomhor.resources_views_services_show.text_5da09491a5') }} </span>
                                                                    <span>{{ $p->path->citizen_response_summary }}</span>
                                                                </p>
                                                            @endif
                                                        </div>
                                                    </td>

                                                    <td class="px-4 py-4 whitespace-nowrap text-center text-sm text-gray-600 align-top lg:w-[120px]">
                                                      <span class="inline-flex rounded-md px-2 py-1 text-xs font-semibold {{ $resp['class'] ?? 'bg-gray-100 text-gray-600' }}">
                                                            {{ $resp['label'] ?? ($p->response_status ?? '-') }}
                                                        </span>
                                                        <br>
                                                        {{ $p->created_at ? $p->created_at->format('Y-m-d') : '-' }}
                                                        <br>
                                                        {{ $p->created_at ? $p->created_at->format('H:i') : '-' }}
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            @endif
                        </div>

                    </div>

                </div>
            @endif
            @if($show_attachments)
                <div class="kt-card kt-card-accent ">
                    <div class="kt-card-header">
                        <div class="kt-card-heading">
                            <h2 class="kt-card-title">{{ __('modules.jomhor.resources_views_services_show.text_9a5a2597d1') }}</h2>
                        </div>

                    </div>
                    <div class="kt-card-content ">
                        <div class="grid grid-cols-1  gap-3">

                            @foreach($service->attachments as $att)
                                @php
                                    // حاول تجيب المايم من الداتا لو موجود
                                    $toe=explode('.', $att->file_url);
                                    $mime = array_last($toe);
                                    $isImage = in_array($mime,['webp','jpg','png']);
                                    $isPdf = $mime === 'pdf';
                                @endphp

                                <div class="border rounded-xl p-3 hover:bg-gray-50 transition flex items-center gap-3">
                                    <div
                                        class="w-10 h-10 rounded-full flex items-center justify-center border bg-gray-100 text-gray-600">
                                        @if($isPdf)
                                            📄
                                        @elseif($isImage)
                                            🖼️
                                        @else
                                            📎
                                        @endif
                                    </div>

                                    <div class="flex-1 min-w-0">
                                        <div class="text-sm font-semibold text-gray-800 truncate">
                                            {{ $att->attachment_type->name }}
                                        </div>
                                    </div>

                                    <div class="flex items-center gap-2">
                                        <button
                                            type="button"
                                            class="px-3 py-1.5 text-xs rounded-md border hover:bg-white transition"
                                            data-preview-url="{{ $att->file_url }}"
                                            data-preview-mime="{{ $mime }}"
                                            onclick="openAttachmentPreview(this)">
                                            عرض
                                        </button>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        <div id="attModal" class="fixed inset-0 z-50 hidden">
                            <div class="absolute inset-0 bg-black/50" onclick="closeAttachmentPreview()"></div>

                            <div class="relative mx-auto my-10 w-[95%] md:w-[80%] lg:w-[65%] max-w-4xl">
                                <div class="bg-white rounded-xl shadow-lg overflow-hidden">
                                    <div class="flex items-center justify-between px-4 py-3 border-b">
                                        <div class="text-sm font-semibold text-gray-800" id="attModalTitle">عرض المرفق
                                        </div>
                                        <button type="button" class="text-gray-500 hover:text-gray-800"
                                                onclick="closeAttachmentPreview()">
                                            ✕
                                        </button>
                                    </div>

                                    <div class="bg-gray-50">
                                        <!-- image -->
                                        <img id="attModalImg" src="" alt="preview"
                                             class="hidden w-full max-h-[75vh] object-contain bg-black">

                                        <!-- pdf/other -->
                                        <iframe id="attModalFrame" src="" class="hidden w-full h-[75vh] bg-white"
                                                frameborder="0"></iframe>

                                        <!-- fallback -->
                                        <div id="attModalFallback" class="hidden p-6 text-center">
                                            <div class="text-sm text-gray-700 mb-3">المتصفح لا يدعم معاينة هذا النوع.
                                            </div>
                                            <a id="attModalOpenNew" href="#" target="_blank"
                                               class="inline-flex px-4 py-2 rounded-md bg-blue-600 text-white hover:bg-blue-700">
                                                فتح في تبويب جديد
                                            </a>
                                        </div>
                                    </div>

                                    <div class="px-4 py-3 border-t flex justify-end gap-2">
                                        <a id="attModalOpenNew2" href="#" target="_blank"
                                           class="px-4 py-2 text-sm rounded-md border hover:bg-white transition">
                                            فتح في تبويب جديد
                                        </a>
                                        <button type="button" onclick="closeAttachmentPreview()"
                                                class="px-4 py-2 text-sm rounded-md bg-gray-800 text-white hover:bg-black transition">
                                            إغلاق
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>

                </div>
            @endif
        </div>
    @endif
    @can('services.edit')
        <div id="changeStepModal" class="fixed inset-0 z-50 hidden">
            <div class="absolute inset-0 bg-black/50" onclick="closeChangeStepModal()">
            </div>

            <div class="relative mx-auto my-10 w-[95%] md:w-[82%] lg:w-[72%] max-w-6xl">
                <div class="bg-white rounded-xl shadow-lg overflow-hidden">
                    <form action="{{ route('jomhor.services.change_active_step', $service->public_id) }}" method="post">
                        @csrf

                        <div class="flex items-center justify-between px-4 py-3 border-b">
                            <div class="text-base font-semibold text-gray-800">{{ __('modules.jomhor.resources_views_services_show.text_f8c549fb63') }}</div>
                            <button type="button" class="text-gray-500 hover:text-gray-800" onclick="closeChangeStepModal()"><i class="ki-outline ki-cross"></i></button>
                        </div>

                        <div class="p-5 space-y-4">
                            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 max-h-[55vh] overflow-y-auto">
                                @foreach($paths as $pathOption)
                                    <label class="flex items-start gap-3 rounded-xl border border-gray-200 p-3 hover:bg-gray-50">
                                        <input
                                            type="radio"
                                            name="path_id"
                                            value="{{ $pathOption->id }}"
                                            class="mt-1"
                                            {{ (int) old('path_id', $activePath->id ?? 0) === (int) $pathOption->id ? 'checked' : '' }}
                                        >
                                        <div class="min-w-0">
                                            <div class="text-xs font-semibold text-gray-500">خطوة رقم: {{ $pathOption->step_number }}</div>
                                            <div class="font-semibold text-gray-800 mt-1">{{ $pathOption->name }}</div>
                                            <div class="text-sm text-gray-500 mt-1">{{ $pathOption->job_place->name ?? '-' }}</div>
                                        </div>
                                    </label>
                                @endforeach
                                @if($errors->changeActiveStep->has('path_id'))
                                    <div class="text-red-500 text-sm">{{ $errors->changeActiveStep->first('path_id') }}</div>
                                @endif
                            </div>

                            <div class="kt-form-item mb-0 {{ $errors->changeActiveStep->has('response') ? 'has_error' : '' }}">
                                <label class="required kt-form-label" for="change_step_response">{{ __('modules.jomhor.resources_views_services_show.text_eb3c13045b') }}</label>
                                <div class="kt-form-control">
                                    <textarea
                                        id="change_step_response"
                                        name="response"
                                        rows="5"
                                        class="kt-textarea mb-0"
                                        placeholder="{{ __('modules.jomhor.resources_views_services_show.text_8ae5b05a87') }}"
                                        required
                                    >{{ old('response') }}</textarea>
                                    @if($errors->changeActiveStep->has('response'))
                                        <div class="text-red-500 JS_error has-error">
                                            {{ $errors->changeActiveStep->first('response') }}
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>

                        <div class="px-4 py-3 border-t flex justify-end gap-2">
                            <button type="button" onclick="closeChangeStepModal()" class="kt-btn kt-btn-outline">{{ __('modules.jomhor.resources_views_services_show.text_539315d8f9') }}</button>
                            <button type="submit" class="kt-btn">{{ __('modules.jomhor.resources_views_services_show.text_3eae5ad1a9') }}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div id="addPathStepModal" class="fixed inset-0 z-50 hidden">
            <div class="absolute inset-0 bg-black/50" onclick="closeAddPathStepModal()"></div>

            <div class="relative mx-auto my-10 w-[95%] md:w-[75%] lg:w-[60%] max-w-3xl">
                <div class="bg-white rounded-xl shadow-lg overflow-hidden">
                    <form action="{{ route('jomhor.services.add_path_step', $service->public_id) }}" method="post">
                        @csrf

                        <div class="flex items-center justify-between px-4 py-3 border-b">
                            <div class="text-base font-semibold text-gray-800">{{ __('modules.jomhor.resources_views_services_show.text_7b05efcc85') }}</div>
                            <button type="button" class="text-gray-500 hover:text-gray-800" onclick="closeAddPathStepModal()"><i class="ki-outline ki-cross"></i></button>
                        </div>

                        <div class="p-5 grid grid-cols-1 md:grid-cols-2 gap-4">
                            @if($errors->addPathStep->any())
                                <div class="md:col-span-2 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
                                    {{ $errors->addPathStep->first() }}
                                </div>
                            @endif

                            <x-inputs.input
                                name="name"
                                title="{{ __('modules.jomhor.resources_views_services_show.text_9d9e2186e6') }}"
                                required
                                :value="old('name')"
                                mb="mb-0"
                            />

                            <x-inputs.select
                                name="job_place_id"
                                title="{{ __('modules.jomhor.resources_views_services_show.text_ffc3c6b1e8') }}"
                                required
                                :value="old('job_place_id', '')"
                                :options="['' => 'اختر الجهة'] + collect($jobPlaces ?? [])->pluck('name', 'id')->all()"
                                mb="mb-0"
                            />

                            <div class="md:col-span-2">
                                <x-inputs.select
                                    name="route_name"
                                    title="{{ __('modules.jomhor.resources_views_services_show.text_ceb101b8d6') }}"
                                    required
                                    :value="old('route_name', '')"
                                    :options="['' => 'اختر الإجراء'] + ($serviceActionOptions ?? [])"
                                    mb="mb-0"
                                />
                            </div>
                        </div>

                        <div class="px-4 py-3 border-t flex justify-end gap-2">
                            <button type="button" onclick="closeAddPathStepModal()" class="kt-btn kt-btn-outline">{{ __('modules.jomhor.resources_views_services_show.text_be4ffe34e6') }}</button>
                            <button type="submit" class="kt-btn">{{ __('modules.jomhor.resources_views_services_show.text_3eae5ad1a9') }}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    @endcan

    @if(($canDepartmentDelegate ?? false) && $activePath)
        <div id="departmentDelegateModal" class="fixed inset-0 z-50 hidden">
            <div class="absolute inset-0 bg-black/50" onclick="closeDepartmentDelegateModal()"></div>

            <div class="relative mx-auto my-10 w-[95%] md:w-[70%] lg:w-[50%] max-w-2xl">
                <div class="bg-white rounded-xl shadow-lg overflow-hidden">
                    <form action="{{ route('jomhor.services.delegate_department_employee', $service->public_id) }}" method="post">
                        @csrf

                        <div class="flex items-center justify-between px-4 py-3 border-b">
                            <div class="text-base font-semibold text-gray-800">{{ __('modules.jomhor.resources_views_services_show.text_ba0663be87') }}</div>
                            <button type="button" class="text-gray-500 hover:text-gray-800" onclick="closeDepartmentDelegateModal()">
                                ✕
                            </button>
                        </div>

                        <div class="p-5 space-y-4">
                            <div class="rounded-lg border border-dashed border-gray-300 bg-gray-50 p-4">
                                <div class="text-sm text-gray-500">{{ __('modules.jomhor.resources_views_services_show.text_6e586d6a30') }}</div>
                                <div class="text-base font-semibold text-gray-800">{{ $activePath->employee->{{ __('modules.jomhor.resources_views_services_show.text_4c4bd9ea4c') }}</div>
                                <div class="mt-1 text-sm text-gray-500">القسم: {{ $activePath->job_place->name ?? '-' }}</div>
                            </div>

                            <div class="kt-form-item mb-0 {{ $errors->departmentDelegate->has('employee_id') ? 'has_error' : '' }}">
                                <label class="required kt-form-label" for="department_delegate_employee_id">{{ __('modules.jomhor.resources_views_services_show.text_a845ea3e33') }}</label>
                                <div class="kt-form-control">
                                    <select
                                        id="department_delegate_employee_id"
                                        name="employee_id"
                                        class="select select-input"
                                        style="width: 100%"
                                        required
                                    >
                                        <option value="">{{ __('modules.jomhor.resources_views_services_show.text_c6daca3abc') }}</option>
                                        @foreach(($departmentDelegateEmployees ?? collect()) as $departmentEmployee)
                                            <option
                                                value="{{ $departmentEmployee->id }}"
                                                {{ (int) old('employee_id') === (int) $departmentEmployee->id ? 'selected' : '' }}
                                            >
                                                {{ $departmentEmployee->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @if($errors->departmentDelegate->has('employee_id'))
                                        <div class="text-red-500 JS_error has-error">
                                            {{ $errors->departmentDelegate->first('employee_id') }}
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>

                        <div class="px-4 py-3 border-t flex justify-end gap-2">
                            <button type="button" onclick="closeDepartmentDelegateModal()" class="kt-btn kt-btn-outline">
                                الغاء
                            </button>
                            <button type="submit" class="kt-btn kt-btn-secondary">
                                حفظ التفويض
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    @endif

    @yield('action')

    @push('scripts')

        <script>
            function hideReplyActionsMenu() {
                const menu = document.getElementById('replyActionsMenu');

                if (menu) {
                    menu.classList.add('hidden');
                }
            }

            function toggleReplyActionsMenu() {
                const menu = document.getElementById('replyActionsMenu');

                if (!menu) {
                    return;
                }

                menu.classList.toggle('hidden');
            }

            function openChangeStepModal() {
                hideReplyActionsMenu();
                const modal = document.getElementById('changeStepModal');

                if (!modal) {
                    return;
                }

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

            function closeChangeStepModal() {
                const modal = document.getElementById('changeStepModal');

                if (!modal) {
                    return;
                }

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

            function openAddPathStepModal() {
                hideReplyActionsMenu();
                const modal = document.getElementById('addPathStepModal');

                if (!modal) {
                    return;
                }

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

            function closeAddPathStepModal() {
                const modal = document.getElementById('addPathStepModal');

                if (!modal) {
                    return;
                }

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

            function openDepartmentDelegateModal() {
                const modal = document.getElementById('departmentDelegateModal');

                if (!modal) {
                    return;
                }

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

            function closeDepartmentDelegateModal() {
                const modal = document.getElementById('departmentDelegateModal');

                if (!modal) {
                    return;
                }

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

            function openAttachmentPreview(btn) {
                const url = btn.getAttribute('data-preview-url');
                const mime = (btn.getAttribute('data-preview-mime') || '').toLowerCase();

                const modal = document.getElementById('attModal');
                const img = document.getElementById('attModalImg');
                const frame = document.getElementById('attModalFrame');
                const fallback = document.getElementById('attModalFallback');
                const openNew = document.getElementById('attModalOpenNew');
                const openNew2 = document.getElementById('attModalOpenNew2');

                // reset
                img.classList.add('hidden');
                img.src = '';
                frame.classList.add('hidden');
                frame.src = '';
                fallback.classList.add('hidden');

                openNew.href = url;
                openNew2.href = url;

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

                // image
                if (mime == 'webp') {
                    img.src = url;
                    img.classList.remove('hidden');
                    return;
                }

                // pdf
                if (mime === 'pdf') {
                    // أغلب المتصفحات تدعم عرض PDF داخل iframe
                    frame.src = url;
                    frame.classList.remove('hidden');

                    // لو ما فتح pdf (بعض الأجهزة/إعدادات)، يظهر fallback بعد ثواني
                    setTimeout(() => {
                        // إذا فشل التحميل غالبًا يظل iframe فاضي عند البعض، نعطي خيار فتح جديد
                        // (ما في طريقة مضمونة 100% للكشف، بس هذا UX جيد)
                        if (!frame.src) {
                            frame.classList.add('hidden');
                            fallback.classList.remove('hidden');
                        }
                    }, 1200);

                    return;
                }

                // other
                fallback.classList.remove('hidden');
            }

            function closeAttachmentPreview() {
                const modal = document.getElementById('attModal');
                const img = document.getElementById('attModalImg');
                const frame = document.getElementById('attModalFrame');

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

                img.src = '';
                frame.src = '';
            }

            // ESC closes modal
            document.addEventListener('keydown', (e) => {
                if (e.key === 'Escape') {
                    closeAttachmentPreview();
                    closeChangeStepModal();
                    closeAddPathStepModal();
                    closeDepartmentDelegateModal();
                }
            });

            document.addEventListener('click', (e) => {
                const menu = document.getElementById('replyActionsMenu');

                if (!menu) {
                    return;
                }

                if (!menu.contains(e.target) && !e.target.closest('[onclick="toggleReplyActionsMenu()"]')) {
                    hideReplyActionsMenu();
                }
            });

            @if($errors->changeActiveStep->any())
                openChangeStepModal();
            @endif

            @if($errors->addPathStep->any())
                openAddPathStepModal();
            @endif

            @if($errors->departmentDelegate->any())
                openDepartmentDelegateModal();
            @endif
        </script>
    @endpush

</x-jomhor::layout>