@php
    $canManageAppointments = app(\App\Services\Qms\QmsPermissions::class)->can(
        app(\App\Services\Qms\OrganizationResolver::class)->memberFor(auth()->user()),
        'appointments.manage'
    );
@endphp

<x-app-layout title="Appointments">
    <div class="space-y-6">
        <x-qms.page-hero
            badge="Pre-booked · Check-in · Tickets"
            title="Appointments"
            description="Schedule and check in pre-booked customers — checked-in appointments can issue queue tickets automatically."
            :stats="[
                ['value' => number_format($heroStats['today']), 'label' => 'Today'],
                ['value' => number_format($heroStats['scheduled']), 'label' => 'Scheduled'],
                ['value' => number_format($heroStats['checked_in']), 'label' => 'Checked in'],
            ]">
            @if ($canManageAppointments)
                <x-slot name="actions">
                    <a href="{{ route('qms.appointments.create') }}" class="btn-primary">New appointment</a>
                </x-slot>
            @endif
        </x-qms.page-hero>

        @include('partials.flash')

        <div class="overflow-hidden rounded-2xl border border-slate-200 bg-white">
            <table class="min-w-full divide-y divide-slate-200">
                <thead class="bg-slate-50">
                    <tr>
                        <th class="px-4 py-3 text-left text-xs font-semibold uppercase text-slate-500">Customer</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold uppercase text-slate-500">Scheduled</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold uppercase text-slate-500">Queue</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold uppercase text-slate-500">Status</th>
                        <th class="px-4 py-3"></th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-200">
                    @forelse ($appointments as $appointment)
                        <tr>
                            <td class="px-4 py-3 text-sm">{{ $appointment->customer_name }}</td>
                            <td class="px-4 py-3 text-sm">{{ $appointment->scheduled_at->format('M j, H:i') }}</td>
                            <td class="px-4 py-3 text-sm">{{ $appointment->serviceQueue?->name ?? '—' }}</td>
                            <td class="px-4 py-3 text-sm capitalize">{{ str_replace('_', ' ', $appointment->status) }}</td>
                            <td class="px-4 py-3 text-right text-sm">
                                @if ($appointment->status === 'scheduled')
                                    <a href="{{ route('qms.appointments.edit', $appointment) }}" class="text-indigo-600">Edit</a>
                                    <form method="POST" action="{{ route('qms.appointments.check-in', $appointment) }}" class="inline ml-2">@csrf<button class="text-indigo-600">Check in</button></form>
                                    <form method="POST" action="{{ route('qms.appointments.cancel', $appointment) }}" class="inline ml-2">@csrf<button class="text-amber-600">Cancel</button></form>
                                @elseif ($appointment->ticket)
                                    <a href="{{ route('qms.tickets.show', $appointment->ticket) }}" class="text-indigo-600">View ticket</a>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="5" class="px-6 py-12 text-center text-sm text-slate-500">No appointments yet.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <div>{{ $appointments->links() }}</div>
    </div>
</x-app-layout>