You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
178 lines
8.9 KiB
178 lines
8.9 KiB
@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
|
|
|
|
|