{{-- appointments/index.blade.php --}}
@extends('patient.layouts.app')
@section('title','مواعيدي')

@section('content')

@if($upcoming->isNotEmpty())
<div class="p-card-title" style="font-size:.72rem;color:#94a3b8;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:.5rem">
    المواعيد القادمة
</div>
@foreach($upcoming as $appt)
<div class="p-card mb-2">
    <div class="d-flex align-items-center gap-3">
        <div class="appt-date-box">
            <div class="day">{{ $appt->appointment_date->format('d') }}</div>
            <div class="mon">{{ $appt->appointment_date->locale('ar')->isoFormat('MMM') }}</div>
        </div>
        <div class="flex-grow-1">
            <div class="fw-bold">د. {{ $appt->doctor->user->name }}</div>
            <div style="font-size:.78rem;color:#64748b">{{ $appt->doctor->specialty }}</div>
            <div style="font-size:.75rem;color:#94a3b8">🕐 {{ $appt->appointment_time }}</div>
            @if($appt->reason)<div style="font-size:.75rem;color:#94a3b8">📝 {{ $appt->reason }}</div>@endif
        </div>
        <div class="d-flex flex-column align-items-end gap-1">
            @if($appt->status==='confirmed')
                <span class="badge" style="background:#d1fae5;color:#065f46">مؤكد</span>
            @else
                <span class="badge" style="background:#fef3c7;color:#92400e">بانتظار</span>
            @endif
            @if(in_array($appt->status,['pending','confirmed']))
            <form method="POST" action="{{ route('patient.appointments.cancel',$appt->id) }}">
                @csrf @method('DELETE')
                <button type="submit" style="background:none;border:none;color:#ef4444;font-size:.72rem;cursor:pointer"
                        onclick="return confirm('إلغاء الموعد؟')">إلغاء</button>
            </form>
            @endif
        </div>
    </div>
</div>
@endforeach
@endif

@if($past->isNotEmpty())
<div class="p-card-title" style="font-size:.72rem;color:#94a3b8;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin:.8rem 0 .5rem">
    المواعيد السابقة
</div>
@foreach($past as $appt)
<div style="background:#fff;border-radius:12px;padding:.8rem 1rem;margin-bottom:.5rem;display:flex;align-items:center;gap:12px;box-shadow:0 1px 4px rgba(0,0,0,.06)">
    <div style="font-size:.82rem;flex-grow:1">
        <div class="fw-semibold">د. {{ $appt->doctor->user->name }}</div>
        <div style="font-size:.75rem;color:#94a3b8">{{ $appt->appointment_date->format('Y/m/d') }} · {{ $appt->appointment_time }}</div>
    </div>
    @php $statusMap=['completed'=>['#d1fae5','#065f46','منتهي'],'cancelled'=>['#fee2e2','#991b1b','ملغي'],'no_show'=>['#e5e7eb','#374151','لم يحضر']]; [$bg,$cl,$lb]=$statusMap[$appt->status]??['#e5e7eb','#374151',$appt->status]; @endphp
    <span class="badge" style="background:{{ $bg }};color:{{ $cl }}">{{ $lb }}</span>
</div>
@endforeach
@if($past->hasPages())
<div class="d-flex justify-content-center mt-2">{{ $past->links('pagination::bootstrap-5') }}</div>
@endif
@endif

@if($upcoming->isEmpty() && $past->isEmpty())
<div class="p-card text-center py-5 text-muted">
    <i class="bi bi-calendar-x fs-2 d-block mb-2"></i>
    <p>لا توجد مواعيد بعد</p>
    <a href="{{ route('patient.doctors.index') }}" class="btn-pat">
        <i class="bi bi-search me-1"></i>ابحث عن طبيب
    </a>
</div>
@endif
@endsection