@extends('front.layouts.app')
@section('title', 'Doktori')

@section('content')
<!-- start page title -->
<!-- start page title -->
<section class="p-0 pt-2 ipad-top-space-margin page-title-big-typography bg-gradient-blue-transparent-second ">
    <div class="container">
        <div class="row align-items-center justify-content-center h-350px">
            <div class="col-auto text-center page-title-double-large">
                <h1 class="alt-font text-dark-gray fw-700 ls-minus-1px mb-0">Doktori</h1>
            </div>

        </div>
    </div>
</section>
<!-- end page title -->
            <!-- end page title -->
            <!-- start section -->
            <section class="pt-0">
                <div class="container">
                    <div class="row align-items-center justify-content-center">
                        <div class="col-lg-5 col-md-10 md-mb-50px text-center position-relative">
                            <img src="https://placehold.co/750x940" alt="" class="border-radius-6px w-100">

                        </div>
                        <div class="col-xl-5 col-lg-6 offset-lg-1 text-center text-lg-start" data-anime='{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }'>
                            <h3 class="fw-800 text-dark-gray ls-minus-2px mb-5px">Dr Ana Miholjčić</h3>
                            <span class="alt-font fs-18 mb-20px d-block text-dark-gray fw-500">Direktor Opšte bolnice Analife</span>
                            <p class="mb-15px">Kada imate doktore i osoblje koje ima Opšta bolnica Analife, onda nije teško biti direktor. Njena misija i vizija je „moja bolnica – bolnica Analife“.</p>
                            <!-- start list style -->
                            <ul class="p-0 m-0 list-style-01 mb-25px fs-18">
                                <li class="border-color-extra-medium-gray pt-15px pb-15px"><span class="text-dark-gray fw-700">Phone:</span> <a href="tel:12345678910">+1 234 567 8910</a></li>
                                <li class="border-color-extra-medium-gray pt-15px pb-15px"><span class="text-dark-gray fw-700">Office:</span> <a href="tel:12345678910">+1 234 567 8910</a></li>
                                <li class="pt-15px pb-15px"><span class="text-dark-gray fw-700">Email:</span> <a href="mailto:bolnica@analife.rs" class="text-base-color text-decoration-line-bottom">bolnica@analife.rs</a></li>
                            </ul>

                        </div>
                    </div>
                </div>
            </section>
            <!-- end section -->
            <!-- start section -->
            <section class="bg-light-turquoise-blue border-radius-8px lg-no-border-radius overlap-height position-relative pb-0">
                <div class="position-absolute top-10px lg-top-minus-80px left-minus-80px lg-left-15px opacity-1 w-350px z-index-1 d-none d-lg-inline-block"><img src="images/demo-medical-pattern.svg" alt="" data-bottom-top="transform: translateY(-50px)" data-top-bottom="transform: translateY(50px)"></div>
                <div class="container overlap-gap-section position-relative z-index-1">
                    <div class="row mb-4">
                        <div class="col text-center" data-anime='{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }'>
                            <h2 class="fw-800 text-dark-gray ls-minus-2px alt-font">Upoznajte naše doktore</h2>
                        </div>
                    </div>
                    <div class="row row-cols-1 row-cols-xl-4 row-cols-lg-3 row-cols-sm-2 justify-content-center" data-anime='{"el": "childs", "translateY": [15, 0], "perspective": [1200,1200], "scale": [1.05, 1], "rotateX": [30, 0], "opacity": [0,1], "duration": 600, "delay": 100, "staggervalue": 100, "easing": "easeOutQuad" }'>




                        @foreach($doctors as $doctor)
                        <!-- start team member item -->
                        <div class="col team-style-06 mb-30px">
                            <div class="d-flex flex-column p-10px pb-20px lg-p-20px text-center border-radius-6px bg-white box-shadow-quadruple-large position-relative">
                                <div class="position-relative">
                                <a href="#" class="d-inline-block position-relative">
                                    <!-- @if($doctor->image)
                                    <img src="{{ asset('storage/' . $doctor->image) }}" class="rounded-circle w-150px h-150px mb-20px" alt="{{ $doctor->name }}">
                                    @else
                                    <img class="rounded-circle w-150px h-150px mb-20px" src="https://placehold.co/200x200" alt="">
                                    @endif -->
                                </div>
                                <a href="#" class="text-dark-gray fs-18 fw-700 mb-5px">{{ $doctor->name }}</a>
                                <p class="w-90 mx-auto lh-28">{{ $doctor->title }}</p>


                                <div class="text-center elements-social social-icon-style-02 border-top border-color-light-medium-gray w-100 pt-15px">
                                  <a href="{{ route('doctor.show', $doctor->slug) }}" class="btn btn-base-color btn-box-shadow btn-small btn-switch-text btn-rounded">
                                      <span>
                                          <span class="btn-double-text" data-text="Saznaj više">Saznaj više</span>
                                      </span>
                                  </a>
                               </div>

                            </div>
                        </div>
                        <!-- end team member item -->
                         @endforeach

                    </div>

                </div>
            </section>
            <!-- end section -->

@endsection