@extends('layouts.app')
@section('title', $title)
@section('keywords', $search_meta_keywords)
@section('description', $title . $search_meta_description) 
@section('content')
@php error_reporting(0) @endphp
<div class="tour-title">
    <img  class="w-100 h-100" src="{{ asset('images/bg-banner.jpg') }}" alt="{{ $req->location ?: 'Home Tutors' }}">
    <h2 class="white text-center shadow-text center-text">List Of Qualified <span class="text-warning"> {{ $req->online ? 'Online' : 'Home' }} Tutors</span></h2>
</div>
<div class="container mt-5 hidden-sm">
	<div class="row">
		<div class="col-md-9">
			<h5 class="bold black uppercase mb-0 font-normal">{{ $title }}</h5>
			<span>Showing <b>{{ $count > 0 ? $count : $fakeTeachers->count() }}</b> Tutors</span>
		</div>
		<div class="col-sm-3">
			<span class="bold">SORT RESULTS</span>
            <select class="form-control select2 mt-1" id="order-by">
                <option value="exp-high-to-low" @if($req->order_by == 'exp-high-to-low' || empty($req->order_by)) selected @endif>Experience</option>
                <option value="newest" @if($req->order_by == 'newest') selected @endif>Newest</option>
                <option value="older" @if($req->order_by == 'older') selected @endif>Older</option>
                <option value="male" @if($req->order_by == 'male') selected @endif>Male</option>
                <option value="female" @if($req->order_by == 'female') selected @endif>Female</option>
            </select>
        </div>
	</div>
