You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
258 lines
12 KiB
258 lines
12 KiB
@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-12 mb-3">
|
|
<h1>Book an Appointment</h1>
|
|
<p>Please select the service and available date to book</p>
|
|
</div>
|
|
<!-- Start of Tab -->
|
|
<div class="row">
|
|
<div class="col-sm-12 col-md-4 d-flex align-items-start">
|
|
<div class="nav appointment-pills flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
|
|
<button class="btn-appointment nav-link active" id="v-pills-education-tab" data-type = "1" data-bs-toggle="pill" data-bs-target="#v-pills-education" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">
|
|
<i class="appointment-card-img"><img src="{{url('frontend/icons/visa-approved.svg')}}" class="img-fluid" alt=""></i>Education Services</button>
|
|
<button class="btn-appointment nav-link" id="v-pills-visa-tab" data-type = "2" data-bs-toggle="pill" data-bs-target="#v-pills-visa" type="button" role="tab" aria-controls="v-pills-visa" aria-selected="false">
|
|
<i class="appointment-card-img"><img src="{{url('frontend/icons/visa-approved.svg')}}" class="img-fluid" alt=""></i>Visa Services</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-sm-12 col-md-8">
|
|
<div class="tab-content" id="v-pills-tabContent">
|
|
<div class="tab-pane fade show active" id="v-pills-education" role="tabpanel" aria-labelledby="v-pills-education-tab" tabindex="0">
|
|
<div class="calender-section">
|
|
<div class="calendar-top">
|
|
<h5>Time Zone:</h5>
|
|
<h5>Australia | Sydney</h5>
|
|
</div>
|
|
<h2>Select Available Date</h2>
|
|
<h3>Education services | 30 mins</h3>
|
|
<div id="1-calendar-apppearance"></div>
|
|
<div id='1-available-dates' class="available-dates"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Start of Visa Block -->
|
|
<div class="tab-pane fade" id="v-pills-visa" role="tabpanel" aria-labelledby="v-pills-visa-tab" tabindex="0">
|
|
<div class="calender-section">
|
|
<div class="calendar-top">
|
|
<h5>Time Zone:</h5>
|
|
<h5>Australia | Sydney</h5>
|
|
</div>
|
|
<h2>Select Available Date</h2>
|
|
<h3>Visa services | 30 mins</h3>
|
|
<div id="2-calendar-apppearance"></div>
|
|
<div id='2-available-dates' class="available-dates"></div>
|
|
</div>
|
|
</div>
|
|
<!-- End of Visa Block -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End of Tab -->
|
|
|
|
<!-- Appointment Modal -->
|
|
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="appointmentModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3 class="modal-title" id="appointmentModalLabel">Book Appointment</h3>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="book-modal-info">
|
|
<p>Book your appointment for <span id = "booking_date"></span><span class="time" id = "start_time"></span> to <span id = "end_time"></span></p>
|
|
</div>
|
|
<!-- Form with the fields name, email, phone, and notes -->
|
|
<form id ="appointment-form">
|
|
<input type="hidden" name="appointment_id" id="appointment_id">
|
|
<div class="form-group mb-2">
|
|
<label for="name">Name</label>
|
|
<input type="text" class="form-control mt-1" id="name" name="name" required>
|
|
</div>
|
|
<div class="form-group mb-2">
|
|
<label for="email">Email</label>
|
|
<input type="email" class="form-control mt-1" id="email" name="email" required>
|
|
</div>
|
|
<div class="form-group mb-2">
|
|
<label for="phone">Phone</label>
|
|
<input type="tel" class="form-control mt-1" id="phone" name="phone" required>
|
|
</div>
|
|
<div class="form-group mb-2">
|
|
<label for="notes">Notes</label>
|
|
<textarea class="form-control mt-1" id="notes" name="notes"></textarea>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
|
<button type="button" onclick = "submitAppointment(event)" class="btn btn-primary">Book Appointment</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</section>
|
|
|
|
@endsection
|
|
@section('script')
|
|
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
|
|
|
<script>
|
|
$.ajaxSetup({
|
|
headers: {
|
|
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
|
|
}
|
|
});
|
|
|
|
|
|
$('#v-pills-education-tab').click(function (e) {
|
|
var id = $(this).data("type");
|
|
var $calender = $("#"+id+"-calendar-apppearance");
|
|
displayCalendar($calender,id);
|
|
});
|
|
$('#v-pills-visa-tab').click(function (e) {
|
|
var id = $(this).data("type");
|
|
var $calender = $("#"+id+"-calendar-apppearance");
|
|
displayCalendar($calender,id);
|
|
|
|
});
|
|
|
|
$(document).ready(function () {
|
|
var $calender = $("#1-calendar-apppearance");
|
|
var id = 1;
|
|
displayCalendar($calender,id);
|
|
});
|
|
function displayCalendar($calender,id){
|
|
var id = id;
|
|
$calender.zabuto_calendar({
|
|
data: [
|
|
@foreach($educationAppointments as $appointment)
|
|
@php
|
|
$date = Carbon\Carbon::createFromFormat('Y-m-d', $appointment->date);
|
|
$start_time = Carbon\Carbon::createFromFormat('H:i', $appointment->start_time);
|
|
$end_time = Carbon\Carbon::createFromFormat('H:i', $appointment->end_time);
|
|
@endphp
|
|
{
|
|
date: "{{ $date->format('Y-m-d') }}",
|
|
content: "{{ $start_time->format('H:i') }} - {{ $end_time->format('H:i') }}"
|
|
},
|
|
@endforeach
|
|
],
|
|
classname: 'table clickable table-bordered lightgrey-weekends',
|
|
week_starts: 'monday',
|
|
show_days: true,
|
|
cell_border: true,
|
|
today: true,
|
|
show_days: true,
|
|
weekstartson: 0,
|
|
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>'
|
|
}
|
|
|
|
});
|
|
|
|
$calender.on('zabuto:calendar:day', function (e) {
|
|
var now = new Date();
|
|
var date = e.date;
|
|
|
|
//get available time for selected date
|
|
$.ajax({
|
|
url: "/appointments_by_date",
|
|
type:"POST",
|
|
data:{
|
|
date:date,id:id
|
|
},
|
|
success:function(response){
|
|
if (response) {
|
|
var appointments = response.appointment;
|
|
formated_date = response.formated_date
|
|
dispalyAppointments(appointments,formated_date,id);
|
|
}
|
|
},
|
|
error: function(response) {
|
|
|
|
}
|
|
});
|
|
|
|
|
|
if (e.today) {
|
|
$(e.element).css('color', 'blue');
|
|
} else if (e.date.getTime() < now.getTime()) {
|
|
$(e.element).html('<span class="badge bg-danger">'+ e.date.getDate() +'</span>');
|
|
} else {
|
|
$(e.element).html('<span class="badge bg-success">'+ e.date.getDate() +'</span>');
|
|
}
|
|
})
|
|
}
|
|
function dispalyAppointments(appointments,formated_date,id) {
|
|
|
|
//display available appointments in timeslot
|
|
if (appointments.length > 0) {
|
|
var timeSlots = '';
|
|
|
|
for (var i = 0; i < appointments.length; i++) {
|
|
var appointment = appointments[i];
|
|
var isAmStart = appointment.start_time < '12:00:00';
|
|
var isAmEnd = appointment.end_time < '12:00:00';
|
|
timeSlots += '<button type="button" class="time-slot" data-toggle="modal" data-target="#appointmentModal" data-appointment-id="' + appointment.id + '">' + appointment.start_time +' '+ (isAmEnd ? 'AM' : 'PM')+ ' - ' + appointment.end_time +' ' + (isAmEnd ? 'AM' : 'PM') + '</button>';
|
|
}
|
|
|
|
$('#'+id+'-available-dates').html(timeSlots);
|
|
|
|
$('.time-slot').click(function (e) {
|
|
|
|
e.preventDefault();
|
|
var appointmentId = $(this).data("appointment-id");
|
|
$('#appointment-form input[name="appointment_id"]').val(appointmentId);
|
|
$('#booking_date').html(formated_date);
|
|
$('#start_time').html(' <b>('+appointment.start_time+'</b>');
|
|
$('#end_time').html('<b>'+appointment.end_time+')</b>');
|
|
$("#modal").modal("show");
|
|
|
|
});
|
|
|
|
}
|
|
else{
|
|
$('#'+id+'-available-dates').html("No appointments available for " + "<b>"+formated_date+"</b>");
|
|
}
|
|
|
|
}
|
|
|
|
function submitAppointment(event){
|
|
event.preventDefault();
|
|
$.ajax({
|
|
url: "/appointment_submit",
|
|
type: "post",
|
|
data: $("form").serialize(),
|
|
success: function(response) {
|
|
$("#modal").modal("hide");
|
|
var isAmStart = response.appointment.start_time < '12:00:00';
|
|
var isAmEnd = response.appointment.end_time < '12:00:00';
|
|
|
|
Swal.fire({
|
|
title: 'Booked!!',
|
|
text: 'Appointment Successfully Booked for '+response.appointment_detail['name']+' at '+response.formated_date +'('+response.appointment['start_time']+' '+(isAmStart ? 'AM' : 'PM')+ ' - ' + response.appointment['end_time']+' '+ (isAmEnd ? 'AM' : 'PM') +')',
|
|
icon: 'success'
|
|
}).then(function(){
|
|
location.reload();
|
|
}
|
|
)
|
|
}
|
|
});
|
|
|
|
}
|
|
|
|
</script>
|
|
@endsection |