@extends('layout.master')

@section('meta')
    @include('layout.partials.seo', [
        'title' => $category->meta_title,
        'description' => $category->meta_description,
        'keywords' => $category->meta_keywords,
        'image' => $category->getFirstMediaUrlOrDefault(MediaHelper::CATEGORY_MEDIA_PATH, 'webp')['url'],
        'schema' => $category->schema,
    ])
@endsection

@section('extraStyles')
@endsection
@section('content')
    <!--====================================================================
                                                                 Carousel Start
                                        ====================================================================-->
    <div class="container-fluid bg-breadcrumb"
        style="  position: relative;
                        background: linear-gradient(#d09d5b30, #cc944e47), url({{ $category->getFirstMediaUrlOrDefault(MediaHelper::CATEGORY_BANNER_MEDIA_PATH, 'webp')['url'] }});
                        background-position: center center;
                        background-repeat: no-repeat;
                        background-size: cover;
                        padding: 60px 0 100px 0;
                        transition: 0.5s;">
        <div class="container text-center py-5" style="max-width: 900px;">
            <h4 class="text-white display-4 mb-4 wow fadeInDown" data-wow-delay="0.1s">
                {{ $category->name }}
            </h4>
        </div>
    </div>

    <div class="container-fluid  py-3 banar">
        <ol class="breadcrumb text-dark mb-0 wow fadeInDown" data-wow-delay="0.3s">
            <li class="breadcrumb-item"><a href="{{ route('home') }}" class="text-dark">{{ __('general.home') }}</a></li>
            <li class="breadcrumb-item active text-secondary"> {{ $category->heading }}</li>
        </ol>
    </div>


    <!--====================================================================
                                                               Carousel
                                          ====================================================================-->

    <!--====================================================================
                                                               subcategory
                                          ====================================================================-->

    <div class="container-fluid service overflow-hidden mt-5">
        <div class="container ">
            <div class="section_title ">
                <div class="col-12">
                    <h3>{{ $category->name }}</h3>
                    <p> {!! $category->description !!}
                    </p>
                </div>
            </div>
            <div class="row g-4">
                @foreach ($category->children as $subcategory)
                    <div class="col-lg-6 col-xl-4">
                        <div class="service-item">
                            <div class="service-inner">
                                <div class="service-img">
                                    <img src="{{ $subcategory->getFirstMediaUrlOrDefault(MediaHelper::SUB_CATEGORY_MEDIA_PATH, 'webp')['url'] }}"
                                        alt="{{ $subcategory->getFirstMediaUrlOrDefault(MediaHelper::SUB_CATEGORY_MEDIA_PATH)['alt'] }}"
                                        title="{{ $subcategory->getFirstMediaUrlOrDefault(MediaHelper::SUB_CATEGORY_MEDIA_PATH)['title'] }}"
                                        class="img-fluid w-100 rounded">
                                </div>
                                <div class="service-title">
                                    <div class="service-title-name">
                                        <div class="bg_primary text-center rounded p-3 mx-5 mb-4">
                                            <a href="{{ route('tour.index', ['categorySlug' => $category->slug, 'subCategorySlug' => $subcategory->slug]) }}"
                                                class="h4 section--title">{{ $subcategory->name }}</a>
                                        </div>
                                    </div>
                                    <div class="service-content pb-4">
                                        <a
                                            href="{{ route('tour.index', ['categorySlug' => $category->slug, 'subCategorySlug' => $subcategory->slug]) }}">
                                            <h4 class="text-white mb-4 py-3">{{ $subcategory->name }}</h4>
                                        </a>
                                        <div class="px-4">
                                            <div class="title-post">

                                                <p class="tour-para my-3">
                                                    {!! $subcategory->short_description !!}
                                                </p>
                                            </div>
                                            <a class="btn  btn__primary border-secondary rounded-pill py-3 px-5"
                                                href="{{ route('tour.index', ['categorySlug' => $category->slug, 'subCategorySlug' => $subcategory->slug]) }}">{{ __('category.more_details') }}
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach


            </div>
        </div>
    </div>
    <!--====================================================================
                                                               subcategory
                                          ====================================================================-->
@endsection
@section('extraScripts')
@endsection