</div>
<section id="section3">
    <div class="container">
        <div class="row">
            <div class="col-md-12 col-lg-3 mt-4 mt-lg-0 mb-5">
                <div class="form-container py-3">
                    <h6 class="black bold mt-3 px-4 pb-2 text-center">Refine Search</h6>
                    <form id="sidebar-form" class="px-xl-4 px-lg-2 px-4 manual" method="get" action="{{ route('search') }}">
                    	<input type="hidden" name="order_by">
                        @if(empty($req->online))
                    	<div class="form-group row">
	                        <div class="col-sm-12 location-wrapper-normal">
	                        	<input type="text" name="location" id="location-1" class="form-control" value="{{ $req->location }}">
	                        	<input type="hidden" name="latitude" value="{{ $req->latitude }}">
	                        	<input type="hidden" name="longitude" value="{{ $req->longitude }}">
	                        </div>  
	                    </div>
                        @endif
                        @if(empty($req->course) || $req->online)
                        <div class="form-group row">
	                        <div class="col-sm-12">
	                        	<select data-placeholder="Select Class" class="form-control select2" id="searchbar-classes" name="class">
			                        <option></option>
			                    </select>
	                        </div>  
	                    </div>
                        <div class="form-group row">
                            <div class="col-sm-12">
                                <select data-placeholder="Select Subjects" class="form-control select2" multiple="" id="searchbar-subjects" name="subjects[]">
			                        <option></option>
			                    </select>
                            </div>
                        </div>
                        @endif
                        @if($req->course || $req->online)
                        <div class="form-group row">
                            <div class="col-sm-12">
                                <select data-placeholder="Select Course" class="form-control select2" id="searchbar-courses" name="course">
                                    <option></option>
                                </select>
                            </div>  
                        </div>
                        @endif
                        <div class="form-group row">
                            <div class="col-sm-12">
                            	<select class="form-control select2" data-placeholder="Experience" name="experience">
                            		<option></option>
                            		<option value="1-5" @if($req->experience == '1-5') selected @endif>1-5 years</option>
                            		<option value="5-10" @if($req->experience == '5-10') selected @endif>5-10 years</option>
                            		<option value="10-15" @if($req->experience == '10-15') selected @endif>10-15 years</option>
                            		<option value="15-20" @if($req->experience == '15-20') selected @endif>15-20 years</option>
                            		<option value="20-25" @if($req->experience == '20-25') selected @endif>20-25 years</option>
                            		<option value="25-30" @if($req->experience == '25-30') selected @endif>25-30 years</option>
                            	</select>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-sm-12">
                            	<select class="form-control select2" data-placeholder="Gender" name="gender">
                            		<option></option>
                            		<option value="any" @if(empty($req->gender) || $req->gender == '') selected @endif>Any</option>
                            		<option value="male" @if($req->gender == 'male') selected @endif>Male</option>
                            		<option value="female" @if($req->gender == 'female') selected @endif>Female</option>
                            	</select>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-sm-12">
                            	<select class="form-control select2" data-placeholder="Fee" name="fee">
                            		<option></option>
                            		<option value="" @if(empty($req->fee)) selected @endif>Any</option>
                            		<option value="5k-10k" @if($req->fee == '5k-10k') selected @endif>5k to 10k</option>
                            		<option value="10k-15k" @if($req->fee == '10k-15k') selected @endif>10k to 15k</option>
                            		<option value="15k-20k" @if($req->fee == '15k-20k') selected @endif>15k to 20k</option>
                            		<option value="20k-25k" @if($req->fee == '20k-25k') selected @endif>20k to 25k</option>
                            		<option value="25k-30k" @if($req->fee == '25k-30k') selected @endif>25k to 30k</option>
                            	</select>
                            </div>
                        </div>
                        <div class="form-group row">
                        	<div class="col-sm-12">
                                <button type="submit" class="btn col-sm-12 my-2 btn-primary">Search</button>
                            </div>
                        </div>
                    </form>
                </div>

                <div class="more-info mx-auto my-4 hidden-sm">
                    <h6 class="black semibold text-center mx-4 mt-3 mb-3 info-title">Quick Contact</h6>
                    <div class="pb-2">                      
                
                        <a href="tel:+923212055553"><h5 class="grey text-center tel-info"><i class="fa text-success fa-phone faa-tada animated mr-2 grey my-lg-0 mb-1"></i>03212055553</h5></a>  
                        <a href="mailto:info@thetutors.pk"><h5 class="grey text-center mail-info"><i class="fa fa-envelope faa-horizontal animated text-success mr-2"></i>info@thetutors.pk</h5></a>                        
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-9 col-lg-9">
            	<div class="row" id="tutors-list">
            		@foreach($teachers as $t)
            		@php $fee = getFee($t->teacherClasses, $req->class) @endphp
            		<div class="col-xs-12 col-md-6 col-lg-4 mb-5">
	                    <div class="card tutor-card">
	                        <div class="card-avatar text-center">
	                            <a href="{{ route('tutor.detail', $t->slug) }}?{{ $params }}"  title="{{ $t->user->name }}">
	                              <img class="img tutor-avatar" src="{{ asset($t->user->image) }}" alt=" {{ $t->user->name }} ">
	                            </a>
	                            @if($t->video_link)
	                            <button class="btn btn-success btn-sm video-link-btn" data-toggle="modal" data-target="#video-link" data-link="{{ str_replace('watch?v=', 'embed/', $t->video_link) }}">
	                                <i class="fa fa-video-camera"></i>
	                            </button>
	                            @endif
	                            @if($t->verification_status) <div class="ribbon"><span>Verified</span></div> @endif
	                        </div>
	                        <div class="card-content">
	                            <h6 class="black tutor-heading text-center">
	                            <a href="{{ route('tutor.detail', $t->slug) }}?{{ $params }}"  title="{{ $t->user->name }}"> {{ str_limit($t->user->name, 20) }}
	                            </a></h6>
	                            <h6 class="black tutor-subheading">
	                                <span class="text-warning">
	                                	@for($i=1;$i<=5;$i++)
	                                    <i class="fa fa-star{{ $i > $t->rating ? '-o' : '' }}"></i>
	                                    @endfor
	                                </span>
	                                <span class="float-right">
	                                	{{ $t->age }}yr, {{ $t->gender ? 'Male' : 'Female' }}
	                                </span>
	                                <span class="text-success float-right d-none">{{ $fee }}<span class="small">/Month</span></span>
	                            </h6>
	                            <table class="table tutor-table">
	                                <tbody>
	                                    <tr>
	                                        <th width="30%">
	                                            Qualif
	                                        </th>
	                                        <td width="70%" class="text-right">
	                                            {{ $t->qualification }}
	                                        </td>
	                                    </tr>
	                                    <tr>
	                                        <th width="30%">
	                                            Exp
	                                        </th>
	                                        <td width="70%" class="text-right">
	                                            {{ $t->experience }}yrs
	                                        </td>
	                                    </tr>
                                        @if($req->course)
                                        <tr>
                                            <th width="30%">Courses</th>
                                            <td width="70%" class="text-right">
                                                {{ revertSlug(implode(', ', $t->teacherCourses->pluck('course_slug')->toArray())) }}
                                            </td>
                                        </tr>
                                        @else
	                                    <tr>
	                                        <th width="30%">Classes</th>
	                                        <td width="70%" class="text-right">
	                                            {{ revertSlug(implode(', ', $t->teacherClasses->pluck('class_slug')->toArray())) }}
	                                        </td>
	                                    </tr>
                                        @endif
	                                    <tr>
	                                        <th width="30%">Subjects</th>
	                                        <td width="70%" class="text-right">
	                                            {{ revertSlug(implode(', ', $t->teacherSubjects->pluck('subject_slug')->toArray())) }}
	                                        </td>
	                                    </tr>
	                                </tbody>
	                            </table>
	                            @if(Auth::id() == $t->user_id)
	                            <button class="btn btn-success" disabled>Hire Now</button>
	                            @else
	                            <button class="btn btn-success btn-hire" data-toggle="modal" data-target="#send-request-popup" data-tutor="{{ base64_encode($t->id) }}" data-fee="{{ $fee }}" data-tutorname="{{ $t->user->name }}">Hire Now</button>
	                            @endif
	                            <a href="{{ route('tutor.detail', $t->slug) }}?{{ $params }}" class="btn btn-info">View Profile</a>
	                        </div>
	                    </div>
	                </div>
	                @endforeach
	                @foreach($fakeTeachers as $t)
            		@php $fee = getFee($t->teacherClasses, $req->class) @endphp
            		<div class="col-xs-12 col-md-6 col-lg-4 mb-5">
	                    <div class="card tutor-card">
	                        <div class="card-avatar text-center">
	                            <a href="{{ route('tutor.detail', $t->slug) }}?{{ $params }}"  title="{{ $t->user->name }}">
	                              <img class="img tutor-avatar" src="{{ asset($t->user->image) }}" alt=" {{ $t->user->name }} ">
	                            </a>
	                            @if($t->video_link)
	                            <button class="btn btn-success btn-sm video-link-btn" data-toggle="modal" data-target="#video-link" data-link="{{ str_replace('watch?v=', 'embed/', $t->video_link) }}">
	                                <i class="fa fa-video-camera"></i>
	                            </button>
	                            @endif
	                            @if($t->verification_status) <div class="ribbon"><span>Verified</span></div> @endif
	                        </div>
	                        <div class="card-content">
	                            <h6 class="black tutor-heading text-center">
	                            <a href="{{ route('tutor.detail', $t->slug) }}?{{ $params }}"  title="{{ $t->user->name }}"> {{ str_limit($t->user->name, 20) }}
	                            </a></h6>
	                            <h6 class="black tutor-subheading">
	                                <span class="text-warning">
	                                	@for($i=1;$i<=5;$i++)
	                                    <i class="fa fa-star{{ $i > $t->rating ? '-o' : '' }}"></i>
	                                    @endfor
	                                </span>
	                                <span class="float-right">
	                                	{{ $t->age }}yr, {{ $t->gender ? 'Male' : 'Female' }}
	                                </span>
	                                <span class="text-success float-right d-none">{{ $fee }}<span class="small">/Month</span></span>
	                            </h6>
	                            <table class="table tutor-table">
	                                <tbody>
	                                    <tr>
	                                        <th width="30%">
	                                            Qualif
	                                        </th>
	                                        <td width="70%" class="text-right">
	                                            {{ $t->qualification }}
	                                        </td>
	                                    </tr>
	                                    <tr>
	                                        <th width="30%">
	                                            Exp
	                                        </th>
	                                        <td width="70%" class="text-right">
	                                            {{ $t->experience }}yrs
	                                        </td>
	                                    </tr>
                                        @if($req->course)
                                        <tr>
                                            <th width="30%">Courses</th>
                                            <td width="70%" class="text-right">
                                                {{ revertSlug(implode(', ', $t->teacherCourses->pluck('course_slug')->toArray())) }}
                                            </td>
                                        </tr>
                                        @else
	                                    <tr>
	                                        <th width="30%">Classes</th>
	                                        <td width="70%" class="text-right">
	                                            {{ revertSlug(implode(', ', $t->teacherClasses->pluck('class_slug')->toArray())) }}
	                                        </td>
	                                    </tr>
                                        @endif
	                                    <tr>
	                                        <th width="30%">Subjects</th>
	                                        <td width="70%" class="text-right">
	                                            {{ revertSlug(implode(', ', $t->teacherSubjects->pluck('subject_slug')->toArray())) }}
	                                        </td>
	                                    </tr>
	                                </tbody>
	                            </table>
	                            @if(Auth::id() == $t->user_id)
	                            <button class="btn btn-success" disabled>Hire Now</button>
	                            @else
	                            <button class="btn btn-success btn-hire" data-toggle="modal" data-target="#send-request-popup" data-tutor="{{ base64_encode($t->id) }}" data-fee="{{ $fee }}" data-tutorname="{{ $t->user->name }}">Hire Now</button>
	                            @endif
	                            <a href="{{ route('tutor.detail', $t->slug) }}?{{ $params }}" class="btn btn-info">View Profile</a>
	                        </div>
	                    </div>
	                </div>
	                @endforeach
            	</div>
            	<div class="row" style="display: none !important">
                    <div class="col-md-12">
                        {{ $teachers->links() }}
                    </div>
                </div>
                @if($count > 12)
                <div class="row loading-tutors">
                    <div class="col-md-12 text-center">
                        <h6><i>LOADING TUTORS..</i></h6>
                    </div>    
                </div>
                @endif
            </div>
        </div>
    </div>
