@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">
                        Patient Education by Experts
                    </h1>
                </div>
                <div class="col-md-6 text-end"></div>
            </div>
        </div>
    </section>

    <section class="breadcrumb py-3 custom_breadcrumb mb-0">
        <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">Doctor Videos</li>
                </ol>
            </div>
        </div>
    </section>

    <section class="py-3  bgBlueLight">
        <div class="container">
            <form action="{{ route('doctor-videos') }}" method="GET" id="testimonialForm">
                <div class="row align-items-start">
                    <div class="col-md-3 mb-2 mb-md-0">
                        <select class="form-select text-black-50 speciality mb-2 mb-md-0" name="speciality">
                            <option value="" selected>Select Speciality</option>
                            @foreach ($specialities as $speciality)
                                <option value="{{ $speciality->Slug }}" @if ($speciality->Slug === request('speciality')) selected @endif>
                                    {{ $speciality->SpecialityName }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-5 mb-2 mb-md-0">
                        <div class="searchBar searchBarTestimonial d-flex">
                            <input id="query" type="text" name="q" placeholder="Search"
                                value="{{ request('q') }}" class="border p-2 rounded-3 px-3 bg-white form-control " />
                            <button type="submit" class="border p-2 bg-white ms-3 rounded-3">
                                <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>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </section>

    <section class="pt-4 left_Sec_content bg-white pb-3 testimonial-sec-main" id="hospital">
        <div class="container">

            @if (
                (request()->has('speciality') && !is_null(request('speciality'))) ||
                    (request()->has('q') && !is_null(request('q'))))
                <div class="clear-text-wrapper mb-4">
                    <p class="mb-0 fw-500 f-16 clr5c pe-2 d-inline-block">You have selected:</p>
                    @if (request()->has('speciality') && !is_null(request('speciality')))
                        <a href="{{ route('doctor-videos', ['speciality' => '', 'q' => request('q')]) }}"
                            class="rounded-pill align-items-center bgBlueLight clrBlueDark my-2 d-inline-flex justify-content-center f-16 no-underline px-3 py-1 clear-text me-3">
                            <span class="me-1">{{ request('speciality') }}</span>
                            <i class="fa-solid fa-xmark"></i>
                        </a>
                    @endif

                    @if (request()->has('q') && !is_null(request('q')))
                        <a href="{{ route('doctor-videos', ['q' => '', 'speciality' => request('speciality')]) }}"
                            class="rounded-pill align-items-center bgBlueLight clrBlueDark my-2 d-inline-flex justify-content-center f-16 no-underline px-3 py-1 clear-text me-3">
                            <span class="me-1">{{ request('q') }}</span>
                            <i class="fa-solid fa-xmark"></i>
                        </a>
                    @endif
                </div>
            @endif

            @if (count($doctorVideos))
                <div class="row">
                    @foreach($doctorVideos as $testimonial)
                        <div class="col-xl-4 col-md-4 col-sm-6 mb-4">
                            <div class="hospitals_box">
                                <a href="{{ route('doctor-videos.show', $testimonial->Slug) }}" class="testimonail-page-img-box position-relative d-block">
                                    @if ($testimonial->YoutubeVideoCode != '')
                                        <img src="https://i3.ytimg.com/vi/{{ $testimonial->youtube_url }}/hqdefault.jpg" alt="{{ $testimonial->Title }}">
                                    @else
                                        <img src="{{ $testimonial->patientImage->url }}" alt="">
                                    @endif
                                </a>

                                <div class="body_c testimonial-title">
                                    <p class="fs-16 mb-2 fw-500">
                                        {{ \Illuminate\Support\Str::limit($testimonial->Title) }}
                                    </p>

                                    @if(!is_null($testimonial->specialities))
                                        <span class="rounded-pill d-inline-block bgBlueLight clrBlueDark f-10 fw-400 px-2 py-0">
                                            {{ $testimonial->specialities->SpecialityName }}
                                        </span>
                                    @endif
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
                <div class="row">
                    <div class="col-md-12">
                        {{ $doctorVideos->onEachSide(2)->links() }}
                    </div>
                </div>
            @else
                <div class="row">
                    <div class="col-md-12">
                        <h2>Not found</h2>
                    </div>
                </div>
            @endif
        </div>
    </section>

@stop

@section('javascript')
    <script>
        $(document).ready(function() {
            const specialityDropdown = $('.speciality');

            specialityDropdown.on('change', function() {
                $('#testimonialForm').submit();
            })

            specialityDropdown.select2({
                theme: "bootstrap-5",
            });

            specialityDropdown.on('change', function() {
                $('#testimonialForm').submit();
            })
        })
    </script>

@stop

@section('css')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css"/>
<style>
.fancybox__container{z-index: 9999;}
/*.testimonial-sec-main img {height:auto!important}*/
</style>
@endsection