@extends('frontend.layouts.app')

@section('title', $title)
@section('description', $description)

@section('content')
    @php
        $assetPath = fn (string $path) => asset('frontend/' . ltrim($path, '/'));
    @endphp

    @include('frontend.layouts.breadcrumb', ['title' => 'Service Details'])

    <section class="services-details space bg-light">
        <div class="container">
            <div class="row">
                <div class="col-xl-4 col-lg-4">
                    <div class="service-sidebar">
                        <div class="sidebar-widget service-sidebar-single">
                            <div class="widget-box category-list">
                                <h4 class="sidebar-title">Categories</h4>
                                <div class="sidebar-service-list">
                                    <ul>
                                        <li class="current"><a href="#">{{ optional($service->category)->name ?? 'General' }} <i class="fas fa-arrow-right"></i></a></li>
                                        @foreach($relatedServices->take(4) as $related)
                                            <li><a href="{{ route('frontend.services.show', $related) }}">{{ $related->name }} <i class="fas fa-arrow-right"></i></a></li>
                                        @endforeach
                                    </ul>
                                </div>
                            </div>
                            <div class="widget-box service-details-help bg-dark">
                                <div class="bg image"><img src="{{ $assetPath('images/service/details-bg.webp') }}" alt=""></div>
                                <div class="service-details-content">
                                    <div class="icon"><img src="{{ $assetPath('images/icons/contact.png') }}" alt=""></div>
                                    <h2 class="help-title">Need Tech Service? <br> Contact Us</h2>
                                    <p class="text">Talk to Ndarama Technologies about implementation, support, and customization for this service.</p>
                                    <div class="help-contact">
                                        <a href="{{ route('frontend.contact') }}" class="theme-btn br-30">Contact with Us</a>
                                    </div>
                                </div>
                            </div>
                            <div class="widget-box service-download-box mt-4">
                                <h4 class="sidebar-title">Downloads</h4>
                                <div class="service-download-btn mb-10">
                                    <a href="#" class="theme-btn btn-style-1 d-grid"><span class="btn-title"><img class="mr-10" src="{{ $assetPath('images/service/service-details-icon01.webp') }}" alt="">Company Report 2025.pdf</span></a>
                                </div>
                                <div class="service-download-btn">
                                    <a href="#" class="theme-btn btn-style-2 d-grid bg-dark"><span class="btn-title"><img class="mr-10" src="{{ $assetPath('images/service/service-details-icon02.webp') }}" alt="">Company Brochure.doc</span></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-8 col-lg-8">
                    <div class="services-details__content">
                        <div class="image overlay-anim1 cms-frame cms-frame--service">
                            <img class="cms-img-cover" src="{{ $service->image ? asset('storage/' . $service->image) : $assetPath('images/service/details-img01.webp') }}" alt="{{ $service->name }}" width="700" height="479">
                        </div>
                        <div class="title-wrap three mt-30">
                            <div class="sub-title-2 text-theme"><i class="fa-solid fa-circle-check"></i>{{ optional($service->category)->name ?? 'Service' }}</div>
                            <h3 class="title-two">{{ $service->name }}</h3>
                        </div>
                        <p>{!! $service->description ?: e($service->short_description) !!}</p>
                        <div class="row service-details-box my-40 md-my-0 md-gy-30">
                            <div class="col-lg-6 col-md-6">
                                <div class="service-details-block">
                                    <div class="inner-box d-flex align-items-center">
                                        <div class="icon mr-20"><img src="{{ $assetPath('images/service/alam.webp') }}" alt=""></div>
                                        <h5 class="title my-0">Real Time Tracking <br> Gaurantee</h5>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6">
                                <div class="service-details-block">
                                    <div class="inner-box d-flex align-items-center">
                                        <div class="icon bg-dark mr-20"><img src="{{ $assetPath('images/service/check.webp') }}" alt=""></div>
                                        <h5 class="title my-0">Security Gaurantee <br> for Cargo Service</h5>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <h3 class="title mt-30">What Benifits?</h3>
                        <p class="my-0">Authoritatively plagiarize bricks-and-clicks infrastructures for turnkey niche markets and engage top-line services.</p>
                        <div class="row md-gy-30 align-items-center mt-30 md-mt-0 mb-40 md-mb-0">
                            <div class="col-lg-6 col-md-6 col-sm-6">
                                <div class="featured-list">
                                    <ul class="list-style-1">
                                        <li><span><img src="{{ $assetPath('images/service/details-check.webp') }}" alt=""></span> Completely provide access to goal</li>
                                        <li><span><img src="{{ $assetPath('images/service/details-check.webp') }}" alt=""></span> Globally transform competitive</li>
                                        <li><span><img src="{{ $assetPath('images/service/details-check.webp') }}" alt=""></span> Monotonectally client focused</li>
                                    </ul>
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-6">
                                <div class="featured-list">
                                    <ul class="list-style-1">
                                        <li><span><img src="{{ $assetPath('images/service/details-check.webp') }}" alt=""></span> Completely provide access to goal</li>
                                        <li><span><img src="{{ $assetPath('images/service/details-check.webp') }}" alt=""></span> Globally transform competitive</li>
                                        <li><span><img src="{{ $assetPath('images/service/details-check.webp') }}" alt=""></span> Monotonectally client focused</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="row md-gy-30 align-items-center">
                            <div class="col-lg-6 col-md-6 col-sm-6">
                                <div class="details-image-box overlay-anim1">
                                    <img class="img1 w-100 br-10" src="{{ $assetPath('images/service/details-img02.webp') }}" alt="">
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-6">
                                <div class="details-image-box overlay-anim1">
                                    <img class="img1 w-100 br-10" src="{{ $assetPath('images/service/details-img03.webp') }}" alt="">
                                </div>
                            </div>
                        </div>
                        <div class="innerpage mt-70 sm-mt-30">
                            <h3 class="title mb-30 vxs-mb-25">Frequently Asked Questions</h3>
                            <div class="tv-faq-section">
                                <ul class="accordion-box">
                                    <li class="accordion active-block">
                                        <div class="acc-btn bg-white active">01. How do you start a {{ $service->name }} project?<div class="icon"></div></div>
                                        <div class="acc-content active"><div class="content bg-white"><div class="text">We align the service to your users, data, reporting needs, and operational workflow.</div></div></div>
                                    </li>
                                    <li class="accordion">
                                        <div class="acc-btn bg-white">02. Can the solution be customized?<div class="icon fa fa-angle-right"></div></div>
                                        <div class="acc-content"><div class="content bg-white"><div class="text">Yes. We shape modules, permissions, workflows, and integrations around your organization instead of forcing a one-size-fits-all process.</div></div></div>
                                    </li>
                                    <li class="accordion">
                                        <div class="acc-btn bg-white">03. Do you provide support after launch?<div class="icon fa fa-angle-right"></div></div>
                                        <div class="acc-content"><div class="content bg-white"><div class="text">Yes. We provide training, maintenance, troubleshooting, and ongoing improvements so the system keeps working for real users.</div></div></div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

        @if($relatedServices->count() > 0)
            <section class="tv-service-section bg-light space-bottom">
                <div class="container">
                    <div class="title-wrap three mb-40">
                        <div class="sub-title-2 text-theme"><i class="fa-solid fa-circle-check"></i>More Services</div>
                        <h2 class="sec-title">Related Services</h2>
                    </div>
                    <div class="row gy-30">
                    @foreach($relatedServices as $related)
                        <div class="col-lg-6">
                            <div class="tv-feature-box">
                                <h2><a href="{{ route('frontend.services.show', $related) }}">{{ $related->name }}</a></h2>
                                <p>{{ \Illuminate\Support\Str::limit(strip_tags($related->short_description ?: $related->description), 120) }}</p>
                            </div>
                        </div>
                    @endforeach
                    </div>
                </div>
            </section>
        @endif
    @include('frontend.partials.newsletter')
@endsection