{{--
    Modal de confirmation accès portail — globale, réutilisable.

    Usage sur un bouton :
        data-kt-modal-toggle="#modal_confirm_portal"
        data-confirm-url="{{ route('...', $model) }}"
        data-confirm-name="Prénom Nom"
        data-confirm-method="POST"   (grant)
        data-confirm-method="DELETE" (revoke)
--}}
<div id="modal_confirm_portal" class="kt-modal kt-modal-center hidden" data-kt-modal="true">
    <div class="kt-modal-content max-w-md">
        <div class="kt-modal-header">
            <h3 class="kt-modal-title" id="modal_portal_title">Accès portail</h3>
            <button type="button" class="kt-modal-close" aria-label="Close modal" data-kt-modal-dismiss="#modal_confirm_portal">
                <i class="ki-outline ki-cross text-lg"></i>
            </button>
        </div>
        <div class="kt-modal-body">
            <p class="text-sm text-secondary-foreground" id="modal_portal_message"></p>
        </div>
        <div class="kt-modal-footer justify-end gap-3">
            <button type="button" class="kt-btn kt-btn-outline" data-kt-modal-dismiss="#modal_confirm_portal">
                {{ __('ui.actions.cancel') }}
            </button>
            <form id="form_confirm_portal" method="POST">
                @csrf
                <input type="hidden" name="_method" id="form_portal_method" value="POST">
                <button type="submit" id="btn_portal_confirm" class="kt-btn kt-btn-primary"
                    x-data="{ loading: false }"
                    x-on:click="loading = true; setTimeout(() => { if ($el.form) $el.form.requestSubmit() }, 10)"
                    :disabled="loading">
                    <span x-show="!loading">Confirmer</span>
                    <span x-show="loading" x-cloak style="display: none;">
                        <svg fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="width: 1em; height: 1em; display: inline-block; vertical-align: middle;">
                            <path d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" opacity=".25"/>
                            <path d="M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z">
                                <animateTransform attributeName="transform" type="rotate" dur="0.75s" values="0 12 12;360 12 12" repeatCount="indefinite"/>
                            </path>
                        </svg>
                        {{ __('ui.states.saving') }}
                    </span>
                </button>
            </form>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        document.addEventListener('mousedown', e => {
            const btn = e.target.closest('[data-kt-modal-toggle="#modal_confirm_portal"]');
            if (!btn) return;

            const method  = (btn.dataset.confirmMethod ?? 'POST').toUpperCase();
            const name    = btn.dataset.confirmName ?? '';
            const isGrant = method === 'POST';

            document.getElementById('modal_portal_title').textContent   = isGrant ? 'Donner accès portail' : 'Retirer accès portail';
            document.getElementById('modal_portal_message').innerHTML   = isGrant
                ? `Donner l'accès au portail à <strong>${name}</strong> ? Un email d'invitation lui sera envoyé.`
                : `Retirer l'accès portail de <strong>${name}</strong> ? Son compte sera désactivé.`;
            document.getElementById('form_confirm_portal').action       = btn.dataset.confirmUrl ?? '';
            document.getElementById('form_portal_method').value         = method === 'DELETE' ? 'DELETE' : 'POST';
            document.getElementById('btn_portal_confirm').className     = 'kt-btn ' + (isGrant ? 'kt-btn-primary' : 'kt-btn-destructive');
        });
    });
</script>