@extends('layout.app')
@section('title')
< title > Book an Appointment< / title >
< meta name = "description" content = "ET Education and Visa Services, presented by Extratech, is an adept provider of excellent education consultation, information, and visa guidance solution to students seeking schooling abroad." >
< meta name = "robots" content = "index, follow" / >
< meta property = "og:url" content = "" / >
< meta property = "og:image" content = "{{url('frontend/images/banner.png')}}" / >
< meta property = "og:title" content = "ET-Visas" / >
< meta property = "og:description" content = "ET Education and Visa Services, presented by Extratech, is an adept provider of excellent education consultation, information, and visa guidance solution to students seeking schooling abroad." / >
@endsection
@section('content')
< section class = "appointment-section" >
< div class = "row" >
< div class = "col-md-5" >
< h1 > Book an Appointment< / h1 >
< div class = "appointment-cards" >
< a href = "" class = "appointment-card" >
< div class = "appointment-card-img" >
< img src = "{{url('frontend/icons/visa-approved.svg')}}" class = "img-fluid" alt = "" >
< / div >
< div >
< h3 > Education Services< / h3 >
< / div >
< / a >
< a href = "" class = "appointment-card" >
< div class = "appointment-card-img" >
< img src = "{{url('frontend/icons/visa-approved.svg')}}" class = "img-fluid" alt = "" >
< / div >
< div >
< h3 > Visa Services< / h3 >
< / div >
< / a >
< / div >
< / div >
< div class = "col-md-7" >
< div class = "calender-section" >
< div class = "claender-top" >
< p > Time Zone:< / p >
< h5 > Australia / Sydney< / h5 >
< / div >
< h2 > Select available date< / h2 >
< h3 > Education services | 30 mins< / h3 >
< div id = "demo-calendar-apppearance" > < / div >
< div class = "available-dates" >
< h5 id = 'available-dates' > < / h5 >
< / div >
< / div >
< / div >
< / div >
< / section >
@endsection
@section('script')
< script >
var $calender = $("#demo-calendar-apppearance");
$(document).ready(function () {
$calender.zabuto_calendar({
classname: 'table clickable table-bordered lightgrey-weekends',
week_starts: 'monday',
show_days: true,
today_markup: '< span class = "badge bg-primary" > [day]< / span > ',
navigation_markup: {
prev: '< i class = "fas fa-chevron-circle-left" > < / i > ',
next: '< i class = "fas fa-chevron-circle-right" > < / i > '
}
});
var dates = [7, 8, 9]
var availableDates = document.getElementById('available-dates')
$calender.on('zabuto:calendar:day', function (e) {
var now = new Date();
if (e.today) {
$(e.element).css('color', 'blue');
} else if (e.date.getTime() < now.getTime ( ) ) {
$(e.element).click(function() { return false })
}
else if(dates){
dates.forEach((date) => {
if(e.element[0].innerText == date){
availableDates.innerText=[dates]
}
else{
availableDates.innerText=""
return false;
}
console.log(date)
});
// for (let i = 0; i < dates.length ; i + + ) {
// if(e.element[0].innerText == dates[i]){
// console.log(true)
// }
// else{
// console.log(dates[i])
// }
// }
}
else {
$(e.element).click(function() { return false })
}
writeToEventLog('zabuto:calendar:day' + ' date=' + e.date.toDateString() + ' value=' + e.value + ' today=' + e.today);
})
});
function writeToEventLog(message) {
}
< / script >
@endsection