@extends('layout.master')

@section('meta')
    @include('layout.partials.seo', [
        'title' => nova_get_setting_translate('more_products_meta_title') ?? env('APP_NAME'),
        'description' => nova_get_setting('more_products_meta_description') ?? env('APP_NAME'),
        'keywords' => nova_get_setting('more_products_meta_keywords') ?? env('APP_NAME'),
        'image' => Storage::url(nova_get_setting('more_products_banner')),
        'schema' => nova_get_setting('more_products_schema'),
    ])
@endsection

@section('extraStyles')
@endsection
@section('content')
    <div class="container-fluid bg-breadcrumb"style="  position: relative;
                                                        background: linear-gradient(#d09d5b30, #cc944e47), url({{ Storage::url(nova_get_setting('more_products_banner')) }});
                                                        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">
                {{ nova_get_setting_translate('more_products_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"> {{ nova_get_setting_translate('more_products_title') }}</li>
        </ol>
    </div>







    <div class="container-fluid service overflow-hidden mt-5">
        <div class="container ">
            <div class="section_title ">
                <div class="col-12">
                    <h3>{{ nova_get_setting_translate('more_products_main_title') }}</h3>
                    <p>
                        {!! nova_get_setting_translate('more_products_text') !!}
                    </p>
                </div>
            </div>
            <div class="row g-4">
                @foreach ($more_product_subcategories as $subcategories)
                    <div class="col-lg-6 col-xl-4  ">
                        <div class="service-item">
                            <div class="service-inner">
                                <div class="service-img">
                                    <img src="  {{ $subcategories->getFirstMediaUrlOrDefault(MediaHelper::MORE_PRODUCT_SUB_CATEGORY_MEDIA_PATH, 'webp')['url'] }}"
                                        class="img-fluid w-100 rounded" alt="Image">
                                </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('more_products.show', ['slug' => $subcategories->slug]) }}" class="h4 section--title"> {{ $subcategories->name }}</a>
                                        </div>
                                    </div>
                                    <div class="service-content pb-4">
                                        <a href="#">
                                            <h4 class="text-white mb-4 py-3">{{ $subcategories->heading }}</h4>
                                        </a>
                                        <div class="px-4">
                                            <div class="title_post">

                                                <p class="tour_para my-3">
                                                    {{ $subcategories->short_description }}
                                                </p>
                                            </div>
                                            <a class="btn  btn__primary border-secondary rounded-pill py-3 px-5"
                                                href="{{ route('more_products.show', ['slug' => $subcategories->slug]) }}">Explore More</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach

            </div>
        </div>
    </div>
@endsection
@section('extraScripts')
@endsection