LauckCycles/resources/views/taller/create.blade.php

<x-layout title="Ingreso Taller">
    
    <x-section-header subtitle="Taller" title="Nueva " highlight="Orden de Reparación" />

    <div class="max-w-4xl mx-auto bg-panel-bg border border-neutral-800 rounded-xl p-8 shadow-lg">
        <form action="{{ route('taller.store') }}" method="POST" class="space-y-6">
            @csrf

            <!-- 1. Datos del Cliente y Contacto -->
            <div class="border-b border-neutral-800 pb-6">
                <h3 class="text-white font-bold uppercase tracking-wider text-sm mb-4">1. Cliente y Contacto</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-xs font-bold text-gray-400 uppercase mb-2">Propietario</label>
                        <select name="client_id" class="w-full bg-neutral-900 border border-neutral-700 text-white rounded-lg p-2.5 focus:ring-neon-lime focus:border-neon-lime">
                            @foreach($clients as $client)
                                <option value="{{ $client->id }}">{{ $client->name }}</option>
                            @endforeach
                        </select>
                        <a href="{{ route('clients.create') }}" class="text-xs text-neon-lime hover:underline mt-1 inline-block">+ Nuevo Cliente</a>
                    </div>
                    <div>
                        <label class="block text-xs font-bold text-gray-400 uppercase mb-2">Teléfono Aviso (Opcional)</label>
                        <input type="text" name="contact_phone" placeholder="Dejar vacío para usar el del perfil" class="w-full bg-neutral-900 border border-neutral-700 text-white rounded-lg p-2.5 focus:ring-neon-lime focus:border-neon-lime">
                    </div>
                </div>
            </div>

            <!-- 2. La Bicicleta y el Diagnóstico -->
            <div class="border-b border-neutral-800 pb-6">
                <h3 class="text-white font-bold uppercase tracking-wider text-sm mb-4">2. Diagnóstico Inicial</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="md:col-span-2">
                        <label class="block text-xs font-bold text-gray-400 uppercase mb-2">Modelo de Bici / Color</label>
                        <input type="text" name="bike_model" required placeholder="Ej: Venzo Loki Roja R29" class="w-full bg-neutral-900 border border-neutral-700 text-white rounded-lg p-2.5 focus:ring-neon-lime focus:border-neon-lime">
                    </div>
                    
                    <div>
                        <label class="block text-xs font-bold text-gray-400 uppercase mb-2">Problema / Servicio Solicitado</label>
                        <textarea name="problem_description" rows="4" required class="w-full bg-neutral-900 border border-neutral-700 text-white rounded-lg p-2.5 focus:ring-neon-lime focus:border-neon-lime" placeholder="Ej: Service completo, hace ruido la caja, regular cambios..."></textarea>
                    </div>

                    <div>
                        <label class="block text-xs font-bold text-gray-400 uppercase mb-2">Repuestos Estimados (Opcional)</label>
                        <textarea name="parts_needed" rows="4" class="w-full bg-neutral-900 border border-neutral-700 text-white rounded-lg p-2.5 focus:ring-neon-lime focus:border-neon-lime" placeholder="Ej: Cadena nueva, pastillas de freno..."></textarea>
                    </div>
                </div>
            </div>

            <!-- 3. Agenda y Costos -->
            <div>
                <h3 class="text-white font-bold uppercase tracking-wider text-sm mb-4">3. Acuerdo</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-xs font-bold text-gray-400 uppercase mb-2">Fecha Prometida / Retiro</label>
                        <input type="datetime-local" name="scheduled_at" required class="w-full bg-neutral-900 border border-neutral-700 text-white rounded-lg p-2.5 focus:ring-neon-lime focus:border-neon-lime">
                    </div>
                    <div>
                        <label class="block text-xs font-bold text-gray-400 uppercase mb-2">Presupuesto Aproximado ($)</label>
                        <input type="number" name="estimated_cost" step="0.01" class="w-full bg-neutral-900 border border-neutral-700 text-white rounded-lg p-2.5 focus:ring-neon-lime focus:border-neon-lime text-right font-mono" placeholder="0.00">
                    </div>
                </div>
            </div>

            <div class="flex justify-end pt-4">
                <button type="submit" class="px-8 py-3 bg-neon-lime text-neutral-900 font-bold rounded-lg hover:bg-[#b3e600] uppercase tracking-wide">
                    Ingresar Bicicleta
                </button>
            </div>
        </form>
    </div>
</x-layout>