@extends('web_site.layouts.master')

@section('content')

    <section class="breadcumb-wrapper" data-bg-src="{{ asset('assets_web/img/breadcurmb1.webp') }}">
        <div class="container">
            <h1 class="breadcumb-title">{{ trans('site.nav.doctors') }}</h1>
        </div>
    </section>

    <section class="testimonial-section-two space bck">
        <div class="container">
            @if ($specialties->isEmpty())
                <p class="text-center">{{ trans('site.common.no_records') }}</p>
            @else
                <ul class="nav nav-tabs" id="myTab" role="tablist">
                    @foreach ($specialties as $specialty)
                        <li class="nav-item" role="presentation">
                            <button class="nav-link {{ $specialty->id === $activeSpecialtyId ? 'active' : '' }}"
                                    id="serv{{ $specialty->id }}-tab"
                                    data-bs-toggle="tab"
                                    data-bs-target="#serv{{ $specialty->id }}"
                                    data-specialty-id="{{ $specialty->id }}"
                                    type="button"
                                    role="tab"
                                    aria-controls="serv{{ $specialty->id }}"
                                    aria-selected="{{ $specialty->id === $activeSpecialtyId ? 'true' : 'false' }}">
                                @if ($specialty->iconUrl())
                                    <span class="spec-icon">
                                        <img src="{{ $specialty->iconUrl() }}" class="imgspec" loading="lazy" alt="">
                                    </span>
                                @endif
                                <span>{{ $specialty->name }}</span>
                            </button>
                        </li>
                    @endforeach
                </ul>

                <div class="tab-content" id="myTabContent">
                    @foreach ($specialties as $specialty)
                        <div class="tab-pane fade {{ $specialty->id === $activeSpecialtyId ? 'show active' : '' }}" id="serv{{ $specialty->id }}" role="tabpanel" aria-labelledby="serv{{ $specialty->id }}-tab">
                            <div class="row">
                                @foreach ($doctorsBySpecialty->get($specialty->id, collect()) as $doctor)
                                    <div class="col-md-6 col-lg-3 mb-4">
                                        @include('web_site.partials.doctor-card', ['doctor' => $doctor])
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endforeach
                </div>
            @endif
        </div>
    </section>

@endsection

@section('js')
    <script>
        // Keep ?specialty_id= in the address bar so the selected tab survives reloads and can be shared.
        document.querySelectorAll('#myTab [data-specialty-id]').forEach(function (tab) {
            tab.addEventListener('shown.bs.tab', function () {
                var url = new URL(window.location.href);
                url.searchParams.set('specialty_id', tab.dataset.specialtyId);
                window.history.replaceState(null, '', url);
            });
        });
    </script>
@endsection