CAMBIOS:

- Creada pagina de FAQ con manual de funcionalidades. - Arregladas alertas de exito y error en CDE de todos los elementos. - Creada alerta de verificacion en la eliminacion de cualquier elemento.
2026-05-25 19:42:09 -03:00
parent 5ac5d736a3
commit 3aba95bc91
18 changed files with 253 additions and 56 deletions
@@ -46,6 +46,9 @@
    <!-- Footer Component -->
    <x-footer />

+    <x-ui.alert />
+    <x-ui.confirm-delete />
+
    <!-- Scripts globales -->
    <script>
        // Lógica del menú móvil
@@ -53,6 +53,12 @@
                            Ventas
                        </a>
                    </li>
+                    <li>
+                        <a href="{{ route('faq') }}" 
+                            class="block py-2 px-3 md:p-0 transition-colors {{ request()->routeIs('faq') ? 'text-lime-600 dark:text-neon-lime border-b-2 border-lime-600 dark:border-neon-lime' : 'dark:text-white hover:text-lime-600 hover:dark:text-neon-lime' }}">
+                            Ayuda/FAQ
+                        </a>
+                    </li>
                @endauth

                <button onclick="toggleTheme()" class="p-2 text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white transition-colors rounded-full hover:bg-gray-200 dark:hover:bg-neutral-800">
@@ -1,11 +1,28 @@
-@if (session('success'))
-    <div class="p-4 mb-4 text-md text-black rounded-lg bg-green-500 border border-green-800/50" role="alert">
-        <span class="font-bold">¡Éxito!</span> {{ session('success') }}
+@if (session('success') || session('error'))
+    <div id="toast-alert" class="fixed top-20 right-5 z-50 flex items-center w-full max-w-sm p-4 space-x-3 text-black rounded-lg shadow-xl transition-opacity duration-500 ease-in-out {{ session('success') ? 'bg-green-500 border border-green-800/50' : 'bg-red-500 border border-red-800/50' }}" role="alert">
+        <div class="ml-2 text-md font-normal">
+            <span class="font-bold">{{ session('success') ? '¡Éxito!' : 'Error:' }}</span> 
+            {{ session('success') ?? session('error') }}
+        </div>
+        <button type="button" onclick="closeToastAlert()" class="ml-auto -mx-1.5 -my-1.5 bg-transparent text-black hover:text-gray-800 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 inline-flex h-8 w-8 justify-center items-center" aria-label="Close">
+            <span class="sr-only">Cerrar</span>
+            <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
+                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
+            </svg>
+        </button>
    </div>
-@endif

-@if (session('error'))
-    <div class="p-4 mb-4 text-md text-black rounded-lg bg-red-500 border border-red-800/50" role="alert">
-        <span class="font-bold">Error:</span> {{ session('error') }}
-    </div>
+    <script>
+        function closeToastAlert() {
+            const alertElement = document.getElementById('toast-alert');
+            if (alertElement) {
+                alertElement.classList.add('opacity-0');
+                setTimeout(() => alertElement.remove(), 500);
+            }
+        }
+
+        setTimeout(() => {
+            closeToastAlert();
+        }, 5000); // 5 seconds
+    </script>
@endif
@@ -0,0 +1,80 @@
+<div id="delete-modal" tabindex="-1" class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-full max-h-full bg-black/50 backdrop-blur-sm transition-opacity duration-300 opacity-0">
+    <div class="relative p-4 w-full max-w-md max-h-full mx-auto mt-20 transform transition-all duration-300 scale-95 opacity-0" id="delete-modal-content">
+        <div class="relative bg-white rounded-xl shadow dark:bg-neutral-800 border border-gray-200 dark:border-neutral-700">
+            <button type="button" onclick="closeDeleteModal()" class="absolute top-3 end-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-neutral-700 dark:hover:text-white">
+                <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
+                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
+                </svg>
+                <span class="sr-only">Cerrar modal</span>
+            </button>
+            <div class="p-4 md:p-5 text-center">
+                <svg class="mx-auto mb-4 text-red-500 w-12 h-12 dark:text-red-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
+                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11V6m0 8h.01M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
+                </svg>
+                <h3 class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-300">¿Estás seguro de que quieres eliminar este registro?</h3>
+                <p class="mb-5 text-sm font-normal text-gray-400 dark:text-gray-400">Esta acción no se puede deshacer.</p>
+                <button type="button" id="confirm-delete-btn" class="text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center">
+                    Sí, eliminar
+                </button>
+                <button onclick="closeDeleteModal()" type="button" class="py-2.5 px-5 ms-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-neutral-800 dark:text-gray-400 dark:border-neutral-600 dark:hover:text-white dark:hover:bg-neutral-700">
+                    Cancelar
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+    let formToSubmit = null;
+
+    function openDeleteModal(event, form) {
+        event.preventDefault();
+        formToSubmit = form;
+        const modal = document.getElementById('delete-modal');
+        const content = document.getElementById('delete-modal-content');
+        
+        modal.classList.remove('hidden');
+        modal.classList.add('flex');
+        
+        // Trigger reflow
+        void modal.offsetWidth;
+        
+        modal.classList.remove('opacity-0');
+        content.classList.remove('scale-95', 'opacity-0');
+        content.classList.add('scale-100', 'opacity-100');
+    }
+
+    function closeDeleteModal() {
+        const modal = document.getElementById('delete-modal');
+        const content = document.getElementById('delete-modal-content');
+        
+        modal.classList.add('opacity-0');
+        content.classList.remove('scale-100', 'opacity-100');
+        content.classList.add('scale-95', 'opacity-0');
+        
+        setTimeout(() => {
+            modal.classList.add('hidden');
+            modal.classList.remove('flex');
+            formToSubmit = null;
+        }, 300); // match transition duration
+    }
+
+    document.addEventListener('DOMContentLoaded', function() {
+        const btn = document.getElementById('confirm-delete-btn');
+        if (btn) {
+            btn.addEventListener('click', function() {
+                if (formToSubmit) {
+                    formToSubmit.submit();
+                }
+            });
+        }
+
+        // Add event listener to all forms with 'delete-form' class
+        const deleteForms = document.querySelectorAll('.delete-form');
+        deleteForms.forEach(form => {
+            form.addEventListener('submit', function(e) {
+                openDeleteModal(e, this);
+            });
+        });
+    });
+</script>