<?php
        
        require_once __DIR__  . '/config/db.php';
        require_once __DIR__ . '/config/inventory.php';
        if (session_status() === PHP_SESSION_NONE) {
            session_start();
        }
        
        if (!isset($_SESSION['user_id'])) {
            header('location:login.php');
            exit;
        }
        
    if (isset($_GET['ajax']) && $_GET['ajax'] == 'search' && isset($_GET['searchword'])) {
    if (ob_get_length()) ob_end_clean();
    header('Content-Type: application/json; charset=utf-8');

    $inventory = new Inventory();
    $searchword = $_GET['searchword'];

    $footprintIds = [];
    if (isset($_GET['footprints']) && $_GET['footprints'] !== '') {
        $footprintIds = array_values(array_filter(array_map('intval', explode(',', $_GET['footprints']))));
    }

    $manufacturerIds = [];
    if (isset($_GET['manufacturers']) && $_GET['manufacturers'] !== '') {
        $manufacturerIds = array_values(array_filter(array_map('intval', explode(',', $_GET['manufacturers']))));
    }

    $categoryIds = [];
    if (isset($_GET['categories']) && $_GET['categories'] !== '') {
        $categoryIds = array_values(array_filter(array_map('intval', explode(',', $_GET['categories']))));
    }

    $toleranceMin = (isset($_GET['tolerance_min']) && $_GET['tolerance_min'] !== '')
        ? floatval($_GET['tolerance_min']) : null;
    $toleranceMax = (isset($_GET['tolerance_max']) && $_GET['tolerance_max'] !== '')
        ? floatval($_GET['tolerance_max']) : null;

    date_default_timezone_set('Europe/Budapest');
 $locationValues = [];
if (isset($_GET['locations']) && $_GET['locations'] !== '') {
    $locationValues = array_values(array_filter(explode(',', $_GET['locations'])));
}

    $result = $inventory->search_bar_with_filters($searchword, $footprintIds, $manufacturerIds, $categoryIds, $toleranceMin, $toleranceMax, $locationValues);
    echo json_encode($result ?: ["error" => "Nincs találat"], JSON_UNESCAPED_UNICODE);
    exit;
}
?>
<!DOCTYPE html>
<html lang="en" data-bs-theme="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-LN+7fdVzj6u52u30Kp6M/trliBMCMKTyK833zpbD+pXdCLuTusPj697FH4R/5mcr" crossorigin="anonymous">
    <link rel="stylesheet" href="./style/style.css">
    <title>ART Inventory</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.bundle.min.js" integrity="sha384-ndDqU0Gzau9qJ1lfW4pNLlhNTkCfHzAVBReH9diLvGRem5+R9g2FzA8ZGN954O5Q" crossorigin="anonymous"></script>
    <style>
        .col-list {
            max-width: 350px;
        }

        /* Dupla csúszka */
        .range-slider-wrap {
            position: relative;
            height: 28px;
            padding: 0 8px;
        }
        .range-track {
            position: absolute;
            top: 50%;
            left: 8px;
            right: 8px;
            height: 4px;
            background: #495057;
            border-radius: 2px;
            transform: translateY(-50%);
        }
        .range-fill {
            position: absolute;
            top: 50%;
            height: 4px;
            background: #0d6efd;
            border-radius: 2px;
            transform: translateY(-50%);
            pointer-events: none;
        }
        .range-slider-wrap input[type="range"] {
            position: absolute;
            top: 50%;
            left: 0;
            width: 100%;
            height: 4px;
            margin: 0;
            background: none;
            pointer-events: none;
            -webkit-appearance: none;
            appearance: none;
            transform: translateY(-50%);
        }
        .range-slider-wrap input[type="range"]::-webkit-slider-thumb {
            pointer-events: all;
            -webkit-appearance: none;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: #0d6efd;
            cursor: pointer;
            border: 2px solid #212529;
            box-shadow: 0 0 0 1px #0d6efd;
        }
        .range-slider-wrap input[type="range"]::-moz-range-thumb {
            pointer-events: all;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: #0d6efd;
            cursor: pointer;
            border: none;
            box-shadow: 0 0 0 1px #0d6efd;
        }
        th.sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
