From daa51a12ea4f159c0eea74a9e7bbe8ce7adeee44 Mon Sep 17 00:00:00 2001
From: marina <m.zozirova@gmail.com>
Date: Fri, 28 Mar 2025 09:39:35 +0300
Subject: [PATCH] =?utf8?q?ERP-358=20=D0=A1=D0=B2=D0=B5=D1=80=D1=81=D1=82?=
 =?utf8?q?=D0=B0=D1=82=D1=8C=20=D0=B8=D0=BD=D1=82=D0=B5=D1=80=D1=84=D0=B5?=
 =?utf8?q?=D0=B9=D1=81=20=D0=B0=D0=B2=D1=82=D0=BE=D0=BF=D0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=utf8
Content-Transfer-Encoding: 8bit

---
 erp24/views/shipment/auto-planogramma.php | 326 +++++++++++++++-------
 1 file changed, 223 insertions(+), 103 deletions(-)

diff --git a/erp24/views/shipment/auto-planogramma.php b/erp24/views/shipment/auto-planogramma.php
index 4d8053ee..9f5fb2a5 100644
--- a/erp24/views/shipment/auto-planogramma.php
+++ b/erp24/views/shipment/auto-planogramma.php
@@ -165,113 +165,233 @@ $tooltipText = "Оффлайн: 50&#10;Флаумак (off-line): 20&#10;Фла
             </div>
         </div>
     </div>
-    <div class="row align-items-center">
-        <div class="col-md-3">
-            <div class="row" style="display: flex;align-items: flex-start; position: relative;">
-                <?= Html::label("год: 2025 неделя: 05") ?><br>
-                <?= Html::label("январь - февраль") ?><br>
-                <?= Html::label("Тип п-ма:") ?><br>
-                <?= Html::label("Город:") ?><br>
-                <?= Html::label("Регион:") ?><br>
-                <?= Html::label("Район:") ?><br>
-                <?= Html::label("Тип магазина:") ?><br>
-                <?= Html::label("Тер. Уп.:") ?><br>
-                <?= Html::label("КШФ:") ?><br>
+    <div class="table-wrapper">
+        <table class="table">
 
-                <div style="display: flex; flex-direction: column; align-items: flex-end; gap: 5px;">
-                    <?= Html::a('Auto', '#', ['class' => 'btn btn-success', 'style' => 'width:25%']) ?>
-                    <?= Html::a('Corrected', '#', ['class' => 'btn btn-success', 'style' => 'width:25%']) ?>
-                </div>
-            </div>
-        </div>
-        <div class="col-md-9" style="overflow-x: auto; white-space: nowrap; display: flex;">
-            <?php foreach ($addresses as $address) { ?>
-                <div class="col-md-2">
-                    <?= Html::label($address, null, [
-                        'style' => 'writing-mode: sideways-lr; text-align: center; white-space: nowrap; 
-                            font-weight: bold; transform-origin: left bottom; padding-right: 7%;'
-                    ]) ?>
-                </div>
-            <?php } ?>
-        </div>
-    </div>
-    <div class="row">
-        <div class="col-md-3">
-            <div class="list-group">
-                <!-- Срезка -->
-                <a class="list-group-item list-group-item-action" data-bs-toggle="collapse" href="#cutting">Срезка ▲</a>
-                <div class="collapse" id="cutting">
-                    <!-- Розы -->
-                    <a class="list-group-item list-group-item-action" data-bs-toggle="collapse" href="#roses">Розы ▶</a>
-                    <div class="collapse" id="roses">
-                        <a class="list-group-item list-group-item-action">Розы 40 Эк</a>
-                        <a class="list-group-item list-group-item-action">Розы 80 Эк</a>
+            <thead>
+            <tr class="head">
+                <th scope="col" style="text-align: left !important;">
+                    <?= Html::label("год: 2025 неделя: 05") ?><br>
+                    <?= Html::label("январь - февраль") ?><br>
+                    <?= Html::label("Тип п-ма:") ?><br>
+                    <?= Html::label("Город:") ?><br>
+                    <?= Html::label("Регион:") ?><br>
+                    <?= Html::label("Район:") ?><br>
+                    <?= Html::label("Тип магазина:") ?><br>
+                    <?= Html::label("Тер. Уп.:") ?><br>
+                    <?= Html::label("КШФ:") ?><br>
+                    <div class="buttons d-flex">
+                        <?= Html::a('Auto', '#', ['class' => 'btn btn-success ml-auto']) ?>
+                        <?= Html::a('Corrected', '#', ['class' => 'btn btn-success ml-auto']) ?>
                     </div>
