@extends('layout')
@section('content')
<div id="login-page">

  <div class="card">
    <div class="card-body">
      <div class="logo-container text-center">
        <img src="{{('images/logo.png')}}" alt="logo" class="logo" width="160">
      </div>
      <h1 class="card-title my-4">เข้าสู่ระบบ</h1>
      <form id="loginForm">
        <div class="form-group">
          <label for="username">Username</label>
          <input type="text" class="form-control" id="email" name="email" placeholder="ชื่อผู้ใช้งาน">
        </div>
        <div class="form-group">
          <label for="password">Password</label>
          <div class="input-group">
            <input type="password" class="form-control" id="password" name="password" placeholder="รหัสผ่าน">
            <div class="input-group-append">
              <span  onclick="togglePasswordVisibility()">
                <i class="bi bi-eye-fill" id="togglePasswordIcon"></i>
              </span>
            </div>
          </div>
          <div class="text-end">
            <a href="#" class="forgot-password">ลืมรหัสผ่าน ?</a>
          </div>
        </div>

        <button type="submit" class="green-btn btn w-50 mt-4 mx-auto d-block">เข้าสู่ระบบ</button>
        <div class="text-center position-relative" style="margin-top: 40px; margin-bottom: 40px;">
          <span class="text-muted position-absolute top-50 start-50 translate-middle bg-white px-4 z-1">OR</span>
          <hr class=" z-0">
        </div>
        <button class="btn w-50 mt-4 mx-auto d-block green-btn-outline">C Life SSO</button>

        <div class="text-center mt-4">
          <span>
            ยังไม่เคยลงทะเบียนใช่หรือไม่ ?
          </span>
          <a href="{{('register')}}" class="register-link">คลิกเพื่อลงทะเบียน</a>
        </div>
      </form>
      <button onclick='loginmiddleware()' class="green-btn btn w-50 mt-4 mx-auto d-block">เข้าสู่ระบบ Middlerware</button>

    </div>
  </div>

</div>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
  function togglePasswordVisibility() {
    const passwordField = document.getElementById('password');
    const toggleIcon = document.getElementById('togglePasswordIcon');
    if (passwordField.type === 'password') {
      passwordField.type = 'text';
      toggleIcon.classList.remove('bi-eye-fill');
      toggleIcon.classList.add('bi-eye-slash-fill');
    } else {
      passwordField.type = 'password';
      toggleIcon.classList.remove('bi-eye-slash-fill');
      toggleIcon.classList.add('bi-eye-fill');
    }
  }
  
  //  async function loginmiddleware() { 
  //   const username = document.getElementById('email').value;
  //   const password = document.getElementById('password').value;
  //   try {
  //     const response = await fetch('{{ config('app.url') }}/api/auth/middlerware', {
  //       method: 'POST',
  //       headers: {
  //         'Content-Type': 'application/json',
  //       },
  //       body: JSON.stringify({ username, password }),
  //     });


  //     if (!response.ok) {
  //       throw new Error(`Login failed: HTTP ${response.status}`);
  //     }

  //     const result = await response.json();
  //     console.log('Result:', result);

        
  //     if (result.data.status === 'S') {
  //         const token = result.data.accessToken; // รับ JWT token จาก API response
  //         localStorage.setItem('jwtTokencustomer', token); // เก็บ Token ใน localStorage
  //         Swal.fire({
  //                   icon: 'success',
  //                   title: 'เข้าสู่ระบบสำเร็จ!',
  //                   // text: 'คุณเข้าสู่ระบบสำเร็จแล้ว กำลังนำคุณไปยังหน้าที่ต้องการ...',
  //                   confirmButtonText: 'ตกลง',
  //                   confirmButtonColor: '#3085d6',
  //               }).then(() => {
  //                   if (redirectUrl) {
  //                     window.location.href = redirectUrl;
  //                   } else {
  //                       window.location.href = '/home';
  //                   }
  //               });
  //       } else {
  //         alert("login middlerware fail");
  //       }
  //   } catch (error) {
  //     console.error('Error:', error);
  //     alert(error.message);
  //   }
  //  }
  async function loginmiddleware() { 
    // Get the user input from form fields
    const username = document.getElementById('email').value;
    const password = document.getElementById('password').value;

    try {
        // Use Laravel's `APP_URL` dynamically rendered in Blade
        const appUrl = '{{ env('CLIFE_API') }}'; // The equivalent of `env('CLIFE_API')` in Laravel
        const apiUrl = `${appUrl}auth/sign_in`;

        // Make a POST request to the middleware API
        const response = await fetch(apiUrl, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-APP-KEY': '{{ env('CLIFE_X_APP_KEY') }}', // Header equivalent of Laravel's `env`
                'X-API-LANG': '{{ env('CLIFE_API_LANG') }}', // Header equivalent of Laravel's `env`
            },
            body: JSON.stringify({ username, password }), // POST data equivalent to Laravel's `$request->username`
        });

        // Check if the HTTP response is okay
        if (!response.ok) {
            throw new Error(`Login failed: HTTP ${response.status}`);
        }

        // Parse the JSON response
        const result = await response.json();
        console.log('Result:', result);

        // Handle the API response
        if (result.data.active === 'A') {
            const token = result.data.accessToken; // Extract JWT token from response
            localStorage.setItem('jwtTokencustomer', token); // Store the token in localStorage

            // Show success message with SweetAlert
            Swal.fire({
                icon: 'success',
                title: 'เข้าสู่ระบบสำเร็จ!',
                confirmButtonText: 'ตกลง',
                confirmButtonColor: '#3085d6',
            }).then(() => {
                // Redirect after login success
                const redirectUrl = result.data.redirectUrl || '/home';
                window.location.href = redirectUrl;
            });
        } else {
            // Show error message if login fails
            Swal.fire({
                icon: 'error',
                title: 'เข้าสู่ระบบไม่สำเร็จ',
                text: result.message || 'โปรดลองอีกครั้ง',
                confirmButtonText: 'ตกลง',
                confirmButtonColor: '#d33',
            });
        }
    } catch (error) {
        console.error('Error:', error);

        // Show error message if an exception occurs
        Swal.fire({
            icon: 'error',
            title: 'เกิดข้อผิดพลาด',
            text: error.message || 'ไม่สามารถเข้าสู่ระบบได้',
            confirmButtonText: 'ตกลง',
            confirmButtonColor: '#d33',
        });
    }
}

  // Function to decode JWT token and check expiration

