@extends('layouts.app')

@section('title', $seoData['seo_title'] ?? $subService->name . ' - ' . $service->name)
@section('meta_description', $seoData['seo_description'] ?? $subService->description)
@section('meta_keywords', $seoData['seo_keywords'] ?? 'services, ' . strtolower($service->name))
@section('og_image', $subService->image ? asset('storage/' . $subService->image) : asset('favicon.svg'))

@section('content')
<div class="inner-page">
    <div class="inner-header">
        <div class="inner-header-components">
            <div class="container">
                <h1 class="inner-header-title">{{ $subService->name }}</h1>

            </div>
        </div>
    </div>
    <div class="inner-body">
        <div class="container">
            <div class="inner-body-content">

                {{-- Service Information Cards --}}
                @if ($subService->content || $subService->requirements || $subService->steps || $subService->documents_needed || $subService->fees || $subService->processing_time || $subService->contact_info || $subService->notes)
                    <div class="service-info-cards-section mb-5">
                        <h2 class="section-title mb-4">{{ app()->getLocale() === 'ar' ? 'معلومات الخدمة' : 'Service Information' }}</h2>

                        <div class="service-cards-grid">
                            @if ($subService->content)
                                <div class="service-card">
                                    <div class="service-card-icon">
                                        <i class="icon-info-1"></i>
                                    </div>
                                    <h3 class="service-card-title">{{ app()->getLocale() === 'ar' ? 'نبذة عن الخدمة' : 'About the Service' }}</h3>
                                    <div class="service-card-content">
                                        {!! $subService->content !!}
                                    </div>
                                </div>
                            @endif

                            @if ($subService->requirements)
                                <div class="service-card">
                                    <div class="service-card-icon">
                                        <i class="icon-start"></i>
                                    </div>
                                    <h3 class="service-card-title">{{ app()->getLocale() === 'ar' ? 'المتطلبات' : 'Requirements' }}</h3>
                                    <div class="service-card-content">
                                        <pre class="requirements-text">{{ $subService->requirements }}</pre>
                                    </div>
                                </div>
                            @endif

                            @if ($subService->steps)
                                <div class="service-card">
                                    <div class="service-card-icon">
                                        <i class="icon-arrow-down"></i>
                                    </div>
                                    <h3 class="service-card-title">{{ app()->getLocale() === 'ar' ? 'خطوات التقديم' : 'Application Steps' }}</h3>
                                    <div class="service-card-content">
                                        <pre class="steps-text">{{ $subService->steps }}</pre>
                                    </div>
                                </div>
                            @endif

                            @if ($subService->documents_needed)
                                <div class="service-card">
                                    <div class="service-card-icon">
                                        <i class="icon-download-2"></i>
                                    </div>
                                    <h3 class="service-card-title">{{ app()->getLocale() === 'ar' ? 'المستندات المطلوبة' : 'Required Documents' }}</h3>
                                    <div class="service-card-content">
                                        <pre class="documents-text">{{ $subService->documents_needed }}</pre>
                                    </div>
                                </div>
                            @endif

                            @if ($subService->fees)
                                <div class="service-card">
                                    <div class="service-card-icon">
                                        <i class="icon-service"></i>
                                    </div>
                                    <h3 class="service-card-title">{{ app()->getLocale() === 'ar' ? 'الرسوم' : 'Fees' }}</h3>
                                    <div class="service-card-content">
                                        <p class="fees-text">{{ $subService->fees }}</p>
                                    </div>
                                </div>
                            @endif

                            @if ($subService->processing_time)
                                <div class="service-card">
                                    <div class="service-card-icon">
                                        <i class="icon-clock"></i>
                                    </div>
                                    <h3 class="service-card-title">{{ app()->getLocale() === 'ar' ? 'مدة المعالجة' : 'Processing Time' }}</h3>
                                    <div class="service-card-content">
                                        <p class="time-text">{{ $subService->processing_time }}</p>
                                    </div>
                                </div>
                            @endif

                            @if ($subService->contact_info)
                                <div class="service-card">
                                    <div class="service-card-icon">
                                        <i class="icon-phone"></i>
                                    </div>
                                    <h3 class="service-card-title">{{ app()->getLocale() === 'ar' ? 'معلومات الاتصال' : 'Contact Information' }}</h3>
                                    <div class="service-card-content">
                                        <pre class="contact-text">{{ $subService->contact_info }}</pre>
                                    </div>
                                </div>
                            @endif

                            @if ($subService->notes)
                                <div class="service-card">
                                    <div class="service-card-icon">
                                        <i class="icon-info-1"></i>
                                    </div>
                                    <h3 class="service-card-title">{{ app()->getLocale() === 'ar' ? 'ملاحظات إضافية' : 'Additional Notes' }}</h3>
                                    <div class="service-card-content">
                                        <pre class="notes-text">{{ $subService->notes }}</pre>
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                @endif

                {{-- Apply for Service Button --}}
                <div class="service-apply-section">
                    @auth('citizen')
                        @php
                            $serviceRequestUrl = route('citizen.service_request.create.locale', [
                                'locale' => app()->getLocale(),
                                'serviceSlug' => $service->slug,
                                'subServiceSlug' => $subService->slug
                            ]);
                        @endphp
                        <a href="{{ $serviceRequestUrl }}" class="btn-apply-service" target="_self">
                            <i class="fas fa-paper-plane"></i>
                            <span>{{ app()->getLocale() === 'ar' ? 'قدّم طلبك الآن' : 'Apply for Service' }}</span>
                        </a>
                    @else
                        <a href="{{ route('citizen.login.locale', ['locale' => app()->getLocale()]) }}" class="btn-apply-service" target="_self">

                            <span>{{ app()->getLocale() === 'ar' ? 'تسجيل الدخول لتقديم الطلب' : 'Login to Apply' }}</span>
                        </a>
                    @endauth
                </div>

                {{-- Sectors Section --}}
                @if ($subService->sectors && $subService->sectors->count() > 0)
                    <div class="sectors-section">
                        <h2 class="section-title mb-4">{{ app()->getLocale() === 'ar' ? 'الأقسام المتاحة' : 'Available Sectors' }}</h2>
                        <div class="row">
                            @foreach ($subService->sectors as $sector)
                                <div class="col-md-6 col-lg-4 mb-4">
                                    <a href="{{ route('sector.show.locale', ['locale' => app()->getLocale(), 'serviceSlug' => $service->slug, 'subServiceSlug' => $subService->slug, 'sectorSlug' => $sector->slug]) }}" class="sector-link">
                                        <div class="sector-card">
                                            @if ($sector->icon)
                                                <div class="sector-icon">
                                                    {!! getLazyImage($sector->icon, 100, 100, $sector->name) !!}
                                                </div>
                                            @endif
                                            <h3 class="sector-title">{{ $sector->name }}</h3>
                                            @if ($sector->description)
                                                <p class="sector-desc">{{ \Illuminate\Support\Str::limit($sector->description, 100) }}</p>
                                            @endif
                                        </div>
                                    </a>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>

