<?php
require('config.php');
require('EpiApi.php');
require('vendor/autoload.php');

$Epi = new Epirent();
?>


<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        <title>Packmonitor</title>

        <!-- Bootstrap -->
        <link rel="stylesheet" href="vendor/twbs/bootstrap/dist/css/bootstrap.min.css" >
        <script src="scripts/jquery-3.5.1.min.js"></script>
        <link href="css/sticky-footer.css" rel="stylesheet">
        <script src="https://kit.fontawesome.com/93d71de8bc.js" crossorigin="anonymous"></script>
        <style>
@media (min-width: 1800px) {
  .row {
    flex-wrap: nowrap; /* verhindert Umbruch */
  }

  /* Checkout + Checkin: je 45% */
  .row > .col-sm:nth-child(1),
  .row > .col-sm:nth-child(2) {
    flex: 0 0 35%;
    max-width: 35%;
  }

  /* Aufgaben: 10% */
  .row > .col-sm:nth-child(3) {
    flex: 0 0 30%;
    max-width: 30%;
  }
}
.table td, .table th {
    padding: .25rem;
}


        </style>

<script type="text/javascript">
  // === PHP-Flags in JS bringen ===
  const SCROLL_FLAGS = {
    checkout: <?php echo (defined('EnableScrollingCheckOut') && EnableScrollingCheckOut) ? 'true' : 'false'; ?>,
    checkin:  <?php echo (defined('EnableScrollingCheckIn')  && EnableScrollingCheckIn)  ? 'true' : 'false'; ?>,
    aufgaben: <?php echo (defined('EnableScrollingAufgaben') && EnableScrollingAufgaben) ? 'true' : 'false'; ?>
  };

  // Mapping: DOM-ID -> Flag-Key
  const SCROLLER_KEYS = new Map([
    ['checkout-scroll', 'checkout'],
    ['checkin-scroll',  'checkin'],
    ['aufgaben-scroll', 'aufgaben']
  ]);
  const TABLE_KEYS = new Map([
    ['checkout-table', 'checkout'],
    ['checkin-table',  'checkin'],
    ['aufgaben-table', 'aufgaben']
  ]);

  function keyForEl(el, map) {
    if (!el || !el.id) return null;
    return map.get(el.id) || null;
  }
  function isEnabledByEl(el) {
    const k = keyForEl(el, SCROLLER_KEYS);
    return !!(k && SCROLL_FLAGS[k]);
  }
  function isEnabledByKey(key) {
    return !!SCROLL_FLAGS[key];
  }

  // === Höhe der Scroll-Container: nebeneinander = volle Höhe; gestapelt = Drittel ===
  function sizeScrollContainers() {
    const nodes = [
      document.querySelector('#checkout-scroll'),
      document.querySelector('#checkin-scroll'),
      document.querySelector('#aufgaben-scroll')
    ].filter(Boolean);

    if (nodes.length === 0) return;

    // Ermitteln, ob alles in einer Zeile (nebeneinander) oder gestapelt
    const tops = nodes.map(n => n.getBoundingClientRect().top);
    const ROW_TOL = 8; // px
    const uniqueRows = [];
    tops.forEach(t => {
      const exists = uniqueRows.some(rt => Math.abs(rt - t) <= ROW_TOL);
      if (!exists) uniqueRows.push(t);
    });
    const isOneRow = uniqueRows.length === 1;

    const bottomMargin = 16;
    const minH = 120;

    nodes.forEach(node => {
      // Wenn Scrolling für diesen Bereich deaktiviert ist, Höhe trotzdem setzen (wie gefordert)
      const rect = node.getBoundingClientRect();
      if (isOneRow) {
        const available = window.innerHeight - rect.top - bottomMargin;
        node.style.maxHeight = Math.max(minH, available) + 'px';
      } else {
        const third = Math.floor(window.innerHeight / 3) - bottomMargin;
        node.style.maxHeight = Math.max(minH, third) + 'px';
      }
    });
  }

  // === Scroll-/Interaktionsstatus je Scroller ===
  const scrollState = new WeakMap(); // { userActive:boolean, autoTimer:number|null, loopHeight:number }

  function ensureState(el) {
    if (!scrollState.get(el)) scrollState.set(el, { userActive: false, autoTimer: null, loopHeight: 0 });
    return scrollState.get(el);
  }

  function attachScrollGuards($scroller) {
    const el = $scroller.get(0);
    if (!el || el.__guardsBound) return;
    if (!isEnabledByEl(el)) return; // nur wenn Feature aktiv
    const state = ensureState(el);

    const markActive = () => {
      state.userActive = true;
      clearTimeout(state._quietT);
      state._quietT = setTimeout(() => { state.userActive = false; }, 800);
      stopAutoScroll($scroller);
    };

    $scroller.on('wheel touchstart touchmove keydown mousedown mouseenter', markActive);
    $scroller.on('mouseleave', () => setTimeout(() => maybeStartAutoScroll($scroller), 600));
    el.__guardsBound = true;
  }

  // === Loop aufbauen: nahtloses Doppel nur bei Bedarf & nur wenn aktiv ===
  function buildSeamlessLoop($table, $scroller) {
    $table.find('tbody.__loopClone').remove();

    const scEl = $scroller.get(0);
    const enabled = isEnabledByEl(scEl);
    const st = ensureState(scEl);
    st.loopHeight = 0;

    if (!enabled) return; // deaktiviert -> keine Loops

    const $main = $table.find('tbody').first();
    if ($main.length === 0 || $main.children().length === 0) return;

    const needScroll = $main.get(0).offsetHeight > scEl.clientHeight + 1;
    if (!needScroll) return;

    const $clone = $main.clone(false, false).addClass('__loopClone').attr('aria-hidden', 'true');
    $table.append($clone);
    st.loopHeight = $main.get(0).offsetHeight; // Höhe des Original-Inhalts als Loop-Länge
  }

  // === Auto-Scroll (nahtlos) ===
  function startAutoScroll($scroller, speedPx = 1, stepMs = 40) {
    const el = $scroller.get(0);
    if (!isEnabledByEl(el)) return;

    const st = ensureState(el);
    if (st.autoTimer) return;                 // schon aktiv
    if (st.loopHeight <= 0) return;           // kein Overflow => nicht scrollen

    const tick = () => {
      if (st.userActive) { stopAutoScroll($scroller); return; }
      el.scrollTop += speedPx;
      if (el.scrollTop >= st.loopHeight) {
        el.scrollTop -= st.loopHeight;
      }
    };

    st.autoTimer = setInterval(tick, stepMs);
  }

  function stopAutoScroll($scroller) {
    const el = $scroller.get(0);
    const st = ensureState(el);
    if (st.autoTimer) {
      clearInterval(st.autoTimer);
      st.autoTimer = null;
    }
  }

  function maybeStartAutoScroll($scroller) {
    const el = $scroller.get(0);
    if (!isEnabledByEl(el)) { stopAutoScroll($scroller); return; }
    const st = ensureState(el);
    if (st.userActive) return;
    if (st.loopHeight > 0) startAutoScroll($scroller, 1, 80);
    else stopAutoScroll($scroller);
  }

  // === AJAX-Reload: relative Position innerhalb der Loop erhalten ===
  function smartLoad($scroller, $table, $target, url, intervalMs) {
    const scEl = $scroller.get(0);
    const st = ensureState(scEl);
    const enabled = isEnabledByEl(scEl);

    const oldLoop = st.loopHeight > 0 ? st.loopHeight : Math.max(1, scEl.scrollHeight - scEl.clientHeight);
    const posInLoop = st.loopHeight > 0 ? (scEl.scrollTop % oldLoop) : scEl.scrollTop;
    const posRatio  = Math.min(1, posInLoop / oldLoop);

    $target.load(url, function () {
      if (enabled) {
        buildSeamlessLoop($table, $scroller);
        if (st.loopHeight > 0) {
          const newPos = Math.floor(posRatio * st.loopHeight);
          if (Math.abs(scEl.scrollTop - newPos) > 1) {
            requestAnimationFrame(() => { scEl.scrollTop = newPos; });
          }
          stopAutoScroll($scroller);
          startAutoScroll($scroller, 1, 80);
        } else {
          if (scEl.scrollTop !== 0) requestAnimationFrame(() => { scEl.scrollTop = 0; });
          stopAutoScroll($scroller);
        }
      } else {
        $table.find('tbody.__loopClone').remove();
        stopAutoScroll($scroller);
        if (scEl.scrollTop !== 0) requestAnimationFrame(() => { scEl.scrollTop = 0; });
      }

      setTimeout(() => smartLoad($scroller, $table, $target, url, intervalMs), intervalMs);
    });
  }

  // === Initialisierung ===
  $(document).ready(function () {
    sizeScrollContainers();

    $(window).on('resize', function () {
      sizeScrollContainers();
      ['#checkout', '#checkin', '#aufgaben'].forEach(prefix => {
        const $scroller = $(`${prefix}-scroll`);
        const $table    = $(`${prefix}-table`);
        buildSeamlessLoop($table, $scroller);
        maybeStartAutoScroll($scroller);
      });
    });

    // Guards nur für aktivierte Scroller
    [['#checkout-scroll','checkout'], ['#checkin-scroll','checkin'], ['#aufgaben-scroll','aufgaben']].forEach(([sel,key]) => {
      if (isEnabledByKey(key)) attachScrollGuards($(sel));
    });

    // Erstladen je Tabelle
    function initOne(scrollerSel, tableSel, tbodySel, url, ms, key) {
      const $scroller = $(scrollerSel);
      const $table    = $(tableSel);
      const $target   = $(tbodySel);
      const enabled   = isEnabledByKey(key);

      $target.load(url, function () {
        if (enabled) {
          buildSeamlessLoop($table, $scroller);
          maybeStartAutoScroll($scroller);
        } else {
          $table.find('tbody.__loopClone').remove();
          stopAutoScroll($scroller);
        }
        setTimeout(() => smartLoad($scroller, $table, $target, url, ms), ms);
      });
    }

    initOne('#checkout-scroll', '#checkout-table', '#getCheckOutTableHolder', 'sources/getCheckOutTable.php', 10000, 'checkout');
    initOne('#checkin-scroll',  '#checkin-table',  '#getCheckInTableHolder',  'sources/getCheckInTable.php',  10000, 'checkin');
    initOne('#aufgaben-scroll', '#aufgaben-table', '#AufgabenTableHolder',     'sources/getAufgabenTable.php', 60000, 'aufgaben');
  });
