
<?php $__env->startSection('content'); ?>

<div class="container">
    <div class="row">
        <div class="col-md-3">
        </div>
        <div class="col-md-6">
            <div class="header-green text-center">
                <h3>เปลี่ยนรหัสผ่าน</h3>
            </div>
            <form id="formChangePass" name="formChangePass">
                <div class="row justify-content-md-center">
                    <div class="col">
                        <div class="mb-3">
                            <label class="form-label">ชื่อผู้ใช้งาน</label>
                            <input id="username" name="username" type="text" class="form-control"
                                placeholder="ชื่อผู้ใช้งาน">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">รหัสผ่านปัจจุบัน</label>
                            <div class="input-group">
                                <input id="password_old" name="password_old" type="password" class="form-control"
                                    placeholder="รหัสผ่านปัจจุบันอย่างน้อย 6 ตัว">
                                <span class="input-group-text" onclick="password_old_view();">
                                    <i class="fas fa-eye" id="show_eye_old"></i>
                                    <i class="fas fa-eye-slash d-none" id="hide_eye_old"></i>
                                </span>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">รหัสผ่านใหม่</label>
                            <div class="input-group">
                                <input id="password_new_1" name="password_new_1" type="password" class="form-control"
                                placeholder="รหัสผ่านใหม่อย่างน้อย 6 ตัว">
                                <span class="input-group-text" onclick="password_new_1_view();">
                                    <i class="fas fa-eye" id="show_eye_new_1"></i>
                                    <i class="fas fa-eye-slash d-none" id="hide_eye_new_1"></i>
                                </span>
                            </div>                            
                        </div>
                        <div class="mb-3">
                            <label class="form-label">รหัสผ่านใหม่อีกครั้ง</label>
                            <div class="input-group">
                                <input id="password_new_2" name="password_new_2" type="password" class="form-control"
                                placeholder="รหัสผ่านใหม่อีกครั้งอย่างน้อย 6 ตัว">
                                <span class="input-group-text" onclick="password_new_2_view();">
                                    <i class="fas fa-eye" id="show_eye_new_2"></i>
                                    <i class="fas fa-eye-slash d-none" id="hide_eye_new_2"></i>
                                </span>
                            </div>                            
                        </div>
                        <div class="mb-3">
                            <div class="row justify-content-md-center">
                                <div class="col-lg-8"></div>
                                <div class="d-grid gap-2 col-lg-4 mx-auto">
                                    <button class="btn btn-warning" type="submit">บันทึก 
                                        <i class="fas fa-save"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
