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.
268 lines
10 KiB
268 lines
10 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-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="calendar-top">
|
|
<h5>Time Zone:</h5>
|
|
<h5>Australia | Sydney</h5>
|
|
</div>
|
|
<h2>Select available date</h2>
|
|
<h3>Education services | 30 mins</h3>
|
|
<div id="demo-calendar-apppearance"></div>
|
|
<div id='available-dates' class="available-dates">
|
|
<!-- <h5 id='available-dates'></h5> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 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>
|
|
<!-- <button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button> -->
|
|
</div>
|
|
<div class="modal-body">
|
|
<!-- Form with the fields name, email, phone, and notes -->
|
|
<form>
|
|
<div class="form-group mb-2">
|
|
<label for="name">Name</label>
|
|
<input type="text" class="form-control mt-1" id="name" required>
|
|
</div>
|
|
<div class="form-group mb-2">
|
|
<label for="email">Email</label>
|
|
<input type="email" class="form-control mt-1" id="email" required>
|
|
</div>
|
|
<div class="form-group mb-2">
|
|
<label for="phone">Phone</label>
|
|
<input type="tel" class="form-control mt-1" id="phone" required>
|
|
</div>
|
|
<div class="form-group mb-2">
|
|
<label for="notes">Notes</label>
|
|
<textarea class="form-control mt-1" id="notes"></textarea>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
|
<button type="button" class="btn btn-primary">Book Appointment</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</section>
|
|
|
|
|
|
<!-- 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">
|
|
<h5 class="modal-title" id="appointmentModalLabel">Book Appointment</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<!-- 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">
|
|
<label for="name">Name</label>
|
|
<input type="text" class="form-control" id="name" name="name" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="email">Email</label>
|
|
<input type="email" class="form-control" id="email" name="email" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="phone">Phone</label>
|
|
<input type="tel" class="form-control" id="phone" name="phone" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="notes">Notes</label>
|
|
<textarea class="form-control" id="notes" name = "notes"></textarea>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
|
<button type="button" onclick = "submitAppointment(event) " class="btn btn-primary">Book Appointment</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
@endsection
|
|
@section('script')
|
|
<script>
|
|
$.ajaxSetup({
|
|
headers: {
|
|
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
|
|
}
|
|
});
|
|
var $calender = $("#demo-calendar-apppearance");
|
|
$(document).ready(function () {
|
|
$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>'
|
|
}
|
|
|
|
});
|
|
|
|
var availableDates = document.getElementById('available-dates')
|
|
|
|
$calender.on('zabuto:calendar:day', function (e) {
|
|
|
|
var date = e.date;
|
|
|
|
//get available time for selected date
|
|
|
|
$.ajax({
|
|
url: "/appointments_by_date",
|
|
type:"POST",
|
|
data:{
|
|
date:date,
|
|
},
|
|
success:function(response){
|
|
if (response) {
|
|
var appointments = response.appointment;
|
|
dispalyAppointments(appointments,date);
|
|
}
|
|
},
|
|
error: function(response) {
|
|
|
|
}
|
|
});
|
|
})
|
|
});
|
|
function dispalyAppointments(appointments,date) {
|
|
|
|
//display available appointments in timeslot
|
|
if (appointments.length > 0) {
|
|
var timeSlots = '';
|
|
|
|
for (var i = 0; i < appointments.length; i++) {
|
|
var appointment = appointments[i];
|
|
var isAm = appointment.start_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 + ' - ' + appointment.end_time +' ' + (isAm ? 'AM' : 'PM') + '</button>';
|
|
}
|
|
|
|
$('#available-dates').html(timeSlots);
|
|
|
|
$('.time-slot').click(function (e) {
|
|
|
|
e.preventDefault();
|
|
var appointmentId = $(this).data("appointment-id");
|
|
|
|
$("#modal").attr("id", "modal-" + appointmentId);
|
|
$('#appointment-form input[name="appointment_id"]').val(appointmentId);
|
|
$("#modal-" + appointmentId).modal("show");
|
|
|
|
// showAppointmentForm(appointmentId);
|
|
});
|
|
|
|
}
|
|
else{
|
|
$('#available-dates').html("No appointments available for " + date);
|
|
}
|
|
|
|
}
|
|
|
|
function showAppointmentForm(appointmentId){
|
|
|
|
// $("#appointmentModal").modal();
|
|
//show Appointment booking form
|
|
// Reset the form
|
|
// $('#appointment-form')[0].reset();
|
|
|
|
// Store the appointment ID in a hidden field
|
|
// $('#appointment-form input[name="appointment_id"]').val(appointmentId);
|
|
|
|
// Show the form
|
|
// $('#appointment-form').show();
|
|
|
|
}
|
|
|
|
function submitAppointment(event){
|
|
event.preventDefault();
|
|
$.ajax({
|
|
url: "/appointment_submit",
|
|
type: "post",
|
|
data: $("form").serialize(),
|
|
success: function(response) {
|
|
console.log(response.appointment_detail);
|
|
// Handle the success response
|
|
// e.g. close the modal, show a success message, etc.
|
|
}
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
</script>
|
|
@endsection |