th.sortable:hover {
  background: rgba(13, 110, 253, 0.15);
}
th.sortable .sort-arrow {
  font-size: 10px;
  opacity: 0.35;
  margin-left: 4px;
}
th.sortable.sort-asc .sort-arrow,
th.sortable.sort-desc .sort-arrow {
  opacity: 1;
  color: #0d6efd;
}
    </style>
</head>
<body class="dark-theme">
    <div class="container">
    <?php
        include './header.php';
    ?>

    <div class="row g-2 align-items-center mt-3 mb-4">
<div class="col-auto">
            <input id="searchInput" class="form-control form-control-sm form-select-sort" type="text" placeholder="Search" onkeyup="searchBar(this)" style="min-width:250px;">
        </div>
        <!-- Footprint filter -->
        <div class="col-auto">
            <div class="dropdown">
                <button class="btn btn-sm btn-outline-secondary dropdown-toggle form-select-sort"
                        type="button" id="footprintDropdown"
                        data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
                    Footprint <span id="fpBadge" class="badge bg-primary ms-1 d-none">0</span>
                </button>
                <div class="dropdown-menu p-2" style="max-height:300px; overflow-y:auto; min-width:180px;">
                    <div class="mb-2">
                        <a href="#" id="clearFootprints" class="small text-decoration-none">Delete</a>
                    </div>
                    <?php
                        $fpList = (new Inventory())->all_footprint();
                        foreach ($fpList as $fp) {
                            echo '<div class="form-check">
                              <input class="form-check-input footprint-cb" type="checkbox"
                                     value="'.(int)$fp['id'].'" id="fp_'.(int)$fp['id'].'">
                              <label class="form-check-label small" for="fp_'.(int)$fp['id'].'">
                                '.htmlspecialchars($fp['name']).'
                              </label>
                            </div>';
                        }
                    ?>
                </div>
            </div>
        </div>

        <!-- Manufacturer filter -->
        <div class="col-auto">
            <div class="dropdown">
                <button class="btn btn-sm btn-outline-secondary dropdown-toggle form-select-sort"
                        type="button" id="manufacturerDropdown"
                        data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
                    Manufacturer <span id="manuBadge" class="badge bg-primary ms-1 d-none">0</span>
                </button>
                <div class="dropdown-menu p-2" style="max-height:300px; overflow-y:auto; min-width:200px;">
                    <div class="mb-2">
                        <a href="#" id="clearManufacturers" class="small text-decoration-none">Delete</a>
                    </div>
                    <?php
                        $manuList = (new Inventory())->all_manu();
                        foreach ($manuList as $manu) {
                            echo '<div class="form-check">
                              <input class="form-check-input manufacturer-cb" type="checkbox"
                                     value="'.(int)$manu['id'].'" id="manu_'.(int)$manu['id'].'">
                              <label class="form-check-label small" for="manu_'.(int)$manu['id'].'">
                                '.htmlspecialchars($manu['name']).'
                              </label>
                            </div>';
                        }
                    ?>
                </div>
            </div>
        </div>

        <!-- Category filter -->
        <div class="col-auto">
            <div class="dropdown">
                <button class="btn btn-sm btn-outline-secondary dropdown-toggle form-select-sort"
                        type="button" id="categoryDropdown"
                        data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
                    Category <span id="catBadge" class="badge bg-primary ms-1 d-none">0</span>
                </button>
                <div class="dropdown-menu p-2" style="max-height:300px; overflow-y:auto; min-width:200px;">
                    <div class="mb-2">
                        <a href="#" id="clearCategories" class="small text-decoration-none">Delete</a>
                    </div>
                    <?php
                        $catList = (new Inventory())->all_categories();
                        foreach ($catList as $cat) {
                            echo '<div class="form-check">
                              <input class="form-check-input category-cb" type="checkbox"
                                     value="'.(int)$cat['id'].'" id="cat_'.(int)$cat['id'].'">
                              <label class="form-check-label small" for="cat_'.(int)$cat['id'].'">
                                '.htmlspecialchars($cat['name']).'
                              </label>
                            </div>';
                        }
                    ?>
                </div>
            </div>
        </div>

        <!-- Tolerance filter -->
        <?php
            $tolList       = (new Inventory())->all_tolerances();
            $tolNumericMin = 0;
            $tolLabelMin   = '0';
            $tolNumericMax = !empty($tolList) ? floatval($tolList[count($tolList)-1]['tolerance_num']) : 100;
            $tolLabelMax   = !empty($tolList) ? $tolList[count($tolList)-1]['tolerance'] : '100%';
        ?>
        <div class="col-auto">
            <div class="dropdown">
                <button class="btn btn-sm btn-outline-secondary dropdown-toggle form-select-sort"
                        type="button" id="toleranceDropdown"
                        data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
                    Tolerance <span id="tolBadge" class="badge bg-primary ms-1 d-none">●</span>
                </button>
                <div class="dropdown-menu p-3" style="min-width:260px;">
                    <div class="d-flex justify-content-between align-items-center mb-1">
                        <small class="fw-semibold">Tolerance tartomány</small>
                        <a href="#" id="clearTolerance" class="small text-decoration-none">Delete</a>
                    </div>
                    <div class="text-center mb-3">
                        <small id="tolRangeLabel" class="text-muted">
                            <?= htmlspecialchars($tolLabelMin) ?> – <?= htmlspecialchars($tolLabelMax) ?>
                        </small>
                    </div>
                    <div class="range-slider-wrap">
                        <div class="range-track"></div>
                        <div class="range-fill" id="rangeFill"></div>
                        <input type="range" id="tolSliderMin"
                               min="<?= $tolNumericMin ?>" max="<?= $tolNumericMax ?>"
                               step="0.001" value="<?= $tolNumericMin ?>"
                               data-abs-min="<?= $tolNumericMin ?>" data-abs-max="<?= $tolNumericMax ?>">
                        <input type="range" id="tolSliderMax"
                               min="<?= $tolNumericMin ?>" max="<?= $tolNumericMax ?>"
                               step="0.001" value="<?= $tolNumericMax ?>"
                               data-abs-min="<?= $tolNumericMin ?>" data-abs-max="<?= $tolNumericMax ?>">
                    </div>
                    <div class="d-flex justify-content-between mt-2">
                        <small class="text-muted"><?= htmlspecialchars($tolLabelMin) ?></small>
                        <small class="text-muted"><?= htmlspecialchars($tolLabelMax) ?></small>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-auto">
  <div class="dropdown">
    <button class="btn btn-sm btn-outline-secondary dropdown-toggle form-select-sort"
            type="button" id="locationDropdown"
            data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
      Location <span id="locBadge" class="badge bg-primary ms-1 d-none">0</span>
    </button>
    <div class="dropdown-menu p-2" style="max-height:300px; overflow-y:auto; min-width:120px;">
      <div class="mb-2">
        <a href="#" id="clearLocations" class="small text-decoration-none">Delete</a>
      </div>
      <?php
        $tartomanyok = [
            ['betuk' => ['A','B','C'],             'max' => 8],
            ['betuk' => ['A','B','C'],             'max' => 12],
            ['betuk' => ['A','B','C','D','E','F'], 'max' => 8],
        ];
        $locations = [];
        foreach ($tartomanyok as $t) {
            foreach ($t['betuk'] as $betu) {
                for ($i = 1; $i <= $t['max']; $i++) {
                    $kombi = $betu . $i;
                    if (!in_array($kombi, $locations)) {
                        $locations[] = $kombi;
                    }
                }
            }
        }
        usort($locations, function($a, $b) {
    $betA = substr($a, 0, 1);
    $betB = substr($b, 0, 1);
    if ($betA !== $betB) return strcmp($betA, $betB);
    return intval(substr($a, 1)) - intval(substr($b, 1));
});
        foreach ($locations as $loc) {
            $val = htmlspecialchars($loc);
            echo '<div class="form-check">
              <input class="form-check-input location-cb" type="checkbox"
                     value="'.$val.'" id="loc_'.$val.'">
              <label class="form-check-label small" for="loc_'.$val.'">
                '.$val.'
              </label>
            </div>';
        }
      ?>
    </div>
  </div>
