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

@extends('themes.'.config('smartekcms.themes.frontend').'.app', [
    'title' => $title,
    'meta_description' => Illuminate\Support\Str::limit(strip_tags(htmlspecialchars_decode($perex ??= $text)),156),
    'meta_keywords' => Illuminate\Support\Str::limit(strip_tags(htmlspecialchars_decode($title)), 40). ', ' .$general_settings->meta_keywords,
    'section' => $getData->serviceCategory->title,
    'cover_image' => $coverImage ?? $general_settings->getFirstMediaUrlTraitAttribute('service', 'default'),
    'model_type' => 'service',
])

@section('head')
    <link rel="stylesheet" href="{{ asset('themes/smartblue/css/magnific-popup.min.css') }}">

    <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') ]) }}"
      },{
        "@type": "ListItem",
        "position": 3,
        "name": "{{ $getData->serviceCategory->title }}",
        "item": "{{ route('services/category', ['services' => trans('route.frontend.services'), 'categorySlug' => $getData->serviceCategory->slug ]) }}"
      },{
        "@type": "ListItem",
        "position": 4,
        "name": "{{ $getData->title }}",
        "item": "{{ route('services/service', ['services' => trans('route.frontend.services'), 'categorySlug' => $getData->serviceCategory->slug, 'slug' => $getData->slug ]) }}"
      }]
    }
    </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('{{ $getData->serviceCategory->getFirstMediaUrlTraitAttribute('cover', 'default') }}');"></div>
            <div class="container" style="z-index: 1">
                <div class="st-banner-content">
                    <h1 class="text-center">{{ $getData->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><a href="{{ route('services/category', ['services' => trans('route.frontend.services'), 'categorySlug' => $getData->serviceCategory->slug ]) }}">{{ $getData->serviceCategory->title }}</a></li>
                    <li class="active"><a href="{{ route('services/service', ['services' => trans('route.frontend.services'), 'categorySlug' => $getData->serviceCategory->slug, 'slug'=> $getData->slug ]) }}">{{ $getData->title }}</a></li>
                </ul>
            </div>
        </div>
    </section>
    <!-- ====== Banner End ====== -->


    <!-- ====== Service Details Start ====== -->
    <section class="ud-blog-details pt-5">
        <div class="container">
            <div class="row d-block">

                <div class="col-lg-9 float-end wow fadeInUp" data-wow-delay=".15s">
                    <!-- ===== images section Start ===== -->
                    <div class="row">
                        @php($gallery = $getData->getMediaTraitAttribute('gallery'))

                        @if($coverImage = $getData->getFirstMediaUrlTraitAttribute('cover', 'default'))
                            <div @class(['col-xl-7 col-lg-12 col-md-7 mb-3 popup-cover', 'col-xl-12' => ! $gallery ])>
                                <div class="st-service-details-image ratio ratio-16x9" href="{{ $coverImage }}" data-effect="mfp-zoom-in">
                                    <img src="{{ $getData->getFirstMediaUrlTraitAttribute('cover', 'thumb_768x432') }}" alt="{{ $getData->slug }} service details"/>
                                    <div class="ud-blog-overlay opacity-50"></div>
                                </div>
                            </div>
                        @endif

                        @if($gallery)
                        <div class="col-xl-5 col-lg-12 col-md-5">
                            <div class="owl-carousel popup-gallery">
                                @foreach($gallery as $k => $media)
                                <div class="st-service-details-image ratio ratio-1x1" href="{{ $media->getUrl('default') }}" data-effect="mfp-zoom-in">
                                    <img src="{{ $media->getUrl('thumb_400x400') }}" alt="{{ $getData->slug }} service gallery image {{ $k + 1 }}"/>
                                    <div class="ud-blog-overlay opacity-50"></div>
                                </div>
                                @endforeach
                            </div>
                        </div>
                        @endif

                    </div>
                    <!-- ===== images section End ===== -->

                    <div @class(['ud-blog-details-content', 'pt-0' => ! $coverImage, 'pt-5' => $coverImage])>
                        <h2 class="ud-blog-details-title">{{ $getData->title }}</h2>
                        <div class="ud-blog-details-para">{!! $getData->text !!}</div>
                    </div>

                    <!-- ====== FAQ/FORM Start ====== -->
                    <div class="st-faq-form my-5">
                        <div class="st-faq-form-content">
                            <div class="shape">
                                <img src="{{ asset('themes/smartblue/images/faq/shape.svg') }}" alt="div-bg-shape" />
                            </div>
                            <div class="faq-form-container">
                                <div class="row">

                                    <div class="col-lg-7">
                                    @foreach($getData->faqCategory->count() ? $getData->faqCategory : $general_settings->faq_categories_of_services as $faqCategory)
                                        <!-- ====== FAQ Start ====== -->
                                        <div class="row">
                                            <div class="ud-section-title text-center mx-auto">
                                                <span>{{ trans('front.faq.faq') }}</span>
                                                <h3>{{ $faqCategory->title }}</h3>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-lg-12">
                                                @foreach($faqCategory->faqs as $key => $value)
                                                <div class="ud-single-faq wow fadeInUp" data-wow-delay=".{{$key+1}}s">
                                                    <div class="accordion">
                                                        <button class="ud-faq-btn {{ ($loop->first == false) ? 'collapsed' : '' }}" data-bs-toggle="collapse" data-bs-target="#collapse{{$key}}">
                                                            <span class="icon"><i class="lni lni-chevron-down"></i></span>
                                                            <span>{{ $value->title }}</span>
                                                        </button>
                                                        <div id="collapse{{$key}}" class="accordion-collapse collapse {{ ($loop->first == true) ? 'show' : '' }}">
                                                            <div class="ud-faq-body">{!! $value->text !!}</div>
                                                        </div>
                                                    </div>
                                                </div>
                                                @endforeach
                                            </div>
                                        </div>
                                        <!-- ====== FAQ End ====== -->
                                    @endforeach
                                    </div>

                                    <div class="col-lg-5">
                                        <!-- ====== Contact Start ====== -->
                                        <div class="ud-contact-form-wrapper wow fadeInUp" data-wow-delay=".2s">
                                            <h3 class="ud-contact-form-title">{{ trans('front.contact.in_page_form.h_title') }}</h3>
                                            <form class="ud-contact-form" action="{{ route('contactFormPost') }}" method="post" id="indexContactForm">
                                                @csrf
                                                <div class="ud-form-group">
                                                    <label for="name">{{ trans('front.contact.in_page_form.name') }}*</label>
                                                    <input type="text" id="name" name="name" placeholder="{{ trans('front.contact.in_page_form.name_placeholder') }}"/>
                                                </div>
                                                <div class="ud-form-group">
                                                    <label for="email">{{ trans('front.contact.in_page_form.email') }}*</label>
                                                    <input type="email" id="email" name="email" placeholder="{{ trans('front.contact.in_page_form.example_email') }}"/>
                                                </div>
                                                <div class="ud-form-group">
                                                    <label for="subject">{{ trans('front.contact.subject') }}*</label>
                                                    <select id="subject" name="subject" class="form-select form-select-sm">
                                                        <option value="">{{ trans('front.contact.in_page_form.select_service') }}</option>
                                                    @foreach(\App\Models\Service::where('service_category_id', $getData->service_category_id)->get() as $service)
                                                        <option value="{{ $service->title }}">{{ $service->title }}</option>
                                                    @endforeach
                                                    </select>
                                                </div>
                                                <div class="ud-form-group">
                                                    <label for="message">{{ trans('front.contact.in_page_form.message') }}*</label>
                                                    <textarea name="message" id="message" rows="3" placeholder="{{ trans('front.contact.in_page_form.message_placeholder') }}"></textarea>
                                                </div>
                                                <div class="ud-form-group mb-0">
                                                    <button type="submit" class="ud-main-btn">{{ trans('front.contact.in_page_form.send_message') }}</button>
                                                </div>
                                            </form>
                                        </div>
                                        <!-- ====== Contact End ====== -->
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- ====== FAQ/FORM End ====== -->

                </div>

                <div class="col-lg-3 float-start wow fadeInLeft" data-wow-delay=".15s">
                    <div class="ud-blog-sidebar pt-0 pb-5">

                        <div class="st-sidebar-menu card">
                            <ul class="st-corporate-sidebar-ul">
                                @foreach(\App\Models\Service::where('service_category_id',$getData->service_category_id)->get() as $service)
                                    <li @class(['active' => $service->id == $getData->id])>
                                        <h5 class="ud-article-title">
                                            <a href="{{ route('services/service', ['services' => trans('route.frontend.services'), 'categorySlug' => $getData->serviceCategory->slug, 'slug' => $service->slug ]) }}">{{ $service->title }}</a>
                                        </h5>
                                    </li>
                                @endforeach
                            </ul>
                        </div>

                        @php($medias = $getData->getMediaTraitAttribute('files') ?: $general_settings->getMediaTraitAttribute('services_files'))
                        @if($medias)
                            <!-- ====== FILES Start ====== -->
                            <h3 class="ud-articles-box-title">{{ trans('front.service.sidebar.our_brochures') }}</h3>
                            <div class="ud-newsletter-box st-brochure">
                                <img src="{{ asset('themes/smartblue/images/blog/dotted-shape.svg') }}" alt="shape" class="shape shape-1"/>
                                <img src="{{ asset('themes/smartblue/images/blog/dotted-shape.svg') }}" alt="shape" class="shape shape-2"/>

                                @foreach($medias as $media)
                                    <a href="{{ $media->getFullUrl() }}" download="{{ $getData->slug.'_'.$getData->updated_at->format('d_m_Y') /*$media->getCustomProperty('name')*/ }}" class="ud-main-btn ud-btn-default ud-white-btn-hover">
                                        <i @class(['fs-5',
                                                   'fa', 'fa-file-pdf-o' => $media->extension === 'pdf',
                                                   'fa-file-word-o' => in_array($media->extension, ['doc', 'docx']),
                                                   'fa-file-excel-o' => in_array($media->extension, ['xls', 'xlsx']),
                                                   'fa-file-zip-o' => $media->extension === 'zip',
                                        ])></i>
                                        <span class="text-capitalize">{{ $media->extension }}.  {{ trans('front.general.download') }}</span>
                                    </a>
                                @endforeach
                            </div>
                            <!-- ====== FILES End ====== -->
                        @endif

                        <div class="ud-banner-ad position-relative">
                            <h2 class="position-absolute text-white" style="bottom: 1rem; left: 1rem;">{{ trans('front.contact.info') }}</h2>
                            <a href="{{ route('contact', ['contact' => trans('route.frontend.contact') ]) }}">
                                <img src="{{ asset('themes/smartblue/images/leftsidebar/contact-info-phone-1869510_640-min.jpg') }}" alt="st-left_sidebar-contact-info-phone"/>
                            </a>
                        </div>
                        <div class="st-contact-list mx-2">
                            <a class="mb-2" href="tel:{{ $contact->phone }}"><i class="fa fa-phone pe-3 opacity-75"></i>{{ $contact->phone }}</a>
                            <a class="mb-2" style="font-size: 17px;" href="mailto:{{ $contact->email }}"><i class="fa fa-paper-plane pe-3 opacity-75"></i>{{ $contact->email }}</a>
                        </div>

                    </div>
                </div>

            </div>
        </div>
    </section>
    <!-- ====== Service Details End ====== -->

@endsection

@section('js')
<!--====== OwlCarousel2 Start ======-->
<script src="{{ asset('themes/smartblue/js/owl/owl.carousel.min.js') }}"></script>
<script src="{{ asset('themes/smartblue/js/jquery.magnific-popup.min.js') }}"></script>
<script type="text/javascript">
    $(document).ready(function() {
        //Service gallery .start
        $('.owl-carousel').owlCarousel({
			rtl: {{ (app()->getLocale() === 'ar' || app()->getLocale() === 'fa') ? 'true' : 'false' }},
            items: 1,
            margin: 10,
            // autoHeight: tru
            loop: true,
            nav: false,
            autoplay: true,
            smartSpeed: 1500,
            dots: false,
            // navContainerClass: 'practice_arrow',
            // navText: ['<i class="lni lni-arrow-left"></i>','<i class="lni lni-arrow-right"></i>'],
            responsive : {
                480 : { items : 2  }, // from zero to 480 screen width 4 items
                768 : { items : 1  }, // from 480 screen widthto 768 6 items
                992 : { items : 2  }, // from 480 screen widthto 768 6 items
                1200 : { items : 1  }, // from 480 screen widthto 768 6 items
                // 1024 : { items : 1 },  // from 768 screen width to 1024 8 items
            },
        });
        //Services gallery .end

        $('.popup-gallery').magnificPopup({
            delegate: '.owl-item:not(.cloned) .ratio',
            type: 'image',
            removalDelay: 500, //delay removal by X to allow out-animation
            gallery:{
                enabled:true
            }
        });

        $('.popup-cover').magnificPopup({
            delegate: '.ratio',
            type: 'image',
            removalDelay: 500, //delay removal by X to allow out-animation
            gallery:{
                enabled:true
            }
        });
    });
</script>
<!--====== OwlCarousel2 End ======-->

<!--====== Contact Form Start ======-->
<script type="text/javascript">
    $(document).ready(function(){
        (function($) {
            "use strict";
            $(function() {
                //validate indexContactForm form
                $('#indexContactForm').validate({
                    rules: {
                        subject: {
                            required: true,
                        },
                        email: {
                            required: true,
                            email: true
                        },
                        message: {
                            required: true,
                            minlength: 20
                        }
                    },
                    messages: {
                        subject: {
                            required: "{{ trans('front.contact.subject_required') }}",
                            minlength: "{{ trans('front.contact.subject_minlength') }}"
                        },
                        email: {
                            required: "{{ trans('front.contact.email_required') }}"
                        },
                        message: {
                            required: "{{ trans('front.contact.message_required') }}",
                            minlength: "{{ trans('front.contact.message-minlength') }}"
                        }
                    },
                    submitHandler: function(form) {
                        $(form).ajaxSubmit({
                            type:"POST",
                            data: $(form).serialize(),
                            url:"/contact",
                            success: function() {
                                $('#indexContactForm :input').attr('disabled', 'disabled');
                                $('#indexContactForm').fadeTo( "slow", 1, function() {
                                    $(this).find(':input').attr('disabled', 'disabled');
                                    $(this).find('label').css('cursor','default');
                                    $('#success').fadeIn()
                                    $('.modal').modal('hide');
                                    $('#success').modal('show');
                                })
                            },
                            error: function() {
                                $('#indexContactForm').fadeTo( "slow", 1, function() {
                                    $('#error').fadeIn()
                                    $('.modal').modal('hide');
                                    $('#error').modal('show');
                                })
                            }
                        })
                    }
                });
            })
        })(jQuery)
    })
</script>
<!--====== Contact Form End ======-->
	@parent
@endsection