<!DOCTYPE html>
<html lang="bg">
<head>
  <meta charset="UTF-8">
  <title>Калкулатор на дървени греди</title>
  <link rel="stylesheet" href="/wp-content/themes/exs/css/beam-calculator.css">
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #fffdf6;
      max-width: 960px;
      margin: auto;
      padding: 1rem;
    }
    label {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 0.85rem;
      margin-bottom: 0.2rem;
    }
    label > select,
    label > input {
      width: 55%;
      margin-left: 0.5rem;
      padding: 0.15rem 0.3rem;
      font-size: 0.85rem;
    }
    .tooltip {
      position: relative;
      cursor: help;
      border-bottom: 1px dotted #666;
    }
    .tooltip:hover::after {
      content: attr(data-tooltip);
      position: absolute;
      top: 1.5em;
      left: 0;
      background: #fff;
      border: 1px solid #ccc;
      padding: 0.75em;
      font-size: 0.85em;
      white-space: pre-wrap;
      max-width: 300px;
      z-index: 10;
      box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    }
    .result ul {
      list-style: none;
      padding: 0;
      margin: 0.5rem 0;
    }
    .result li {
      margin-bottom: 0.3rem;
    }
    .warning {
      color: red;
      font-weight: bold;
    }
    #printArea {
      display: none;
    }
    @media print {
      body * { visibility: hidden; }
      #printArea, #printArea * {
        visibility: visible;
        display: block !important;
      }
      #printArea {
        position: absolute;
        left: 0;
        top: 0;
        font-family: 'Times New Roman', serif;
        font-size: 14px;
        padding: 20px;
      }
    }
  </style>
</head>
<body>
  <h1 style="text-align: center;">Калкулатор на дървени греди</h1>

  <table style="width: 100%; border-spacing: 2rem 0;">
    <tr>
      <td style="vertical-align: top; width: 50%;">
        <label>Вид дървесина
          <select id="woodType" onchange="calculate_beam()">
            <option value="9500">Смърч (~9.5 GPa)</option>
            <option value="10000">Бор (~10 GPa)</option>
            <option value="11000" selected>KVH (~11 GPa)</option>
            <option value="12000">Лиственица (~12 GPa)</option>
            <option value="13000">LVL (~13 GPa)</option>
          </select>
        </label>
        <label>Дължина на отвора L (см)
          <input type="number" id="span" value="400" oninput="calculate_beam()">
        </label>
        <label class="tooltip" data-tooltip="Влияние на размерите на сечението\n\nВисочина на гредата (h)\n- Инерционният момент нараства пропорционално на h³\n- Увеличение на височината 2 пъти → прогибът намалява около 8 пъти\n- Най-ефективният начин за увеличаване на якост и твърдост\n\nШирина на гредата (b)\n- Инерционният момент нараства линейно с ширината\n- Увеличение на ширината 2 пъти → прогибът намалява 2 пъти\n- По-слабо влияние от височината при еднакво увеличение\n\nПример: греда 50×150 мм → I = 14.1 cm⁴, 50×200 мм → I = 33.3 cm⁴ (2.4 пъти по-твърда)">
          Ширина на гредата W (мм)
          <input type="number" id="width" value="150" oninput="calculate_beam()">
        </label>
        <label>Височина на гредата H (мм)
          <input type="number" id="height" value="150" oninput="calculate_beam()">
        </label>
        <label class="tooltip" data-tooltip="Референтни натоварвания по Еврокод\n\n💼 Офис / жилище: 200 kg/m²\n🏦 Обитаеми стаи / коридори: 150 – 200 kg/m²\n🧱 Прегради (леки): 100 kg/m²\n🏗️ Складови помещения: 300 – 500 kg/m²\n❄️ Покрив (сняг): 75 – 150 kg/m²\n\n* Стойностите са ориентировъчни според EN 1991-1-1 и зависят от предназначението на помещението и национални приложения.">
          Разпределено натоварване (kg/m²)
          <input type="number" id="load" value="300" oninput="calculate_beam()">
        </label>
        <label>Разстояние между гредите S (мм)
          <input type="number" id="spacing" value="500" oninput="calculate_beam()">
        </label>
        <label>Критерий за прогиб *
          <select id="deflectionLimit" onchange="calculate_beam()">
            <option value="200">L/200 – временно натоварване</option>
            <option value="250">L/250 – необитаеми зони</option>
            <option value="300" selected>L/300 – обитаеми зони</option>
            <option value="400">L/400 – подове с покрития</option>
            <option value="500">L/500 – чувствителни конструкции</option>
          </select>
        </label>
        <div style="font-size: 0.8em; color: #555;">
          <em>* Стойностите са според EN 1995-1-1 и могат да варират.</em>
        </div>
      </td>
      <td style="vertical-align: top; width: 50%;">
        <img id="trussImage" src="/wp-content/uploads/beam.jpg" alt="Схема" style="max-width: 100%; margin-bottom: 1rem;">
        <div class="result" id="result"></div>
      </td>
    </tr>
  </table>

  <div style="margin-top: 1rem;">
    <button id="printButton" style="display:none">🖨️ За печат</button>
  </div>

  <div id="calcCounter" style="margin-top: 1rem; font-size: 0.9em; color: #555;">
    Извършени изчисления: <span id="calcCounterValue">0</span>
  </div>

  <!-- Скрытые блоки -->
  <div id="modalContent" style="display:none;"></div>
  <div id="printInputs" style="display:none;"></div>
  <div id="printArea" style="display:none;">
    <h2>Резултати от изчислението</h2>
    <div id="printInputs"></div>
    <div id="result"></div>
  </div>

  <script src="/wp-content/uploads/beam.js"></script>
  <script src="/wp-content/uploads/calc_core.js"></script>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const printBtn = document.getElementById('printButton');
      if (printBtn) {
        printBtn.addEventListener('click', () => {
          fillPrintInputs();
          setTimeout(() => openPrintIframe(), 300);
        });
      }
    });
  </script>
</body>
</html>
