File: /var/www/html/sarvodayahospital/resources/views/pages/appointment-login.blade.php
@extends('layouts.main')
@section('content')
<style>
#hide-otp {
display: none;
}
#change-mobile {
display: none;
}
</style>
<!-- appointment sec -->
<section class="login-sec py-4">
<div class="container">
<div class="row align-items-center mb-md-4 mt-2">
<div class="col-12">
<h3 class="f-22 fw-500 mb-3 text-center clr5c mb-4 f-sm-22">Login to Book an Appointment</h3>
<form id="appointment_form" method="POST" action="{{ route('otp.verification') }}">
{{ csrf_field() }}
<div class="login-box">
<div class="login-box-header">
<div class="d-flex align-items-center">
@if (!is_null($doctor->media))
<img src="{{ $doctor->media->thumbnail_url }}" class="login-profile-img"
alt="" />
@elseif($doctor->gender->Gender === 'Male')
<img src="{{ asset('img/default-doctor-male.jpg') }}" class="login-profile-img"
alt="" />
@else
<img src="{{ asset('img/default-doctor-female.jpg') }}" class="login-profile-img"
alt="" />
@endif
<div class="ps-3">
<h3 class="mb-0 clr5c fw-500 f-18 f-sm-16">{{ $doctor->DoctorName }}</h3>
<p class="mb-0 f-16 clr8e f-sm-14">
{{ $doctor->CurrentDesignation }}
</p>
</div>
</div>
</div>
<!-- form body -->
<div class="login-form-body">
<div class="login-form-content">
<div class="d-flex align-items-center">
<div class="input-group">
<span class="input-group-text"><img
src="{{ asset('img/mobile-icon.svg') }}" /></span>
<input type="tel" name="Phone" placeholder="Enter Mobile Number"
maxlength="10" class="form-control login_mobile_field"
value="{{ old('Phone') }}" id="Phone" autocomplete="off" />
</div>
@if ($errors->has('Phone'))
<div class="error">{{ $errors->first('Phone') }}</div>
@endif
</div>
<p class="my-0 text-end" id='change-mobile'><a href="javascript:window.location.reload();"
class="clr5c no-underline f-12">Change Mobile No</a></p>
<!-- OTP -->
@if ($errors->has('otp'))
<div id="unhide-otp">
@else
<div id="hide-otp">
@endif
<div class="d-flex justify-content-center otp-number-box pin mt-3 pt-1">
<input name="otp[]" type="text" maxlength="1" autocomplete="off" required
pattern="\d{1}" autofocus inputmode="numeric"/>
<input name="otp[]" type="text" maxlength="1" autocomplete="off" required
pattern="\d{1}" autofocus inputmode="numeric"/>
<input name="otp[]" type="text" maxlength="1" autocomplete="off" required
pattern="\d{1}" autofocus inputmode="numeric"/>
<input name="otp[]" type="text" maxlength="1" autocomplete="off" required
pattern="\d{1}" autofocus inputmode="numeric"/>
</div>
<div class="error text-center text-danger mt-2 f-12 otp-err">
{{ $errors->first('otp') }}</div>
<div id="countdown" class="text-center mt-3 f-14" style="display: none;"></div>
<p id="resendotp" class="text-center mt-2 pb-1 pt-1 mb-0" style="display: none;">
<a href="javascript:resendotp()" class="clrGrey resend-otp f-15">Resend OTP</a>
</p>
</div>
<input type="submit" id="mobile-submit"
@if ($errors->has('otp')) value="Verify" @else value="Submit" @endif
name="mobile-submit" class="mt-4" />
</div>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- appointment sec end-->
@include('partials.page-popup')
@endsection
@section('javascript')
<script type="text/javascript">
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': '{{ csrf_token() }}'
}
});
</script>
<script type="text/javascript">
$(function() { //shorthand document.ready function
$('#appointment_form').on('submit', function(e) {
e.preventDefault();
if ($("input[name='mobile-submit']").val() == "Submit") {
e.preventDefault();
}
});
$(window).on('load', function() {
let isCookieAvailable = getCookie('alert_popup');
setCookie('alert_popup', true, 1);
if (!isCookieAvailable) {
setTimeout(function(){
$('#fraudAlertModal').modal('show');
}, 1500);
}
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$(document).on("click", "#mobile-submit", function(e) {
var numberField = document.getElementById("Phone");
if (numberField.value.length == 10) {
if ($("input[name='mobile-submit']").val() == "Submit") {
$.ajax({
type: "POST",
url: "{{ route('otp.generate') }}",
data: {
Phone: $("input[name='Phone']").val()
},
success: function(rsp) {
//console.log(rsp);
$('#hide-otp').css("display", "block");
$('#mobile-submit').val("Verify");
$('#change-mobile').css("display", "block");
countdown();
}
});
} else {
var arr = $("input[name='otp[]']").map(function() {
return this.value;
}).get();
$.ajax({
type: "POST",
url: "{{ route('otp.verification') }}",
data: {
Phone: $("input[name='Phone']").val(),
otp: arr.toString(),
},
success: function(rsp) {
window.location.replace(rsp.message);
},
error: function(jqXHR, exception) {
var responseText = jQuery.parseJSON(jqXHR.responseText);
$(".otp-err").html(responseText);
}
});
}
}
});
});
</script>
<script>
const els = (sel, par) => (par || document).querySelectorAll(sel);
els(".pin").forEach((elGroup) => {
const elsInput = [...elGroup.children];
const len = elsInput.length;
const handlePaste = (ev) => {
const clip = ev.clipboardData.getData('text'); // Get clipboard data
const pin = clip.replace(/\s/g, ""); // Sanitize string
const ch = [...pin]; // Create array of chars
elsInput.forEach((el, i) => el.value = ch[i] ?? ""); // Populate inputs
elsInput[pin.length - 1].focus(); // Focus input
};
const handleInput = (ev) => {
const elInp = ev.currentTarget;
const i = elsInput.indexOf(elInp);
if (elInp.value && (i + 1) % len) elsInput[i + 1].focus(); // focus next
};
const handleKeyDn = (ev) => {
const elInp = ev.currentTarget
const i = elsInput.indexOf(elInp);
if (!elInp.value && ev.key === "Backspace" && i) elsInput[i - 1].focus(); // Focus previous
};
// Add the same events to every input in group:
elsInput.forEach(elInp => {
elInp.addEventListener("paste", handlePaste); // Handle pasting
elInp.addEventListener("input", handleInput); // Handle typing
elInp.addEventListener("keydown", handleKeyDn); // Handle deleting
});
});
</script>
<script type="text/javascript">
function resendotp() {
$.ajax({
type: "POST",
url: "{{ route('otp.resendotp') }}",
success: function(result) {
$("input[name='otp[]']").val('');
$(".otp-err").html('');
countdown();
},
dataType: "json"
});
};
</script>
<script type="text/javascript">
function countdown() {
var timeleft = {{ config('sarvodaya.sms_resend_interval') }};
var downloadTimer = setInterval(function() {
if (timeleft <= 0) {
clearInterval(downloadTimer);
$('#countdown').hide();
$('#resendotp').show();
} else {
$('#resendotp').hide();
$('#countdown').show();
$('#countdown').html("Resend OTP will be enabled in " + timeleft + " seconds");
}
timeleft -= 1;
}, 1000);
}
</script>
<script>
ok = 'Your Otp is not correct';
$(document).ready(function() {
str = $('.otp-err').html();
str = str.replace(/[\n\t\r]/g, "");
str = str.trim();
if (str != '') {
countdown();
}
});
</script>
<script>
$(document).ready(function() {
document.getElementById("Phone").addEventListener("keyup", function() {
this.value = this.value.replace(/[^0-9]/g, "");
});
});
</script>
@endsection