@extends('layouts.frontend-member')
@section('title', __('message.change password'))
@section('content')
    <form action="{{route('member.change-password.store')}}" method="POST">
        {{ csrf_field() }}
        @method('PUT')
        <div id="app" class="app app-passwd">
            <article class="page page-passwd" style="padding-bottom:200px;">
                <header>
                    <h3 class="text-title">แก้ไขรหัสผ่าน</h3>
                    <div class="back cursor" style="z-index: 1000001;"><i class="iconfont icon-fanhui"
                            onclick="history.back()"></i>
                    </div>
                    <div class="action"></div>
                </header>
                <main>
                    <section class="ctt">
                        <div class="c-passwd focus"><i class="iconfont icon-mima"></i>
                            <input placeholder="รหัสผ่านเก่า" maxlength="16" autocomplete="off" type="password"
                                onkeyup="successbtn()" id="textsend_oldpass" required name="old_password">
                            <span style="display: none;"><i class="iconfont icon-qingchu">
                                </i>
                            </span>

                        </div>
                        <div class="c-passwd focus"><i class="iconfont icon-mima"></i> <input placeholder="รหัสผ่านใหม่"
                                maxlength="16" autocomplete="off" type="password" id="textsend_newpass"
                                onkeyup="successbtn()" _mstplaceholder="" _msthash="3" name="password" required>
                            <span style="display: none;"><i class="iconfont icon-qingchu"></i></span>
                        </div>
                    </section>
                    <section class="action">
                        <button class="button" type="submit" id="btnsub" disabled>ส่ง</button>
                    </section>
                </main>


            </article> <!----> <!---->
        </div>
    </form>
    <style>
        .c-passwd {
            align-items: center;
            background-color: #0f1118;
            border: 0.01rem solid #0f1118;
            border-radius: 0.04rem;
            color: #fff;
            display: flex;
            height: 0.4rem;
            width: 100%;
        }

        .c-passwd:focus {
            border-color: none;
            border: none;
        }

        .error {
            position: relative;
            animation: shake .1s linear;
            animation-iteration-count: 3;
            border: 1px solid red;
            outline: none;
        }

        .err {
            align-items: center;
            border: 1px solid #ec5352;
            border-radius: 0.04rem;
            color: #fff;
            display: flex;
            height: 0.4rem;
            width: 100%;
        }
    </style>
    <script>
        $("form input").on("invalid", function(event) {
            $('.focus').addClass('error');
            setTimeout(function() {
                $('.focus').removeClass('error');
            }, 500);
        });

        function successbtn() {
            var old_pass=document.getElementById("textsend_oldpass").value;
            var new_pass=document.getElementById("textsend_newpass").value;
            if ( old_pass=== "" && new_pass === "") {
                document.getElementById('btnsub').disabled = true;
            } else {
                document.getElementById('btnsub').disabled = false; 
                
            }
        }
    </script>
@endsection