<?php include('../include/header.php')?>
<?php $menu = 'profile';?>
<?php include('../theme/menu.php')?>
<style media="screen">
  .rounded-pill {border-radius: 50rem !important;}
  .bg_headertext{padding-left: 0px;}
  .w-div{width: 400px}
  .w-hide2{display: none;}
  .w-hide{display: block;}
  .w-hide3{display: none;}
  .bt_login:hover{
    width: 400px;
    background-color: #ffffff;
    color: #000000
  }
  .form-control{-webkit-padding-top: 5px;}
  @media (max-width: 768px)
  {
  	.w-div{width: 340px}
  	.w-div2{width: 100%}
    .w-hide{display: none;}
    .w-hide2{display: block;}
    .w-hide3{display: none;}
    .bt_login:hover{width: 340px;background-color: #ffffff;color: #000000}
  }
  @media (max-width: 414px)
  {
  	.w-div{width: 300px}
  	.w-div2{width: 100%}
    .w-hide{display: none;}
    .w-hide2{display: none;}
    .w-hide3{display: block;}
    .bt_login:hover{width: 300px;background-color: #ffffff;color: #000000}
  }

</style>
<script>
/*$('.datepicker').datepicker()*/
</script>


<!-- /.body -->
<div class="container" style="padding-top:25px;">
    <div class="row">
        <div class="col-md-12">

        <!-- /.aboutus -->
<div style="margin-bottom:15px;background-color: #000000;">
	<div class="head_bg_right" style="background-image: url(../../image/wal-001.png);background-position: center right;background-size: 143px 24px;
  background-position-x: 96.5%;"> เข้าสู่ระบบ</div>
    <div class="row" style="padding-top:10px;margin-bottom:10px;">

       <div class="col-md-12">
       		<div style="margin-top:15px;"></div>

           <div class="row" style="margin-bottom:40px;    justify-content: center;display: flex;">
          <div class="col-md-6 w-div2" >
          	<!--<div class="bg_headertext" align="center">เข้าสู่ระบบ</div>-->
            <p style="color:#828180;margin-bottom: 20px;" align="center">
            หากท่านได้ลงละเบียนกับทางเว็บไซต์แล้ว <br> สามารถลงชื่อเข้าใช้งานทางด้านล่างนี้
       		</p>
            <script>
			function checkform_login()
			{
				if(document.from_login.email.value==""){alert("ขออภัยค่ะกรุณากรอก อีเมล");document.from_login.email.focus();return false;}
				if(document.from_login.password.value==""){alert("ขออภัยค่ะกรุณากรอก รหัสผ่าน");document.from_login.password.focus();return false;}
			}
			</script>
            <form class="form-horizontal" action="../include/login.php?re=<?php echo @$_GET['re']; ?>" method="post"  name="from_login" onSubmit="return checkform_login();"
            style="padding: 0px 10px;">
              <div class="form-group" >
                <!--<label for="inputEmail3" class="control-label" style="color:#898887;">อีเมล :</label>-->
                <div class="col-sm-12" align="center">
                  <input type="email" class="form-control corner_cancel rounded-pill w-div" name="email" id="inputEmail3"
                  placeholder="Email" >
                </div>
              </div>
              <div class="form-group">
                <!--<label for="inputPassword3" class="control-label" style="color:#898887;">รหัสผ่าน :</label>-->
                <div class="col-sm-12" align="center">
                  <input type="password" class="form-control corner_cancel rounded-pill w-div" name="password" id="inputPassword3"
                  placeholder="Password" >
                </div>
              </div>

              <div class="form-group">
                <div class="col-sm-12" align="center">
                	<input class="btn btn-default corner_cancel bt_login rounded-pill text-center w-div" type="submit"
                  style="height: 37px;font-size: 1.65rem;color:#FFF;background-image: none;background-color: #510e7f;text-align: center;" value="เข้าสู่ระบบ">

                </div>
              </div>
<!--
-->
              <div class="form-group">
                <div class="col-sm-12" align="center">
                	<input class="btn btn-default corner_cancel bt_login rounded-pill text-center w-div" type="button"
                  style="height: 37px;font-size: 1.65rem;color:#FFF;background-image: none;background-color: #956cb2;text-align: center;"
                  value="สมัครสมาชิก" onclick="location.href='register.php'">

                </div>
              </div>

              <div class="form-group">
                <div class="col-sm-12" align="center">
                    <a style="color:#898887;text-decoration:none;" href="forgotpassword.php">ลืมรหัสผ่าน</a>
                </div>
              </div>

              <!--onlogin="checkLoginState();"-->
              <style media="screen">

                .btn-login-line{    width: 31px;border-radius: 100%;}
              </style>

              <div id="fb-root"></div>

              <hr>
              <div class="form-group"  align="center">
                <div class="col-sm-12">
                  <div class="fb-login-button w-hide"
                  data-width="600"
                  data-size="large"
                  data-button-type="login_with"
                  data-layout="rounded"
                  data-auto-logout-link="false"
                  data-use-continue-as="false"
                  onlogin="checkLoginState();" >
                  เข้าสู่ระบบด้วย Facebook
                  </div>

                  <div class="fb-login-button w-hide2"
                  data-width="340"
                  data-size="large"
                  data-button-type="login_with"
                  data-layout="rounded"
                  data-auto-logout-link="false"
                  data-use-continue-as="false"
                  onlogin="checkLoginState();" >
                  เข้าสู่ระบบด้วย Facebook
                  </div>
                  <div class="fb-login-button w-hide3"
                  data-width="300"
                  data-size="large"
                  data-button-type="login_with"
                  data-layout="rounded"
                  data-auto-logout-link="false"
                  data-use-continue-as="false"
                  onlogin="checkLoginState();" >
                  เข้าสู่ระบบด้วย Facebook
                  </div>
                </div>

                <div class="col-sm-12" align="center" style="margin-top: 1rem;" >
                  <div class="w-div" style="border-radius: 50rem !important;border: 1px solid #358b46; height: 100%; background-color: #358b46;" >
                    <div class="" style="margin-left: 7px;height: 36px;align-items: center;display: flex;" >

                        <img src="../../image/btn_press2.png" alt="" class="btn-login-line"  onclick="login()">
                        <span align="center" style="font-size: 1.65rem;width: 100%;margin-left: -10px;"  onclick="login()">เข้าสู่ระบบด้วย Line</span>



                    </div>

                  </div>


                </div>
              </div>
            </form>


          </div>



        </div>
<!--

<fb:login-button
  data-size="medium"
  data-button-type="login_with"
  data-layout="default"
  data-auto-logout-link="false"
  data-use-continue-as="false"
  scope="public_profile,email"
  onlogin="checkLoginState();"
  style="margin-left: 10px; border-radius: 50px;"
  class=""
  > เข้าสู่ระบบด้วย Facebook

</fb:login-button>



        <div class="col-md-5 col-md-offset-1">
          <div class="bg_headertext">สร้างบัญชีผู้ใช้</div>
          <p style="padding-top:30px;color:#828180;padding-left: 10px;">
            บัญชี วอลเปเปอร์มงคล<br>
            ใช้สำหรับใช้เลือกชื้อผลิืตภัณฑ์ผ่านในเว็บไซต์<br>
            Kainumber.com เท่านั้น<br>
          </p>
          <br>
          <a href="register.php" class="btn btn-default corner_cancel rounded-pill bt_login" style="color:#FFF;margin-left: 10px;background-image: none;background-color: #510e7f;text-align: center;">สมัครสมาชิก</a>
          <input type="hidden" name="id_fb" id="id_fb" value="">
          <input type="hidden" name="name_fb" id="name_fb" value="">
          <br><br>
          <fb:login-button
          data-size="medium"
          data-button-type="login_with"
          data-layout="default"
          data-auto-logout-link="false"
          data-use-continue-as="false"
          scope="public_profile,email"
          onlogin="checkLoginState();"
          style="margin-left: 10px;"> เข้าสู่ระบบด้วย Facebook
        </fb:login-button>
        <!--onlogin="checkLoginState();"
        <style media="screen">

        .btn-login-line{width: 100px;}
        </style>
        <div class="" style="margin-top: 15px;margin-left: 10px;">
          <img src="../../image/btn_login_base.png" alt="" class="btn-login-line" onclick="login()">

        </div>

      </div>
-->
    <script>


        function checkLoginState() {               // Called when a person is finished with the Login Button.
          FB.getLoginStatus(function(response) {   // See the onlogin handler

            statusChangeCallback(response);

          });
        }



        function LogoutState() {               // Called when a person is finished with the Login Button.
          FB.logout(function(response) {
              document.location.reload();
          });
        }

        window.fbAsyncInit = function() {

          FB.init({
            appId      : '1111791609715844',
            cookie     : true,
            xfbml      : true,
            version    : 'v14.0'
          });
          FB.AppEvents.logPageView();
          FB.getLoginStatus(function(response) {   // See the onlogin handler
          //  console.log(response.status);
            if (response && response.status === 'connected') {
                FB.logout(function(response) {
                    document.location.reload();
                });
            }else {
              FB.logout(function(response) {
                  document.location.reload();
              });
            }

          });
        };

        (function(d, s, id){
          var js, fjs = d.getElementsByTagName(s)[0];
          if (d.getElementById(id)) {return;}
          js = d.createElement(s); js.id = id;
          js.src = "https://connect.facebook.net/en_US/sdk.js";
          fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));

        function testAPI() {
          FB.api('/me', function(response) {
            var namez = response.name;
            var idz = response.id;
            window.location.href='checkfb.php?id='+idz+'&name='+namez+'&re=<?php echo @$_GET['re']; ?>';
          });
        }




        function statusChangeCallback(response) {  // Called with the results from FB.getLoginStatus().
          //console.log('statusChangeCallback');
        //  console.log(response);
                        // The current login status of the person.
          if (response.status === 'connected') {   // Logged into your webpage and Facebook.
            testAPI();
          } else {

          }
        }


        </script>

            <?php //include('../theme/detailfooter.php')?>


        </div>

    </div>
</div>
<script src="https://static.line-scdn.net/liff/edge/versions/2.3.0/sdk.js"></script>
<script>

async function main(){
  await liff.init({ liffId: '1657386444-2Vy4dmp9' })
  //console.log(liff.isLoggedIn());
  if(liff.isLoggedIn()) {
    //getUserProfile();
    //logOut()
    //liff.login();
    getUserProfile();
  } else {
    liff.login();
    getUserProfile();
    //liff.login({ redirectUri: "https://kainumber.com/wallpaper/member/checkline.php"})

  }
}
//  main()
function login() {
  main()
}

async function getUserProfile() {
  const profile = await liff.getProfile()
  var namez = profile.displayName;
  var idz = profile.userId;
   window.location.href='checkline.php?id='+idz+'&name='+namez+'&re=<?php echo @$_GET['re']; ?>';
}

function logOut() {
  liff.logout()
    window.location.reload()
  }

</script>
<!-- /.aboutus -->





        </div>
    </div>
</div>
<!-- /.body -->
<?php include('../include/footer.php')?>
<?php include('../include/footer_js.php')?>