@php
    $currentYear = date('Y');
    $nextYear = $currentYear + 1;
    $nextNextYear = $nextYear + 1;
@endphp


<!-- Popup modal for add lecture START -->
<div id="addLectureMobile" class="model" style="display:none;">
	<div class="model-content">
		<span class="close close-button" id="addLectureClose" data-close="model">&times;</span>

		  <div class="modal-body">
		  <p class="book-free-session-title">Book Your Free 1-1 Counseling Session with Our Experts</p>
				<p>Get guidance on country, intake, deadline, tests, eligibility criterea, finance and many more..</p>
			 <div class="left-content">
				<div class="contect-detail">
					<a href="mailto:{{$setting->email}}"><svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"/></svg>{{$setting->email}}</a>
					<a href="tel:{{$website_setting->phone}}"><svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M164.9 24.6c-7.7-18.6-28-28.5-47.4-23.2l-88 24C12.1 30.2 0 46 0 64C0 311.4 200.6 512 448 512c18 0 33.8-12.1 38.6-29.5l24-88c5.3-19.4-4.6-39.7-23.2-47.4l-96-40c-16.3-6.8-35.2-2.1-46.3 11.6L304.7 368C234.3 334.7 177.3 277.7 144 207.3L193.3 167c13.7-11.2 18.4-30 11.6-46.3l-40-96z"/></svg> {{$website_setting->phone}}</a>
				</div>
				<ul>
					<li>
						<a href="{{$website_setting->facebook}}"><svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 320 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"/></svg></a>
					</li>
					<li><a href="{{$website_setting->instagram}}"><svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"/></svg></a></li>
					<li><a href="{{$website_setting->twitter}}"><svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/></svg></a></li>
				</ul>
			 </div>
			 <div class="right-content">
				<form class="bookSessionPopupForm">
					<div class="input-box">
						<label for="name" class="booksession-label">Select Date *</label>
						<div class="form-input-group">
							<input type="text" id="form32" name="date" autocomplete="off" class="date input-field-group" placeholder="Please Select a Date" readonly >
						</div>
					</div>
					<div class="input-box">
						<label for="name" class="booksession-label">Choose Intake</label>
						<div class="intake-radio">
							<div class="intake-radio-btn">
								<input class="" type="radio" name="intake" id="inlineRadio1" value="{{ @$currentYear }}" checked>
								<label class="" for="inlineRadio1">{{ @$currentYear }}</label>
								<p class="recommended">Recommended</p>
							</div>
							<div class="intake-radio-btn">	
								<input class="" type="radio" name="intake" id="inlineRadio2"  value="{{ @$nextYear }}">
								<label class="" for="inlineRadio2">{{ @$nextYear }}</label>
							</div>
							<div class="intake-radio-btn">
								<input class="" type="radio" name="intake" id="inlineRadio3" value="{{ @$nextNextYear }}">
								<label class="" for="inlineRadio3">{{ @$nextNextYear }}</label>
							</div>
						</div>
					</div>
					<div class="input-box">
						<label for="name" class="booksession-label">Name *</label>
						<div class="form-input-group">
							<input type="text" name="name"  class="input-field-group" value="{{ auth()->check() ? auth()->user()->name : '' }}" placeholder="Full Name">
						</div>
					</div>
					<div class="input-box">
						<label for="email" class="booksession-label">Email address *</label>
						<div class="form-input-group">
							<input type="text" name="email"  class="input-field-group" value="{{ auth()->check() ? auth()->user()->email : '' }}" placeholder="Email Address">
						</div>
					</div>
					<div class="input-box">
						<label for="countrySelectPopup" class="booksession-label">Phone Number *</label>
						<div class="phone-number-div">
							<div class="country-code">
									<div class="input-field-group">
										<select class="country-select"  name="country">
											<option data-code="Country" data-sort_code="" data-country="" value="" id="arry_opt">Country</option>
											<option data-code="44" data-sort_code="UK" data-country="United Kingdom" value="United Kingdom@#$?44">United Kingdom +44</option>
											<option data-code="1" data-sort_code="US" data-country="United States" value="United States@#$?1">United States +1</option>
										</select>
									</div>
									
							</div>
							<div class="number-div">
								<input type="tel" value="{{ auth()->check() ? auth()->user()->phone : '' }}" name="phone" class="input-field-group" placeholder="Phone Number">
							</div>
						</div>
					</div>
					<button  type="submit" class="book-free-session-btn" >Book a Free Session <span class="loader" style="display: none;"></span>
					</button>	
				</form>
			 </div>
		  </div>
	</div>
  </div>
<!-- Popup modal for add lecture END -->

<style>
	.drp-buttons button{
		cursor: pointer;
		letter-spacing: 0.5px;
		position: relative;
		overflow: hidden;
		outline: 0;
		white-space: nowrap;
		margin-bottom: 6px;
		background: none;
		border: none;
		padding: 2px 14px!important;
	}
	.daterangepicker{
		z-index: 999999 !important;
	
	}
	.daterangepicker .applyBtn{
		background: #066ac9;
		color: #fff;
		border-radius: 0.2rem;
	}
</style>

{{-- <link rel="stylesheet" href="{{ asset('frontend')}}/assets-mobile/css/modals/booksessionModal.css?v={{env('ASSETS_VERSION')}}"> --}}
{{-- <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script> --}}
{{-- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" /> --}}
<script>
	function onloadModal(){
        loadCssOnMouseMovement(`{{ asset('frontend')}}/assets-mobile/css/modals/booksessionModal.css?v={{env('ASSETS_VERSION')}}`);
        loadCssOnMouseMovement(`https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css`,`text/css`);
		setTimeout(() => {
			$('input[name="date"]').daterangepicker({
				autoUpdateInput: false,
				locale: {
					format: 'M/DD'
				},
				drops: 'auto',
				singleDatePicker: true,
				minDate: new Date()
			});
			$('input[name="date"]').on('apply.daterangepicker', function(ev, picker) {
				$(this).val(picker.startDate.format('DD-MM-YYYY'));
			});
		}, 1000);
	}
</script>
<script>

$(".service-change").change(function() {
	
	if (this.value =="") {
	$('.service-change').attr('style', 'color: #9FA6B2 !important');
		
	}
	else {
		$('.service-change').attr('style', 'color: #404448 !important');
	}
	
  
});
$(".country-change").change(function() {
	
	if (this.value =="") {
	$('.country-change').attr('style', 'color: #9FA6B2 !important');
		
	} else {
		$('.country-change').attr('style', 'color: #404448 !important');
	}
	
   
});


	// hover effect on phone 
	
	$(document).ready(function() {
    $('.hover').on('touchstart touchend', function(e) {
		$(this).toggleClass('hover_effect');
		
        
    });
	// e.preventDefault();
});

</script>
<script>
	// Book a session form

$('[data-id="model"]').on('click', function(){
	var thisModel = $(this).data('target');
	$(thisModel).show();
	$(thisModel).find('[data-close="model"]').click(function(){ 
		$(thisModel).hide();
	});
});
$('[data-id="model"]').on('click', function(){

var thisModel = $(this).data('target');
$(thisModel).show();
$(thisModel).find('[data-close="model"]').click(function(){ 
$(thisModel).hide();
});
});
</script>