@extends('layouts.admin')

@section('page_kicker', 'Directory')
@section('page_title', 'Independent clinicians')

@section('content')
    <p class="mb-6 max-w-2xl text-sm leading-relaxed text-slate-600">Licensed independent doctors on Aim4Wellness. Secure messaging unlocks after you have an appointment or consultation with a clinician.</p>
    <div class="space-y-4">
        @forelse($doctors as $doc)
            <div class="admin-content-card transition hover:border-teal-100 hover:shadow-md">
                <div class="flex flex-wrap items-start justify-between gap-4">
                    <div class="min-w-0">
                        <p class="text-lg font-semibold tracking-tight text-slate-900">{{ $doc->user->name ?? 'Clinician' }}</p>
                        <p class="mt-1 text-sm font-medium text-teal-700">{{ $doc->specialization }}</p>
                        @if($doc->experience_years)
                            <p class="mt-1 text-xs text-slate-500">{{ $doc->experience_years }}+ years experience</p>
                        @endif
                        @if($doc->bio)
                            <p class="mt-3 text-sm leading-relaxed text-slate-600">{{ \Illuminate\Support\Str::limit($doc->bio, 220) }}</p>
                        @endif
                        <p class="mt-3 text-sm font-semibold text-slate-800">From {{ number_format((float) $doc->consultation_fee, 0) }} TZS <span class="font-normal text-slate-500">/ session</span></p>
                    </div>
                    @if($doc->user)
                        <a href="{{ route('patient.telehealth.book', ['doctor' => $doc->user_id]) }}" class="admin-btn-primary shrink-0 self-start text-xs">Request visit</a>
                    @endif
                </div>
            </div>
        @empty
            <div class="admin-content-card py-12 text-center text-sm text-slate-500">No clinicians listed yet.</div>
        @endforelse
    </div>
@endsection