netgescon-master/netgescon-laravel/resources/views/components/layout/modals.blade.php

{{-- 
========================================
MODALI GLOBALI
========================================
Modali di sistema riutilizzabili in tutta l'applicazione.

Autore: NetGesCon Development Team
Data: 2024
========================================
--}}

{{-- Modal di Conferma Generica --}}
<div class="modal fade" id="confirmModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="confirmModalTitle">Conferma</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Chiudi"></button>
            </div>
            <div class="modal-body">
                <div class="d-flex align-items-start">
                    <i class="fas fa-question-circle text-warning fa-2x me-3 mt-1"></i>
                    <div>
                        <p id="confirmModalMessage" class="mb-0">Sei sicuro di voler procedere?</p>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annulla</button>
                <button type="button" class="btn btn-primary" id="confirmModalConfirm">Conferma</button>
            </div>
        </div>
    </div>
</div>

{{-- Modal di Eliminazione --}}
<div class="modal fade" id="deleteModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title">
                    <i class="fas fa-trash me-2"></i>Conferma Eliminazione
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Chiudi"></button>
            </div>
            <div class="modal-body">
                <div class="d-flex align-items-start">
                    <i class="fas fa-exclamation-triangle text-danger fa-2x me-3 mt-1"></i>
                    <div>
                        <p class="mb-2"><strong>Attenzione!</strong></p>
                        <p id="deleteModalMessage" class="mb-3">Questa azione non può essere annullata.</p>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="deleteConfirmCheck">
                            <label class="form-check-label" for="deleteConfirmCheck">
                                Ho compreso che questa azione è irreversibile
                            </label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annulla</button>
                <button type="button" class="btn btn-danger" id="deleteModalConfirm" disabled>
                    <i class="fas fa-trash me-1"></i>Elimina
                </button>
            </div>
        </div>
    </div>
</div>

{{-- Modal di Loading --}}
<div class="modal fade" id="loadingModal" tabindex="-1" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-body text-center py-4">
                <div class="spinner-border text-primary mb-3" role="status">
                    <span class="visually-hidden">Caricamento...</span>
                </div>
                <p id="loadingModalMessage" class="mb-0">Operazione in corso...</p>
            </div>
        </div>
    </div>
</div>

{{-- Modal Informazioni --}}
<div class="modal fade" id="infoModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="infoModalTitle">
                    <i class="fas fa-info-circle text-info me-2"></i>Informazioni
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Chiudi"></button>
            </div>
            <div class="modal-body">
                <div id="infoModalContent">
                    <!-- Contenuto dinamico -->
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-bs-dismiss="modal">OK</button>
            </div>
        </div>
    </div>
</div>

{{-- Modal Aiuto/Documentazione --}}
<div class="modal fade" id="helpModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-question-circle text-primary me-2"></i>Aiuto
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Chiudi"></button>
            </div>
            <div class="modal-body">
                <div id="helpModalContent">
                    <div class="text-center py-4">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Caricamento...</span>
                        </div>
                        <p class="mt-2">Caricamento contenuto aiuto...</p>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Chiudi</button>
                <a href="#" class="btn btn-primary disabled" title="Centro Aiuto - Funzionalità in sviluppo">
                    <i class="fas fa-external-link-alt me-1"></i>Centro Aiuto
                </a>
            </div>
        </div>
    </div>
</div>

{{-- CSS per modali --}}
@push('styles')
<style>
/* Modali personalizzate */
.modal-content {
    border: none;
    border-radius: 0.75rem;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175);
}

.modal-header {
    border-bottom: 1px solid var(--bs-border-color);
    border-radius: 0.75rem 0.75rem 0 0;
}

.modal-footer {
    border-top: 1px solid var(--bs-border-color);
    border-radius: 0 0 0.75rem 0.75rem;
}

/* Modal di eliminazione */
#deleteModal .modal-content {
    border: 2px solid var(--bs-danger);
}

#deleteModalConfirm:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Modal di loading */
#loadingModal .modal-content {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
}

/* Tema scuro */
.dark .modal-content {
    background-color: var(--bs-dark);
    color: var(--bs-light);
}

.dark .modal-header,
.dark .modal-footer {
    border-color: var(--bs-gray-700);
}

.dark #loadingModal .modal-content {
    background: rgba(var(--bs-dark-rgb), 0.95);
}

/* Animazioni */
.modal.fade .modal-dialog {
    transition: transform 0.3s ease-out;
    transform: translate(0, -50px);
}

.modal.show .modal-dialog {
    transform: none;
}
</style>
@endpush

