Add empleado, borrado del seeder, cambios esteticos y middleware.

resources/views/appointments/show.blade.php

@@ -2,109 +2,155 @@
 
     <x-section-header subtitle="Gestor de Turnos" title="Detalle del" highlight="Turno" />
 
-    <div class="flex justify-end mb-6">
-        <a href="{{ route('agenda') }}"
+    <div class="flex justify-end mb-6 gap-3">
+        <a href="{{ route('taller.index') }}"
             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]">
+                   dark:bg-neon-lime dark:text-neutral-900 dark:hover:bg-[#b3e600] transition-colors">
+            ← Volver a Taller
+        </a>
+        <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-stone-200 dark:bg-neutral-800 text-neutral-800 dark:text-neutral-200 hover:bg-stone-300 dark:hover:bg-neutral-700 transition-colors">
             ← 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' => [
+                'label' => 'Pendiente',
+                'classes' => 'bg-red-100 text-red-800 border-red-200 dark:bg-red-900/30 dark:text-red-400 dark:border-red-800'
+            ],
+            'confirmed' => [
+                'label' => 'Confirmado',
+                'classes' => 'bg-blue-100 text-blue-800 border-blue-200 dark:bg-blue-900/30 dark:text-blue-400 dark:border-blue-800'
+            ],
+            'in_progress' => [
+                'label' => 'En progreso',
+                'classes' => 'bg-orange-100 text-orange-800 border-orange-200 dark:bg-orange-950/30 dark:text-orange-400 dark:border-orange-800'
+            ],
+            'ready' => [
+                'label' => 'Listo',
+                'classes' => 'bg-green-100 text-green-800 border-green-200 dark:bg-green-900/30 dark:text-green-450 dark:border-green-800'
+            ],
+            'delivered' => [
+                'label' => 'Entregado',
+                'classes' => 'bg-neutral-100 text-neutral-800 border-neutral-200 dark:bg-neutral-850 dark:text-gray-400 dark:border-neutral-700'
+            ]
+        ];
 
-        @php
-            $statusMap = [
-                'pending' => 'Pendiente',
-                'confirmed' => 'Confirmado',
-                'in_progress' => 'En progreso',
-                'ready' => 'Listo',
-                'delivered' => 'Entregado',
-            ];
+        $currentStatus = $statusMap[$appointment->status] ?? [
+            'label' => 'Desconocido',
+            'classes' => 'bg-neutral-100 text-neutral-800 border-neutral-200'
+        ];
+    @endphp
 
-            $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
+    <div class="max-w-2xl mx-auto bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl shadow-xl p-8 space-y-6">
+        <!-- Header / Status -->
+        <div class="flex justify-between items-center pb-4 border-b border-neutral-200 dark:border-neutral-800">
+            <h3 class="text-lg font-black text-neutral-900 dark:text-white flex items-center gap-2">
+                <svg class="w-5 h-5 text-neutral-500 dark:text-neutral-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5" />
+                </svg>
+                Ficha del Turno #{{ $appointment->id }}
+            </h3>
+            <span class="px-2.5 py-0.5 text-xs font-black rounded-full uppercase tracking-wider border {{ $currentStatus['classes'] }}">
+                {{ $currentStatus['label'] }}
             </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 --}}
+        <!-- Info Grid -->
         <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>
+            <!-- Cliente -->
+            <div class="flex items-start gap-3 md:col-span-2">
+                <div class="p-2.5 bg-neutral-100 dark:bg-neutral-800 rounded-lg text-neutral-500 dark:text-neutral-400 shrink-0">
+                    <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z"/></svg>
+                </div>
+                <div>
+                    <p class="text-[10px] text-neutral-400 dark:text-neutral-500 uppercase font-bold tracking-wider">Cliente</p>
+                    <p class="font-extrabold text-base text-neutral-800 dark:text-neutral-100">{{ $appointment->client->name }}</p>
+                </div>
             </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>
+            <!-- Teléfono -->
+            <div class="flex items-start gap-3">
+                <div class="p-2.5 bg-neutral-100 dark:bg-neutral-800 rounded-lg text-neutral-500 dark:text-neutral-400 shrink-0">
+                    <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 0 0 2.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.387a12.035 12.035 0 0 1-7.108-7.108c-.145-.44.02-9.27.387-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 0 0-1.091-.852H4.5A2.25 2.25 0 0 0 2.25 4.5v2.25Z"/></svg>
+                </div>
+                <div>
+                    <p class="text-[10px] text-neutral-400 dark:text-neutral-500 uppercase font-bold tracking-wider">Teléfono de contacto</p>
+                    <p class="font-bold text-neutral-800 dark:text-neutral-100">{{ $appointment->contact_phone ?? 'Sin teléfono registrado' }}</p>
+                </div>
             </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>
