{{-- resources/views/components/admin/warning-modal.blade.php --}}

@props([
    'modalId' => 'warningModal',
    'title' => 'Attention',
    'message' => '',
    'errors' => [],
    'closeText' => 'Fermer',
    'iconUrl' => 'https://cdn.lordicon.com/tdrtiskw.json',
    'iconColors' => 'primary:#405189,secondary:#f7b84b'
])

<!-- Warning Modal -->
<div class="modal fade zoomIn" id="{{ $modalId }}" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-5 text-center">
                <lord-icon src="{{ $iconUrl }}"
                          trigger="loop"
                          colors="{{ $iconColors }}"
                          style="width:90px;height:90px">
                </lord-icon>
                <div class="mt-4 text-center">
                    <h4 class="fs-semibold text-warning" id="modal-title-{{ $modalId }}">
                        {{ $title }}
                    </h4>
                    <div class="text-start mt-3" id="modal-content-{{ $modalId }}">
                        @if($message)
                            <p class="text-muted fs-14 mb-3">{{ $message }}</p>
                        @endif
                        @if(count($errors) > 0)
                            <ul class="list-unstyled text-danger">
                                @foreach($errors as $error)
                                    <li class="mb-2">
                                        <i class="ri-error-warning-line me-1"></i> {{ $error }}
                                    </li>
                                @endforeach
                            </ul>
                        @endif
                    </div>
                    <div class="mt-4">
                        <button class="btn btn-warning" data-bs-dismiss="modal">
                            <i class="ri-close-line me-1 align-middle"></i> {{ $closeText }}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Fonction pour afficher la modal de warning
    window.showWarningModal = function(options = {}) {
        const modalId = options.modalId || '{{ $modalId }}';
        const modal = document.getElementById(modalId);

        if (!modal) {
            console.error('Modal not found:', modalId);
            return;
        }

        // Mettre à jour le titre
        if (options.title) {
            const titleElement = document.getElementById(`modal-title-${modalId}`);
            if (titleElement) titleElement.textContent = options.title;
        }

        // Mettre à jour le contenu
        const contentElement = document.getElementById(`modal-content-${modalId}`);
        if (contentElement && (options.message || options.errors)) {
            let content = '';

            if (options.message) {
                content += `<p class="text-muted fs-14 mb-3">${options.message}</p>`;
            }

            if (options.errors && options.errors.length > 0) {
                content += '<ul class="list-unstyled text-danger">';
                options.errors.forEach(error => {
                    content += `<li class="mb-2"><i class="ri-error-warning-line me-1"></i> ${error}</li>`;
                });
                content += '</ul>';
            }

            contentElement.innerHTML = content;
        }

        // Afficher la modal
        const bootstrapModal = new bootstrap.Modal(modal);
        bootstrapModal.show();
    };
});
</script>