<body>

<header>
    <nav>
        <div class="nav-container" style="position: relative;">
            <div class="logo-container">
                <div class="logo-background"></div>
                <!-- Обновленный логотип с текстом "Контракт" -->
                <a href="home.html" style="display: flex; align-items: center; text-decoration: none;">
                    <!-- SVG логотип здесь -->
                    <svg width="72" height="56" viewBox="0 0 72 56" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <g clip-path="url(#clip0_3289_46838)">
                                <path d="M35.8598 44.724H30.8284L34.1686 48.0155H35.8598C36.3363 48.0155 36.7237 48.4031 36.7237 48.8794C36.7237 49.3556 36.3361 49.7426 35.8598 49.7426H34.1686V48.0155H30.8835V54.6065H34.1686V53.0279H35.8598C38.1481 53.0279 40.0092 51.1668 40.0092 48.8794C40.0092 46.5919 38.1481 44.724 35.8598 44.724ZM46.2093 44.5034C43.28 44.5034 40.8961 46.8873 40.8961 49.8166C40.8961 52.7459 43.28 55.1298 46.2093 55.1298C49.1386 55.1298 51.5225 52.7459 51.5225 49.8166C51.5225 46.8873 49.1386 44.5034 46.2093 44.5034ZM46.2093 51.8444C45.0896 51.8444 44.1816 50.9332 44.1816 49.8166C44.1816 48.7001 45.0896 47.7889 46.2093 47.7889C47.3291 47.7889 48.2371 48.7001 48.2371 49.8166C48.2371 50.9332 47.3291 51.8444 46.2093 51.8444ZM29.1315 44.724V54.6065H25.8488V47.4917H22.488V54.6065H19.2053V44.724H29.1315Z" fill="#FDC300"/>
                                <path d="M58.6478 32.0424V42.0022H55.2131V38.2876H51.9174V42.0022H48.4808V32.0424H51.9174V35.475H55.2131V32.0424H58.6478ZM2.96719 32.0416L2.83684 35.9679C2.81879 36.5956 2.77668 37.1691 2.71251 37.6724C2.64835 38.1637 2.53204 38.5568 2.36359 38.8415C2.15504 39.1924 1.80813 39.3047 1.3028 39.1964L1 39.1323V41.9758L1.08623 41.9978C1.35092 42.064 1.6056 42.1101 1.84222 42.1402C2.07684 42.1683 2.30344 42.1823 2.51199 42.1823C3.2018 42.1823 3.77732 42.0239 4.21848 41.7151C4.65764 41.4063 5.00055 41.0152 5.24118 40.4437C5.47781 39.8823 5.64625 39.2045 5.74451 38.4284C5.84277 37.6584 5.90694 36.7901 5.93501 35.8496L5.96509 34.8209H7.98441V41.9998H11.4455V32.0416H2.96719ZM16.3934 39.3067V38.1681H21.041V35.7341H16.3934V34.7347H21.6111V32.0424H12.9517V41.999H21.792V39.3067H16.3934ZM32.4222 32.0422L29.448 35.3758L26.4738 32.0422H22.845V42H26.2845V37.288H26.3069L26.3165 37.2976L29.4384 40.3617L32.5987 37.2559L32.6019 37.2623V37.3041L32.6115 42H36.0478V32.0422H32.4222ZM59.8012 36.749V42H63.0771V36.749C63.0771 35.8282 63.8439 35.0774 64.7647 35.0774C65.6855 35.0774 66.4395 35.8282 66.4395 36.749V38.6997H63.1156L66.3689 42H69.7442V36.749C69.7442 34.0058 67.5079 31.7759 64.7647 31.7759C62.0247 31.7759 59.8012 34.0058 59.8012 36.749ZM42.1824 31.7759C39.4391 31.7759 37.2028 34.0058 37.2028 36.749V42H40.5781L43.8315 38.6997H40.5076V36.749C40.5076 35.8282 41.2583 35.0774 42.1824 35.0774C43.1064 35.0774 43.87 35.8282 43.87 36.749V42H47.1459V36.749C47.1459 34.0058 44.9224 31.7759 42.1824 31.7759Z" fill="#21282B"/>
                                <path d="M40.4977 5.07861L35.3619 10.1568L40.099 14.8407V20.6862H30.6246V26.9433H47.3868V11.8904L40.4977 5.07861Z" fill="#BF8900"/>
                                <path d="M35.3634 0L23.3383 11.8899V26.9426H30.6263V20.6855V14.8401L35.3634 10.1562L40.4991 5.07819L35.3634 0Z" fill="#FDC300"/>
                                <path d="M35.3612 10.1568L40.4969 5.07861L36.3125 11.0975L35.3612 10.1568Z" fill="#815F00"/>
                                <path d="M30.6246 20.6851V26.9422L31.9862 20.6851H30.6246Z" fill="#815F00"/>
                            </g>
                            <defs>
                                <clipPath id="clip0_3289_46838">
                                    <rect width="72" height="56" fill="white"/>
                                </clipPath>
                            </defs>
                        </svg>
                </a>
            </div>
            
            <!-- Добавляем кнопку Справочный центр справа -->
            <div class="resources-button-container" style="position: absolute; right: 20px; top: 10px;">
    <a href="resources.html" class="resources-button">
        <span class="text-label">Справочный центр</span>
    </a>
