@extends('layouts.site')

@section('content')
<script>
    function search2() {
        $('#Scroll_loader_Icon').data('from-send','search');
        loadtherapist(($("#sidebarReservationFilter").is(":visible"))?$('#fromFilterMobile'):$('#formFilterDesktop'));
        return false;
    }
</script>
<section>
    <div class="lgx-banner lgx-banner-inner">
        <div class="lgx-inner-bg">
            <div class="lgx-inner">
                <div class="container">
                    <div class="row">
                        <div class="col-xs-12">
                            <div class="lgx-heading-area">
                                <h2 class="lgx-heading lgx-heading-brand">
                                    <span class="back-heading"><i class="fa fa-map-marker" aria-hidden="true"></i></span>
                                    <span class="heading">{{trans('home.therapists')}}</span>
                                </h2>
                                <ul class="breadcrumb">
                                    <li><a href="{{ route('index') }}"><i class="icon-home6"></i>{{ __('home.home') }}</a></li>
                                    <li class="active">{{__('home.therapists')}}</li>
                                </ul>
                            </div>
                        </div>
                    </div><!--//.ROW-->
                </div><!-- //.CONTAINER -->
            </div><!-- //.INNER -->
        </div>
    </div>
</section>
<div class="clearfix"></div>
<div class="clearfix" style="height: 20px;"></div>
<div class="clearfix"></div>
<div class="container">
    <div class="row justify-content-center min-vh-100">
        <div class="col-md-9 text-center">
            <div class="row justify-content-center min-vh-100" id="Therapist_html_view"></div>
            <div class="row" id="Scroll_loader_Icon" data-next-page="1" data-last-page="1" data-main-url="{{route('therapist')}}" data-from-send="page">
                <div class="col-md-12 text-center">
                    <div class="spinner-border text-primary" role="status">
                        <span class="sr-only">Loading...</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3 d-none d-md-block">

            <div class="card">
                <div class="card-header text-right">التصنيف</div>

                <div class="card-body text-right">
                    <form>
                        @csrf
                        <div class="form-row">

                            <div class="input-group">

                                <input class="form-control form-input shadow p-3 mb-5 bg-white rounded"
                                       placeholder="{{ __('home.Search') }}"
                                       type="text"
                                       id="search_input"
                                       name="search"
                                       onkeyup="search2();"
                                >
                                <span class="input-group-addon" id="basic-addon1">
                                    <button type="button" class="btn btn-primary w-100" onclick="search2();">
                                    <i class="fa fa-search text-white text-lg-center "></i>
                                </button>
                                </span>
                            </div>
                        </div>
                        <h4>
                        المواعيد المتاحة والمدة
                        </h4>
                        <div class="form-check form-check-inline">
                            <span>
                                  <label class="form-check-label" for="inlineCheckbox2">هذا الأسبوع</label>
                                  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
                            </span>
                          <span>
                               <label class="form-check-label" for="inlineCheckbox1">اليوم</label>
                            <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
                          </span>

                        </div>

                        <div class="form-group">
                            <label for="time" class="col-form-label"> اختر ميعاد</label>
                            <input type="text" class="form-control required date datepicker text-right" name="time" id="time" placeholder="اختر تاريخ" required>
                        </div>

                        <h4>
                        المدة
                        </h4>
                        <div class="form-check form-check-inline">
                            <span>
                                 <label class="form-check-label" for="inlineCheckbox2">30 دقيقة</label>
                            <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
                            </span>
                            <span>
                                <label class="form-check-label" for="inlineCheckbox1">60 دقيقة</label>
                            <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">

                            </span>


                        </div>
                        <h4>
                        الجنس
                        </h4>
                        <div class="form-check form-check-inline">
                            <span>
                                <label class="form-check-label" for="inlineCheckbox2">ذكر</label>
                            <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
                            </span>
                            <span>
                                <label class="form-check-label" for="inlineCheckbox1">انثي</label>
                            <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
                            </span>


                        </div>
                        <h4>
                        التقييم
                        </h4>
                        <div class="form-check form-check-inline">
                            <div class='rating'> 
                                <span class="fa fa-star star1" id="q6-1" value="1"></span>
                                <span class="fa fa-star star1" id="q6-2" value="2"></span>
                                <span class="fa fa-star star1" id="q6-3" value="3"></span>
                                <span class="fa fa-star star1" id="q6-4" value="4"></span>
                                <span class="fa fa-star star1" id="q6-5" value="5"></span>
                            </div>
                        </div>
                        <h4>
                        اللغة
                        </h4>
                        <div class="form-check form-check-inline">
                            <select>
                                <option value="">اختر اللغة</option>
                                <option value="ar">العربية</option>
                                <option value="en">الأنجليزية</option>
                                <option value="fr">الفرنسية</option>
                            </select>
                        </div>
                        <h4>
                        تكلفة الجلسة
                        </h4>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
                            <label class="form-check-label" for="exampleRadios1">
                                اقل من 150
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
                            <label class="form-check-label" for="exampleRadios1">
                                 من 150 الي 200
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
                            <label class="form-check-label" for="exampleRadios1">
                                 من 200 الي 300
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
                            <label class="form-check-label" for="exampleRadios1">
                                 من 300 الي 500
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
                            <label class="form-check-label" for="exampleRadios2">
                                اكثر من 500
                            </label>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="sidebarReservation" class="bg-white position-fixed overflow-hidden h-100 justify-content-center" style="display:none; width:450px; top:0px; z-index: 9999; left: 0; right: inherit; position: fixed; background: #FFF; height: 100%;">
</div>
<div class="modal fade mr-3 mb-3" id="MyNotify" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="right: 20px; left: inherit; bottom: 20px; top: inherit; width: 200px; height: 200px;">
    <div class="modal-dialog m-0">
        <div id="NotifyContent">
        </div>
    </div>
</div>
@if (session('status'))
    <script type="text/javascript">
        setTimeout(function() {
            alertflash('success','{{ session("status") }}');
        }, 1000);
    </script>
@endif

@if ($errors->any())
    @foreach ($errors->all() as $error)
        <script type="text/javascript">
            setTimeout(function() {
                alertflash('danger','{{ $error }}');
            }, 1000);
        </script>
    @endforeach
@endif
@endsection