@extends('patient.layouts.app')
@section('title','البحث عن طبيب')
@section('tb-sub','ابحث واحجز موعدك')

@push('styles')
<style>
/* sticky داخل .scroll — top:0 يطابق أعلى منطقة التمرير (تحت الشريط العلوي) */
.filter-bar{
    background:#fff;
    box-shadow:var(--sh);
    position:sticky;
    top:0;
    z-index:50;
    padding:.65rem 1rem .75rem;
    margin:0 0 .35rem;
}
.search-inp{
    display:flex;align-items:center;gap:.55rem;
    background:var(--bg);border-radius:50px;
    padding:.55rem 1rem;margin-bottom:.55rem;
    border:1.5px solid var(--cM);
}
.search-inp input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-size:.86rem;color:var(--t1)}
.chips-row{display:flex;gap:.45rem;overflow-x:auto;scrollbar-width:none;padding:.15rem 0 .05rem;-webkit-overflow-scrolling:touch}
.chips-row::-webkit-scrollbar{display:none}
.chip{
    flex-shrink:0;padding:.38rem .9rem;border-radius:20px;
    font-size:.72rem;font-weight:700;cursor:pointer;
    border:1.5px solid #e5e7eb;background:#fff;color:var(--t2);
    text-decoration:none;transition:all .15s;white-space:nowrap;
}
.chip.on{background:var(--c1);border-color:var(--c1);color:#fff}
.chip.city-on{background:var(--cM);border-color:var(--c1);color:var(--c1)}

.doc-card{
    margin:0 1rem .75rem;
    max-width:100%;
    background:#fff;border-radius:var(--r);
    box-shadow:var(--sh);
    display:flex;
    align-items:flex-start;
    gap:.75rem;
    padding:1rem;
    text-decoration:none;color:inherit;
    transition:transform .12s, box-shadow .12s;
}
.doc-card:active{transform:scale(.985)}
.doc-av{
    width:56px;height:56px;border-radius:14px;
    background:linear-gradient(145deg,var(--c1),var(--c2));
    display:flex;align-items:center;justify-content:center;
    font-size:1.2rem;font-weight:800;color:#fff;
    flex-shrink:0;overflow:hidden;
}
.doc-av img{width:100%;height:100%;object-fit:cover}
.doc-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:.28rem}
.doc-head{display:flex;align-items:center;flex-wrap:wrap;gap:.35rem .5rem}
.doc-name{font-size:.9rem;font-weight:800;color:var(--t1);line-height:1.25;word-break:break-word}
.doc-spec{font-size:.74rem;color:var(--t2);line-height:1.35}
.doc-rating{display:flex;align-items:center;flex-wrap:wrap;gap:.35rem;font-size:.7rem;color:var(--t3)}
.doc-meta{
    display:flex;flex-wrap:wrap;align-items:center;
    gap:.35rem .65rem;
    font-size:.68rem;color:var(--t3);
    line-height:1.45;
    margin-top:.1rem;
}
.doc-meta span{display:inline-flex;align-items:center;gap:.2rem}
.doc-fee{color:var(--c1)!important;font-weight:700!important;font-size:.72rem!important}
.doc-aside{
    flex-shrink:0;
    display:flex;flex-direction:column;
    align-items:flex-end;
    justify-content:space-between;
    align-self:stretch;
    min-height:56px;
    padding-top:2px;
}
.doc-qbadge{
    background:var(--cM);color:var(--c1);
    font-size:.6rem;font-weight:800;
    padding:3px 8px;border-radius:20px;white-space:nowrap;
}

.empty-state{text-align:center;padding:3rem 1rem;color:var(--t3)}
.empty-state i{font-size:3rem;display:block;margin-bottom:.8rem;opacity:.4}
.empty-state p{font-size:.88rem}
.docs-count{padding:.5rem 1rem .25rem;font-size:.78rem;color:var(--t3)}
.docs-pagination{padding:.75rem 1rem 1rem}
</style>
@endpush

@section('content')

