@extends('layouts.site')
@section('content')
<style type="text/css">
#navbarSupportedContent li a:hover
{
    color: #ff2e8a;
}
    .mySlider .owl-nav
    {
        margin-top: 20px;
        display: block !important;
    }
    .mySlider .owl-nav .owl-prev,
    .mySlider .owl-nav .owl-next
    {
        font-size: 25px;
        padding: 0 16px 6px;
        color: white;
        background: #b956ff;
        margin-left: 10px;
    }
    .mySlider .card
    {
        position: relative;
        border: none;
        box-shadow: 0 0 10px #f1f1f1;
        margin: 9px;
    }
    .mySlider .card .imgg
    {
        height: 120px;
        position: relative;
    }
    .mySlider .imgss .imgg  img
    {
        height: 100%;
        object-fit: fill;
        border-radius: 50%;
        box-shadow: 0 0 4px #747474;
        width: 120px;
        margin: 15px auto;
    }
    .mySlider .card h4
    {
        margin: 10px 0 14px;
        font-size: 14px;
        color: #00bacf;
    }
    .voda
    {
        margin-top: 31%;
    }
    @media (max-width: 767px)
    {
        .voda
        {
            margin-top: 1%;
            width: 50%;
        }
    }
    .new p
    {
        font-size: 14px;
    }
    .pre
    {
        white-space: pre-wrap;
        padding: 15px 0;
    }
    .new h3
    {
        color: #b856ff;
        font-size: 20px;
    }
    .new .btn-success
    {
        margin: 30px 0;
        font-size: 17px;
    }
    .new .btn-success:hover
    {
        font-size: 17px;
    }
    .list-unstyled
    {
       padding-right: 0;
    }
    .list-unstyled li
    {
        background: #fdfdfd;
        padding: 20px;
        direction: rtl;
        box-shadow: 0 0 5px #06b7cb;
        margin-bottom: 10px;
        transition: all 0.2s;
        height: 100%;
    }
    .list-unstyled li:hover
    {
        box-shadow: none;
        background: #ededed;
    }
    .list-unstyled li div
    {
        font-size: 17px;
        color: #0ab7cb;
        margin-bottom: 4px;
    }
    .list-unstyled li div i
    {
        margin-left: 8px;
        font-size: 22px;
    }
</style>
<!--SLIDER-->
{{--<section>
    <div class="lgx-slider" dir="ltr">
        <div class="lgx-banner-style">
            <div class="lgx-inner">
                <div class="col-sm-12g">
                    <div class="slider-text-single">
                        <figure>
                            <img src="{{asset('slider/'.$slider_item->picture)}}" alt="{{$slider_item->title}}" style="width: 100%;height: auto;"/>
                            <figcaption>
                                <div class="lgx-container">
                                    <div class="lgx-hover-link">
                                        <div class="lgx-vertical">
                                            <div class="sliderContent text-center">
                                                <h3 class="lgx-subtitle lgx-zoomIn-one text-center">{{  app()->getLocale()=='ar' ? $slider_item->title_ar : $slider_item->title_en }}</h3>
                                                <a class="lgx-btn lgx-btn-big lgx-zoomIn-one text-center lowercase" href="#lgx-services">{{trans('home.start')}}</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </figcaption>
                        </figure>
                    </div>
                </div> <!--//.col-->
                <!-- //.CONTAINER -->
            </div>
            <!-- //.INNER -->
        </div>
    </div>
</section>--}}
<!--SLIDER END-->
<!--SLIDER-->
{{--<div class="se-pre-con"></div>--}}
<section>
    <div class="lgx-slider">
        <div class="lgx-banner-style">
            <div class="lgx-inner">
                <div id="lgx-main-slider" class="owl-carousel ">
                    <!--SLIDER ITEM 1-->
                    @foreach($slider_items as $slider_item)
                    <div class="lgx-item-common lgx-item-left">
                        <div class="col-sm-12g">
                            <div class="slider-text-single">
                                <figure>
                                    <img class="lazy" src="{{asset('img/placeholder.png')}}" data-src="{{asset('slider/'.$slider_item->picture)}}"  data-srcset="{{asset('slider/'.$slider_item->picture)}}" alt="{{$slider_item->title}}" style="width: 100%;height: auto;"/>
                                    <figcaption>
                                        <div class="lgx-container">
                                            <div class="lgx-hover-link">
                                                <div class="lgx-vertical">
                                                    <div class="sliderContent text-center">
                                                        <h3 class="lgx-subtitle lgx-zoomIn-one text-center">{{  app()->getLocale()=='ar' ? $slider_item->title_ar : $slider_item->title_en }}</h3>
                                                        <a class="lgx-btn lgx-btn-big lgx-zoomIn-one text-center lowercase" href="#lgx-services">{{trans('home.start')}}</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </figcaption>
                                </figure>
                            </div>
                        </div> <!--//.col-->
                    </div>
                    @endforeach
                    <!--SLIDER ITEM 1 End-->
                </div> <!--//.lgx-main-slider-->
                <!-- //.CONTAINER -->
            </div>
            <!-- //.INNER -->
        </div>
    </div>
