@extends('layouts.app')
@section('title', 'Teacher Registration')
@section('keywords', ' Teaching jobs in lahore , Evening teaching jobs in lahore , Home tuition in lahore defence , Home tuition in bahria town lahore , Home tuition in lahore Cantt , Home tuition lahore , The tutors academy , Home tutor services , Home tuition job in lahore ')
@section('description', ' We are Providing teaching jobs in lahore.You can register yourself on our website thetutors.pk.Our site provides home tuitions in your preference area in order to save your time and
         energy.This platform increases job oppourtunities for tutors who wanted to teach students at home.Tutors can easily find tuitions at thetutors.pk.The tutors academy providing home tuition job in lahore 
         for male and female teachers who are teaching in schools and colleges in morning time and have nothing to do in evening thats why we are offering evening  teaching jobs in lahore for them so that they can also teach in evening and have good monthly salary package for their family. ')
@push('styles')
<link rel="stylesheet" type="text/css" href="{{ asset('css/jquery-steps.min.css') }}">
<style type="text/css">
	#pagesection{background:#fff}#steps{background:#f9f9f9;padding:25px 15px}.wizard>.steps a,.wizard>.steps a:active,.wizard>.steps a:hover{font-weight:700;font-size:18px;padding:.6rem .6rem;text-align:center}.wizard>.steps .number{display:none!important}.wizard>.steps .done a,.wizard>.steps .done a:active,.wizard>.steps .done a:hover{background:#eee;color:#28a745}.wizard>.steps .disabled a,.wizard>.steps .disabled a:active,.wizard>.steps .disabled a:hover{background:#eee}.wizard>.actions a,.wizard>.actions a:active,.wizard>.actions a:hover,.wizard>.steps .current a,.wizard>.steps .current a:active,.wizard>.steps .current a:hover{background:#28a745}.wizard>.content>.body{padding:0}.wizard>.content{background:0 0;min-height:auto;overflow:visible}.wizard>.actions{text-align:left}.wizard>.content>.body input{display:inline-block}.wizard>.content>.body{width:100%;height:100%;padding:0;position:relative}.tabcontrol ul,.wizard ul{display:flex}.wizard>.steps>ul>li{flex:1}.wizard>.steps{margin-right:.5em}@media(max-width:768px){.tabcontrol ul,.wizard ul{display:block}.wizard>.steps>ul>li{flex:none;display:block;width:100%}}
    .checkbox-container{display:block;position:relative;padding-left:27px;margin-bottom:12px;cursor:pointer;color:#333;font-weight:700}.theme-checkbox{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.checkmark{position:absolute;top:0;left:0;height:20px;width:20px;background-color:#ccc}.checkbox-container:hover input~.checkmark{background-color:#bbb}.checkbox-container input:checked~.checkmark{background-color:#28a745}.checkmark::after{content:"";position:absolute;display:none}.checkbox-container input:checked~.checkmark::after{display:block}.checkbox-container .checkmark::after{left:7px;top:3px;width:6px;height:11px;border:solid #fff;border-width:0 2px 2px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}
    .guild, .guide ul{padding-left: 20px !important;list-style: disc;}
    .guide li{margin: 12px 0px;list-style-type: disc;list-style-position: inside;font-size: 14px}
    .guide ul li{margin: 6px 0px;}
</style>
@endpush
@section('content')
<div class="tour-title">
    <img  class="w-100 h-100" src="{{ asset('images/bg-banner.jpg') }}" alt="">
    <h2 class="white text-center shadow-text center-text">Register Now & <span class="text-warning">Get Tuitions</span></h2>
</div>
<section id="section3" >
    <div class="container">
        <div class="row">
        	<div class="col-md-5 col-12 text-left">
                <h6 class="black bold front mb-2 mt-2 ">Registration Guideline</h6>
                <div class="separator mb-0 mt-0"></div>
                <ul class="guide">
                	<li>Input fields with (*) sign are required.</li>
                	<li>Choose all classes and subjects (by using "+add more") according to your qualification, so that your profile will be shown when a student search for specific class & subjects.</li>
                	<li>Add multiple locations (by using "+add more") if you are fesible to provide services in multiple areas.</li>
                	<li>Fee should be reasonable.</li>
                	<li>
	                	After registration, follow these steps to make your profile more better
	                	<ul>
	                		<li>Upload your profile pic</li>
	                		<li>Your NIC (front, back) pictures to get verification tag.</li>
	                		<li>A short introduction video to make your profile more preferable.</li>
	                	</ul>
	                </li>
                </ul>
                <p class="pt-3">
                	Need help in registration? WhatsApp: <b>0305-5595385</b>
                </p>
            </div>
            <div class="col-md-7 col-12">
                <form id="tutor-form" method="post" action="{{ route('register.tutor') }}" role="form">
                	@csrf
                    <div class="controls" id="steps">
                		<h6>General</h6>
                		<fieldset>
                            <div class="row">
				                <div class="col-md-6">
				                  <div class="form-group">
				                      <label>Name *</label>
				                      <div class="form-line">
				                          <input type="text" class="form-control" name="name"  placeholder="Name" required="">
				                      </div>
				                  </div>
				                </div>
				                <div class="col-md-6">
				                  <div class="form-group">
				                      <label>Phone * (must be active)</label>
				                      <div class="form-line">
				                          <input type="text" class="form-control t-phone" name="phone" placeholder="Phone" required="" minlength="11" maxlength="11">
				                      </div>
				                  </div>
				                </div>
				              </div>
				              <div class="row">
				                <div class="col-md-6">
				                  <div class="form-group">
				                    <label>Email *</label>
				                    <div class="form-line">
				                        <input type="email" class="form-control" name="email" placeholder="Email" required="">
				                    </div>
				                  </div>
				                </div>
				                <div class="col-md-6">
				                  <div class="form-group">
				                      <label>Age *</label>
				                      <div class="form-line">
				                          <input type="number" class="form-control" name="age"  placeholder="Age" min="18" required="">
				                      </div>
				                  </div>
				                </div>
				              </div>
				              <div class="row">
				                <div class="col-md-6">
				                  <div class="form-group">
				                      <label>Password *</label>
				                      <div class="form-line">
				                          <input type="password" class="form-control" name="password"  placeholder="Password" required="" minlength="6" maxlength="10">
				                      </div>
				                  </div>
				                </div>
				                <div class="col-md-6">
				                  <div class="form-group">
				                      <label>Confirm Password *</label>
				                      <div class="form-line">
				                          <input type="password" class="form-control" name="password_confirmation" placeholder="Confirm Password" required="" minlength="6" maxlength="10">
				                      </div>
				                  </div>
				                </div>
				              </div>
				              <div class="row">
				              	<div class="col-md-12">
				                  <div class="form-group">
				                    <label>Address *</label>
				                    <div class="form-line">
				                        <input type="text" class="form-control" name="address" placeholder="Address" required="" pattern=".{10,30}">
				                    </div>
				                  </div>
				                </div>
				              </div>
				              <div class="row">
				                <div class="col-md-6">
				                  <div class="form-group">
				                    <label class="bold">Gender: </label>
				                    <input type="radio" name="gender" value="1" id="male" class="with-gap" checked>
				                    <label for="male">Male</label>
				                    <input type="radio" name="gender" value="0" id="female" class="with-gap">
				                    <label for="female" class="m-l-20">Female</label>
				                  </div>
				                </div>
				                <div class="col-md-6">
				                  <div class="form-group">
				                    <label class="bold">English Skills: </label>
				                    <input type="radio" name="english" value="1" id="medium" class="with-gap" checked>
				                    <label for="medium" class="m-l-20">Medium</label>
				                    <input type="radio" name="english" value="2" id="high" class="with-gap">
				                    <label for="high" class="m-l-20">High</label>
				                  </div>
				                </div>
				              </div>
                        </fieldset>
                        <h6>About Teaching</h6>
                        <fieldset>
				              <div class="row">
				                <div class="col-md-6">
				                  <div class="form-group">
				                      <label>Timing *</label>
				                      <select name="working_hours[]" multiple="" class="form-control select2" data-placeholder="Select Timings" required="">
				                          <option value="1">Morning</option>
				                          <option value="2">Noon</option>
				                          <option value="3">After Noon</option>
				                          <option value="4">Evening</option>
				                      </select>
				                  </div>
				                </div>
				                <div class="col-md-6">
				                  <div class="form-group">
				                    <label>Experience * <small>(In years)</small></label>
				                    <div class="form-line">
				                        <input type="number" class="form-control" name="experience" placeholder="Experience" required="">
				                    </div>
				                  </div>
				                </div>
				              </div>
				              <div class="row">
				                <div class="col-md-6">
				                  <div class="form-group">
				                    <label>Current institute (In which teach)</label>
				                    <div class="form-line">
				                        <input type="text" class="form-control" name="teaching_institute" placeholder="Teaching Institute">
				                    </div>
				                  </div>
				                </div>
				                <div class="col-md-6">
				                  <div class="form-group">
				                    <label>Current institute (In which study)</label>
				                    <div class="form-line">
				                        <input type="text" class="form-control" name="studying_institute" placeholder="Studying Institute">
				                    </div>
				                  </div>
				                </div>
				              </div>
				              <div class="form-group">
				                    <label>Qualifications *</label>
			                    	<input type="text" name="qualification" class="form-control" placeholder="Your Qualifications" required="" minlength="5">
			                  </div>
				              <div class="form-group">
				                <label>Details * (Do not share your contact number, NIC number, email or address)</label>
				                <div class="form-line">
				                    <textarea name="detail" rows="4" class="form-control" placeholder="Enter Details" required="" minlength="20" maxlength="700" ></textarea>
				                </div>
				              </div>
				              <div class="row form-group">
                                  <div class="col-md-12">
                                        <label class="checkbox-container">Can Teach At Students Home
                                          <input type="checkbox" class="theme-checkbox" name="teach_home" value="1">
                                          <span class="checkmark"></span>
                                        </label>
                                  </div>
                                  <div class="col-md-12">
                                        <label class="checkbox-container">Can Teach Online
                                          <input type="checkbox" class="theme-checkbox" name="teach_online" value="1">
                                          <span class="checkmark"></span>
                                        </label>
                                  </div>
                              </div>
                        </fieldset>
                        <h6>Areas & Subjects</h6>
                        <fieldset>
                          <div class="row mt-3" id="multiple-classes">
			                  <h6 class="col-md-12 card-subheading">Classes & Subjects</h6>
			              </div>
			              <div class="row mt-3" id="multiple-courses">
			                  <h6 class="col-md-12 card-subheading">Courses <span class="small">(Optional)</span></h6>
			              </div>
			              <div class="row mt-3" id="multiple-locations">
			              	<h6 class="col-md-12 card-subheading">Prefered Areas</h6>
                            <div class="location-wrapper">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label>Enter Location *</label>
                                        <div class="form-line">
                                            <input type="text" name="locations[]" class="form-control" id="location-1" required="">
                                            <input type="hidden" name="latitudes[]" required>
                                            <input type="hidden" name="longitudes[]" required>
                                        </div>
                                    </div>
                                </div>
                                <button class="btn btn-success btn-sm add-more" id="add-locations" type="button">
                                    <i class="fa fa-plus"></i> add more
                                </button>
                            </div>
                          </div>
                          <div class="row mt-3">
                              <div class="col-md-12">
                                  <p class="bold">
                                      By clicking "Finish" button you are agree on our <a href="{{ route('tc.tutors') }}" href="_blank">Terms & Conditions.</a>
                                  </p>
                              </div>
                          </div>
                        </fieldset>
                    </div>
                </form>
            </div>
        </div>  
    </div>
</section>
@endsection
@push('scripts')
<script type="text/javascript">
    var class_wrapper = '<div class="class-wrapper">\
        <div class="col-md-6">\
            <div class="form-group">\
                <label>Select Class *</label>\
                <select name="classes[]" data-placeholder="Select Class" required class="form-control select2">\
                    <option></option>\
                    {{ getClasses(true) }}\
                </select>\
            </div>\
        </div>\
        <div class="col-md-6">\
            <div class="form-group">\
                <label>Select Subjects *</label>\
                <select name="" data-placeholder="Select Subjects" class="form-control select2 subjects" disabled="" multiple="" required>\
                    <option></option>\
                    '+subjects+'\
                </select>\
            </div>\
        </div>\
        <div class="col-md-6">\
            <div class="form-group">\
                <label>All Subject Fee *</label>\
                <input type="number" class="form-control all-subject-fee" required disabled />\
            </div>\
        </div>\
        <div class="col-md-6">\
            <div class="form-group">\
                <label>Per Subject Fee <span class="small">(Optional)</span></label>\
                <input type="number" class="form-control per-subject-fee" disabled />\
            </div>\
        </div>\
        <button class="btn btn-success btn-sm add-more" id="add-classes" type="button">\
            <i class="fa fa-plus"></i> add more\
        </button>\
    </div>';
    var course_wrapper = '<div class="course-wrapper">\
	    <div class="col-md-6">\
		    <div class="form-group">\
			  <label>Select Courses</label>\
			  <select name="courses[]" data-placeholder="Select Course"  class="form-control select2">\
			  	  <option></option>\
			      '+courses+'\
			  </select>\
			</div>\
		</div>\
		<div class="col-md-6">\
		    <div class="form-group">\
			  <label>Course Fee</label>\
			  <input type="number" class="form-control course-fee" disabled>\
			</div>\
		</div>\
		<button class="btn btn-success btn-sm add-more" id="add-courses" type="button">\
            <i class="fa fa-plus"></i> add more\
        </button>\
	</div>';
</script>
<script type="text/javascript" src="{{ asset('dashboard/js/teacher-registration.js') }}"></script>
<script type="text/javascript" src="{{ asset('dashboard/js/autocomplete.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/jquery.steps.js') }}"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    var wizard = $("#steps").steps({
        headerTag: "h6",
        bodyTag: "fieldset",
        transitionEffect: "slideLeft",
        autoFocus: true,
        onStepChanging: function(event, currentIndex, newInex){
        	if(currentIndex < newInex)
        		return $('.wizard .content .body').eq(currentIndex).find('input').valid();
        	else
        		return true;
        },
        onStepChanged: function (event, currentIndex, priorIndex) {
        	$('.wizard .content .body').css({'position': 'absolute'});
        	$('.wizard .content .body').eq(currentIndex).css({'position': 'relative'});

        	return true;
        }
    });
    $(document).ready(function(){
    	google.load("maps", "3.exp", {callback: autoComplete, 
            other_params:'key=AIzaSyA6GhjR-WmiKCgr71McBioeymDd6_Ti_0s&libraries=places'
        });
        $('[href="#finish"]').addClass('loader-btn');
        $('[href="#finish"]').attr('data-name', 'Finish');
    });
    $('[href="#finish"]').click(function(){$(this).closest('form').submit()});
</script>
@endpush