@extends('admin.layouts.app')
@section('title', 'المواعيد')
@section('page-title', 'إدارة المواعيد')

@section('content')

<div class="card mb-3">
    <div class="card-body py-2">
        <form method="GET" class="row g-2 align-items-center">
            <div class="col-md-3">
                <div class="input-group input-group-sm">
                    <span class="input-group-text"><i class="bi bi-search"></i></span>
                    <input type="text" name="search" value="{{ request('search') }}"
                           class="form-control" placeholder="اسم الطبيب أو المريض...">
                </div>
            </div>
            <div class="col-md-2">
                <select name="status" class="form-select form-select-sm">
                    <option value="">كل الحالات</option>
                    <option value="pending"     {{ request('status')=='pending'     ? 'selected':'' }}>بانتظار التأكيد</option>
                    <option value="confirmed"   {{ request('status')=='confirmed'   ? 'selected':'' }}>مؤكد</option>
                    <option value="completed"   {{ request('status')=='completed'   ? 'selected':'' }}>منتهي</option>
                    <option value="cancelled"   {{ request('status')=='cancelled'   ? 'selected':'' }}>ملغي</option>
                </select>
            </div>
            <div class="col-md-2">
                <input type="date" name="date" value="{{ request('date') }}"
                       class="form-control form-control-sm">
            </div>
            <div class="col-auto">
                <button class="btn btn-sm btn-primary px-3"><i class="bi bi-funnel"></i> تصفية</button>
                <a href="{{ route('admin.appointments.index') }}" class="btn btn-sm btn-outline-secondary">
                    <i class="bi bi-x-lg"></i>
                </a>
            </div>
        </form>
    </div>
</div>

<div class="card table-card">
    <div class="card-header d-flex align-items-center justify-content-between">
        <span><i class="bi bi-calendar-check me-2"></i>قائمة المواعيد</span>
        <span class="badge bg-secondary">{{ $appointments->total() }} موعد</span>
    </div>
    <div class="table-responsive">
        <table class="table mb-0">
            <thead>
                <tr>
                    <th>#</th>
                    <th>المريض</th>
                    <th>الطبيب</th>
                    <th>التاريخ والوقت</th>
                    <th>النوع</th>
                    <th>الحالة</th>
                    <th>الأجرة</th>
                    <th>عرض</th>
                </tr>
            </thead>
            <tbody>
                @forelse($appointments as $appt)
                <tr>
                    <td class="text-muted small">{{ $appt->id }}</td>
                    <td>
                        <div class="fw-semibold">{{ $appt->patient->user->name }}</div>
                    </td>
                    <td>
                        <div>{{ $appt->doctor->user->name }}</div>
                        <small class="text-muted">{{ $appt->doctor->specialty }}</small>
                    </td>
                    <td>
                        <div>{{ $appt->appointment_date->format('Y/m/d') }}</div>
                        <small class="text-muted">{{ $appt->appointment_time }}</small>
                    </td>
                    <td>
                        @if($appt->type === 'in_person')
                            <span class="badge bg-info bg-opacity-10 text-info">حضوري</span>
                        @else
                            <span class="badge bg-purple bg-opacity-10 text-purple">أونلاين</span>
                        @endif
                    </td>
                    <td>
                        @php
                            $statusMap = [
                                'pending'     => ['badge-pending',  'بانتظار التأكيد'],
                                'confirmed'   => ['bg-info text-white',    'مؤكد'],
                                'in_progress' => ['bg-warning text-dark',  'قيد الفحص'],
                                'completed'   => ['badge-active',   'منتهي'],
                                'cancelled'   => ['badge-suspended','ملغي'],
                                'no_show'     => ['bg-secondary text-white','لم يحضر'],
                            ];
                            [$cls, $label] = $statusMap[$appt->status] ?? ['bg-secondary','—'];
                        @endphp
                        <span class="badge {{ $cls }}">{{ $label }}</span>
                    </td>
                    <td>
                        @if($appt->fee)
                            ${{ number_format($appt->fee, 2) }}
                            @if($appt->is_paid)
                                <i class="bi bi-check-circle-fill text-success ms-1" title="مدفوع"></i>
                            @endif
                        @else
                            <span class="text-muted">—</span>
                        @endif
                    </td>
                    <td>
                        <a href="{{ route('admin.appointments.show', $appt->id) }}"
                           class="btn btn-sm btn-outline-info">
                            <i class="bi bi-eye"></i>
                        </a>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="8" class="text-center text-muted py-5">
                        <i class="bi bi-calendar-x fs-2 d-block mb-2"></i>
                        لا توجد مواعيد
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if($appointments->hasPages())
    <div class="card-footer bg-transparent d-flex justify-content-between align-items-center">
        <small class="text-muted">
            عرض {{ $appointments->firstItem() }}–{{ $appointments->lastItem() }} من {{ $appointments->total() }}
        </small>
        {{ $appointments->withQueryString()->links('pagination::bootstrap-5') }}
    </div>
    @endif
</div>

@endsection