</div>
    </div>

    <div id="innerContent" class="text-center">
        <div class="row my-5 justify-content-center align-middle">
            <div class="col-4 border rounded-3 mx-2 col-list">
                <h2 class='my-3'>Manufacturers</h2>
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th scope="col">Manufacturer</th>
                            <th scope="col">Quantity</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php
                            $inventory = new Inventory();
                            $list = $inventory->maunfacturer_count();
                            foreach ($list as $x) {
                                echo "<tr><td class='text-start'>".$x['name']."</td><td>".$x['counted']."</td></tr>";
                            }
                        ?>
                    </tbody>
                </table>
            </div>
            <div class="col-4 border rounded-3 mx-2 col-list">
                <h2 class='my-3'>Footprints</h2>
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th scope="col">Footprint</th>
                            <th scope="col">Quantity</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php
                            $inventory = new Inventory();
                            $list = $inventory->footprint_count();
                            foreach ($list as $x) {
                                echo "<tr><td class='text-start'>".$x['name']."</td><td>".$x['counted']."</td></tr>";
                            }
                        ?>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

</div>

<script>
    const originalContent = document.getElementById('innerContent').innerHTML;
    const TOL_SNAPS = [
        <?php foreach ($tolList as $tol): ?>
            { num: <?= floatval($tol['tolerance_num']) ?>, label: "<?= addslashes(htmlspecialchars($tol['tolerance'])) ?>" },
        <?php endforeach; ?>
    ];

    function getTolLabel(val) {
        return parseFloat(parseFloat(val).toFixed(3));
    }

    function initToleranceSlider() {
        const sliderMin = document.getElementById('tolSliderMin');
        const sliderMax = document.getElementById('tolSliderMax');
        const fill      = document.getElementById('rangeFill');
        const label     = document.getElementById('tolRangeLabel');
        const absMin    = parseFloat(sliderMin.dataset.absMin);
        const absMax    = parseFloat(sliderMin.dataset.absMax);
        const range     = absMax - absMin;

        function updateFill() {
            const minVal = parseFloat(sliderMin.value);
            const maxVal = parseFloat(sliderMax.value);
            const leftPct  = range > 0 ? ((minVal - absMin) / range) * 100 : 0;
            const rightPct = range > 0 ? ((absMax - maxVal) / range) * 100 : 0;
            fill.style.left  = 'calc(' + leftPct  + '% + 8px)';
            fill.style.right = 'calc(' + rightPct + '% + 8px)';

            const isDefault = minVal <= absMin && maxVal >= absMax;
            label.textContent = isDefault
                ? getTolLabel(absMin) + ' - ' + getTolLabel(absMax)
                : getTolLabel(minVal) + ' - ' + getTolLabel(maxVal);

            document.getElementById('tolBadge').classList.toggle('d-none', isDefault);
        }

        sliderMin.addEventListener('input', function() {
            if (parseFloat(this.value) > parseFloat(sliderMax.value)) {
                this.value = sliderMax.value;
            }
            updateFill();
            searchBar(document.getElementById('searchInput'));
        });

        sliderMax.addEventListener('input', function() {
            if (parseFloat(this.value) < parseFloat(sliderMin.value)) {
                this.value = sliderMin.value;
            }
            updateFill();
            searchBar(document.getElementById('searchInput'));
        });

        document.getElementById('clearTolerance').addEventListener('click', function(e) {
            e.preventDefault();
            sliderMin.value = absMin;
            sliderMax.value = absMax;
            updateFill();
            searchBar(document.getElementById('searchInput'));
        });

        updateFill();
    }

    function getToleranceValues() {
        const sliderMin = document.getElementById('tolSliderMin');
        const sliderMax = document.getElementById('tolSliderMax');
        const absMin = parseFloat(sliderMin.dataset.absMin);
        const absMax = parseFloat(sliderMin.dataset.absMax);
        return {
            min: parseFloat(sliderMin.value) > absMin ? sliderMin.value : '',
            max: parseFloat(sliderMax.value) < absMax ? sliderMax.value : ''
        };
    }

    function getChecked(selector) {
        return Array.from(document.querySelectorAll(selector + ':checked'))
            .map(cb => cb.value).join(',');
    }

    function updateBadge(checkboxSelector, badgeId) {
        const count = document.querySelectorAll(checkboxSelector + ':checked').length;
        const badge = document.getElementById(badgeId);
        badge.textContent = count;
        badge.classList.toggle('d-none', count === 0);
    }

    function clearFilter(checkboxSelector, badgeId) {
        document.querySelectorAll(checkboxSelector).forEach(cb => cb.checked = false);
        updateBadge(checkboxSelector, badgeId);
        searchBar(document.getElementById('searchInput'));
    }

    // Keresés + filterek
    function searchBar(inputElement) {
        let searchword = inputElement.value.toLowerCase();
        const tol = getToleranceValues();
        const hasFilters = searchword !== '' || getChecked('.footprint-cb') !== '' || getChecked('.manufacturer-cb') !== '' || getChecked('.category-cb') !== '' || tol.min !== '' || tol.max !== '' || getChecked('.location-cb') !== '';

        if (!hasFilters) {
            document.getElementById("innerContent").innerHTML = originalContent;
            return;
        }

        const url = "?ajax=search"
            + "&searchword=" + encodeURIComponent(searchword)
            + "&footprints=" + encodeURIComponent(getChecked('.footprint-cb'))
            + "&manufacturers=" + encodeURIComponent(getChecked('.manufacturer-cb'))
            + "&categories=" + encodeURIComponent(getChecked('.category-cb'))
            + "&tolerance_min=" + encodeURIComponent(tol.min)
            + "&tolerance_max=" + encodeURIComponent(tol.max)
            + "&locations=" + encodeURIComponent(getChecked('.location-cb'));

        fetch(url)
            .then(response => response.json())
            .then(data => {
                console.clear();
                if (data.error) {
                    document.getElementById("innerContent").innerHTML = "<p class='text-muted mt-4'>Nincs találat.</p>";
                } else {
                    document.getElementById("innerContent").innerHTML = `
                        <table class="table table-hover mx-auto bgColorChange" id="inventoryTable">
                            <thead>
                                <tr>
    <th class="sortable" data-col="0">Manufacturer <span class="sort-arrow">▲▼</span></th>
    <th class="sortable" data-col="1">Name <span class="sort-arrow">▲▼</span></th>
    <th>Type</th>
    <th class="sortable" data-col="3">Footprint <span class="sort-arrow">▲▼</span></th>
    <th class="sortable" data-col="4">Component Number <span class="sort-arrow">▲▼</span></th>
    <th class="sortable" data-col="5">Tolerance <span class="sort-arrow">▲▼</span></th>
    <th class="sortable" data-col="6">Max Current <span class="sort-arrow">▲▼</span></th>
    <th class="sortable" data-col="7">Max Voltage <span class="sort-arrow">▲▼</span></th>
    <th class="sortable" data-col="8">Location <span class="sort-arrow">▲▼</span></th>
    <th>Description</th>
    <th class="sortable" data-col="10">Quantity <span class="sort-arrow">▲▼</span></th>
  </tr>
                            </thead>
                            <tbody>
                                ${data.map(item => `
                                    <tr>
                                        <td>${item.manufacturer}</td>
                                        <td>${item.name}</td>
                                        <td>${item.category}</td>
                                        <td>${item.footprint}</td>
                                        <td>${item.componentnumber}</td>
                                        <td>${item.tolerance || '-'}</td>
                                        <td>${item.maxcurrent || '-'}</td>
                                        <td>${item.maxvoltage || '-'}</td>
                                        <td>${item.location}</td>
                                        <td>${item.description}</td>
                                        <td>${item.sumquant || 0} pcs</td>
                                    </tr>`
                                ).join('')}
                            </tbody>
                        </table>`;
                    reapplySort();
                }
            })
            .catch(error => console.error("Hiba:", error));
    }

    document.addEventListener('change', function(e) {
        if (e.target.classList.contains('footprint-cb')) {
            updateBadge('.footprint-cb', 'fpBadge');
            searchBar(document.getElementById('searchInput'));
        }
        if (e.target.classList.contains('manufacturer-cb')) {
            updateBadge('.manufacturer-cb', 'manuBadge');
            searchBar(document.getElementById('searchInput'));
        }
        if (e.target.classList.contains('category-cb')) {
            updateBadge('.category-cb', 'catBadge');
            searchBar(document.getElementById('searchInput'));
        }
        if (e.target.classList.contains('location-cb')) {
    updateBadge('.location-cb', 'locBadge');
    searchBar(document.getElementById('searchInput'));
}
    });

    document.getElementById('clearFootprints').addEventListener('click', e => {
        e.preventDefault(); clearFilter('.footprint-cb', 'fpBadge');
    });
    document.getElementById('clearManufacturers').addEventListener('click', e => {
        e.preventDefault(); clearFilter('.manufacturer-cb', 'manuBadge');
    });
    document.getElementById('clearCategories').addEventListener('click', e => {
        e.preventDefault(); clearFilter('.category-cb', 'catBadge');
    });
    document.getElementById('clearLocations').addEventListener('click', e => {
    e.preventDefault(); clearFilter('.location-cb', 'locBadge');
});

    initToleranceSlider();

    // Header rendezés
  let currentSortCol = null;
  let currentSortDir = 'asc';

  function parseLocation(str) {
    const m = str.match(/^([A-Za-z]+)(\d+)$/);
    return m ? { letter: m[1].toUpperCase(), num: parseInt(m[2], 10) } : null;
  }

  function parseNumeric(str) {
    const cleaned = str.replace(/[^0-9.,\-]/g, '').replace(',', '.');
    const val = parseFloat(cleaned);
    return isNaN(val) ? null : val;
  }

  function compareCells(a, b, colIndex) {
    // Üres / "-" értékek mindig a lista végére
    const aEmpty = a === '' || a === '-';
    const bEmpty = b === '' || b === '-';
    if (aEmpty && bEmpty) return 0;
    if (aEmpty) return 1;
    if (bEmpty) return -1;

    if (colIndex === 10) {
      const na = parseNumeric(a), nb = parseNumeric(b);
      if (na !== null && nb !== null) return na - nb;
    }

    // Location oszlop
    if (colIndex === 8) {
      const pa = parseLocation(a), pb = parseLocation(b);
      if (pa && pb) {
        if (pa.letter !== pb.letter) return pa.letter.localeCompare(pb.letter);
        return pa.num - pb.num;
      }
    }

    // Numerikus Tolerance, Max Current, Max Voltage
    if (colIndex === 5 || colIndex === 6 || colIndex === 7) {
      const na = parseNumeric(a), nb = parseNumeric(b);
      if (na !== null && nb !== null) return na - nb;
    }

    // Szám vs szöveg 
    const na = parseFloat(a), nb = parseFloat(b);
    if (!isNaN(na) && !isNaN(nb) && /^[\d.,\-]+$/.test(a) && /^[\d.,\-]+$/.test(b)) {
      return na - nb;
    }

    return a.localeCompare(b, "hu", { numeric: true, sensitivity: 'base' });
  }

  function sortTable(colIndex, direction) {
    const tbody = document.querySelector("#inventoryTable tbody");
    const rows = Array.from(tbody.querySelectorAll("tr"));
    const mult = direction === 'asc' ? 1 : -1;

    rows.sort((rowA, rowB) => {
      const a = rowA.children[colIndex].innerText.trim();
      const b = rowB.children[colIndex].innerText.trim();
      return compareCells(a, b, colIndex) * mult;
    });

    rows.forEach(row => tbody.appendChild(row));
  }

  function updateSortIndicators() {
    document.querySelectorAll('#inventoryTable th.sortable').forEach(th => {
      const col = parseInt(th.dataset.col);
      th.classList.remove('sort-asc', 'sort-desc');
      const arrow = th.querySelector('.sort-arrow');
      if (col === currentSortCol) {
        th.classList.add(currentSortDir === 'asc' ? 'sort-asc' : 'sort-desc');
        arrow.textContent = currentSortDir === 'asc' ? '▲' : '▼';
      } else {
        arrow.textContent = '▲▼';
      }
    });
  }

  // Katt a headerre
  document.addEventListener('click', function(e) {
    const th = e.target.closest('#inventoryTable th.sortable');
    if (!th) return;

    const col = parseInt(th.dataset.col);
    if (currentSortCol === col) {
      currentSortDir = currentSortDir === 'asc' ? 'desc' : 'asc';
    } else {
      currentSortCol = col;
      currentSortDir = 'asc';
    }

    sortTable(col, currentSortDir);
    updateSortIndicators();
  });

  // újrarendezés
  function reapplySort() {
    if (currentSortCol !== null) {
      sortTable(currentSortCol, currentSortDir);
      updateSortIndicators();
    }
  }
</script>

<?php
include './footer.php';
?>
</body>
</html>