{% extends "base.html" %}
{% block title %}Dashboard - GoMag Import{% endblock %}
{% block nav_dashboard %}active{% endblock %}
{% block bnav_dashboard %}active{% endblock %}

{% block content %}
<h4 class="mb-4">Panou de Comanda</h4>

<div id="welcomeCard" style="display:none"></div>

<!-- Sync Card (unified two-row panel) -->
<div class="sync-card">
  <!-- TOP ROW: Status + Controls -->
  <div class="sync-card-controls">
    <span id="syncStatusDot" class="sync-status-dot idle"></span>
    <span id="syncStatusText" class="text-secondary">Inactiv</span>
    <div class="d-flex align-items-center gap-2">
      <label class="d-flex align-items-center gap-1 text-muted">
        Auto:
        <input type="checkbox" id="schedulerToggle" class="cursor-pointer" onchange="toggleScheduler()">
      </label>
      <select id="schedulerInterval" class="select-compact" onchange="updateSchedulerInterval()">
        <option value="1">1 min</option>
        <option value="3">3 min</option>
        <option value="5">5 min</option>
        <option value="10" selected>10 min</option>
        <option value="30">30 min</option>
      </select>
      <button id="syncStartBtn" class="btn btn-sm btn-primary" onclick="startSync()">&#9654; Start Sync</button>
    </div>
  </div>
  <div class="sync-card-divider"></div>
  <!-- BOTTOM ROW: Last sync info (clickable → jurnal) -->
  <div class="sync-card-info" id="lastSyncRow" role="button" tabindex="0" title="Ver jurnal sync">
    <span id="lastSyncDate" class="fw-medium">&#8212;</span>
    <span id="lastSyncDuration" class="text-muted">&#8212;</span>
    <span id="lastSyncCounts">&#8212;</span>
    <span id="lastSyncStatus">&#8212;</span>
    <span class="ms-auto small text-muted">&#8599; jurnal</span>
  </div>
  <!-- LIVE PROGRESS (shown only when sync is running) -->
  <div class="sync-card-progress" id="syncProgressArea" style="display:none;">
    <span class="sync-live-dot"></span>
    <span id="syncProgressText">Se proceseaza...</span>
  </div>
</div>

<!-- Orders Table -->
<div class="card mb-4">
    <div class="card-header">
        <span>Comenzi</span>
    </div>
    <div class="card-body py-2 px-3">
        <div id="attentionCard"></div>
        <div class="filter-bar" id="ordersFilterBar">
          <!-- Period preset buttons -->
          <div class="period-presets">
              <button class="preset-btn" data-days="1">Azi</button>
              <button class="preset-btn active" data-days="3">3 zile</button>
              <button class="preset-btn" data-days="7">7 zile</button>
              <button class="preset-btn" data-days="30">30 zile</button>
              <button class="preset-btn" data-days="custom">Custom</button>
          </div>
          <!-- Custom date range (hidden until 'Custom' clicked) -->
          <div class="period-custom-range" id="customRangeInputs">
            <input type="date" id="periodStart" class="select-compact">
            <span>&#8212;</span>
            <input type="date" id="periodEnd" class="select-compact">
          </div>
          <input type="search" id="orderSearch" placeholder="Cauta comanda, client..." class="search-input">
          <!-- Status pills -->
          <button class="filter-pill active d-none d-md-inline-flex" data-status="all">Toate <span class="filter-count fc-neutral" id="cntAll">0</span></button>
          <button class="filter-pill d-none d-md-inline-flex" data-status="IMPORTED">Importat <span class="filter-count fc-green" id="cntImp">0</span></button>
          <button class="filter-pill d-none d-md-inline-flex" data-status="SKIPPED">Omise <span class="filter-count fc-yellow" id="cntSkip">0</span></button>
          <button class="filter-pill d-none d-md-inline-flex" data-status="ERROR">Erori <span class="filter-count fc-red" id="cntErr">0</span></button>
          <button class="filter-pill d-none d-md-inline-flex" data-status="INVOICED">Facturate <span class="filter-count fc-green" id="cntFact">0</span></button>
          <button class="filter-pill d-none d-md-inline-flex" data-status="UNINVOICED">Nefacturate <span class="filter-count fc-red" id="cntNef">0</span></button>
          <button class="filter-pill d-none d-md-inline-flex" data-status="CANCELLED">Anulate <span class="filter-count fc-dark" id="cntCanc">0</span></button>
          <button class="filter-pill d-none d-md-inline-flex" data-status="DIFFS">Diferente <span class="filter-count fc-orange" id="cntDiff">0</span></button>
          <button class="btn btn-sm btn-outline-secondary d-none d-md-inline-flex" id="btnRefreshInvoices" onclick="refreshInvoices()" title="Actualizeaza status facturi din Oracle">&#8635;</button>
        </div>
          <div class="d-md-none mb-2 d-flex align-items-center gap-2" style="max-width:100%;overflow:hidden">
            <div class="flex-grow-1" id="dashMobileSeg" style="min-width:0;overflow-x:auto"></div>
            <button class="btn btn-sm btn-outline-secondary" id="btnRefreshInvoicesMobile" onclick="refreshInvoices()" title="Actualizeaza facturi" style="padding:4px 8px; font-size:1rem; line-height:1">&#8635;</button>
          </div>
    </div>
    <div id="dashPaginationTop" class="pag-strip"></div>
    <div class="card-body p-0">
        <div id="dashMobileList" class="mobile-list"></div>
        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead>
                    <tr>
                        <th style="width:24px"></th>
                        <th style="width:28px" title="Facturat">F</th>
                        <th class="sortable" onclick="dashSortBy('order_date')">Data <span class="sort-icon" data-col="order_date"></span></th>
                        <th class="sortable" onclick="dashSortBy('customer_name')">Client <span class="sort-icon" data-col="customer_name"></span></th>
                        <th class="sortable" onclick="dashSortBy('order_number')">Nr Comanda <span class="sort-icon" data-col="order_number"></span></th>
                        <th class="sortable" onclick="dashSortBy('items_count')">Art. <span class="sort-icon" data-col="items_count"></span></th>
                        <th class="text-end">Transport</th>
                        <th class="text-end">Discount</th>
                        <th class="text-end">Total</th>
                        <th style="width:44px"></th>
                    </tr>
                </thead>
                <tbody id="dashOrdersBody">
                    <tr><td colspan="10" class="text-center text-muted py-3">Se incarca...</td></tr>
                </tbody>
            </table>
        </div>
    </div>
    <div id="dashPagination" class="pag-strip pag-strip-bottom"></div>
</div>

{% endblock %}

{% block scripts %}
<script src="{{ request.scope.get('root_path', '') }}/static/js/dashboard.js?v=48"></script>
{% endblock %}