@extends('admin.auth')
@section('content')
    <div class="d-flex flex-center w-lg-50 p-10">
        @include('admin._includes.flash')
        <div class="card rounded-3 w-md-550px">
            <div class="card-body p-10 p-lg-20">
                {!! Form::open(['route' => 'admin.password.update', 'method' => 'post', 'class' => 'form w-100', 'id' => 'kt_new_password_form', 'novalidate' => 'novalidate']) !!}
                    {!! Form::hidden('token', $passtoken) !!}
                    <div class="text-center mb-10">
                        <h1 class="text-dark fw-bolder mb-3">Cambiar contraseña</h1>
                        <div class="text-gray-500 fw-semibold fs-6">
                            ¿Ya cambiaste o recordaste tu contraseña? <a href="{{ route('admin.login') }}" class="link-primary fw-bolder">Inicia sesión</a>
                        </div>
                    </div>
                    <div class="fv-row mb-8">
                        {!! Form::text('email', old('email'), ['class' => 'form-control form-control-lg form-control-solid' . ($errors->has('email') ? ' is-invalid' : ''), 'autocomplete' => 'off', 'placeholder' => 'Correo electrónico']) !!}
                        @if($errors->has('email'))
                            <div class="invalid-feedback">{{ $errors->first('email') }}</div>
                        @endif
                    </div>
                    <div class="fv-row mb-8" data-kt-password-meter="true">
                        <div class="mb-1">
                            <div class="position-relative mb-3">
                                {!! Form::password('password', ['class' => 'form-control form-control-lg form-control-solid' . ($errors->has('password') ? ' is-invalid' : ''), 'autocomplete' => 'off', 'placeholder' => 'Nueva contraseña']) !!}
                                <span class="btn btn-sm btn-icon position-absolute translate-middle top-50 end-0 me-n2" data-kt-password-meter-control="visibility">
                                    <i class="bi bi-eye-slash fs-2"></i>
                                    <i class="bi bi-eye fs-2 d-none"></i>
                                </span>
                            </div>
                            <div class="d-flex align-items-center mb-3" data-kt-password-meter-control="highlight">
                                <div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px me-2"></div>
                                <div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px me-2"></div>
                                <div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px me-2"></div>
                                <div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px"></div>
                            </div>
                        </div>
                        <div class="text-muted">Para una contraseña segura use 8 o más caracteres mazclados con números y/o símbolos.</div>
                    </div>
                    <div class="fv-row mb-8">
                        {!! Form::password('password_confirmation', ['class' => 'form-control form-control-lg form-control-solid', 'autocomplete' => 'off', 'placeholder' => 'Repetir nueva contraseña']) !!}
                    </div>
                    <div class="d-grid mb-10">
                        <button type="button" id="kt_new_password_submit" class="btn btn-primary fw-bolder">Continuar</button>
                    </div>
                {!! Form::close() !!}
            </div>
        </div>
    </div>
@endsection
@push('scripts')
    <script>
        KTUtil.onDOMContentLoaded(function() {
            var form = document.querySelector('#kt_new_password_form');
            var submitButton = document.querySelector('#kt_new_password_submit');
            var passwordMeter = KTPasswordMeter.getInstance(form.querySelector('[data-kt-password-meter="true"]'));

            var validator = FormValidation.formValidation(form, {
				fields: {
                    'email': {validators: {notEmpty: {message: 'Ingresá tu correo'}}},
                    'password': {
                        validators: {
                            notEmpty: {message: 'Ingrese una nueva contraseña'},
                            callback: {
                                message: 'Ingrese una contraseña más segura',
                                callback: function(input) {
                                    if (input.value.length > 0) {
                                        return validatePassword();
                                    }
                                }
                            }
                        }
                    },
                    'password_confirmation': {
                        validators: {
                            notEmpty: {message: 'Ingrese la confirmación de contraseña'},
                            identical: {
                                compare: function() {
                                    return form.querySelector('[name="password"]').value;
                                },
                                message: 'La confirmación es diferente a la contraseña'
                            }
                        }
                    },
				},
				plugins: {
                    submitButton: new FormValidation.plugins.SubmitButton(),
					trigger: new FormValidation.plugins.Trigger({event: {password: false}}),
					bootstrap: new FormValidation.plugins.Bootstrap5({
                        rowSelector: '.fv-row',
                        eleInvalidClass: 'is-invalid border-danger',
                        eleValidClass: ''
                    })
				}
			});

            submitButton.addEventListener('click', function (e) {
                e.preventDefault();
                submitButton.disabled = true;
                validator.validate().then(function (status) {
                    submitButton.disabled = false;
                    if (status == 'Valid') {
                        form.submit();
                    } else {
                        Swal.fire({
                            text: "Se detectarón algunos errores, favor intentar de nuevo.",
                            icon: "error",
                            buttonsStyling: false,
                            confirmButtonText: "Ok!",
                            customClass: {
                                confirmButton: "btn btn-primary"
                            }
                        });
                    }
                });
            });

            function validatePassword(){
                return  passwordMeter.getScore() === 100;
            }
        });
    </script>
@endpush