<!DOCTYPE html>

<html
  lang="en"
  class="light-style layout-menu-fixed"
  dir="ltr"
  data-theme="theme-default"
  data-assets-path="../assets/"
  data-template="vertical-menu-template-free"
>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
    />
    <?php
// Retrieve the value from the database
$dbLine_key = DB::table('tbl_basic_setting')->value('line_key');
$dbliffid = DB::table('tbl_basic_setting')->value('liff_id');
?>

    <meta name="description" content="" />

    <meta name="csrf-token" content="{{ csrf_token() }}">

    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="{{ asset('assets/img/favicon/favicon.ico') }}" />

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap"
      rel="stylesheet"
    />

    <!-- Icons. Uncomment required icon fonts -->
    <link rel="stylesheet" href="{{ asset('assets/vendor/fonts/boxicons.css') }}" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css"/>

    <!-- Core CSS -->
    <link rel="stylesheet" href="{{ asset('assets/vendor/css/core.css') }}" class="template-customizer-core-css" />
    <link rel="stylesheet" href="{{ asset('assets/vendor/css/theme-default.css') }}" class="template-customizer-theme-css" />
    <link rel="stylesheet" href="{{ asset('assets/css/demo.css') }}" />


    <!-- Vendors CSS -->
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.css') }}" />

    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/apex-charts/apex-charts.css') }}" />

    <!-- Page CSS -->

    <!-- Helpers -->
    <script src="{{ asset('assets/vendor/js/helpers.js') }}"></script>

    <!--! Template customizer & Theme config files MUST be included after core stylesheets and helpers.js in the <head> section -->
    <!--? Config:  Mandatory theme config file contain global vars & default theme options, Set your preferred theme option in this file.  -->
    <script src="{{ asset('assets/js/config.js') }}"></script>
    <script charset="utf-8" src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>
    <title id="medishop_title">MediShopアプリログイン</title>

  </head>

  <link rel="stylesheet" href="//cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
  <link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/dataTables.bootstrap5.min.css">


  <style>

      .dataTables_wrapper .dataTables_paginate .paginate_button {

          padding: 0px !important;
          margin: 0px !important;
          margin-top: 10px !important;

      }

      div.dataTables_wrapper div.dataTables_length select {

          width: 50%;

          margin-bottom: 20px !important;
      }
      .container {
			max-width: 600px;
			margin: 0 auto;
			padding: 30px;
			background-color: #fff;
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
		}
    .password-container {
  position: relative;
  width: 100%;
  
}
h2 {
  font-size: 20px;
  margin-bottom: 20px;
}

@media screen and (max-width: 600px) {
  .login_card {
    width: 80%;
    margin: 30px auto; /* Adjust the margin for smaller screens */
  }

  h2 {
    font-size: 18px; /* Decrease the font size for smaller screens */
  }
}

@media screen and (max-width: 400px) {
  .login_card {
    width: 90%;
  }
}

.password-container input[type="password"] {
  padding-right: 40px;
}

.password-container .toggle-password {
  position: absolute;
  top: 38%;
  right: 10px;
  transform: translateY(-50%);
  cursor: pointer;
}
		h1 {
			margin-top: 0;
			text-align: center;
			font-size: 2em;
			color: #333;
		}

    #user-id,
#user-password {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-bottom: 20px;
  font-size: 16px;
}

#user-id::placeholder,
#user-password::placeholder {
  color: #999;
}

#user-id:focus,
#user-password:focus {
  outline: none;
  border-color: #2095F2;
}