</div>

        </div>
    </nav>
</header>

<!-- Новое модальное окно для информации о Справочном центре -->
<div class="modal fade" id="resourcesInfoModal" tabindex="-1" aria-labelledby="resourcesInfoModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="resourcesInfoModalLabel">Внимание</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
      </div>
      <div class="modal-body">
        Перед тем как составлять запрос в техподдержку, ознакомьтесь с информацией в <strong>Справочном центре</strong>(Правый верхний угол экрана). Возможно там уже есть ответ на ваш вопрос. <strong>(Если вы видите это окно повторно значит вышло крупное обновление!)</strong>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" id="resourcesInfoConfirmButton">Хорошо</button>
      </div>
    </div>
  </div>
</div>


    <div class="content support-form">
        <div class="container">
            <h2 class="mb-4">Техническая Поддержка</h2>
            <div id="mainContent">
                <!-- Форма создания тикета -->
                <form id="supportForm" enctype="multipart/form-data">
    <div class="mb-3">
        <label for="title" class="form-label">Заголовок заявки</label>
        <input type="text" class="form-control" id="title" name="title" required>
    </div>
    <div class="mb-3">
        <label for="description" class="form-label">Опишите проблему</label>
        <textarea class="form-control" id="description" name="description" rows="5" required></textarea>
    </div>
    <div class="mb-3">
        <label for="attachments" class="form-label">Вложения</label>
        <input class="form-control" type="file" id="attachments" name="attachments[]" accept="image/*,video/*" multiple>
        <!-- Отображение выбранных файлов -->
        <div id="selectedFiles" class="mt-2"></div>
    </div>
    <button type="submit" class="btn btn-primary" id="submitBtn" disabled>Создать заявку</button>
</form>
<div id="responseMessage" class="mt-3"></div>


                <div id="responseMessage" class="mt-3"></div>


<!-- Фильтры для статусов заявок -->
<div id="filterSection" class="mt-3" style="display: none;">
    <h4>Фильтр по статусу</h4>
    <div class="btn-group" role="group" aria-label="Filter tickets">
        <button type="button" class="btn btn-secondary filter-btn" data-status="Все">Все</button>
        <button type="button" class="btn btn-status-awaiting filter-btn" data-status="В ожидании">
            <i class="fas fa-hourglass-half"></i> В ожидании
        </button>
        <button type="button" class="btn btn-status-closed filter-btn" data-status="Закрыта">
            <i class="fas fa-check-circle"></i> Закрыта
        </button>
        <button type="button" class="btn btn-status-rejected filter-btn" data-status="Отклонена">
            <i class="fas fa-times-circle"></i> Отклонена
        </button>
    </div>