-                    <!-- Экзотика -->
-                    <a class="list-group-item list-group-item-action">Экзотика</a>
-                    <!-- Зелень -->
-                    <a class="list-group-item list-group-item-action">Зелень</a>
-                </div>
+                </th>
 
-                <!-- Горшечные растения -->
-                <a class="list-group-item list-group-item-action">Горшечные растения ▲</a>
-                <!-- Сухоцветы -->
-                <a class="list-group-item list-group-item-action">Сухоцветы ▲</a>
-                <!-- Остальные категории -->
-                <a class="list-group-item list-group-item-action">Остальные категории ▲</a>
-            </div>
-        </div>
-        <div class="col-md-9" style="overflow-x: auto; white-space: nowrap; display: flex;  padding-bottom: 12%;">
-            <?php foreach ($addresses as $address) { ?>
-                <div class="col-md-2 d-flex align-items-center">
-                    <div class="row">
-                        <div class="d-flex align-items-center">
-                            <div class="row">
-                                <div class="col-md-8">
-                                    <?= Html::input('text', '', 50, [
-                                        'class' => 'btn btn-primary',
-                                        'data-bs-toggle' => 'tooltip',
-                                        'data-bs-placement' => 'top',
-                                        'title' => $tooltipText,
-                                        'style' => 'background:#e73535;    width: 120%;'
-                                    ]) ?>
-                                </div>
-                                <div class="col-md-4">
-                                    <button style="border: none; background: transparent; cursor: pointer; margin-left: 5px;">
-                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
-                                             viewBox="0 0 24 24">
-                                            <path d="M20 11v5a1 1 0 0 1-2 0v-4H7.414l1.293 1.293a1 1 0 0 1-1.414 1.414l-3-3a1 1 0 0 1 0-1.416l3-3a1 1 0 0 1 1.414 1.416L7.414 10H19a1 1 0 0 1 1 1z"
-                                                  fill="grey" stroke="none"/>
-                                        </svg>
-                                    </button>
-                                </div>
-                            </div>
+                <?php foreach ($addresses as $address) { ?>
+                    <th scope="col" class="fixed-column">
+                        <?= Html::label($address, null, [
+                            'style' => 'writing-mode: sideways-lr; text-align: center; white-space: nowrap; 
+                                font-weight: bold; transform-origin: left bottom; padding-right: 7%;'
+                        ]) ?>
+                    </th>
+                <?php } ?>
+            </tr>
+            </thead>
+            <tbody>
+            <tr>
+                <td class="category">
+                    <a class="list-group-item list-group-item-action" data-bs-toggle="collapse" href="#cutting">Срезка
+                        ▲</a>
+                </td>
+            </tr>
+            <tr>
+                <td class="subcategory">
+                    <a class="list-group-item list-group-item-action" data-bs-toggle="collapse" href="#roses">Розы ▶</a>
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    <a class="list-group-item list-group-item-action">Розы 40 Эк</a>
+                </td>
+                <?php foreach ($addresses as $address) { ?>
+                    <td class="items">
+                        <div style="display: flex; align-items: center;">
+                            <?= Html::input('text', '', 50, [
+                                'class' => 'btn btn-primary input',
+                                'data-bs-toggle' => 'tooltip',
+                                'data-bs-placement' => 'top',
+                                'title' => $tooltipText,
+                            ]) ?>
+                            <button style="border: none; background: transparent; cursor: pointer; margin-left: 5px;">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
+                                     viewBox="0 0 24 24">
+                                    <path d="M20 11v5a1 1 0 0 1-2 0v-4H7.414l1.293 1.293a1 1 0 0 1-1.414 1.414l-3-3a1 1 0 0 1 0-1.416l3-3a1 1 0 0 1 1.414 1.416L7.414 10H19a1 1 0 0 1 1 1z"
+                                          fill="grey" stroke="none"/>
+                                </svg>
+                            </button>
                         </div>
-                        <!--                            <br>-->
-                        <div class="row">
-                            <div class="col-md-8">
-                                <?= Html::input('text', '', 50, [
-                                    'class' => 'btn btn-primary',
-                                    'data-bs-toggle' => 'tooltip',
-                                    'data-bs-placement' => 'top',
-                                    'title' => $tooltipText,
-                                    'style' => 'background:#e73535;    width: 120%;'
-                                ]) ?>
-                            </div>
-                            <div class="col-md-4">
-                                <button style="border: none; background: transparent; cursor: pointer; margin-left: 5px;">
-                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
-                                         viewBox="0 0 24 24">
-                                        <path d="M20 11v5a1 1 0 0 1-2 0v-4H7.414l1.293 1.293a1 1 0 0 1-1.414 1.414l-3-3a1 1 0 0 1 0-1.416l3-3a1 1 0 0 1 1.414 1.416L7.414 10H19a1 1 0 0 1 1 1z"
-                                              fill="grey" stroke="none"/>
-                                    </svg>
-                                </button>
-                            </div>
+                    </td>
+                <?php } ?>
+            </tr>
+            <tr>
+                <td>
+                    <a class="list-group-item list-group-item-action">Розы 80 Эк</a>
+                </td>
+                <?php foreach ($addresses as $address) { ?>
+                    <td class="items">
+                        <div style="display: flex; align-items: center;">
+                            <?= Html::input('text', '', 50, [
+                                'class' => 'btn btn-primary input',
+                                'data-bs-toggle' => 'tooltip',
+                                'data-bs-placement' => 'top',
+                                'title' => $tooltipText,
+
+                            ]) ?>
+                            <button style="border: none; background: transparent; cursor: pointer; margin-left: 5px;">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
+                                     viewBox="0 0 24 24">
+                                    <path d="M20 11v5a1 1 0 0 1-2 0v-4H7.414l1.293 1.293a1 1 0 0 1-1.414 1.414l-3-3a1 1 0 0 1 0-1.416l3-3a1 1 0 0 1 1.414 1.416L7.414 10H19a1 1 0 0 1 1 1z"
+                                          fill="grey" stroke="none"/>
+                                </svg>
+                            </button>
                         </div>
-                        <!--                        </div>-->
-                    </div>
-                </div>
-            <?php } ?>
-        </div>
+                    </td>
+                <?php } ?>
+            </tr>
+            <tr>
+                <td class="subcategory">
+                    <a class="list-group-item list-group-item-action">Экзотика</a>
+                </td>
+            </tr>
+            <tr>
+                <td class="subcategory">
+                    <a class="list-group-item list-group-item-action">Зелень</a>
+                </td>
+            </tr>
+            <tr>
+                <td class="category">
+                    <a class="list-group-item list-group-item-action">Горшечные растения ▲</a>
+                </td>
+            </tr>
+            <tr>
+                <td class="category">
+                    <a class="list-group-item list-group-item-action">Сухоцветы ▲</a>
+                </td>
+            </tr>
+            <tr>
+                <td class="category">
+                    <a class="list-group-item list-group-item-action">Остальные категории ▲</a>
+                </td>
+            </tr>
+
+            </tbody>
+        </table>
     </div>
 </div>
