{{-- @section('seo')
@include('layouts._front_includes._seo', ['seo' => $service->seo])
@endsection --}}
@extends('layouts.frontend_master')

@section('content')


    <!--banner-->
    <section class="hero-section position-relative">
        <!-- Main background image -->
        <div class="hero-bg" style="background-image: url({{ $page->cover_image->getPath() }});"></div>

        <!-- Content overlay -->
        <div class="container position-relative text-white py-5" style="z-index: 2;">
            <div class="row">
                <div class="container position-relative text-white min-vh-100 d-flex align-items-center"
                    style="z-index: 2;">
                    <div class="row justify-content-center w-100 py-5"> <!-- Kept some padding -->
                        <div class="col-lg-8 text-center">
                            <h1 class="display-4 fw-bold mb-3">{{ $page->title }}</h1>
                            <p class="lead mb-4">
                                {!! $page->short_description !!}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    {{-- @dd($service) --}}

    <!-- content Section -->
    <section class="travel-deals py-5">
        <div class="container">
            <p class="text-center text-secondary fs-6 fw-medium font-family-Onest  m-0 px-5 py-2">
                {!! $page->description !!}
            </p>
        </div>
    </section>


    @foreach ($services as $key => $service)
        @if ($key % 2 == 0)
            <div class="container py-4">
                <div class="row align-items-center gx-5">
                    <!-- Left Image -->
                    <div class="col-12 col-xxl-6 mb-4 mb-xxl-0 text-center text-xxl-start">
                        <img class="rounded-4" src="{{ $service->feature_image->getPath() }}" alt="{{ $service->title }}"
                            loading="lazy" style="height: 500px; width: 100%; object-fit: cover;">
                    </div>

                    <!-- Right Content -->
                    <div class="col-12 col-xxl-6">
                        <p class="text-dark fs-2 fw-medium font-family-Onest mb-3">
                            {!! $service->title !!}
                        </p>

                        <!-- Accordion limited height with scroll -->
                        <div class="accordion" id="inboundTourAccordion"
                            style="max-height: 400px; overflow-y: auto; scrollbar-width: thin;">
                            @php
                                $extras = json_decode($service->extra, true);
                            @endphp
                            @if ($extras)
                                @foreach ($extras as $subkey => $ext)
                                    <div class="accordion-item border border-success-subtle rounded-3 mb-2">
                                        <h2 class="accordion-header">
                                            <button class="accordion-button fs-6 fw-medium font-family-Onest" type="button"
                                                data-bs-toggle="collapse" data-bs-target="#collapseOne{{ $subkey }}"
                                                aria-expanded="{{ $subkey === 0 ? 'true' : 'false' }}">
                                                {{ $ext['question'] }}
                                            </button>
                                        </h2>
                                        <div id="collapseOne{{ $subkey }}"
                                            class="accordion-collapse collapse {{ $subkey === 0 ? 'show' : '' }}">
                                            <div class="accordion-body text-secondary fs-6 fw-medium font-family-Onest">
                                                {!! $ext['answer'] !!}
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        @else
            <div class="container py-4">
                <div class="row align-items-center gx-5">

                    <!-- Left Content (Outbound Title + Accordion) -->
                    <div class="col-12 col-xxl-6">
                        <p class="text-dark fs-2 fw-medium font-family-Onest mb-3">
                            {!! $service->title !!}
                        </p>

                        <!-- Accordion with max-height & scroll -->
                        <div class="accordion" id="outboundTourAccordion"
                            style="max-height: 400px; overflow-y: auto; scrollbar-width: thin;">
                            @php
                                $extras = json_decode($service->extra, true); // convert JSON string to array
                            @endphp

                            @if ($extras)
                                @foreach ($extras as $i => $ext)
                                    <div class="accordion-item border border-success-subtle rounded-3 mb-2">
                                        <h2 class="accordion-header">
                                            <button class="accordion-button fs-6 fw-medium font-family-Onest" type="button"
                                                data-bs-toggle="collapse" data-bs-target="#collapseOutTwo{{ $i }}"
                                                aria-expanded="{{ $i === 0 ? 'true' : 'false' }}">
                                                {{ $ext['question'] }}
                                            </button>
                                        </h2>
                                        <div id="collapseOutTwo{{ $i }}" class="accordion-collapse collapse {{ $i === 0 ? 'show' : '' }}">
                                            <div class="accordion-body text-secondary fs-6 fw-medium font-family-Onest">
                                                {!! $ext['answer'] !!}
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            @endif
                        </div>
                    </div>

                    <!-- Right Image -->
                    <div class="col-12 col-xxl-6 mb-4 mb-xxl-0 text-center text-xxl-start">
                        <img class="rounded-4" src="{{ $service->feature_image->getPath() }}" alt="{{ $service->title }}"
                            loading="lazy" style="height: 500px; width: 100%; object-fit: cover;">
                    </div>

                </div>
            </div>
        @endif
    @endforeach

    {{-- @dd($similar_services) --}}
    <!--service we provide-->
    @if (!empty($similar_services))
        <section class="container-fluid py-5 bg-light">
            <!-- Section Heading -->
            <div class="row justify-content-center mb-4">
                <div class="col-12 text-center">
