@extends('layouts.main')
@section('content')
<!-- appointment sec -->
<section class="appointment-sec py-4 mb-md-3">
<div class="container">
<div class="row align-items-center">
<div class="col-12 text-center">
<h3 class="clrBlueDark f-22 f-sm-22 fw-500 mb-3">User Details</h3>
</div>
{{-- <div class="col-4 text-end">
<a href="@if (Auth::user()) {{ route('appointment.patient-select') }} @else javascript:void(0) @endif" class="btn btn-back btn-outline btn-sm mb-3">Back</a>
</div> --}}
</div>
<!-- ++ -->
<div class="row justify-content-center">
{{-- <x-appointment-left :appointmentleft="$doctor"></x-appointment-left> --}}
<div class="col-lg-8">
<form id="user_form" method="POST" action="{{ route('user.details.save') }}">
{{ csrf_field() }}
<div class="border round-3 appointment-content-right register-form-wrapper p-3">
<h4 class="clr5c f-18 fw-500 mb-1">
@if (Auth::user())
Tell us about yourself
@else
Tell us about yourself
@endif
</h4>
<p class="f-16 clr5c">Please fill in the patient details below.</p>
<!--
<div class="form-group mb-md-4 mb-1">
<p class="f-14 clr5c d-block mb-2">This in-clinice appointent is for:</p>
<div class="row">
<div class="col-md-6">
<div class="input-border-box">
<input type="radio" name="in-clinice-appointent" value="myself">
<label for="myself">Myself</label><br>
</div>
</div>
<div class="col-md-6">
<div class="input-border-box">
<input type="radio" name="in-clinice-appointent" value="myself">
<label for="myself">Myself</label><br>
</div>
</div>
</div>
</div>
<div class="form-group mb-md-4 mb-1">
<p class="f-14 clr5c d-block mb-2">Are You Empaneled with CGHS, ECHC, DGHS & NDMC?</p>
<div class="row">
<div class="col-md-6">
<div class="input-border-box">
<input type="radio" name="empaneled" value="yes">
<label for="yes">Yes</label><br>
</div>
</div>
<div class="col-md-6">
<div class="input-border-box">
<input type="radio" name="empaneled" value="no">
<label for="no">No</label><br>
</div>
</div>
</div>
</div> -->
<div class="form-group mb-md-4 mb-1">
<div class="row">
<div class="col-md-6">
<div class="inner-form-group">
<label class="f-14 clr5c d-block mb-2">First Name</label>
<input type="text" placeholder="First Name" name="FirstName"
class="form-control" onkeydown="return /[a-z, ]/i.test(event.key)"
onblur="if (this.value == '') {this.value = '';}"
onfocus="if (this.value == '') {this.value = '';}"/>
@error('FirstName')
<span>{{ $message }}</span>
@enderror
</div>
</div>
<div class="col-md-6">
<div class="inner-form-group">
<label class="f-14 clr5c d-block mb-2">Last Name</label>
<input type="text" placeholder="Last Name" name="LastName"
class="form-control" onkeydown="return /[a-z, ]/i.test(event.key)"
onblur="if (this.value == '') {this.value = '';}"
onfocus="if (this.value == '') {this.value = '';}"/>
@error('LastName')
<span>{{ $message }}</span>
@enderror
</div>
</div>
</div>
</div>
<div class="form-group mb-md-4 mb-1">
<div class="row">
<div class="col-md-6">
<p class="f-14 clr5c d-block mb-2">Date of Birth</p>
<input type="text" name="DOB" id="birth_date" class="form-control" autocomplete="off" placeholder="DD-MM-YYYY"/>
@error('DOB')
<span>{{ $message }}</span>
@enderror
</div>
<div class="col-md-6">
<p class="f-14 clr5c d-block mb-2">Gender</p>
<div class="row">
<div class="col-md-6">
<div class="input-border-box">
<input type="radio" name="gender" value="1" >
<label for="male">Male</label>
<span class="checkmark-doctor-search"></span>
</div>
</div>
<div class="col-md-6">
<div class="input-border-box">
<input type="radio" name="gender" value="2">
<label for="female">Female</label>
<span class="checkmark-doctor-search"></span>
</div>
</div>
<span></span>
<div class="col md-12">
<span class="gender"></span>
</div>
</div>
</div>
</div>
</div>
<div class="form-group mb-md-4 mb-1">
<div class="row">
<div class="col-md-6">
<div class="inner-form-group">
<label class="f-14 clr5c d-block mb-2">Email Id</label>
<input type="text" placeholder="Email Id" name="Email"
class="form-control" />
@error('Email')
<span>{{ $message }}</span>
@enderror
</div>
</div>
<div class="col-md-6">
<div class="inner-form-group">
<label class="f-14 clr5c d-block mb-2">Mobile Number</label>
<input type="tel" placeholder="Mobile Number" name="Phone"
value="{{ $phone }}" class="form-control"
readonly />
@error('Phone')
<span>{{ $message }}</span>
@enderror
</div>
</div>
</div>
</div>
<div class="form-group mb-2">
<input type="hidden" name="api_new_user" id="api_new_user"
value="{{ (int) Request::get('api_new_user') }}">
<button type="submit" class="text-white payment-btn btn d-block w-100">Continue
<i class="fa-solid fa-arrow-right text-white"></i></button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- appointment sec end-->
@endsection
@section('css')
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
@stop
@section('javascript')
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script>
$('#birth_date').datepicker({
maxDate: 0,
changeMonth: true,
changeYear: true,
yearRange: '-80:+0',
dateFormat: 'dd-mm-yy'
});
</script>
<script>
$(document).ready(function() {
$("#user_form").validate({
rules: {
FirstName: {
required: true,
minlength: 3,
maxlength: 50
},
LastName: {
required: true,
minlength: 3,
maxlength: 50
},
phone: {
required: true,
minlength: 5,
maxlength: 10
},
Email: {
required: false,
email: true
},
gender: {
required: true
},
DOB: {
required: true
}
},
errorClass: "error is-invalid fail-alert",
validClass: "valid success-alert",
errorElement: "span",
errorPlacement: function(error, element) {
if (element.is(":radio")) {
error.appendTo('span.gender');
} else { // This is the default behavior
error.insertAfter(element);
}
},
submitHandler: function submitHandler(form) {
return true; // required to block normal submit since you used ajax
}
});
});
</script>
@endsection