+<script>
+    document.addEventListener("DOMContentLoaded", function () {
+        // Изначально скрываем все строки, кроме .category и .head
+        document.querySelectorAll("tr").forEach(row => {
+            if (!row.querySelector(".category") && !row.classList.contains("head")) {
+                row.style.display = "none";
+            }
+        });
+
+        // Обработчик кликов для категорий
+        document.querySelectorAll(".category").forEach(category => {
+            category.addEventListener("click", function () {
+                let isVisible = this.parentElement.nextElementSibling?.style.display === "table-row";
+                let nextRow = this.parentElement.nextElementSibling;
+
+                // Закрываем все вложенные элементы (subcategory + items)
+                while (nextRow && !nextRow.querySelector(".category")) {
+                    nextRow.style.display = "none";
+                    nextRow = nextRow.nextElementSibling;
+                }
+
+                // Если категория закрывалась, то открываем только подкатегории
+                if (!isVisible) {
+                    nextRow = this.parentElement.nextElementSibling;
+                    while (nextRow && !nextRow.querySelector(".category")) {
+                        if (nextRow.querySelector(".subcategory")) {
+                            nextRow.style.display = "table-row";
+                        }
+                        nextRow = nextRow.nextElementSibling;
+                    }
+                }
+            });
+        });
+
+        let activeSubcategory = null; // Текущая открытая подкатегория
+
+        // Обработчик кликов для подкатегорий
+        document.querySelectorAll(".subcategory").forEach(subcategory => {
+            subcategory.addEventListener("click", function () {
+                let isOpening = activeSubcategory !== this;
+
+                // Закрываем текущую открытую подкатегорию и её items
+                if (activeSubcategory) {
+                    let prevRow = activeSubcategory.parentElement.nextElementSibling;
+                    while (prevRow && !prevRow.querySelector(".subcategory") && !prevRow.querySelector(".category")) {
+                        prevRow.style.display = "none";
+                        prevRow = prevRow.nextElementSibling;
+                    }
+                }
+
+                // Если открываем новую, показываем её items
+                if (isOpening) {
+                    let nextRow = this.parentElement.nextElementSibling;
+                    while (nextRow && !nextRow.querySelector(".subcategory") && !nextRow.querySelector(".category")) {
+                        nextRow.style.display = "table-row";
+                        nextRow = nextRow.nextElementSibling;
+                    }
+                    activeSubcategory = this;
+                } else {
+                    activeSubcategory = null;
+                }
+            });
+        });
+    });
+</script>
+
+<style>
+    /* Стили для таблицы */
+    .table {
+        width: 100%;
+        table-layout: fixed; /* Это позволяет фиксировать ширину колонок */
+        overflow-x: auto; /* Это позволяет прокручивать таблицу по горизонтали */
+        border-collapse: collapse; /* Чтобы не было промежутков между ячейками */
+    }
+
+    /* Первая колонка будет фиксированной */
+    .fixed-column {
+        width: 170px; /* Устанавливаем фиксированную ширину для первой колонки */
+        white-space: nowrap; /* Запрещаем перенос текста в ячейке */
+        border-right: 1px solid #ddd; /* Вертикальная линия между колонками */
+    }
+
+    /* Для остальных колонок можно установить фиксированную ширину, если нужно */
+    th, td {
+        width: 300px; /* Пример для остальных колонок */
+        text-align: center; /* Центрируем текст */
+        padding: 10px; /* Немного отступов для улучшения внешнего вида */
+        border-right: 1px solid #ddd; /* Вертикальная линия между колонками */
+    }
+
+    .items .input {
+        width: 100%;
+    }
+
+    .table-wrapper {
+        overflow-x: auto;
+        max-width: 100%;
+        position: relative;
+    }
+
+    .fixed-column {
+        position: sticky;
+        left: 0;
+        background: white;
+        z-index: 2;
+        border-right: 2px solid #ddd;
+    }
+</style>
\ No newline at end of file
-- 
2.39.5