@extends('layouts.dashboard') @section('content') <div class="container mx-auto px-4 py-6"> <div class="max-w-lg mx-auto"> <div class="bg-white rounded-lg shadow-lg overflow-hidden"> <div class="p-6"> <!-- Encabezado del formulario --> <div class="flex items-center justify-between mb-6"> <h2 class="text-2xl font-bold text-gray-800"> {{ isset($tipoVehiculo) ? 'Editar Vehículo' : 'Nuevo Vehículo' }} </h2> <div class="h-10 w-10 bg-blue-100 rounded-full flex items-center justify-center"> <i class="fas fa-car text-blue-600"></i> </div> </div> <!-- Mensajes de error --> @if($errors->any()) <div class="mb-6 bg-red-50 border-l-4 border-red-500 p-4 rounded-r-lg"> <div class="flex items-center"> <i class="fas fa-exclamation-circle text-red-500 mr-3"></i> <div class="text-red-700"> <ul> @foreach($errors->all() as $error) <li>{{ $error }}</li> @endforeach </ul> </div> </div> </div> @endif <!-- Formulario --> <form id="tipoVehiculoForm" action="{{ isset($tipoVehiculo) ? route('vehiculos.update', $tipoVehiculo->id) : route('vehiculos.store') }}" method="POST"> @csrf @if(isset($tipoVehiculo)) @method('PUT') @endif <div class="space-y-6"> <!-- Campo Nombre --> <div> <label for="nombre" class="block text-sm font-medium text-gray-700 mb-2"> Nombre del Vehículo </label> <div class="relative rounded-md shadow-sm"> <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> <i class="fas fa-car text-gray-400"></i> </div> <input type="text" name="nombre" id="nombre" class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500" value="{{ isset($tipoVehiculo) ? $tipoVehiculo->nombre : old('nombre') }}" placeholder="Ingrese el nombre del vehículo" required> </div> @error('nombre') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror </div> <!-- Campo Tipo de Combustible --> <div> <label for="tipo_combustible" class="block text-sm font-medium text-gray-700 mb-2"> Tipo de Combustible </label> <div class="relative rounded-md shadow-sm"> <select name="tipo_combustible" id="tipo_combustible" class="block w-full pl-3 pr-10 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500" required> <option value="">Seleccione un tipo de combustible</option> <option value="gasolina_verde" {{ isset($tipoVehiculo) && $tipoVehiculo->tipo_combustible == 'gasolina_verde' ? 'selected' : '' }}>Gasolina Verde</option> <option value="gasolina_roja" {{ isset($tipoVehiculo) && $tipoVehiculo->tipo_combustible == 'gasolina_roja' ? 'selected' : '' }}>Gasolina Roja</option> <option value="diesel" {{ isset($tipoVehiculo) && $tipoVehiculo->tipo_combustible == 'diesel' ? 'selected' : '' }}>Diesel</option> </select> <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none"> <i class="fas fa-gas-pump text-gray-400"></i> </div> </div> @error('tipo_combustible') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror </div> <!-- Campo Estado --> <div> <label for="status" class="block text-sm font-medium text-gray-700 mb-2"> Estado </label> <div class="relative rounded-md shadow-sm"> <select name="status" id="status" class="block w-full pl-3 pr-10 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500" required> <option value="1" {{ isset($tipoVehiculo) && $tipoVehiculo->status ? 'selected' : '' }}>Activo</option> <option value="0" {{ isset($tipoVehiculo) && !$tipoVehiculo->status ? 'selected' : '' }}>Inactivo</option> </select> <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none"> <i class="fas fa-power-off text-gray-400"></i> </div> </div> @error('status') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror </div> <!-- Botones de acción --> <div class="flex justify-end space-x-2 pt-4 border-t border-gray-200"> <a href="{{ route('vehiculos.index') }}" class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> Cancelar </a> <button type="submit" class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> {{ isset($tipoVehiculo) ? 'Actualizar' : 'Guardar' }} </button> </div> </div> </form> </div> </div> </div> </div> <script> function confirmarAccion() { const esEdicion = {{ isset($tipoVehiculo) ? 'true' : 'false' }}; const nombre = document.getElementById('nombre').value.trim(); if (!nombre) { Swal.fire({ title: 'Error', text: 'El nombre del vehículo es obligatorio', icon: 'error', confirmButtonColor: '#3085d6', confirmButtonText: 'Entendido' }); return; } Swal.fire({ title: esEdicion ? '¿Editar vehículo?' : '¿Guardar vehículo?', html: esEdicion ? `¿Estás seguro de editar el vehículo:<br><strong>${nombre}</strong>?` : `¿Estás seguro de guardar el vehículo:<br><strong>${nombre}</strong>?`, icon: 'question', showCancelButton: true, confirmButtonColor: '#3085d6', cancelButtonColor: '#d33', confirmButtonText: esEdicion ? 'Sí, editar' : 'Sí, guardar', cancelButtonText: 'Cancelar' }).then((result) => { if (result.isConfirmed) { document.getElementById('tipoVehiculoForm').submit(); } }); } // Prevenir envío del formulario con Enter document.getElementById('tipoVehiculoForm').addEventListener('keypress', function(e) { if (e.key === 'Enter') { e.preventDefault(); confirmarAccion(); } }); // Focus en el campo nombre al cargar la página document.addEventListener('DOMContentLoaded', function() { document.getElementById('nombre').focus(); }); </script> @endsection