@extends('admin.auth')
@section('content')
    <div class="d-flex flex-center w-lg-50 p-10">
        @include('admin._includes.flash')
        @if(isset($_GET['resetStatus']) && $_GET['resetStatus'] == 0)
            <div class="alert alert-danger d-flex align-items-center p-5 mb-10">
                <span class="svg-icon svg-icon-2hx svg-icon-danger me-4">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                        <path opacity="0.3" d="M20.5543 4.37824L12.1798 2.02473C12.0626 1.99176 11.9376 1.99176 11.8203 2.02473L3.44572 4.37824C3.18118 4.45258 3 4.6807 3 4.93945V13.569C3 14.6914 3.48509 15.8404 4.4417 16.984C5.17231 17.8575 6.18314 18.7345 7.446 19.5909C9.56752 21.0295 11.6566 21.912 11.7445 21.9488C11.8258 21.9829 11.9129 22 12.0001 22C12.0872 22 12.1744 21.983 12.2557 21.9488C12.3435 21.912 14.4326 21.0295 16.5541 19.5909C17.8169 18.7345 18.8277 17.8575 19.5584 16.984C20.515 15.8404 21 14.6914 21 13.569V4.93945C21 4.6807 20.8189 4.45258 20.5543 4.37824Z" fill="black"/>
                        <rect x="9" y="13.0283" width="7.3536" height="1.2256" rx="0.6128" transform="rotate(-45 9 13.0283)" fill="black"/>
                        <rect x="9.86664" y="7.93359" width="7.3536" height="1.2256" rx="0.6128" transform="rotate(45 9.86664 7.93359)" fill="black"/>
                    </svg>
                </span>
                <div class="d-flex flex-column">
                    <span>Ha ocurrido un error con la solicitud.</span>
                </div>
            </div>
        @endif
        <div class="card rounded-3 w-md-550px">
            <div class="card-body p-10 p-lg-20">
                {!! Form::open(['method' => 'post', 'class'=> 'form w-100', 'id' => 'kt_password_reset_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 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="d-flex flex-wrap justify-content-center pb-lg-0">
                        <button type="button" id="kt_password_reset_submit" class="btn btn-primary fw-bolder me-4">Enviar</button>
                        <a href="{{route('admin.login')}}" class="btn btn-light fw-bolder">Cancelar</a>
                    </div>
                {!! Form::close() !!}
            </div>
        </div>
    </div>
@endsection
@push('scripts')
    <script>
        KTUtil.onDOMContentLoaded(function() {
            var form = document.querySelector('#kt_password_reset_form');
            var submitButton = document.querySelector('#kt_password_reset_submit');
            var validator = FormValidation.formValidation(form, {
				fields: {
					'email': {
                        validators: {
                            regexp: {regexp: /^[^\s@]+@[^\s@]+\.[^\s@]+$/, message: 'El correo no es válido'},
                            notEmpty: {message: 'Ingrese su 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();
                    } else {
                        Swal.fire({
                            text: "Se detectarón algunos errores, favor intentar de nuevo.",
                            icon: "error",
                            buttonsStyling: false,
                            confirmButtonText: "Ok!",
                            customClass: {
                                confirmButton: "btn btn-primary"
                            }
                        });
                    }
                });
            });
        });
    </script>
@endpush