|
|
@ -2,7 +2,9 @@ |
|
|
|
|
|
|
|
@section('content') |
|
|
|
<div class="container mx-auto px-4 py-6"> |
|
|
|
<!-- Encabezado --> |
|
|
|
|
|
|
|
|
|
|
|
<!-- Mensajes de éxito y error --> |
|
|
|
@if(session('success')) |
|
|
|
<div id="success-message" class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative mb-4" role="alert"> |
|
|
|
<span class="block sm:inline">{{ session('success') }}</span> |
|
|
@ -18,15 +20,13 @@ |
|
|
|
<div class="bg-white rounded-lg shadow-lg"> |
|
|
|
<div class="p-4 border-b border-gray-200 flex justify-between items-center"> |
|
|
|
<h2 class="text-2xl font-bold">Gestión de Marcas</h2> |
|
|
|
<a href="{{ route('marca.create') }}" |
|
|
|
class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 flex items-center gap-2"> |
|
|
|
<a href="{{ route('marca.create') }}" class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 flex items-center gap-2"> |
|
|
|
<i class="fas fa-plus"></i> |
|
|
|
Agregar |
|
|
|
</a> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- Barra de búsqueda --> |
|
|
|
<div class="p-4 border-b border-gray-200 bg-gray-50"> |
|
|
|
<!-- Barra de búsqueda --> |
|
|
|
<div class="p-4 border-b border-gray-200 bg-gray-50"> |
|
|
|
<form action="{{ route('marca.index') }}" method="GET" class="flex gap-2"> |
|
|
|
<div class="relative w-full sm:w-64"> |
|
|
|
<input type="text" |
|
|
@ -39,7 +39,7 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<button type="submit" class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600"> |
|
|
|
Buscar/Actualizar |
|
|
|
Buscar |
|
|
|
</button> |
|
|
|
@if(request('busqueda')) |
|
|
|
<a href="{{ route('marca.index') }}" class="px-4 py-2 bg-gray-500 text-white rounded-lg hover:bg-gray-600"> |
|
|
@ -55,6 +55,7 @@ |
|
|
|
<tr> |
|
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th> |
|
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Marca</th> |
|
|
|
|
|
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Acciones</th> |
|
|
|
</tr> |
|
|
|
</thead> |
|
|
@ -64,28 +65,42 @@ |
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ $marca->id }}</td> |
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900"> |
|
|
|
<i class="fas fa-car text-blue-500 mr-2"></i> |
|
|
|
{{ $marca->Marc->name }} |
|
|
|
{{ $marca->marca }} |
|
|
|
</td> |
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm"> |
|
|
|
<div class="flex gap-2"> |
|
|
|
<a href="#" |
|
|
|
onclick="confirmarEdicion('{{ route('marca.edit', $marca->id) }}')" |
|
|
|
class="text-blue-600 hover:text-blue-900"> |
|
|
|
<i class="fas fa-edit"></i> |
|
|
|
{{-- todo esto funciona para mostrar el estatus de tiempo real dela actividad |
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm"> |
|
|
|
@if($marca->eliminado == 0) |
|
|
|
<span class="flex items-center"> |
|
|
|
<span class="h-2 w-2 bg-green-500 rounded-full mr-2"></span> Activo |
|
|
|
</span> |
|
|
|
@else |
|
|
|
<span class="flex items-center"> |
|
|
|
<span class="h-2 w-2 bg-red-500 rounded-full mr-2"></span> Inactivo |
|
|
|
</span> |
|
|
|
@endif |
|
|
|
</td>--}} |
|
|
|
<td class="flex space-x-2 px-6 py-4 whitespace-nowrap text-sm"> |
|
|
|
@if($marca->eliminado == 1) |
|
|
|
<form action="{{ route('marca.update', $marca->id) }}" method="POST" class="d-inline"> |
|
|
|
@csrf |
|
|
|
@method('PUT') |
|
|
|
<input type="hidden" name="recuperar" value="1"> |
|
|
|
<a href="#" onclick="event.preventDefault(); this.closest('form').submit();" class="text-success"> |
|
|
|
<i class="fas fa-undo" style="color: green;"></i> |
|
|
|
</a> |
|
|
|
</form> |
|
|
|
@else |
|
|
|
<a href="{{ route('marca.edit', $marca->id) }}" class="text-warning"> |
|
|
|
<i class="fas fa-edit" style="color: orange;"></i> |
|
|
|
</a> |
|
|
|
<form action="{{ route('marca.destroy', $marca->id) }}" |
|
|
|
method="POST" |
|
|
|
class="inline" |
|
|
|
onsubmit="return false;"> |
|
|
|
<form action="{{ route('marca.destroy', $marca->id) }}" method="POST" class="d-inline"> |
|
|
|
@csrf |
|
|
|
@method('DELETE') |
|
|
|
<button type="button" |
|
|
|
onclick="confirmarEliminacion(this)" |
|
|
|
class="text-red-600 hover:text-red-900"> |
|
|
|
<i class="fas fa-trash"></i> |
|
|
|
</button> |
|
|
|
<a href="#" onclick="event.preventDefault(); this.closest('form').submit();" class="text-danger"> |
|
|
|
<i class="fas fa-trash" style="color: red;"></i> |
|
|
|
</a> |
|
|
|
</form> |
|
|
|
</div> |
|
|
|
@endif |
|
|
|
</td> |
|
|
|
</tr> |
|
|
|
@endforeach |
|
|
@ -96,51 +111,26 @@ |
|
|
|
</div> |
|
|
|
|
|
|
|
<script> |
|
|
|
function confirmarEdicion(url) { |
|
|
|
Swal.fire({ |
|
|
|
title: '¿Editar marca?', |
|
|
|
text: "¿Estás seguro de que deseas editar esta marca?", |
|
|
|
icon: 'question', |
|
|
|
showCancelButton: true, |
|
|
|
confirmButtonColor: '#3085d6', |
|
|
|
cancelButtonColor: '#d33', |
|
|
|
confirmButtonText: 'Sí, editar', |
|
|
|
cancelButtonText: 'Cancelar' |
|
|
|
}).then((result) => { |
|
|
|
if (result.isConfirmed) { |
|
|
|
window.location.href = url; |
|
|
|
// Desaparecer el mensaje después de 3 segundos |
|
|
|
setTimeout(function() { |
|
|
|
var message = document.getElementById('success-message'); |
|
|
|
if (message) { |
|
|
|
message.style.transition = 'opacity 0.5s ease'; |
|
|
|
message.style.opacity = '0'; |
|
|
|
setTimeout(function() { |
|
|
|
message.remove(); |
|
|
|
}, 500); // Tiempo para remover el elemento después de la transición |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
function confirmarEliminacion(button) { |
|
|
|
Swal.fire({ |
|
|
|
title: '¿Estás seguro?', |
|
|
|
text: "Esta acción no se puede deshacer", |
|
|
|
icon: 'warning', |
|
|
|
showCancelButton: true, |
|
|
|
confirmButtonColor: '#3085d6', |
|
|
|
cancelButtonColor: '#d33', |
|
|
|
confirmButtonText: 'Sí, eliminar', |
|
|
|
cancelButtonText: 'Cancelar' |
|
|
|
}).then((result) => { |
|
|
|
if (result.isConfirmed) { |
|
|
|
button.closest('form').onsubmit = null; |
|
|
|
button.closest('form').submit(); |
|
|
|
}, 3000); // Tiempo en milisegundos antes de comenzar a desaparecer |
|
|
|
setTimeout(function() { |
|
|
|
var noResultsMessage = document.getElementById('no-results-message'); |
|
|
|
if (noResultsMessage) { |
|
|
|
noResultsMessage.style.transition = 'opacity 0.5s ease'; |
|
|
|
noResultsMessage.style.opacity = '0'; |
|
|
|
setTimeout(function() { |
|
|
|
noResultsMessage.remove(); |
|
|
|
}, 500); // Tiempo para remover el elemento después de la transición |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
// Desaparecer el mensaje después de 3 segundos |
|
|
|
setTimeout(function() { |
|
|
|
var message = document.getElementById('success-message'); |
|
|
|
if (message) { |
|
|
|
message.style.transition = 'opacity 0.5s ease'; |
|
|
|
message.style.opacity = '0'; |
|
|
|
setTimeout(function() { |
|
|
|
message.remove(); |
|
|
|
}, 500); // Tiempo para remover el elemento después de la transición |
|
|
|
} |
|
|
|
}, 3000); // Tiempo en milisegundos antes de comenzar a desaparecer |
|
|
|
}, 3000); // Tiempo en milisegundos antes de comenzar a desaparecer |
|
|
|
</script> |
|
|
|
@endsection |
|
|
|
@endsection |