@extends('web.layouts.container')

{{--@section('css')--}}
{{--    --}}
{{--    <script>--}}
{{--        window.onload = function () {--}}
{{--            var myDiv = document.createElement('div'); //create an empty element--}}
{{--            myDiv.setAttribute('id', 'okadoc-content'); //assign attribute and name--}}
{{--            var container = document.querySelector('.summus-section-banner');--}}
{{--            //select specific location--}}
{{--            container.append(myDiv); //add the new element after--}}
{{--        }--}}

{{--    </script>--}}
{{--    --}}
{{--    <script type="text/javascript">--}}
{{--        // script to inject the snippet--}}
{{--        let local = "{{getCurrentLocale()}}";--}}
{{--        var metaExist = document.querySelector('meta[name="viewport"]');--}}
{{--        if (!metaExist) {--}}
{{--            var meta = document.createElement('meta');--}}
{{--            meta.name = "viewport";--}}
{{--            meta.content = "width=device-width, initial-scale=1, maximumscale=1";--}}
{{--            document.getElementsByTagName('head')[0].appendChild(meta);--}}
{{--        }--}}
{{--        var okaWidgetOption = okaWidgetOption || {--}}
{{--            heading1: "Book an Appointment",--}}
{{--            heading2: "Book an appointment now",--}}
{{--            url: "https://priory.okadoc.com/"+local+"-sa",--}}
{{--            selector: "okadoc-content",--}}
{{--            target: "_top",--}}
{{--            targetUrl: "https://priory.okadoc.com/"+local+"-sa/search/result",--}}
{{--            clientKey: "whitelabel-priory",--}}
{{--            template: "gamma",--}}
{{--        };--}}
{{--        (function() {--}}
{{--            var oka = document.createElement("script");--}}
{{--            oka.type = "text/javascript";--}}
{{--            oka.async = true;--}}
{{--            oka.src = ("https:" == document.location.protocol ? "https://" :--}}
{{--                "http://") + 'priory.okadoc.com/static/js/embed.js';--}}
{{--            var s = document.getElementsByTagName("script")[0];--}}
{{--            s.parentNode.insertBefore(oka, s);--}}
{{--        })();--}}
{{--    </script>--}}

{{--@endsection--}}

@section('content')

    <!-- Start features-sec -->
    <section class="features-sec section">
        <span class="back wow left_to_right_apperance"></span>
        <div class="container">
            <div class="row justify-content-between align-items-center">
                <div class="col-lg-6 pe-lg-4">
                    <div class="cards wow left_to_right_apperance trans_delay_4 no_scale">
                        <div class="feature_card d-flex ">
                            <img src="{{asset($whyUsCard1->image)}}" alt="" class="icon"/>
                            <div class="content">
                                <h5 class="title color-dark fw-bold">
                                    {{$whyUsCard1->title}}
                                </h5>
                                <p class="p">{!! $whyUsCard1->description !!}</p>
                            </div>
                        </div>
                        <div class="feature_card d-flex ">
                            <img src="{{asset($whyUsCard2->image)}}" alt="" class="icon"/>
                            <div class="content">
                                <h5 class="title color-dark fw-bold">
                                    {{$whyUsCard2->title}}
                                </h5>
                                <p class="p">{!! $whyUsCard2->description !!}</p>
                            </div>
                        </div>
                        <div class="feature_card d-flex ">
                            <img src="{{asset($whyUsCard3->image)}}" alt="" class="icon"/>
                            <div class="content">
                                <h5 class="title color-dark fw-bold">
                                    {{$whyUsCard3->title}}
                                </h5>
                                <p class="p">{!! $whyUsCard3->description !!}</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="features_box wow left_to_right_apperance">
                        <h1 class="title color-dark fw-bold mb-4 ">
                            {{$numberPageTitle1}} <span class="color-primary">{{$numberPageTitle2}}</span>
                        </h1>
                        <p class="det mb-4">
                            <small>{!! $numbersPage->description !!}</small>
                        </p>
                        <div class="numbers_sec_new">
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="num_card mt-4 wow fadeInUp">
                                        <h3 class="fw-bold color-primary mb-2"> <span class="counter"> {{$settings['special_num_1_value']}} </span> + </h3>
                                        <h6> {{$settings['special_num_1_title_'.$lang]}} </h6>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="num_card mt-4 wow fadeInUp" data-wow-delay="0.2s">
                                        <h3 class="fw-bold color-primary mb-2"> <span class="counter"> {{$settings['special_num_2_value']}} </span> + </h3>
                                        <h6> {{$settings['special_num_2_title_'.$lang]}} </h6>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="num_card mt-4 wow fadeInUp" data-wow-delay="0.4s">
                                        <h3 class="fw-bold color-primary mb-2"> <span class="counter"> {{$settings['special_num_3_value']}} </span> + </h3>
                                        <h6> {{$settings['special_num_3_title_'.$lang]}} </h6>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="num_card mt-4 wow fadeInUp" data-wow-delay="0.6s">
                                        <h3 class="fw-bold color-primary mb-2"> <span class="counter"> {{$settings['special_num_4_value']}} </span> + </h3>
                                        <h6> {{$settings['special_num_4_title_'.$lang]}} </h6>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--<div class="row">-->
                        <!--    <div class="col-6">-->
                        <!--        <div class="statics_card">-->
                    <!--            <h1 class="num fw-bold color-dark"><span class="counter">{{$settings['special_num_1_value']}}</span>+</h1>-->
                    <!--            <p class="label">{{$settings['special_num_1_title_'.$lang]}}</p>-->
                        <!--        </div>-->
                        <!--    </div>-->
                        <!--    <div class="col-6">-->
                        <!--        <div class="statics_card">-->
                    <!--            <h1 class="num fw-bold color-dark"><span class="counter">{{$settings['special_num_2_value']}}</span>k</h1>-->
                    <!--            <p class="label">{{$settings['special_num_2_title_'.$lang]}}</p>-->
                        <!--        </div>-->
                        <!--    </div>-->
                        <!--</div>-->
                    </div>
                </div>
            </div>
        </div>
        <img src="{{asset('assets/web/images/pattern-3.png')}}" alt="" class="pattern"/>
    </section>

{{--    <section class="services-sec section">--}}
{{--        <div class="container">--}}
{{--            <div class="row">--}}
{{--                <div class="col-lg-6">--}}
{{--                    <div class="sec-head wow left_to_right_apperance no_scale">--}}
{{--                        <h1 class="title fw-bold color-dark mb-4 ">--}}
{{--                            {{$servicePageTitle1}} <br> <span class="color-primary">{{$servicePageTitle2}}</span>--}}
{{--                        </h1>--}}
{{--                        <p class="p col-lg-11">{!! $servicePage->description !!}</p>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--                @if($services[0] ?? null)--}}
{{--                <div class="col-lg-3 px-0">--}}
{{--                    <div class="service_card bg-babyBlue wow left_to_right_apperance">--}}
{{--                        <img src="{{asset($services[0]['image'] ?? 'assets/web/images/logo.svg')}}" alt="" class="icon"/>--}}
{{--                        <h5 style="word-break: break-all" class="title color-dark fw-bold">{{wordLimit($services[0]['name'], 17)}}</h5>--}}
{{--                        <p style="word-break: break-all" class="det">{{wordLimit(stripText($services[0]['description']), 8)}} </p>--}}
{{--                        <a href="{{route('service.show', $services[0]['id'])}}" class="more_butn mt-4">--}}
{{--                            <img src="{{asset('assets/web/images/icons/right-arrow.svg')}}" alt="" class="icon_arrow"/>--}}
{{--                        </a>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--                @endif--}}
{{--                @if($services[1] ?? null)--}}
{{--                <div class="col-lg-3 px-0">--}}
{{--                    <div class="service_card wow left_to_right_apperance">--}}
{{--                        <img src="{{asset($services[1]['image'] ?? 'assets/web/images/logo.svg')}}" alt="" class="icon"/>--}}
{{--                        <h5 style="word-break: break-all" class="title color-dark fw-bold">{{wordLimit($services[1]['name'], 17)}}</h5>--}}
{{--                        <p style="word-break: break-all" class="det">{{wordLimit(stripText($services[1]['description']), 8)}} </p>--}}
{{--                        <a href="{{route('service.show', $services[1]['id'])}}" class="more_butn mt-4">--}}
{{--                            <img src="{{asset('assets/web/images/icons/right-arrow.svg')}}" alt="" class="icon_arrow"/>--}}
{{--                        </a>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--                @endif--}}
{{--            </div>--}}
{{--            <div class="row justify-content-end">--}}
{{--                @if($services[2] ?? null)--}}
{{--                <div class="col-lg-3 px-0">--}}
{{--                    <div class="service_card bg-babyBlue wow left_to_right_apperance">--}}
{{--                        <img src="{{asset($services[2]['image'] ?? 'assets/web/images/logo.svg')}}" alt="" class="icon"/>--}}
{{--                        <h5 style="word-break: break-all" class="title color-dark fw-bold">{{wordLimit($services[2]['name'], 17)}}</h5>--}}
{{--                        <p style="word-break: break-all" class="det">{{wordLimit(stripText($services[2]['description']), 8)}} </p>--}}

{{--                        <a href="{{route('service.show', $services[2]['id'])}}" class="more_butn mt-4">--}}
{{--                            <img src="{{asset('assets/web/images/icons/right-arrow.svg')}}" alt="" class="icon_arrow"/>--}}
{{--                        </a>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--                @endif--}}
{{--                @if($services[3] ?? null)--}}
{{--                <div class="col-lg-3 px-0">--}}
{{--                    <div class="service_card wow left_to_right_apperance">--}}
{{--                        <img src="{{asset($services[3]['image'] ?? 'assets/web/images/logo.svg')}}" alt="" class="icon"/>--}}
{{--                        <h5 style="word-break: break-all" class="title color-dark fw-bold">{{wordLimit($services[3]['name'], 17)}}</h5>--}}
{{--                        <p style="word-break: break-all" class="det">{{wordLimit(stripText($services[3]['description']), 8)}} </p>--}}
{{--                        <a href="{{route('service.show', $services[3]['id'])}}" class="more_butn mt-4">--}}
{{--                            <img src="{{asset('assets/web/images/icons/right-arrow.svg')}}" alt="" class="icon_arrow"/>--}}
{{--                        </a>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--                @endif--}}
{{--                @if($services[4] ?? null)--}}
{{--                <div class="col-lg-3 px-0">--}}
{{--                    <div class="service_card bg-babyBlue wow left_to_right_apperance">--}}
{{--                        <img src="{{asset($services[4]['image'] ?? 'assets/web/images/logo.svg')}}" alt="" class="icon"/>--}}
{{--                        <h5 style="word-break: break-all" class="title color-dark fw-bold">{{wordLimit($services[4]['name'], 17)}}</h5>--}}
{{--                        <p style="word-break: break-all" class="det">{{wordLimit(stripText($services[4]['description']), 8)}} </p>--}}
{{--                        <a href="{{route('service.show', $services[4]['id'])}}" class="more_butn mt-4">--}}
{{--                            <img src="{{asset('assets/web/images/icons/right-arrow.svg')}}" alt="" class="icon_arrow"/>--}}
{{--                        </a>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--                @endif--}}
{{--            </div>--}}
{{--            <div class="row justify-content-start">--}}
{{--                @if($services[5] ?? null)--}}
{{--                <div class="col-lg-3 px-0">--}}
{{--                    <div class="service_card bg-babyBlue wow left_to_right_apperance">--}}
{{--                        <img src="{{asset($services[5]['image'] ?? 'assets/web/images/logo.svg')}}" alt="" class="icon"/>--}}
{{--                        <h5 style="word-break: break-all" class="title color-dark fw-bold">{{wordLimit($services[5]['name'], 17)}}</h5>--}}
{{--                        <p style="word-break: break-all" class="det">{{wordLimit(stripText($services[5]['description']), 8)}} </p>--}}
{{--                        <a href="{{route('service.show', $services[5]['id'])}}" class="more_butn mt-4">--}}
{{--                            <img src="{{asset('assets/web/images/icons/right-arrow.svg')}}" alt="" class="icon_arrow"/>--}}
{{--                        </a>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--                @endif--}}
{{--                @if($services[6] ?? null)--}}
{{--                <div class="col-lg-3 px-0">--}}
{{--                    <div class="service_card wow left_to_right_apperance">--}}
{{--                        <img src="{{asset($services[6]['image'] ?? 'assets/web/images/logo.svg')}}" alt="" class="icon"/>--}}
{{--                        <h5 style="word-break: break-all" class="title color-dark fw-bold">{{wordLimit($services[6]['name'], 17)}}</h5>--}}
{{--                        <p style="word-break: break-all" class="det">{{wordLimit(stripText($services[6]['description']), 8)}} </p>--}}
{{--                        <a href="{{route('service.show', $services[6]['id'])}}" class="more_butn mt-4">--}}
{{--                            <img src="{{asset('assets/web/images/icons/right-arrow.svg')}}" alt="" class="icon_arrow"/>--}}
{{--                        </a>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--                @endif--}}
{{--                @if($services[7] ?? null)--}}
{{--                <div class="col-lg-3 px-0">--}}
{{--                    <div class="service_card bg-babyBlue wow left_to_right_apperance">--}}
{{--                        <img src="{{asset($services[7]['image'] ?? 'assets/web/images/logo.svg')}}" alt="" class="icon"/>--}}
{{--                        <h5 style="word-break: break-all" class="title color-dark fw-bold">{{wordLimit($services[7]['name'], 17)}}</h5>--}}
{{--                        <p style="word-break: break-all" class="det">{{wordLimit(stripText($services[7]['description']), 8)}} </p>--}}
{{--                        <a href="{{route('service.show', $services[7]['id'])}}" class="more_butn mt-4">--}}
{{--                            <img src="{{asset('assets/web/images/icons/right-arrow.svg')}}" alt="" class="icon_arrow"/>--}}
{{--                        </a>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--                @endif--}}
{{--            </div>--}}
{{--        </div>--}}
{{--        <img src="{{asset('assets/web/images/pattern-2.png')}}" alt="" class="pattern"/>--}}
{{--    </section>--}}

    <section class="partners-sec clients-sec section wow left_to_right_apperance">
        <div class="container">
            <div class="sec-head mb-5 col-lg-5">
                <h1 class="title color-dark fw-bold mb-4 ">
                    {{$insurancePartnerTitle1}} <span class="color-primary">{{$insurancePartnerTitle2}}</span>
                </h1>
                <p class="p">{!! $insurancePartnerPage->description !!}</p>
            </div>
            <div class="swiper-container clients-swiper">
                <div class="swiper-wrapper">
                    @if(count($insurancePartners))
                        @foreach($insurancePartners as $insurancePartner)
                            <div class="swiper-slide">
                                <a target="_blank" href="{{$insurancePartner->url}}">
                                    <img src="{{asset($insurancePartner->image)}}" alt="" class="partner_logo"/>
                                </a>
                            </div>
                        @endforeach
                    @endif
                </div>
            </div>
        </div>
    </section>

    <!-- Start doctors-sec -->
    <section class="doctors-sec section">
        <div class="container">
            <div class="row">
                <div class="col-lg-3">
                    <div class="sec-head  wow left_to_right_apperance no_scale">
                        <h1 class="title color-dark fw-bold mb-4 ">
                            {{$doctorPageTitle1}} <span class="color-primary">{{$doctorPageTitle2}}</span>
                        </h1>
                        <p class="p">{!! $doctorPage->description !!}</p>
                    </div>
                </div>
            </div>
            <div class="swiper-container doctor-swiper wow left_to_right_apperance">
                <div class="swiper-wrapper">
                    @if(count($doctors))
                        @foreach($doctors as $doctor)
                            <div class="swiper-slide">
                                <div class="row">
                                    <div class="col-lg-7 px-0">
                                        <div class="text-box">
                                            <h3 class="name text-white mb-3">{{$doctor->name}}</h3>
                                            <h5 class="job text-white">{{$doctor->specialist}}</h5>
                                            <ul class="custom_ul mt-5 doctor_desc_container text-white">
                                                {!! $doctor->details !!}
                                            </ul>

                                            @if($doctor->okadoc_url)
                                                <!--<div class="dr_card">-->
                                                <!--    <div class="card-body">-->
                                                <!--        <a target="_blank" href="{{$doctor->okadoc_url}}" class="butn primary_butn">{{__('main.make_appointment')}}</a>-->
                                                <!--    </div>-->
                                                <!--</div>-->
                                                <a target="_blank" href="{{$doctor->okadoc_url}}" class="butn primary_butn">{{__('main.make_appointment')}}</a>
                                            @endif

                                            <div class="social_links mt-5">
                                                @if($doctor->facebook)
                                                    <a target="_blank" href="{{$doctor->facebook}}">
                                                        <img src="{{asset('assets/web/images/icons/social-1.svg')}}" alt="" class="icon icon-18"/>
                                                    </a>
                                                @endif
                                                @if($doctor->twitter)
                                                    <a target="_blank" href="{{$doctor->twitter}}">
                                                        <img src="{{asset('assets/web/images/icons/social-2.svg')}}" alt="" class="icon icon-18"/>
                                                    </a>
                                                @endif
                                                @if($doctor->instagram)
                                                    <a target="_blank" href="{{$doctor->instagram}}">
                                                        <img src="{{asset('assets/web/images/icons/social-3.svg')}}" alt="" class="icon icon-18"/>
                                                    </a>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-5 px-0">
                                        <img src="{{asset($doctor->image)}}" alt="" class="sec-img"/>
                                    </div>

                                </div>
                            </div>
                        @endforeach
                    @endif
                </div>
                <!-- pagination -->
                <div class="swiper-pagination"></div>
                <!-- Arrows -->
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
            </div>
        </div>
        <img src="{{asset('assets/web/images/pattern-3.png')}}" alt="" class="pattern"/>
    </section>
    <!-- Start news-sec -->

    <section class="news-sec section">
        <div class="container">
            <div class="sec-head mb-5 wow left_to_right_apperance">
                <h1 class="title color-dark fw-bold mb-4">
                    {{$newsPageTitle1}} <br> <span class="color-primary">{{$newsPageTitle2}}</span>
                </h1>
                <p class="p">{!! $newsPage->description !!}</p>
            </div>
            <div class="swiper-container news_swiper">
                <div class="swiper-wrapper pb-4">
                    @if(count($articles))
                        @foreach($articles as $article)
                        <div class="swiper-slide">
                            <div class="news_card wow fadeInUp">
                                <div class="img">
                                    <img src="{{asset($article->image)}}" alt="" class="sec-img"/>
                                </div>
                                <div class="content">
                                    <h4 class="title fw-bold color-dark mb-3">{{wordLimit($article->title, 8)}}</h4>
                                    <p class="date mb-2">
                                        <img src="{{asset('assets/web/images/icons/date.svg')}}" alt="" class="icon icon-15 me-2"/>{{date('d M Y', strtotime($article->created_at))}}
                                    </p>
                                    <p class="det">{{wordLimit(stripText($article->description), 17)}}</p>
                                    <a href="{{route('news.show', $article->id)}}" class="more_butn color-primary fw-bold">
                                        {{__('main.read_more')}} <img src="{{asset('assets/web/images/icons/right_arrow2.svg')}}" alt="" class="icon icon-18 ms-2 filterPrimary"/>
                                    </a>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    @endif
                </div>
                <div class="swiper-pagination"></div>
            </div>
        </div>
    </section>
    <!-- Start news-sec -->
    <section class="news-pg section bg-light conferences_sec">
        <div class="container">
            <div class="sec-head mb-5  wow left_to_right_apperance">
                <h1 class="title color-dark fw-bold mb-4 ">
                    {{$conferencePageTitle1}} <br> <span class="color-primary">{{$conferencePageTitle2}}</span>
                </h1>
                <p class="p">{!! $conferencePage->description !!}</p>
            </div>
            <div class="swiper-container conferences_swiper">
                <div class="swiper-wrapper">
                    @if(count($conferences))
                        @foreach($conferences as $conference)
                            <div class="swiper-slide">
                            <div class="news_card  wow left_to_right_apperance">
                                <div class="imgg">
                                    <img src="{{asset($conference->image)}}" alt="" class="sec-img"/>
                                </div>
                                <div class="content">
                                    <p class="date mb-3">
                                        <img src="{{asset('assets/web/images/icons/date.svg')}}" alt="" class="icon icon-15 me-2"/>{{date('d M Y', strtotime($conference->start_date))}}
                                    </p>
                                    <h4 class="title fw-bold color-dark mb-3">{{$conference->title}}</h4>
                                    <p class="det">{{wordLimit(stripText($conference->description), 10)}}</p>
                                    <a href="{{route('conference.show', $conference->id)}}" class="more_butn color-primary fw-bold">
                                        {{__('main.read_more')}} <img src="{{asset('assets/web/images/icons/right_arrow2.svg')}}" alt="" class="icon icon-18 ms-2 filterPrimary"/>
                                    </a>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    @endif
                </div>

            </div>
        </div>
    </section>
    <!-- Start contact-sec -->
    <section class="contact-sec section" id="hour-works">
        <div class="container">
            <div class="row">
                <div class="col-lg-6">
                    <div class="sec-head mb-5 wow fadeInUp">
{{--                        <h1 class="title color-dark fw-bold mb-4">--}}
{{--                            {{$aboutUsTitle1}} <br> <span class="color-primary">{{$aboutUsTitle2}}</span>--}}
{{--                        </h1>--}}
{{--                        <div class="about_desc_container">--}}
{{--                            {!! wordLimit($aboutUsPage->description, 21) !!}--}}
{{--                        </div>--}}
                        <div class="hours-box mt-5">
                            <h5 class="title color-dark mb-4"><b>{{__('workHours.appointment')}}</b></h5>
                            <div class="row">
                                <div class="col-6">
                                    @foreach($workHours[0] as $workHour)
                                        <div class="day_item">
                                            <span class="day">{{__('workHours.'.$workHour['week_day'])}}</span> :
                                            @if($workHour['status'] == 'open')
                                                <span class="time">