@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($marca) ? 'Editar Marca' : 'Nueva Marca' }} </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="marcaForm" action="{{ isset($marca) ? route('marca.update', $marca->id) : route('marca.store') }}" method="POST"> @csrf @if(isset($marca)) @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 de la Marca </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-tag 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($marca) ? $marca->nombre : old('nombre') }}" placeholder="Ingrese el nombre de la marca" required> </div> @error('nombre') <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('marca.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="button" onclick="confirmarAccion()" 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($marca) ? 'Actualizar' : 'Guardar' }} </button> </div> </div> </form> </div> </div> </div> </div> <script> function confirmarAccion() { const esEdicion = {{ isset($marca) ? 'true' : 'false' }}; const nombre = document.getElementById('nombre').value.trim(); if (!nombre) { Swal.fire({ title: 'Error', text: 'El nombre de la marca es obligatorio', icon: 'error', confirmButtonColor: '#3085d6', confirmButtonText: 'Entendido' }); return; } Swal.fire({ title: esEdicion ? '¿Editar marca?' : '¿Guardar marca?', html: esEdicion ? `¿Estás seguro de editar la marca a:<br><strong>${nombre}</strong>?` : `¿Estás seguro de guardar la marca:<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('marcaForm').submit(); } }); } // Prevenir envío del formulario con Enter document.getElementById('marcaForm').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