{% extends "base.html" %}
{% block title %}Mapari SKU - GoMag Import{% endblock %}
{% block nav_mappings %}active{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h4 class="mb-0">Mapari SKU</h4>
    <div>
        <button class="btn btn-sm btn-outline-secondary" onclick="downloadTemplate()"><i class="bi bi-file-earmark-arrow-down"></i> Template CSV</button>
        <button class="btn btn-sm btn-outline-secondary" onclick="exportCsv()"><i class="bi bi-download"></i> Export CSV</button>
        <button class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#importModal"><i class="bi bi-upload"></i> Import CSV</button>
        <button class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#addModal"><i class="bi bi-plus-lg"></i> Adauga Mapare</button>
    </div>
</div>

<!-- Search -->
<div class="card mb-3">
    <div class="card-body py-2">
        <div class="input-group">
            <span class="input-group-text"><i class="bi bi-search"></i></span>
            <input type="text" class="form-control" id="searchInput" placeholder="Cauta SKU, CODMAT sau denumire..." oninput="debounceSearch()">
        </div>
    </div>
</div>

<!-- Table -->
<div class="card">
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead>
                    <tr>
                        <th>SKU</th>
                        <th>CODMAT</th>
                        <th>Denumire</th>
                        <th>Cantitate ROA</th>
                        <th>Procent Pret</th>
                        <th>Activ</th>
                        <th style="width:100px">Actiuni</th>
                    </tr>
                </thead>
                <tbody id="mappingsBody">
                    <tr><td colspan="7" class="text-center text-muted py-4">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="pageInfo"></small>
        <nav>
            <ul class="pagination pagination-sm mb-0" id="pagination"></ul>
        </nav>
    </div>
</div>

<!-- Add/Edit Modal -->
<div class="modal fade" id="addModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addModalTitle">Adauga Mapare</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label class="form-label">SKU</label>
                    <input type="text" class="form-control" id="inputSku" placeholder="Ex: 8714858124284">
                </div>
                <div class="mb-3 position-relative">
                    <label class="form-label">CODMAT (Articol ROA)</label>
                    <input type="text" class="form-control" id="inputCodmat" placeholder="Cauta codmat sau denumire..." autocomplete="off">
                    <div class="autocomplete-dropdown d-none" id="autocompleteDropdown"></div>
                    <small class="text-muted" id="selectedArticle"></small>
                </div>
                <div class="row">
                    <div class="col-6 mb-3">
                        <label class="form-label">Cantitate ROA</label>
                        <input type="number" class="form-control" id="inputCantitate" value="1" step="0.001" min="0.001">
                    </div>
                    <div class="col-6 mb-3">
                        <label class="form-label">Procent Pret (%)</label>
                        <input type="number" class="form-control" id="inputProcent" value="100" step="0.01" min="0" max="100">
                    </div>
                </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="saveMapping()">Salveaza</button>
            </div>
        </div>
    </div>
</div>

<!-- Import CSV Modal -->
<div class="modal fade" id="importModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Import CSV</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p class="text-muted small">Format CSV: sku, codmat, cantitate_roa, procent_pret</p>
                <input type="file" class="form-control" id="csvFile" accept=".csv">
                <div id="importResult" class="mt-3"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Inchide</button>
                <button type="button" class="btn btn-primary" onclick="importCsv()">Import</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

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