@extends('layouts.app')
@section('title', $home_meta_title)
@section('keywords', $home_meta_keywords)
@section('description', $home_meta_description) 
@push('styles')
<link rel="stylesheet" type="text/css" href="{{ asset('css/owl.carousel.min.css') }}">
@endpush
@section('content')
<div id="chapter1" class="chapter" >
    <div class="container text-center justify-content-center align-items-center searchform">
        <h2 class="white mx-2 my-3 text-center shadow-text d-block banner-heading">FIND YOUR <span class="text-warning"> DESIRED</span> HOME TUTOR</h2>
        <form method="get" action="{{ route('search') }}" id="search-form" class="manual">
            <div class="row">
                <div class="col-md-6 mb-2 p-lr-5 location-wrapper-normal">
                    <input type="text" class="form-control" id="location-1" placeholder="Your Location" name="location">
                    <input type="hidden" name="latitude">
                    <input type="hidden" name="longitude">
                </div>
                <div class="col-md-6 mb-2 p-lr-5">
                    <select data-placeholder="Select Class" class="form-control select2" id="searchbar-classes" name="class">
                        <option></option>
                    </select>
                </div>
                <div class="col-md-6 mb-2 p-lr-5">
                    <select data-placeholder="Select Subjects" class="form-control select2" multiple="" id="searchbar-subjects" name="subjects[]">
                        <option></option>
                    </select>
                </div>
                <div class="col-md-6 mb-2 p-lr-5">
                    <button type="submit" class="btn btn-primary btn-block"><i class="fa fa-search"></i> Find Tutors</button>
                </div>
            </div>
        </form>
        <p class="white shadow-text text-center mt-2 mb-2 font-normal">Need Help? Call Now: <span class="bold text-warning">0321-2055553</span></p>
    </div>
</div>
<section id="uni-logos">
    <div class="container">
        <span class="desc hidden-sm">TUTORS FROM</span>
        <div class="logos-inner d-flex">
            <img src="{{ asset('images/uni-logos/fast-uni-logo.png') }}">
            <img src="{{ asset('images/uni-logos/nust-uni-logo.png') }}">
            <img src="{{ asset('images/uni-logos/punjab-uni-logo.png') }}">
            <img src="{{ asset('images/uni-logos/lums-uni-logo.png') }}">
            <img src="{{ asset('images/uni-logos/karachi-uni-logo.png') }}">
        </div>
    </div>
</section>
<section id="services-1" class="services">
    <div class="container">
        <div class="row">
            <div class="col-md-3 service-wrapper">
                <img src="svg/review-search.svg">
                <h6>{{ $home_service_1_heading }}</h6>
                <p>{{ $home_service_1_text }}</p>
            </div>
            <div class="col-md-3 service-wrapper">
                <img src="svg/review-rating-old.svg">
                <h6>{{ $home_service_2_heading }}</h6>
                <p>{{ $home_service_2_text }}</p>
            </div>
            <div class="col-md-3 service-wrapper">
                <img src="svg/review-calendar.svg">
                <h6>{{ $home_service_3_heading }}</h6>
                <p>{{ $home_service_3_text }}</p>
            </div>
            <div class="col-md-3 service-wrapper">
                <img src="svg/review-learn.svg">
                <h6>{{ $home_service_4_heading }}</h6>
                <p>{{ $home_service_4_text }}</p>
            </div>
        </div>
    </div>
</section>
<section class="section3 bg-light-grey" id="section3"> 
    <div class="content">
        <div class="container">
            <div class="row mb-3">
                <div class="col-md-2"></div>
                <div class="col-md-8 text-center">
                    <h4 class="black front uppercase section-heading">Best <span class="text-success"><u>Home</u></span> Tutors</h4>
                    <p>{{ $home_slider_1_text }}</p>
                </div>
                <div class="col-md-2"></div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="row slider owl-carousel owl-theme">
                        @foreach($nearestTutors as $t)
                        <div class="card tutor-card">
                            <div class="card-avatar text-center">
                                <a href="{{ route('tutor.detail', $t->slug) }}"  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-play"></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) }}"  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>
                                </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>
                                        <tr>
                                            <th width="30%">Classes</th>
                                            <td width="70%" class="text-right">
                                                {{ revertSlug(implode(', ', $t->teacherClasses->pluck('class_slug')->toArray())) }}
                                            </td>
                                        </tr>
                                        <tr>
                                            <th width="30%">Subjects</th>
                                            <td width="70%" class="text-right">
                                                {{ revertSlug(implode(', ', $t->teacherSubjects->pluck('subject_slug')->toArray())) }}
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                                <button class="btn btn-success btn-hire" data-toggle="modal" data-target="#send-request-popup" data-tutor="{{ base64_encode($t->id) }}"data-tutorname="{{ $t->user->name }}">Hire Now</button>
                                <a href="{{ route('tutor.detail', $t->slug) }}" class="btn btn-info">View Profile</a>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>        
