{% extends "base.html" %}
{% block title %}Quality Module{% endblock %}
{% block content %}
<div class="scan-container">
    <!-- Reports Card -->
    <div class="card report-form-card">
        <h3>Rapoarte</h3>
        <div class="form-centered">
            <label class="report-description">Raport zilnic va exporta toate comenzile scanate la punctele de scanare calitate</label>
            <button class="btn report-btn" data-report="1">Raport zilnic de comenzi complet</button>
        </div>
        <div class="form-centered">
            <label class="report-description">Raport 5 zile va exporta toate comenzile scanate la punctele de scanare calitate</label>
            <button class="btn report-btn" data-report="2">Raport 5 zile de comenzi complet</button>
        </div>
        <div class="form-centered">
            <label class="report-description">Raport articole cu probleme de calitate pe ziua curenta</label>
            <button class="btn report-btn" data-report="3">Raport Articole cu defecte ziua curenta</button>
        </div>
        <div class="form-centered">
            <label class="report-description">Raport articole cu probleme de calitate din ultimile 5 zile</label>
            <button class="btn report-btn" data-report="4">Raport Articole cu defecte in ultimile 5 zile</button>
        </div>
        <div class="form-centered">
            <label class="report-description">Raportarea tuturor intrarilor din baza de date</label>
            <button class="btn report-btn" data-report="5">Raporteaza bazade date</button>
        </div>
        <div class="form-centered last-buttons">
            <label class="export-description">Export current report as:</label>
            <div class="button-row">
                <button class="btn export-btn" id="export-csv">Export CSV</button>
                <!-- <button class="btn export-btn" id="export-excel">Export excell</button> -->
            </div>
        </div>
    </div>

    <!-- Data Display Card -->
    <div class="card report-table-card">
        <h3 id="report-title">No data to display, please select a report.</h3>
        <div class="report-table-container">
            <table class="scan-table" id="report-table">
                <thead>
                    <tr>
                        <!-- Table headers will be dynamically populated -->
                    </tr>
                </thead>
                <tbody>
                    <!-- Table data will be dynamically populated -->
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}