{% extends "base.html" %}
{% block title %}Setari - GoMag Import{% endblock %}
{% block nav_settings %}active{% endblock %}
{% block bnav_settings %}active{% endblock %}
{% block main_class %}constrained{% endblock %}

{% block content %}
<h4 class="mb-3">Setari</h4>

<!-- Dark mode toggle -->
<div class="theme-toggle-card">
    <div>
        <i class="bi bi-moon-fill me-2"></i>
        <label for="settDarkMode">Mod intunecat</label>
    </div>
    <div class="form-check form-switch mb-0">
        <input class="form-check-input" type="checkbox" role="switch" id="settDarkMode" style="width:2.5rem;height:1.25rem">
    </div>
</div>

<div class="row g-3 mb-3">
    <!-- GoMag API card -->
    <div class="col-md-6">
        <div class="card h-100">
            <div class="card-header py-2 px-3 fw-semibold">GoMag API</div>
            <div class="card-body py-2 px-3">
                <div class="mb-2">
                    <label class="form-label mb-0 small">API Key</label>
                    <input type="text" class="form-control form-control-sm" id="settGomagApiKey" placeholder="4c5e46...">
                </div>
                <div class="mb-2">
                    <label class="form-label mb-0 small">Shop URL</label>
                    <input type="text" class="form-control form-control-sm" id="settGomagApiShop" placeholder="https://coffeepoint.ro">
                </div>
                <div class="row g-2">
                    <div class="col-6">
                        <label class="form-label mb-0 small">Zile înapoi</label>
                        <input type="number" class="form-control form-control-sm" id="settGomagDaysBack" value="7" min="1">
                    </div>
                    <div class="col-6">
                        <label class="form-label mb-0 small">Limită/pagină</label>
                        <input type="number" class="form-control form-control-sm" id="settGomagLimit" value="100" min="1">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Import ROA card -->
    <div class="col-md-6">
        <div class="card h-100">
            <div class="card-header py-2 px-3 fw-semibold">Import ROA</div>
            <div class="card-body py-2 px-3">
                <div class="mb-2">
                    <label class="form-label mb-0 small">Gestiuni pentru verificare stoc</label>
                    <div id="settGestiuniContainer" class="border rounded p-2" style="max-height:120px;overflow-y:auto;font-size:0.85rem">
                        <span class="text-muted small">Se încarcă...</span>
                    </div>
                    <div class="form-text" style="font-size:0.75rem">Nicio selecție = orice gestiune</div>
                </div>
                <div class="mb-2">
                    <label class="form-label mb-0 small">Secție (ID_SECTIE)</label>
                    <select class="form-select form-select-sm" id="settIdSectie">
                        <option value="">— selectează secție —</option>
                    </select>
                </div>
                <div class="mb-2">
                    <label class="form-label mb-0 small">Politică Preț Vânzare (ID_POL)</label>
                    <select class="form-select form-select-sm" id="settIdPol">
                        <option value="">— selectează politică —</option>
                    </select>
                </div>
                <div class="mb-2">
                    <label class="form-label mb-0 small">Politică Preț Producție</label>
                    <select class="form-select form-select-sm" id="settIdPolProductie">
                        <option value="">— fără politică producție —</option>
                    </select>
                    <div class="form-text" style="font-size:0.75rem">Pentru articole cu cont 341/345 (producție proprie)</div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row g-3 mb-3">
    <!-- Transport card -->
    <div class="col-md-6">
        <div class="card h-100">
            <div class="card-header py-2 px-3 fw-semibold">Transport</div>
            <div class="card-body py-2 px-3">
                <div class="mb-2">
                    <label class="form-label mb-0 small">CODMAT Transport</label>
                    <div class="position-relative">
                        <input type="text" class="form-control form-control-sm" id="settTransportCodmat" placeholder="ex: TRANSPORT" autocomplete="off">
                        <div class="autocomplete-dropdown d-none" id="settTransportAc"></div>
                    </div>
                </div>
                <div class="row g-2">
                    <div class="col-6">
                        <label class="form-label mb-0 small">TVA Transport (%)</label>
                        <select class="form-select form-select-sm" id="settTransportVat">
                            <option value="5">5%</option>
                            <option value="9">9%</option>
                            <option value="19">19%</option>
                            <option value="21" selected>21%</option>
                        </select>
                    </div>
                    <div class="col-6">
                        <label class="form-label mb-0 small">Politică Transport</label>
                        <select class="form-select form-select-sm" id="settTransportIdPol">
                            <option value="">— implicită —</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Discount card -->
    <div class="col-md-6">
        <div class="card h-100">
            <div class="card-header py-2 px-3 fw-semibold">Discount</div>
            <div class="card-body py-2 px-3">
                <div class="mb-2">
                    <label class="form-label mb-0 small">CODMAT Discount</label>
                    <div class="position-relative">
                        <input type="text" class="form-control form-control-sm" id="settDiscountCodmat" placeholder="ex: DISCOUNT" autocomplete="off">
                        <div class="autocomplete-dropdown d-none" id="settDiscountAc"></div>
                    </div>
                </div>
                <div class="row g-2">
                    <div class="col-6">
                        <label class="form-label mb-0 small">TVA Discount (fallback %)</label>
                        <select class="form-select form-select-sm" id="settDiscountVat">
                            <option value="5">5%</option>
                            <option value="9">9%</option>
                            <option value="11">11%</option>
                            <option value="19">19%</option>
                            <option value="21" selected>21%</option>
                        </select>
                    </div>
                    <div class="col-6">
                        <label class="form-label mb-0 small">Politică Discount</label>
                        <select class="form-select form-select-sm" id="settDiscountIdPol">
                            <option value="">— implicită —</option>
                        </select>
                    </div>
                </div>
                <div class="mt-2 form-check">
                    <input type="checkbox" class="form-check-input" id="settSplitDiscountVat">
                    <label class="form-check-label small" for="settSplitDiscountVat">
                        Împarte discount pe cote TVA (proporțional cu valoarea articolelor)
                    </label>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="mt-4">
    <button class="btn btn-sm btn-outline-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#advancedSettings" aria-expanded="false" title="Modificati doar la indicatia echipei tehnice">
        <i class="bi bi-gear"></i> Setari avansate
    </button>
    <div class="collapse mt-2" id="advancedSettings">
        <div class="row g-3 mb-3">
            <div class="col-md-6">
                <div class="card h-100">
                    <div class="card-header py-2 px-3 fw-semibold">Dashboard</div>
                    <div class="card-body py-2 px-3">
                        <div class="mb-2">
                            <label class="form-label mb-0 small">Interval polling (secunde)</label>
                            <input type="number" class="form-control form-control-sm" id="settDashPollSeconds" value="5" min="1" max="300">
                            <div class="form-text" style="font-size:0.75rem">Cât de des verifică dashboard-ul starea sync-ului (implicit 5s)</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card h-100">
                    <div class="card-header py-2 px-3 fw-semibold">Pricing Kituri / Pachete</div>
                    <div class="card-body py-2 px-3">
                        <div class="mb-2">
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="kitPricingMode" id="kitModeOff" value="" checked>
                                <label class="form-check-label small" for="kitModeOff">Dezactivat</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="kitPricingMode" id="kitModeDistributed" value="distributed">
                                <label class="form-check-label small" for="kitModeDistributed">Distribuire discount în preț</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="kitPricingMode" id="kitModeSeparate" value="separate_line">
                                <label class="form-check-label small" for="kitModeSeparate">Linie discount separată</label>
                            </div>
                        </div>
                        <div id="kitModeBFields" style="display:none">
                            <div class="mb-2">
                                <label class="form-label mb-0 small">Kit Discount CODMAT</label>
                                <div class="position-relative">
                                    <input type="text" class="form-control form-control-sm" id="settKitDiscountCodmat" placeholder="ex: DISCOUNT_KIT" autocomplete="off">
                                    <div class="autocomplete-dropdown d-none" id="settKitDiscountAc"></div>
                                </div>
                            </div>
                            <div class="mb-2">
                                <label class="form-label mb-0 small">Kit Discount Politică</label>
                                <select class="form-select form-select-sm" id="settKitDiscountIdPol">
                                    <option value="">— implicită —</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row g-3 mb-3">
            <div class="col-md-6">
                <div class="card h-100">
                    <div class="card-header py-2 px-3 fw-semibold">Sincronizare Prețuri</div>
                    <div class="card-body py-2 px-3">
                        <div class="form-check mb-2">
                            <input type="checkbox" class="form-check-input" id="settPriceSyncEnabled" checked>
                            <label class="form-check-label small" for="settPriceSyncEnabled">Sync automat prețuri din comenzi</label>
                        </div>
                        <div class="form-check mb-2">
                            <input type="checkbox" class="form-check-input" id="settCatalogSyncEnabled">
                            <label class="form-check-label small" for="settCatalogSyncEnabled">Sync prețuri din catalog GoMag</label>
                        </div>
                        <div id="catalogSyncOptions" style="display:none">
                            <div class="mb-2">
                                <label class="form-label mb-0 small">Program</label>
                                <select class="form-select form-select-sm" id="settPriceSyncSchedule">
                                    <option value="">Doar manual</option>
                                    <option value="daily_03:00">Zilnic la 03:00</option>
                                    <option value="daily_06:00">Zilnic la 06:00</option>
                                </select>
                            </div>
                        </div>
                        <div id="settPriceSyncStatus" class="text-muted small mt-2"></div>
                        <button class="btn btn-sm btn-outline-primary mt-2" id="btnCatalogSync" onclick="startCatalogSync()">Sincronizează acum</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="mb-3">
    <button class="btn btn-primary btn-sm" onclick="saveSettings()">Salvează Setările</button>
    <span id="settSaveResult" class="ms-2 small"></span>
</div>

{% endblock %}

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