File: /var/www/html/sarvodayahospital/resources/views/pages/appointment-slot-select.blade.php
@extends('layouts.main')
@section('content')
<!-- appointment sec -->
<section class="appointment-sec py-4 mb-md-3">
<img id="loading-image" src="{{ asset('img/ajax-loader.gif') }}" width="50px;" style="display:none;" alt="slot" />
<div class="container">
<div class="row align-items-center">
<div class="col-8">
<h3 class="clrBlueDark f-22 fw-500 mb-3">Appointment Details</h3>
</div>
<div class="col-4 text-end">
<a href="{{ route('appointment.patient-select') }}?change=true"
class="btn btn-back btn-outline btn-sm mb-3">Back</a>
</div>
</div>
<form id="appointment-slot" name="appointment-slot" action="{{ route('appointment.book') }}" method="post">
{{ csrf_field() }}
<div class="row">
<x-appointment-left :appointmentleft="$doctor"></x-appointment-left>
<input type="hidden" value="" id="date" name="date" />
<input type="hidden" value="" id="time" name="time" />
<div class="col-lg-8">
@if ($errors->any())
@foreach ($errors->all() as $error)
<div class="error">{{ $error }}</div>
@endforeach
@endif
<div class="border round-3 appointment-content-right p-3">
<p class="mb-2">Select Hospital</p>
<select name="facility" id="facility" class="form-select form-control f-16">
@foreach ($doctor->mednetInformation as $mednetInfo)
@if ($mednetInfo->BookingEnabled)
<option data-doctor-id={{ $mednetInfo->DoctorID }}
value="{{ $mednetInfo->hospital->id }}">
{{ $mednetInfo->hospital->HospitalName }}
</option>
@endif
@endforeach
</select>
<p class="select-time-available border-0">Select a suitable slot</p>
<ul class="nav nav-pills justify-content-between contact-form-pills">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="pill" href="#today">Today</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="pill" href="#tomorrow">Tomorrow</a>
</li>
<li class="nav-item" id="calendar">
<a class="nav-link" data-bs-toggle="pill" href="#more">Choose Date</a>
</li>
</ul>
<!-- Tab panes -->
<div id="tab-content" class="tab-content">
<div class="tab-pane container active fade px-0 show pt-md-4 pt-2" id="today">
<div class="row">
<div class="col-md-12"><span class="slots-error error is-invalid"></span></div>
</div>
</div>
<div class="tab-pane container fade px-0 pt-md-4 pt-2" id="tomorrow">
<div class="row">
<div class="col-md-12"><span class="slots-error error is-invalid"></span></div>
</div>
</div>
<div class="tab-pane container fade px-0 pt-md-4 pt-2" id="more">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="" class="mb-2 clrGrey">Choose Appointment Date</label>
<input type="text" class="form-control bg-white" placeholder="DD-MM-YYYY"
id="chooseAppointmentDate" autocomplete="off" readonly>
</div>
</div>
</div>
<div class="row mt-3">
<!--slot available to be inserted -->
<div class="col-md-12"><span class="slots-error error is-invalid"></span></div>
</div>
</div>
</div>
<div class="payment-option-wrapper">
{{-- <p class="f-16">Choose your preferred payment option.</p> --}}
{{-- <p class="f-16 mb-0 mb-md-3">Pay online for your appointment.</p> --}}
<div class="row">
<div class="col-md-12 mt-3 mt-md-0">
<div
class="payment-border-box p-3 mb-1 border price-lists-label position-relative h-100">
<div class="d-flex align-items-center">
<div class="circle-box">
<input type="radio" id="price_hospital" name="price" value="0">
<span class="checkmark-doctor-search"></span>
</div>
<div class="ps-4 ms-1">
<h4 class="mb-0 fw-500 f-16 amt-box1"></h4>
<p class="f-14 mb-0">Pay at Hospital
</p>
</div>
</div>
</div>
</div>
<div class="col-md-12 mt-3 mt-md-2 online-pay-box">
<div
class="payment-border-box p-3 border price-lists-label position-relative h-100">
<div class="d-flex align-items-center">
<div class="circle-box">
<input type="radio" id="price_online" name="price" value="0">
<span class="checkmark-doctor-search"></span>
</div>
<div class="ps-4 ms-1">
<h4 class="mb-0 fw-500 f-16 amt-box2"></h4>
<p class="f-14 mb-0">Pay Online & skip the billing queues.
<span id="online_message"></span>
</p>
</div>
</div>
</div>
</div>
</div>
<span class="error is-invalid" id="price-error">{{ @$price }}</span>
<input type="hidden" name="payment_type" id="payment_type" value="" />
<input type="hidden" name="payment_data" id="payment_data" value="" />
<button id="payment-button" class="text-white payment-btn btn d-block w-100">
Proceed to Pay <i class="fa-solid fa-arrow-right text-white"></i>
</button>
</div>
</div>
</div>
</div>
</form>
</div>
</section>
<div id="block-element"></div>
<!-- appointment sec end-->
@endsection
@section('css')
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<style>
.button label.fail-alert {
border: 1px solid red !important;
}
.payment-option-wrapper .fail-alert {
border: 1px solid red !important;
}
#block-element {
position: absolute;
z-index: 9999;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(255,255,255,0.5);
display: none;
}
img#loading-image {
left: 50%;
top: 50%;
z-index: 10000;
position: fixed;
}
</style>
@stop
@section('javascript')
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script>
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': '{{ csrf_token() }}'
}
});
function getDoctorSlots(fromDate) {
$('#PersonID').val($('#facility').find(":selected").data('doctor-id'));
let hospital_ids = $('#facility').val();
if(hospital_ids != '1') {
$('.online-pay-box').hide();
}
$.ajax({
type: "POST",
url: "{{ route('appointment.slots') }}",
dataType: "json",
data: {
facility: $('#facility').find(":selected").val(),
fromDate: fromDate, //'{{ \Carbon\Carbon::today()->format('d-m-Y') }}',
doctorID: $('#facility').find(":selected").data('doctor-id')
},
beforeSend() {
$('.payment-option-wrapper').hide();
$('#today .row').html('<div class="col-12"><p class="select-time-available"></p></div>');
$('#tomorrow .row').html('<div class="col-12"><p class="select-time-available"></p></div>');
$('#chooseAppointmentDate').datepicker('setDate', null);
var mainDiv = document.getElementById('more');
var x = mainDiv.children[1];
$(x).html(
'<div class="col-12"><p class="select-time-available"></p></div>'
);
$("#loading-image").show();
$("#block-element").show();
},
success: function(response) {
if (response.today == 'No Slots Available' || response.today == '') {
$('#today .row').html(
'<div class="col-12"><p class="select-time-available">No Slots Available</p></div>'
);
$('.payment-option-wrapper').hide();
} else {
$('#today .row').html(response.today +
'<div class="col-md-12"><span class="slots-error error is-invalid"></span></div>'
);
$('.payment-option-wrapper').show();
}
if (response.tomorrow == 'No Slots Available' || response.tomorrow == '') {
$('#tomorrow .row').html(
'<div class="col-12"><p class="select-time-available">No Slots Available</p></div>'
);
} else {
$('#tomorrow .row').html(response.tomorrow +
'<div class="col-md-12"><span class="slots-error error is-invalid"></span></div>'
);
}
if (response.future) {
datelist = [];
var datelist = response.future;
$("#chooseAppointmentDate").datepicker({
dateFormat: 'dd-mm-yy',
beforeShowDay: function(d) {
// normalize the date for searching in array
var dmy = "";
dmy += ("00" + d.getDate()).slice(-2) + "-";
dmy += ("00" + (d.getMonth() + 1)).slice(-2) + "-";
dmy += d.getFullYear();
if ($.inArray(dmy, datelist) >= 0) {
return [true, ""];
} else {
return [false, ""];
}
},
onSelect: function(date, datepicker) {
if (date !== "") {
getDoctorFutureSlots(date)
}
}
});
}
$("#loading-image").hide();
$("#block-element").hide();
}
});
}
function getDoctorFutureSlots(fromDate) {
$.ajax({
type: "POST",
url: "{{ route('appointment.future-slots') }}",
dataType: "json",
data: {
facility: $('#facility').find(":selected").val(),
fromDate: fromDate,
doctorID: $('#facility').find(":selected").data('doctor-id')
},
beforeSend() {
$('.payment-option-wrapper').hide();
$("#loading-image").show();
$("#block-element").show();
},
success: function(response) {
if ((response == 'No Slots Available') || (response == '')) {
var mainDiv = document.getElementById('more');
var x = mainDiv.children[1];
$(x).html(
'<div class="col-12"><p class="select-time-available">No Slots Available</p></div>'
);
$('.payment-option-wrapper').hide();
} else {
var mainDiv = document.getElementById('more');
var x = mainDiv.children[1];
$(x).html(response);
$('.payment-option-wrapper').show();
}
$("#loading-image").hide();
$("#block-element").hide();
}
});
}
function getDoctorConsultationFee() {
$.ajax({
type: "POST",
url: `/api/doctor-consultation-fee`,
data: {
"doctorID": $('#facility').find(":selected").data('doctor-id'),
"facility": $('#facility').find(":selected").val(),
},
beforeSend() {
amountBox.html(`<img src="${loaderImgURL}" alt="">`)
},
success: function(response) {
if (response === '') {
amountBox.html(`<a href="javascript:void(0)" id="reloadConsultationFee">Refresh</a>`);
amountBox1.html(`<a href="javascript:void(0)" id="reloadConsultationFee">Refresh</a>`);
amountBox2.html(`<a href="javascript:void(0)" id="reloadConsultationFee">Refresh</a>`);
} else {
amountBox.html(`<span>₹${response.price_actual}</span>`);
amountBox1.html(`<span>₹${response.price_hospital}</span>`);
amountBox2.html(`<span>₹${response.price_online}</span>`);
$('#price_hospital').val(response.price_hospital);
$('#price_online').val(response.price_online);
$('#online_message').html(response.online_message);
$('#payment_data').val(response.online_data);
}
},
error: function(request, error) {
amountBox.html(`<a href="javascript:void(0)" id="reloadConsultationFee">Refresh</a>`);
amountBox1.html(`<a href="javascript:void(0)" id="reloadConsultationFee">Refresh</a>`);
amountBox2.html(`<a href="javascript:void(0)" id="reloadConsultationFee">Refresh</a>`);
}
})
}
let amountBox = $('.amt-box');
let amountBox1 = $('.amt-box1');
let amountBox2 = $('.amt-box2');
let loaderImgURL = `{{ asset('img/amt-loader.gif') }}`;
getDoctorConsultationFee();
getDoctorSlots();
$(document).on('click', '#reloadConsultationFee', function() {
getDoctorConsultationFee();
});
$("#facility").change(function() {
$('#PersonID').val($(this).data('doctor-id'));
let hospital_ids = $('#facility').val();
if(hospital_ids != '1') {
$('.online-pay-box').hide();
}
getDoctorConsultationFee();
getDoctorSlots();
allChild1 = document.querySelectorAll('.nav-pills li a');
allChild1.forEach((element) => {
element.classList.remove('active');
});
allChild1[0].classList.add('active');
allChild2 = document.querySelectorAll('#tab-content .tab-pane');
allChild2.forEach((element) => {
element.classList.remove('active', 'show');
});
allChild2[0].classList.add('active', 'show');
});
$(document).ready(function() {
$('#tab-content').on('change', 'input[name=slots]:radio', function() {
$("#date").val(this.attributes['data-slot-date'].value);
$("#time").val(this.attributes['data-slot-time'].value);
$('#tab-content .slot-lists-label').removeClass("error is-invalid fail-alert");
$('#tab-content .slots-error').html('');
});
});
$(document).ready(function() {
var value = $('input[name="price"]').click(function() {
$('#payment_type').val(this.id);
$('.payment-option-wrapper .price-lists-label').removeClass("error is-invalid fail-alert");
$('.payment-option-wrapper #price-error').html('');
if (this.id == 'price_hospital') {
$('#payment-button').html('Proceed <i class="fa-solid fa-arrow-right text-white"></i>');
} else {
$('#payment-button').html(
'Proceed to Pay <i class="fa-solid fa-arrow-right text-white"></i>');
}
});
});
</script>
<script>
$('.nav-pills li a').click(function() {
var data = $(this).attr("href");
if ($(data).has('div.button').length != 0) {
$('.payment-option-wrapper').show();
} else {
$('.payment-option-wrapper').hide();
}
});
</script>
<script>
$(document).ready(function() {
var form = document.getElementById("appointment-slot");
var value = $('input[name="slots"]').click(function() {
$('#tab-content .slot-lists-label').removeClass("error is-invalid fail-alert");
$('#tab-content .slots-error').html('');
});
$("#payment-button").on("click", function(e) {
e.preventDefault();
val = validate();
if (val) {
form.submit();
}
});
});
function validate() {
value = true;
if ($('#tab-content input[name="slots"]:checked').length < 1) {
value = false;
$('#tab-content .slots-error').html('The slots field is required.');
$('#tab-content .slot-lists-label').addClass("error is-invalid fail-alert");
} else {
$('#tab-content .slot-lists-label').removeClass("error is-invalid fail-alert");
$('#tab-content .slots-error').html('');
}
if ($('.payment-option-wrapper input[name="price"]:checked').length < 1) {
value = false;
$('.payment-option-wrapper #price-error').html('The price field is required.');
$('.payment-option-wrapper .price-lists-label').addClass("error is-invalid fail-alert");
} else {
$('.payment-option-wrapper .price-lists-label').removeClass("error is-invalid fail-alert");
$('.payment-option-wrapper #price-error').html('');
}
return value;
}
</script>
@endsection