{{-- ══ Filter Bar ══ --}}
<div class="filter-bar">
    <form method="GET" action="{{ route('patient.doctors.index') }}" id="fForm">
        <div class="search-inp">
            <i class="bi bi-search" style="color:var(--c1)"></i>
            <input type="text" name="search" value="{{ request('search') }}" placeholder="اسم الطبيب، التخصص، العيادة...">
            @if(request('city'))<input type="hidden" name="city" value="{{ request('city') }}">@endif
            @if(request('specialty'))<input type="hidden" name="specialty" value="{{ request('specialty') }}">@endif
        </div>

        {{-- فلتر المحافظات --}}
        <div class="chips-row mb-2">
            <a href="{{ route('patient.doctors.index', array_merge(request()->except('city'),[])) }}"
               class="chip {{ !request('city')?'on':'' }}">📍 كل المناطق</a>
            @if($patientCity)
            <a href="{{ route('patient.doctors.index', array_merge(request()->except('city'),['city'=>$patientCity])) }}"
               class="chip {{ request('city')===$patientCity?'city-on':'' }}"
               style="{{ request('city')!==$patientCity?'border-color:var(--c1);color:var(--c1)':'' }}">
                ⭐ {{ $patientCity }} (منطقتي)
            </a>
            @endif
            @foreach($cities->reject(fn($c)=>$c===$patientCity) as $city)
            <a href="{{ route('patient.doctors.index', array_merge(request()->except('city'),['city'=>$city])) }}"
               class="chip {{ request('city')===$city?'on':'' }}">{{ $city }}</a>
            @endforeach
        </div>

        {{-- فلتر التخصصات --}}
        <div class="chips-row">
            <a href="{{ route('patient.doctors.index', array_merge(request()->except('specialty'),[])) }}"
               class="chip {{ !request('specialty')?'on':'' }}">الكل</a>
            @foreach($specialties as $s)
            <a href="{{ route('patient.doctors.index', array_merge(request()->except('specialty'),['specialty'=>$s])) }}"
               class="chip {{ request('specialty')===$s?'on':'' }}">{{ $s }}</a>
            @endforeach
        </div>
    </form>
</div>

{{-- ══ نتائج + عدد ══ --}}
<div class="docs-count">
    تم العثور على <strong style="color:var(--t1)">{{ $doctors->total() }}</strong> طبيب
    @if(request('city')) في <strong style="color:var(--c1)">{{ request('city') }}</strong>@endif
    @if(request('specialty')) · <strong style="color:var(--c1)">{{ request('specialty') }}</strong>@endif
</div>

{{-- ══ قائمة الأطباء ══ --}}
@forelse($doctors as $doc)
<a href="{{ route('patient.doctors.show',$doc->id) }}" class="doc-card">
    <div class="doc-av">
        @if($doc->logo)<img src="{{ asset('storage/'.$doc->logo) }}" alt="">
        @else{{ strtoupper(mb_substr($doc->user->name, 0, 1)) }}@endif
    </div>
    <div class="doc-body">
        <div class="doc-head">
            <span class="doc-name">د. {{ $doc->user->name }}</span>
            @if($doc->is_verified)<i class="bi bi-patch-check-fill" style="color:#059669;font-size:.85rem;flex-shrink:0" title="موثّق"></i>@endif
        </div>
        <div class="doc-spec">{{ $doc->specialty }}
            @if($doc->experience_years) · {{ $doc->experience_years }} سنة خبرة @endif
        </div>
        <div class="doc-rating">
            <span style="color:#f59e0b;letter-spacing:-1px">{{ str_repeat('★', min(5, (int) round($doc->rating))) }}{{ str_repeat('☆', max(0, 5 - (int) round($doc->rating))) }}</span>
            <span>{{ number_format($doc->rating, 1) }} <span style="color:var(--t3)">({{ $doc->total_reviews }})</span></span>
        </div>
        <div class="doc-meta">
            @if($doc->city)<span>📍 {{ $doc->city }}</span>@endif
            @if($doc->clinic_name)<span>🏥 {{ $doc->clinic_name }}</span>@endif
            @if($doc->consultation_fee)<span class="doc-fee">💰 {{ \App\Support\Money::iqd($doc->consultation_fee, 0) }}</span>@endif
        </div>
    </div>
    <div class="doc-aside">
        @php $qn=\App\Models\Queue::where('doctor_id',$doc->id)->today()->whereIn('status',['waiting','in_progress'])->count() @endphp
        @if($qn>0)
            <span class="doc-qbadge">{{ $qn }} في الطابور</span>
        @else
            <span></span>
        @endif
        <i class="bi bi-chevron-left" style="color:var(--t3);font-size:1rem;opacity:.65"></i>
    </div>
</a>
@empty
<div class="empty-state">
    <i class="bi bi-person-x"></i>
    <p>لم يتم العثور على أطباء</p>
    <a href="{{ route('patient.doctors.index') }}" class="btn-sm" style="margin:0 auto;text-decoration:none;display:inline-flex">إعادة ضبط الفلاتر</a>
</div>
@endforelse

@if($doctors->hasPages())
<div class="docs-pagination">{{ $doctors->withQueryString()->links('pagination::bootstrap-5') }}</div>
@endif
@endsection