</section>
<!--SLIDER END-->
@if(!Auth::check()||(Auth::check()&&Auth::user()->type!='therapists'))
<!--SCHEDULE-->
<section>
    <div id="lgx-schedule" class="lgx-schedule">
        <div class="lgx-inner">
            <div class="container">
                <div class="row">
                    <div class="col-xl-12">
                        <div class="lgx-heading-area">
                            <h2 class="lgx-heading">
                                <span class="heading">{{ trans('home.blockhow')}}</span>
                            </h2>
                            <p class="text" style="direction: rtl;">
                                {{ trans('home.blockhowdesc')}}
                            </p>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xl-12">
                        <div class="lgx-tab">
                            <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <a class="nav-link active" id="pills-contact2-tab" data-toggle="pill" href="#pills-contact2" role="tab" aria-controls="pills-contact2" aria-selected="true">{{trans('home.tabs1')}}</a>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">{{trans('home.tabs2')}}</a>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">{{trans('home.tabs3')}}</a>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <a class="nav-link" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="false">{{trans('home.tabs4')}}</a>
                                </li>
                            </ul>
                            <div class="tab-content lgx-tab-content" id="pills-tabContent">
                                <div class="tab-pane fade" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
                                    <h3>{{trans('home.tabs4')}}</h3>
                                    <img src="{{asset('img/placeholder.png')}}" data-src="{{ asset('images/th-session.jpg') }}"  data-srcset="{{ asset('images/th-session.jpg') }}" class="img-thumbnail lazy" />
                                </div>
                                <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
                                    <h3>{{trans('home.tabs3desc')}}</h3>

                                    <div class="row">
                                        <div class="col-md-8">
                                            <img src="{{asset('img/placeholder.png')}}" data-src="https://i.ytimg.com/vi/i09C02151PI/maxresdefault.jpg"  data-srcset="https://i.ytimg.com/vi/i09C02151PI/maxresdefault.jpg" src="https://i.ytimg.com/vi/i09C02151PI/maxresdefault.jpg" class="lazy"  />
                                        </div>
                                        <div class="col-md-4">
                                            <img src="{{asset('img/placeholder.png')}}" data-src="{{ asset('img/vodafone-cash.jpeg') }}"  data-srcset="{{ asset('img/vodafone-cash.jpeg') }}" class="voda lazy"  />
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
                                    <h3>{{trans('home.tabs2desc')}}</h3>
                                    <img class="img-thumbnail lazy" src="{{asset('img/placeholder.png')}}" data-src="{{ asset('images/calendar.jpg') }}" data-srcset="{{ asset('images/calendar.jpg') }}" />
                                </div>
                                <div class="tab-pane fade show active pt-5 " id="pills-contact2" role="tabpanel" aria-labelledby="pills-contact2-tab">
                                    <h3>{{trans('home.fast_reserve')}}</h3>
                                    <div class="row px-5 py-5 my-2 ">
                                        @if($therapists_slider->count() > 0)
                                        <div class="owl-carousel mySlider">
                                            @foreach($therapists_slider as $therapist)
                                                <!-- <div class="col-md-3 col-sm-6 col-6"> -->
                                                    <div class="imgss card" >
                                                      <div style="height: 100%;">
                                                      <div class="imgg">
                                                        <a href="{{route('therapists_preview',[$therapist->url])}}"> <img class="img-responsive mb-5 lazy" src="{{asset('img/placeholder.png')}}"  data-srcset="{{ asset('avatars/therapists/'.$therapist->picture) }}"  data-src="{{ asset('avatars/therapists/'.$therapist->picture) }}"   onerror="this.src='{{ asset("avatars/therapists/default_image.png") }}' " /></a>
                                                       </div>
                                                       <h4><a href="{{route('therapists_preview',[$therapist->url])}}">{{ config('app.locale') == "en" ?  $therapist->name_e :   $therapist->name_a }}</a></h4>
                                                        <p style="    font-weight: bold;color: #000;">
                                                           @if($therapist->main_focus != '' || $therapist->main_focus != null)
                                                             {{ $therapist->main_focus }}
                                                            @else
                                                             @foreach($therapist->specialties as $speciality)
                                                                {{  config('app.locale') == "en" ? $speciality->title_en : $speciality->title_ar}},
                                                             @endforeach
                                                            @endif
                                                       </p>
                                                       </div>
                                                    </div>
                                                <!-- </div> -->
                                            @endforeach
                                        </div>
                                        @else
                                            <div class="col-md-12 text-center">
                                                <h4>{{trans('home.There are no sessions')}} {{trans('home.today')}}</h4>
                                            </div>
                                        @endif
                                        <!-- <div class="col-md-3 col-sm-6 col-6">
                                            <img class="img-responsive mb-5"  src="{{ asset('avatars/therapists/therapist_1.jpg') }}"/>
                                        </div>
                                        <div class="col-md-3 col-sm-6 col-6">
                                            <img class="img-responsive mb-5"  src="{{ asset('avatars/therapists//1611075896600711382dfd1eae23727-ae66-409e-806e-efca5e4f69ef.jpg') }}"/>
                                        </div>
                                        <div class="col-md-3 col-sm-6 col-6">
                                            <img class="img-responsive mb-5"  src="{{ asset('avatars/therapists/161227700160196509052f2download.jpg') }}"/>
                                        </div>
                                        <div class="col-md-3 col-sm-6 col-6">
                                            <img class="img-responsive mb-5"  src="{{ asset('avatars/therapists/violina-300x300.jpg') }}"/>
                                        </div> -->
                                    </div>
                                    <div class="row pb-5 d-flex justify-content-center align-items-center">
                                        <a href="{{ route('recommendation') }}" class="text-info font-weight-bold" style="font-size: 17px;"> {{trans('home.I-do-not-know-choose')}}  </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--//.ROW-->
                <div class="speakers-btn-area text-center mt-5" style="display: none" id="more_enjoy">
                    <a class="lgx-btn lgx-btn-big read-more text-center" href="{{ route('therapistslist') }}"><span>{{ trans('home.more') }}</span></a>
                </div>
                <!--//.ROW-->
            </div>
            <!-- //.CONTAINER -->
        </div>
        <!-- //.INNER -->
    </div>