</section>
<section id="section3" class="featured-services">
    <div class="container">
        <div class="row mb-3">
            <div class="col-md-2"></div>
            <div class="col-md-8 text-center">
                <h4 class="black front uppercase section-heading">Our <span class="text-success"><u>Featured</u></span> Services</h4>
                <p>{{ $home_slider_2_text }}</p>
            </div>
            <div class="col-md-2"></div>
        </div>
        <div class="row">
            <div class="col-md-4">
                <div class="card subject-tutor mt-2 mb-1">
                    <div class="card-header">
                        <img src="svg/subject-tutor.svg" class="mb-3">
                        <h6 class="mb-0"><b>HOME TUTORS</b></h6>
                        <p class="text-info bold mb-0">Best Home Tutors</p>
                    </div>
                    <div class="card-body">
                        <ul class="mb-0 pt-0">
                            <li>Contact the tutor in just an hour</li>
                            <li>All subjects, Pre-K to Adult </li>
                            <li>Subject specialist tutors</li>
                            <li>Hire best home tutor</li>
                        </ul>
                        <a href="{{ route('search') }}?latitude={{ myLocation()->latitude }}&longitude={{ myLocation()->longitude }}&location={{ myLocation()->city }}" class="btn btn-info btn-big bold">HIRE NOW</a>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card quran-tutor mt-2 mb-1">
                    <div class="card-header">
                        <img src="svg/quran-tutor.svg" class="mb-3">
                        <h6 class="mb-0"><b>QURAN TUTOR</b></h6>
                        <p class="text-success bold mb-0">Best Online QURAN Tutors</p>
                    </div>
                    <div class="card-body">
                        <ul class="mb-0 pt-0">
                            <li>Connect to quran tutor</li>
                            <li>Your convinient Time and Day</li>
                            <li>Time Saving</li>
                            <li>Affordable fee packages</li>
                        </ul>
                        <a href="{{ route('quran.tutors') }}" class="btn btn-success btn-big bold">HIRE NOW</a>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card subject-tutor mt-2 mb-1">
                    <div class="card-header">
                        <img src="svg/subject-tutor.svg" class="mb-3">
                        <h6 class="mb-0"><b>ONLINE TUTORS</b></h6>
                        <p class="text-info bold mb-0">Qualified Online Tutors</p>
                    </div>
                    <div class="card-body">
                        <ul class="mb-0 pt-0">
                            <li>One to one online classes</li>
                            <li>Best online tutors</li>
                            <li>Expert and qualified tutors</li>
                            <li>All course tutors</li>
                        </ul>
                        <a href="{{ route('search') }}?online=1" class="btn btn-info btn-big bold">HIRE NOW</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<section id="want-to-tutor" class="bg-light-grey">
    <div class="container">
        <div class="row">
            <div class="col-md-6 pl-5 pt-5">
                <h6>Want to Tutor with Us?</h6>
                <ul>
                    <li>Tutor students online
                    or in-person.
                    </li>
                    <li>Set your own hourly
                    rate.
                    </li>
                    <li>Manage your schedule
                    online.
                    </li>
                    <li>Hundreds of new
                    tutoring opportunities every day.
                    </li>
                </ul>
                <a href="{{ route('register.as.tutor') }}" class="btn btn-info btn-big bold">Join As Tutor</a>
            </div>
            <div class="col-md-6">
                <img src="images/want-to-tutor.png">
            </div>
        </div>
    </div>
</section>
@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" src="{{ asset('js/owl.carousel.min.js') }}"></script>
<script type="text/javascript">
    $('#searchbar-classes').append(classes);
    $('#searchbar-subjects').append(subjects);
    $(document).ready(function(){
        google.load("maps", "3.exp", {callback: autoComplete, 
            other_params:'key=AIzaSyA6GhjR-WmiKCgr71McBioeymDd6_Ti_0s&libraries=places'
        });
        $('.slider').owlCarousel({
            loop:false,
            nav:true,
            navText: ["<i class='fa fa-chevron-left'></i>","<i class='fa fa-chevron-right'></i>"],
            margin: 15,
            dots: false,
            responsive:{
                0:{
                    items:1
                },
                768:{
                    items:4
                }
            }
        })
    });
</script>

<script type="application/ld+json">
{
  "@context": "https://schema.org/",
  "@type": "WebSite",
  "name": "Thetutors",
  "url": "https://thetutors.pk/",
  "potentialAction": {
    "@type": "SearchAction",
    "target": "https://thetutors.pk/search?{search_term_string}",
    "query-input": "required name=search_term_string"
  }
}
</script>

@endpush