@extends('admin.layouts.app')

@section('content')
<div class="row">
    <div class="col-xl-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between bg-galaxy-transparent">
            <h4 class="mb-sm-0">{{ __('admin/profile.security.2fa.page_title') }}</h4>
            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="javascript: void(0);">{{ __('admin/profile.breadcrumb.administration') }}</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('admin.profile.index') }}">{{ __('admin/profile.breadcrumb.my_profile') }}</a></li>
                    <li class="breadcrumb-item active">{{ __('admin/profile.security.2fa.breadcrumb') }}</li>
                </ol>
            </div>
        </div>

        <div class="col-lg-12">
            <div class="card">
                <div class="card-header">
                    <div class="d-flex align-items-center flex-wrap gap-2">
                        <div class="flex-grow-1">
                            <a href="{{ route('admin.profile.index') }}" class="btn btn-light me-2">
                                <i class="ri-arrow-left-line me-1"></i>{{ __('admin/profile.security.2fa.back_to_profile') }}
                            </a>
                            <span id="status-badge" class="badge fs-6">
                                <i class="ri-shield-line me-1"></i>{{ __('admin/profile.security.2fa.status.loading') }}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="row">
            <div class="col-lg-8">
                <div class="row">
                    <div class="col-lg-6">
                        <div class="card" id="status-card">
                            <div class="card-header">
                                <h5 class="card-title mb-0">
                                    <i class="ri-shield-keyhole-line me-2"></i>{{ __('admin/profile.security.2fa.status.title') }}
                                </h5>
                            </div>
                            <div class="card-body">
                                <div class="d-flex align-items-center justify-content-between">
                                    <div>
                                        <h6 class="mb-1" id="status-text">{{ __('admin/profile.security.2fa.status.loading_status') }}</h6>
                                        <p class="text-muted mb-0" id="status-description">{{ __('admin/profile.security.2fa.status.verifying') }}</p>
                                    </div>
                                    <div id="status-icon" class="avatar-sm">
                                        <span class="avatar-title rounded-circle bg-secondary-subtle text-secondary">
                                            <i class="ri-loader-4-line spin"></i>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="card">
                            <div class="card-header">
                                <h5 class="card-title mb-0">
                                    <i class="ri-lock-password-line me-2"></i>{{ __('admin/profile.security.2fa.password.title') }}
                                </h5>
                            </div>
                            <div class="card-body">
                                <div class="mb-3">
                                    <label class="form-label text-muted">{{ __('admin/profile.security.2fa.password.label') }}</label>
                                    <div class="d-flex align-items-center">
                                        <span class="text-muted">••••••••••••</span>
                                        <a href="{{ route('admin.profile.password') }}" class="btn btn-sm btn-outline-primary ms-3">
                                            <i class="ri-key-line me-1"></i>{{ __('admin/profile.security.2fa.password.change') }}
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card" id="enable-section" style="display: none;">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="ri-shield-check-line me-2"></i>{{ __('admin/profile.security.2fa.enable.title') }}
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="alert alert-info">
                            <i class="ri-information-line me-2"></i>
                            <strong>{{ __('admin/profile.security.2fa.enable.info_title') }}</strong> {{ __('admin/profile.security.2fa.enable.info_description') }}
                        </div>
                        
                        <div class="text-center">
                            <button type="button" class="btn btn-primary btn-lg" id="enable-btn">
                                <i class="ri-shield-check-line me-2"></i>{{ __('admin/profile.security.2fa.enable.button') }}
                            </button>
                        </div>
                    </div>
                </div>

                <!-- confirm 2fa section -->
                <div class="card" id="confirm-section" style="display: none;">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="ri-smartphone-line me-2"></i>{{ __('admin/profile.security.2fa.confirm.title') }}
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-lg-6">
                                <h6 class="mb-3">{{ __('admin/profile.security.2fa.confirm.step1') }}</h6>
                                <div class="text-center mb-4">
                                    <div id="qr-code" class="bg-white p-3 rounded d-inline-block border">
                                    </div>
                                </div>
                                <p class="text-muted small">
                                    {{ __('admin/profile.security.2fa.confirm.apps') }}
                                </p>
                            </div>
                            <div class="col-lg-6">
                                <h6 class="mb-3">{{ __('admin/profile.security.2fa.confirm.step2') }}</h6>
                                <div class="mb-3">
                                    <label class="form-label">{{ __('admin/profile.security.2fa.confirm.code_label') }}</label>
                                    <input type="text" id="confirm-code" class="form-control text-center fs-4" 
                                           placeholder="123456" maxlength="6" style="letter-spacing: 0.3em;">
                                    <small class="text-muted">{{ __('admin/profile.security.2fa.confirm.code_help') }}</small>
                                </div>
                                <button type="button" class="btn btn-success" id="confirm-btn">
                                    <i class="ri-check-line me-2"></i>{{ __('admin/profile.security.2fa.confirm.button') }}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- active 2fa section -->
                <div class="card" id="active-section" style="display: none;">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="ri-shield-check-line me-2 text-success"></i>{{ __('admin/profile.security.2fa.active.title') }}
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="alert alert-success">
                            <i class="ri-check-line me-2"></i>
                            <strong>{{ __('admin/profile.security.2fa.active.success_title') }}</strong> {{ __('admin/profile.security.2fa.active.success_description') }}
                        </div>

                        <div class="row">
                            <div class="col-lg-8">
                                <h6 class="mb-3">{{ __('admin/profile.security.2fa.active.recovery_codes') }}</h6>
                                <div id="recovery-codes" class="bg-light p-3 rounded mb-3 font-monospace small" style="display: none;">
                                </div>
                                <div class="d-flex gap-2 flex-wrap">
                                    <button type="button" class="btn btn-outline-primary" id="show-codes-btn">
                                        <i class="ri-key-line me-1"></i>{{ __('admin/profile.security.2fa.active.show_codes') }}
                                    </button>
                                    <button type="button" class="btn btn-outline-secondary" id="regenerate-btn">
                                        <i class="ri-refresh-line me-1"></i>{{ __('admin/profile.security.2fa.active.regenerate') }}
                                    </button>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <h6 class="mb-3">{{ __('admin/profile.security.2fa.active.deactivation') }}</h6>
                                <button type="button" class="btn btn-outline-danger" id="disable-btn">
                                    <i class="ri-shield-off-line me-1"></i>{{ __('admin/profile.security.2fa.active.disable_button') }}
                                </button>
                                <p class="text-muted small mt-2">
                                    {{ __('admin/profile.security.2fa.active.disable_warning') }}
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- right side -->
            <div class="col-lg-4">
                <!-- how it works -->
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">{{ __('admin/profile.security.2fa.how_it_works.title') }}</h5>
                    </div>
                    <div class="card-body">
                        <div class="d-flex mb-3">
                            <div class="avatar-xs me-3">
                                <span class="avatar-title rounded-circle bg-primary-subtle text-primary">1</span>
                            </div>
                            <div>
                                <h6 class="mb-1">{{ __('admin/profile.security.2fa.how_it_works.step1_title') }}</h6>
                                <p class="text-muted small mb-0">{{ __('admin/profile.security.2fa.how_it_works.step1_description') }}</p>
                            </div>
                        </div>
                        <div class="d-flex mb-3">
                            <div class="avatar-xs me-3">
                                <span class="avatar-title rounded-circle bg-primary-subtle text-primary">2</span>
                            </div>
                            <div>
                                <h6 class="mb-1">{{ __('admin/profile.security.2fa.how_it_works.step2_title') }}</h6>
                                <p class="text-muted small mb-0">{{ __('admin/profile.security.2fa.how_it_works.step2_description') }}</p>
                            </div>
                        </div>
                        <div class="d-flex mb-3">
                            <div class="avatar-xs me-3">
                                <span class="avatar-title rounded-circle bg-primary-subtle text-primary">3</span>
                            </div>
                            <div>
                                <h6 class="mb-1">{{ __('admin/profile.security.2fa.how_it_works.step3_title') }}</h6>
                                <p class="text-muted small mb-0">{{ __('admin/profile.security.2fa.how_it_works.step3_description') }}</p>
                            </div>
                        </div>
                        <div class="d-flex">
                            <div class="avatar-xs me-3">
                                <span class="avatar-title rounded-circle bg-success-subtle text-success">4</span>
                            </div>
                            <div>
                                <h6 class="mb-1">{{ __('admin/profile.security.2fa.how_it_works.step4_title') }}</h6>
                                <p class="text-muted small mb-0">{{ __('admin/profile.security.2fa.how_it_works.step4_description') }}</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- recommended apps -->
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">{{ __('admin/profile.security.2fa.recommended_apps.title') }}</h5>
                    </div>
                    <div class="card-body">
                        <div class="d-flex align-items-center mb-3">
                            <div class="avatar-xs me-3">
                                <span class="avatar-title rounded-circle bg-primary-subtle text-primary">
                                    <i class="ri-microsoft-line"></i>
                                </span>
                            </div>
                            <div>
                                <h6 class="mb-0">{{ __('admin/profile.security.2fa.recommended_apps.microsoft') }}</h6>
                                <small class="text-muted">{{ __('admin/profile.security.2fa.recommended_apps.microsoft_desc') }}</small>
                            </div>
                        </div>                        
                        <div class="d-flex align-items-center mb-3">
                            <div class="avatar-xs me-3">
                                <span class="avatar-title rounded-circle bg-success-subtle text-success">
                                    <i class="ri-google-line"></i>
                                </span>
                            </div>
                            <div>
                                <h6 class="mb-0">{{ __('admin/profile.security.2fa.recommended_apps.google') }}</h6>
                                <small class="text-muted">{{ __('admin/profile.security.2fa.recommended_apps.google_desc') }}</small>
                            </div>
                        </div>
                        <div class="d-flex align-items-center mb-3">
                            <div class="avatar-xs me-3">
                                <span class="avatar-title rounded-circle bg-info-subtle text-info">
                                    <i class="ri-shield-line"></i>
                                </span>
                            </div>
                            <div>
                                <h6 class="mb-0">{{ __('admin/profile.security.2fa.recommended_apps.authy') }}</h6>
                                <small class="text-muted">{{ __('admin/profile.security.2fa.recommended_apps.authy_desc') }}</small>
                            </div>
                        </div>

                    </div>
                </div>

                <!-- security tips -->
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">{{ __('admin/profile.security.2fa.security_tips.title') }}</h5>
                    </div>
                    <div class="card-body">
                        <div class="alert alert-warning mb-0">
                            <i class="ri-alert-line me-2"></i>
                            <strong>{{ __('admin/profile.security.2fa.security_tips.important') }}</strong>
                            <ul class="mb-0 mt-2">
                                <li>{{ __('admin/profile.security.2fa.security_tips.tip1') }}</li>
                                <li>{{ __('admin/profile.security.2fa.security_tips.tip2') }}</li>
                                <li>{{ __('admin/profile.security.2fa.security_tips.tip3') }}</li>
                                <li>{{ __('admin/profile.security.2fa.security_tips.tip4') }}</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="disableModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="ri-shield-off-line me-2 text-danger"></i>{{ __('admin/profile.security.2fa.disable_modal.title') }}
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-danger">
                    <i class="ri-alert-line me-2"></i>
                    <strong>{{ __('admin/profile.security.2fa.disable_modal.warning_title') }}</strong> {{ __('admin/profile.security.2fa.disable_modal.warning_description') }}
                </div>
                <p>{{ __('admin/profile.security.2fa.disable_modal.confirm_question') }}</p>

                <div class="mb-3">
                    <label for="disable-password" class="form-label">Mot de passe actuel <span class="text-danger">*</span></label>
                    <input type="password" id="disable-password" class="form-control" autocomplete="current-password" required>
                </div>
                <div class="mb-2">
                    <label for="disable-code" class="form-label">Code 2FA en cours <span class="text-danger">*</span></label>
                    <input type="text" id="disable-code" class="form-control" inputmode="numeric" maxlength="6" pattern="[0-9]{6}" autocomplete="one-time-code" placeholder="123456" required>
                    <div class="form-text">Saisissez le code à 6 chiffres affiché par votre app d'authentification.</div>
                </div>
                <div id="disable-error" class="text-danger small mt-2" style="display:none;"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-light" data-bs-dismiss="modal">{{ __('admin/profile.security.2fa.disable_modal.cancel') }}</button>
                <button type="button" class="btn btn-danger" id="confirm-disable-btn">
                    <i class="ri-shield-off-line me-1"></i>{{ __('admin/profile.security.2fa.disable_modal.confirm') }}
                </button>
            </div>
        </div>
    </div>
