@extends("Front::Layout.master")

@section("title")
    @if(isset($page->post_meta_array["meta_title"])){{ $page->post_meta_array["meta_title"] }}@else{{ $page->title }}@endif
@endsection

@section("meta")
    <meta name="robots" content="@if(isset($page->post_meta_array["meta_follow"])){{ $page->post_meta_array["meta_follow"] }}@endif, @if(isset($page->post_meta_array["meta_index"])){{ $page->post_meta_array["meta_index"] }}@endif">
    <link rel="canonical" href="{{ url()->current() }}/">
    <meta property="og:locale" content="fa_IR">
    <meta property="og:type" content="page">
    <meta property="og:description" content="{{ $page->post_meta_array["meta_description"] }}">
    <meta name="twitter:description" content="{{ $page->post_meta_array["meta_description"] }}">
    <meta property="og:title" content="@if(isset($page->post_meta_array["meta_title"])){{ $page->post_meta_array["meta_title"] }}@else{{ $page->title }}@endif">
    <meta property="og:url" content="{{ $page->url }}">
    <meta property="og:site_name" content="{{ get_site_title() }}">
    <meta property="og:updated_time" content="{{ $page->updated_at }}">
    <meta name="twitter:title" content="@if(isset($page->post_meta_array["meta_title"])){{ $page->post_meta_array["meta_title"] }}@else{{ $page->title }}@endif">
@endsection


@section("content")
    <!-- breadcrumb -->
    <div class="breadcrumbSection marginX my-md-3 my-3">
        <div class="breadcrumb_contanier">
            <ul class="d-flex">
                <li class="ml-2"><a href="{{route('home')}}" class="font_size_2">تاسیسات اول</a></li>
                <li class="ml-2"><a href="#" class="font_size_2">خدمات</a></li>
            </ul>
        </div>
    </div>
    <!-- end breadcrumb -->
        <div class="container">
            {{--<div class="services-slider">
                <div class="first_slider overflow-hidden">
                    <div class="main-first_slider">
                        <!-- Slider main container -->
                        <div class="main-services-swiper-container col-12">
                            <!-- Additional required wrapper -->
                            <div class="swiper-wrapper">
                                <!-- Slides -->
                                @foreach($data as $service)
                                    @if($service->children->isNotEmpty())
                                        <div class="card_slider  swiper-slide">
                                            <a href="{{ route('service.parent',$service->slug) }}">
                                                <div class="service-slider-item" data-service="{{ $service->id }}">
                                                    <div class="service-slider-item-img">
                                                        <img class="img img-fluid" src="{{$service->thumb()}}">
                                                    </div>
                                                    <div class="service-slider-item-title">
                                                        <h5>{{ $service->name }}</h5>
                                                    </div>
                                                 </div>
                                            </a>
                                        </div>
                                    @endif
                                @endforeach
                            </div>
                            <!-- If we need pagination -->
                        </div>
                    </div>
                </div>
            </div>--}}


                        <div class="cards_container_service d-flex flex-wrap  ">
                                @foreach($data as $service)
                                            <div class="col-md-3 mt-3 col-sm-6 col-12 d-flex justify-content-center">
                                                <div class="card_slider  swiper-slide border " style="    width: 100%;">
                                                    <a href="{{route('service.parent',$service->slug)}}" class="text-decoration-none">
                                                        <img class="img img-fluid" src="{{$service->thumb()}}">
                                                        <div class="slider_title">
                                                            <p class="font_size_0">{{$service->name}}</p>
                                                        </div>
                                                    </a>
                                                </div>
                                            </div>
                                @endforeach
                        </div>

        </div>

    @push("js")
       {{-- <script>
            const main_second_services_container = new Swiper('.main-services-swiper-container', {

                speed: 750,
                loop: true,
                spaceBetween: 20,
                effect: 'slide',
                lazy: true,
                // resizeObserver : true,
                setWrapperSize: true,

                pagination: {
                    el: '#first_discount_paginate',
                    // clickable : true,
                },
                // Navigation arrows
                navigation: {
                    nextEl: '#secend_discount_navigation_next',
                    prevEl: '#secend_discount_navigation_prev',
                },


                breakpoints: {
                    // when window width is >= 320px
                    200: {
                        slidesPerView: 2,
                        spaceBetween: 20,
                    },
                    // when window width is >= 480px
                    480: {
                        slidesPerView: 3,
                        spaceBetween: 20,
                    },
                    // when window width is >= 640px
                    576: {
                        slidesPerView: 5,
                        spaceBetween: 20,
                    },
                    1110: {
                        slidesPerView: 8,
                        spaceBetween: 20,
                    },
                    // when window width is >= 640px
                    1367: {
                        slidesPerView: 8,
                        spaceBetween: 20
                    }
                }
            });


            /*jQuery(".service-slider-item").click(function (){
                var service=jQuery(this).data("service");
                jQuery(".service-box").stop().hide(500)
                jQuery(`.service-box[data-service=${service}]`).stop().show(800)
            })*/
        </script>--}}
    @endpush

@endsection