+            <!-- Bicicleta -->
+            <div class="flex items-start gap-3">
+                <div class="p-2.5 bg-neutral-100 dark:bg-neutral-800 rounded-lg text-neutral-500 dark:text-neutral-400 shrink-0">
+                    <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9.568 3H5.25A2.25 2.25 0 0 0 3 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581a1.125 1.125 0 0 0 1.591 0l7.261-7.26a1.125 1.125 0 0 0 0-1.591L12.51 3.659A2.25 2.25 0 0 0 10.917 3H9.568Z"/><path stroke-linecap="round" stroke-linejoin="round" d="M6 6h.008v.008H6V6Z"/></svg>
+                </div>
+                <div>
+                    <p class="text-[10px] text-neutral-400 dark:text-neutral-500 uppercase font-bold tracking-wider">Bicicleta</p>
+                    <p class="font-bold text-neutral-800 dark:text-neutral-100">{{ $appointment->bike_model ?? 'Sin modelo' }}</p>
+                </div>
             </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>
+            <!-- Fecha y Hora de Entrega -->
+            <div class="flex items-start gap-3">
+                <div class="p-2.5 bg-neutral-100 dark:bg-neutral-800 rounded-lg text-neutral-500 dark:text-neutral-400 shrink-0">
+                    <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
+                </div>
+                <div>
+                    <p class="text-[10px] text-neutral-400 dark:text-neutral-500 uppercase font-bold tracking-wider">Fecha y Hora Pactada</p>
+                    <p class="font-bold text-neutral-800 dark:text-neutral-100">
+                        {{ ucfirst($appointment->scheduled_at->locale('es')->translatedFormat('l, d \d\e F \d\e Y')) }} a las {{ $appointment->scheduled_at->format('H:i') }}
+                    </p>
+                </div>
             </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>
+            <!-- Presupuesto -->
+            <div class="flex items-start gap-3">
+                <div class="p-2.5 bg-neutral-100 dark:bg-neutral-800 rounded-lg text-neutral-500 dark:text-neutral-400 shrink-0">
+                    <svg class="w-5 h-5 text-neutral-500 dark:text-neutral-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m-3 -2.818l0.879 0.659c1.171 0.879 3.07 0.879 4.242 0c1.172 -0.879 1.172 -2.303 0 -3.182C13.536 12.219 12.768 12 12 12c-0.725 0 -1.45 -0.22 -2.003 -0.659c-1.106 -0.879 -1.106 -2.303 0 -3.182s2.9 -0.879 4.006 0l0.415 0.33M21 12a9 9 0 1 1 -18 0a9 9 0 0 1 18 0Z" />
+                    </svg>
+                </div>
+                <div>
+                    <p class="text-[10px] text-neutral-400 dark:text-neutral-500 uppercase font-bold tracking-wider">Presupuesto Estimado</p>
+                    <p class="font-black text-neutral-800 dark:text-neutral-100 font-mono">
+                        {{ $appointment->estimated_cost ? '$' . number_format($appointment->estimated_cost, 0, ',', '.') : 'Sin presupuestar' }}
+                    </p>
+                </div>
             </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>
 
+        <!-- Descripción del problema -->
+        <div class="mt-6">
+            <p class="text-[10px] text-neutral-400 dark:text-neutral-500 uppercase font-bold tracking-wider mb-1.5">Descripción del problema</p>
+            <div class="p-4 bg-neutral-50 dark:bg-neutral-950/30 border border-neutral-100 dark:border-neutral-800 rounded-xl">
+                <p class="text-sm text-neutral-700 dark:text-neutral-300 leading-relaxed whitespace-pre-line">{{ $appointment->problem_description }}</p>
+            </div>
+        </div>
+
+        <!-- Repuestos necesarios (si existen) -->
+        @if($appointment->parts_needed)
+            <div class="mt-6">
+                <p class="text-[10px] text-neutral-400 dark:text-neutral-500 uppercase font-bold tracking-wider mb-1.5">Repuestos Necesarios</p>
+                <div class="p-4 bg-amber-50/50 dark:bg-amber-950/10 border border-amber-100/70 dark:border-amber-900/30 text-amber-800 dark:text-amber-300 rounded-xl">
+                    <p class="text-sm leading-relaxed whitespace-pre-line">{{ $appointment->parts_needed }}</p>
+                </div>
+            </div>
+        @endif
+
+        <!-- Notas internas (si existen) -->
+        @if($appointment->notes)
+            <div class="mt-6">
+                <p class="text-[10px] text-neutral-400 dark:text-neutral-500 uppercase font-bold tracking-wider mb-1.5">Notas Internas</p>
+                <div class="p-4 bg-blue-50/50 dark:bg-blue-950/10 border border-blue-100/70 dark:border-blue-900/30 text-blue-800 dark:text-blue-300 rounded-xl">
+                    <p class="text-sm leading-relaxed whitespace-pre-line">{{ $appointment->notes }}</p>
+                </div>
+            </div>
+        @endif
     </div>
 
 </x-layout>