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

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

<!-- Sync Control -->
<div class="card mb-4">
    <div class="card-header d-flex justify-content-between align-items-center">
        <span>Sync Control</span>
        <span class="badge bg-secondary" id="syncStatusBadge">idle</span>
    </div>
    <div class="card-body">
        <div class="row align-items-center">
            <div class="col-auto">
                <button class="btn btn-success btn-sm" id="btnStartSync" onclick="startSync()">
                    <i class="bi bi-play-fill"></i> Start Sync
                </button>
                <button class="btn btn-danger btn-sm d-none" id="btnStopSync" onclick="stopSync()">
                    <i class="bi bi-stop-fill"></i> Stop
                </button>
            </div>
            <div class="col-auto">
                <div class="form-check form-switch d-inline-block me-2">
                    <input class="form-check-input" type="checkbox" id="schedulerToggle" onchange="toggleScheduler()">
                    <label class="form-check-label" for="schedulerToggle">Scheduler</label>
                </div>
                <select class="form-select form-select-sm d-inline-block" style="width:auto" id="schedulerInterval" onchange="updateSchedulerInterval()">
                    <option value="1">1 min</option>
                    <option value="5" selected>5 min</option>
                    <option value="10">10 min</option>
                    <option value="15">15 min</option>
                    <option value="30">30 min</option>
                    <option value="60">60 min</option>
                </select>
            </div>
            <div class="col">
                <small class="text-muted" id="syncProgressText"></small>
            </div>
        </div>
        <div class="mt-2 d-none" id="syncStartedBanner">
            <div class="alert alert-info alert-sm py-1 px-2 mb-0 d-inline-block">
                <small><i class="bi bi-broadcast"></i> Sync pornit — <a href="#" id="syncRunLink">vezi progresul live</a></small>
            </div>
        </div>
    </div>
</div>

<!-- Last Sync Summary Card -->
<div class="card mb-4" id="lastSyncCard">
    <div class="card-header d-flex justify-content-between align-items-center cursor-pointer" data-bs-toggle="collapse" data-bs-target="#lastSyncBody">
        <span>Ultimul Sync</span>
        <i class="bi bi-chevron-down"></i>
    </div>
    <div class="collapse show" id="lastSyncBody">
        <div class="card-body">
            <div class="row text-center" id="lastSyncRow">
                <div class="col last-sync-col"><small class="text-muted">Data</small><br><strong id="lastSyncDate">-</strong></div>
                <div class="col last-sync-col"><small class="text-muted">Status</small><br><span id="lastSyncStatus">-</span></div>
                <div class="col last-sync-col"><small class="text-muted">Importate</small><br><strong class="text-success" id="lastSyncImported">0</strong></div>
                <div class="col last-sync-col"><small class="text-muted">Omise</small><br><strong class="text-warning" id="lastSyncSkipped">0</strong></div>
                <div class="col last-sync-col"><small class="text-muted">Erori</small><br><strong class="text-danger" id="lastSyncErrors">0</strong></div>
                <div class="col"><small class="text-muted">Durata</small><br><strong id="lastSyncDuration">-</strong></div>
            </div>
        </div>
    </div>
</div>

