@extends('layouts.site')

@section('content')
<style>
    div.cv {
        position: relative;
    overflow: hidden;
  //  margin: 10px;
    }

    #cv {
        position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);

    }

    div.qualification {
        position: relative;
    overflow: hidden;
   // margin: 10px;
    }

    #qualification {
        position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);

    }

    div.fakefile {
        /*position: absolute;
        top: 0;
        left: 0;
        z-index: 1;*/
       // width: 440px
    }
    .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: 35px;
    }


</style>
<section>
    <div class="lgx-banner lgx-banner-inner">
        <div class="lgx-inner-bg">
            <div class="lgx-inner">
                <div class="container bartopline">
                    <div class="row">
                        <div class="col-xl-12">
                            <div class="lgx-heading-area mt-4">
                                <ul class="breadcrumb">
                                    <li><a href="{{ route('index') }}"><i class="icon-home6"></i>{{trans('home.home')}}</a></li>
                                    <li class="active">{{trans('home.therapists-list')}}</li>
                                </ul>
                            </div>
                        </div>
                    </div><!--//.ROW-->
                </div><!-- //.CONTAINER -->
            </div><!-- //.INNER -->
        </div>
    </div>
</section>

<div class="lgx-schedule registerstyle">
    <div class="container my-5">


     <!--    <div class="row mb-4">
            <div class="col-md-12 text-center">
                <label> @lang('home.filterBY') </label>
                <select class="form-control" name="specialties" id="specialties">
                        <option value="">@lang('home.specialties')</option>
                    @foreach($specialties as $speciality)
                        <option value="{{ $speciality->id }}">{{  config('app.locale') == "en" ? $speciality->title_en : $speciality->title_ar}}</option>
                    @endforeach
                </select>
            </div>
        </div> -->


        <div class="row  min-vh-100 text-center">
            @foreach(explode(',', $coupon->therapists) as $therapist_id)
                @php
                    $item = \App\Therapist::find($therapist_id);
                @endphp
                @if($item)
                    <div class="col-xs-12 col-sm-6 col-md-3" style="max-height:460px;">
                        <div class="lgx-single-speaker hover-single-item" >
                            <a class="profile-img" href="{{route('therapists_preview',[$item->url])}}">
                                <img src="{{((file_exists(public_path('avatars/therapists/'.$item->picture))&&$item->picture)?asset('avatars/therapists/'.$item->picture):asset('avatars/therapists/default_image.png'))}}" alt="{{$item->title}}" style="width:70%;max-height: 175px;max-width: 175px;margin-top:20px;height: auto;border-radius: 50% "/>
                            </a>
                            <div class="speaker-info">
                                <h3 class="title"><a href="#" class="openreservation" onclick="openreservation('{{$item->id}}','{{route('side_url',[$item->id])}}')">
                                        {{ config('app.locale') == "en" ?  $item->name_e :   $item->name_a }}
                                    </a></h3>
                                <p class="text-sm-center mx-2">
                                    
                                    {!! Str::limit((config('app.locale') == "ar")?strip_tags($item->main_specialty_ar):strip_tags($item->main_specialty_en),85) !!}

                                </p>
                                <div class="col-12 mb-2">
                                    <span class="item-price float-left" style="margin-top: 15px;">

                                        @if($location&&$location->countryName=='Egypt')
                                        <strong>{{ $item->price30 }}</strong>
                                        @lang('home.EGP')
                                        @else
                                        <strong>{{ $item->thirty_price_dollar }}</strong>
                                        $
                                        @endif
                                       
                                        <svg-icon class="icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51 26" style="width: 20px;"><defs><style>.cls-1-fees{fill:#3da8c0;}.cls-2-fees,.cls-3-fees{fill:#fff;}.cls-3-fees{stroke:#fff;stroke-width:0.8px;}.cls-3-fees,.cls-4-fees{stroke-miterlimit:10;}.cls-4-fees{fill:none;stroke:#3da8c0;}</style></defs><title>Egp</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><rect class="cls-1-fees" x="0.5" y="0.5" width="50" height="25" rx="2" ry="2"></rect><path class="cls-2-fees" d="M49.49.5a1,1,0,0,1,1,1v5.4a4.91,4.91,0,0,1-.86.08A5.63,5.63,0,0,1,44,1.36,4.91,4.91,0,0,1,44.09.5Z"></path><path class="cls-2-fees" d="M7,1.36A5.63,5.63,0,0,1,1.36,7,4.91,4.91,0,0,1,.5,6.91V1.84A1.34,1.34,0,0,1,1.84.5H6.91A4.91,4.91,0,0,1,7,1.36Z"></path><path class="cls-2-fees" d="M50.5,18.79V24.3a1.2,1.2,0,0,1-1.2,1.2H44.13A6.34,6.34,0,0,1,44,24.34a5.63,5.63,0,0,1,5.63-5.63A4.11,4.11,0,0,1,50.5,18.79Z"></path><path class="cls-2-fees" d="M7,24.34a6.34,6.34,0,0,1-.12,1.16H1.37a.87.87,0,0,1-.87-.87V18.79a4.11,4.11,0,0,1,.86-.08A5.63,5.63,0,0,1,7,24.34Z"></path><circle class="cls-2-fees" cx="41.5" cy="13" r="2"></circle><circle class="cls-2-fees" cx="9.5" cy="13" r="2"></circle><path class="cls-3-fees" d="M19.54,13.25h-3v2.93h3.38v.88H15.5V8.94h4.22v.88H16.51v2.57h3Z"></path><path class="cls-3-fees" d="M28.15,16.7a7.1,7.1,0,0,1-2.4.44,3.91,3.91,0,0,1-2.92-1.07,4.27,4.27,0,0,1-1.09-3A4,4,0,0,1,26,8.86a4.71,4.71,0,0,1,2,.37l-.25.85A4,4,0,0,0,26,9.74,3,3,0,0,0,22.81,13c0,2.06,1.19,3.28,3,3.28a3.14,3.14,0,0,0,1.34-.22V13.64H25.57V12.8h2.58Z"></path><path class="cls-3-fees" d="M30.69,9a10.75,10.75,0,0,1,1.94-.16,3.12,3.12,0,0,1,2.19.68,2.19,2.19,0,0,1,.68,1.69A2.46,2.46,0,0,1,34.9,13a3.18,3.18,0,0,1-2.39.89,3.35,3.35,0,0,1-.81-.07v3.25h-1Zm1,3.91a3.23,3.23,0,0,0,.83.09c1.22,0,2-.62,2-1.74s-.73-1.59-1.84-1.59a3.88,3.88,0,0,0-.95.09Z"></path><rect class="cls-4-fees" x="0.5" y="0.5" width="50" height="25" rx="2" ry="2"></rect></g></g></svg></svg-icon>
                                    </span>
                                    <span class="item-rating float-right">
                                        @php $avg_rating = \DB::table('reviews')->where('therapist_id', $item->id)->avg('rating'); @endphp
                                        <label style="display: block;">(@lang('home.Evaluation') {{ round($avg_rating,1) }} )</label>
                                        
                                                    <i class="fa fa-star" style="color:#d4d4d4"></i><i class="fa fa-star" style="color:#d4d4d4"></i><i class="fa fa-star" style="color:#d4d4d4"></i><i class="fa fa-star" style="color:#d4d4d4"></i><i class="fa fa-star" style="color:#d4d4d4"></i>
                                               

                                    </span>
                                </div>
                                <div class="clearfix"></div>

                                   
                                    <a class="lgx-btn" href="{{route('therapists_preview',[$item->url])}}">
                                        {{trans('home.view-detail')}}
                                    </a>
                            </div>
                        </div>
                    </div>
                @endif
            @endforeach
        </div>



    </div>
</div>
@endsection
@section('scriptSection')


<script type="text/javascript">
    
    $('#specialties').on('change', function(){

        var val = $(this).val();
        $.ajax({
            type: "POST",
            data:{val: val},
            url: "{{ route('filterBySpecialists') }}",
            success: function (response) {
                $('.min-vh-100').html(response.data)
            }
        });

    });

</script>

@endsection