File: /var/www/html/sarvodayahospital/resources/views/pages/single-doctor.blade.php
@extends('layouts.main')
@section('content')
<div class="padding-sec mb-lg-5 custom_h">
<div class="container">
<div class="row">
<div class="col-lg-8">
<div class="extra1 py-3 bg-gradient-n position-relative bg-blue-left-full">
<div class="row align-items-center">
<div class="col-md-12">
<ol class="breadcrumb ps-0 mb-2 pb-3 single_hos">
<li class="breadcrumb-item">
<a href="{{ route('home') }}" role="button" tabindex="0" class="text-white text-decoration-none"><i class="fa fa-home" aria-hidden="true"></i> Home
</a>
</li>
<li class="breadcrumb-item">
<a href="{{ route('doctors') }}" class="text-white text-decoration-none">Doctors</a>
</li>
<li class="breadcrumb-item active text-white" aria-current="page">{{ $doctor->DoctorName }}</li>
</ol>
</div>
<div class="col-7 my-2 my-md-3">
<h1 class="f-35 f-sm-20 text-white fw-500 mb-1">{{ $doctor->DoctorName }}</h1>
<div class="d-flex justify-content-between align-items-center">
<div>
<p class="f-15 text-white fw-300 mb-0">{{ $doctor->CurrentDesignation }}</p>
@if(count($doctor->specialities))
<p class="f-15 text-white fw-300 mb-2 pb-1">
@foreach($doctor->specialities as $speciality)
@if($loop->first)
<strong class="fw-500">Department :</strong>
@endif
{{ $speciality->SpecialityName }}{{ (!$loop->last) ? ',' : '' }}
@endforeach
</p>
@endif
</div>
</div>
<a href="javascript:void(0)" class="d-inline-block share-dr-profile text-white text-decoration-none text-nowrap f-15" data-bs-toggle="modal" data-bs-target="#shareOnSocialMedia">
<span>Share Doctor Profile</span>
<img src="/img/share-btn.svg" alt="Share Profile">
</a>
</div>
<div class="col-5 text-end pe-4">
<div class="single-doctor-img position-relative d-inline-block">
@if(!is_null($doctor->media))
<img src="{{ $doctor->media->banner_url }}" alt="{{ $doctor->AltInfo }}" class="img-fluid rounded-3 border-0">
@elseif($doctor->gender->Gender === 'Male')
<img src="{{ asset('img/default-doctor-male.jpg') }}" alt="{{ $doctor->AltInfo }}" class="img-fluid rounded-3 border-0">
@else
<img src="{{ asset('img/default-doctor-female.jpg') }}" alt="{{ $doctor->AltInfo }}" class="img-fluid rounded-3 border-0">
@endif
</div>
</div>
</div>
</div>
<x-share-component title="Share Doctor Profile"></x-share-component>
<div class="extra2 py-4 pb-md-4 pb-0 mt-lg-5">
@if(!is_null($doctor->Description) && $doctor->Description !== '')
<div class="step">
<div>
<div class="circle">
<img src="{{ asset('img/sd.svg') }}" alt="" class="img-fluid" />
</div>
</div>
<div>
<div class="left_Sec_content text-justify overview-main-content text-nounderline" id="overview">
<h2>Information</h2>
{!! $doctor->Description !!}
</div>
</div>
</div>
@endif
@if(!is_null($doctor->AboutSpeciality) && $doctor->AboutSpeciality !== '')
<div class="step">
<div>
<div class="circle">
<img src="{{ asset('img/sd.svg') }}" alt="" class="img-fluid" />
</div>
</div>
<div>
<div class="left_Sec_content text-justify overview-main-content" id="overview">
<h2>Speciality</h2>
{!! $doctor->AboutSpeciality !!}
</div>
</div>
</div>
@endif
@if(!is_null($doctor->Education) && $doctor->Education !== '')
<div class="step">
<div>
<div class="circle">
<img src="{{ asset('img/education.svg') }}" alt="" class="img-fluid" />
</div>
</div>
<div>
<div class="left_Sec_content text-justify overview-main-content" id="education">
<h2>Education</h2>
{!! $doctor->Education !!}
</div>
</div>
</div>
@endif
@if(!is_null($doctor->WorkExperience) && $doctor->WorkExperience !== '')
<div class="step">
<div>
<div class="circle">
<img src="{{ asset('img/experience.svg') }}" alt="" class="img-fluid" />
</div>
</div>
<div>
<div class="left_Sec_content text-justify overview-main-content" id="other">
<h2>Experience</h2>
{!! $doctor->WorkExperience !!}
</div>
</div>
</div>
@endif
@if(!is_null($doctor->AwardRecognition) && $doctor->AwardRecognition !== '')
<div class="step">
<div>
<div class="circle">
<img src="{{ asset('img/award.svg') }}" alt="" class="img-fluid" />
</div>
</div>
<div>
<div class="left_Sec_content text-justify overview-main-content" id="contribution">
<h2>Awards & Recognition</h2>
{!! $doctor->AwardRecognition !!}
</div>
</div>
</div>
@endif
@if(!is_null($doctor->Membership) && $doctor->Membership !== '')
<div class="step">
<div>
<div class="circle">
<img src="{{ asset('img/award.svg') }}" alt="" class="img-fluid" />
</div>
</div>
<div>
<div class="left_Sec_content text-justify overview-main-content" id="contribution">
<h2>Membership</h2>
{!! $doctor->Membership !!}
</div>
</div>
</div>
@endif
@if(!is_null($doctor->ContributionToSociety) && $doctor->ContributionToSociety !== '')
<div class="step">
<div>
<div class="circle">
<img src="{{ asset('img/award.svg') }}" alt="" class="img-fluid" />
</div>
</div>
<div>
<div class="left_Sec_content text-justify overview-main-content" id="contribution">
<h2>Contribution To Society</h2>
{!! $doctor->ContributionToSociety !!}
</div>
</div>
</div>
@endif
@if(!is_null($doctor->OtherInformation) && $doctor->OtherInformation !== '')
<div class="step step-cust">
<div>
<div class="circle">
<img src="{{ asset('img/award.svg') }}" alt="" class="img-fluid" />
</div>
</div>
<div>
<div class="left_Sec_content text-justify overview-main-content" id="contribution">
<h2>Other Information</h2>
{!! $doctor->OtherInformation !!}
</div>
</div>
</div>
@endif
@if(count($doctor->patientTestimonials))
<div class="left_Sec_content mt-5 pos-relative patients-testimonial-sd" id="testimonial">
<h2>Patients Testimonials</h2>
<x-testimonial :testimonials="$doctor->patientTestimonials" sliderClass="for-doctor-testimonials"></x-testimonial>
</div>
@endif
@if(count($doctor->blogs))
<div class="left_Sec_content mt-md-5 mt-4 pos-relative pt-md-5 single-doctor-blog" id="blogs">
<h2>Our Blogs</h2>
<div class="blogs swiper mt-4">
<div class="swiper-wrapper">
<x-blog-slider :blogs="$doctor->blogs"></x-blog-slider>
</div>
<div class="swiper-button-next"><i class="fa-solid fa-angle-right"></i></div>
<div class="swiper-button-prev"><i class="fa-solid fa-angle-left"></i></div>
</div>
</div>
@endif
</div>
</div>
<div class="col-lg-4 bg-white right_Sec mt-lg-4 mt-2 mb-4">
<div class="sticky-top ps-3">
<div id="b-appointment" class="border rounded-3">
<div class="apt_h">
<h2 class="f-18 clrBlueDark">Book An Appointment</h2>
</div>
<form class="apt_form align-items-center labelled-form justify-content-center my-3 px-4" id="call-back-form" method="GET" action="{{ route('appointment.doctor-select', $doctor->id ) }}">
<div class="col-md-12">
<div class="form-group mb-3 mb-md-3">
<select class="form-select clr5c" aria-label="Default select example" id="facility">
@foreach($doctor->mednetInformation as $mednetInfo)
<option data-doctor-id="{{ $mednetInfo->DoctorID }}" value="{{ $mednetInfo->hospital->id }}"
data-hospital-name="{{ $mednetInfo->hospital->HospitalShortName }}, {{ $mednetInfo->hospital->Location }}" data-hospital-id="{{ encrypt($mednetInfo->hospital->id) }}">
{{ $mednetInfo->hospital->HospitalShortName }}, {{ $mednetInfo->hospital->Location }}
</option>
@endforeach
</select>
</div>
</div>
<div class="align-items-center d-flex justify-content-center">
<img id="loading-image" src="{{ asset('img/ajax-loader.gif') }}" width="50px;" style="display:none;" alt="slot"/>
</div>
<div class="colors" id="one">
<div class="col-md-12">
<p class="f-14 fw-500 clrBlueDark">Check Availability</p>
</div>
<div class="col-md-12 date-time">
</div>
<div class="col-md-12 mt-3">
<span class="f-14 me-4 available">
<i class="fa fa-check-circle fw-500"></i>
Available
</span>
</div>
<hr>
<input type="hidden" id="did" name="did" value="{{$doctor->id}}" />
<div class="col-md-8 mb-2">
<button type="submit" class="btn text-white f-13 fw-600 bgOrange rounded-3 btn-block call-btn">
Book An Appointment
</button>
</div>
</div>
<div class="colors" id="two">
<div class="col-md-12">
<p class="f-14 clr5c mb-1">Online booking not available.</p>
<p class="f-14 clr5c help_line">></p>
</div>
<div class="col-md-8 mb-2">
<a href="javascript:void(0)" class="btn text-white f-14 fw-500 bgOrange rounded-3 btn-block"
data-bs-toggle="modal"
data-doctor-name="{{ $doctor->DoctorName }}"
data-doctor-id="{{ $doctor->id }}"
data-person-id="{{ $doctor->PersonID }}"
data-bs-target="#doctorAppointmentModal"
>
Request a Callback
</a>
</div>
</div>
</form>
</div>
{{-- <div class="border rounded-3 mt-4 mb-4">
<div class="apt_h">
<h2 class="f-18 clrBlueDark">Book An Appointment</h2>
</div>
<form class="apt_form align-items-center labelled-form justify-content-center my-3 px-4" id="call-back-form" method="POST" action="">
<div class="col-md-12">
<div class="form-group mb-3 mb-md-3">
<select class="form-select clr5c" aria-label="Default select example" id="colorselector">
@foreach($doctor->hospitals as $hospital)
<option value="{{ $hospital->id }}">{{ $hospital->HospitalName }}</option>
@endforeach
</select>
</div>
</div>
<div class="colors non-book-appointment">
<div class="col-md-12">
<p class="fs-15 text-muted mb-1 text-xl-light">Online booking not available.</p>
<p class="fs-15 text-secondary text-xl-light">For appointment please call <a href="tel:01294194444" class="clrOrange text-decoration-none"><strong>01294194444</strong></a></p>
</div>
<div class="col-md-8 mb-2">
<button type="submit" class="btn text-white f-13 fw-600 bgOrange rounded-3 btn-block call-btn" disabled>
Book An appointment
</button>
</div>
</div>
</form>
</div> --}}
{{-- <ul id="menu" class="mt-4 pos-relative d-none">--}}
{{-- <li class="active">--}}
{{-- <a href="#overview">Speciality</a>--}}
{{-- </li>--}}
{{-- <li>--}}
{{-- <a href="#education">Education</a>--}}
{{-- </li>--}}
{{-- <li>--}}
{{-- <a href="#other">Experience</a>--}}
{{-- </li>--}}
{{-- <li>--}}
{{-- <a href="#Technology">Awards & Recognition</a>--}}
{{-- </li>--}}
{{-- <li>--}}
{{-- <a href="#testimonial">Patients Testimonials</a>--}}
{{-- </li>--}}
{{-- <li>--}}
{{-- <a href="#blogs">Our Blogs</a>--}}
{{-- </li>--}}
{{-- </ul>--}}
<x-need-help>
<x-slot name="heading">Need help with the appointment?</x-slot>
<x-slot name="title">Share your details and we'll quickly assist you.</x-slot>
<input type="hidden" name="doctorId" value="{{ $doctor->id }}">
<input type="hidden" name="formType" value="Doctor Enquiry">
<input type="hidden" name="hospital" class="hospitalName" value="">
{{-- <input type="hidden" name="subject_line" value="Help for Doctor Appointment"> --}}
<input type="hidden" name="subject_line" value="Doctor Appointment">
<div class="col-md-12">
<x-form.input-field
label="Name"
type="text"
name="name"
onkeydown="return /[a-z, ]/i.test(event.key)"
onblur="if (this.value == '') {this.value = '';}"
onfocus="if (this.value == '') {this.value='';}"
>
</x-form.input-field>
</div>
<div class="col-md-12">
<x-form.input-field
label="Mobile"
type="text"
name="phone"
minlength="5"
maxlength="10"
pattern="[0-9]{10}"
class="phoneInputIntl"
></x-form.input-field>
</div>
<div class="col-md-12">
<x-form.input-field label="Email ID" type="email" name="email"></x-form.input-field>
</div>
<div class="col-md-12">
<x-form.textarea-field name="remark" label="Query"></x-form.textarea-field>
</div>
<div class="col-md-12 terms-condition-error">
<x-form.checkbox-field type="checkbox" name="tc"></x-form.checkbox-field>
</div>
<div class="col-md-12 mb-2 mt-2 pt-2 mb-md-0">
<x-form.form-button label="Submit"></x-form.form-button>
</div>
</x-need-help>
</div>
</div>
</div>
</div>
</div>
@include('partials.appointment-booking-popup')
@stop
@section('schema_scripts')
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "BreadcrumbList",
"itemListElement": [{
"@type": "ListItem",
"position": 1,
"name": "Doctors",
"item": "{{ route('doctors') }}"
},{
"@type": "ListItem",
"position": 2,
"name": "{{ $doctor->DoctorName }}",
"item": "{{ request()->url() }}"
}]
}
</script>
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Person",
"name": "{{ $doctor->DoctorName }}",
"jobTitle": "Cardiologist",
"worksFor": {
"@type": "MedicalOrganization",
"name": "Sarvodaya Hospital",
"url": "{{ route('home') }}"
},
"url": "{{ route('doctors.show', $doctor->Slug) }}",
"image": "{{ (!is_null($doctor->doctorPhoto)) ? $doctor->doctorPhoto->url : (($doctor->gender->Gender === 'Male') ? asset('img/default-doctor-male.jpg') : asset('img/default-doctor-female.jpg') ) }}",
"medicalSpecialty": "Cardiology",
"affiliation": {
"@type": "Hospital",
"name": "Sarvodaya Hospital",
"address": {
"@type": "PostalAddress",
"streetAddress": "Sector-8",
"addressLocality": "Faridabad",
"addressRegion": "Haryana",
"postalCode": "121006",
"addressCountry": "IN"
}
},
"isAcceptingNewPatients": true
}
</script>
@stop
@section('javascript')
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script>
let selectedHospitalName = $('#facility').find(":selected").data('hospital-id');
$('.hospitalName').val(selectedHospitalName);
function getDoctorSlotAvailability(fromDate) {
$.ajax({
type: "POST",
url: "{{ route('appointment.slot-availability') }}",
dataType: "json",
data: {
facility: $('#facility').find(":selected").val(),
fromDate: fromDate,
doctorID: $('#facility').find(":selected").data('doctor-id')
},
beforeSend() {
$("#loading-image").show();
$("#one").hide();
$("#two").hide();
},
success: function(response) {
if (response.offline==false) {
$("#one").show();
$("#two").hide();
let dateTimeHTML = `<span class="fs-15 text-black-50 me-4">
<i class="fa fa-calendar fw-500 clrBlueDark"></i>
<span id="slot-date">${response.appointmentDate}</span> </span>
<span class="fs-15 text-black-50"> <i class="fa fa-clock-o fw-500 clrBlueDark"></i>
<span id="slot-time">${response.appointmentTime}</span>
</span>`;
$(".date-time").html(dateTimeHTML);
$(".available").show();
$(".date-time").show();
} else{
$(".available").hide();
$(".date-time").hide();
let helplineHTML = `For appointment please call <a href="tel:${response.help_line}" class="clrOrange text-decoration-none"><strong>${response.help_line}</strong></a>`;
$(".help_line").html(helplineHTML);
$("#two").show();
$("#one").hide();
}
$("#loading-image").hide();
}
});
}
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': '{{ csrf_token() }}'
}
});
getDoctorSlotAvailability();
$(document).ready(function() {
$("#facility").change(function() {
getDoctorSlotAvailability();
});
});
</script>
@endsection
@section('css')
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<style>
@media screen and (max-width: 991px) {
.single-doctor-img img {
height: 145px!important;
width: 125px!important;
object-fit: cover!important;
object-position: top!important;
}
}
.single-doctor-img img {
box-shadow: 0px 10.1648px 11.0888px rgb(0 143 197 / 7%);
width: 200px;
height: 200px;
border-radius: 20px;
object-fit: cover;
object-position: top;
}
.cv-spinner {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.spinner {
width: 40px;
height: 40px;
border: 4px #ddd solid;
border-top: 4px #2e93e6 solid;
border-radius: 50%;
animation: sp-anime 0.8s infinite linear;
}
@keyframes sp-anime {
100% {
transform: rotate(360deg);
}
}
.is-hide {
display: none;
}
</style>
@endsection