@extends('frontend.layout.site')

@section('title', $service->title)

@section('content')
<!-- Service Detail Start -->
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-lg-10">

            {{-- <!-- Featured Image -->
            @if($service->featured_image)
            <div class="text-center mb-4 wow fadeIn" data-wow-delay=".2s">
                <img src="{{ asset('uploads/' . $service->featured_image) }}" alt="{{ $service->title }}" class="img-fluid rounded shadow">
            </div>
            @endif --}}

            <!-- Title & Icon -->
            <div class="text-center mb-4 wow fadeIn" data-wow-delay=".4s">
                @if($service->icon)
                    <i class="{{ $service->icon }} fa-5x text-primary mb-3"></i>
                @endif
                <h1 class="display-5 fw-bold">{{ $service->title }}</h1>
                @if($service->short_description)
                    <p class="lead text-muted">{{ $service->short_description }}</p>
                @endif
            </div>

            <!-- Long Description -->
            <div class="service-description mb-5 wow fadeIn" data-wow-delay=".6s">
                {!! $service->long_description !!}
            </div>

            <!-- Related Services -->
            @php
                $relatedServices = \App\Models\Service::where('id', '!=', $service->id)->orderBy('sequence', 'asc')->take(4)->get();
            @endphp

            @if($relatedServices->count() > 0)
            <div class="text-center mb-4 wow fadeIn" data-wow-delay="1s">
                <h5 class="text-primary">Other Services</h5>
                <h2>Explore More Services</h2>
            </div>

            <div class="row g-4">
                @foreach($relatedServices as $s)
                <div class="col-md-6 col-lg-3 wow fadeIn" data-wow-delay=".{{ $loop->iteration }}s">
                    <div class="card h-100 shadow-sm">
                        {{-- @if($s->featured_image)
                            <img src="{{ asset('storage/' . $s->featured_image) }}" class="card-img-top" alt="{{ $s->title }}">
                        @endif --}}
                        <div class="card-body text-center">
                            @if($s->icon)
                                <i class="{{ $s->icon }} fa-3x text-primary mb-2"></i>
                            @endif
                            <h5 class="card-title mt-2">{{ $s->title }}</h5>
                            <p class="card-text">{{ Str::limit(strip_tags($s->short_description), 80) }}</p>
                            <a href="{{ route('services.show', ['slug' => $s->slug]) }}" class="btn btn-primary btn-sm rounded-pill">Read More</a>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
            @endif

        </div>
    </div>
</div>
<!-- Service Detail End -->

@push('scripts')
<script src="/csstemplate/assets/frontend/lib/owlcarousel/owl.carousel.min.js"></script>
@endpush

@endsection