@extends('frontend.layouts.app')

@section('title', 'Our Experts - I Am Happy Healthcare Platform')

@section('content')
    <!--Page Title-->

    <section class="page-title" style="background-image:url({{ asset('img/PhotoRoom1.webp') }});">

        <div class="auto-container">

            <h1 class="text-dark">Our Experts</h1>

            <ul class="bread-crumb clearfix">

                <li><a href="{{ route('home') }}" class="text-dark">Home</a></li>

                <li class="text-dark">Our Experts</li>

            </ul>

        </div>

    </section>

    <!--End Page Title-->

    <main>

        <!-- Speakers Section -->
        <section class="speakers-section-three">
            <div class="auto-container">
                <div class="sec-title text-center">
                    <span class="title">Counsellors</span>
                    <h2>Our Experts</h2>
                </div>

                <div class="row">
                    @foreach ($counsellors as $counsellor)
                        <!-- Speaker Block -->
                        <div class="speaker-block-three col-xl-3 col-lg-4 col-md-6 col-sm-12 wow fadeInUp">
                            <div class="inner-box">
                                <div class="image-box">
                                    <figure class="image">
                                        <a href="{{ route('counsellor.details', $counsellor->id) }}">
                                            <img src="{{ $counsellor->display_image_url }}"
                                                alt="{{ $counsellor->name ?? trim(($counsellor->first_name ?? '') . ' ' . ($counsellor->last_name ?? '')) ?: 'Counsellor' }}"
                                                class="img-fluid"></a>
                                    </figure>
                                </div>
                                <div class="info-box">
                                    <h4 class="name"><a
                                            href="{{ route('counsellor.details', $counsellor->id) }}">{{ $counsellor->first_name . ' ' . $counsellor->last_name }}</a>
                                    </h4>
                                    <span class="designation">{{ $counsellor->role ?? 'Counsellor' }}</span>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </section>
        <!-- End Speakers Section -->
    </main>
@endsection