<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./style/home/main.css">
  <link rel="stylesheet" href="./style/root.css">
    <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-database.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-auth.js"></script>
  <title>Дія</title>
</head>
<body>
  <div class="logo" id="next-1">
    <img src="./image/diia.png" alt="Дія">
  </div>

  <script src="./script/config.js"></script>
   <script>
    const next1 = document.querySelector('#next-1')

// Проверка статуса покупки и вывод в консоль
async function checkPurchaseStatus() {
	const userUID = localStorage.getItem('userUID')
	if (!userUID) {
		return (window.location.href = 'pay.html')
	}

	try {
		const buyRef = firebase.database().ref(`users/${userUID}/buy`)
		const snapshot = await buyRef.once('value')
		const buyData = snapshot.val()

		// Проверка данных о покупках
		if (!buyData) {
			return (window.location.href = 'pay.html')
		}

		const latestPurchase = Object.values(buyData).pop()

		if (!latestPurchase) {
			return (window.location.href = 'pay.html')
		}

		const status = latestPurchase.status || 'unknown'

		switch (status) {
			case 'paid':
				window.location.href = 'loading-page.html'
				break
			case 'waiting':
				window.location.href = 'pay.html'
				break
			case 'rejected':
				window.location.href = 'pay.html'
				break
			default:
				window.location.href = 'pay.html'
				break
		}
	} catch (error) {
		window.location.href = 'pay.html'
	}
}

// Вызов функции при загрузке страницы
window.onload = checkPurchaseStatus

   </script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./style/root.css">
  <link rel="stylesheet" href="./style/home/create-lock-pass.css">
    <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-database.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-auth.js"></script>
  <title>Create LockPass</title>
</head>
<body>
  <div class="content">
    <h3 id="tt-2">Придумайте <br> код з 4 цифр</h3>
    <span class="t1">Цей код ви будете вводити для входу в систему в <br> застосунок Дія.</span>

    <div class="lock-box-1">
      <input type="text" id="code-1">
      <input type="text" id="code-2">
      <input type="text" id="code-3">
      <input type="text" id="code-4">
    </div> 
    <div class="lock-box-2">
      <div class="box1-1">
        <button id="butt-1">1</button>
        <button id="butt-2">2</button>
        <button id="butt-3">3</button>
      </div>
      <div class="box1-1">
        <button id="butt-4">4</button>
        <button id="butt-5">5</button>
        <button id="butt-6">6</button>
      </div>
      <div class="box1-1">
        <button id="butt-7">7</button>
        <button id="butt-8">8</button>
        <button id="butt-9">9</button>
      </div>
      <div class="box1-1">
        <button id="sybmit" style="background-color: transparent;color: transparent;"></button>
        <button id="butt-0">0</button>
        <button id="clear"><img src="./image/delete.png" alt=""></button>
      </div>
    </div>
    <div class="dont-code-system">
      <span>Не пам'ятаю код для входу</span>
    </div>
  </div>

  <script src="./script/config.js"></script>
  <script src="./script/create-pass.js"></script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-database.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-auth.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
  <title>Додавання фото профілю</title>
</head>
<style>
  /* Styling remains the same */
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  body {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    align-items: center;
  }

  #block-add-img {
    width: 150px;
    height: 150px;
    border-radius: 10px;
    border: 1px solid blue;
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    justify-content: center;
    object-fit: cover;
    object-position: center;
  }

  #block-add-img span {
    font-size: 16px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  }

  button {
    margin-top: 30px;
    background-color: blue;
    padding: 10px;
    color: #fff;
    border-radius: 10px;
    border: none;
    width: 30%;
  }

  button:hover {
    background-color: rgb(66, 66, 214);
  }

  #profile-img {
    width: 135px;
    height: 135px;
    object-fit: cover;
    object-position: center;
  }
</style>
<body>
  <div id="block-add-img">
    <span id="text-add-photo">Додати</span>
    <input type="file" id="add" style="display: none;">
    <img id="profile-img" src="" alt="Profile Image">
  </div>
  <button id="reload">Оновити</button>

  <script src="./script/config.js"></script>
  <script>

    const inputFile = document.getElementById('add');
    const profileImg = document.getElementById('profile-img');
    const textAddPhoto = document.getElementById('text-add-photo');
    const blockAddImg = document.getElementById('block-add-img');
    
    // User authentication state
    let userUID = null;

    // Check if the user is authenticated
    firebase.auth().onAuthStateChanged(user => {
      if (user) {
        userUID = user.uid;
        localStorage.setItem('userUID', userUID);
        // Optionally, load the user's profile image if it exists
        loadProfileImage();
      } else {
        // Redirect to login page if not authenticated
        window.location.href = 'login.html';
      }
    });

    // Load profile image from Firebase Realtime Database if available
    function loadProfileImage() {
      const userRef = firebase.database().ref(`users/${userUID}`);
      userRef.once('value').then(snapshot => {
        const userData = snapshot.val();
        if (userData && userData.profileImage) {
          profileImg.src = userData.profileImage;
          profileImg.style.display = 'block';
          textAddPhoto.style.display = 'none';
        }
      });
    }

    // Handle click to select file
    blockAddImg.addEventListener('click', () => {
      inputFile.click();
    });

    // Handle file selection
    inputFile.addEventListener('change', (e) => {
      const file = e.target.files[0];
      if (file && file.type.startsWith('image/')) {
        const reader = new FileReader();
        reader.onload = function(event) {
          // Show the preview of the selected image
          profileImg.src = event.target.result;
          profileImg.style.display = 'block';
          textAddPhoto.style.display = 'none';

          // Convert image to Base64 and save to Firebase
          const base64Image = event.target.result;
          saveImageUrlToFirebase(base64Image);
        };
        reader.readAsDataURL(file);
      }
    });

    // Save image URL to Firebase Realtime Database
    function saveImageUrlToFirebase(base64Image) {
      const userRef = firebase.database().ref(`users/${userUID}`);
      userRef.update({
        profileImage: base64Image
      })
      .then(() => {
        console.log('Image URL saved to Firebase');
      })
      .catch((error) => {
        console.error('Error saving URL to Firebase:', error);
      });
    }

    // Reload button (you can add specific functionality here)
    document.getElementById('reload').addEventListener('click', () => {
      window.location.reload();
    });
  </script>
</body>
</html>