function isTokenValid(token) {
    try {
        // Decode the token payload
        const payload = JSON.parse(atob(token.split('.')[1])); // Extract payload (base64-decoded)
        const now = Math.floor(Date.now() / 1000); // Current time in seconds
        return payload.exp > now; // Return true if the token is not expired
    } catch (error) {
        console.error('Invalid token:', error);
        return false; // If decoding fails, treat the token as invalid
    }
}

// Retrieve token from localStorage
const token = localStorage.getItem('jwtTokencustomer');

if (token) {
    if (isTokenValid(token)) {
      // Redirect to home if token is valid
      window.location.href = '{{ config('app.url') }}/home';
    } else {
      // Token is expired or invalid
      console.warn('Token expired or invalid. Redirecting to login...');
      localStorage.removeItem('jwtTokencustomer'); // Remove invalid or expired token
      localStorage.removeItem('userAvatar');
      window.location.href = '{{ config('app.url') }}/login'; // Redirect to login
    }
} 


  // if (localStorage.getItem('jwtTokencustomer')) {
  //   window.location.href = '/home'; // Redirect to home if token exists
  // }
    document.getElementById('loginForm').addEventListener('submit', async function (e) {
    e.preventDefault(); // ป้องกันการ reload หน้า

    const email = document.getElementById('email').value;
    const password = document.getElementById('password').value;
    try {
      const response = await fetch('{{ config('app.url') }}/api/register/login', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ email, password }),
      });
      if(response.status =='302'){
        Swal.fire({
                icon: 'error',
                title: 'เข้าสู่ระบบไม่สำเร็จ',
                text: 'โปรดลองอีกครั้ง',
                confirmButtonText: 'ตกลง',
                confirmButtonColor: '#d33',
            });
      }

      if (!response.ok) {
        Swal.fire({
                icon: 'error',
                title: 'เข้าสู่ระบบไม่สำเร็จ',
                text: 'โปรดลองอีกครั้ง',
                confirmButtonText: 'ตกลง',
                confirmButtonColor: '#d33',
            });
        throw new Error(`Login failed: HTTP ${response.status}`);
      }

      const result = await response.json();
      console.log('Result:', result);
      const urlParams = new URLSearchParams(window.location.search);
      const redirectUrl = urlParams.get('redirect');

        
      if (result.status.statusType === 'S') {
          const token = result.data.token; // รับ JWT token จาก API response
          localStorage.setItem('jwtTokencustomer', token); // เก็บ Token ใน localStorage
          Swal.fire({
                    icon: 'success',
                    title: 'เข้าสู่ระบบสำเร็จ!',
                    // text: 'คุณเข้าสู่ระบบสำเร็จแล้ว กำลังนำคุณไปยังหน้าที่ต้องการ...',
                    confirmButtonText: 'ตกลง',
                    confirmButtonColor: '#3085d6',
                }).then(() => {
                    if (redirectUrl) {
                      window.location.href = redirectUrl;
                    } else {
                        window.location.href = '{{ config('app.url') }}/home';
                    }
                });
        } else {
          Swal.fire({
                icon: 'error',
                title: 'เข้าสู่ระบบไม่สำเร็จ',
                text: 'โปรดลองอีกครั้ง',
                confirmButtonText: 'ตกลง',
                confirmButtonColor: '#d33',
            });
        }
    } catch (error) {
      console.error('Error:', error);
    }
  });

  </script>
@endsection