</section>
<!--SCHEDULE END-->
@endif
<!--services INFO-->
<section>
    <input type="hidden"  id="lang"   value="{{ config('app.locale') }}">
    <div id="lgx-services" class="lgx-travelinfo">
        <div class="lgx-inner">
            <div class="container">
                <div class="row">
                    <div class="col-xl-12 text-center">
                        <div class="lgx-heading-area">
                            <h2 class="lgx-heading">
                                <span class="heading">{{trans('home.services')}}</span>
                            </h2>
                        </div>
                    </div>
                    <!--//main COL-->
                </div>
                <div class="row flex-row">
                    @foreach ($properties as $item)
                        <div class="col-lg-4 col-xs-12 col-sm-6 col-md-4 my-4  dynamic-align ">
                                <div class="single-properties-item hover-single-item">
                                            <a class="moreButton" data-toggle="modal" data-target="#exampleModalMore"  data-id="{{ $item->id }}">
                                                 <img class="lazy" src="{{asset('img/placeholder.png')}}" data-src="{{ asset('avatars/properties/'.$item->picture) }}" data-srcset="{{ asset('avatars/properties/'.$item->picture) }}" alt="{{$item->title}}"/>
                                                {{--<div class="image-layer">
                                                    {!! \Illuminate\Support\Str::limit(strip_tags(app()->getLocale()=='ar'?$item->description_ar:$item->description_en),230) !!}
                                                </div>--}}
                                                 <h3 class="title my-3" style="padding-right:15px;">{{ \Illuminate\Support\Str::limit(strip_tags(app()->getLocale()=='ar'?$item->title_ar:$item->title_en),40) }}</h3>
                                                <p style="text-align: justify;padding: 0px 15px;">{!! \Illuminate\Support\Str::limit(strip_tags(app()->getLocale()=='ar'?$item->description_ar:$item->description_en),220) !!}<span style="cursor: pointer;color:#0ab7cb">@lang('home.more')</span></p>
                                            </a>
                                    <div class="title my-3 text-center">
                                        <a  href="{{route('therapistslist').'?property_id='.$item->id}}" class="btn btn-info text-white" style="font-size:16px;padding: 5px 25px; margin-bottom: 10px;background: #16bcd0;color: white!important;border-radius:6px;width: 90%" >
                                            {{trans('home.Select Therapist')}}
                                        </a>
                                    </div>
                                </div>
                            <div class="modal fade mt-5" id="exampleModalMore" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                <div class="modal-log" role="document">
                                    <div class="modal-dialog" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header text-center">
                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                    <span aria-hidden="true">&times;</span>
                                                </button>
                                            </div>
                                            <div class="modal-body">
                                                <div class="form-row">
                                                    <ol style="list-style: none" class="mx-3">
                                                        <li>
                                                            <h6>
                                                            </h6>
                                                        </li>
                                                    </ol>
                                                </div> <!-- form-row -->
                                            </div> <!-- modal-body -->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
                <!--//.ROW-->
            </div>
            <!-- //.CONTAINER -->
        </div>
    </div>
