@extends('layoutsfrontend.master')

@section('content')
    <!-- Page Header Start -->
    <div class="page-header bg-section parallaxie">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-12">
                    <!-- Page Header Box Start -->
                    <div class="page-header-box">
                        <h1 class="text-anime-style-3" data-cursor="-opaque">Our Doctors</h1>
                        <nav class="wow fadeInUp">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="/">home</a></li>
                                <li class="breadcrumb-item active">Doctors</li>
                            </ol>
                        </nav>
                    </div>
                    <!-- Page Header Box End -->
                </div>
            </div>
        </div>
    </div>
    <!-- Page Header End -->

    <!-- Page Team Single Start -->
    <div class="all_doctors">
        <div class="container">
            <div class="row">
                <div class="col-lg-6">
                    <!-- Section Title Start -->
                    <div class="section-title">
                        <h3 class="wow fadeInUp">Our Doctors</h3>
                        <h2 class="text-anime-style-3" data-cursor="-opaque">Meet Our Amazing Doctors</h2>
                    </div>
                    <!-- Section Title End -->
                </div>
                <div class="col-lg-6">
                    <p class="wow fadeInUp" data-wow-delay="0.2s">At Sunrise Hospital, our team of dedicated medical professionals is committed to providing world-class healthcare with compassion and excellence. Each member of our medical staff brings extensive experience and specialized expertise across various fields of medicine.</p>
                </div>
            </div>
            <div class="row">
                @foreach($doctors as $doctor)
                <div class="col-xl-3 col-md-4 col-sm-6">
                    <div class="doctors-item-content">
                        <div class="doctor_image">
                            <div class="doctors_buttons">
                                <ul>
                                    <li><a href="#">Book an Appointment</a></li>
                                    <li><a href="{{ route('frontend.doctor.detail', $doctor->slug) }}">Profile</a></li>
                                </ul>
                            </div>
                            @php
                                $gallery = $doctor->galleries($categoryId)->first();
                                $imagePath = $gallery ? asset('storage/uploads/gallery/' . $gallery->filename) : asset('assets/img/thumbnail-default.jpg');
                            @endphp
                            <img src="{{ $imagePath }}" alt="{{ $doctor->name }}">
                        </div>
                        <div class="doctor_content">
                            <h4>{{ $doctor->name }}</h4>
                            <p>{{ $doctor->designation }}</p>
                          
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
            
            <div class="row mt-4">
                <div class="col-12 d-flex justify-content-center">
                    {{ $doctors->links() }}
                </div>
            </div>
        </div>
    </div>
    <!-- Page Team Single End -->
@endsection