@php
    $passwordInputId = $passwordInputId ?? 'password';
@endphp

<ul class="list-unstyled small mt-1 mb-0 password-rules" data-input="#{{ $passwordInputId }}" style="display: none;">
    <li data-rule="length"><i class="fa fa-fw fa-times"></i> Au moins 8 caractères</li>
    <li data-rule="lowercase"><i class="fa fa-fw fa-times"></i> Au moins une lettre minuscule</li>
    <li data-rule="uppercase"><i class="fa fa-fw fa-times"></i> Au moins une lettre majuscule</li>
    <li data-rule="number"><i class="fa fa-fw fa-times"></i> Au moins un chiffre</li>
    <li data-rule="special"><i class="fa fa-fw fa-times"></i> Au moins un caractère spécial</li>
</ul>

@once
@push('css')
<style>
    .password-rules li {
        color: #dc3545;
        transition: all 0.3s;
    }
    .password-rules li.valid {
        display: none;
    }
</style>
@endpush

@push('js')
<script>
$(function() {
    $('.password-rules').each(function() {
        var $rules = $(this);
        var inputSelector = $rules.data('input');
        var $input = $(inputSelector);

        if (!$input.length) return;

        var checks = {
            length:    function(v) { return v.length >= 8; },
            lowercase: function(v) { return /[a-z]/.test(v); },
            uppercase: function(v) { return /[A-Z]/.test(v); },
            number:    function(v) { return /[0-9]/.test(v); },
            special:   function(v) { return /[^A-Za-z0-9]/.test(v); }
        };

        $input.on('input keyup', function() {
            var val = $(this).val();
            if (val.length === 0) {
                $rules.hide();
                return;
            }
            $rules.find('li').each(function() {
                var rule = $(this).data('rule');
                if (checks[rule]) {
                    $(this).toggleClass('valid', checks[rule](val));
                }
            });
            $rules.show();
        });
    });
});
</script>
@endpush
@endonce
