<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Menu JSON Editor</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/9.9.2/jsoneditor.min.css" />
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
      background-color: #f0f0f0;
      margin: 0;
      padding: 0;
    }
    h1 {
      background-color: #4CAF50;
      color: white;
      padding: 20px;
      margin: 0;
      border-bottom: 2px solid #388E3C;
    }
    .input-row {
      display: flex;
      justify-content: center;
      gap: 10px;
      margin-top: 20px;
    }
    .input-row input {
      padding: 10px;
      font-size: 16px;
      border: 1px solid #ccc;
      border-radius: 5px;
    }
    #jsoneditor {
      width: 50%;
      height: 300px;
      margin: 20px auto;
    }
    button {
      color: white;
      background-color: #4CAF50;
      border: none;
      cursor: pointer;
      padding: 10px 20px;
      font-size: 16px;
      border-radius: 5px;
      margin-top: 20px;
    }
    button:hover {
      background-color: #388E3C;
    }
    .jsoneditor-menu {
      background-color: #4CAF50 !important;
      border-bottom: 1px solid #388E3C !important;
    }
    .jsoneditor {
      border: 1px #4CAF50 !important;
      border-bottom: 2px solid #388E3C !important;      
    }
  </style>
</head>
<body>
  <h1>Редактор JSON для меню</h1>
  <div>
    <div class="input-row">
      <label for="title1">Название 1:</label>
      <input type="text" id="title1" placeholder="Главная">
      <label for="link1">Ссылка 1:</label>
      <input type="text" id="link1" placeholder="https://example.com">
    </div>
    <div class="input-row">
      <label for="title2">Название 2:</label>
      <input type="text" id="title2" placeholder="Контакты">
      <label for="link2">Ссылка 2:</label>
      <input type="text" id="link2" placeholder="https://example.com">
    </div>
    <div class="input-row">
      <label for="title3">Название 3:</label>
      <input type="text" id="title3" placeholder="Мега-меню">
    </div>
    <div class="input-row">
      <label for="title4">Название 4:</label>
      <input type="text" id="title4" placeholder="Подменю">
    </div>
    <button id="addMenu">Добавить меню</button>
  </div>
  <div>
    <div class="input-row">
      <label for="menuTitle">Название меню:</label>
      <input type="text" id="menuTitle" placeholder="Мега-меню">
      <label for="submenuTitle">Название подменю:</label>
      <input type="text" id="submenuTitle" placeholder="Раздел 1">
      <label for="submenuLink">Ссылка подменю:</label>
      <input type="text" id="submenuLink" placeholder="https://example.com">
    </div>
    <button id="addSubmenu">Добавить подменю</button>
  </div>
  <div>
    <button id="saveToClipboard">Сохранить в буфер обмена</button>
  </div>
  <div id="jsoneditor"></div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/9.9.2/jsoneditor.min.js"></script>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const container = document.getElementById('jsoneditor');
      const options = {
        mode: 'code',
        modes: ['code', 'tree'],
        onError: function(err) {
          alert(err.toString());
        }
      };
      const editor = new JSONEditor(container, options);
      let menuData = {
        "menu": []
      };
      editor.set(menuData);

      document.getElementById('addMenu').addEventListener('click', function() {
        const title1 = document.getElementById('title1').value;
        const link1 = document.getElementById('link1').value;
        const title2 = document.getElementById('title2').value;
        const link2 = document.getElementById('link2').value;
        const title3 = document.getElementById('title3').value;
        const title4 = document.getElementById('title4').value;

        if (title1 && link1 && title2 && link2 && title3 && title4) {
          menuData.menu = [
            { "title": title1, "link": link1 },
            { "title": title3, "link": "#link" },
            { "title": title4, "link": "#link" },
            { "title": title2, "link": link2 }
          ];
          editor.set(menuData);
        } else {
          alert('Please fill in all menu fields.');
        }
      });

      document.getElementById('addSubmenu').addEventListener('click', function() {
        const menuTitle = document.getElementById('menuTitle').value;
        const submenuTitle = document.getElementById('submenuTitle').value;
        const submenuLink = document.getElementById('submenuLink').value;

        if (menuTitle && submenuTitle && submenuLink) {
          const menuItem = menuData.menu.find(item => item.title === menuTitle);
          if (menuItem) {
            if (!menuItem.submenu) {
              menuItem.submenu = [];
            }
            menuItem.submenu.push({ "title": submenuTitle, "link": submenuLink });
            editor.set(menuData);
          } else {
            alert('Menu item not found.');
          }
        } else {
          alert('Please fill in all submenu fields.');
        }
      });

      document.getElementById('saveToClipboard').addEventListener('click', function() {
        const json = editor.get();
        const jsonString = JSON.stringify(json); // Убираем параметры отступов
        navigator.clipboard.writeText(jsonString).then(function() {
          alert('JSON saved to clipboard!');
        }, function(err) {
          console.error('Could not copy text: ', err);
        });
      });
    });
  </script>
</body>
</html>