@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>Migration | 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</span></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>You are about to book your appointment for <span id = "booking_service"></span> at date <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; var now = new Date(); var appointments_list = id == 1 ? {!! json_encode($educationAppointments) !!} : {!! json_encode($visaAppointments) !!}; var events = []; appointments_list.forEach(function(list) { events.push({ date: list.date, classname: "clickable event-clickable" }); }); $calender.zabuto_calendar({ classname: 'table event-colourful table-bordered lightgrey-weekends', week_starts: 'monday', show_days: true, cell_border: true, weekstartson: 0, navigation_markup: { prev: '<i class="fas fa-chevron-circle-left"></i>', next: '<i class="fas fa-chevron-circle-right"></i>' }, events:events }); let allBtns = document.querySelectorAll("td") $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) { } }); // On click, remove the MyClass on ALL td allBtns.forEach(function(el){ el.classList.remove("active"); }); // Add the class on clicked one e.target.classList.add("active"); }) } 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'; var isAmStart = ''; var isAmEnd = ''; timeSlots += '<button type="button" class="time-slot" data-toggle="modal" data-target="#appointmentModal" data-appointment-id="' + appointment.id + '" data-start-time="'+appointment.start_time+'" + data-end-time="'+appointment.end_time+'" >' + appointment.start_time +' - ' + appointment.end_time +'</button>'; } $('#'+id+'-available-dates').html(timeSlots); $('.time-slot').click(function (e) { e.preventDefault(); var appointmentId = $(this).data("appointment-id"); var startTime = $(this).data("start-time"); var endTime = $(this).data("end-time"); $('#appointment-form input[name="appointment_id"]').val(appointmentId); $('#booking_date').html('<b>'+formated_date+'</b>'); if(id == 1){ $('#booking_service').html('<b>Education Service</b>'); } if(id == 2){ $('#booking_service').html('<b>Migration/Visa Service</b>'); } $('#start_time').html(' <b>('+startTime+'</b>'); $('#end_time').html('<b>'+endTime+')</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']+' - ' + response.appointment['end_time']+' )', icon: 'success' }).then(function(){ location.reload(); } ) } }); } </script> @endsection