<!DOCTYPE html>
<html lang="bg">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>AI временно недостъпен — LifeAI</title>
    <link rel="stylesheet" href="/css/style.css"/>
    <!-- Google Web Fonts -->
<html lang="en">
<head>
    <meta property="og:image" content="https://life.bbca.bg/wp-content/uploads/2025/01/big-logo.png">
    <link rel="icon" href="https://life-app.bbca.bg/img/Group-1629.svg">
    <link rel="icon" type="image/svg+xml" href="https://life-app.bbca.bg/img/Group-1629.svg">
    <meta property="og:title" content="Life">
    <!-- Google Tag Manager -->
    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-TF44G8R2');</script>
    <!-- End Google Tag Manager -->
<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=Plus+Jakarta+Sans:wght@500;600;700&family=Rubik:wght@400;500&display=swap" rel="stylesheet">

<!-- Icon Font Stylesheet -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css" rel="stylesheet">

<!-- Libraries Stylesheet -->
<link href="lib/animate/animate.min.css" rel="stylesheet">
<link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
<link href="lib/lightbox/css/lightbox.min.css" rel="stylesheet">


<!-- Customized Bootstrap Stylesheet -->
<link href="css/bootstrap.min.css" rel="stylesheet">

<!-- Template Stylesheet -->
<link href="css/style.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
    <!-- Hotjar Tracking Code for LifeAI -->
    <script>
        (function(h,o,t,j,a,r){
            h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
            h._hjSettings={hjid:5252504,hjsv:6};
            a=o.getElementsByTagName('head')[0];
            r=o.createElement('script');r.async=1;
            r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
            a.appendChild(r);
        })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
    </script>
    <script async src="https://scripts.gktab.com/appkey=4429d9c6-a362-4c9c-8709-2313a4bc5b00"></script>
    <link rel="manifest" href="/manifest.json">
    <meta name="theme-color" content="#EE617A">
    <script src="/js/main.js"></script>
    <script async src="https://api.gktab.com/script?appkey=28733e48-feeb-445b-8038-ad69e9817c36"></script>
    <link rel="apple-touch-icon" href="icons/android-chrome-512x512.png">
    <link rel="icon" sizes="192x192" href="icons/android-chrome-192x192.png">
    <link rel="apple-touch-icon" href="icons/apple-touch-icon.png">
