invisio v2.0

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ระบบสมาชิก - สมาคมผู้ประกอบการนำคนต่างด้าวมาทำงานในประเทศ (ประเทศไทย)</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="icon" type="image/png" href="Logo.png" />
    <link href="https://fonts.googleapis.com/css?family=Poppins:600&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/a81368914c.js"></script>
    <link href="vendor/sweetalert/sweetalert.css" rel="stylesheet">
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" />

</head>

.eye {
        position: absolute;
        cursor: pointer;
        right: 20%;
        margin-top: -40px;
    }
</style>

<body>
    
    <div class="container">
        <div class="img">
            <img src="img/bg.svg">
        </div>
        <div class="login-content mt-3">
            <form method="post" id="register" enctype="multipart/form-data">
                <img src="Logo.png">
                <h2 class="title">Sign Up</h2>
                <div class="input-div one">
                    <div class="i">
                        <i class="fas fa-user"></i>
                    </div>
                    <div class="div">
                        <h5>Email</h5>
                        <input type="text" class="input" id="email" name="email">
                    </div>
                </div>
                <div>
                    <div class="input-div pass">
                        <div class="i">
                            <i class="fas fa-lock"></i>
                        </div>
                        <div class="div">
                            <h5>Password</h5>
                            <input type="password" id="password" name="password" class="input">
                        </div>
                    </div>
                    <i toggle="#password-field" class="fa fa-fw fa-eye-slash  field_icon toggle-password eye"></i>
                </div>

<div>
                    <div class="input-div pass">
                        <div class="i">
                            <i class="fas fa-lock"></i>
                        </div>
                        <div class="div">
                            <h5>RePassword</h5>
                            <input type="password" id="re_password" name="re_password" class="input">
                        </div>
                    </div>
                    <i toggle="#password-field" class="fa fa-fw fa-eye-slash field_icon toggle-password-re eye"></i>
                </div>

<div class="input-div name_th">
                    <div class="i">
                        <i class="fas fa-pen"></i>
                    </div>
                    <div class="div">
                        <h5>ชื่อภาษาไทย</h5>
                        <input type="text" class="input" id="name_th" name="name_th">
                    </div>
                </div>
                <div class="input-div name_en">
                    <div class="i">
                        <i class="fas fa-pen"></i>
                    </div>
                    <div class="div">
                        <h5>ชื่อภาษาอังกฤษ</h5>
                        <input type="text" class="input" id="name_en" name="name_en">
                    </div>
                </div>
                <div class="input-div birth_date">
                    <div class="i">
                        <i class="fas fa-pen"></i>
                    </div>
                    <div class="div">
                        <h5>วัน/เดือน/ปี เกิด</h5>
                        <input type="date" class="input" id="birth_date" name="birth_date">
                    </div>
                </div>

<div class="input-div phone">
                    <div class="i">
                        <i class="fas fa-pen"></i>
                    </div>
                    <div class="div">
                        <h5>เบอร์โทรศัพท์</h5>
                        <input type="text" class="input" id="phone" name="phone">
                    </div>
                </div>

<select name="member_group" id="member_group" class="form-control">
                            <option value="" disabled selected>-- สถานะปัจจุบัน--</option>
                            <option value="1">นายจ้าง</option>
                            <option value="2">บนจ.</option>
                            <option value="3">Agency</option>
                            <option value="4">แรงงาน</option>
                        </select>
                    </div>
                </div>

<div class="input-div company">
                    <div class="i">
                        <i class="fas fa-pen"></i>
                    </div>
                    <div class="div">
                        <h5>ชื่อบริษัท</h5>
                        <input type="text" class="input" id="company_name" name="company_name">
                    </div>
                </div>

<button type="button" class="btn" onclick="register();">
                    สร้างบัญชี
                </button>
                <a href="join_new"><button type="button" class="btn-register">
                        เข้าสู่ระบบ
                    </button></a>
            </form>
        </div>
    </div>
    <script type="text/javascript" src="js/main.js"></script>
    <script src="vendor/jquery/jquery-3.2.1.min.js"></script>
    <script src="vendor/bootstrap/js/popper.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.min.js"></script>
    <script src="vendor/sweetalert/sweetalert.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
        $('#username').keypress(function(event) {
            var keycode = (event.keyCode ? event.keyCode : event.which);
            if (keycode == '13') {
                register();
            }
        });
        $('#password').keypress(function(event) {
            var keycode = (event.keyCode ? event.keyCode : event.which);
            if (keycode == '13') {
                register();
            }
        });

$(document).on('click', '.toggle-password', function() {

$(this).toggleClass("fa-eye");
            var password = $("#password");
            password.attr('type') === 'password' ? password.attr('type', 'text') : password.attr('type', 'password')
        });