</section>
<!--services INFO END-->
<!-- Start Header Extra 3 Box Section   -->
<!-- <section class="header-extradiv">
    <div class="lgx-inner">
        <div class="container">
            <div class="row">
                <div class="col-xl-12 text-center">
                    <div class="lgx-heading-area">
                        <h2 class="lgx-heading">
                            <span class="heading"> {{trans('home.features')}} </span>
                        </h2>
                    </div>
                </div>
            </div>
            <div class="row dir-rtl">
                <div class="offset-lg-1 offset-md-1 offset-xs-0 offset-sm-0"></div>
                <div class="extra-div col-lg-2 col-md-4 col-6 text-center mb-5">
                    <i class="fa-5x fa fa-clock"></i>
                    <p>  {{trans('home.24-7Services')}} </p>
                </div>
                <div class="extra-div col-lg-2 col-md-4 col-6 text-center mb-5">
                    <i class="fa-5x fa fa-calendar"></i>
                    <p> {{trans('home.eliminate-commute')}} </p>
                </div>
                <div class="extra-div col-lg-2 col-md-4 col-6 text-center mb-5">
                    <i class="fa-5x fa fa-heart"></i>
                    <p> {{trans('home.flexible-plan')}}</p>
                </div>
                <div class="extra-div col-lg-2 col-md-4 col-6 text-center mb-5">
                    <i class="fa-5x fa fa-users"></i>
                    <p> {{trans('home.switch-therapist')}} </p>
                </div>
                <div class="extra-div col-lg-2 col-md-4 col-6 text-center mb-5">
                   <i class="fa-5x fa fa-medkit"></i>
                    <p> {{trans('home.save-money')}} </p>
                </div>
            </div>
        </div>
    </div>
</section> -->
<section class="header-extradiv">
    <div class="lgx-inner">
        <div class="container">
            <div class="row">
                <div class="col-xl-12 text-center">
                    <div class="lgx-heading-area">
                        <h2 class="lgx-heading">
                            <span class="heading"> {{trans('home.services')}} </span>
                        </h2>
                        <p class="">
                            {{trans('home.service_intro')}}
                        </p>
                    </div>
                </div>
            </div>
            <div class="row">
               <div class="col-md-12 new">
                <h3 style="    font-size: 23px;text-align: center;margin: 38px 0;">@lang('home.Benefits')</h3>
                <ul class="list-unstyled row" dir="rtl">
                    <div class="col-md-4 mb-5">
                    <li>
                        <div class="title"> <i class="fa fa-users"></i>  @lang('home.st1')</div>
                        <p class="desc">@lang('home.s1')</p>
                    </li>
                    </div>
                    <div class="col-md-4 mb-5">
                    <li>
                        <div class="title"> <i class="fa fa-address-card"></i>   @lang('home.st2') </div>
                        <p class="desc"> @lang('home.s2')</p>
                    </li>
                    </div>
                    <div class="col-md-4 mb-5">
                    <li>
                        <div class="title"> <i class="fa fa-user-md"></i>  @lang('home.st3') </div>
                        <p class="desc"> @lang('home.s3')  </p>
                    </li>
                    </div>
                    <div class="col-md-4 mb-5">
                    <li>
                        <div class="title"> <i class="fa fa-chart-line"></i>  @lang('home.st4') </div>
                        <p class="desc"> @lang('home.s4')</p>
                    </li>
                    </div>
                    <div class="col-md-4 mb-5">
                    <li>
                        <div class="title"> <i class="fas fa-clinic-medical"></i> @lang('home.st5')</div>
                        <p class="desc"> @lang('home.s5')</p>
                    </li>
                    </div>
                    <div class="col-md-4 mb-5">
                    <li>
                        <div class="title"> <i class="fa fa-pound-sign"></i> @lang('home.st6')</div>
                        <p class="desc"> @lang('home.s6') </p>
                    </li>
                    </div>
                    <div class="col-md-4 mb-5">
                    <li>
                        <div class="title"> <i class="fa fa-money-bill"></i> @lang('home.st7') </div>
                        <p class="desc"> @lang('home.s7')</p>
                    </li>
                    </div>
                    <div class="col-md-4 mb-5">
                    <li>
                        <div class="title"> <i class="fa fa-briefcase"></i>  @lang('home.st8')</div>
                        <p class="desc"> @lang('home.s8')</p>
                    </li>
                    </div>
                    <div class="col-md-4 mb-5">
                    <li>
                        <div class="title"> <i class="fa fa-align-center"></i>  @lang('home.st9')  </div>
                        <p class="desc"> @lang('home.s9')</p>
                    </li>
                    </div>
                    <div class="col-md-4 mb-5">
                    <li>
                        <div class="title"> <i class="fa fa-ellipsis-v"></i> @lang('home.st10') </div>
                        <p class="desc">  @lang('home.s10')</p>
                    </li>
                    </div>

                </ul>
            </div>
            </div>
        </div>
    </div>
