
<?php $__env->startSection('content'); ?>

<div class="container">
    <div class="row">
        <div class="col-lg-4"></div>
        <div class="col-lg-4">
            <div class="card card-outline card-green">
                <div class="card-header" style="text-align: center">
                    <i class="fas fa-user-circle fa-5x center"></i>
                    <div style="margin-top:5px;"></div>
                    <h4 class="card-title float-none text-center">เข้าสู่ระบบ</h4>
                </div>
                <div class="card-body login-card-body">
                    <form id="formLogin" name="formLogin">
                        <div class="mb-3">
                            <div class="input-group">
                                <span class="input-group-text">
                                    <i class="fa fa-user"></i>
                                </span>
                                <input type="text" name="username" id="username" class="form-control" value=""
                                    placeholder="ชื่อผู้ใช้งาน" />
                            </div>
                        </div>
                        <div class="form-text text-end">
                            <a href="changePass" class="txtyellow-1"> เปลี่ยนรหัสผ่าน</a>
                        </div>
                        <div class="mb-3">
                            <div class="input-group">
                                <span class="input-group-text">
                                    <i class="fa fa fa-lock"></i>
                                </span>
                                <input type="password" name="password" id="password" class="form-control"
                                    placeholder="รหัสผ่าน" />
                                <span class="input-group-text" onclick="password_show_hide();">
                                    <i class="fas fa-eye" id="show_eye"></i>
                                    <i class="fas fa-eye-slash d-none" id="hide_eye"></i>
                                </span>
                            </div>
                        </div>
                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-warning" type="button">
                                เข้าสู่ระบบ <i class="fa fa-sign-in-alt"></i>
                            </button>
                        </div>
                        <div class="form-text text-center">
                            <a href="forgotPass" class="txtyellow-1"> ลืมรหัสผ่าน</a>
                        </div>
                    </form>
                </div>

                <div class="card-footer">
                    <div class="d-grid gap-2">
                        <a class="btn btn-secondary" href="register" role="button">
                            สมัครสมาชิก <i class="fa fa-pencil-alt"></i>
                        </a>
                    </div>
                </div>
            </div>
            <br>
        </div>
        <div class="col-lg-4"></div>
    </div>
</div>

<script>
$(document).ready(function() {
    var $summaryForm = $("#formLogin");
    $summaryForm.validate({
        rules: {
            username: {
                required: true,
            },
            password: {
                required: true,
            }
        },
        messages: {
            username: {
                required: "กรุณากรอกชื่อผู้ใช้งาน",
            },
            password: {
                required: "กรุณากรอกรหัสผ่าน",
            }
        },
        submitHandler: function() {
            // console.log("submit")
            var user = $("#username").val();
            var pass = $("#password").val();
            var form_data = new FormData();
            form_data.append('username', user);
            form_data.append('password', pass);
            // console.log(form_data);
            $.ajax({
                type: "post",
                url: 'login/auth',
                data: form_data,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                processData: false,
                contentType: false,
                cache: false,
                success: function(data) {
                    // console.log("post login. [ " + data.status + "/" + data.message + " ]");
                    // window.location = "login";
                    if (data.status == true) {
                        Swal.fire({
                            icon: 'success',
                            title: data.message,
                            text: '',
                            allowOutsideClick: false,
                            focusConfirm: true,
                            confirmButtonText: 'ตกลง',
                        }).then((result) => {
                            if (result.value) {
                                $(".loader").show();
                                window.location = "home";
                            }
                        })
                    } else {
                        Swal.fire({
                            icon: 'warning',
                            title: 'คำเตือน',
                            text: JSON.stringify(data.message),
                        });
                    }
                },
            });
        },
        errorElement: "div",
        errorPlacement: function(error, element) {
            // $(element).parents('.form-group').append(error)
            // error.addClass("invalid-feedback");
            if (element.parent().hasClass('input-group')) {
                error.insertAfter(element.parent()).addClass("invalid-feedback");
            } else {
                error.insertAfter(element).addClass("invalid-feedback");
            }
        }
    });
});

function password_show_hide() {
    var x = document.getElementById("password");
    var show_eye = document.getElementById("show_eye");
    var hide_eye = document.getElementById("hide_eye");
    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/login.blade.php ENDPATH**/ ?>