</section>
@if(sizeof($teachers) == 0)
<div class="modal fade" id="not-found-popup" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header bg-success">
                <h6 class="white">
                    Enter Your Phone #
                    <br />
                    <small>We will contact you after finding suitable tutor</small>
                </h6>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>Enter Phone Number</label>
                    <input type="text" name="phone" class="form-control">
                </div>
                <button class="btn btn-success btn-sm mb-1 bold" data-dismiss="modal">Submit</button>
                <button class="btn btn-danger btn-sm mb-1 bold" data-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>
@endif
@endsection
@push('scripts')
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="{{ asset('dashboard/js/autocomplete.js') }}"></script>
<script type="text/javascript">
    $('#searchbar-classes').append(classes);
    $('#searchbar-subjects').append(subjects);
    $('#searchbar-courses').append(courses);
    $('#order-by').change(function(){
    	$('[name="order_by"]').val($(this).val());
    	$('#sidebar-form').submit();
    });
    $(document).ready(function(){
        google.load("maps", "3.exp", {callback: autoComplete, 
            other_params:'key=AIzaSyA6GhjR-WmiKCgr71McBioeymDd6_Ti_0s&libraries=places'
        });
    });
    var pagination = 2;
    var called = false;
     $(window).scroll(function() {
       var hT = $('.loading-tutors').offset().top,
           hH = $('.loading-tutors').outerHeight(),
           wH = $(window).height(),
           wS = $(this).scrollTop();
       if(wS > 600)
           $('.form-container').removeClass('refine-search-scroll');
       else
            $('.form-container').removeClass('refine-search-scroll');
       
       if (wS > (hT+hH-wH) && (hT > wS) && (wS+wH > hT+hH)){
            var find = "{{ route('search') }}?page="+pagination.toString();
            if($('[href="'+find+'"]').length && !called){
                called = true;
                $.get(window.location.href+"&page="+pagination.toString(), function(response){
                    $('#tutors-list').append(response);
                    increasePage();
                    
                    if(!$('[href="'+"{{ route('search') }}?page="+pagination.toString()+'"]').length)
                    {
                        $('.loading-tutors').hide();
                        $('.view-all-tutors').show();
                    }
                        
                    called = false;
                }); 
            }
       }
    });
    function increasePage(){
        pagination = pagination + 1;
    }
    
    function insertSearch(phone_no = '')
    {
        $.post("{{ route('insert.search') }}", {
            _token: "{{ csrf_token() }}",
            location: "{{ $req->location }}",
            latitude: "{{ $req->latitude }}",
            longitude: "{{ $req->longitude }}",
            class: "{{ $req->class }}",
            subjects: "{{ implode(', ', $req->subjects) }}",
            fee: "{{ $req->fee }}",
            gender: "{{ $req->gender }}",
            experience: "{{ $req->experience }}",
            blank: "{{ sizeof($teachers) }}",
            phone: phone_no
        }, function(){
            if(phone_no != '')
                toastr.success("Thank you, we will contact you soon.");
        });
    }
    @if($req->location && $req->latitude && $req->longitude && sizeof($teachers))
    insertSearch();
    @endif
    $('#not-found-popup').on('hidden.bs.modal', function () {
        insertSearch($(this).find('[name="phone"]').val());
    });
</script>
@endpush