<style>
.subservice-page-header {
    text-align: center;
    padding: 40px 0;
}

.subservice-page-image {
    max-width: 800px;
    margin: 0 auto;
}

.subservice-page-title {
    font-size: 42px;
    font-weight: bold;
    color: #0A2038;
    margin-bottom: 20px;
}

.subservice-page-desc {
    font-size: 18px;
    color: #555;
    line-height: 1.8;
    max-width: 800px;
    margin: 0 auto;
}

.sectors-section {
    margin-top: 60px;
}

.sector-link {
    text-decoration: none;
    color: inherit;
    display: block;
    height: 100%;
}

.sector-link:hover {
    text-decoration: none;
    color: inherit;
}

.sector-card {
    background: white;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.sector-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.sector-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
}

.sector-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.sector-title {
    font-size: 20px;
    font-weight: 600;
    color: #0A2038;
    margin-bottom: 15px;
}

.sector-desc {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    flex: 1;
}

.breadcrumb {
    background: transparent;
    padding: 0;
    margin-bottom: 20px;
}

.breadcrumb-item a {
    color: #00B0F0;
    text-decoration: none;
}

.breadcrumb-item a:hover {
    text-decoration: underline;
}

.section-title {
    font-size: 28px;
    font-weight: 600;
    color: #0A2038;
    margin-bottom: 20px;
}

/* Service Information Cards Styles */
.service-info-cards-section {
    margin-bottom: 40px;
}

.service-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.service-card {
    background: #fff;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border: 1px solid #f0f0f0;
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    border-color: var(--primary-color, #007bff);
}

.service-card-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary-color, #007bff) 0%, var(--secondary-color, #0056b3) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    color: white;
    font-size: 24px;
}

.service-card-title {
    font-size: 20px;
    font-weight: 600;
    color: #0A2038;
    margin-bottom: 15px;
    line-height: 1.4;
}

.service-card-content {
    font-size: 15px;
    color: #555;
    line-height: 1.8;
}

.service-card-content pre {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.8;
    white-space: pre-wrap;
    word-wrap: break-word;
    color: #555;
}

.service-card-content p {
    margin-bottom: 10px;
}

.service-card-content p:last-child {
    margin-bottom: 0;
}

.requirements-text,
.steps-text,
.documents-text,
.contact-text,
.notes-text {
    color: #555;
    font-size: 15px;
    line-height: 1.8;
    margin: 0;
}

.fees-text,
.time-text {
    font-size: 18px;
    font-weight: 600;
    color: var(--primary-color, #007bff);
    margin: 0;
}

/* Service Apply Button Section */
.service-apply-section {
    margin: 40px 0;
    text-align: center;
    padding: 30px 0;
}

.btn-apply-service {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 18px 40px;
    background: linear-gradient(135deg, var(--primary-color, #007bff) 0%, var(--secondary-color, #0056b3) 100%);
    color: white;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.btn-apply-service:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 123, 255, 0.4);
    color: white;
    text-decoration: none;
}

.btn-apply-service:active {
    transform: translateY(-1px);
}

.btn-apply-service i {
    font-size: 20px;
}

@media screen and (max-width: 768px) {
    .subservice-page-title {
        font-size: 28px;
    }

    .subservice-page-desc {
        font-size: 16px;
    }

    .section-title {
        font-size: 24px;
    }

    .service-cards-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .service-card {
        padding: 20px;
    }

    .service-card-icon {
        width: 50px;
        height: 50px;
        font-size: 20px;
        margin-bottom: 15px;
    }

    .service-card-title {
        font-size: 18px;
        margin-bottom: 12px;
    }

    .service-card-content {
        font-size: 14px;
    }

    .btn-apply-service {
        padding: 15px 30px;
        font-size: 16px;
    }

    .service-apply-section {
        margin: 30px 0;
        padding: 20px 0;
    }
}

/* RTL Support */
[dir="rtl"] .service-card {
    text-align: right;
}
</style>

@endsection