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

@props([
    'modalId' => 'confirmModal',
    'title' => null,
    'message' => null,
    'confirmText' => null,
    'cancelText' => null,
    'type' => 'warning'
])

@php
    $typeConfig = [
        'confirm' => [
            'icon' => 'https://cdn.lordicon.com/lupuorrc.json',
            'colors' => 'primary:#405189,secondary:#0ab39c',
            'btnClass' => 'btn-primary'
        ],
        'warning' => [
            'icon' => 'https://cdn.lordicon.com/tdrtiskw.json',
            'colors' => 'primary:#405189,secondary:#f7b84b',
            'btnClass' => 'btn-warning'
        ],
        'danger' => [
            'icon' => 'https://cdn.lordicon.com/gsqxdxog.json',
            'colors' => 'primary:#405189,secondary:#f06548',
            'btnClass' => 'btn-danger'
        ],
        'info' => [
            'icon' => 'https://cdn.lordicon.com/gvtjlyjf.json',
            'colors' => 'primary:#405189,secondary:#299cdb',
            'btnClass' => 'btn-info'
        ]
    ];
    
    $config = $typeConfig[$type] ?? $typeConfig['warning'];
@endphp

<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="{{ __('admin/components.common.close') }}"></button>
            </div>
            <div class="modal-body p-5 text-center">
                <lord-icon src="{{ $config['icon'] }}" 
                          trigger="loop" 
                          colors="{{ $config['colors'] }}" 
                          style="width:90px;height:90px">
                </lord-icon>
                <div class="mt-4 text-center">
                    <h4 class="fs-semibold" id="modal-title-{{ $modalId }}">
                        {{ $title ?? __('admin/components.confirm_modal.title') }}
                    </h4>
                    <p class="text-muted fs-14 mb-4 pt-1" id="modal-message-{{ $modalId }}">
                        {{ $message ?? __('admin/components.confirm_modal.message') }}
                    </p>
                    <div class="hstack gap-2 justify-content-center">
                        <button class="btn btn-link link-success fw-medium text-decoration-none" data-bs-dismiss="modal">
                            <i class="ri-close-line me-1 align-middle"></i> {{ $cancelText ?? __('admin/components.common.cancel') }}
                        </button>
                        <button type="button" 
                                class="btn {{ $config['btnClass'] }}" 
                                id="confirm-btn-{{ $modalId }}">
                            <span class="btn-text">
                                <i class="ri-check-line me-1 align-middle"></i> {{ $confirmText ?? __('admin/components.confirm_modal.confirm') }}
                            </span>
                            <span class="btn-loading d-none">
                                <span class="spinner-border spinner-border-sm me-2"></span>{{ __('admin/components.confirm_modal.processing') }}
                            </span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    window.showConfirmModal = function(options = {}) {
        const modalId = options.modalId || '{{ $modalId }}';
        const modal = document.getElementById(modalId);
        
        if (!modal) {
            console.error('Modal not found:', modalId);
            return Promise.reject('Modal not found');
        }
        
        if (options.title) {
            const titleElement = document.getElementById(`modal-title-${modalId}`);
            if (titleElement) titleElement.textContent = options.title;
        }
        
        if (options.message) {
            const messageElement = document.getElementById(`modal-message-${modalId}`);
            if (messageElement) messageElement.textContent = options.message;
        }
        
        if (options.confirmText) {
            const confirmBtn = document.getElementById(`confirm-btn-${modalId}`);
            if (confirmBtn) {
                const textSpan = confirmBtn.querySelector('.btn-text');
                if (textSpan) {
                    textSpan.innerHTML = `<i class="ri-check-line me-1 align-middle"></i> ${options.confirmText}`;
                }
            }
        }
        
        return new Promise((resolve, reject) => {
            const confirmBtn = document.getElementById(`confirm-btn-${modalId}`);
            const bootstrapModal = new bootstrap.Modal(modal);
            
            const newConfirmBtn = confirmBtn.cloneNode(true);
            confirmBtn.parentNode.replaceChild(newConfirmBtn, confirmBtn);
            
            newConfirmBtn.addEventListener('click', function() {
                const textSpan = this.querySelector('.btn-text');
                const loadingSpan = this.querySelector('.btn-loading');
                
                if (textSpan) textSpan.classList.add('d-none');
                if (loadingSpan) loadingSpan.classList.remove('d-none');
                
                this.disabled = true;
                
                resolve({
                    confirmed: true,
                    modal: bootstrapModal,
                    button: this
                });
                
                if (options.autoClose !== false) {
                    if (textSpan) textSpan.classList.remove('d-none');
                    if (loadingSpan) loadingSpan.classList.add('d-none');
                    this.disabled = false;
                    bootstrapModal.hide();
                }
            });
            
            modal.addEventListener('hidden.bs.modal', function onHidden() {
                modal.removeEventListener('hidden.bs.modal', onHidden);
                reject(false);
            });
            
            bootstrapModal.show();
        });
    };
    
    window.closeConfirmModal = function(modalId, restoreButton = true) {
        const modal = document.getElementById(modalId);
        if (modal) {
            const bootstrapModal = bootstrap.Modal.getInstance(modal);
            if (bootstrapModal) {
                bootstrapModal.hide();
            }
            
            if (restoreButton) {
                const confirmBtn = document.getElementById(`confirm-btn-${modalId}`);
                if (confirmBtn) {
                    const textSpan = confirmBtn.querySelector('.btn-text');
                    const loadingSpan = confirmBtn.querySelector('.btn-loading');
                    
                    if (textSpan) textSpan.classList.remove('d-none');
                    if (loadingSpan) loadingSpan.classList.add('d-none');
                    confirmBtn.disabled = false;
                }
            }
        }
    };
});
</script>