<h2 class="fs-1 fw-medium font-family-Onest mb-0">
  <span class="text-dark">
    Services that we
  </span>
  <span class="text-warning">
    Provide
  </span>
</h2>
                    <p class="fs-6 text-secondary fw-medium font-family-Onest">Try a variety of benefits when using our
                        services
                    </p>
                </div>
            </div>

            <div class="row g-4 px-5">
                @foreach ($similar_services as $service)
                    <div class="col-md-4 col-lg-4">
                        <a href="{{ route('service-detail', $service->slug) }}" class="text-decoration-none d-block h-100">
                            <div
                                class="p-4 bg-white rounded-4 shadow-sm h-100 d-flex flex-column align-items-center text-center card-hover">
                                <img src="{{ $service->feature_image->getPath() }}" class="mb-3" style="width: 40px;"
                                    alt="{{ $service->title }}">
                                <h5 class="fw-medium text-dark">{{ $service->title }}</h5>
                                <p class="text-secondary fs-6">
                                    {!! \Illuminate\Support\Str::words(strip_tags($service->description), 20, '...') !!}
                                </p>
                                <span class="btn mt-auto">&rarr;</span>
                            </div>
                        </a>
                    </div>

                @endforeach
            </div>


        </section>
    @endif


    <!--know more about service-->
    @if (!empty($service_feature))
        <section class="container-fluid">
            <div class="container py-5">
                <div class="position-relative rounded-4 d-flex align-items-center justify-content-center"
                    style="min-height: 400px;">
                    <!-- Background image with darker overlay -->
                    <div class="w-100 h-100 position-absolute rounded-4" style="background: rgba(0, 0, 0, 0.6); z-index: 1;">
                    </div>
                    <img src="{{ $service_feature->feature_image->getPath() }}" alt="Travel Service"
                        class="w-100 h-100 object-fit-cover rounded-4 position-absolute" style="opacity: 0.8; z-index: 0;">

                    <div class="text-center p-4 p-md-5 mx-auto position-relative" style="z-index: 2;">
                        <h1 class="text-white fw-medium mb-4" style="font-family: 'Onest', sans-serif; font-size: 2.5rem;">
                            {!! $service_feature->name !!}
                        </h1>

                        <p class="text-white fw-medium mb-4 mx-auto"
                            style="font-family: 'Onest', sans-serif; max-width: 600px; font-size: 1.25rem;">
                            {!! $service_feature->meta1 !!}
                        </p>

                        <div class="d-flex justify-content-center gap-3 mt-5">
                            @if (!empty($contact_page))
                                <a class="btn bg-primary text-white px-4 py-2 rounded-3 fw-medium"
                                    style="font-family: 'Onest', sans-serif; font-size: 16px; line-height: 24px;"
                                    href="{{ route('page', $contact_page->slug) }}">
                                    Talk to an Expert >
                                </a>
                            @endif
                            @if (!empty($service_feature->meta))
                                <a class="btn bg-warning text-dark px-4 py-2 rounded-3 fw-medium" target="_blank"
                                    style="font-family: 'Onest', sans-serif; font-size: 16px; line-height: 24px;"
                                    href="{{ $service_feature->meta }}">
                                    Request a quote
                                </a>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </section>
    @endif


    <!-- our-latest-article -->
    <section class="container-fluid py-5" style="background-color: #FAFAFA;">
        <div class="container">
            <!-- Heading and Subheading -->
            <div class="row justify-content-center text-center mb-5">
                <div class="col-lg-8">
                    <h2 class="fw-medium font-family-Onest text-dark" style="font-size: 48px; line-height: 56px;">
                        Our Latest Articles About Travel
                    </h2>
                    <p class="text-secondary fw-medium font-family-Onest mt-3" style="font-size: 18px; line-height: 28px;">
                        Know the latest articles about travel
                    </p>
                </div>
            </div>

            <!-- Article Cards Grid -->
            <div class="row g-4">
                @foreach ($blogs as $blog)
                    <a href="{{ route('blog-detail', $blog->slug) }}" class="col-md-6 col-xl-4">
                        {{-- <div class="col-md-6 col-xl-4"> --}}
                            <div class="position-relative rounded-4 overflow-hidden shadow" style="height: 408px;">
                                <div class="w-100 h-100 position-absolute top-0 start-0"
                                    style="background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, black 100%), url({{ $blog->feature_image->getPath() }}); background-size: cover; background-position: center;">
                                </div>
                                <div class="position-absolute bottom-0 p-4" style="z-index: 2;">
                                    <p class="text-light fw-medium font-family-Onest m-0"
                                        style="font-size: 20px; line-height: 28px;">
                                        {!! $blog->title !!}
                                    </p>
                                </div>
                            </div>

                            {{--
                        </div> --}}
                    </a>
                @endforeach

            </div>

            <!-- Read More Button -->
            @if (!empty($blogs_page))
                <div class="container">
                    <div class="text-center mt-5">
                        <a class="btn bg-primary text-white px-4 py-2 rounded-pill font-family-Onest fw-medium"
                            style="font-size: 16px; line-height: 24px;" href="{{ route('page', $blogs_page->slug) }}">
                            Read More >
                        </a>
                    </div>
                </div>
            @endif

        </div>
    </section>


@endsection