</div>


                <!-- Список тикетов пользователя или всех тикетов для Администраторов и Модераторов -->
                <div id="ticketsSection" class="mt-5" style="display: none;">
                    <h3>Ваши заявки</h3>
                    <div class="tickets-list list-group" id="ticketsList">
                        <!-- Тикеты будут загружены сюда -->
                    </div>
                </div>



                <!-- Интерфейс для Администраторов и Модераторов -->
                <div id="adminSection" class="mt-4" style="display: none;">
                    <h3>Управление заявками</h3>
                    <div class="tickets-list list-group" id="adminTicketsList">
                        <!-- Все тикеты будут загружены сюда -->
                    </div>
                </div>
            </div>
        </div>
    </div>

<!-- Диалоговое окно -->
<div id="dialogOverlay">
    <div id="dialogContainer">
        
        <div id="dialogHeader">
    <div class="header-left">
        <i class="fas fa-comments"></i>
        <h3 id="dialogTitle">
            <div class="ticket-header horizontal">
                <span class="ticket-number">#123</span>
                <span class="ticket-title">Название тикета</span>
            </div>
        </h3>
    </div>
    <!-- Кнопка закрытия -->
    <button id="closeDialog"><i class="fas fa-times"></i></button>
</div>

        
        
        
        <div id="floatingDateIndicator" class="floating-date-indicator"></div>


        <!-- Добавьте это после #dialogHeader и перед #dialogContent -->
<div id="ticketStatusContainer" class="d-flex justify-content-between align-items-center p-3">
    <div id="ticketStatusDisplay">
        Статус заявки: <span id="ticketStatusText"></span>
    </div>
    <div id="statusControls">
        <!-- Здесь будут кнопки или выпадающий список для изменения статуса -->
    </div>
</div>


        
        <div id="dialogContent">
            <!-- Чат с тикетом -->
            <div class="chat-container" id="chatMessages">
                <!-- Сообщения будут загружены сюда -->
            </div>
        </div>
        <form id="chatForm" enctype="multipart/form-data">
    <div class="input-group">
        <input type="text" class="form-control" id="chatInput" placeholder="Введите сообщение">
        <input type="file" id="chatAttachments" name="attachments[]" accept="image/*,video/*" multiple style="display: none;">
        <button class="btn btn-secondary" type="button" id="attachButton"><i class="fas fa-paperclip"></i></button>
        <button class="btn btn-primary send-button" type="submit"><i class="fas fa-paper-plane"></i></button>
    </div>
    <!-- Отображение выбранных файлов -->
    <div id="chatSelectedFiles" class="mt-2"></div>
</form>
<button id="scrollToBottomBtn" title="Пролистать вниз">
    <i class="fas fa-arrow-down"></i>
</button>
        </div>

</div>

</div>




    <footer>
        <nav>
            <div class="nav-item">
                <a href="home.html">
                    <i class="fas fa-home"></i>
                    <span>Главная</span>
                </a>
            </div>
            <div class="nav-item">
                <a href="estimates.html">
                    <i class="fas fa-file-alt"></i>
                    <span>Сметы</span>
                </a>
            </div>
            <div class="nav-item">
                <div class="arrows-container">
                    <div class="bottom-button" id="backButton">
                        <i class="fas fa-arrow-left"></i>
                    </div>
                    <div class="export-link">
                        <a href="export.html">
                            <i class="fas fa-plus"></i>
                        </a>
                    </div>
                    <div class="bottom-button" id="forwardButton">
                        <i class="fas fa-arrow-right"></i>
                    </div>
                </div>
            </div>
            <div class="nav-item">
                <!-- Заменяем "Чат" на "Контракт" -->
                <a href="contract.html">
                    <i class="fas fa-file-contract"></i>
                    <span>Контракт</span>
                </a>
            </div>
            <div class="nav-item">
                <a href="support.html">
                    <i class="fas fa-headset"></i>
                    <span>Тех. Под.</span>
                </a>
            </div>
        </nav>
    </footer>