File: /var/www/html/sarvodayahospital/resources/views/pages/doctor.blade.php
@extends('layouts.main')
@section('content')
<section class="py-4 py-md-3 banner-c">
<div class="container">
<div class="row align-items-center">
<div class="col-md-6">
<h1 class="text-white f-sm-30 f-30 fw-500 mb-0">
Our Doctors
</h1>
</div>
<div class="col-md-6 text-end"></div>
</div>
</div>
</section>
<section class="breadcrumb pt-4 custom_breadcrumb">
<div class="container">
<div class="row align-items-center">
<ol class="breadcrumb mb-0">
<li class="breadcrumb-item">
<a href="{{ route('home') }}" role="button" tabindex="0"><i class="fa fa-home"></i> Home</a>
</li>
<li class="breadcrumb-item active" aria-current="page">Our Doctors</li>
</ol>
</div>
</div>
</section>
<section class="pt-md-4 left_Sec_content filters-doctors-main pb-4" id="experts">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="sticky-top bg-white doctor-master-sticky">
<div class="d-flex justify-content-between mb-md-0 mb-0 d-md-none">
<p class="clrBlueDark fw-500 f-20 filter-text mb-0 mb-md-4">Search Doctors</p>
<div class="filter-toggle d-md-none clrGrey">
<i class="fa-solid fa-sliders ps-2"></i>
</div>
</div>
<form action="{{ route('doctors') }}" class="d-none d-md-block d-doctorFilter">
<div class="col-lg-12">
<h3 class="f-20 fw-500 clrBlueDark">Location</h3>
<select class="form-control form-select sidebar-input fw-400 f-16 d-hospital-dropdown" name="hospital_name" aria-label="Hospital">
<option value="" selected>Select Location</option>
@foreach($hospitals as $hospital)
<option value="{{ $hospital->Slug }}" @if($hospital->Slug === request('hospital_name')) selected @endif>
{{ $hospital->HospitalShortName }}, {{ $hospital->Location }}
</option>
@endforeach
</select>
</div>
<div class="col-lg-12">
<h3 class="f-20 fw-500 clrBlueDark mt-4">Speciality</h3>
<div class="searchBar search-hospital position-relative">
<select name="speciality" class="form-control form-select sidebar-input fw-400 f-16 d-speciality">
<option value="" selected>Select Speciality</option>
@foreach($specialities as $value => $key)
<option value="{{ $key }}" @if($key === request('speciality')) selected @endif>{{ $value }}</option>
@endforeach
</select>
</div>
</div>
<div class="col-lg-12">
<h3 class="f-20 fw-500 clrBlueDark mt-4">Search By Doctor</h3>
<div class="searchBar search-hospital position-relative">
<button type="submit" class="doctorSearchBtn">
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="#666666"
d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" />
</svg>
</button>
<input type="text" class="sidebar-input form-control" name="query" placeholder="Search" value="{{ request('query') }}" />
</div>
</div>
</form>
</div>
<div class="filter-mobile d-md-none">
<i class="fa-solid fa-xmark close-filter mb-3 clrGrey float-end"></i>
<form action="{{ route('doctors') }}" class="mt-4 m-doctorFilter">
<div class="col-lg-12">
<h3 class="f-20 fw-500 clrBlueDark">Location</h3>
<select class="form-control form-select m-hospital-dropdown sidebar-input fw-400 f-16" name="hospital_name" aria-label="Hospital">
<option value="" selected>Select Location</option>
@foreach($hospitals as $hospital)
<option value="{{ $hospital->Slug }}" @if($hospital->Slug === request('hospital_name')) selected @endif>
{{ $hospital->HospitalShortName }}, {{ $hospital->Location }}
</option>
@endforeach
</select>
</div>
<div class="col-lg-12">
<h3 class="f-20 fw-500 clrBlueDark mt-4">Speciality</h3>
<div class="searchBar search-hospital">
<select name="speciality" class="form-control form-select sidebar-input fw-400 f-16 m-speciality">
<option value="" selected>Select Speciality</option>
@foreach($specialities as $value => $key)
<option value="{{ $key }}" @if($key === request('speciality')) selected @endif>{{ $value }}</option>
@endforeach
</select>
</div>
</div>
<div class="col-lg-12">
<h3 class="f-20 fw-500 clrBlueDark mt-4">Search By Doctor</h3>
<div class="searchBar search-hospital position-relative">
<button type="submit" class="doctorSearchBtn">
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="#666666"
d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" />
</svg>
</button>
<input type="text" class="sidebar-input form-control" name="query" placeholder="Search" value="{{ request('query') }}" />
</div>
</div>
</form>
</div>
</div>
<div class="col-md-8 mt-3 mt-md-0">
<div class="filter-content infinite-scroll">
<div class="row grid row-cols-1 row-cols-sm-3 row-cols-lg-3 row-cols-md-2 row-cols-xl-4">
@if(count($searchData))
<x-doctor :doctors="$searchData" :cols=21></x-doctor>
@else
<div class="col-md-12">
No doctor found....
</div>
@endif
</div>
<div class="row mt-3">
<div class="col-md-12">
{{ $searchData->appends(request()->all())->links() }}
</div>
</div>
</div>
</div>
</div>
</div>
</section>
@stop
@section('javascript')
<script src="https://unpkg.com/jscroll/dist/jquery.jscroll.min.js"></script>
<script>
$(document).ready(function() {
const baseURL = window.location.href;
const desktopSpecialityDropdown = $('.d-speciality');
desktopSpecialityDropdown.select2({
theme: "bootstrap-5",
});
$('.d-hospital-dropdown').on('change', function () {
$('.d-doctorFilter').submit();
})
desktopSpecialityDropdown.on('change', function () {
$('.d-doctorFilter').submit();
})
// Mobile Filter
$('.m-hospital-dropdown').on('change', function () {
$('.m-doctorFilter').submit();
})
$('.m-speciality').on('change', function () {
$('.m-doctorFilter').submit();
})
$('ul.pagination').hide();
$('.infinite-scroll').jscroll({
autoTrigger: true,
loadingHtml: '<img class="center-block" src="/img/ajax-loader.gif" alt="Loading" style="width: 80px" />',
padding: 0,
nextSelector: '.pagination li.active + li a',
contentSelector: 'div.infinite-scroll',
callback: function() {
$('ul.pagination').hide();
}
});
});
</script>
@stop