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

@section('head')
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      "itemListElement": [{
        "@type": "ListItem",
        "position": 1,
        "name": "{{ trans('front.general.home') }}",
        "item": "{{ route('home') }}"
      },{
        "@type": "ListItem",
        "position": 2,
        "name": "{{ trans('front.services.all_services') }}",
        "item": "{{ route('services/', ['services' => trans('route.frontend.services') ]) }}"
      }]
    }
    </script>
@endsection

@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 = $general_settings->getFirstMediaUrlTraitAttribute('service', 'default') }}');"></div>
            <div class="container" style="z-index: 1;">
                <div class="st-banner-content">
                    <h1 class="text-center">{{ trans('front.services.our_services') }}</h1>
                </div>
                <ul class="st-breadcrumb">
                    <li><a href="{{ route('home') }}">{{ trans('front.general.home') }}</a></li>
                    <li class="active"><a href="{{ route('services/', ['services' => trans('route.frontend.services') ]) }}">{{ trans('front.services.all_services') }}</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 ======-->
            <div class="row py-2 wow fadeInUp" data-wow-delay=".1s">
                <div class="col-lg-12">
                    <div class="ud-section-title mb-0">
                        <span>{{ trans('front.services.our_services') }}</span>
                        <h2>{{ trans('front.smartblue.services.h2_title') }}</h2>
                        <p>{{ trans('front.services.description') }}</p>
                    </div>
                </div>
            </div>
            <!-- row -->
            @foreach($serviceCategory as $category)
                @if($category->services->count() > 0)
                    <div class="category-section py-4">
                        <!--====== 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">{{ $category->title }}</h3>
                                    <p>{{ $category->perex }}</p>
                                </div>
                            </div>
                        </div>
                        <!--====== cards row .section ======-->
                        <div class="cards">
                            <div class="row wow fadeInUp justify-content-sm-start justify-content-center d-flex"  data-wow-delay=".15s">
                                @foreach($category->services as $service)
                                    <div class="filtr-item col-lg-3 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' => $category->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' => $category->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>
                @endif
            @endforeach

        </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

@section('js')
    @parent
@endsection