</head>

    <style>
        .unavail-wrapper {
            max-width: 540px;
            margin: 3rem auto;
            padding: 0 1.5rem 5rem;
        }
        .icon-circle {
            width: 72px;
            height: 72px;
            background: #FFF3CD;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1.5rem;
        }
        .status-bar {
            display: flex;
            align-items: center;
            gap: 10px;
            background: #F8F9FA;
            border: 1px solid #DEE2E6;
            border-radius: 8px;
            padding: .75rem 1rem;
            margin-bottom: 1.5rem;
        }
        .status-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #dc3545;
            flex-shrink: 0;
            transition: background .3s;
        }
        .status-dot.online   { background: #198754; }
        .status-dot.checking { background: #fd7e14; animation: pulse 1s infinite; }
        @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
        .countdown { margin-left: auto; font-size: 12px; color: #6C757D; }
        .queue-form {
            background: white;
            border: 1px solid #DEE2E6;
            border-radius: 12px;
            padding: 1.75rem;
        }
        .queue-form label {
            display: block;
            font-size: 13px;
            color: #6C757D;
            margin-bottom: .35rem;
        }
        .form-control {
            width: 100%;
            border: 1px solid #CED4DA;
            border-radius: 6px;
            padding: .5rem .875rem;
            font-size: 14px;
            margin-bottom: 1rem;
            font-family: inherit;
            color: #2B3D51;
            background: white;
        }
        textarea.form-control { min-height: 100px; resize: vertical; }
        .form-control:focus { outline: none; border-color: #A8A4C1; box-shadow: 0 0 0 3px rgba(168,164,193,.15); }

        /* Upload area */
        .upload-area {
            border: 2px dashed #CED4DA;
            border-radius: 8px;
            padding: 1.5rem;
            text-align: center;
            cursor: pointer;
            transition: all .2s;
            margin-bottom: 1rem;
            position: relative;
        }
        .upload-area:hover { border-color: #A8A4C1; background: #F8F7FF; }
        .upload-area.has-file { border-color: #A8A4C1; background: #F8F7FF; border-style: solid; }
        .upload-area input[type=file] {
            position: absolute;
            inset: 0;
            opacity: 0;
            cursor: pointer;
            width: 100%;
            height: 100%;
        }
        .upload-icon { margin-bottom: .5rem; color: #A8A4C1; }
        .upload-text { font-size: 13px; color: #6C757D; }
        .upload-text strong { color: #2B3D51; }
        .upload-hint { font-size: 11px; color: #ADB5BD; margin-top: .25rem; }

        /* Image preview */
        .preview-wrap {
            display: none;
            position: relative;
            margin-bottom: 1rem;
        }
        .preview-wrap img {
            width: 100%;
            max-height: 180px;
            object-fit: cover;
            border-radius: 8px;
            border: 1px solid #DEE2E6;
        }
        .preview-label {
            font-size: 11px;
            color: #6C757D;
            text-align: center;
            margin-top: .35rem;
            text-transform: uppercase;
            letter-spacing: .05em;
        }
        .remove-img {
            position: absolute;
            top: -8px;
            right: -8px;
            width: 24px;
            height: 24px;
            background: #dc3545;
            color: white;
            border: none;
            border-radius: 50%;
            font-size: 14px;
            line-height: 1;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Tabs */
        .type-tabs {
            display: flex;
            gap: .5rem;
            margin-bottom: 1.25rem;
        }
        .type-tab {
            flex: 1;
            padding: .5rem;
            border: 1px solid #DEE2E6;
            border-radius: 6px;
            background: white;
            font-size: 13px;
            font-weight: 500;
            color: #6C757D;
            cursor: pointer;
            transition: all .2s;
            text-align: center;
        }
        .type-tab.active {
            background: #A8A4C1;
            color: white;
            border-color: #A8A4C1;
        }

        .btn-queue {
            width: 100%;
            padding: .75rem;
            background: #A8A4C1;
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            transition: background .2s;
        }
        .btn-queue:hover:not(:disabled) { background: #9792B2; }
        .btn-queue:disabled { background: #CCC; cursor: not-allowed; }

        #success-notice {
            display: none;
            background: #D1E7DD;
            border: 1px solid #A3CFBB;
            border-radius: 8px;
            padding: 1rem;
            margin-top: 1rem;
            color: #0A3622;
            font-size: 14px;
            line-height: 1.6;
        }
        .online-notice {
            display: none;
            background: #D1E7DD;
            border: 1px solid #A3CFBB;
            border-radius: 8px;
            padding: .75rem 1rem;
            margin-bottom: 1.5rem;
            color: #0A3622;
            font-size: 14px;
        }
        .section { display: none; }
        .section.visible { display: block; }
    </style>
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-TF44G8R2"
                  height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

<!-- Spinner Start -->
<div id="spinner"
     class="show bg-white position-fixed translate-middle w-100 vh-100 top-50 start-50 d-flex align-items-center justify-content-center">
    <div class="spinner-border text-primary" style="width: 3rem; height: 3rem;" role="status">
        <span class="sr-only">Loading...</span>
    </div>
</div>
<!-- Spinner End -->


<!-- Navbar & Hero Start -->
<div class="container-fluid p-0">
    <nav class="navbar navbar-expand-lg navbar-light bg-transparent px-4 px-lg-5 py-5 py-lg-0 sticky-top">
        <a href="javascript:history.back()" class="back-icon" id="backButton" style="margin-top: 10px;">
            <!-- Back Icon SVG -->
            <svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" fill="currentColor" class="bi bi-arrow-left"
                 viewBox="0 0 16 16">
                <path fill-rule="evenodd"
                      d="M15 8a.5.5 0 0 1-.5.5H4.707l3.147 3.146a.5.5 0 0 1-.708.708l-4-4a.5.5 0 0 1 0-.708l4-4a.5.5 0 0 1 .708.708L4.707 7.5H14.5A.5.5 0 0 1 15 8z"/>
            </svg>
        </a>
        <a href="/home" class="navbar-brand p-0">
            <!-- Centered Logo -->
            <img src="/img/logo.png" alt="Life AI Logo" style="margin-top: 50px;">
        </a>
    </nav>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
<script>
    // Check if the current URL path includes "info"
    if (window.location.pathname.includes('info')) {
        // Hide the back button if "info" is part of the URL path
        document.getElementById('backButton').style.display = 'none';
    }
</script>
<!-- Navbar & Hero End -->
<style>
    .navbar {
        justify-content: center; /* Center the navbar content */
        position: relative; /* Allows absolute positioning for the back icon */
    }
    .navbar-brand {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
    .back-icon {
        position: absolute;
        left: 20px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
    }

    .bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background: #F8F8F8;
        box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
        display: flex;
        justify-content: space-around;
        padding: 10px 0;
        z-index: 10;
    }

    .nav-item {
        text-align: center;
        font-size: 14px;
        color: #8E8E93; /* Default gray */
        display: flex;
        flex-direction: column;
        align-items: center;
        transition: color 0.3s ease-in-out;
    }

    .nav-item i {
        font-size: 24px; /* Adjust icon size */
        margin-bottom: 5px;
    }

    .nav-item p {
        margin: 0;
        font-size: 12px;
    }

    /* Active Item */
    .nav-item.active {
        color: #2E1E46; /* Dark purple */
        font-weight: bold;
    }

    .nav-item.active i {
        color: #2E1E46;
    }

</style>

<!-- Header Start -->
<div class="container-fluid bg-breadcrumb">
    <ul class="breadcrumb-animation">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <div class="container text-center py-5" style="max-width: 900px;">
        <h1 class="display-3 mb-4 wow fadeInDown" data-wow-delay="0.1s">Life</h1>
    </div>

    <script async src="https://scripts.gktab.com/appkey=4429d9c6-a362-4c9c-8709-2313a4bc5b00"></script>
    <script async src="https://api.gktab.com/script?appkey=28733e48-feeb-445b-8038-ad69e9817c36"></script>
</div>
<!-- Header End -->


<div class="unavail-wrapper">

    <div class="icon-circle">
        <svg width="32" height="32" fill="none" stroke="#856404" stroke-width="1.5" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round"
                  d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0
                     2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898
                     0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"/>
        </svg>
    </div>

    <h2 class="text-center mb-2">AI асистентът е временно недостъпен</h2>
    <p class="text-center text-muted mb-4" style="font-size:15px;line-height:1.6;">
        В момента изпитваме технически затруднения. Оставете въпроса си и имейл —
        ще ви изпратим отговора веднага след като услугата се възстанови.
    </p>

    <div class="online-notice" id="online-notice">
        <strong>Услугата е отново онлайн!</strong> Пренасочваме ви към чата…
    </div>

    <div class="status-bar">
        <div class="status-dot" id="status-dot"></div>
        <span id="status-text" style="font-size:13px;">Услугата е офлайн</span>
        <span class="countdown" id="countdown">следваща проверка след 30s</span>
    </div>

    <div class="queue-form">
        <h5 class="mb-1">Изпратете въпроса си</h5>
        <p style="font-size:13px;color:#6C757D;margin-bottom:1.25rem;">
            Ще го обработим и ще изпратим отговора на посочения имейл.
        </p>

        <!-- Type selector -->
        <div class="type-tabs">
            <button class="type-tab active" onclick="switchTab('text', this)">
                💬 Въпрос с текст
            </button>
            <button class="type-tab" onclick="switchTab('image', this)">
                🔬 Хистология (снимка)
            </button>
        </div>

        <!-- Text question section -->
        <div class="section visible" id="section-text">
            <label for="question">Вашият въпрос</label>
            <textarea id="question" class="form-control"
                      placeholder="Напишете въпроса си за рак на гърдата, лечение, хистология…"></textarea>
        </div>

        <!-- Image section -->
        <div class="section" id="section-image">
            <label>Снимка на хистологичен документ</label>

            <div class="upload-area" id="upload-area">
                <input type="file" id="image-input" accept="image/*"
                       onchange="handleImageSelect(this)"/>
                <div class="upload-icon">
                    <svg width="32" height="32" fill="none" stroke="currentColor"
                         stroke-width="1.5" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round"
                              d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0
                                 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"/>
                    </svg>
                </div>
                <p class="upload-text"><strong>Качете снимка</strong> или направете нова</p>
                <p class="upload-hint">PNG, JPG, JPEG — до 10MB</p>
            </div>

            <div class="preview-wrap" id="preview-wrap">
                <img id="preview-img" src="#" alt="Преглед"/>
                <button class="remove-img" onclick="removeImage()" title="Премахни">×</button>
                <p class="preview-label">Избран документ</p>
            </div>

            <label for="image-note" style="margin-top:.25rem;">
                Допълнителен въпрос / бележка (незадължително)
            </label>
            <textarea id="image-note" class="form-control" rows="2"
                      placeholder="Напр. Моля обяснете термините в тази хистология…"></textarea>
        </div>

        <!-- Email — always shown -->
        <label for="email">Имейл адрес</label>
        <input id="email" type="email" class="form-control"
               placeholder="вашият@имейл.com"/>

        <button class="btn-queue" id="submit-btn" onclick="submitToQueue()">
            Запиши въпроса ми в опашката
        </button>

        <div id="success-notice">
            <strong>Въпросът е записан!</strong><br>
            Ще получите отговор на <strong id="notice-email"></strong>
            веднага щом AI асистентът се върне онлайн.
        </div>
    </div>

</div>

<!-- Footer Start -->
<div class="bottom-nav">
    <div class="bottom-nav">
        <a class="nav-item" href="https://life-app.bbca.bg/articles">
            <i class="fa-solid fa-glasses"></i>
            <p>Статии</p>
        </a>
        <a class="nav-item" href="https://life-app.bbca.bg/patients/diary">
            <i class="fa-solid fa-book"></i>
            <p>Дневник</p>
        </a>
        <a class="nav-item" id="calendar-link">
            <i class="fa-solid fa-calendar-days"></i>
            <p>Календар</p>
        </a>

        <script>
            // Function to get the formatted date (dd/MM/yyyy)
            function formatDate(date) {
                let day = String(date.getDate()).padStart(2, '0');
                let month = String(date.getMonth() + 1).padStart(2, '0'); // Months are 0-based
                let year = date.getFullYear();
                return `${day}/${month}/${year}`;
            }

            // Get today's date and one month later
            let today = new Date();
            let nextMonth = new Date();
            nextMonth.setMonth(nextMonth.getMonth() + 1);

            // Construct the URL dynamically
            let calendarURL = `https://life-app.bbca.bg/events?date=${formatDate(today)}&last_date=${formatDate(nextMonth)}`;

            // Set the href attribute of the calendar link
            document.getElementById("calendar-link").setAttribute("href", calendarURL);
        </script>

        <a class="nav-item" href="https://life-app.bbca.bg/patients/profile/profile">
            <i class="fa-solid fa-user"></i>
            <p>Профил</p>
        </a>
    </div>
</div>
<div class="container-fluid footer py-2 wow fadeIn" data-wow-delay="0.2s">
    <div class="container py-5">
        <div class="row g-5">
            <div class="col-md-6 col-lg-6 col-xl-3">
                <div class="footer-item d-flex flex-column">
                    <h4 class="text-dark mb-4">За Life</h4>
                    <a href="https://life-app.bbca.bg/?#patients-section"> Как ще ви помогнем?</a>
                    <a href="https://life-app.bbca.bg/?#doctors-involved-section"> Как да станем лекар в Life?</a>
                    <a href="https://life-app.bbca.bg/?#about-us-section"> Научете повече за нас</a>
                    <a href="https://life-app.bbca.bg/terms/conditions"> Общи условия</a>
                    <a href="https://life-app.bbca.bg/privacy/statement"> Политика за поверителност</a>
                </div>
            </div>
            <div class="col-md-6 col-lg-6 col-xl-3">
                <div class="footer-item d-flex flex-column">
                    <h4 class="text-dark mb-4">Контакти</h4>
                    <a href="https://life-app.bbca.bg/"> https://life-app.bbca.bg/</a>
                    <a href=""> info@bbca.bg</a>
                    <a href=""> bbcancerassociation@gmail.com</a>
                </div>
            </div>
            <div class="col-md-6 col-lg-6 col-xl-3">
                <img src="/img/teva.png" alt="TEVA Logo" class="img-fluid mb-2" style="max-width: 100px; height: auto;">
                <p class="text-dark mb-4">Проектът е подкрепен от дарителската програма „Заедно за здраве“ на TEVA</p>
            </div>

        </div>
    </div>
</div>
<!-- Footer End -->


<!-- Copyright Start -->
<div class="container-fluid copyright py-3">
    <div class="container">
        <div class="row g-4 align-items-center">
            <div class="col-md-6 text-center text-md-start mb-md-0">
                <span class="text-white"><a href="#"><i class="fas fa-copyright text-light me-2"></i>Life</a>, Всички права запазени.</span>
            </div>
        </div>
    </div>
</div>
<!-- Copyright End -->


<!-- JavaScript Libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="lib/wow/wow.min.js"></script>
<script src="lib/easing/easing.min.js"></script>
<script src="lib/waypoints/waypoints.min.js"></script>
<script src="lib/counterup/counterup.min.js"></script>
<script src="lib/owlcarousel/owl.carousel.min.js"></script>
<script src="lib/lightbox/js/lightbox.min.js"></script>


<!-- Template Javascript -->
<script src="js/main.js"></script>

<script>
    let currentTab = 'text';
    let selectedImageBase64 = null;
    let selectedImageType = null;
    let secondsLeft = 30;

    // ── Tab switching ──────────────────────────────────────────────────────────
    function switchTab(tab, btn) {
        currentTab = tab;
        document.querySelectorAll('.type-tab').forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
        document.getElementById('section-text').classList.toggle('visible', tab === 'text');
        document.getElementById('section-image').classList.toggle('visible', tab === 'image');
    }

    // ── Image handling ─────────────────────────────────────────────────────────
    function handleImageSelect(input) {
        const file = input.files[0];
        if (!file) return;

        selectedImageType = file.type;

        const reader = new FileReader();
        reader.onload = function(e) {
            selectedImageBase64 = e.target.result.split(',')[1]; // strip data:...;base64,
            document.getElementById('preview-img').src = e.target.result;
            document.getElementById('preview-wrap').style.display = 'block';
            document.getElementById('upload-area').classList.add('has-file');
        };
        reader.readAsDataURL(file);
    }

    function removeImage() {
        selectedImageBase64 = null;
        selectedImageType = null;
        document.getElementById('image-input').value = '';
        document.getElementById('preview-img').src = '#';
        document.getElementById('preview-wrap').style.display = 'none';
        document.getElementById('upload-area').classList.remove('has-file');
    }

    // ── Health check ───────────────────────────────────────────────────────────
    async function checkHealth() {
        try {
            const res  = await fetch('/api/ai/health');
            const data = await res.json();
            const dot  = document.getElementById('status-dot');
            const txt  = document.getElementById('status-text');

            if (data.available) {
                dot.className = 'status-dot online';
                txt.textContent = 'Услугата е онлайн';
                document.getElementById('online-notice').style.display = 'block';
                setTimeout(() => window.location.href = '/chat', 3000);
            } else {
                dot.className = 'status-dot';
                txt.textContent = 'Услугата е офлайн';
            }
        } catch (e) {
            document.getElementById('status-dot').className = 'status-dot';
            document.getElementById('status-text').textContent = 'Услугата е офлайн';
        }
        secondsLeft = 30;
    }

    setInterval(() => {
        secondsLeft--;
        if (secondsLeft <= 0) {
            document.getElementById('countdown').textContent = 'проверяваме…';
            document.getElementById('status-dot').className = 'status-dot checking';
            checkHealth();
        } else {
            document.getElementById('countdown').textContent =
                `следваща проверка след ${secondsLeft}s`;
        }
    }, 1000);

    // ── Submit ─────────────────────────────────────────────────────────────────
    async function submitToQueue() {
        const email = document.getElementById('email').value.trim();
        if (!email) { alert('Моля, въведете имейл адрес.'); return; }

        let question = '';
        let imageBase64 = null;
        let imageType = null;

        if (currentTab === 'text') {
            question = document.getElementById('question').value.trim();
            if (!question) { alert('Моля, въведете въпрос.'); return; }
        } else {
            if (!selectedImageBase64) { alert('Моля, качете снимка.'); return; }
            const note = document.getElementById('image-note').value.trim();
            question = note || 'Моля, анализирайте приложената хистология и обяснете термините.';
            imageBase64 = selectedImageBase64;
            imageType   = selectedImageType;
        }

        // Send as JSON so we can include the base64 image
        const payload = { question, email, imageBase64, imageType };

        try {
            const res = await fetch('/api/ai/queue-json', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(payload)
            });

            if (res.ok) {
                document.getElementById('notice-email').textContent = email;
                document.getElementById('success-notice').style.display = 'block';
                const btn = document.getElementById('submit-btn');
                btn.disabled = true;
                btn.textContent = 'Записано ✓';
            } else {
                const text = await res.text();
                alert('Грешка: ' + res.status + ' — ' + text);
            }
        } catch (e) {
            alert('Не може да се свърже: ' + e.message);
        }
    }
</script>
</body>
</html>