/**
 * Kapcsolat oldal űrlap (form) funkciók
 *
 * Ez a script felelős a kapcsolat oldalon található rendelési űrlap interaktív
 * funkcióiért. Dinamikusan jelenít meg/rejt el mezőket, frissíti a költségvetés
 * kimutatást és követi a kitöltési előrehaladást.
 *
 * Funkciók:
 * - Operációs rendszer választás alapján mezők megjelenítése
 * - Sürgősség csúszka szöveges értékkel
 * - Checkbox-ok alapján feltételes mezők
 * - Költségvetés kihasználtság számítás és megjelenítés
 * - Űrlap kitöltési progress bar
 * - Jelszó láthatóság váltása (szem ikon gombbal)
 *
 * FONTOS: Ez a script HTML5/CSS3 oktatáshoz nem szükséges, csak a jobb
 * felhasználói élmény érdekében került bele. A HTML form elemek önmagukban is
 * megérthetők.
 */

document.addEventListener('DOMContentLoaded', function() {

  // ========== ELEMEK KIVÁLASZTÁSA ==========
  // Operációs rendszer választás (radio buttonok)
  const osRadios = document.querySelectorAll('input[name="os-install"]');
  const adminPasswordDiv = document.getElementById('admin-password');
  const profilePictureDiv = document.getElementById('profile-picture-upload');

  // ========== ADMIN JELSZÓ MEZŐ MEGJELENÍTÉSE ==========
  // Windows 11 vagy Linux választása esetén jelenik meg
  function toggleAdminPassword() {
    // querySelector + :checked = kiválasztott radio button lekérése
    const selected = document.querySelector('input[name="os-install"]:checked').value;

    // Ha Windows 11 vagy Linux van kiválasztva, mutassuk a mezőket
    if (selected === 'windows11' || selected === 'linux') {
      adminPasswordDiv.style.display = 'block';
      profilePictureDiv.style.display = 'block';
    } else {
      // Egyéb esetben rejtsd el
      adminPasswordDiv.style.display = 'none';
      profilePictureDiv.style.display = 'none';
    }
  }

  // Minden radio buttonra figyeljük a változást
  osRadios.forEach(radio => {
    radio.addEventListener('change', toggleAdminPassword);
  });

  // Kezdeti állapot beállítása (oldal betöltéskor)
  toggleAdminPassword();

  // ========== SÜRGŐSSÉG CSÚSZKA (RANGE SLIDER) ==========
  const urgencyInput = document.getElementById('urgency');
  const urgencyValue = document.getElementById('urgency-value');
  // Szöveges értékek a csúszka pozíciókhoz (1-5)
  const urgencyLabels = ["Nem sürgős", "Kevésbé sürgős", "Közepes", "Sürgős", "Nagyon sürgős"];

  // Csúszka mozgatásakor frissítjük a szöveget
  urgencyInput.addEventListener('input', function() {
    // this.value = 1-5 közötti szám, tömbindex = value - 1
    urgencyValue.textContent = urgencyLabels[this.value - 1];
  });

  // ========== GARANCIAHOSSZABBÍTÁS KEZDETE ==========
  // Ha a checkbox be van pipálva, jelenjen meg a dátumválasztó
  const warrantyCheckbox = document.querySelector('input[name="warranty"]');
  const warrantyStartDiv = document.getElementById('extended-warranty-start');

  warrantyCheckbox.addEventListener('change', function() {
    if (this.checked) {
      warrantyStartDiv.style.display = 'block';  // Megjelenítés
    } else {
      warrantyStartDiv.style.display = 'none';   // Elrejtés
    }
  });

  // ========== HELYSZÍNI TÁMOGATÁS IDŐPONTJA ==========
  const supportCheckbox = document.querySelector('input[name="support"]');
  const supportTimeDiv = document.getElementById('support-time');

  supportCheckbox.addEventListener('change', function() {
    if (this.checked) {
      supportTimeDiv.style.display = 'block';
    } else {
      supportTimeDiv.style.display = 'none';
    }
  });

  // ========== TESTRESZABÁSI KONZULTÁCIÓ IDŐPONTJA ==========
  const customizationCheckbox = document.querySelector('input[name="customization"]');
  const customizationDatetimeDiv = document.getElementById('customization-datetime');

  customizationCheckbox.addEventListener('change', function() {
    if (this.checked) {
      customizationDatetimeDiv.style.display = 'block';
    } else {
      customizationDatetimeDiv.style.display = 'none';
    }
  });

  // ========== HELYSZÍNI ÜZEMBE HELYEZÉS HÓNAPJA ==========
  const onsiteCheckbox = document.querySelector('input[name="onsite-commissioning"]');
  const onsiteMonthDiv = document.getElementById('onsite-month');

  onsiteCheckbox.addEventListener('change', function() {
    if (this.checked) {
      onsiteMonthDiv.style.display = 'block';
    } else {
      onsiteMonthDiv.style.display = 'none';
    }
  });

  // ========== KÖLTSÉGVETÉS KIHASZNÁLTSÁG SZÁMÍTÁS ==========
  // Dinamikusan számolja, hogy a rendelés összege mennyi a költségvetésből
  const perComputerCost = document.getElementById('per-computer-cost');
  const totalBudget = document.getElementById('total-budget');
  const quantity = document.getElementById('quantity');
  const budgetUtilization = document.getElementById('budget-utilization');
  const budgetMeter = document.getElementById('budget-meter');

  function updateBudgetUtilization() {
    // parseFloat: szöveget számmá konvertál (pl. "100000" → 100000)
    // || 0: ha NaN (Not a Number), akkor 0 legyen
    const cost = parseFloat(perComputerCost.value) || 0;
    const total = parseFloat(totalBudget.value) || 0;
    const qty = parseFloat(quantity.value) || 0;

    // Teljes költség = darabár × mennyiség
    const used = qty * cost;

    // Százalék számítás
    let percent = 0;
    if (total > 0) {
      percent = (used / total) * 100;
    }

    // Százalék szöveg frissítése
    budgetUtilization.textContent = Math.round(percent) + '%';

    // Mérő szélessége (maximum 100%)
    const width = Math.min(100, percent);

    // Szín kiválasztása a százalék alapján
    let color = '#cd2122';  // Alapértelmezett piros
    if (percent > 100) color = '#cd2122';        // Túllépés - piros
    else if (percent >= 90) color = 'green';     // Majdnem teljes - zöld
    else if (percent >= 50) color = 'yellow';    // Félúton - sárga

    // CSS változók beállítása (--meter-width, --meter-color)
    budgetMeter.style.setProperty('--meter-width', width + '%');
    budgetMeter.style.setProperty('--meter-color', color);
  }

  // Minden beviteli mező változásakor frissítsük a költségvetés kimutatást
  perComputerCost.addEventListener('input', updateBudgetUtilization);
  totalBudget.addEventListener('input', updateBudgetUtilization);
  quantity.addEventListener('input', updateBudgetUtilization);

  // ========== ŰRLAP KITÖLTÉSI PROGRESS (HALADÁS JELZŐ) ==========
  // Megmutatja, hogy a kötelező mezők hány százaléka van kitöltve
  function updateProgress() {
    // Összes kötelező mező kiválasztása (required attribútummal)
    const requiredFields = document.querySelectorAll('input[required], select[required], textarea[required]');

    // Kitöltött mezők számolása
    let filled = 0;
    requiredFields.forEach(field => {
      // trim(): szóközök levágása a szöveg elejéről és végéről
      if (field.value.trim() !== '') filled++;
    });

    // Százalék számítás: (kitöltött / összes) × 100
    const progress = (filled / requiredFields.length) * 100;

    // Progress bar (HTML5 <progress> elem) frissítése
    document.getElementById('form-progress').value = progress;
  }

  // ========== ESEMÉNYFIGYELŐK HOZZÁADÁSA A KÖTELEZŐ MEZŐKHÖZ ==========
  // Minden kötelező mezőnél figyeljük a változásokat
  document.querySelectorAll('input[required], select[required], textarea[required]').forEach(field => {
    field.addEventListener('input', updateProgress);   // Gépelés közben
    field.addEventListener('change', updateProgress);  // Választás után
  });

  // Kezdeti progress frissítése (oldal betöltéskor)
  updateProgress();

  // ========== ŰRLAP BEKÜLDÉS (SUBMIT) KEZELÉSE ==========
  const form = document.querySelector('.contact-form');
  const successDialog = document.getElementById('success-dialog');
  const orderReference = document.getElementById('order-reference');

  form.addEventListener('submit', function(e) {
    // preventDefault: megakadályozza az alapértelmezett működést
    // (azaz: ne töltse újra az oldalt a form beküldésekor)
    e.preventDefault();

    // Referenciaszám generálása (véletlenszerű 8 karakteres kód)
    const refNumber = 'EH-' + Math.random().toString(36).substring(2, 10).toUpperCase();
    orderReference.textContent = refNumber;

    // Dialog megjelenítése (HTML5 natív modal)
    // showModal(): modal ablakként jeleníti meg, háttér elsötétítéssel
    // Valós alkalmazásban itt küldenénk el a form adatokat a szervernek
    successDialog.showModal();
  });

  // ========== JELSZÓ LÁTHATÓSÁG VÁLTÁSA ==========
  /**
   * Password toggle funkció - szem ikon gombbal váltható a jelszó láthatósága
   *
   * Működés:
   * - Alapértelmezetten type="password" = rejtett jelszó (****)
   * - Gombra kattintva type="text" = látható jelszó
   * - Újabb kattintásra vissza type="password"
   *
   * UX szempontok:
   * - Felhasználó láthatja, hogy helyesen gépelte-e be a jelszót
   * - Gyakori minta modern weboldalon
   * - Akadálymentesség: aria-label a gombra
   */
  const passwordToggleBtn = document.querySelector('.password-toggle');
  const passwordInput = document.getElementById('admin-pass');

  // Ha megtaláltuk a gombot és az input mezőt
  if (passwordToggleBtn && passwordInput) {
    passwordToggleBtn.addEventListener('click', function() {
      // Típus lekérése (password vagy text)
      const type = passwordInput.getAttribute('type');

      // Váltás: ha password, akkor text; ha text, akkor password
      if (type === 'password') {
        passwordInput.setAttribute('type', 'text');
        // Opcionális: ikon váltása (pl. áthúzott szem)
        // passwordToggleBtn.querySelector('.eye-icon').textContent = '👁️‍🗨️';
      } else {
        passwordInput.setAttribute('type', 'password');
        // passwordToggleBtn.querySelector('.eye-icon').textContent = '👁️';
      }

      // Fókusz visszaadása az input mezőre (jobb UX)
      passwordInput.focus();
    });
  }
});
