@extends('auth.layouts.app')

@section('title', 'Nouveau Mot de Passe - ePerformance+')

@section('content')
<div class="row auth-wrapper gx-0">
    <div class="col-lg-4 col-xl-3 bg-success 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-white">
                        <i class="mdi mdi-lock-reset fs-1"></i>
                    </h1>
                    <h2 class="text-white mt-4 fw-light">Nouveau <span class="font-weight-medium">Mot de Passe</span></h2>
                    <p class="op-5 text-white fs-4 mt-4">Définissez un mot de passe fort et sécurisé.</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-5 col-md-8">
                <div class="card shadow-lg">
                    <div class="card-body p-4">
                        <div class="text-center mb-4">
                            <div class="mb-3">
                                <i class="mdi mdi-check-circle text-success" style="font-size: 64px;"></i>
                            </div>
                            <h2 class="fw-bold">Nouveau Mot de Passe</h2>
                            <p class="text-muted fs-5">Pour <strong>{{ session('email') }}</strong></p>
                        </div>

                        @if ($errors->any())
                            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                <i class="mdi mdi-alert-circle me-2"></i>
                                <strong>Erreur :</strong>
                                <ul class="mb-0 mt-2">
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                            </div>
                        @endif

                        @if (session('success'))
                            <div class="alert alert-success alert-dismissible fade show" role="alert">
                                <i class="mdi mdi-check-circle me-2"></i>
                                {{ session('success') }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                            </div>
                        @endif

                        <div class="alert alert-success">
                            <i class="mdi mdi-check"></i>
                            <strong>Étape 3/3 :</strong> Définissez votre nouveau mot de passe
                        </div>

                        <form method="POST" action="{{ route('password.update') }}" class="needs-validation" novalidate>
                            @csrf
                            <input type="hidden" name="email" value="{{ session('email') }}">

                            <div class="form-floating mb-3">
                                <input type="password"
                                    class="form-control @error('password') is-invalid @enderror"
                                    id="password"
                                    name="password"
                                    placeholder="********"
                                    minlength="8"
                                    required
                                    autofocus>
                                <label for="password">
                                    <i class="mdi mdi-lock"></i> Nouveau Mot de Passe
                                </label>
                                @error('password')
                                    <div class="invalid-feedback d-block">
                                        {{ $message }}
                                    </div>
                                @enderror
                            </div>

                            <div class="form-floating mb-3">
                                <input type="password"
                                    class="form-control @error('password_confirmation') is-invalid @enderror"
                                    id="password_confirmation"
                                    name="password_confirmation"
                                    placeholder="********"
                                    minlength="8"
                                    required>
                                <label for="password_confirmation">
                                    <i class="mdi mdi-lock-check"></i> Confirmer le Mot de Passe
                                </label>
                                @error('password_confirmation')
                                    <div class="invalid-feedback d-block">
                                        {{ $message }}
                                    </div>
                                @enderror
                            </div>

                            <!-- Password Strength Indicator -->
                            <div class="mb-3">
                                <div class="d-flex justify-content-between align-items-center mb-1">
                                    <small class="text-muted">Force du mot de passe :</small>
                                    <small id="strength-text" class="fw-bold"></small>
                                </div>
                                <div class="progress" style="height: 8px;">
                                    <div id="strength-bar" class="progress-bar" role="progressbar" style="width: 0%"></div>
                                </div>
                            </div>

                            <!-- Password Requirements -->
                            <div class="card bg-light mb-4">
                                <div class="card-body p-3">
                                    <h6 class="card-title small mb-2">
                                        <i class="mdi mdi-shield-check"></i> Exigences du mot de passe :
                                    </h6>
                                    <ul class="mb-0 small" id="requirements">
                                        <li id="req-length" class="text-muted">
                                            <i class="mdi mdi-close-circle"></i> Au moins 8 caractères
                                        </li>
                                        <li id="req-uppercase" class="text-muted">
                                            <i class="mdi mdi-close-circle"></i> Une lettre majuscule
                                        </li>
                                        <li id="req-lowercase" class="text-muted">
                                            <i class="mdi mdi-close-circle"></i> Une lettre minuscule
                                        </li>
                                        <li id="req-number" class="text-muted">
                                            <i class="mdi mdi-close-circle"></i> Un chiffre
                                        </li>
                                    </ul>
                                </div>
                            </div>

                            <div class="form-check mb-4">
                                <input class="form-check-input" type="checkbox" id="show-passwords">
                                <label class="form-check-label" for="show-passwords">
                                    Afficher les mots de passe
                                </label>
                            </div>

                            <div class="d-grid gap-2 mb-3">
                                <button type="submit" class="btn btn-success btn-lg" id="submit-btn" disabled>
                                    <i class="mdi mdi-content-save"></i> Réinitialiser le Mot de Passe
                                </button>
                            </div>
                        </form>

                        <div class="text-center">
                            <p class="text-muted small mb-0">
                                <i class="mdi mdi-information"></i> Une fois réinitialisé, vous serez redirigé vers la page de connexion
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    // Validation Bootstrap
    (function () {
        'use strict'
        var forms = document.querySelectorAll('.needs-validation')
        Array.prototype.slice.call(forms)
            .forEach(function (form) {
                form.addEventListener('submit', function (event) {
                    if (!form.checkValidity()) {
                        event.preventDefault()
                        event.stopPropagation()
                    }
                    form.classList.add('was-validated')
                }, false)
            })
    })()

    // Show/Hide Password
    document.getElementById('show-passwords').addEventListener('change', function() {
        const passwordField = document.getElementById('password');
        const confirmField = document.getElementById('password_confirmation');
        const type = this.checked ? 'text' : 'password';
        passwordField.type = type;
        confirmField.type = type;
    });

    // Password Strength Checker
    const passwordInput = document.getElementById('password');
    const confirmInput = document.getElementById('password_confirmation');
    const strengthBar = document.getElementById('strength-bar');
    const strengthText = document.getElementById('strength-text');
    const submitBtn = document.getElementById('submit-btn');

    const requirements = {
        length: document.getElementById('req-length'),
        uppercase: document.getElementById('req-uppercase'),
        lowercase: document.getElementById('req-lowercase'),
        number: document.getElementById('req-number')
    };

    function checkPasswordStrength(password) {
        let strength = 0;
        const checks = {
            length: password.length >= 8,
            uppercase: /[A-Z]/.test(password),
            lowercase: /[a-z]/.test(password),
            number: /[0-9]/.test(password)
        };

        // Update requirements list
        Object.keys(checks).forEach(key => {
            if (checks[key]) {
                requirements[key].classList.remove('text-muted');
                requirements[key].classList.add('text-success');
                requirements[key].querySelector('i').className = 'mdi mdi-check-circle';
                strength++;
            } else {
                requirements[key].classList.remove('text-success');
                requirements[key].classList.add('text-muted');
                requirements[key].querySelector('i').className = 'mdi mdi-close-circle';
            }
        });

        // Update strength bar
        const percentage = (strength / 4) * 100;
        strengthBar.style.width = percentage + '%';

        if (strength === 0) {
            strengthBar.className = 'progress-bar';
            strengthText.textContent = '';
            strengthText.className = '';
        } else if (strength <= 2) {
            strengthBar.className = 'progress-bar bg-danger';
            strengthText.textContent = 'Faible';
            strengthText.className = 'fw-bold text-danger';
        } else if (strength === 3) {
            strengthBar.className = 'progress-bar bg-warning';
            strengthText.textContent = 'Moyen';
            strengthText.className = 'fw-bold text-warning';
        } else {
            strengthBar.className = 'progress-bar bg-success';
            strengthText.textContent = 'Fort';
            strengthText.className = 'fw-bold text-success';
        }

        return strength === 4;
    }

    function validatePasswords() {
        const password = passwordInput.value;
        const confirm = confirmInput.value;

        const isStrong = checkPasswordStrength(password);
        const isMatching = password === confirm && password.length > 0;

        // Enable submit only if password is strong and matches
        submitBtn.disabled = !(isStrong && isMatching);

        // Visual feedback for matching
        if (confirm.length > 0) {
            if (isMatching) {
                confirmInput.classList.remove('is-invalid');
                confirmInput.classList.add('is-valid');
            } else {
                confirmInput.classList.remove('is-valid');
                confirmInput.classList.add('is-invalid');
            }
        } else {
            confirmInput.classList.remove('is-valid', 'is-invalid');
        }
    }

    passwordInput.addEventListener('input', validatePasswords);
    confirmInput.addEventListener('input', validatePasswords);

    // Real-time password match indicator
    confirmInput.addEventListener('blur', function() {
        if (this.value && this.value !== passwordInput.value) {
            const feedback = document.createElement('div');
            feedback.className = 'invalid-feedback d-block';
            feedback.textContent = 'Les mots de passe ne correspondent pas.';

            // Remove existing feedback
            const existing = this.parentElement.querySelector('.invalid-feedback');
            if (existing) existing.remove();

            this.parentElement.appendChild(feedback);
        }
    });
</script>
@endpush