#user-id[type="password"] {
  -webkit-text-security: disc;
  -moz-text-security: disc;
  text-security: disc;
}
	button {
      padding: 10px;
      border-radius: 10px;
      border: none;
      background-color: #2095F2;
      color: #fff;
      cursor: pointer;
      width: 50%;
      margin: 0 auto;
      font-family: 'Montserrat', sans-serif;
      font-size: 24px;
    }
	
		.login_card {

      width: 90%;
      max-width: 600px;
      margin: 50px auto;
      font-family: 'Montserrat', sans-serif;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
		button:hover {
			background-color: #0069d9;
		}

  </style>

  <body>



    <div class="layout-wrapper layout-content-navbar">
        <div class="layout-container">

        
        
                <!-- /Navbar -->

                 <!-- Content wrapper -->
                 <div class="content-wrapper">

                  <div class="container-fluid px-4">

                    <div class="login_card">
                      <h3>{{__('lineloginheader')}}</h3>
                      <input type="text" id="user-id" name="c_code" class="form-control" placeholder="{{__('lineloginnumbhint')}}">
                      <div class="password-container">
                        <input type="password" id="user-password" placeholder="{{__('lineloginpassbhint')}}">
                        <span class="toggle-password" onclick="togglePasswordVisibility()"><i class="fas fa-eye"></i></span>
                      </div>
                      <button onclick="login()">{{__('login')}}</button>
                      <div style="display: none" id="loading-indicator">Loading...</div>
                        {{-- <button onclick="getsProfile()">get info</button> --}}
                          {{-- <button onclick="login()">gt info</button> --}}
                    </div>
                    <script>
		                  var loadingIndicator = document.getElementById('loading-indicator');
                      var vid;
                
                
                  function togglePasswordVisibility() {
  var passwordInput = document.getElementById("user-password");
  var toggleButton = document.querySelector(".toggle-password");

  if (passwordInput.type === "password") {
    passwordInput.type = "text";
    toggleButton.innerHTML = '<i class="fas fa-eye-slash"></i>';
  } else {
    passwordInput.type = "password";
    toggleButton.innerHTML = '<i class="fas fa-eye"></i>';
  }
}
                  async function getconversionid(profile_id,apiKey,shopId,userId){
                     
            
                  const apiUrl = `https://api.littlehelp.co.jp/line/v1/contact/${profile_id}?apikey=${apiKey}`;
                
                  $.ajax({
                      type: 'GET',
                      url: apiUrl,
                      dataType: 'json',
                      success: function(data) {
                      vid=data.vid;
                     
                     saveLine(userId,shopId);
                          //login();
                          // Handle the response data here
                      },
                      error: function(jqXHR, textStatus, errorThrown) {
                          console.log(jqXHR);
                          window.alert("littehelp Authentication Failed");
                         // window.alert("profile id not found");
                          // Handle the error here
                      }
                  });
                  
                  
                  }

                  function saveLine(userId,shopId){
                    $.ajax({
                      url: "{{ url('save_line') }}",
                                      method: 'GET',
                            data: {
                              line_id: vid,
                              user_id: userId,
                              shop_id: shopId
                                        
                                      },
                      success: function(response) {
                          console.log(response.message);
                          loadingIndicator.style.display = 'none';
                          window.alert("ログインしていただきありがとうございます。Medi Shopアプリに戻って、お楽しみください。");
                          close();

                       
                          // Handle the success response here
                      }, 
                      error: function(jqXHR, textStatus, errorThrown) {
                          console.log(jqXHR);
                          window.alert("Id not saved to database");
                  
                          // Handle the error response here
                      }
                  });
                  }
                  
                  function close(){
                  
                    liff.closeWindow();
                  }
                  function getsProfile(){
                    liff.login();
                  }
                  
                  function login(){
                    var userid=document.getElementById('user-id').value;
                    loadingIndicator.style.display = 'block';
                    if (userid.startsWith('0')) {
                    userid = userid.substring(1); // Remove first character (leading zero)
                      }
                      console.log("after cut"+userid);
                    var userpass=document.getElementById('user-password').value;

                        
 
 
                  
                  $.ajax({
                                      url: "{{ url('liff_login') }}",
                                      method: 'GET',
                            data: {
                                         email_or_mobile: userid,
                                         password: userpass
                                        
                                      },
                                      headers: {
                                          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                      },
                                      success: function(response) {

                              var userId = response.user.id;
                              var webhookapi = response.basic.line_key;
                              var shopId = response.basic.created_by;
                              console.log(response.basic);

                              liff.init({
                
                 liffId: response.basic.liff_id
               })
               .then(() => {
              
       
                liff.getProfile()
                          .then((profile) => {
                              const profileInfo = `User ID: ${profile.userId}\nDisplay Name: ${profile.displayName}`;
                        var profile_id=profile.userId;
                        getconversionid(profile_id,webhookapi,shopId,userId);
                            
                      
            
                          })
                          .catch((err) => {
                              console.log('error', err);
                              window.alert("Line profile Authentication Failed");
                          });
    
               })
               .catch((err) => {
                 console.log(err);
                // window.alert("{{__('lineAuthfailed')}}");
                loadingIndicator.style.display = 'none';
            
                 liff.login();
           
                 
           
               });
                                
                                
                                      },
                                      error: function(xhr, status, error) {
                                          // console.log("error "+error);
                                          // console.log("status "+status);
                                          var errorMessage = xhr.responseJSON.message;
                                  
                                          window.alert(errorMessage);
                            
                                      },
                                      complete: function() {
      // Hide loading indicator
     
    }
                                     
                                  }
                          );
                  
                  }
                  
                  
                    </script>
                </div>

                    <!-- Footer -->
           
              
                    <!-- /Footer -->
                 </div>
                 <!-- Content wrapper -->
      


        </div>
        <!-- Overlay -->
        <div class="layout-overlay layout-menu-toggle"></div>
      </div>


      <!-- Core JS -->
    <!-- build:js assets/vendor/js/core.js -->
    <script src="{{ asset('assets/vendor/libs/jquery/jquery.js') }}"></script>
    <script src="{{ asset('assets/vendor/libs/popper/popper.js') }}"></script>
    <script src="{{ asset('assets/vendor/js/bootstrap.js') }}"></script>
    <script src="{{ asset('assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.js') }}"></script>

    <script src="{{ asset('assets/vendor/js/menu.js') }}"></script>
    <!-- endbuild -->

    <!-- Vendors JS -->
    <script src="{{ asset('assets/vendor/libs/apex-charts/apexcharts.js') }}"></script>

    <!-- Main JS -->
    <script src="{{ asset('assets/js/main.js') }}"></script>

    <!-- Page JS -->
    <script src="{{ asset('assets/js/dashboards-analytics.js') }}"></script>



    <!-- Place this tag in your head or just before your close body tag. -->
    <script async defer src="https://buttons.github.io/buttons.js"></script>



    <script src="{{ asset('assets/js/jquery-3.6.0.min.js') }}"></script>
    <script src="//cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>



    @yield('body_script')

  </body>
</html>
