@extends('layouts.app')
@section('title', 'Appointments')

@section('content')
<div class="page-head">
    <div><div class="eyebrow">Schedule</div><h1>Appointments</h1></div>
    <a href="{{ route('appointments.create') }}" class="btn btn-primary">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14" stroke-linecap="round"/></svg>
        Book appointment
    </a>
</div>

<div class="chips" style="margin-bottom:18px;">
    @foreach(['upcoming'=>'Upcoming','today'=>'Today','past'=>'Past','all'=>'All'] as $f=>$lbl)
        <a href="{{ route('appointments.index', ['filter'=>$f]) }}" class="btn btn-sm {{ $filter===$f ? 'btn-primary' : 'btn-ghost' }}">{{ $lbl }}</a>
    @endforeach
</div>

@forelse($grouped as $date => $items)
    <div style="margin-bottom:8px;font-weight:600;color:var(--muted);font-size:13px;letter-spacing:.03em;padding:0 2px;">{{ \Illuminate\Support\Carbon::parse($date)->format('l, j F Y') }}</div>
    <div class="card" style="margin-bottom:20px;">
        @foreach($items as $appt)
            <div style="display:flex;align-items:center;gap:14px;padding:14px 20px;border-bottom:1px solid var(--border);flex-wrap:wrap;">
                <div style="font-family:'Fraunces',serif;font-weight:600;font-size:16px;width:80px;flex:0 0 80px;">{{ $appt->scheduled_at->format('g:i A') }}</div>
                <div class="avatar" style="width:36px;height:36px;flex-basis:36px;font-size:13px;">{{ $appt->patient->initials }}</div>
                <div style="flex:1;min-width:140px;">
                    <a href="{{ route('patients.show', $appt->patient) }}" style="font-weight:600;color:var(--ink);">{{ $appt->patient->name }}</a>
                    <div class="faint" style="font-size:12.5px;">{{ $appt->reason ?: 'Consultation' }} · {{ $appt->duration_minutes }} min</div>
                </div>
                <span class="badge badge-{{ $appt->status_color }}"><span class="dot"></span>{{ ucfirst(str_replace('_',' ',$appt->status)) }}</span>
                <div class="chips no-print">
                    @if($appt->status==='scheduled')
                        <form method="POST" action="{{ route('appointments.status', $appt) }}">@csrf @method('PATCH')<input type="hidden" name="status" value="completed"><button class="btn btn-sm btn-ghost">Complete</button></form>
                    @endif
                    <a href="{{ route('appointments.edit', $appt) }}" class="btn btn-sm btn-ghost">Edit</a>
                </div>
            </div>
        @endforeach
    </div>
@empty
    <div class="card"><div class="empty" style="padding:40px;">
        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M8 3v4M16 3v4M4 9h16M5 5h14a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Z" stroke-linecap="round"/></svg>
        No appointments in this view.
    </div></div>
@endforelse

@if($appointments->hasPages())<div class="pagination">{{ $appointments->links() }}</div>@endif
@endsection