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

@section('style')
    <style>
        button:disabled {
            pointer-events: none;
            opacity: 0.4;
        }
    </style>
@endsection

@section('content')
    <main>
        <div class="full-y-starter">
            <div class="container">
                <div class="info-cont">
                    <div class="portal-switcher">
                        <h2 class="title-text uppercase">@lang('frontend.login')</h2>
                        <h2 class="title-text uppercase unactives">@lang('frontend.register')
                            <a href="{{ mwz_route('frontend.register') }}"></a>
                        </h2>
                    </div>
                    <div class="row mt-4 justify-center">
                        <div class="col-12 col-sm-8 col-lg-8">
                            <form class="form-wrapper px-4" id="frm_login" onsubmit="CheckLogin(); return false;">
                                @csrf
                                <div class="form-space">
                                    <div class="col-12 show-error" style="display: none">
                                        <div class="alert alert-danger msg-error" role="alert"></div>
                                    </div>
                                    <div class="col-12">
                                        <label for="email">@lang('frontend.register_email')</label>
                                        <input class="form-style " type="text" id="email" name="email" placeholder="@lang('frontend.input_email')">
                                    </div>
                                    <div class="col-12 relative">
                                        <div class="flex items-center justify-between">
                                            <label for="Password">@lang('frontend.password_login')</label>
                                            <p class="forget" data-bs-toggle="modal" data-bs-target="#contactModal">@lang('frontend.forgot_password')</p>
                                        </div>
                                        {{-- เพิ่มคลาส invalid-item ในกรณีที่กรอกข้อมูลไม่ถูกต้อง และ ข้อความแจ้งเตือน(invalid-noti)จะต้องอยู่ถัดจาก input เท่านั้น --}}
                                        <input class="form-style " type="password" id="password" name="password" placeholder="@lang('frontend.input_password')">
                                        <div class="toggle-password" onclick="togglePassword(this)">
                                            <div ><i id="check-eye-open" class="slash fa fa-eye"></i></div>
                                        </div>
                                        {{-- <p class="invalid-noti">*ท่านกรอกรหัสผ่านไม่ถูกต้อง กรุณากรอกใหม่อีกครั้ง หรือกดลืมรหัสผ่าน</p> --}}
                                    </div>
                                    <div class="col-12 pt-6">
                                        <input type="submit" class="account-btn butn-submit add2bag-btn uppercase px-5 py-3" value="@lang('frontend.login')">
                                    </div>
                                    <div class="col-12 pb-6 text-center">
                                        <p>@lang('frontend.account')
                                            <a href="{{ mwz_route('frontend.register') }}">@lang('frontend::lang.login_01')</a>
                                        </p>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="modal fade" id="contactModal" tabindex="-1" aria-labelledby="contactModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content">
                            <div class="modal-body space-y-6 py-12 text-center">
                                <div class="text-2xl">@lang('frontend.forgot_tile')</div>
                                <p>@lang('frontend.forgot_detail')</p>
                                <form class="form-wrapper" id="frm_reset_password" onsubmit="resetPassword(); return false;">
                                    <div class="alert alert-danger msg-error-reset" style="display: none;" role="alert"></div>
                                    <input class="border border-gray-lighter form-style" type="text" name="re_email" id="re_email" placeholder="@lang('frontend.input_email')" />
                                    <button type="submit" id="btn-reset" class="mt-4 account-btn butn-submit add2bag-btn uppercase px-5 py-2 w-auto">@lang('frontend.ok')</button>
                                </form>
                            </div>
                        </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">
        CheckLogin = function() {
            let frm_data = new FormData($('#frm_login')[0]);
            frm_data.append('old_url',"{{$pageInit['old_url']}}")
            let url_webpage = $('#url_webpage').val();

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

                    let messages = {
                        email: {
                            required: "โปรดระบุอีเมล!",
                            email: "อีเมลไม่ถูกต้อง!"
                        },
                        password: {
                            required: "โปรดระบุรหัสผ่าน!",
                            minlength: "รหัสผ่านต้องมีอย่างน้อย 8 ตัว"
                        }
                    }

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

        $('#email').keyup(function() {
            if ($('.show-error').css('display') == 'block') {
                $('.show-error').css('display', 'none')
            }
        })
        $('#password').keyup(function() {
            if ($('.show-error').css('display') == 'block') {
                $('.show-error').css('display', 'none')
            }
        })

        resetPassword = function() {
            let frm_data = new FormData($('#frm_reset_password')[0]);
            let url_webpage = $('#url_webpage').val();
            btnLoading(2, "{{ __('frontend.ok') }}", '#btn-reset')

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

                    let messages = {
                        re_email: {
                            required: "โปรดระบุอีเมล!",
                            email: "อีเมลไม่ถูกต้อง!"
                        }
                    }

                    mwz_frm_validate($("#frm_reset_password"), rules, messages)
                    if (!$("#frm_reset_password").valid()) {
                        btnLoading(1, "{{ __('frontend.ok') }}", '#btn-reset')
                    }
                    return $("#frm_reset_password").valid();
                },
                success: function(resp) {
                    if (resp.success) {
                        $('.msg-error-reset').html(resp.msg)
                        $('.msg-error-reset').css('display', 'block')
                        $('.msg-error-reset').addClass('alert-success')
                        $('.msg-error-reset').removeClass('alert-danger')
                        JsReload(2000)
                    } else {
                        $('.msg-error-reset').html(resp.msg)
                        $('.msg-error-reset').css('display', 'block')
                        $('.msg-error-reset').removeClass('alert-success')
                        $('.msg-error-reset').addClass('alert-danger')
                    }
                    btnLoading(1, "{{ __('frontend.ok') }}", '#btn-reset')
                },
            });
        }

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