@php
    /** @var $getCategoryData */
    $title = $getCategoryData->title;
    $perex = $getCategoryData->perex;
    $text = $getCategoryData->text;
    $slug = $getCategoryData->slug;
    $identifier = $getCategoryData->slug;
    $created_at = $getCategoryData->created_at;
    $updated_at = $getCategoryData->updated_at;
    $section = $getCategoryData->title;
@endphp

@extends('themes.'.config('smartekcms.themes.frontend').'.app', [
    'title' => $getCategoryData->title,
    'meta_description' => trans('front.services.meta_description', ['appName' => $general_settings->website_title]),
    'cover_image' => $coverImage ?? $general_settings->getFirstMediaUrlTraitAttribute('service', 'default'),
    'model_type' => 'service',
])

@section('content')

    <!-- ====== Banner Start ====== -->
    <section class="st-page-banner banner-2">
        <!--v2 banner-->
        <div class="card">
            <div class="card-img-overlay" style="background-image: url('{{ $coverImage = $getCategoryData->getFirstMediaUrlTraitAttribute('cover', 'default') }}');"></div>
            <div class="container" style="z-index: 1;">
                <div class="st-banner-content">
                    <h1 class="text-center">{{ $getCategoryData->title }}</h1>
                </div>
                <ul class="st-breadcrumb">
                    <li><a href="{{ route('home') }}">{{ trans('front.general.home') }}</a></li>
                    <li><a href="{{ route('services/', ['services' => trans('route.frontend.services') ]) }}">{{ trans('front.services.all_services') }}</a></li>
                    <li class="active"><a href="{{ route('services/category', ['services' => trans('route.frontend.services'), 'categorySlug' => $getCategoryData->slug ]) }}">{{ $getCategoryData->title }}</a></li>
                </ul>
            </div>

        </div>

    </section>
    <!-- ====== Banner End ====== -->

    <!-- ====== Services Area - Grid List Start ====== -->
    <section class="ud-blog-details py-5">
        <div class="container">
            <!--====== h2 row .start ======-->

            <!-- row -->
            <div class="row d-block">

                <div class="col-lg-9 category-section py-4 float-end">
                    <!--====== h3 row .section ======-->
                    <div class="row wow fadeInUp" data-wow-delay=".15s">
                        <div class="col-lg-12">
                            <div class="ud-section-title mb-0">
                                <h3 class="st-befor-h position-relative">{{ $getCategoryData->title }}</h3>
                                <p>{{ $getCategoryData->perex }}</p>
                            </div>
                        </div>
                    </div>
                    <!--====== cards row .section ======-->
                    <div class="row wow fadeInUp justify-content-sm-start justify-content-center" data-wow-delay=".15s">
                        @foreach($getCategoryData->services as $service)
                            <div class="filtr-item col-xl-3 col-lg-4 col-md-4 col-sm-6 col-10">
                                <div class="grid-content card h-100">
                                    <div class="grid-image ratio ratio-4x3">
                                        <div class="card-img-overlay d-flex align-items-center justify-content-center h-100 w-100 portfolio-content">
                                            <div class="grid-icon d-inline-block position-relative">
                                                <a class="stretched-link" href="{{ route('services/service', ['services' => trans('route.frontend.services'), 'categorySlug' => $getCategoryData->slug, 'slug' => $service->slug ]) }}">
                                                    <i class="lni lni-link fw-bold"></i>
                                                    <div class="gradient-mask-2"></div>
                                                </a>
                                            </div>
                                        </div>
                                        @if($serviceThumbImage = $service->getFirstMediaUrlTraitAttribute('cover', 'thumb_768x432'))
                                            <img class="card-img-top" src="{{ $serviceThumbImage }}" alt="{{ $service->slug }} thumbnail">
                                        @else
                                            <img width="255" height="191" class="card-img-top" src="{{ fallbackImageUrl() }}" alt="no img">
                                        @endif
                                    </div>
                                    <div class="card-body w-100 d-grid">
                                        <h4 class="card-title st-card-title">{{ $service->title }}</h4>
                                        <a class="stretched-link d-flex" href="{{ route('services/service', ['services' => trans('route.frontend.services'), 'categorySlug' => $getCategoryData->slug, 'slug' => $service->slug ]) }}">
                                            <p class="card-text st-befor position-relative">{{ $service->perex }}</p>
                                        </a>
                                    </div>
                                </div> <!-- single portfolio -->
                            </div>
                        @endforeach
                    </div>
                </div>
                <div class="col-lg-3 py-4 float-start wow fadeInLeft" data-wow-delay=".15s" style="visibility: visible; animation-delay: 0.15s; animation-name: fadeInLeft;">
                    <div class="ud-blog-sidebar pt-0 pb-5">
                        <div class="st-sidebar-menu card">
                            <ul class="menu">
                                @foreach(\App\Models\ServiceCategory::tree()->orderby('order_column')->get()->toTree() as $category)
                                    @if($category->children->count())
                                    <li class="list"><a class="{{ ($category->id == $getCategoryData->id) ? 'visited' : '' }}" href="{{ route('services/category', ['services' => trans('route.frontend.services'), 'categorySlug' => $category->slug ]) }}">{{ $category->title }}</a><button class="nested-icon"></button>
                                        @if($category->children->count())
                                            @include('themes.'.config('smartekcms.themes.frontend').'.layouts.serviceCategoryHierarchyChild',['children' => $category->children])
                                        @endif
                                    </li>
                                    @else
                                        <li class="list"><a class="{{ ($category->id == $getCategoryData->id) ? 'visited' : '' }}" href="{{ route('services/category', ['services' => trans('route.frontend.services'), 'categorySlug' => $category->slug ]) }}"> {{ $category->title }}</a></li>
                                    @endif
                                @endforeach
                            </ul>
                        </div>
                    </div>
                </div>

            </div>

        </div>  <!-- container -->
    </section>
    <!-- ====== Services Area - Grid List End ====== -->

    <!--================Business Area =================-->
    <section class="st-page-banner banner-2 bottom-banner">
        <div class="card">
            <div class="card-img-overlay" style="background-image: url('{{ asset('themes/smartblue/images/services/1n-banner-min.jpg') }}');"></div>
            <div class="container" style="z-index: 1;">
                <div class="row py-5">
                    <div class="col-md-6 col-sm-3"></div>
                    <div class="col-md-6 col-sm-9">
                        <div class="banner-text wow fadeInRight">
                            <h4>{{ trans('front.services.banner_1_title') }}</h4>
                            <p>{{ trans('front.services.banner_1_desc') }}</p>
                            <a class="ud-main-btn ud-btn-default ud-white-btn-hover" target="_blank" href="https://api.whatsapp.com/send?phone={{ $contact->phone }}">{{trans('front.services.banner_1_btn_label')}}</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--================End Business Area =================-->
@endsection