@extends('patient.layouts.app')
@section('title','د. '.$doctor->user->name)
@section('tb-sub', $doctor->specialty)

@push('styles')
<style>
.hero{background:linear-gradient(180deg,var(--c1) 0%,var(--c2) 100%);padding:1.2rem 1rem 3rem;color:#fff;text-align:center}
.hero-av{width:80px;height:80px;border-radius:22px;background:rgba(255,255,255,.2);border:3px solid rgba(255,255,255,.4);display:flex;align-items:center;justify-content:center;font-size:2rem;color:#fff;margin:0 auto .8rem;overflow:hidden}
.hero-av img{width:100%;height:100%;object-fit:cover}
.hero h2{font-size:1.2rem;font-weight:800;margin-bottom:3px}
.hero p{font-size:.82rem;opacity:.85}

.floating-card{margin:-2rem 1rem 0;border-radius:var(--r);background:#fff;box-shadow:0 8px 30px rgba(0,0,0,.12);padding:1rem;margin-bottom:.8rem}

.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;text-align:center}
.info-box{background:var(--bg);border-radius:var(--rs);padding:.7rem .4rem}
.info-box .iv{font-size:1.2rem;font-weight:800;color:var(--c1)}
.info-box .il{font-size:.62rem;color:var(--t3)}

.action-bar{display:flex;gap:.6rem;padding:.5rem 1rem .8rem}

/* Gallery */
.gallery-row{display:flex;gap:.5rem;overflow-x:auto;padding:.2rem 1rem .7rem;scrollbar-width:none}
.gallery-row::-webkit-scrollbar{display:none}
.gal-item{width:110px;height:110px;border-radius:var(--rs);overflow:hidden;flex-shrink:0;background:var(--bg)}
.gal-item img{width:100%;height:100%;object-fit:cover}

/* Reviews */
.review-bar{display:flex;align-items:center;gap:.5rem;margin-bottom:4px}
.bar-track{flex:1;height:6px;border-radius:3px;background:#e5e7eb;overflow:hidden}
.bar-fill{height:100%;background:#f59e0b;border-radius:3px;transition:width .6s}

.review-card{margin:0 1rem .6rem;background:#fff;border-radius:var(--r);box-shadow:var(--sh);padding:1rem}
.rev-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.5rem}
.rev-av{width:34px;height:34px;border-radius:50%;background:var(--cM);display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700;color:var(--c1);flex-shrink:0}
.rev-name{font-weight:700;font-size:.85rem}
.rev-date{font-size:.68rem;color:var(--t3)}
.stars-lg{color:#f59e0b;font-size:1rem}
.stars-sm{color:#f59e0b;font-size:.8rem}

/* Star picker */
.star-pick{display:flex;gap:.3rem;font-size:2rem;cursor:pointer;justify-content:center;margin:.6rem 0}
.star-pick span{color:#e5e7eb;transition:color .1s;cursor:pointer}
.star-pick span.lit{color:#f59e0b}

/* Book form */
.time-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem;margin-top:.5rem}
.time-btn{border:1.5px solid #e5e7eb;border-radius:var(--rxs);padding:.45rem .3rem;text-align:center;font-size:.75rem;font-weight:600;cursor:pointer;background:#fff;transition:all .15s}
.time-btn.on,.time-btn:hover{border-color:var(--c1);background:var(--cL);color:var(--c1)}
</style>
@endpush

@section('content')

{{-- ══ Hero ══ --}}
<div class="hero">
    <div class="hero-av">
        @if($doctor->logo)<img src="{{ asset('storage/'.$doctor->logo) }}" alt="">
        @else {{ strtoupper(mb_substr($doctor->user->name,3,1)) }} @endif
    </div>
    <h2>د. {{ $doctor->user->name }}</h2>
    <p>{{ $doctor->specialty }}
        @if($doctor->experience_years) · خبرة {{ $doctor->experience_years }} سنة @endif
        @if($doctor->is_verified) · <i class="bi bi-patch-check-fill"></i> موثّق @endif
    </p>
    <div style="display:flex;justify-content:center;gap:.8rem;margin-top:.7rem;font-size:.78rem;opacity:.9">
        @if($doctor->city)<span>📍 {{ $doctor->city }}</span>@endif
        @if($doctor->phone)<span>📞 {{ $doctor->phone }}</span>@endif
        @if($doctor->consultation_fee)<span>💰 {{ \App\Support\Money::iqd($doctor->consultation_fee, 0) }}</span>@endif
    </div>
</div>

{{-- ══ بطاقة الإحصائيات ══ --}}
<div class="floating-card">
    <div class="info-grid">
        <div class="info-box">
            <div class="iv">{{ number_format($doctor->rating,1) }}</div>
            <div class="il">⭐ التقييم</div>
        </div>
        <div class="info-box">
            <div class="iv">{{ $doctor->total_reviews }}</div>
            <div class="il">تقييم</div>
        </div>
        <div class="info-box">
            <div class="iv" style="color:#059669">{{ $todayQueue }}</div>
            <div class="il">في الطابور</div>
        </div>
    </div>
</div>

{{-- ══ أزرار الإجراء ══ --}}
<div class="action-bar">
    @if($patientInQueue)
    <div class="btn" style="flex:1;justify-content:center;background:#059669">
        <i class="bi bi-check-circle-fill"></i> أنت في الطابور
    </div>
    @else
    <form method="POST" action="{{ route('patient.queue.join',$doctor->id) }}" style="flex:1">
        @csrf
        <button type="submit" class="btn" style="width:100%;justify-content:center">
            <i class="bi bi-person-plus"></i> انضم للطابور
        </button>
    </form>
    @endif
    <button class="btn-o" onclick="document.getElementById('bookSection').scrollIntoView({behavior:'smooth'})">
        <i class="bi bi-calendar-plus"></i> حجز موعد
    </button>
</div>

{{-- ══ معلومات العيادة ══ --}}
<div style="margin:0 1rem .7rem;background:#fff;border-radius:var(--r);box-shadow:var(--sh);padding:1rem">
    @if($doctor->clinic_name)
    <div style="display:flex;align-items:center;gap:.6rem;margin-bottom:.6rem">
        <span style="font-size:1.1rem">🏥</span>
        <div><div style="font-weight:700;font-size:.88rem">{{ $doctor->clinic_name }}</div>
        @if($doctor->clinic_address)<div style="font-size:.75rem;color:var(--t2)">{{ $doctor->clinic_address }}</div>@endif
        </div>
    </div>
    @endif
    @if($doctor->bio)
    <div style="font-size:.82rem;color:var(--t2);line-height:1.6;border-top:1px solid var(--bg);padding-top:.6rem">{{ $doctor->bio }}</div>
    @endif
    @if($doctor->prescription_header)
    <div style="font-size:.78rem;color:var(--c1);font-weight:600;margin-top:.4rem">{{ $doctor->prescription_header }}</div>
    @endif
</div>

{{-- ══ خريطة الموقع ══ --}}
@if($doctor->latitude && $doctor->longitude)
<div style="margin:0 1rem .7rem">
    <div style="border-radius:var(--r);overflow:hidden;height:170px">
        <iframe src="https://maps.google.com/maps?q={{ $doctor->latitude }},{{ $doctor->longitude }}&z=15&output=embed"
                width="100%" height="170" style="border:none" loading="lazy"></iframe>
    </div>
    <a href="https://maps.google.com/?q={{ $doctor->latitude }},{{ $doctor->longitude }}"
       target="_blank" class="btn-o w-100 justify-content-center mt-2"
       style="width:100%;justify-content:center;text-align:center;text-decoration:none">
        <i class="bi bi-map"></i> فتح الخريطة
    </a>
</div>
@endif

{{-- ══ صور الطبيب / العيادة ══ --}}
@if($doctor->media->isNotEmpty())
<div class="sh"><span class="st">صور العيادة</span></div>
<div class="gallery-row">
    @foreach($doctor->media as $media)
    @if($media->type === 'image')
    <div class="gal-item">
        <img src="{{ asset('storage/'.$media->file_path) }}" alt="{{ $media->title }}">
    </div>
    @endif
    @endforeach
</div>
@endif

{{-- ══ ملخص التقييمات ══ --}}
<div class="sh"><span class="st">التقييمات</span><span style="font-size:.78rem;color:var(--t3)">{{ $doctor->total_reviews }} تقييم</span></div>
<div style="margin:0 1rem .7rem;background:#fff;border-radius:var(--r);box-shadow:var(--sh);padding:1rem">
    <div style="display:flex;align-items:center;gap:1rem;margin-bottom:.8rem">
        <div style="text-align:center">
            <div style="font-size:2.5rem;font-weight:900;color:var(--c1)">{{ number_format($doctor->rating,1) }}</div>
            <div style="color:#f59e0b;font-size:1rem">{{ str_repeat('★',round($doctor->rating)) }}{{ str_repeat('☆',5-round($doctor->rating)) }}</div>
            <div style="font-size:.68rem;color:var(--t3)">من 5</div>
        </div>
        <div style="flex:1">
            @for($i=5;$i>=1;$i--)
            <div class="review-bar">
                <span style="font-size:.7rem;color:var(--t3);width:12px">{{ $i }}</span>
                <div class="bar-track"><div class="bar-fill" style="width:{{ $ratingBreakdown[$i]['pct'] }}%"></div></div>
                <span style="font-size:.68rem;color:var(--t3);width:24px">{{ $ratingBreakdown[$i]['count'] }}</span>
            </div>
            @endfor
        </div>
    </div>
</div>

{{-- ══ التقييمات ══ --}}
@foreach($doctor->reviews as $rev)
<div class="review-card">
    <div class="rev-head">
        <div class="rev-av">{{ $rev->is_anonymous ? '?' : strtoupper(mb_substr($rev->patient->user->name,0,1)) }}</div>
        <div style="flex:1">
            <div class="rev-name">{{ $rev->is_anonymous ? 'مريض مجهول' : $rev->patient->user->name }}</div>
            <div class="rev-date">{{ $rev->created_at->diffForHumans() }}</div>
        </div>
        <div class="stars-sm">{{ str_repeat('★',$rev->rating) }}{{ str_repeat('☆',5-$rev->rating) }}</div>
    </div>
    @if($rev->comment)
    <div style="font-size:.83rem;color:var(--t2);line-height:1.6">{{ $rev->comment }}</div>
    @endif
</div>
@endforeach

{{-- ══ أضف تقييمك ══ --}}
<div style="margin:0 1rem .7rem;background:#fff;border-radius:var(--r);box-shadow:var(--sh);padding:1rem">
    @if($myReview)
    <div style="text-align:center;padding:.5rem 0">
        <div style="font-size:1rem;font-weight:700;color:#059669;margin-bottom:.3rem">✅ شكراً على تقييمك!</div>
        <div class="stars-lg">{{ str_repeat('★',$myReview->rating) }}{{ str_repeat('☆',5-$myReview->rating) }}</div>
        @if($myReview->comment)<div style="font-size:.8rem;color:var(--t2);margin-top:.4rem">{{ $myReview->comment }}</div>@endif
    </div>
    @else
    <div style="font-size:.88rem;font-weight:700;margin-bottom:.6rem">⭐ أضف تقييمك</div>
    <form method="POST" action="{{ route('patient.doctors.review',$doctor->id) }}">
        @csrf
        <div class="star-pick" id="starPick">
            @for($i=1;$i<=5;$i++)
            <span data-v="{{ $i }}" onclick="setStar({{ $i }})">★</span>
            @endfor
        </div>
        <input type="hidden" name="rating" id="ratingInput" value="0">
        <textarea name="comment" rows="2"
                  style="width:100%;border:1.5px solid #e5e7eb;border-radius:var(--rs);padding:.6rem .8rem;font-size:.85rem;resize:none;outline:none;margin-bottom:.5rem"
                  placeholder="رأيك يفيد المرضى الآخرين... (اختياري)"
                  onfocus="this.style.borderColor='var(--c1)'"
                  onblur="this.style.borderColor='#e5e7eb'"></textarea>
        <div style="display:flex;align-items:center;justify-content:space-between">
            <label style="display:flex;align-items:center;gap:6px;font-size:.78rem;color:var(--t2);cursor:pointer">
                <input type="checkbox" name="is_anonymous" value="1" style="accent-color:var(--c1)">
                تقييم مجهول
            </label>
            <button type="submit" class="btn-sm" id="rSubmit">إرسال التقييم</button>
        </div>
    </form>
    @endif
</div>

{{-- ══ حجز موعد ══ --}}
<div id="bookSection" style="margin:0 1rem 1rem;background:#fff;border-radius:var(--r);box-shadow:var(--sh);padding:1rem">
    <div style="font-size:.9rem;font-weight:700;margin-bottom:.8rem">📅 حجز موعد مسبق</div>
    <form method="POST" action="{{ route('patient.appointments.store') }}">
        @csrf
        <input type="hidden" name="doctor_id" value="{{ $doctor->id }}">
        <div style="margin-bottom:.8rem">
            <label style="font-size:.75rem;font-weight:700;color:var(--t2);display:block;margin-bottom:.3rem">تاريخ الموعد</label>
            <input type="date" name="appointment_date"
                   style="width:100%;border:1.5px solid #e5e7eb;border-radius:var(--rs);padding:.65rem .9rem;font-size:.88rem;outline:none"
                   min="{{ date('Y-m-d') }}" required
                   onfocus="this.style.borderColor='var(--c1)'"
                   onblur="this.style.borderColor='#e5e7eb'">
        </div>
        <div style="margin-bottom:.8rem">
            <label style="font-size:.75rem;font-weight:700;color:var(--t2);display:block;margin-bottom:.3rem">اختر الوقت</label>
            <div class="time-grid" id="timeGrid">
                @foreach(['08:00','08:30','09:00','09:30','10:00','10:30','11:00','11:30','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00'] as $t)
                <div class="time-btn" onclick="pickTime('{{ $t }}',this)">{{ $t }}</div>
                @endforeach
            </div>
            <input type="hidden" name="appointment_time" id="timeVal" required>
        </div>
        <div style="margin-bottom:.8rem">
            <label style="font-size:.75rem;font-weight:700;color:var(--t2);display:block;margin-bottom:.3rem">سبب الزيارة (اختياري)</label>
            <textarea name="reason" rows="2"
                      style="width:100%;border:1.5px solid #e5e7eb;border-radius:var(--rs);padding:.65rem .9rem;font-size:.85rem;resize:none;outline:none"
                      placeholder="اذكر سبب زيارتك..."
                      onfocus="this.style.borderColor='var(--c1)'"
                      onblur="this.style.borderColor='#e5e7eb'"></textarea>
        </div>
        <button type="submit" class="btn" style="width:100%;justify-content:center">
            <i class="bi bi-calendar-check"></i> تأكيد الحجز
        </button>
    </form>
</div>

@endsection

@push('scripts')
<script>
// ── Stars ──
function setStar(v){
    document.getElementById('ratingInput').value=v;
    document.querySelectorAll('#starPick span').forEach((s,i)=>s.classList.toggle('lit',i<v));
    document.getElementById('rSubmit').disabled=(v===0);
}
setStar(0);

// ── Time picker ──
function pickTime(t,el){
    document.querySelectorAll('.time-btn').forEach(b=>b.classList.remove('on'));
    el.classList.add('on');
    document.getElementById('timeVal').value=t;
}
</script>
@endpush