<x-layout title="Detalle del Turno">

    <x-section-header subtitle="Gestor de Turnos" title="Detalle del" highlight="Turno" />

    <div class="flex justify-end mb-6">
        <a href="{{ route('agenda') }}"
            class="px-5 py-2.5 font-bold rounded-lg uppercase tracking-wide text-xs flex items-center gap-2
                   bg-neutral-900 text-white hover:bg-neutral-700
                   dark:bg-neon-lime dark:text-neutral-900 dark:hover:bg-[#b3e600]">
            ← Volver a Agenda
        </a>
    </div>

    <div class="rounded-2xl shadow-lg p-8 space-y-6
                bg-white border border-neutral-300
                dark:bg-neutral-900/50 dark:border-neutral-700 dark:border-2">

        @php
            $statusMap = [
                'pending' => 'Pendiente',
                'confirmed' => 'Confirmado',
                'in_progress' => 'En progreso',
                'ready' => 'Listo',
                'delivered' => 'Entregado',
            ];

            $translatedStatus = $statusMap[$appointment->status] ?? 'Desconocido';

            $colorMap = [
                'pending' => '#ef4444',
                'in_progress' => '#f59e0b',
                'completed' => '#22c55e',
                'ready' => '#22c55e',
                'delivered' => '#22c55e',
            ];
            
            $color = $colorMap[$appointment->status] ?? '#3b82f6';
        @endphp

        {{-- Estado --}}
        <div class="text-center">
            <span class="text-lg uppercase font-bold tracking-wide text-neutral-500 dark:text-gray-400">
                Estado
            </span>

            <div class="mt-2">
                <span class="px-3 py-1 rounded-full text-lg font-semibold text-black"
                    style="background-color: {{ $color }}">
                    {{ $translatedStatus }}
                </span>
            </div>
        </div>

        {{-- Información principal --}}
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">

            <div>
                <p class="text-lg uppercase font-bold text-neutral-500 dark:text-gray-400">Cliente</p>
                <p class="text-lg font-semibold text-neutral-900 dark:text-white">
                    {{ $appointment->client->name }}
                </p>
            </div>

            <div>
                <p class="text-lg uppercase font-bold text-neutral-500 dark:text-gray-400">Teléfono</p>
                <p class="text-neutral-900 dark:text-white">
                    {{ $appointment->contact_phone ?? '-' }}
                </p>
            </div>

            <div>
                <p class="text-lg uppercase font-bold text-neutral-500 dark:text-gray-400">Fecha pactada de entrega</p>
                <p class="text-neutral-900 dark:text-white">
                    {{ $appointment->scheduled_at->format('d/m/Y') }}
                </p>
            </div>

            <div>
                <p class="text-lg uppercase font-bold text-neutral-500 dark:text-gray-400">Hora</p>
                <p class="text-neutral-900 dark:text-white">
                    {{ $appointment->scheduled_at->format('H:i') }}
                </p>
            </div>

            <div class="md:col-span-2">
                <p class="text-lg uppercase font-bold text-neutral-500 dark:text-gray-400">Modelo de Bicicleta</p>
                <p class="text-neutral-900 dark:text-white">
                    {{ $appointment->bike_model ?? '-' }}
                </p>
            </div>

            <div class="md:col-span-2">
                <p class="text-lg uppercase font-bold text-neutral-500 dark:text-gray-400">Problema Reportado</p>
                <p class="text-neutral-900 dark:text-white">
                    {{ $appointment->problem_description }}
                </p>
            </div>

            <div class="md:col-span-2">
                <p class="text-lg uppercase font-bold text-neutral-500 dark:text-gray-400">Notas</p>
                <p class="text-neutral-900 dark:text-white">
                    {{ $appointment->notes ?? '-' }}
                </p>
            </div>

        </div>

    </div>

</x-layout>