{% extends 'page_header.html.twig' %}
{% block body_class "search-doctor-area" %}
{% block page_container %}
<div class="breadcrumb-bar">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-md-8 col-12">
<nav aria-label="breadcrumb" class="page-breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="index.html">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Search</li>
</ol>
</nav>
<h2 class="breadcrumb-title">{{ showRange }}</h2>
</div>
<div class="col-md-4 col-12 d-md-block d-none">
<div class="sort-by">
<span class="sort-title">Sort by</span>
<span class="sortby-fliter">
<select class="form-select">
<option>Select</option>
<option class="sorting">Rating</option>
<option class="sorting">Popular</option>
<option class="sorting">Latest</option>
<option class="sorting">Free</option>
</select>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-md-12 col-lg-4 col-xl-3 theiaStickySidebar">
<div class="card search-filter">
<div class="card-header">
<h4 class="card-title mb-0">Search Filter</h4>
</div>
<div class="card-body">
{{ form_start(searchForm) }}
<div class="filter-widget">
<div class="form-group">
{{ form_widget(searchForm.name, {'attr':{'class':'form-control', 'placeholder':'Search by name'}}) }}
</div>
</div>
<div class="filter-widget">
<label for="distance">Distance (km):</label>
{{ form_widget(searchForm.distance, {id:'distance'}) }}
<span id="distanceValue">50 km</span>
</div>
<div class="btn-search">
<button type="submit" class="btn w-100">Search</button>
</div>
{{ form_end(searchForm) }}
</div>
</div>
</div>
<div class="col-md-12 col-lg-8 col-xl-9">
{% for item in collection %}
{% set doctor = item[0] %}
<div class="card">
<div class="card-body">
<div class="doctor-widget">
<div class="doc-info-left flex-grow">
<div class="doctor-img">
<a href="{{ path('app.doctor_profile', {'username':doctor.username}) }}">
{% if doctor.thumbnail is not null %}
<img src="{{ doctor.thumbnail|media_url(150, 150) }}" class="img-fluid" alt="{{ doctor.getFullName() }}">
{% else %}
<img src="{{ asset('uploads/blank-profile-pic.jpeg') }}" class="img-fluid" alt="{{ doctor.getFullName() }}">
{% endif %}
</a>
</div>
<div class="doc-info-cont flex-grow">
<h4 class="doc-name"><a href="{{ path('app.doctor_profile', {'username':doctor.username}) }}">{{ doctor.firstname~' '~doctor.lastname}}</a></h4>
<p class="doc-speciality">
{% for specialty in doctor.specialties %}
{{ specialty.name }},
{% endfor %}
</p>
<p class="doc-department">
<i class="fas fa-money-check"></i> {{ doctor.pricing }}
</p>
<div class="rating-container d-flex">
{{ item.totalRating|rating }}
<div class="average-rating d-flex align-items-center">
<span>({{ item.numberOfRatings}} )</span>
</div>
</div>
<div class="clinic-details">
<p class="doc-location"><i class="fas fa-map-marker-alt"></i> {{ doctor.city }}, {{ doctor.country|country_name}}</p>
</div>
</div>
</div>
<div class="doc-info-right">
<div class="clinic-booking">
<a class="view-pro-btn" href="{{ path('app.doctor_profile', {'username':doctor.username}) }}">View Profile</a>
<a class="apt-btn btn-book-appointment" data-url="{{ path('app.book_appointment', {'username': doctor.username}) }}" data-title="Book Appointment" href="#">Book Appointment</a>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
{% endblock %}