@php
    $title = __('modules.publicservice.resources_views_services.text_ee2ffe7027');
@endphp
<x-publicservice::layout :title="$title">

    <x-slot name="actions">
        <div class="flex items-center gap-3">
            <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
                {{ $title }}
            </h2>
            <a href="{{ route('public_services.services_print', ['category' => $activeCategory]) }}" target="_blank" class="btn btn-sm btn-light">
                <i class="ki-filled ki-printer"></i>
                طباعة
            </a>
        </div>
    </x-slot>

    <!-- Category Navigation -->
    <div class="mb-5">
        <div class="flex flex-wrap gap-2">
            <a href="{{ route('public_services.services_view') }}"
               class="btn btn-sm {{ !$activeCategory ? 'btn-primary' : 'btn-light' }}">
                الكل
                <span class="kt-badge kt-badge-sm kt-badge-circle {{ !$activeCategory ? 'kt-badge-light' : 'kt-badge-primary' }} ms-2">
                    {{ $categories->sum('services_count') }}
                </span>
            </a>
            @foreach($categories as $category)
                <a href="{{ route('public_services.services_view', ['category' => $category->id]) }}"
                   class="btn btn-sm {{ $activeCategory == $category->id ? 'btn-primary' : 'btn-light' }} border-2 border-primary p-2 rounded-full">
                    {{ $category->name }}
                    <span class="kt-badge kt-badge-sm kt-badge-circle {{ $activeCategory == $category->id ? 'kt-badge-light' : 'kt-badge-primary' }}  border-2 border-primary p-2 rounded-full ms-2">
                        {{ $category->services_count }}
                    </span>
                </a>
            @endforeach
        </div>
    </div>

    <div class="grid gap-5 lg:gap-7.5">
        @forelse($services as $service)
            <x-layout.card :title="$service->name">
                <div class="p-5">
                    <div class="flex flex-col lg:flex-row gap-5">
                        <!-- Service Image & Basic Info -->
                        <div class="lg:w-1/3">
                            <div class="flex items-start gap-4">
                                @if($service->image)
                                    <img src="{{ $service->image_url }}" alt="{{ $service->name }}" class="w-20 h-20 rounded-lg object-cover"/>
                                @else
                                    <div class="w-20 h-20 rounded-lg bg-gray-200 flex items-center justify-center">
                                        <i class="ki-filled ki-abstract-26 text-2xl text-gray-400"></i>
                                    </div>
                                @endif
                                <div class="flex-1">
                                    @if($service->category)
                                        <span class="kt-badge kt-badge-sm kt-badge-primary mb-2">
                                            {{ $service->category->name }}
                                        </span>
                                    @endif
                                    <div class="flex flex-wrap gap-2 mt-2">
                                        <span class="kt-badge kt-badge-sm kt-badge-outline kt-badge-{{ $service->is_shown_in_citizen ? 'success' : 'danger' }}">
                                            {{ $service->is_shown_in_citizen ? 'ظاهر في البوابة' : 'مخفي من البوابة' }}
                                        </span>
                                        <span class="kt-badge kt-badge-sm kt-badge-outline kt-badge-{{ $service->is_shown_in_website ? 'success' : 'danger' }}">
                                            {{ $service->is_shown_in_website ? 'ظاهر في الموقع' : 'مخفي من الموقع' }}
                                        </span>
                                    </div>
                                </div>
                            </div>

                            <!-- Service Details -->
                            <div class="mt-4 space-y-2">
                                @if($service->description)
                                    <p class="text-sm text-gray-600 dark:text-gray-400">
                                        {{ $service->description }}
                                    </p>
                                @endif
                                <div class="flex items-center gap-4 text-sm">
                                    <div class="flex items-center gap-1">
                                        <i class="ki-filled ki-dollar text-success"></i>
                                        <span class="font-medium">{{ $service->{{ __('modules.publicservice.resources_views_services.text_3ef65fa33b') }}</span>
                                    </div>
                                    <div class="flex items-center gap-1">
                                        <i class="ki-filled ki-time text-primary"></i>
                                        <span class="font-medium">{{ $service->{{ __('modules.publicservice.resources_views_services.text_8176e9e495') }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Service Path Steps -->
                        <div class="lg:w-2/3 lg:border-r lg:pr-5 border-gray-200 dark:border-gray-700">
                            @if($service->path)
                                <div class="mb-3">
                                    <h4 class="text-md font-semibold text-gray-800 dark:text-gray-200 flex items-center gap-2">
                                        <i class="ki-filled ki-route text-primary"></i>
                                        مسار الخدمة: {{ $service->path->name }}
                                    </h4>
                                </div>

                                @if($service->path->steps && $service->path->steps->count() > 0)
                                    <div class="relative">
                                        <!-- Steps Timeline -->
                                        <div class="space-y-4">
                                            @foreach($service->path->steps->sortBy('step_number') as $index => $step)
                                                <div class="flex items-start gap-3">
                                                    <!-- Step Number Circle -->
                                                    <div class="flex-shrink-0 w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center text-sm font-bold">
                                                        {{ $step->step_number }}
                                                    </div>

                                                    <!-- Step Content -->
                                                    <div class="flex-1 pb-4 {{ !$loop->last ? 'border-b border-gray-200 dark:border-gray-700' : '' }}">
                                                        <div class="flex items-center justify-between">
                                                            <h5 class="font-medium text-gray-900 dark:text-white">
                                                                {{ $step->name }} ({{ $step->job_place->name }})
                                                            </h5>
                                                            <div class="flex items-center gap-2">
                                                                @if($step->shown_in_citizen)
                                                                    <span class="kt-badge kt-badge-sm kt-badge-success">{{ __('modules.publicservice.resources_views_services.text_e68fcf7c2e') }}</span>
                                                                @endif
                                                                @if($step->send_notification)
                                                                    <span class="kt-badge kt-badge-sm kt-badge-info">
                                                                        <i class="ki-filled ki-notification-on text-xs"></i>
                                                                    </span>
                                                                @endif
                                                            </div>
                                                        </div>
                                                        <div class="mt-1 text-xs text-gray-500 dark:text-gray-400 flex items-center gap-3">
                                                            <span>الاولوية: {{ $step->priority }}</span>
                                                            @if($step->route_name)
                                                                <span>المسار: {{ $step->route_name }}</span>
                                                            @endif
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                @else
                                    <div class="text-center py-4 text-gray-500">
                                        <i class="ki-filled ki-information-2 text-2xl mb-2"></i>
                                        <p>{{ __('modules.publicservice.resources_views_services.text_13a3989d94') }}</p>
                                    </div>
                                @endif
                            @else
                                <div class="text-center py-4 text-gray-500">
                                    <i class="ki-filled ki-information-2 text-2xl mb-2"></i>
                                    <p>{{ __('modules.publicservice.resources_views_services.text_8d27e3e7bb') }}</p>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </x-layout.card>
        @empty
            <x-layout.card>
                <div class="text-center py-10">
                    <i class="ki-filled ki-abstract-26 text-4xl text-gray-400 mb-4"></i>
                    <h3 class="text-lg font-medium text-gray-600 dark:text-gray-400">{{ __('modules.publicservice.resources_views_services.text_dbfc9e83f7') }}</h3>
                    <p class="text-sm text-gray-500 mt-2">{{ __('modules.publicservice.resources_views_services.text_7fdb266037') }}</p>
                </div>
            </x-layout.card>
        @endforelse
    </div>
</x-publicservice::layout>