@extends('frontend::layouts.master')
@section('title')

@section('style')

@endsection

@section('content')

    <main>
        <div class="full-y-starter">
            <div class="container">
                <div class="info-cont">
                    <div class="row mt-4 justify-center">
                        <div class="col-12 col-sm-11 col-lg-10">
                            @if ($type == 0)
                                <h4 class="text-center mt-3 mb-3">@lang('frontend.frnd_82')</h4>
                            @elseif($type == 1)
                                <h4 class="text-center mt-3 mb-3">@lang('frontend.frnd_82')</h4>
                            @elseif($type == 2)
                                <h4 class="text-center mt-3 mb-3">@lang('frontend.frnd_81')</h4>
                            @elseif($type == 3)
                                <h4 class="text-center mt-3">@lang('frontend.reset_password')</h4>
                                <form class="form-wrapper px-4 space-y-4" id="frm_password" onsubmit="savePassword(); return false;">
                                    @csrf
                                    <div class="col-md-12 relative">
                                        <label for="new_password">@lang('frontend.frnd_25')</label>
                                        <input class="form-style" type="Password" id="new_password" name="new_password" placeholder="@lang('frontend.frnd_26')">
                                        <div class="toggle-password" onclick="togglePassword(this)"><i class="fa fa-eye" id="check-eye-open"></i></div>
                                    </div>
                                    <div class="col-md-12 relative">
                                        <label for="new_password_again">@lang('frontend.frnd_27')</label>
                                        <input class="form-style" type="Password" id="new_password_again" name="new_password_again" placeholder="@lang('frontend.frnd_28')">
                                        <div class="toggle-password" onclick="togglePassword(this)"><i class="fa fa-eye" id="check-eye-open"></i></div>
                                    </div>
                                    <div class="alert alert-danger" style="display: none" id="msg-error" role="alert"></div>
                                    <div class="alert alert-success" style="display: none" id="msg-success" role="alert"></div>
                                    <div class="col-12 py-6">
                                        <button type="submit" class="account-btn butn-submit add2bag-btn uppercase px-5 py-3">@lang('frontend.member_submit')</button>
                                    </div>
                                    <input type="hidden" name="token" value="{{ $token ?? '' }}">
                                    <input type="hidden" name="email" value="{{ $email ?? '' }}">
                                </form>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
@endsection

@section('script')
    <!-- validator js -->
    <script src="{{ URL::asset('assets/plugins/validator/js/jquery.validate.min.js') }}"></script>

    <script type="text/javascript">
        savePassword = function() {
            let frm_data = new FormData($('#frm_password')[0]);
            let url_webpage = $('#url_webpage').val();

            $.ajax({
                url: url_webpage + locale_lang() + "reset-password/save",
                type: "POST",
                contentType: false,
                data: frm_data,
                processData: false,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function(xhr) {
                    let rules = {
                        new_password: {
                            required: true,
                            minlength: 8
                        },
                        new_password_again: {
                            required: true,
                            minlength: 8
                        }
                    }

                    let messages = {
                        new_password: {
                            required: "{{ __('frontend.frnd_26') }}",
                            minlength: "{{ __('frontend.input_password8') }}"
                        },
                        new_password_again: {
                            required: "{{ __('frontend.frnd_28') }}",
                            minlength: "{{ __('frontend.input_password8') }}"
                        }
                    }

                    mwz_frm_validate($("#frm_password"), rules, messages)
                    return $("#frm_password").valid();
                },
                success: function(resp) {
                    if (resp.success) {
                        $('#msg-success').html(resp.msg)
                        $('#msg-success').css('display', 'block')
                        $('#msg-error').css('display', 'none')
                        JsRedirect(url_webpage + locale_lang() + 'login', 1500)
                    } else {
                        $('#msg-error').html(resp.msg)
                        $('#msg-error').css('display', 'block')
                    }
                },
            });
        }

        $('#password').on('keyup', function() {
            $('#msg-error').css('display', 'none')
        })
        $('#new_password').on('keyup', function() {
            $('#msg-error').css('display', 'none')
        })
        $('#new_password_again').on('keyup', function() {
            $('#msg-error').css('display', 'none')
        })
    </script>
@endsection