</script>




        <style>
            /* Scroll-Wrapper je Tabelle */
            .tableFixHead {
                overflow-y: auto;
                /* Höhe wird per JS dynamisch gesetzt, damit genau bis zum Viewport-Ende gescrollt wird */
                max-height: 60vh; /* Fallback */
                border: 1px solid rgba(255,255,255,.1);
                border-radius: .25rem;
            }

            /* Sticky Header */
            .tableFixHead thead th {
                position: sticky;
                top: 0;
                z-index: 2; /* über Body-Zellen */
            }

            /* Saubere Hintergrundfarbe für sticky Header (Bootstrap .table-dark) */
            .table-dark thead th {
                background-color: #212529; /* gleiche Farbe wie .table-dark header */
            }

            /* Optional: dünne Trennlinien */
            .table-dark tbody tr + tr td {
                border-top: 1px solid rgba(255,255,255,.08);
            }
        </style>
    </head>
    <body style="margin-bottom:0px; background-color: black;">

        <div class="container-fluid">
            <div class="row">
                <div class="col-sm" style="padding: 5px !important;">
                    <h2 class="text-light">Check-Out</h2>
                    <div class="tableFixHead" id="checkout-scroll">
                        <table class="table table-dark mb-0" id="checkout-table">
                            <thead>
                               <tr>
                                <th scope="col">#</th>
                                <th scope="col">Kunde</th>
                                <th scope="col">Event</th>
                               
    <?php
    if(ShowCheckoutTimeOnCheckout || ShowVorbereitungTimeOnCheckout||ShowPackagingTimeOnCheckout || ShowDeliveryTimeOnCheckout){
        echo '<th scope="col">';
    }
    
           if(ShowCheckoutTimeOnCheckout){
              echo "Dispo-Start";
            }
            if(ShowVorbereitungTimeOnCheckout){
                if(ShowCheckoutTimeOnCheckout){echo "<br>";}
               echo "VB-Start";
            }
            if(ShowPackagingTimeOnCheckout){
                if(ShowCheckoutTimeOnCheckout||ShowVorbereitungTimeOnCheckout){echo "<br>";}
                echo "Packen";
            }
            if(ShowDeliveryTimeOnCheckout){
                if(ShowCheckoutTimeOnCheckout || ShowVorbereitungTimeOnCheckout||ShowPackagingTimeOnCheckout){echo "<br>";}
                echo "Liefern";
            }
    if(ShowCheckoutTimeOnCheckout || ShowVorbereitungTimeOnCheckout||ShowPackagingTimeOnCheckout || ShowDeliveryTimeOnCheckout){
        echo '</th>';
    }
    
    ?>
                                <th scope="col">Status</th>
                                   <?php
                                if(ShowShippingIcons){
                                    echo "<th scope='col'>Shipping</th>";
                                }
                                ?>
                            </tr>
                            </thead>
                            <tbody id="getCheckOutTableHolder"></tbody>
                        </table>
                    </div>
                </div>

                <div class="col-sm" style="padding: 5px !important;">
                    <h2 class="text-light">Check-In</h2>
                    <div class="tableFixHead" id="checkin-scroll">
                        <table class="table table-dark mb-0" id="checkin-table">
                            <thead>
                                <tr>
                                <th scope="col">#</th>
                                <th scope="col">Kunde</th>
                                <th scope="col">Event</th>    <?php
    if(ShowCheckInTimeOnCheckin || ShowNachbereitungTimeOnCheckin ||ShowRePackagingTimeOnCheckin || ShowReDeliveryTimeOnCheckin){
        echo '<th scope="col">';
    }
    
           if(ShowCheckInTimeOnCheckin){
              echo "Dispo-Ende";
            }
            if(ShowNachbereitungTimeOnCheckin){
                if(ShowCheckInTimeOnCheckin){echo "<br>";}
               echo "Nachbereitung";
            }
            if(ShowRePackagingTimeOnCheckin){
                if(ShowCheckInTimeOnCheckin||ShowNachbereitungTimeOnCheckin){echo "<br>";}
                echo "Zurückpacken";
            }
            if(ShowReDeliveryTimeOnCheckin){
                if(ShowCheckInTimeOnCheckin || ShowNachbereitungTimeOnCheckin||ShowRePackagingTimeOnCheckin){echo "<br>";}
                echo "Rückliefern";
            }
    if(ShowCheckInTimeOnCheckin || ShowNachbereitungTimeOnCheckin||ShowRePackagingTimeOnCheckin || ShowReDeliveryTimeOnCheckin){
        echo '</th>';
    }
    
    ?>



                                <th scope="col">Status</th>
                                   <?php
                                if(ShowShippingIcons){
                                    echo "<th scope='col'>Shipping</th>";
                                }
                                ?>
                            </tr>
                            </thead>
                            <tbody id="getCheckInTableHolder"></tbody>
                        </table>
                    </div>
                </div>

                <div class="col-sm" style="padding: 5px !important;">
                    <h2 class="text-light">Aufgaben</h2>
                    <div class="tableFixHead" id="aufgaben-scroll">
                        <table class="table table-dark mb-0" id="aufgaben-table">
                            <thead>
                                <tr>
                                    <th scope="col">#</th>
                                    <th scope="col">Bearbeiter</th>
                                    <th scope="col">Aufgabe</th>
                                    <th scope="col">Ziel</th>
                                    <th scope="col">Prio</th>
                                </tr>
                            </thead>
                            <tbody id="AufgabenTableHolder"></tbody>
                        </table>
                    </div>
                </div>

            </div>




        </header>        



    </div>



    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="vendor/twbs/bootstrap/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</body>
</html>


<?php

function getTimeFromSeconds(string $timestring) {

    $hours = floor($timestring / 3600);
    $mins = floor($timestring / 60 % 60);
    $secs = floor($timestring % 60);

    $timeFormat = sprintf('%02d:%02d', $hours, $mins);

    return $timeFormat;
}
?>