$(document).ready(function() {
    var $summaryForm = $("#formChangePass");
    $summaryForm.validate({
        rules: {
            username: {
                required: true,
            },
            password_old: {
                required: true,
                minlength: 6,
                maxlength: 10,
            },
            password_new_1: {
                required: true,
                minlength: 6,
                maxlength: 10,
            },
            password_new_2: {
                required: true,
                minlength: 6,
                maxlength: 10,
                equalTo: "#password_new_1",
            }
        },
        messages: {
            username: {
                required: "กรุณากรอกชื่อผู้ใช้งาน",
            },
            password_old: {
                required: "กรุณากรอกรหัสผ่าน",
                minlength: "กรุณากรอกรหัสผ่านอย่างน้อย 6 ตัว",
                maxlength: "กรุณากรอกรหัสผ่านไม่เกิน 10 ตัว",
            },
            password_new_1: {
                required: "กรุณากรอกรหัสผ่าน",
                minlength: "กรุณากรอกรหัสผ่านอย่างน้อย 6 ตัว",
                maxlength: "กรุณากรอกรหัสผ่านไม่เกิน 10 ตัว",
            },
            password_new_2: {
                required: "กรุณากรอกรหัสผ่าน",
                minlength: "กรุณากรอกรหัสผ่านอย่างน้อย 6 ตัว",
                maxlength: "กรุณากรอกรหัสผ่านไม่เกิน 10 ตัว",
                equalTo: "กรุณากรอกรหัสผ่านใหม่ให้ตรงกัน",
            }
        },
        submitHandler: function() {
            var user = $("#username").val();
            var pass_old = $("#password_old").val();
            var pass_new = $("#password_new_1").val();
            var form_data = new FormData();
            form_data.append('username', user);
            form_data.append('password_old', pass_old);
            form_data.append('password_new', pass_new);

            $.ajax({
                type: "post",
                url: 'changePass/change',
                data: form_data,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                processData: false,
                contentType: false,
                cache: false,
                success: function(data) {
                    // console.log(data);
                    if (data.status == true) {
                        Swal.fire({
                            icon: 'success',
                            title: 'บันทึกรหัสผ่านใหม่สำเร็จ',
                            text: '',
                            allowOutsideClick: false,
                            focusConfirm: true,
                            confirmButtonText: 'ตกลง',
                        }).then((result) => {
                            if (result.value) {
                                window.location = "home";
                            }
                        })
                    } else {
                        Swal.fire({
                            icon: 'warning',
                            title: 'คำเตือน',
                            text: JSON.stringify(data.message),
                        });
                    }
                },
            });
        },
        errorElement: "div",
        errorPlacement: function(error, element) {
            error.addClass("invalid-feedback");

            if (element.prop("type") === "checkbox") {
                error.insertAfter(element).addClass("invalid-feedback");
            } else {
                error.insertAfter(element);
            }

            var elem = $(element);
            if (elem.hasClass("select2-hidden-accessible")) {
                element = $("#select2-" + elem.attr("id") + "-container").parent();
                error.insertAfter(element).addClass("invalid-feedback");
            } else {
                error.insertAfter(element);
            }

            if (!element.next("span")[0]) {
                $("<span class='glyphicon glyphicon-remove form-control-feedback'></span>")
                    .insertAfter(element);
            }

            if (element.parent().hasClass('input-group')) {
                error.insertAfter(element.parent()).addClass("invalid-feedback");
            } else {
                error.insertAfter(element).addClass("invalid-feedback");
            }
        },
        success: function(label, element) {
            var elem = $(element);
            elem.removeClass("is-invalid");
            elem.addClass("is-valid");
        },
        highlight: function(element, errorClass, validClass) {
            var elem = $(element);
            elem.addClass("is-invalid");
        },
        unhighlight: function(element, errorClass, validClass) {
            var elem = $(element);
            elem.removeClass("is-invalid");
        }
    });

    var forms = document.querySelectorAll('.needs-validation')
    Array.prototype.slice.call(forms)
        .forEach(function(form) {
            form.addEventListener('submit', function(event) {
                if (!form.checkValidity()) {
                    event.preventDefault()
                    event.stopPropagation()
                }
                form.classList.add('was-validated')
            }, false)
        });
});

function password_old_view() {
    var x = document.getElementById("password_old");
    var show_eye = document.getElementById("show_eye_old");
    var hide_eye = document.getElementById("hide_eye_old");
    hide_eye.classList.remove("d-none");
    if (x.type === "password") {
        x.type = "text";
        show_eye.style.display = "none";
        hide_eye.style.display = "block";
    } else {
        x.type = "password";
        show_eye.style.display = "block";
        hide_eye.style.display = "none";
    }
}

function password_new_1_view() {
    var x = document.getElementById("password_new_1");
    var show_eye = document.getElementById("show_eye_new_1");
    var hide_eye = document.getElementById("hide_eye_new_1");
    hide_eye.classList.remove("d-none");
    if (x.type === "password") {
        x.type = "text";
        show_eye.style.display = "none";
        hide_eye.style.display = "block";
    } else {
        x.type = "password";
        show_eye.style.display = "block";
        hide_eye.style.display = "none";
    }
}

function password_new_2_view() {
    var x = document.getElementById("password_new_2");
    var show_eye = document.getElementById("show_eye_new_2");
    var hide_eye = document.getElementById("hide_eye_new_2");
    hide_eye.classList.remove("d-none");
    if (x.type === "password") {
        x.type = "text";
        show_eye.style.display = "none";
        hide_eye.style.display = "block";
    } else {
        x.type = "password";
        show_eye.style.display = "block";
        hide_eye.style.display = "none";
    }
}
</script>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.front.mastermem', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH C:\xampp\htdocs\km-web\resources\views/auth/changePass.blade.php ENDPATH**/ ?>