<?php
/**
 * Template Name: Health Test Simple
 * Description: Simple health test page converted from static HTML.
 */
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta property="og:image" content="https://www.drtmo.info/wp-content/uploads/2026/01/Test.webp">
    <meta property="og:image:width" content="1200">
    <meta property="og:image:height" content="630">
    <title><?php echo esc_html( get_the_title() ? get_the_title() . ' | ' . get_bloginfo( 'name' ) : 'Тест здоров’я | ' . get_bloginfo( 'name' ) ); ?></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
    	<script
      async
      src="https://www.googletagmanager.com/gtag/js?id=G-7YSR61LGKP"
    ></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag() {
        dataLayer.push(arguments);
      }
      gtag("js", new Date());
      gtag("config", "G-7YSR61LGKP");
    </script>

    <style>
        :root {
            --primary: #0b5ed7;
            --bg: #f0f2f5;
            --white: #ffffff;
            --danger: #dc3545;
            --warning: #ffc107;
            --success: #198754;
        }

        body {
            font-family: 'Inter', sans-serif;
            background: var(--bg);
            margin: 0;
            padding: 20px;
        }

        .container {
            max-width: 700px;
            margin: auto;
            background: var(--white);
            padding: 40px;
            border-radius: 16px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        }

        .form-group {
            margin-bottom: 20px;
        }

        label {
            display: block;
            font-weight: 600;
            margin-bottom: 8px;
            font-size: 14px;
        }

        input,
        select,
        textarea {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 16px;
            box-sizing: border-box;
        }

        button {
            width: 100%;
            padding: 14px;
            background: var(--primary);
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            margin-top: 10px;
        }

        .result {
            margin-top: 30px;
            padding: 20px;
            border-radius: 12px;
            display: none;
        }

        .result.low {
            background: #e8f5e9;
            border-left: 5px solid var(--success);
        }

        .result.medium {
            background: #fffde7;
            border-left: 5px solid var(--warning);
        }

        .result.high {
            background: #ffebee;
            border-left: 5px solid var(--danger);
        }

        .action-buttons {
            gap: 10px;
            margin-top: 20px;
            display: none;
        }

        .btn-secondary {
            background: #6c757d;
            flex: 1;
        }

        .btn-outline {
            background: transparent;
            border: 1px solid var(--primary);
            color: var(--primary);
            flex: 1;
        }

        .disclaimer {
            font-size: 12px;
            color: #888;
            margin-top: 30px;
            text-align: center;
            border-top: 1px solid #eee;
            padding-top: 10px;
        }

        @media (max-width: 640px) {
            body {
                padding: 14px;
            }

            .container {
                padding: 22px;
            }

            .action-buttons,
            .row {
                display: grid !important;
                grid-template-columns: 1fr !important;
            }
        }
    </style>
</head>
<body <?php body_class( 'health-test-simple-template' ); ?>>
<?php wp_body_open(); ?>

<nav class="breadcrumbs" style="font-size:20px;color:#DC143C;margin-bottom:18px; text-align: center;">
  <a href="<?php echo esc_url( home_url( '/' ) ); ?>" style="color:#16a085;text-decoration:underline;">ДРТМО</a> &nbsp;/&nbsp;
  <a href="<?php echo esc_url( home_url( '/primum-non-nocere-3/' ) ); ?>" style="color:#4169E1;text-decoration:underline;">Найперше не нашкодь</a> &nbsp;/&nbsp; <strong>Тест здоров'я</strong>
</nav>

