@extends('layouts.dashboard.inface', ['section' => 'appointment_statuses'])

@section('navbar-buttons')
    <a href="{{ route('realEstate.settings.appointmentStatuses.create') }}" class="flex h-10 items-center gap-2 rounded-lg bg-primary px-4 text-sm font-semibold text-white hover:bg-blue-600">
        <span class="material-symbols-outlined text-[20px]">add</span> Nuevo estatus
    </a>
@endsection

@section('content')
<div class="flex-1 overflow-y-auto bg-background-light p-6 dark:bg-background-dark lg:p-10">
    <div class="mx-auto max-w-7xl space-y-6">
        <div>
            <h1 class="text-3xl font-bold text-slate-900 dark:text-white">Estatus de citas</h1>
            <p class="mt-1 text-sm text-slate-500">Configura las opciones válidas para crear, filtrar y completar citas.</p>
        </div>
        @foreach (['success' => 'green', 'error' => 'red'] as $message => $color)
            @if (session($message))
                <div class="rounded-lg border border-{{ $color }}-200 bg-{{ $color }}-50 px-4 py-3 text-sm text-{{ $color }}-700">{{ session($message) }}</div>
            @endif
        @endforeach
        <div class="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900">
            <form method="GET" class="flex gap-3 border-b border-slate-200 p-4 dark:border-slate-800">
                <input name="search" value="{{ $search }}" placeholder="Buscar por nombre o código" class="flex-1 rounded-lg border-slate-300 text-sm dark:border-slate-700 dark:bg-slate-800">
                <button class="rounded-lg bg-slate-900 px-5 py-2 text-sm font-semibold text-white">Buscar</button>
            </form>
            <div class="overflow-x-auto">
                <table class="w-full text-left">
                    <thead class="bg-slate-50 text-xs uppercase text-slate-500 dark:bg-slate-800/50"><tr><th class="px-6 py-4">Estatus</th><th class="px-6 py-4">Código</th><th class="px-6 py-4">Apariencia</th><th class="px-6 py-4">Orden</th><th class="px-6 py-4">Disponible</th><th class="px-6 py-4 text-right">Acciones</th></tr></thead>
                    <tbody class="divide-y divide-slate-100 dark:divide-slate-800">
                    @forelse ($appointmentStatuses as $appointmentStatus)
                        <tr><td class="px-6 py-4 font-semibold dark:text-white">{{ $appointmentStatus->name }}</td><td class="px-6 py-4 font-mono text-sm text-slate-500">{{ $appointmentStatus->code }}</td><td class="px-6 py-4 text-sm">{{ $appointmentStatus->tone }}</td><td class="px-6 py-4 text-sm">{{ $appointmentStatus->sort_order }}</td><td class="px-6 py-4"><span class="rounded-full px-2 py-1 text-xs font-bold {{ $appointmentStatus->is_active ? 'bg-green-100 text-green-700' : 'bg-slate-100 text-slate-500' }}">{{ $appointmentStatus->is_active ? 'Sí' : 'No' }}</span></td>
                        <td class="px-6 py-4"><div class="flex justify-end gap-2"><a href="{{ route('realEstate.settings.appointmentStatuses.edit', $appointmentStatus) }}" class="rounded-lg p-2 text-slate-500 hover:text-primary"><span class="material-symbols-outlined">edit</span></a><form method="POST" action="{{ route('realEstate.settings.appointmentStatuses.delete', $appointmentStatus) }}" onsubmit="return confirm('¿Deseas eliminar este estatus?')">@csrf @method('DELETE')<button class="rounded-lg p-2 text-slate-500 hover:text-red-600"><span class="material-symbols-outlined">delete</span></button></form></div></td></tr>
                    @empty <tr><td colspan="6" class="px-6 py-12 text-center text-sm text-slate-500">No hay estatus registrados.</td></tr> @endforelse
                    </tbody>
                </table>
            </div>
            @if ($appointmentStatuses->hasPages())<div class="border-t p-4">{{ $appointmentStatuses->links() }}</div>@endif
        </div>
    </div>
</div>
@endsection