@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="sm:hidden">
                        <div class="form-wrapper bg-gray-light">
                            <select class="form-style bg-transparent" name="selectName" onchange="location = this.value;">
                                <option value="{{ mwz_route('frontend.m.info') }}">@lang('frontend.my_account')</option>
                                <option selected value="#">@lang('frontend.member_password')</option>
                                <option value="{{ mwz_route('frontend.m.purchased') }}">@lang('frontend.member_order_list')</option>
                            </select>
                        </div>
                    </div>
                    <div class="portal-switcher switcher-member">
                        <h2 class="title-text uppercase unactives">@lang('frontend.my_account')
                            <a href="{{ mwz_route('frontend.m.info') }}"> </a>
                        </h2>
                        <h2 class="title-text uppercase">@lang('frontend.member_password')</h2>
                        <h2 class="title-text uppercase unactives">@lang('frontend.member_order_list')
                            <a href="{{ mwz_route('frontend.m.purchased') }}"> </a>
                        </h2>
                    </div>
                    <div class="row mt-4 justify-center">
                        <div class="col-12 col-sm-11 col-lg-10">
                            <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="password">@lang('frontend.frnd_23')</label>
                                    <input class="form-style" type="password" id="password" name="password" placeholder="@lang('frontend.frnd_24')">
                                    <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">@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>
                            </form>
                        </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() + "m-repassword/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 = {
                        password: "required",
                        new_password: {
                            required: true,
                            minlength: 8
                        },
                        new_password_again: {
                            required: true,
                            minlength: 8
                        }
                    }

                    let messages = {
                        password: "{{ __('frontend.frnd_24') }}",
                        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')
                        JsReload(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