<!-- Orders Table -->
<div class="card mb-4">
    <div class="card-header d-flex justify-content-between align-items-center">
        <div class="d-flex align-items-center gap-2">
            <span>Comenzi</span>
            <div class="btn-group btn-group-sm" role="group" id="dashPeriodBtns">
                <button type="button" class="btn btn-sm btn-outline-secondary" data-days="3" onclick="dashSetPeriod(3)">3 zile</button>
                <button type="button" class="btn btn-sm btn-secondary" data-days="7" onclick="dashSetPeriod(7)">7 zile</button>
                <button type="button" class="btn btn-sm btn-outline-secondary" data-days="30" onclick="dashSetPeriod(30)">30 zile</button>
                <button type="button" class="btn btn-sm btn-outline-secondary" data-days="0" onclick="dashSetPeriod(0)">Toate</button>
            </div>
        </div>
        <div class="input-group input-group-sm" style="width:250px">
            <span class="input-group-text"><i class="bi bi-search"></i></span>
            <input type="text" class="form-control" id="dashSearchInput" placeholder="Cauta..." oninput="debounceDashSearch()">
        </div>
    </div>
    <div class="card-body py-2">
        <div class="btn-group" role="group" id="dashFilterBtns">
            <button type="button" class="btn btn-sm btn-primary" onclick="dashFilterOrders('all')">
                Toate <span class="badge bg-light text-dark ms-1" id="dashCountAll">0</span>
            </button>
            <button type="button" class="btn btn-sm btn-outline-success" onclick="dashFilterOrders('IMPORTED')">
                Importate <span class="badge bg-light text-dark ms-1" id="dashCountImported">0</span>
            </button>
            <button type="button" class="btn btn-sm btn-outline-warning" onclick="dashFilterOrders('SKIPPED')">
                Omise <span class="badge bg-light text-dark ms-1" id="dashCountSkipped">0</span>
            </button>
            <button type="button" class="btn btn-sm btn-outline-danger" onclick="dashFilterOrders('ERROR')">
                Erori <span class="badge bg-light text-dark ms-1" id="dashCountError">0</span>
            </button>
            <button type="button" class="btn btn-sm btn-outline-info" onclick="dashFilterOrders('UNINVOICED')">
                Nefacturate <span class="badge bg-light text-dark ms-1" id="dashCountUninvoiced">0</span>
            </button>
        </div>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead>
                    <tr>
                        <th class="sortable" onclick="dashSortBy('order_number')">Nr Comanda <span class="sort-icon" data-col="order_number"></span></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('items_count')">Art. <span class="sort-icon" data-col="items_count"></span></th>
                        <th class="sortable" onclick="dashSortBy('status')">Status Import <span class="sort-icon" data-col="status"></span></th>
                        <th>ID ROA</th>
                        <th>Factura</th>
                        <th>Total</th>
                    </tr>
                </thead>
                <tbody id="dashOrdersBody">
                    <tr><td colspan="8" class="text-center text-muted py-3">Se incarca...</td></tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="card-footer d-flex justify-content-between align-items-center">
        <small class="text-muted" id="dashPageInfo"></small>
        <div id="dashPagination" class="d-flex align-items-center gap-2"></div>
    </div>
</div>

<!-- Order Detail Modal -->
<div class="modal fade" id="orderDetailModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Comanda <code id="detailOrderNumber"></code></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="row mb-3">
                    <div class="col-md-6">
                        <small class="text-muted">Client:</small> <strong id="detailCustomer"></strong><br>
                        <small class="text-muted">Data comanda:</small> <span id="detailDate"></span><br>
                        <small class="text-muted">Status:</small> <span id="detailStatus"></span>
                    </div>
                    <div class="col-md-6">
                        <small class="text-muted">ID Comanda ROA:</small> <span id="detailIdComanda">-</span><br>
                        <small class="text-muted">ID Partener:</small> <span id="detailIdPartener">-</span><br>
                        <small class="text-muted">ID Adr. Facturare:</small> <span id="detailIdAdresaFact">-</span><br>
                        <small class="text-muted">ID Adr. Livrare:</small> <span id="detailIdAdresaLivr">-</span>
                    </div>
                </div>
                <div class="table-responsive">
                    <table class="table table-sm table-bordered mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>SKU</th>
                                <th>Produs</th>
                                <th>Cant.</th>
                                <th>Pret</th>
                                <th>TVA</th>
                                <th>CODMAT</th>
                                <th>Status</th>
                                <th>Actiune</th>
                            </tr>
                        </thead>
                        <tbody id="detailItemsBody">
                        </tbody>
                    </table>
                </div>
                <div id="detailError" class="alert alert-danger mt-3" style="display:none;"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Inchide</button>
            </div>
        </div>
    </div>
</div>

<!-- Quick Map Modal (used from order detail) -->
<div class="modal fade" id="quickMapModal" tabindex="-1" data-bs-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Mapeaza SKU: <code id="qmSku"></code></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-2">
                    <small class="text-muted">Produs web:</small> <strong id="qmProductName"></strong>
                </div>
                <div id="qmCodmatLines">
                    <!-- Dynamic CODMAT lines -->
                </div>
                <button type="button" class="btn btn-sm btn-outline-secondary mt-2" onclick="addQmCodmatLine()">
                    <i class="bi bi-plus"></i> Adauga CODMAT
                </button>
                <div id="qmPctWarning" class="text-danger mt-2" style="display:none;"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Anuleaza</button>
                <button type="button" class="btn btn-primary" onclick="saveQuickMapping()">Salveaza</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="/static/js/dashboard.js"></script>
{% endblock %}