@extends('admin.auth')
@section('content')
    <div class="d-flex flex-center flex-column align-items-stretch h-lg-100 w-md-400px">
        <div class="d-flex flex-center flex-column flex-column-fluid pb-15 pb-lg-20">

            @include('admin._includes.flash')

            {!! Form::open(['route' => 'password.update', 'method' => 'post', 'class' => 'form w-100', 'id' => 'kt_form', 'novalidate' => 'novalidate']) !!}
                {!! Form::hidden('token', $token) !!}
                <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('login')}}" class="link-primary fw-bold">Inicia sesión</a>
                    </div>
                </div>
                <div class="fv-row form-floating mb-8">
                    {!! Form::email('email', null, ['class' => 'form-control bg-transparent', 'autocomplete' => 'off', 'placeholder' => 'Correo electrónico']) !!}
                    <label for="email">Correo electrónico</label>
                </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 bg-transparent', 'autocomplete' => 'off', 'placeholder' => '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="ki-duotone ki-eye-slash fs-2"></i>
                                <i class="ki-duotone ki-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 form-floating mb-8">
                    {!! Form::password('password_confirmation', ['class' => 'form-control bg-transparent', 'autocomplete' => 'off', 'placeholder' => 'Repetir contraseña']) !!}
                    <label for="password_confirmation">Repetir contraseña</label>
                </div>
                <div class="d-grid mb-10">
                    <button type="submit" id="kt_submit" class="btn btn-primary">Continuar</button>
                </div>
                @if(session('status'))
                    <div class="alert alert-success" role="alert">
                        {{ session('status') }}
                    </div>
                @endif
            {!! Form::close() !!}
        </div>
    </div>
@endsection
@push('scripts')
    <script>

        let validator;
        const form = document.querySelector('#kt_form');
        const submitButton = document.querySelector('#kt_submit');

        KTUtil.onDOMContentLoaded(function() {

            KTPasswordMeter.getInstance(form.querySelector('[data-kt-password-meter="true"]'));
            validator = FormValidation.formValidation(form, {
				fields: {
                    'email': {validators: {notEmpty: {message: 'Ingresá tu correo'}}},
                    'password': {validators: {notEmpty: {message: 'La contraseña es requerido'}}},
                    'password_confirmation': {
                        validators: {
                            notEmpty: {message: 'Ingresá 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();
                    }
                });
            });
        });
    </script>
@endpush