@extends('layout.layout')
@section('meta')
    @include('layout.partials.seo', [
        'title' => nova_get_setting_translate('subcategory_site_title') ?? env('APP_NAME'),
        'description' =>nova_get_setting_translate('subcategory_site_description') ?? env('APP_NAME'),
        'keywords' => nova_get_setting_translate('subcategory_site_keywords') ?? env('APP_NAME'),
        'image' => Storage::url(nova_get_setting('subcategory_banner')),
        'schema' => $settings['subcategory_schema'] ?? ''
    ])
@endsection

@section('content')
    <main class="main">
        <div class="page-header text-center" style="background-image: url('{{ Storage::url(nova_get_setting('subcategory_banner')) }}');background-size: cover;background-position: center;background-repeat: no-repeat"
        title="{{nova_get_setting_translate('subcategory_banner_title')}}"
         aria-label="{{nova_get_setting_translate('subcategory_banner_alt')}}">
            <div class="container">
                <h1 class="page-title">
                    @isset($settings['category_title'])
                        {{ json_decode($settings['category_title'])->{app()->getLocale()}  }}
                    @endisset
                <span>

                    @isset($settings['category_description'])
                        {!! json_decode($settings['category_description'])->{app()->getLocale()}  !!}
                    @endisset
                </span>
                </h1>
            </div>
        </div>
        <nav aria-label="breadcrumb" class="breadcrumb-nav border-0 mb-0">
            <div class="container">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('home') }}">{{ __('general.home') }}</a></li>
                    <li class="breadcrumb-item active" aria-current="page">
                        @isset($settings['category_title'])
                            {!! json_decode($settings['category_title'])->{app()->getLocale()}  !!}
                        @endisset
                    </li>
                </ol>
            </div>
        </nav>
        <div class="mb-2"></div>

        <div class="blog-posts">
            <div class="container">
                <div class="row">
                @foreach ($subCategories as $subCategory)
                <div class="col-md-3">
                <div class="product product-11 text-center">
                    <figure class="product-media">
                        <a href="{{route('subCategory',$subCategory->slug)}}">
                        <img src="{{ $subCategory->getFirstMediaUrlOrDefault(\App\Helpers\Constants\MediaHelper::SUB_CATEGORY_MEDIA_PATH, 'webp')['url'] }}"
                                alt="{{ $subCategory->getFirstMediaUrlOrDefault(\App\Helpers\Constants\MediaHelper::SUB_CATEGORY_MEDIA_PATH)['alt'] }}"
                                title="{{ $subCategory->getFirstMediaUrlOrDefault(\App\Helpers\Constants\MediaHelper::SUB_CATEGORY_MEDIA_PATH)['title'] }}"
                                loading="lazy" class="product-image">
                        </a>
                    </figure>
                    <div class="product-body">
                        <h3 class="product-title"><a href="{{route('subCategory',$subCategory->slug)}}">{{$subCategory->name}}</a></h3>
                    </div>
                    <div class="product-action">
                        <a href="{{route('subCategory',$subCategory->slug)}}" class="btn-product"><span> <i class="fa fa-eye"></i>{{ __('home.all_products') }}</span></a>
                    </div>
                </div>
                </div>
                @endforeach

                </div>
                <div class="row">
                    <nav aria-label="Page navigation">
                        <ul class="pagination justify-content-center">
                        {!! $subCategories->withQueryString()->onEachSide(2)->links() !!}
                        </ul>
                    </nav>
                </div>
            </div>
        </div>


    </main>
    @include('layout.partials.faq')
    @include('layout.partials.news_letter')
@endsection