@extends('website.layout.app')
@section('title', $value->meta_title ?? 'Invinaa')
@section('meta_keywords', $value->meta_keyword ?? '')
@section('meta_description', $value->meta_description ?? '')
@section('content')


    <!-- Header Start -->
    <div class="container-fluid bg-breadcrumb">
        <div class="container text-center py-5" style="max-width: 900px">
            <h3 class="text-white display-3 mb-4 wow fadeInDown" data-wow-delay="0.1s">
                Our Services
            </h3>
            <ol class="breadcrumb justify-content-center text-white mb-0 wow fadeInDown" data-wow-delay="0.3s">
                <li class="breadcrumb-item">
                    <a href="index.html" class="text-white">Home</a>
                </li>

                <li class="breadcrumb-item active text-secondary">Services</li>
            </ol>
        </div>
    </div>
    <!-- Header End -->

    <!-- content -->
    <section id="services-page" class="services-page section py-5">
        <div class="container" data-aos="fade-up" data-aos-delay="100">
            <div class="row">
                <!-- LEFT SIDEBAR -->
                <div class="col-lg-3 mb-4">
                    <div class="accordion service-accordion shadow-sm rounded-3" id="servicesAccordion">

                        @forelse($ourService as $key => $service)
                            @php
                                $isActiveService = isset($value) && $service->id == ($value->service_id ?? null);
                                $collapseId = 'collapseService' . $service->id;
                                $headingId = 'headingService' . $service->id;
                              @endphp

                            <div class="accordion-item border-0 mb-2 rounded-3 overflow-hidden">
                                <h2 class="accordion-header" id="{{ $headingId }}">
                                    <button
                                        class="accordion-button {{ $isActiveService ? '' : 'collapsed' }} custom-accordion-btn"
                                        type="button" data-bs-toggle="collapse" data-bs-target="#{{ $collapseId }}">
                                        {{ $service->title ?? 'Service' }}
                                    </button>
                                </h2>

                                <div id="{{ $collapseId }}"
                                    class="accordion-collapse collapse {{ $isActiveService ? 'show' : '' }}"
                                    data-bs-parent="#servicesAccordion">
                                    <div class="accordion-body py-2">
                                        <ul class="service-list ps-0">

                                            @forelse($service->subServices ?? [] as $sub)
                                                <li>
                                                    <a href="{{ route('sub_services_details', base64_encode($sub->id)) }}">
                                                        <i class="bi bi-chevron-right"></i>
                                                        {{ $sub->title ?? 'Sub Service' }}
                                                    </a>
                                                </li>
                                            @empty
                                                <li class="text-muted small ps-3">No services available</li>
                                            @endforelse

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

                        @empty
                            <p class="text-muted">No services found.</p>
                        @endforelse

                    </div>
                </div>


                <!-- RIGHT SIDE CONTENT -->
                <div class="col-lg-9">
                    <div class="service-details p-4 rounded-4 shadow-sm bg-white">
                        <h2 class="service-title mb-3 fw-bold text-primary">
                            {{ $value->title ?? 'Service Title' }}
                        </h2>

                        <p>
                            {{ $value->slug_name ?? 'Service Description' }}
                        </p>

                        <img src="{{ asset($value->image ?? 'https://images.unsplash.com/photo-1554224154-22dec7ec8818?auto=format&fit=crop&w=900&q=60') }}"
                            class="custom-img mb-4" alt="Company Registration" />


                        {!! $value->short_description ?? 'Service Long Description' !!}
                    </div>
                </div>
            </div>
        </div>
    </section>
    {{-- @include('website.request-quotes') --}}
@endsection