Appointment booking system
@extends('layouts.admin')
@push('title', get_phrase('Edit Appointment'))
@push('meta')@endpush
@push('css')@endpush
@section('content')
<script src='https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@6.1.11/index.global.min.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<!-- Mani section header and breadcrumb -->
<div class="ol-card radius-8px print-d-none">
<div class="ol-card-body my-3 py-4 px-20px">
<div class="d-flex align-items-center justify-content-between gap-3 flex-wrap flex-md-nowrap">
<h4 class="title fs-16px">
<i class="fi-rr-settings-sliders me-2"></i>
<span>{{ get_phrase('Edit Appointment') }}</span>
</h4>
<a href="{{route('admin.appointments')}}" class="btn ol-btn-outline-secondary d-flex align-items-center cg-10px">
<!-- <span class="fi-rr-plus"></span> -->
<span>All Appointment</span>
</a>
</div>
</div>
</div>
@if (session('msg'))
<div class="alert alert-success">
{{ session('msg') }}
</div>
@endif
@if (session('msg2'))
<div class="alert alert-danger">
{{ session('msg2') }}
</div>
@endif
<?php
$data = DB::table('appointments')->where('id', $id)->get();
foreach ($data as $key => $value) {
$teachers_id = $value->teachers;
$booking_date = $value->booking_date;
$booking_time_start = $value->booking_time;
$booking_time_end = $value->booking_time_end;
$user_id = $value->user_id;
$reason = $value->reason;
$status = $value->status;
}
$data2 = DB::table('users')->where('id', $teachers_id)->get();
foreach($data2 as $key2 => $d2){
$Tname = $d2->name;
}
?>
<div class="card p-3 batches_form">
<div class="row">
<div class="col-md-6">
<label class="form-label ol-form-label col-form-label">
Meeting Date<span class="text-danger ms-1">*</span>
</label>
<div class="container">
<div id='calendar'></div>
</div>
</div>
<div class="col-md-6">
<form method="post" action="{{route('admin.appointments_edit.update')}}">
@csrf
<input type="hidden" name="meeting_date" id="meeting_date" value="{{$booking_date}}" />
<input type="hidden" name="id" value="{{$id}}" />
<div class="form-group">
<label for="" class="form-label ol-form-label col-form-label">{{ get_phrase('Select Teacher') }}<span class="text-danger ms-1">*</span></label>
<div class="col-sm-10">
<select class="form-control ol-form-control ol-select2" name="teacher" id="teacher_id" required style="width:100%">
<option value="{{$teachers_id}}">{{$Tname}}</option>
<?php
$studentCount = DB::table('users')->where('role', 'instructor')->orderby('id', 'desc')->get();
foreach($studentCount as $studentArr){
?>
<option value="{{$studentArr->id}}">{{$studentArr->name}}</option>
<?php } ?>
</select>
</div>
</div>
<div class="form-group my-3">
<label class="form-label ol-form-label col-form-label">
Meeting Start<span class="text-danger ms-1">*</span>
</label>
<input type="time" id="meeting_time" value="{{$booking_time_start}}" name="meeting_time" class="form-control" required />
</div>
<div class="form-group my-3">
<label class="form-label ol-form-label col-form-label">
Meeting End<span class="text-danger ms-1">*</span>
</label>
<input type="time" value="{{$booking_time_end}}" id="meeting_time_end" name="meeting_time_end" class="form-control" required />
</div>
<div id="getresponse" style="">
</div>
<div class="form-group my-3">
<button type="button" id="check_availibility" class="btn btn-primary" style="float:right;">Check Avaibility</button>
</div><br/>
<script>
$(document).ready(function(){
$('#check_availibility').click(function(){
let meeting_time = $('#meeting_time').val();
let meeting_time_end = $('#meeting_time_end').val();
let teacher_id = $('#teacher_id').val();
let meeting_date = $('#meeting_date').val();
// alert(meeting_time+teacher_id);
$.ajax({
url: "{{route('admin.check_availibility')}}",
type: 'POST',
data: {meeting_time: meeting_time, teacher_id: teacher_id, meeting_time_end:meeting_time_end, meeting_date:meeting_date, _token: '{{csrf_token()}}'},
beforeSend: function() {
$('#check_availibility').text('Loading..');
},
success: function(data){
$('#check_availibility').text('Check Avaibility');
$('#getresponse').html(data);
}
});
});
});
</script>
<div class="form-group my-3">
<label class="form-label ol-form-label col-form-label">
Type Reason<span class="text-danger ms-1">*</span>
</label>
<textarea name="reason" class="form-control" required>{{$reason}}</textarea>
</div>
<br/>
<div class="form-group my-3">
<button class="btn btn-primary btn-large" type="submit" style="float:right; width:100%">Save</button>
</div>
</form>
</div>
</div>
</div>
<br/><br/>
<style>
.batches_form{
widths:50%;
}
</style>
<script>
$(document).ready(function () {
$('.fc .fc-daygrid-day-number').click(function(){
let selectdata = $('.fc .fc-daygrid-day-top');
let selected_val = $(this).attr('aria-label');
console.log(selected_val);
// $('#meeting_date').val(selected_val);
});
$('.fc .fc-daygrid-day-top').click(function(){
$('.fc .fc-daygrid-day-top').css('background', '#fff');
$(this).css('background', '#ffe6f2');
});
});
</script>
<?php
$bdate = date('Y-m-d', strtotime($booking_date));
?>
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
selectable:true,
selecHelper:true,
validRange: {
start: new Date() // Disables past dates
},
initialView: 'dayGridMonth',
dateClick: function(info) {
$('#meeting_date').val(info.dateStr);
},
events: [
{
title : 'Booked',
start : '{{$bdate}}',
end : '{{$bdate}}',
color : 'yellow',
textColor : 'black',
}
],
});
calendar.render();
});
</script>
<style>
.fc .fc-daygrid-day-top{
cursor:pointer;
}
.fc .fc-daygrid-day-number {
padding: 4px;
position: relative;
z-index: 4;
font-size: 30px;
text-align:center;
}
.fc-license-message{
display:none;
}
</style>
@endsection
@push('js')@endpush