</section>
<!--BLOG-->
<section id="blog-section">
    <div id="lgx-blog" class="lgx-blog">
        <div class="lgx-inner">
            <div class="container">
                <div class="row">
                    <div class="col-xl-12">
                        <div class="lgx-heading-area">
                            <h2 class="lgx-heading">
                                <span class="heading">{{trans('home.blog')}}</span>
                            </h2>
                            <p class="text">
                                {{trans('home.blogdesc')}}
                            </p>
                        </div>
                    </div>
                </div>
                <!--//.ROW-->
                <div class="row dir-rtl">
                    @include('include.blog_blocks',['items'=>$blog])
                </div>
                <div class="lgx-btn-area">
                    <a class="lgx-btn lgx-btn-big read-more" href="{{route('blog')}}"><span>{{trans('home.more')}}</span></a>
                </div>
            </div><!-- //.CONTAINER -->
        </div><!-- //.INNER -->
    </div>
</section>
<!--BLOG END-->
@if($evaluation_slider->count() > 0)
<!--Rating Slider-->
<section id="blog-section">
    <div id="lgx-blog" class="lgx-blog mt-5">
        <div class="lgx-inner">
            <div class="container">
                <div class="row">
                    <div class="col-xl-12">
                        <div class="lgx-heading-area">
                            <h2 class="lgx-heading">
                                <span class="heading">{{trans('home.Evaluation')}}</span>
                            </h2>
                            <p class="text">
                                {{config('app.locale') == "en" ? "Some Evaluation Clients" : " بعض تقييمات العملاء "}}
                            </p>
                        </div>
                    </div>
                </div>
                <!--//.ROW-->
                <div class="row dir-rtl">
                    <div class="owl-carousel mySliderRating">
                        @foreach($evaluation_slider as $slider)
                            <!-- <div class="col-md-3 col-sm-6 col-6"> -->
                                <div class="imgss card" >
                                  <div style="height: 100%;">
                                  <div class="imgg">
                                    <img class="img-responsive mb-5 lazy" style="height: 350px;" src="{{asset('img/placeholder.png')}}" data-src="{{ asset($slider->image) }}"  data-srcset="{{ asset($slider->image) }}" />
                                   </div>
                                   </div>
                                </div>
                            <!-- </div> -->
                        @endforeach
                    </div>
                </div>
            </div><!-- //.CONTAINER -->
        </div><!-- //.INNER -->
    </div>
</section>
@endif
@endsection
@section('scriptSection')

<script>
    $(document).ready(function () {

        $("#pills-profile-tab,#pills-contact-tab,#pills-contact2-tab").click(function(e){
            $("#more_enjoy").css('display','none');
        });
        $("#pills-home-tab").click(function(e){
            $("#more_enjoy").css('display','block');
        });
        $(".moreButton").click(function(e){
            token= '{{ csrf_token() }}';
            var property_id=$(this).attr('data-id');
            var lang = document.getElementById("lang").value;
            $.ajax({
                url:"{{ URL('property/get') }}/"+property_id,
                type:"get",
                data: {"id":property_id,"lang":lang,_token:token},
                success: function (response) {
                    $('#exampleModalMore').modal("show");
                    $('.modal-body h6').html(response).show();
                }
            });
        });
    });
</script>
@endsection