@extends('layouts.portal')

@section('title', __('appointments.title') . ' — ' . config('app.name'))
@section('page_title', __('appointments.title'))
@section('page_subtitle', number_format($appointments->total()) . ' · ' . __('appointments.title'))

@section('page_actions')
    <a href="{{ route('portal.appointments.create') }}" class="btn-brand !px-5 !py-2.5 text-sm">{{ __('appointments.new') }}</a>
@endsection

@section('content')
    <form method="GET" class="card-sc mb-5 flex flex-wrap items-end gap-3">
        <div>
            <label for="status" class="field-label">{{ __('common.status') }}</label>
            <select id="status" name="status" class="field-input">
                <option value="">{{ __('common.all') }}</option>
                @foreach (['pending', 'confirmed', 'completed', 'cancelled'] as $status)
                    <option value="{{ $status }}" @selected(request('status') === $status)>{{ __('appointments.statuses.' . $status) }}</option>
                @endforeach
            </select>
        </div>
        <button type="submit" class="btn-brand !px-5 !py-2.5 text-sm">{{ __('common.filter') }}</button>
        <a href="{{ route('portal.appointments.index') }}" class="btn-ghost !px-5 !py-2.5 text-sm no-underline">{{ __('common.reset') }}</a>
    </form>

    <div class="overflow-hidden rounded-3xl border border-ink-100 bg-white shadow-card">
        <div class="overflow-x-auto">
            <table class="table-sc">
                <thead>
                    <tr>
                        <th>{{ __('appointments.patient_name') }}</th>
                        <th>{{ __('appointments.phone') }}</th>
                        <th>{{ __('appointments.appointment_date') }}</th>
                        <th>{{ __('appointments.appointment_time') }}</th>
                        <th>{{ __('appointments.consultation_topic') }}</th>
                        <th>{{ __('common.status') }}</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($appointments as $appointment)
                        <tr>
                            <td class="font-semibold text-ink-900">{{ $appointment->patient_name }}</td>
                            <td class="numeric text-sm text-ink-500" dir="ltr">{{ $appointment->phone }}</td>
                            <td class="numeric">{{ $appointment->appointment_date->format('M d, Y') }}</td>
                            <td class="numeric">{{ \Carbon\Carbon::parse($appointment->appointment_time)->format('h:i A') }}</td>
                            <td class="text-sm text-ink-600">{{ $appointment->consultation_topic }}</td>
                            <td>
                                @php
                                    $tone = match ($appointment->status) {
                                        'confirmed' => 'bg-brand-100 text-brand-800',
                                        'completed' => 'bg-emerald-100 text-emerald-800',
                                        'cancelled' => 'bg-red-100 text-red-700',
                                        default => 'bg-amber-100 text-amber-800',
                                    };
                                @endphp
                                <span class="badge-sc {{ $tone }}">{{ __('appointments.statuses.' . $appointment->status) }}</span>
                            </td>
                            <td class="text-end">
                                <a href="{{ route('portal.appointments.show', $appointment) }}" class="btn-soft no-underline">{{ __('appointments.view') }}</a>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="py-12 text-center text-ink-400">{{ __('appointments.empty') }}</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <div class="mt-5">{{ $appointments->links() }}</div>
@endsection