@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">
                    <h2 class="text-white f-sm-30 f-30 fw-500 mb-0">Patient Education by Experts</h2>
                </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" aria-current="page"><a href="{{ route('doctor-videos') }}" role="button" tabindex="0">Doctor Videos</a></li>
                    <li class="breadcrumb-item active" aria-current="page">{{ $testimonial->Title }}</li>
                </ol>
            </div>
        </div>
    </section>

    <section class="pt-2 common_p pb-4 event-single-sec" id="blog_detail">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 pb-4">
                    <div class="row">
                        <div class="col-md-12 pb-lg-4">
                            <div class="row">
                                <div class="col flex-auto">

                                    @if ($testimonial->YoutubeVideoCode != '')
                                        <iframe width="100%" height="380" src="https://www.youtube.com/embed/{{ $testimonial->youtube_url }}"
                                            srcdoc="<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em #00000069}.yt-bg{display: flex;align-items: center;justify-content: center;}.yt-bg span{height: 60px;background-image: url(https://all-filesuploads.s3.amazonaws.com/play.png);text-shadow: none;width: 60px;background-repeat: no-repeat;background-size: cover;
                            }</style><a href=https://www.youtube.com/embed/{{ $testimonial->youtube_url }}?autoplay=1><img src=https://img.youtube.com/vi/{{ $testimonial->youtube_url }}/maxresdefault.jpg alt=''><div class='yt-bg'><span></span></div></a>"
                                            frameborder="0"
                                            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                                            allowfullscreen
                                            title="Test" class="rounded-3 responsive-iframe">
                                        </iframe>
                                    @else
                                        <img src="{{ $testimonial->patientImage->url }}" alt="{{ $testimonial->Title }}" class="rounded-3">
                                        {{-- <img src="{{ asset('img/default-event.jpeg') }}" alt=""> --}}
                                    @endif

                                    <div class="col-md-12 mt-4">
                                        @include('partials.social-icons')
                                    </div>
                                    <div class="col-md-12">
                                        <span class="rounded-pill mb-3 d-inline-block bgBlueLight clrBlueDark f-12 px-3 py-1">
                                            {{ $testimonial->Date }}
                                        </span>
                                        <h1 class="main_h">
                                            {{ $testimonial->Title }}
                                        </h1>
                                        <p class="f-16 f-sm-15 clrGrey text-justify mb-3">
                                            {!! $testimonial->Description !!}
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4  mt-lg-0">
                    <div class="">
                        <h2 class="f-18 border border-1 border-top-0 border-start-0 border-end-0 f-sm-18 mb-3 pb-1 pb-lg-0 clr5c">
                            Related Testimonials
                        </h2>
                        <ul type="none" class="fw-700 f-15 related-blogs clrBlueDark mt-0 ps-0">
                            @foreach($related_testimonials as $related_testimonial)
                                <li class="mb-2">
                                    <div class="d-flex p-1 bg-white rounded-3">
                                        <div class="pe-2 pe-md-3">
                                            <a href="{{ route('doctor-videos.show', $related_testimonial->Slug) }}">
                                                @if ($related_testimonial->YoutubeVideoCode != '')
                                                    <img src="https://i3.ytimg.com/vi/{{ $related_testimonial->youtube_url }}/hqdefault.jpg" alt="{{ $related_testimonial->Title }}">
                                                @else
                                                    <img src="{{ $related_testimonial->patientImage->url }}" alt="{{ $related_testimonial->Title }}">
                                                @endif
                                            </a>
                                        </div>
                                        <div>
                                            <h3 class="fw-500 f-16  mb-0">
                                                <a href="{{ route('doctor-videos.show', $related_testimonial->Slug) }}" class="clrGrey no-underline blog-link-text mt-0 clr5c">
                                                    {{ $related_testimonial->Title }}
                                                </a>
                                            </h3>
                                        </div>
                                    </div>
                                </li>
                            @endforeach
                        </ul>

                    </div>
                </div>
            </div>
        </div>
    </section>
@stop

@section('css')
<style>
    @media screen and (max-width: 767px) {
        .responsive-iframe {
            height: 200px;
        }
    }

</style>
@stop