<div class="container" id="contentToPrint">
    <h1 style="color: var(--primary); text-align: center;">Медична анкета стану здоров'я</h1>

    <form id="healthForm">
        <div class="row" style="display: flex; gap: 15px;">
            <div class="form-group" style="flex: 1;">
                <label for="age">Вік</label>
                <input type="number" id="age" required>
            </div>
            <div class="form-group" style="flex: 1;">
                <label for="gender">Стать</label>
                <select id="gender" onchange="updateSymptoms()">
                    <option value="male">Чоловік</option>
                    <option value="female">Жінка</option>
                </select>
            </div>
        </div>

        <div class="form-group">
            <label for="symptoms">Симптоми</label>
            <select id="symptoms"></select>
        </div>

        <div class="form-group">
            <label for="duration">Тривалість</label>
            <select id="duration">
                <option value="1">До 3 днів</option>
                <option value="2">3-7 днів</option>
                <option value="3">Більше тижня</option>
            </select>
        </div>

        <div class="form-group">
            <label for="comment">Коментар</label>
            <textarea id="comment" rows="2"></textarea>
        </div>

        <button type="button" onclick="calculate()">Отримати результат</button>
    </form>

    <div class="result" id="resultBlock">
        <h3 id="resultTitle"></h3>
        <p id="resultText"></p>
    </div>

    <div class="action-buttons" id="actionButtons">
        <button type="button" class="btn-outline" onclick="downloadPDF()">Завантажити PDF</button>
        <button type="button" class="btn-secondary" onclick="sendEmail()">Надіслати на Email</button>
    </div>

    <div class="disclaimer">
        ⚠️ Не є медичним діагнозом. <a href="<?php echo esc_url( home_url( '/' ) ); ?>" target="_blank" rel="noopener noreferrer" style="color:#DC143C;text-decoration:underline;">DRTMO © 2026</a>
    </div>
</div>

<script>
const symptomsData = {
    male: [
        { val: 1, text: "Втома" },
        { val: 2, text: "Головний біль" },
        { val: 5, text: "Біль у грудях (кардіо ризик)" },
        { val: 3, text: "Підвищений тиск" }
    ],
    female: [
        { val: 1, text: "Втома" },
        { val: 2, text: "Запаморочення" },
        { val: 5, text: "Біль у грудях" },
        { val: 3, text: "Гормональні зміни / Слабкість" }
    ]
};

function updateSymptoms() {
    const gender = document.getElementById('gender').value;
    const select = document.getElementById('symptoms');
    select.innerHTML = "";

    symptomsData[gender].forEach(s => {
        const opt = document.createElement('option');
        opt.value = s.val;
        opt.innerText = s.text;
        select.appendChild(opt);
    });
}

window.addEventListener('load', updateSymptoms);

function calculate() {
    const age = document.getElementById("age").value;
    if (!age) {
        alert("Вкажіть вік!");
        return;
    }

    const symptomVal = parseInt(document.getElementById("symptoms").value, 10);
    const durationVal = parseInt(document.getElementById("duration").value, 10);
    const score = symptomVal + durationVal;

    const rb = document.getElementById("resultBlock");
    const ab = document.getElementById("actionButtons");

    rb.style.display = "block";
    ab.style.display = "flex";

    let risk = "low";
    let title = "Низький ризик";
    let text = "Ваш стан виглядає стабільним, але спостерігайте за симптомами.";

    if (score >= 6 || symptomVal === 5) {
        risk = "high";
        title = "Високий ризик";
        text = "Рекомендуємо терміново звернутися до лікаря або викликати допомогу!";
    } else if (score >= 4) {
        risk = "medium";
        title = "Середній ризик";
        text = "Рекомендуємо записатися на консультацію до терапевта найближчим часом.";
    }

    rb.className = "result " + risk;
    document.getElementById("resultTitle").innerText = title;
    document.getElementById("resultText").innerText = text;
}

function downloadPDF() {
    const element = document.getElementById('contentToPrint');
    const opt = {
        margin: 0.5,
        filename: 'DRTMO_Result.pdf',
        image: { type: 'jpeg', quality: 0.98 },
        html2canvas: { scale: 2 },
        jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
    };
    html2pdf().set(opt).from(element).save();
}

function sendEmail() {
    const title = document.getElementById("resultTitle").innerText;
    const text = document.getElementById("resultText").innerText;
    const body = `Мій результат тесту DRTMO: ${title}. %0D%0AРекомендація: ${text}`;
    window.location.href = `mailto:?subject=Результат тесту здоров'я&body=${body}`;
}
</script>

<?php wp_footer(); ?>
</body>
</html>