{{-- Modal de confirmation pour valider / refuser une demande d'annulation (même esprit que delete-modal) --}}
<div class="modal fade zoomIn" id="cancellationActionModal" 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="https://cdn.lordicon.com/tdrtiskw.json"
                    trigger="loop"
                    colors="primary:#405189,secondary:#f7b84b"
                    style="width:90px;height:90px">
                </lord-icon>
                <div class="mt-4 text-center">
                    <h4 class="fs-semibold" id="cancellation-modal-title"></h4>
                    <p class="text-muted fs-14 mb-4 pt-1" id="cancellation-modal-message"></p>
                    <div class="hstack gap-2 justify-content-center remove">
                        <button type="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> {{ __('admin/components.common.cancel') }}
                        </button>
                        <form id="cancellation-action-form" method="POST" class="d-inline">
                            @csrf
                            <button type="submit" class="btn btn-danger" id="cancellation-action-submit">
                                <span class="btn-text"></span>
                                <span class="btn-loading d-none">
                                    <span class="spinner-border spinner-border-sm me-2"></span>{{ __('admin/components.confirm_modal.processing') }}
                                </span>
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@once
@push('script')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const modalEl = document.getElementById('cancellationActionModal');
    if (!modalEl) {
        return;
    }

    const cancellationModalI18n = {
        approveTitle: @json(__('admin/registrations.cancellation.modal_approve_title')),
        approveBody: @json(__('admin/registrations.cancellation.modal_approve_body')),
        rejectTitle: @json(__('admin/registrations.cancellation.modal_reject_title')),
        rejectBody: @json(__('admin/registrations.cancellation.modal_reject_body')),
        approveBtn: @json(__('admin/registrations.buttons.approve_cancellation')),
        rejectBtn: @json(__('admin/registrations.buttons.reject_cancellation')),
    };

    const titleEl = document.getElementById('cancellation-modal-title');
    const messageEl = document.getElementById('cancellation-modal-message');
    const form = document.getElementById('cancellation-action-form');
    const submitBtn = document.getElementById('cancellation-action-submit');

    function fillBody(template, name, training) {
        return template
            .replace(/:name/g, name)
            .replace(/:training/g, training);
    }

    modalEl.addEventListener('show.bs.modal', function (event) {
        const button = event.relatedTarget;
        if (!button || !button.classList.contains('open-cancellation-action-modal')) {
            return;
        }

        const mode = button.getAttribute('data-mode') || 'approve';
        const url = button.getAttribute('data-action-url');
        const userName = button.getAttribute('data-user-name') || '';
        const trainingTitle = button.getAttribute('data-training-title') || '—';

        const isReject = mode === 'reject';
        const titleText = isReject ? cancellationModalI18n.rejectTitle : cancellationModalI18n.approveTitle;
        const bodyTpl = isReject ? cancellationModalI18n.rejectBody : cancellationModalI18n.approveBody;

        titleEl.textContent = titleText;
        messageEl.textContent = fillBody(bodyTpl, userName, trainingTitle);

        if (url && form) {
            form.action = url;
        }

        submitBtn.classList.remove('btn-danger', 'btn-warning');
        submitBtn.classList.add(isReject ? 'btn-warning' : 'btn-danger');

        const btnText = submitBtn.querySelector('.btn-text');
        const btnLoading = submitBtn.querySelector('.btn-loading');
        const label = isReject ? cancellationModalI18n.rejectBtn : cancellationModalI18n.approveBtn;
        const icon = isReject ? 'ri-arrow-go-back-line' : 'ri-user-unfollow-line';

        if (btnText) {
            btnText.classList.remove('d-none');
            btnText.innerHTML = '<i class="' + icon + ' me-1 align-middle"></i> ' + label;
        }
        if (btnLoading) {
            btnLoading.classList.add('d-none');
        }
        submitBtn.disabled = false;
    });

    if (form && submitBtn) {
        form.addEventListener('submit', function () {
            const btnText = submitBtn.querySelector('.btn-text');
            const btnLoading = submitBtn.querySelector('.btn-loading');
            if (btnText) {
                btnText.classList.add('d-none');
            }
            if (btnLoading) {
                btnLoading.classList.remove('d-none');
            }
            submitBtn.disabled = true;
        });
    }
});
</script>
@endpush
@endonce