</div>

<x-admin.toast-messages />
@endsection

@push('script')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const API_BASE = '/cp-admin/profile/security/2fa';
    const CSRF_TOKEN = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

    const statusText = document.getElementById('status-text');
    const statusDescription = document.getElementById('status-description');
    const statusBadge = document.getElementById('status-badge');
    const statusIcon = document.getElementById('status-icon');
    const enableSection = document.getElementById('enable-section');
    const confirmSection = document.getElementById('confirm-section');
    const activeSection = document.getElementById('active-section');

    async function apiCall(endpoint, method = 'GET', data = null) {
        const options = {
            method,
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': CSRF_TOKEN,
                'X-Requested-With': 'XMLHttpRequest'
            }
        };

        if (data) {
            options.body = JSON.stringify(data);
        }

        try {
            const response = await fetch(API_BASE + endpoint, options);
            const result = await response.json();
            
            if (result.csrf_token) {
                document.querySelector('meta[name="csrf-token"]').setAttribute('content', result.csrf_token);
            }
            
            return result;
        } catch (error) {
            console.error('API Error:', error);
            return { success: false, message: '{{ __("admin/profile.security.2fa.errors.connection_error") }}' };
        }
    }

    function showToast(message, type = 'info') {
        if (typeof window.showToast === 'function') {
            window.showToast(message, type);
        } else {
            alert(message);
        }
    }

    async function loadQrCode() {
        try {
            const result = await apiCall('/qr-code');

            if (result.success && result.data.qr_code_url) {
                document.getElementById('qr-code').innerHTML = '<img src="' + result.data.qr_code_url + '" alt="QR Code" style="max-width: 200px;">';
            } else {
                console.warn('Impossible de charger le QR code:', result.message);
            }
        } catch (error) {
            console.error('Erreur lors du chargement du QR code:', error);
        }
    }

    async function loadStatus() {
        try {
            const result = await apiCall('/status');

            if (result.success) {
                const status = result.data.two_factor.status;
                const isConfirmed = result.data.two_factor.is_confirmed;
                const hasSecret = result.data.two_factor.has_secret;

                statusText.textContent = status;
                
                if (status === {!! json_encode(__("admin/profile.security.2fa.status.enabled")) !!}) {
                    statusDescription.textContent = {!! json_encode(__("admin/profile.security.2fa.status.enabled_description")) !!};
                    statusBadge.className = 'badge bg-success-subtle text-success fs-6';
                    statusBadge.innerHTML = '<i class="ri-shield-check-line me-1"></i>' + {!! json_encode(__("admin/profile.security.2fa.status.enabled")) !!};
                    statusIcon.innerHTML = '<span class="avatar-title rounded-circle bg-success-subtle text-success"><i class="ri-shield-user-line"></i></span>';

                    activeSection.style.display = 'block';
                    enableSection.style.display = 'none';
                    confirmSection.style.display = 'none';
                } else if (status === {!! json_encode(__("admin/profile.security.2fa.status.pending")) !!}) {
                    statusDescription.textContent = {!! json_encode(__("admin/profile.security.2fa.status.pending_description")) !!};
                    statusBadge.className = 'badge bg-warning-subtle text-warning fs-6';
                    statusBadge.innerHTML = '<i class="ri-time-line me-1"></i>' + {!! json_encode(__("admin/profile.security.2fa.status.pending")) !!};
                    statusIcon.innerHTML = '<span class="avatar-title rounded-circle bg-warning-subtle text-warning"><i class="ri-time-line"></i></span>';

                    confirmSection.style.display = 'block';
                    enableSection.style.display = 'none';
                    activeSection.style.display = 'none';

                    // Charger le QR code si le 2FA est en attente
                    await loadQrCode();
                } else {
                    statusDescription.textContent = {!! json_encode(__("admin/profile.security.2fa.status.disabled_description")) !!};
                    statusBadge.className = 'badge bg-danger-subtle text-danger fs-6';
                    statusBadge.innerHTML = '<i class="ri-shield-line me-1"></i>' + {!! json_encode(__("admin/profile.security.2fa.status.disabled")) !!};
                    statusIcon.innerHTML = '<span class="avatar-title rounded-circle bg-danger-subtle text-danger"><i class="ri-shield-user-line"></i></span>';

                    enableSection.style.display = 'block';
                    confirmSection.style.display = 'none';
                    activeSection.style.display = 'none';
                }
            } else {
                throw new Error(result.message || '{{ __("admin/profile.security.2fa.errors.status_load_error") }}');
            }
        } catch (error) {
            console.error('Erreur lors du chargement du statut:', error);
            showToast('{{ __("admin/profile.security.2fa.errors.status_load_error") }}', 'error');
        }
    }

    document.getElementById('enable-btn').addEventListener('click', async function() {
        this.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>{{ __("admin/profile.security.2fa.loading.configuration") }}';
        this.disabled = true;

        try {
            const result = await apiCall('/enable', 'POST');

            if (result.success) {
                showToast(result.message, 'success');
                
                if (result.data.qr_code_url) {
                    document.getElementById('qr-code').innerHTML = '<img src="' + result.data.qr_code_url + '" alt="QR Code" style="max-width: 200px;">';
                }
                
                await loadStatus();
            } else {
                throw new Error(result.message || '{{ __("admin/profile.security.2fa.errors.enable_error") }}');
            }
        } catch (error) {
            showToast(error.message || '{{ __("admin/profile.security.2fa.errors.enable_error") }}', 'error');
        } finally {
            this.innerHTML = '<i class="ri-shield-check-line me-2"></i>{{ __("admin/profile.security.2fa.enable.button") }}';
            this.disabled = false;
        }
    });

    document.getElementById('confirm-btn').addEventListener('click', async function() {
        const code = document.getElementById('confirm-code').value.trim();
        
        if (!code || code.length !== 6) {
            showToast('{{ __("admin/profile.security.2fa.errors.code_required") }}', 'warning');
            return;
        }

        this.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>{{ __("admin/profile.security.2fa.loading.verifying") }}';
        this.disabled = true;

        try {
            const result = await apiCall('/confirm', 'POST', { code: code });

            if (result.success) {
                showToast(result.message, 'success');
                document.getElementById('confirm-code').value = '';
                await loadStatus();
            } else {
                if (result.errors && result.errors.code) {
                    showToast(result.errors.code[0], 'error');
                } else {
                    throw new Error(result.message || '{{ __("admin/profile.security.2fa.errors.invalid_code") }}');
                }
            }
        } catch (error) {
            showToast(error.message || '{{ __("admin/profile.security.2fa.errors.confirm_error") }}', 'error');
        } finally {
            this.innerHTML = '<i class="ri-check-line me-2"></i>{{ __("admin/profile.security.2fa.confirm.button") }}';
            this.disabled = false;
        }
    });

    document.getElementById('show-codes-btn')?.addEventListener('click', async function() {
        const codesDiv = document.getElementById('recovery-codes');
        
        if (codesDiv.style.display === 'none') {
            const result = await apiCall('/recovery-codes');
            
            if (result.success && result.data.recovery_codes) {
                const codes = result.data.recovery_codes.map((code, index) => '<div>' + (index + 1) + '. ' + code + '</div>').join('');
                codesDiv.innerHTML = codes;
                codesDiv.style.display = 'block';
                this.innerHTML = '<i class="ri-eye-off-line me-1"></i>{{ __("admin/profile.security.2fa.active.hide_codes") }}';
            } else {
                showToast(result.message || '{{ __("admin/profile.security.2fa.errors.codes_error") }}', 'error');
            }
        } else {
            codesDiv.style.display = 'none';
            this.innerHTML = '<i class="ri-key-line me-1"></i>{{ __("admin/profile.security.2fa.active.show_codes") }}';
        }
    });

    document.getElementById('regenerate-btn')?.addEventListener('click', async function() {
        if (!confirm('{{ __("admin/profile.security.2fa.confirmations.regenerate_codes") }}')) {
            return;
        }

        const password = prompt('Confirmez votre mot de passe pour régénérer les codes de récupération :');
        if (!password) {
            return;
        }

        this.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>{{ __("admin/profile.security.2fa.loading.regenerating") }}';
        this.disabled = true;

        try {
            const result = await apiCall('/regenerate-codes', 'POST', { password });

            if (result.success) {
                showToast(result.message, 'success');

                const codesDiv = document.getElementById('recovery-codes');
                if (result.data.recovery_codes) {
                    const codes = result.data.recovery_codes.map((code, index) => '<div>' + (index + 1) + '. ' + code + '</div>').join('');
                    codesDiv.innerHTML = codes;
                    codesDiv.style.display = 'block';
                    document.getElementById('show-codes-btn').innerHTML = '<i class="ri-eye-off-line me-1"></i>{{ __("admin/profile.security.2fa.active.hide_codes") }}';
                }
            } else {
                const msg = (result.errors && result.errors.password?.[0]) || result.message || '{{ __("admin/profile.security.2fa.errors.regenerate_error") }}';
                throw new Error(msg);
            }
        } catch (error) {
            showToast(error.message, 'error');
        } finally {
            this.innerHTML = '<i class="ri-refresh-line me-1"></i>{{ __("admin/profile.security.2fa.active.regenerate") }}';
            this.disabled = false;
        }
    });

    document.getElementById('disable-btn')?.addEventListener('click', function() {
        document.getElementById('disable-password').value = '';
        document.getElementById('disable-code').value = '';
        document.getElementById('disable-error').style.display = 'none';
        const modal = new bootstrap.Modal(document.getElementById('disableModal'));
        modal.show();
    });

    document.getElementById('disable-code')?.addEventListener('input', function() {
        this.value = this.value.replace(/\D/g, '').slice(0, 6);
    });

    document.getElementById('confirm-disable-btn')?.addEventListener('click', async function() {
        const password = document.getElementById('disable-password').value;
        const code = document.getElementById('disable-code').value;
        const errorDiv = document.getElementById('disable-error');
        errorDiv.style.display = 'none';

        if (!password) {
            errorDiv.textContent = 'Le mot de passe est requis.';
            errorDiv.style.display = 'block';
            return;
        }
        if (!/^\d{6}$/.test(code)) {
            errorDiv.textContent = 'Le code 2FA doit contenir 6 chiffres.';
            errorDiv.style.display = 'block';
            return;
        }

        this.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>{{ __("admin/profile.security.2fa.loading.disabling") }}';
        this.disabled = true;

        try {
            const result = await apiCall('/disable', 'DELETE', { password, code });

            if (result.success) {
                showToast(result.message, 'warning');

                const modal = bootstrap.Modal.getInstance(document.getElementById('disableModal'));
                modal.hide();

                await loadStatus();
            } else {
                const msg = (result.errors && (result.errors.password?.[0] || result.errors.code?.[0])) || result.message || '{{ __("admin/profile.security.2fa.errors.disable_error") }}';
                errorDiv.textContent = msg;
                errorDiv.style.display = 'block';
            }
        } catch (error) {
            errorDiv.textContent = error.message || '{{ __("admin/profile.security.2fa.errors.disable_error") }}';
            errorDiv.style.display = 'block';
        } finally {
            this.innerHTML = '<i class="ri-shield-off-line me-1"></i>{{ __("admin/profile.security.2fa.disable_modal.confirm") }}';
            this.disabled = false;
        }
    });

    document.getElementById('confirm-code')?.addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            document.getElementById('confirm-btn').click();
        }
        
        if (!/\d/.test(e.key) && !['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab'].includes(e.key)) {
            e.preventDefault();
        }
    });

    document.getElementById('confirm-code')?.addEventListener('input', function() {
        this.value = this.value.replace(/\D/g, '').slice(0, 6);
    });

    loadStatus();
});
</script>
@endpush