@extends('layouts.app')

@section('title', 'لوحة المريض')
@section('page_title', 'لوحة المريض - {{ auth()->user()->name }}')

@section('content')
<div class="mb-4 d-flex justify-content-between align-items-center">
    <div>
        <h4 class="mb-1" style="font-size: 1.5rem;">مرحباً {{ auth()->user()->name }}</h4>
        <p class="text-muted" style="font-size: 1.05rem;">يمكنك متابعة مواعيدك القادمة بكل سهولة.</p>
    </div>
    <div>
        <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addAppointmentModal">
            <i class="fas fa-calendar-plus me-2"></i> حجز موعد جديد
        </button>
    </div>
    @php($doctors = \App\Models\User::where('role','doctor')->orderBy('name')->get())
</div>

<div class="row">
    <div class="col-12">
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="card-title mb-0" style="font-size: 1.25rem;">مواعيدي القادمة</h5>
            </div>
            <div class="card-body">
                <ul class="list-group list-group-flush">
                @forelse(auth()->user()->patientAppointments()->with('doctor')->where('appointment_date', '>=', today())->orderBy('appointment_date')->take(10)->get() as $appointment)
                    <li class="list-group-item" style="font-size: 1.05rem;">
                        <div class="d-flex justify-content-between align-items-center flex-wrap">
                            <div class="mb-2 mb-sm-0">
                                <div class="fw-bold">د. {{ $appointment->doctor->name }}</div>
                                <div class="text-muted">{{ \Carbon\Carbon::parse($appointment->appointment_date)->format('Y-m-d') }} — {{ substr((string)$appointment->appointment_time, 0, 5) }}</div>
                            </div>
                            <div>
                                <span class="badge {{ $appointment->status === 'مؤكد' ? 'bg-success' : ($appointment->status === 'في الانتظار' ? 'bg-warning text-dark' : 'bg-secondary') }}" style="font-size: 0.9rem;">{{ $appointment->status }}</span>
                            </div>
                        </div>
                    </li>
                @empty
                    <li class="list-group-item text-muted" style="font-size: 1.05rem;">لا توجد مواعيد قادمة.</li>
                @endforelse
                </ul>
            </div>
        </div>

        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">الأدوية الحالية</h5>
            </div>
            <div class="card-body">
                <ul class="list-group list-group-flush">
                    @foreach(auth()->user()->patientPrescriptions()->with('doctor')->latest()->get() as $prescription)
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        <div>
                            <strong>{{ $prescription->medication_name }} {{ $prescription->dosage }}</strong>
                            <small class="d-block text-muted">{{ $prescription->frequency }} - {{ $prescription->instructions }}</small>
                            <small class="d-block text-muted">د. {{ $prescription->doctor->name }}</small>
                        </div>
                        <span class="badge {{ $prescription->is_active ? 'bg-success' : 'bg-warning' }} rounded-pill">
                            {{ $prescription->is_active ? 'نشط' : 'منتهي' }}
                        </span>
                    </li>
                    @endforeach
                </ul>
            </div>
        </div>
    </div>
</div>

<!-- Shared Add Appointment Modal -->
@include('components.appointment-add-modal')

@section('scripts')
<script>
// Expose current patient id for AppointmentManager
window.AppCurrentUserId = {{ auth()->id() }};
</script>
<script src="{{ asset('js/appointment-manager.js') }}"></script>
<script>
$(function(){
    try {
        const role = 'patient';
        const doctors = @json($doctors ?? []);
        const token = $('meta[name="csrf-token"]').attr('content');
        window.appointmentManager = new AppointmentManager({
            baseUrl: '',
            role: role,
            patients: [],
            doctors: doctors,
            csrfToken: token
        });
    } catch(e) { console.error('Failed to init AppointmentManager (patient):', e); }
});
</script>
@endsection

<style>
.timeline {
    position: relative;
    padding-left: 30px;
}
.timeline-item {
    position: relative;
    margin-bottom: 20px;
}
.timeline-marker {
    position: absolute;
    left: -35px;
    top: 5px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}
.timeline::before {
    content: '';
    position: absolute;
    left: -30px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #dee2e6;
}
</style>
@endsection