@extends('layouts.app')
@section('title', $quran_meta_title)
@section('keywords', $quran_meta_keywords)
@section('description', $quran_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 ?: 'Quran Tutors' }}">
    <h2 class="white text-center shadow-text center-text">{{ $quran_page_heading }}</h2>
</div>
<section id="section3">
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <div class="row" id="tutors-list">
                    @foreach($tutors as $t)
                    <div class="col-xs-12 col-md-3 col-lg-3 mb-5">
                        <div class="card tutor-card qtutor-card" data-video-link="{{ str_replace('watch?v=', 'embed/', $t->video_link) }}">
                            <div class="card-avatar text-center">
                                <img class="img tutor-avatar" src="{{ asset($t->avatar) }}" alt="{{ $t->avatar }}">
                                @if($t->verification_status) <div class="ribbon"><span>Verified</span></div> @endif
                            </div>
                            <div class="card-content">
                                <h6 class="black tutor-heading text-center">{{ str_limit($t->name, 20) }}</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>
                                <div class="qtutor-video"></div>
                                <div class="text-center">
                                    <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#send-qrequest-popup" data-tutor="{{ base64_encode($t->id) }}" data-tutorname="{{ $t->name }}">Hire Now</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</section>
<div class="modal fade" id="send-qrequest-popup" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header text-center d-block">
                <h6 class="text-success">Hire <u class="tutorname"></u></h6><span class="small">We will arrange your online meeting<span class="bold"> in 30 mins</span></span>
                <button class="close" data-dismiss="modal">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            <div class="modal-body bg-light-grey">
              <form method="post" action="{{ route('save.qtuition') }}">
                @csrf
                <input type="hidden" name="tutor_id" id="hired-qtutor">
                <input type="hidden" name="package" id="package">
                <div class="row">
                  <div class="col-md-6">
                    <div class="form-group">
                      <label>Name*</label>
                      <div class="form-line">
                        <input type="text" name="name" required="" class="form-control" placeholder="Enter Name">
                      </div>
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="form-group">
                      <label>Phone*</label>
                      <div class="form-line">
                        <input type="text" name="phone" required="" class="form-control" placeholder="Enter Phone Number">
                      </div>
                    </div>
                  </div>
                </div>
                <div class="row mb-2">
                  <div class="col-md-12">
                    <div class="form-group">
                      <label>Any Requirements / Details <span>(Optional)</span></label>
                      <textarea class="form-control" name="details" placeholder="Preferred timing, no of students etc" rows="2"></textarea>
                    </div>
                  </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="card mb-2">
                            <div class="card-header text-center">
                                <p class="bold mb-0">{{ $quran_package_1_name }}</p>
                                <i class="small">15 years or less</i>
                                <p class="mt-1 mb-0">
                                    @foreach(explode(', ', $quran_package_2_includes) as $i)
                                    <span class="badge badge-info bold">{{ $i }}</span>
                                    @endforeach
                                </p>
                            </div>
                            <div class="card-body pt-1 pb-3">
                                <table class="table tutor-table m-0 mb-1">
                                    <tbody>
                                        <tr>
                                            <td class="text-center py-1">{{ $quran_package_1_duration }} mins class</td>
                                        </tr>
                                        <tr>
                                            <td class="text-center py-1">{{ $quran_package_1_classes }} classes per week</td>
                                        </tr>
                                        <tr>
                                            <td class="text-center bold py-1">
                                                <p class="mb-0 bold">
                                                    {{ myLocation()->country !== 'PK' ? $quran_package_1_globalfee : number_format($quran_package_1_localfee) }} 
                                                    <span class="small">Per Month</span>
                                                </p>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                                <div class="text-center">
                                    <button class="btn btn-success bold btn-sm qpackage-btn" data-name="Select Package"data-package="1" type="button">Select Package</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-header text-center">
                                <p class="bold mb-0">{{ $quran_package_2_name }}</p>
                                <i class="small">15 years or less</i>
                                <p class="mt-1 mb-0">
                                    @foreach(explode(', ', $quran_package_2_includes) as $i)
                                    <span class="badge badge-info bold">{{ $i }}</span>
                                    @endforeach
                                </p>
                            </div>
                            <div class="card-body pt-1 pb-3">
                                <table class="table tutor-table m-0 mb-1">
                                    <tbody>
                                        <tr>
                                            <td class="text-center py-1">{{ $quran_package_2_duration }} mins class</td>
                                        </tr>
                                        <tr>
                                            <td class="text-center py-1">{{ $quran_package_2_classes }} classes per week</td>
                                        </tr>
                                        <tr>
                                            <td class="text-center bold py-1">
                                                <p class="mb-0 bold">
                                                    {{ myLocation()->country !== 'PK' ? $quran_package_2_globalfee : number_format($quran_package_2_localfee) }} 
                                                    <span class="small">Per Month</span>
                                                </p>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                                <div class="text-center">
                                    <button class="btn btn-success bold btn-sm qpackage-btn" data-name="Select Package"data-package="2" type="button">Select Package</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
              </form>
            </div>
        </div>
    </div>
</div>
@endsection
@push('scripts')
<script type="text/javascript">
    $('[data-target="#send-qrequest-popup"]').click(function(){
      $('#send-qrequest-popup .tutorname').text($(this).data('tutorname'));
      $('#hired-qtutor').val($(this).data('tutor'));
    });
    $('.qpackage-btn').click(function(){
        $('#package').val($(this).data('package'));
        $('.qpackage-btn').removeClass('loader-btn');
        $(this).addClass('loader-btn');
        $(this).closest('form').submit();
    });
    $(document).ready(function(){
        $('.qtutor-card').each(function(){
            var video_link = $(this).data('video-link');
            $(this).find('.qtutor-video').html('<iframe style="width: 100%;height: 130px" src="'+video_link+'" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>');
        });
    });
</script>
@endpush