{% extends "base.html" %}
{% block title %}Quality Module{% endblock %}
{% block content %}
<div class="scan-container">
    <!-- Reports Card -->
    <div class="card report-form-card">
        <h3>Reports</h3>
        
        <!-- Reports List with Label-Button Layout -->
        <div class="reports-grid">
            <div class="form-centered">
                <label class="report-description">Daily report will export all orders scanned at quality scanning points</label>
                <button class="btn report-btn" data-report="1">Daily Complete Orders Report</button>
            </div>
            <div class="form-centered">
                <label class="report-description">Select day for daily report will export all orders scanned at quality scanning points</label>
                <button class="btn report-btn" id="select-day-report">Select Day Daily Report</button>
            </div>
            <div class="form-centered">
                <label class="report-description">Select date range for custom report - from start date 00:00 to end date 23:59</label>
                <button class="btn report-btn" id="date-range-report">Date Range Report</button>
            </div>
            <div class="form-centered">
                <label class="report-description">5-day report will export all orders scanned at quality scanning points</label>
                <button class="btn report-btn" data-report="2">5-Day Complete Orders Report</button>
            </div>
            <div class="form-centered">
                <label class="report-description">Report on items with quality issues for the current day</label>
                <button class="btn report-btn" data-report="3">Report on Items with Defects for the Current Day</button>
            </div>
            <div class="form-centered">
                <label class="report-description">Select specific day for quality defects report - items with quality issues</label>
                <button class="btn report-btn" id="select-day-defects-report">Select Day Quality Defects Report</button>
            </div>
            <div class="form-centered">
                <label class="report-description">Select date range for quality defects report - items with quality issues between two dates</label>
                <button class="btn report-btn" id="date-range-defects-report">Date Range Quality Defects Report</button>
            </div>
            <div class="form-centered">
                <label class="report-description">Report on items with quality issues for the last 5 days</label>
                <button class="btn report-btn" data-report="4">Report on Items with Defects for the Last 5 Days</button>
            </div>
            <div class="form-centered">
                <label class="report-description">Report all entries from the database</label>
                <button class="btn report-btn" data-report="5">Report Database</button>
            </div>
        </div>
        
        <!-- Separator -->
        <div class="report-separator"></div>
        
        <!-- Export Section -->
        <div class="export-section">
            <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> -->
                    {% if session.get('role') == 'superadmin' %}
                    <button class="btn export-btn test-db-btn" id="test-database">Test Database</button>
                    {% endif %}
                </div>
            </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>

<!-- Calendar Popup Modal -->
<div id="calendar-modal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h4>Select Date for Daily Report</h4>
            <span class="close-modal">&times;</span>
        </div>
        <div class="modal-body">
            <div class="calendar-container">
                <div class="calendar-header">
                    <button id="prev-month" class="calendar-nav">&lt;</button>
                    <h3 id="calendar-month-year"></h3>
                    <button id="next-month" class="calendar-nav">&gt;</button>
                </div>
                <div class="calendar-grid">
                    <div class="calendar-weekdays">
                        <div>Sun</div>
                        <div>Mon</div>
                        <div>Tue</div>
                        <div>Wed</div>
                        <div>Thu</div>
                        <div>Fri</div>
                        <div>Sat</div>
                    </div>
                    <div class="calendar-days" id="calendar-days">
                        <!-- Days will be populated by JavaScript -->
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn btn-secondary" id="cancel-date">Cancel</button>
            <button class="btn btn-primary" id="confirm-date" disabled>Generate Report</button>
        </div>
    </div>
</div>

<!-- Date Range Popup Modal -->
<div id="date-range-modal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h4>Select Date Range for Report</h4>
            <span class="close-modal" id="close-date-range">&times;</span>
        </div>
        <div class="modal-body">
            <div class="date-range-container">
                <div class="date-input-group">
                    <label for="start-date">Start Date:</label>
                    <input type="date" id="start-date" class="date-input" />
                    <small class="date-help">Report will include data from 00:00:00</small>
                </div>
                <div class="date-input-group">
                    <label for="end-date">End Date:</label>
                    <input type="date" id="end-date" class="date-input" />
                    <small class="date-help">Report will include data until 23:59:59</small>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn btn-secondary" id="cancel-date-range">Cancel</button>
            <button class="btn btn-primary" id="confirm-date-range" disabled>Generate Report</button>
        </div>
    </div>
</div>

{% endblock %}