@extends('website.layouts.globalLayout')

@section('content')
@php
    $Gvalues = Gvalues();
@endphp
<div class="content pharmacy-cart-content" style="transform: none; min-height: 481.602px;">
    <div class="container" style="transform: none;">

        <div class="row" style="transform: none;">
            <div class="col-lg-3 col-xl-3 theiaStickySidebar"
                style="position: relative; overflow: visible; box-sizing: border-box; min-height: 1px;">












                <div class="theiaStickySidebar"
                    style="padding-top: 3em; padding-bottom: 1px; position: static; transform: none;">
                    <div class="filter-new">
                        <div class="filter-header">
                            <h4>Cherchez en fonction de la spécialisation des médecins</h4>
                        </div>
                        <div class="filter-widget">
                            <ul>
                                @foreach ($Gvalues->where('type', "doctor_speciality") as $type)
                                <li>
                                    <a href="javascript:void(0);">{{$type->value}} <span><i
                                                class="fas fa-angle-right"></i></span></a>
                                </li>
                                @endforeach


                            </ul>
                        </div>
                    </div>

                    <div class="resize-sensor"
                        style="position: absolute; inset: 0px; overflow: hidden; z-index: -1; visibility: hidden;">
                        <div class="resize-sensor-expand"
                            style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; z-index: -1; visibility: hidden;">
                            <div
                                style="position: absolute; left: 0px; top: 0px; transition: all 0s ease 0s; width: 295px; height: 1614px;">
                            </div>
                        </div>
                        <div class="resize-sensor-shrink"
                            style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; z-index: -1; visibility: hidden;">
                            <div style="position: absolute; left: 0; top: 0; transition: 0s; width: 200%; height: 200%">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-9 col-xl-9">

                <div class="filter-info">
                    <div class="row align-items-center">
                        <div class=" d-flex justify-content-between">
                            <form class="d-flex justify-content-between">
                                <div class="form-group ">
                                    <input type="search" value="{{ $search }}" name="search" class="form-control" style="width: 40vw"
                                        placeholder="Rechercher un médecin">
                                </div>

                            </form>
                            {{-- <h4 class="widget-title">Médicaments de la pharmacie</h4> --}}

                        </div>
                    </div>
                </div>

                <div class="pro-grid">
                    <div class="col-md-12 order-md-last order-sm-last order-last map-left">
                        <div class="row align-items-center mb-4">
                            <div class="col-md-6 col">
                                <h4>{{$doctors->count()}} Médecins trouvés</h4>
                            </div>
                            <div class="col-md-6 col-auto">
                                <div class="view-icons">
                                    <a href="" class="grid-view"><i class="fas fa-th-large"></i></a>
                                    <a href="" class="list-view active"><i class="fas fa-bars"></i></a>
                                </div>
                                <div class="sort-by d-sm-block d-none">
                                    <span class="sortby-fliter">
                                        <select class="form-select">
                                            <option>Trier par</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>

                        @foreach ($doctors as $doctor)
                        <div class="card">
                            <div class="card-body">
                                <div class="doctor-widget">
                                    <div class="doc-info-left">
                                        <div class="doctor-img">
                                            <a href="{{route('website.doctors.show', $doctor->id)}}">
                                                <img src="{{asset($doctor->avatar ?? "no-image.png")}}" class="img-fluid"
                                                    alt="User Image">
                                            </a>
                                        </div>
                                        <div class="doc-info-cont">
                                            <h4 class="doc-name"><a href="{{route('website.doctors.show', $doctor->id)}}">{{$doctor->first_name}} {{$doctor->last_name}}</a></h4>
                                            <p class="doc-speciality">MDS - Periodontology and Oral Implantology, BDS
                                            </p>
                                            <h5 class="doc-department">{{ $doctor->speciality}}</h5>
                                            <div class="rating">
                                                <i class="fas fa-star filled"></i>
                                                <i class="fas fa-star filled"></i>
                                                <i class="fas fa-star filled"></i>
                                                <i class="fas fa-star filled"></i>
                                                <i class="fas fa-star"></i>
                                                <span class="d-inline-block average-rating">(17)</span>
                                            </div>
                                            <div class="clinic-details">
                                                <p class="doc-location"><i class="fas fa-map-marker-alt"></i> {{$doctor->town}},
                                                    {{$doctor->country}}</p>
                                                {{-- <ul class="clinic-gallery">
                                                    <li>
                                                        <a href="assets/img/features/feature-01.jpg"
                                                            data-fancybox="gallery">
                                                            <img src="assets/img/features/feature-01.jpg" alt="Feature">
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="assets/img/features/feature-02.jpg"
                                                            data-fancybox="gallery">
                                                            <img src="assets/img/features/feature-02.jpg" alt="Feature">
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="assets/img/features/feature-03.jpg"
                                                            data-fancybox="gallery">
                                                            <img src="assets/img/features/feature-03.jpg" alt="Feature">
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="assets/img/features/feature-04.jpg"
                                                            data-fancybox="gallery">
                                                            <img src="assets/img/features/feature-04.jpg" alt="Feature">
                                                        </a>
                                                    </li>
                                                </ul> --}}
                                            </div>
                                            <div class="clinic-services">
                                                @foreach ($skills->where('doctor_id', $doctor->id) as $skill)
                                                <span>{{$skill->skill}}</span>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                    <div class="doc-info-right">

                                        <div class="clinic-booking">
                                            <a class="view-pro-btn" href="{{route('website.doctors.show', $doctor->id)}}">Voir profil</a>
                                            <a class="apt-btn" href="{{route('website.doctor.booking', $doctor->id)}}">Rendez-vous</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endforeach





                    </div>

                </div>

                <div class="col-md-12 text-center">
                    {!! $doctors->links() !!}

                </div>

            </div>
        </div>

    </div>
</div>

@include('website.includes.part.footer')
@endsection