@extends('admin.layouts.app')

@section('content')

<form method="POST" id="password-form" action="{{ route('admin.profile.password.update') }}">
    @csrf
    @method('PUT')

    <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.password.title') }}</h4>

                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="javascript: void(0);">{{ __('admin/profile.breadcrumb.admin') }}</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('admin.profile.index') }}">{{ __('admin/profile.breadcrumb.profile') }}</a></li>
                        <li class="breadcrumb-item active">{{ __('admin/profile.breadcrumb.password') }}</li>
                    </ol>
                </div>
            </div>

            <!-- Menu bar -->
            <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.buttons.back') }}
                                </a>
                                <button type="submit" class="btn btn-primary" id="changepassword" data-bs-loading-text="{{ __('admin/profile.buttons.changing') }}">
                                    <i class="ri-key-line me-1 align-bottom"></i> {{ __('admin/profile.buttons.change_password') }}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            @if ($errors->any())
            <div class="alert alert-danger">
                <ul class="mb-0">
                    @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
            @endif


            <div class="row justify-content-center">
                <!-- Contenu principal -->
                <div class="col-lg-8">
                    <!-- Changement de mot de passe -->
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">
                                <i class="ri-shield-keyhole-line me-2"></i>{{ __('admin/profile.password.change_title') }}
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="alert alert-info">
                                <i class="ri-information-line me-2"></i>
                                <strong>{{ __('admin/profile.password.security') }}:</strong> {{ __('admin/profile.password.security_tips') }}
                            </div>

                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="mb-4">
                                        <label class="form-label" for="current_password">{{ __('admin/profile.password.current_password') }} <span class="text-danger">*</span></label>
                                        <div class="position-relative">
                                            <input type="password" class="form-control @error('current_password') is-invalid @enderror"
                                                id="current_password" name="current_password"
                                                placeholder="{{ __('admin/profile.password.current_placeholder') }}"
                                                >
                                            <button type="button" class="btn btn-link position-absolute end-0 top-0 text-decoration-none password-toggle"
                                                data-target="current_password">
                                                <i class="ri-eye-line"></i>
                                            </button>
                                        </div>
                                        @error('current_password')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="mb-4">
                                        <label class="form-label" for="password">{{ __('admin/profile.password.new_password') }} <span class="text-danger">*</span></label>
                                        <div class="position-relative">
                                            <input type="password" class="form-control @error('password') is-invalid @enderror"
                                                id="password" name="password"
                                                placeholder="{{ __('admin/profile.password.new_placeholder') }}"
                                                >
                                            <button type="button" class="btn btn-link position-absolute end-0 top-0 text-decoration-none password-toggle"
                                                data-target="password">
                                                <i class="ri-eye-line"></i>
                                            </button>
                                        </div>
                                        @error('password')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror

                                        <!-- Indicateur de force du mot de passe -->
                                        <div class="mt-2">
                                            <div class="progress" style="height: 4px;">
                                                <div class="progress-bar" id="password-strength-bar" role="progressbar" style="width: 0%"></div>
                                            </div>
                                            <small class="text-muted" id="password-strength-text">{{ __('admin/profile.password.strength_initial') }}</small>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="mb-4">
                                        <label class="form-label" for="password_confirmation">{{ __('admin/profile.password.confirm_password') }} <span class="text-danger">*</span></label>
                                        <div class="position-relative">
                                            <input type="password" class="form-control @error('password_confirmation') is-invalid @enderror"
                                                id="password_confirmation" name="password_confirmation"
                                                placeholder="{{ __('admin/profile.password.confirm_placeholder') }}"
                                                autocomplete="new-password"
                                                autocorrect="off"
                                                spellcheck="false"
                                                >
                                            <button type="button" class="btn btn-link position-absolute end-0 top-0 text-decoration-none password-toggle"
                                                data-target="password_confirmation">
                                                <i class="ri-eye-line"></i>
                                            </button>
                                        </div>
                                        @error('password_confirmation')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror

                                        <!-- Indicateur de correspondance -->
                                        <div class="mt-2">
                                            <small class="text-muted" id="password-match-text"></small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Conseils de sécurité -->
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">
                                <i class="ri-shield-check-line me-2"></i>{{ __('admin/profile.password.security_tips_title') }}
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-lg-6">
                                    <h6 class="text-success mb-3">{{ __('admin/profile.password.good_practices') }}</h6>
                                    <ul class="text-muted mb-0">
                                        <li>{{ __('admin/profile.password.tips.length') }}</li>
                                        <li>{{ __('admin/profile.password.tips.mix_case') }}</li>
                                        <li>{{ __('admin/profile.password.tips.numbers') }}</li>
                                        <li>{{ __('admin/profile.password.tips.special_chars') }}</li>
                                        <li>{{ __('admin/profile.password.tips.dictionary') }}</li>
                                    </ul>
                                </div>
                                <div class="col-lg-6">
                                    <h6 class="text-danger mb-3">{{ __('admin/profile.password.bad_practices') }}</h6>
                                    <ul class="text-muted mb-0">
                                        <li>{{ __('admin/profile.password.tips.personal_info') }}</li>
                                        <li>{{ __('admin/profile.password.tips.sequences') }}</li>
                                        <li>{{ __('admin/profile.password.tips.reuse') }}</li>
                                        <li>{{ __('admin/profile.password.tips.sharing') }}</li>
                                        <li>{{ __('admin/profile.password.tips.reuse_sites') }}</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Sidebar -->
                <div class="col-lg-4">
                    <!-- Informations de sécurité -->
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">{{ __('admin/profile.security.title') }}</h5>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <small class="text-muted">{{ __('admin/profile.security.last_update') }}:</small>
                                <div class="fw-medium">{{ $admin->updated_at->format('d/m/Y à H:i') }}</div>
                            </div>

                            @if($admin->last_login_at)
                            <div class="mb-3">
                                <small class="text-muted">{{ __('admin/profile.security.last_login') }}:</small>
                                <div class="fw-medium">{{ $admin->last_login_at->format('d/m/Y à H:i') }}</div>
                            </div>
                            @endif

                            @if($admin->last_login_ip)
                            <div class="mb-3">
                                <small class="text-muted">{{ __('admin/profile.security.ip_address') }}:</small>
                                <div class="fw-medium">{{ $admin->last_login_ip }}</div>
                            </div>
                            @endif

                            <div class="mb-3">
                                <small class="text-muted">{{ __('admin/profile.security.2fa_label') }} : </small>
                                
                                    @if($admin->two_factor_secret)
                                    <span class="badge bg-success-subtle text-success">
                                        <i class="ri-shield-check-line me-1"></i>{{ __('admin/profile.security.2fa_enabled') }}
                                    </span>
                                    @else
                                    <span class="badge bg-danger-subtle text-danger">
                                        <i class="ri-shield-line me-1"></i>{{ __('admin/profile.security.2fa_disabled') }}
                                    </span>
                                    @endif
                                
                            </div>
                        </div>
                    </div>

                    <!-- Actions de sécurité -->
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">{{ __('admin/profile.actions.title') }}</h5>
                        </div>
                        <div class="card-body">
                            <div class="d-grid gap-2">
                                @if(!$admin->two_factor_secret)
                                <a href="" class="btn btn-outline-success">
                                    <i class="ri-shield-check-line me-1"></i>{{ __('admin/profile.actions.enable_2fa') }}
                                </a>
                                @else
                                <a href="" class="btn btn-outline-info">
                                    <i class="ri-settings-line me-1"></i>{{ __('admin/profile.actions.manage_2fa') }}
                                </a>
                                @endif

                                <a href="{{ route('admin.profile.edit') }}" class="btn btn-outline-primary">
                                    <i class="ri-user-settings-line me-1"></i>{{ __('admin/profile.buttons.edit_profile') }}
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- Aide -->
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">{{ __('admin/profile.help.title') }}</h5>
                        </div>
                        <div class="card-body">
                            <div class="alert alert-warning mb-0">
                                <i class="ri-question-line me-2"></i>
                                <strong>{{ __('admin/profile.help.login_issue') }}</strong><br>
                                {{ __('admin/profile.help.contact_admin') }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

<x-admin.confirm-modal
    modal-id="confirmChangePassword"
    title="{{ __('admin/profile.modal.title') }}"
    message="{{ __('admin/profile.modal.message') }}"
    confirm-text="{{ __('admin/profile.modal.confirm') }}"
    cancel-text="{{ __('admin/profile.modal.cancel') }}"
    type="warning" />

<!-- Composant toast global -->
<x-admin.toast-messages />

@endsection

@push('script')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const form = document.getElementById('password-form');
        const submitBtn = document.getElementById('changepassword');
        const originalContent = submitBtn.innerHTML;

        // const currentPasswordInput = document.getElementById('current_password');
        const passwordInput = document.getElementById('password');
        const passwordConfirmationInput = document.getElementById('password_confirmation');

        const strengthBar = document.getElementById('password-strength-bar');
        const strengthText = document.getElementById('password-strength-text');
        const matchText = document.getElementById('password-match-text');

        // function resetButton() {
        //     submitBtn.innerHTML = originalContent;
        //     submitBtn.disabled = false;
        // }

        // function showSpinner() {
        //     submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status"></span>{{ __("admin/profile.buttons.changing") }}';
        //     submitBtn.disabled = true;
        // }

        // Toggle password visibility
        document.querySelectorAll('.password-toggle').forEach(button => {
            button.addEventListener('click', function() {
                const targetId = this.dataset.target;
                const targetInput = document.getElementById(targetId);
                const icon = this.querySelector('i');

                if (targetInput.type === 'password') {
                    targetInput.type = 'text';
                    icon.className = 'ri-eye-off-line';
                } else {
                    targetInput.type = 'password';
                    icon.className = 'ri-eye-line';
                }
            });
        });

        // Calculer la force du mot de passe
        function calculatePasswordStrength(password) {
            let score = 0;
            let feedback = [];

            if (password.length >= 8) {
                score += 20;
            } else {
                feedback.push('{{ __("admin/profile.password.strength_feedback.length") }}');
            }

            if (/[a-z]/.test(password)) {
                score += 20;
            } else {
                feedback.push('{{ __("admin/profile.password.strength_feedback.lowercase") }}');
            }

            if (/[A-Z]/.test(password)) {
                score += 20;
            } else {
                feedback.push('{{ __("admin/profile.password.strength_feedback.uppercase") }}');
            }

            if (/[0-9]/.test(password)) {
                score += 20;
            } else {
                feedback.push('{{ __("admin/profile.password.strength_feedback.numbers") }}');
            }

            if (/[^A-Za-z0-9]/.test(password)) {
                score += 20;
            } else {
                feedback.push('{{ __("admin/profile.password.strength_feedback.special") }}');
            }

            return {
                score,
                feedback
            };
        }

        // Mettre à jour l'indicateur de force
        function updatePasswordStrength() {
            const password = passwordInput.value;
            const {
                score,
                feedback
            } = calculatePasswordStrength(password);

            let barClass = '';
            let textMessage = '';

            if (password.length === 0) {
                textMessage = '{{ __("admin/profile.password.strength_initial") }}';
                barClass = '';
            } else if (score < 40) {
                textMessage = '{{ __("admin/profile.password.strength_weak") }}' + feedback.join(', ');
                barClass = 'bg-danger';
            } else if (score < 80) {
                textMessage = '{{ __("admin/profile.password.strength_medium") }}' + feedback.join(', ');
                barClass = 'bg-warning';
            } else {
                textMessage = '{{ __("admin/profile.password.strength_strong") }}';
                barClass = 'bg-success';
            }

            strengthBar.style.width = score + '%';
            strengthBar.className = 'progress-bar ' + barClass;
            strengthText.textContent = textMessage;
            strengthText.className = 'small ' + (score < 40 ? 'text-danger' : score < 80 ? 'text-warning' : 'text-success');
        }

        // Vérifier la correspondance des mots de passe
        function checkPasswordMatch() {
            const password = passwordInput.value;
            const confirmation = passwordConfirmationInput.value;

            if (confirmation.length === 0) {
                matchText.textContent = '';
                matchText.className = 'small text-muted';
                return;
            }

            if (password === confirmation) {
                matchText.textContent = '{{ __("admin/profile.password.match_success") }}';
                matchText.className = 'small text-success';
            } else {
                matchText.textContent = '{{ __("admin/profile.password.match_error") }}';
                matchText.className = 'small text-danger';
            }
        }

        // Event listeners
        passwordInput.addEventListener('input', function() {
            updatePasswordStrength();
            checkPasswordMatch();
        });

        passwordConfirmationInput.addEventListener('input', checkPasswordMatch);

        const validator = new MultilingualFormValidator({
            formId: 'password-form',
            submitBtnId: 'changepassword',
            
            // Champs multilingues requis (title_fr, title_en, content_fr, content_en, etc.)
            fields: [],
            
            // Champs simples requis (si vous en avez)
            singleFields: ['current_password', 'password', 'password_confirmation'],
            
            alertMessage: "{{ __('admin/profile.errors.fill_all_required_fields') }}",
            loadingText: "{{ __('admin/profile.buttons.changing') }}",
            debug: false,
            
            onBeforeSubmit: function() {

                showConfirmModal({
                    modalId: 'confirmChangePassword',
                    title: '{{ __("admin/profile.modal.title") }}',
                    message: '{{ __("admin/profile.modal.message") }}',
                    confirmText: '{{ __("admin/profile.modal.confirm") }}'
                }).then(() => {
                    // Soumettre manuellement
                    const form = document.getElementById('password-form');
                    const btn = document.getElementById('changepassword');
                    
                    btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>{{ __("admin/profile.buttons.changing") }}';
                    btn.disabled = true;
                    form.submit();
                }).catch(() => {
                    console.log('{{ __("admin/profile.modal.cancel_log") }}');
                });
                
                return false; // TOUJOURS empêcher la soumission auto
            }
        });        

        // Validation du formulaire
        // function validateForm() {
        //     let isValid = true;

        //     // Validation des champs obligatoires
        //     const requiredFields = ['current_password', 'password', 'password_confirmation'];
        //     requiredFields.forEach(fieldName => {
        //         const field = document.getElementById(fieldName);
        //         if (!field.value.trim()) {
        //             field.classList.add('is-invalid');
        //             isValid = false;
        //         } else {
        //             field.classList.remove('is-invalid');
        //         }
        //     });

        //     // Validation de la force du mot de passe
        //     const {
        //         score
        //     } = calculatePasswordStrength(passwordInput.value);
        //     if (score < 60) {
        //         passwordInput.classList.add('is-invalid');
        //         isValid = false;
        //     }

        //     // Validation de la correspondance
        //     if (passwordInput.value !== passwordConfirmationInput.value) {
        //         passwordConfirmationInput.classList.add('is-invalid');
        //         isValid = false;
        //     }

        //     return isValid;
        // }

        // // Soumission du formulaire
        // form.addEventListener('submit', function(e) {
        //     e.preventDefault();

        //     if (!validateForm()) {
        //         alert('{{ __("admin/profile.validation_error") }}');
        //         return false;
        //     };

        //     showConfirmModal({
        //         modalId: 'confirmChangePassword',
        //         title: '{{ __("admin/profile.modal.title") }}',
        //         message: '{{ __("admin/profile.modal.message") }}',
        //         confirmText: '{{ __("admin/profile.modal.confirm") }}',
        //         autoClose: false
        //     }).then((result) => {
        //         showSpinner();
        //         form.submit();
        //     }).catch(() => {
        //         console.log('{{ __("admin/profile.modal.cancel_log") }}');
        //     });

        //     setTimeout(() => {
        //         if (submitBtn.disabled) {
        //             resetButton();
        //         }
        //     }, 5000);
        // });
    });
</script>
@endpush