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

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
      rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <title>UPN SEHAT - Profile</title>
    <style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

    .font-inter {
      font-family: 'Inter', sans-serif;
    }

    .hero-section {
      background-size: cover;
      background-position: center;
    }

    .spinner {
      border-top-color: transparent;
      border-radius: 50%;
      width: 20px;
      height: 20px;
      border: 4px solid;
      border-color: white;
      border-top-color: transparent;
      animation: spin 1s linear infinite;
    }

    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }
  </style>
  </head>

  <body class="bg-gray-100 w-full font-inter">
    <!-- NAVBAR -->
    <header class="bg-white fixed top-0 left-0 w-full flex items-center z-50 border-b-2 border-gray-100">
      <div class="container mx-auto">
        <div class="flex items-center justify-between relative">
          <div class="px-4">
            <a href="/">
              <img src="/img/logo.png" alt="upn-sehat" class="block py-8" />
            </a>
          </div>

          <!-- Hamburger -->
          <div class="flex items-center px-4">
            <button id="hamburger" name="hamburger" type="button"
              class="block absolute right-4 lg:hidden">
              <span class="w-[30px] h-[2px] my-2 block bg-gray-900"></span>
              <span class="w-[30px] h-[2px] my-2 block bg-gray-900"></span>
              <span class="w-[30px] h-[2px] my-2 block bg-gray-900"></span>
            </button>
          </div>

          <!-- List -->
          <nav id="nav-menu"
            class="hidden absolute py-2 bg-white shadow-lg rounded-lg max-w-[250px] w-full right-4 top-full lg:block lg:static lg:bg-transparent lg:max-w-full lg:shadow-none lg:rounded-none">
            <ul class="block lg:flex">
              <li class="group content-center">
                <a href="/"
                  class="text-gray-900 mx-6 py-2 flex group-hover:text-blue-600">Beranda</a>
              </li>
              <li class="group content-center">
                <a href="/to-article"
                  class="text-gray-900 mx-6 py-2 flex group-hover:text-blue-600">Artikel</a>
              </li>
              <li class="group content-center">
                <a href="/to-video"
                  class="text-gray-900 mx-6 py-2 flex group-hover:text-blue-600">Video</a>
              </li>
              <li class="group content-center">
                <a href="/to-aboutus"
                  class="text-gray-900 mx-6 py-2 flex group-hover:text-blue-600">About
                  Us</a>
              </li>
              <li
                class="group lg:ml-auto mx-6 space-x-2 py-2 flex content-center">
                <button id="logoutButton"
                  class="text-gray-800 px-4 py-2 rounded-md hover:bg-gray-400 focus:outline-none focus:ring focus:ring-gray-400 focus:ring-opacity-50 border-2 border-gray-200 w-full">
                  LogOut
                </button>
                <button onclick="window.location.href='/to-profile'"
                  class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 focus:outline-none focus:ring focus:ring-blue-600 focus:ring-opacity-50 w-full">
                  Profile
                </a>
              </li>
            </ul>
          </nav>
        </div>
      </div>
    </header>

    <!-- HERO SECTION -->
    <div class="hero-section py-8 lg:py-32 mb-32 mt-20">
      <div
        class="container mx-auto px-4 lg:flex lg:items-start lg:justify-between lg:space-x-8">
        <!-- Edit Profile Picture Section -->
        <div
          class="w-full lg:w-1/2 flex flex-col items-center bg-white p-4 lg:p-8 rounded-md shadow-md">
          <h1 class="text-2xl lg:text-3xl text-gray-900 font-bold mb-4">Edit
            Profile</h1>
          <img id="profile-image"
            src="https://firebasestorage.googleapis.com/v0/b/arif-9e465.appspot.com/o/images%2F865411610.jpg"
            class="h-24 lg:h-32 w-24 lg:w-32 rounded-full mb-4">
          <input type="file" id="file-input" style="display: none;">
          <button id="upload-button"
            class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 focus:outline-none focus:ring focus:ring-blue-600 focus:ring-opacity-50">
            Upload New Image
          </button>
        </div>
        <!-- Edit Account Details Section -->
        <div class="w-full lg:w-1/2 bg-white p-4 lg:p-8 rounded-md shadow-md">
          <h1 class="text-2xl lg:text-3xl text-gray-900 font-bold mb-4">Edit
            Account Details</h1>
          <div class="mb-4">
            <label for="username" class="block text-gray-700">Name</label>
            <input type="text" id="username" name="username"
              class="mt-1 p-2 border border-gray-300 rounded-md w-full">
          </div>
          <div class="mb-4">
            <label for="email" class="block text-gray-700">Email Address</label>
            <input type="email" id="email" name="email"
              class="mt-1 p-2 border border-gray-300 rounded-md w-full"
              disabled>
          </div>
          <div class="mb-4 grid grid-cols-1 lg:grid-cols-2 gap-4">
            <div>
              <label for="phone" class="block text-gray-700">Phone
                Number</label>
              <input type="text" id="phone" name="phone"
                class="mt-1 p-2 border border-gray-300 rounded-md w-full">
            </div>
            <div>
              <label for="birthday" class="block text-gray-700">Birth
                Date</label>
              <input type="date" id="birthday" name="birthday"
                class="mt-1 p-2 border border-gray-300 rounded-md w-full">
            </div>
          </div>
          <div class="flex justify-end mt-4">
            <button id="saveChangesBtn"
              class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 focus:outline-none focus:ring focus:ring-blue-600 focus:ring-opacity-50">Save
              Changes</button>
          </div>
        </div>
      </div>
    </div>

    <!-- FOOTER SECTION -->
    <footer class="bg-white text-white p-4">
      <div class="container mx-auto flex items-center justify-between">
        <!-- Logo -->
        <div class="logo flex space-x-3">
          <img src="/img/upnsehat-kecil.png" alt="Logo" class="h-8">
          <img src="/img/upn-kecil.png" alt="Logo" class="h-8">
        </div>
        <!-- Hak Cipta -->
        <p class="text-sm text-gray-900">&copy; 2024, Studi Informatika,
          Fakultas Ilmu Komputer. Hak Cipta Dilindungi</p>
      </div>
    </footer>

    <!-- Hmaburger Logic -->
    <script>
    const hamburger = document.querySelector("#hamburger");
    const navMenu = document.querySelector("#nav-menu");

    hamburger.addEventListener("click", function () {
      hamburger.classList.toggle("hamburger-active");
      navMenu.classList.toggle("hidden");
    });
  </script>

    <!-- logout -->
    <script>
    document.addEventListener("DOMContentLoaded", function () {
      const logoutButton = document.querySelector('#logoutButton');

      logoutButton.addEventListener('click', function () {
        // Hapus cookie 'uid'
        document.cookie = "uid=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

        // Arahkan ke halaman login
        window.location.href = '/to-login';
      });
    });
  </script>

    <!-- Jika Belum Login maka akan ke Login.ejs -->
    <script>
    // Fungsi untuk mendapatkan nilai cookie berdasarkan nama
    function getCookie(name) {
      let cookieArr = document.cookie.split(";");

      for (let i = 0; i < cookieArr.length; i++) {
        let cookiePair = cookieArr[i].split("=");

        /* Menghapus spasi di awal nama cookie dan membandingkannya dengan string "name" */
        if (name == cookiePair[0].trim()) {
          // Mengembalikan nilai dari cookie
          return decodeURIComponent(cookiePair[1]);
        }
      }

      // Mengembalikan null jika tidak ada cookie yang ditemukan
      return null;
    }

    // Memeriksa apakah cookie "email" ada
    let emailCookie = getCookie("uid");

    if (emailCookie === null) {
      // Mengarahkan ke halaman login jika cookie tidak ditemukan
      window.location.href = "/to-login";
    }
  </script>
    <!-- logout -->
    <script>
    document.addEventListener("DOMContentLoaded", function () {
      const logoutButton = document.querySelector('#logoutButton');

      logoutButton.addEventListener('click', function () {
        // Hapus cookie 'uid'
        document.cookie = "uid=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

        // Arahkan ke halaman login
        window.location.href = '/to-login';
      });
    });
  </script>

    <!-- get data -->
    <script>
    // Mendapatkan UID dari cookie
    function getCookie(name) {
      const value = `; ${document.cookie}`;
      const parts = value.split(`; ${name}=`);
      if (parts.length === 2) return parts.pop().split(';').shift();
    }

    const uid = getCookie('uid');

    // Mendapatkan data profil dari endpoint /cek-profile
    fetch(`http://localhost:3000/cek-profile?uid=${uid}`)
      .then(response => response.json())
      .then(data => {
        // Mengisi nilai input dengan data yang diterima
        document.getElementById('username').value = data.nama || '';
        document.getElementById('email').value = data.email || '';
        document.getElementById('phone').value = data.phoneNumber || '';
        document.getElementById('birthday').value = data.birthDate || '';

        // Mengatur gambar profil (profile-image) dengan URL dari respons data.image
        const profileImage = document.getElementById('profile-image');
        profileImage.src = data.image; // Gunakan existing src jika data.image tidak tersedia
      })
      .catch(error => console.error('Error:', error));
  </script>

    <!-- change profile -->
    <script>
    document.getElementById("saveChangesBtn").addEventListener("click", function () {
      // Ambil nilai dari field yang diperlukan
      var nama = document.getElementById("username").value;
      var phoneNumber = document.getElementById("phone").value;
      var birthDate = document.getElementById("birthday").value;

      // Ambil uid dari cookie (jika Anda menyimpannya dalam cookie)
      var uid = getCookie("uid");

      // Buat URL dengan parameter yang sesuai
      var url = "http://localhost:3000/update-profile?uid=" + uid + "&nama=" + encodeURIComponent(nama) + "&phoneNumber=" + encodeURIComponent(phoneNumber) + "&birthDate=" + birthDate;

      // Kirim permintaan HTTP GET ke endpoint /update-profile
      fetch(url)
        .then(response => {
          if (!response.ok) {
            throw new Error("Network response was not ok");
          }
          return response.text();
        })
        .then(data => {
          // Menampilkan respons dalam alert
          alert(data);
          console.log("Update successful:", data);
          // Tambahkan logika atau tindakan tambahan setelah pembaruan berhasil
        })
        .catch(error => {
          console.error("Error updating profile:", error);
          // Tambahkan penanganan kesalahan jika diperlukan
        });
    });

    // Fungsi untuk mendapatkan nilai dari cookie
    function getCookie(name) {
      var cookieArr = document.cookie.split("; ");
      for (var i = 0; i < cookieArr.length; i++) {
        var cookiePair = cookieArr[i].split("=");
        if (cookiePair[0] === name) {
          return cookiePair[1];
        }
      }
      return null;
    }
  </script>

    <!-- change image -->
    <script>
    document.addEventListener('DOMContentLoaded', function () {
      const uploadButton = document.getElementById('upload-button');
      const fileInput = document.getElementById('file-input');
      const profileImage = document.getElementById('profile-image');

      uploadButton.addEventListener('click', function () {
        fileInput.click();
      });

      fileInput.addEventListener('change', function () {
        const file = fileInput.files[0];
        if (file) {
          const formData = new FormData();
          formData.append('file', file);

          // Get uid from cookie
          const uid = getCookie('uid');
          formData.append('uid', uid); // Append uid to FormData

          fetch('http://localhost:3000/upload', {
            method: 'POST',
            body: formData,
          })
            .then(response => {
              if (!response.ok) {
                throw new Error('Upload gagal');
              }
              return response.json();
            })
            .then(data => {
              alert(data.message); // Show success message
              window.location.href = '/to-profile';
            })
            .catch(error => {
              alert('Upload gagal');
              console.error('Error:', error);
            });
        }
      });

      // Function to get cookie value by name
      function getCookie(name) {
        const cookies = document.cookie.split(';');
        for (let cookie of cookies) {
          const [cookieName, cookieValue] = cookie.split('=');
          if (cookieName.trim() === name) {
            return cookieValue;
          }
        }
        return '';
      }
    });
  </script>
  </body>

</html>