@extends('auth.layout')

@section('content')

    <div id="recover-password" class="event-inscription" style="background-color: #f1f5f9;">
        {{--// section_01 BANNER //--}}
        <div id="section_01" class="">
            <div class="homepage-banner no-padding">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="event-inscription-header">

                                <a href="#">
                                    <img class="header-logo" alt="Logo"
                                         src="{{ URL::asset('assets/media/backend/logos/logo_mail.png') }}" style="width: 300px;">
                                </a>

                                <div class="row">
                                    <div class="col-lg-12">
                                        <h1 style="font-size: 18px;">Recuperar Password</h1>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{--// section_02 FORM //--}}
        <div id="section_02" class="">
            <div class="homepage-banner no-padding">
                <div class="container-fluid">


                    {!! Form::open(['url' => route('password.update'), 'method' => 'POST']) !!}
                    {!! Form::hidden('token', $token) !!}
                    <form class="form w-100" id="kt_new_password_form">
                        <div class="row">
                            <div class="col-lg-4 offset-lg-4">
                                <div class="inscription-box">

                                    @if ($errors->any())
                                        <div class="m-form__content" style="margin-bottom: 0;">
                                            <div class="m-alert m-alert--icon alert alert-warning" role="alert"
                                                 style="color:red; background-color: red; border: red" id="m_form_1_msg">
                                                <div class="m-alert__icon" style="color: white;">
                                                    <i class="flaticon-signs-2"></i>
                                                </div>
                                                <div class="m-alert__text" style="color: white;">
                                                    &nbsp;&nbsp;
                                                    @lang("define-password.define-password.text-01")
                                                    <ul>
                                                        @foreach ($errors->all() as $error)
                                                            <li>{{ $error }}</li>
                                                        @endforeach
                                                    </ul>
                                                </div>
                                            </div>
                                            <br/>
                                        </div>
                                    @endif

                                    <div class="row">
                                        <div class="col-lg-12">
                                            <p class="inscription-title"> @lang("define-password.define-password.text-03")</p>
                                        </div>
                                    </div>
                                    <div class="inscription-input-box">
                                        <div class="row">
                                            <div class="col-lg-12">
                                                <p class="input-label"> @lang("define-password.define-password.text-04")</p>
                                                <input class="input-event-inscription form-control form-control-lg" type="email" placeholder="Insira o seu email"
                                                       name="email" autocomplete="off" aria-label="Email Address" value="{{ old('email') }}"/>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-lg-12">
                                                <div class="mb-1" data-kt-password-meter="true">
                                                    <p class="input-label"> @lang("define-password.define-password.text-05")</p>
                                                    <div class="position-relative mb-2">
                                                        <input
                                                            class="input-event-inscription form-control form-control-lg form-control-solid"
                                                            type="password" placeholder="" name="password" aria-label="Password"
                                                            autocomplete="off"/>
                                                        <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"> @lang("define-password.define-password.text-06")</div>


                                                <div class="fv-row mb-10 my-5" data-kt-password-meter="true">
                                                    <p class="input-label">@lang("define-password.define-password.text-07")</p>
                                                    <input
                                                        class="input-event-inscription form-control form-control-lg form-control-solid"
                                                        type="password" placeholder="" name="password_confirmation" aria-label="Confirm Password"
                                                        autocomplete="off"/>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-lg-4 col-6">
{{--                                                <a href="#" class="btn btn-cancel" aria-label="inscrever">@lang("event-inscription.section-1.text-10")</a>--}}
                                            </div>
{{--                                            <div class="col-lg-4">--}}
{{--                                            </div>--}}
                                            <div class="col-lg-4 offset-lg-4 offset-0 col-6">
                                                <button type="submit" class="btn-subscribe" style="background-color:#2563eb!important;border-color: #2563eb;" aria-label="submeter nova password">
                                                     @lang("define-password.define-password.text-08")
                                                </button>
                                                <span class="indicator-progress"> @lang("define-password.define-password.text-09")
									        <span
                                                class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </form>
                    {!! Form::close() !!}
                </div>
            </div>
        </div>
    </div>

@endsection
@section('scripts')
    <script type="text/javascript">

        $('body').on('click touchstart', '.toggle-password', function (event) {
            event.preventDefault(); // Prevents the default behavior of the click event on touch devices

            $(this).toggleClass("fa-eye fa-eye-slash");

            var input = $($(this).attr("toggle"));

            if (input.attr("type") == "password") {
                input.attr("type", "text");
            } else {
                input.attr("type", "password");
            }
        });


    </script>
@endsection