$(document).on('click', '.toggle-password-re', function() {
            $(this).toggleClass("fa-eye");
            var re_password = $("#re_password");
            re_password.attr('type') === 'password' ? re_password.attr('type', 'text') : re_password.attr('type', 'password')
        });

function register() {

let username = $('#email').val();
            let password = $('#password').val();
            let re_password = $('#re_password').val();

if (username == "" || password == "" || re_password == "") {

swal({
                    title: "เกิดข้อผิดพลาด",
                    text: "กรุณากรอกข้อมูล ให้ครบถ้วน",
                    type: "error"
                });

return false;

}

if (password != re_password) {

swal({
                    title: "เกิดข้อผิดพลาด",
                    text: "รหัสไม่ถูกต้อง กรุณากรอกใหม่",
                    type: "error"
                });

$('#re_password').val('');
                $('#password').val('');

return false;

}

// swal({
            //     title: 'กรุณายืนยันเพื่อทำรายการ',
            //     type: 'warning',
            //     showCancelButton: true,
            //     confirmButtonColor: '#3085d6',
            //     cancelButtonColor: '#d33',
            //     cancelButtonText: 'ยกเลิก',
            //     confirmButtonText: 'ยืนยัน',
            //     closeOnConfirm: false

// }, function() {

var formData = new FormData($("#register")[0]);

$.ajax({
                type: 'POST',
                url: 'ajax/form-login/register.php',
                data: formData,
                dataType: "json",
                cache: false,
                contentType: false,
                processData: false,
                beforeSend: function() {
                    swal({
                        title: "กำลังทำการบันทึก",
                        text: "กรุณารอสักครู่",
                        imageUrl: "ajax-loader.gif",
                        showConfirmButton: false,
                        allowOutsideClick: false
                    });
                },
                error: function(data) {
                    console.log("error : " + data.responseText);

swal({
                        title: "เกิดข้อผิดพลาด",
                        text: "ไม่สามารถบันทึกรายการได้ กรุณาแจ้งทีมงาน",
                        type: "error",
                    });
                },
                success: function(data) {

if (data.result == 1) {

localStorage.setItem("member_id", data.login_code);
                        localStorage.setItem("member_level", data.member_level);
                        localStorage.setItem("register_type", data.register_type);
                        localStorage.setItem("register_level", data.register_level);
                        localStorage.setItem("username", data.username);

var timer = 10, // timer in seconds
                            isTimerStarted = false;

(function customSwal() {
                            swal({
                                title: 'ลงทะเบียนสำเร็จ',
                                text: 'กรุณาตรวจสอบอีเมลเพื่อยืนยันตัวตน ภายใน 15 นาที \n\n ปิดหน้าต่างอัตโนมัติ' + timer,
                                timer: !isTimerStarted ? timer * 1000 : undefined,
                                showConfirmButton: true
                            }, function() {
                                location.href = "main/index"
                            });
                            isTimerStarted = true;
                            if (timer) {
                                timer--;
                                setTimeout(customSwal, 1000);
                            }

})();

// swal({
                        //     title: 'ดำเนินการสำเร็จ',
                        //     text: 'ทำการลงทะเบียนสำเร็จ',
                        //     type: 'success',
                        //     showConfirmButton: true,

//     timer: 1500
                        // }, function() {
                        //     location.href = "main/index"
                        // });

// setTimeout(() => {
                        //     location.href = "main/index"
                        // }, 1500);

} else if (data.result == 0) {

swal({
                            title: "เกิดข้อผิดพลาด",
                            text: "เกิดข้อผิดพลาดระหว่างบันทึก กรุณาแจ้งผู้พัฒนา",
                            type: "error"
                            //Please Check Your Account
                        }, function() {
                            //location.reload();
                        });
                    }
                }
            })

//     });
        }

function Checkemail(attr) {
            var Email = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
            if (!attr.val().match(Email)) {

swal({

title: "คำเตือน",
                    text: "รูปแบบ Email ไม่ถูกต้อง",
                    type: "warning"

}, function() {

attr.val('');

attr.focus();

});

return false;

} else {

let check_mail = attr.val();

$.ajax({

data: {
                        check_mail: check_mail
                    },
                    dataType: "json",
                    type: "POST",
                    url: "ajax/form-login/check_mail.php",
                    success: function(response) {

if (response.result == '1') {

swal({
                                title: "คำเตือน",
                                text: "Email นี้มีการใช้งานแล้ว",
                                type: "warning",

});

attr.val('')

attr.focus();

}

});

}

function CheckPassword() {

let reCheckPassword = $('#re_password').val();
            let password = $('#password').val();

if (reCheckPassword != "") {

if (password != reCheckPassword) {

swal({

title: "คำเตือน",
                        text: "รหัสไม่ถูกต้อง กรุณากรอกใหม่",
                        type: "warning",

});

$('#re_password').val('');
                    $('#password').val('');

return false;
                }

}

}
    </script>