{{-- JavaScript per modali --}}
@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Helper per modal di conferma
    window.showConfirmModal = function(title, message, onConfirm, confirmText = 'Conferma') {
        const modal = new bootstrap.Modal(document.getElementById('confirmModal'));
        
        document.getElementById('confirmModalTitle').textContent = title;
        document.getElementById('confirmModalMessage').textContent = message;
        document.getElementById('confirmModalConfirm').textContent = confirmText;
        
        // Rimuovi eventuali listener precedenti
        const newConfirmBtn = document.getElementById('confirmModalConfirm').cloneNode(true);
        document.getElementById('confirmModalConfirm').parentNode.replaceChild(newConfirmBtn, document.getElementById('confirmModalConfirm'));
        
        // Aggiungi nuovo listener
        document.getElementById('confirmModalConfirm').addEventListener('click', function() {
            modal.hide();
            if (typeof onConfirm === 'function') {
                onConfirm();
            }
        });
        
        modal.show();
    };
    
    // Helper per modal di eliminazione
    window.showDeleteModal = function(message, onDelete) {
        const modal = new bootstrap.Modal(document.getElementById('deleteModal'));
        const checkbox = document.getElementById('deleteConfirmCheck');
        const confirmBtn = document.getElementById('deleteModalConfirm');
        
        document.getElementById('deleteModalMessage').textContent = message;
        checkbox.checked = false;
        confirmBtn.disabled = true;
        
        // Gestione checkbox
        checkbox.addEventListener('change', function() {
            confirmBtn.disabled = !this.checked;
        });
        
        // Rimuovi eventuali listener precedenti
        const newDeleteBtn = confirmBtn.cloneNode(true);
        confirmBtn.parentNode.replaceChild(newDeleteBtn, confirmBtn);
        
        // Aggiungi nuovo listener
        document.getElementById('deleteModalConfirm').addEventListener('click', function() {
            modal.hide();
            if (typeof onDelete === 'function') {
                onDelete();
            }
        });
        
        modal.show();
    };
    
    // Helper per modal di loading
    window.showLoadingModal = function(message = 'Operazione in corso...') {
        document.getElementById('loadingModalMessage').textContent = message;
        const modal = new bootstrap.Modal(document.getElementById('loadingModal'));
        modal.show();
        return modal;
    };
    
    window.hideLoadingModal = function() {
        const modal = bootstrap.Modal.getInstance(document.getElementById('loadingModal'));
        if (modal) {
            modal.hide();
        }
    };
    
    // Helper per modal info
    window.showInfoModal = function(title, content) {
        document.getElementById('infoModalTitle').innerHTML = '<i class="fas fa-info-circle text-info me-2"></i>' + title;
        document.getElementById('infoModalContent').innerHTML = content;
        const modal = new bootstrap.Modal(document.getElementById('infoModal'));
        modal.show();
    };
    
    // Helper per modal aiuto
    window.showHelpModal = function(topic = null) {
        const modal = new bootstrap.Modal(document.getElementById('helpModal'));
        const content = document.getElementById('helpModalContent');
        
        // Reset content
        content.innerHTML = `
            <div class="text-center py-4">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">Caricamento...</span>
                </div>
                <p class="mt-2">Caricamento contenuto aiuto...</p>
            </div>
        `;
        
        modal.show();
        
        // Carica contenuto aiuto - URL placeholder (funzionalità in sviluppo)
        const url = '#'; // topic ? `#help-topic=${topic}` : '#help-general';
        
        // Simula contenuto non disponibile
        setTimeout(() => {
            content.innerHTML = `
                <div class="alert alert-warning">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    Contenuto di aiuto non disponibile - Funzionalità in sviluppo.
                    <a href="#" class="alert-link disabled" title="Centro Aiuto - Funzionalità in sviluppo">
                        Centro Aiuto
                    </a>
                </div>
            `;
        }, 500);
    };
    
    // Auto-setup per elementi con attributi data
    document.querySelectorAll('[data-confirm]').forEach(element => {
        element.addEventListener('click', function(e) {
            e.preventDefault();
            
            const message = this.dataset.confirm;
            const action = () => {
                if (this.tagName === 'A') {
                    window.location.href = this.href;
                } else if (this.tagName === 'FORM' || this.closest('form')) {
                    (this.closest('form') || this).submit();
                }
            };
            
            showConfirmModal('Conferma', message, action);
        });
    });
    
    document.querySelectorAll('[data-delete]').forEach(element => {
        element.addEventListener('click', function(e) {
            e.preventDefault();
            
            const message = this.dataset.delete;
            const action = () => {
                if (this.tagName === 'A') {
                    window.location.href = this.href;
                } else if (this.tagName === 'FORM' || this.closest('form')) {
                    (this.closest('form') || this).submit();
                }
            };
            
            showDeleteModal(message, action);
        });
    });
});
</script>
@endpush