@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">
            @if(isset($_GET['resetStatus']) && $_GET['resetStatus'] == 0)
                <div class="alert alert-danger d-flex align-items-center p-5 mb-10">
                    <i class="ki-duotone ki-shield-cross fs-2hx text-danger me-4">
                        <span class="path1"></span><span class="path2"></span>
                        <span class="path3"></span>
                    </i>
                    <div class="d-flex flex-column">
                        <span class="fw-semibold">Ha ocurrido un error con la solicitud.</span>
                    </div>
                </div>
            @endif

            @include('admin._includes.flash')

            {!! Form::open(['route' => 'password.email', 'method' => 'post', 'class' => 'form w-100', 'id' => 'kt_form', 'novalidate' => 'novalidate']) !!}
                <div class="text-center mb-10">
                    <h1 class="text-dark fw-bolder mb-3">¿Olvidaste tu contraseña?</h1>
                    <div class="text-gray-500 fw-semibold fs-6">Ingresa tu correo electrónico</div>
                </div>
                <div class="fv-row form-floating mb-8">
                    {!! Form::email('email', null, ['class' => 'form-control bg-transparent', 'autocomplete' => 'off', 'placeholder' => 'name@example.com']) !!}
                    <label for="email">Correo electrónico</label>
                </div>
                <div class="d-flex flex-wrap justify-content-center pb-lg-0">
                    <button type="submit" id="kt_submit" class="btn btn-primary me-4">Enviar</button>
                    <a href="{{route('login')}}" class="btn btn-light">Cancelar</a>
                </div>
            {!! 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() {

            validator = FormValidation.formValidation(form, {
                fields: {
                    'email': {validators: {notEmpty: {message: 'Ingresá tu correo'}}},
                },
                plugins: {
                    submitButton: new FormValidation.plugins.SubmitButton(),
                    trigger: new FormValidation.plugins.Trigger(),
                    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