@extends('auth.layouts.app')

@section('title', 'Changer le mot de passe - ePerformance+')

@section('content')
<!-- -------------------------------------------------------------- -->
<!-- Change Password box -->
<!-- -------------------------------------------------------------- -->
<div class="row auth-wrapper gx-0">
    <div class="col-lg-4 col-xl-3 bg-info auth-box-2 on-sidebar">
        <div class="h-100 d-flex align-items-center justify-content-center">
            <div class="row justify-content-center text-center">
                <div class="col-md-7 col-lg-12 col-xl-9">
                    <h1 class="mb-0 fw-bold text-black">
                        <span class="text-black">e</span><span class="text-black">Performance</span><span class="text-warning fw-bolder">+</span>
                    </h1>
                    <h2 class="text-white mt-4 fw-light">Sécurité de votre <span class="font-weight-medium">compte</span></h2>
                    <p class="op-5 text-white fs-4 mt-4">Pour des raisons de sécurité, vous devez changer votre mot de passe lors de votre première connexion.</p>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-8 col-xl-9 d-flex align-items-center justify-content-center">
        <div class="row justify-content-center w-100 mt-4 mt-lg-0">
            <div class="col-lg-6 col-xl-3 col-md-7">
                <div class="card">
                    <div class="card-body">
                        <h2>Changer le mot de passe</h2>
                        <p class="text-muted fs-4">Entrez votre mot de passe actuel et choisissez un nouveau mot de passe sécurisé</p>
                        @if ($errors->any())
                            <div class="alert alert-danger">
                                <strong>Erreurs de validation :</strong>
                                <ul class="mb-0 mt-2">
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif

                        <div class="alert alert-info">
                            <strong>Exigences du mot de passe :</strong>
                            <ul class="mb-0 mt-2">
                                <li>Au moins 8 caractères</li>
                                <li>Au moins une lettre minuscule</li>
                                <li>Au moins une lettre majuscule</li>
                                <li>Au moins un chiffre</li>
                                <li>Au moins un caractère spécial (@$!%*#?&)</li>
                                <li>Doit être différent du mot de passe actuel</li>
                            </ul>
                        </div>
                        <form class="form-horizontal mt-4 pt-4" method="POST" action="{{ route('password.change.update') }}" id="passwordForm">
                            @csrf
                            <div class="form-floating mb-3">
                                <input type="password" class="form-control form-input-bg @error('current_password') is-invalid @enderror" id="current-password"
                                    name="current_password" placeholder="*****" required>
                                <label for="current-password">Mot de passe actuel</label>
                                @error('current_password')
                                    <div class="invalid-feedback d-block">
                                        {{ $message }}
                                    </div>
                                @enderror
                            </div>

                            <div class="form-floating mb-3">
                                <input type="password" class="form-control form-input-bg @error('password') is-invalid @enderror" id="password"
                                    name="password" placeholder="*****" required>
                                <label for="password">Nouveau mot de passe</label>
                                <small class="text-muted">Minimum 8 caractères avec minuscule, majuscule, chiffre et @$!%*#?&</small>
                                @error('password')
                                    <div class="invalid-feedback d-block">
                                        {{ $message }}
                                    </div>
                                @enderror
                            </div>

                            <div class="form-floating mb-3">
                                <input type="password" class="form-control form-input-bg @error('password_confirmation') is-invalid @enderror" id="password-confirm"
                                    name="password_confirmation" placeholder="*****" required>
                                <label for="password-confirm">Confirmer le nouveau mot de passe</label>
                                @error('password_confirmation')
                                    <div class="invalid-feedback d-block">
                                        {{ $message }}
                                    </div>
                                @enderror
                            </div>

                            <div class="d-flex align-items-stretch button-group mt-4 pt-2">
                                <button type="submit" class="btn btn-info btn-lg px-4" id="submitBtn">Changer le mot de passe</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- -------------------------------------------------------------- -->
<!-- Change Password box -->
<!-- -------------------------------------------------------------- -->

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const passwordInput = document.getElementById('password');
    const passwordConfirmInput = document.getElementById('password-confirm');
    const passwordRequirements = document.querySelector('.alert-info ul');

    passwordInput.addEventListener('input', function() {
        const password = passwordInput.value;
        const requirements = {
            length: password.length >= 8,
            lowercase: /[a-z]/.test(password),
            uppercase: /[A-Z]/.test(password),
            number: /[0-9]/.test(password),
            special: /[@$!%*#?&]/.test(password),
        };

        const items = passwordRequirements.querySelectorAll('li');

        const updateClass = (element, isValid) => {
            element.classList.remove('text-dark', 'text-danger', 'text-white');
            if (isValid) {
                element.classList.add('text-white');
            } else {
                element.classList.add('text-danger');
            }
        };

        updateClass(items[0], requirements.length);
        updateClass(items[1], requirements.lowercase);
        updateClass(items[2], requirements.uppercase);
        updateClass(items[3], requirements.number);
        updateClass(items[4], requirements.special);
    });

    passwordConfirmInput.addEventListener('input', function() {
        const password = passwordInput.value;
        const confirmPassword = passwordConfirmInput.value;
        const confirmFeedback = document.querySelector('#password-confirm').nextElementSibling;

        if (confirmPassword && password !== confirmPassword) {
            confirmFeedback.textContent = 'Les mots de passe ne correspondent pas.';
            confirmFeedback.style.display = 'block';
            passwordConfirmInput.classList.add('is-invalid');
        } else {
            confirmFeedback.style.display = 'none';
            passwordConfirmInput.classList.remove('is-invalid');
        }
    });
});
</script>
@endpush
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('passwordForm');
    const submitBtn = document.getElementById('submitBtn');

    if (form) {
        form.addEventListener('submit', function(e) {
            console.log('Form submitted');

            const currentPassword = document.getElementById('current-password').value;
            const newPassword = document.getElementById('password').value;
            const confirmPassword = document.getElementById('password-confirm').value;

            const hasLowercase = /[a-z]/.test(newPassword);
            const hasUppercase = /[A-Z]/.test(newPassword);
            const hasNumber = /\d/.test(newPassword);
            const hasSpecial = /[@$!%*#?&]/.test(newPassword);
            const isLongEnough = newPassword.length >= 8;
            const isDifferent = currentPassword !== newPassword;

            console.log('Password checks:', {
                hasLowercase,
                hasUppercase,
                hasNumber,
                hasSpecial,
                isLongEnough,
                isDifferent
            });

            submitBtn.disabled = true;
            submitBtn.innerHTML = '<i class="mdi mdi-loading mdi-spin"></i> Changement en cours...';

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