{% extends 'base.html' %}
{% block title %}Sales Report{% endblock %}
{% block content %}
<div class="container py-4">
    <h2 class="mb-4">Sales Report</h2>
    <form method="post" class="mb-4" id="salesReportForm">
        <div class="row g-3 align-items-end">
            <div class="col-md-3">
                <label class="form-label">Party/Customer</label>
                <select name="parties" class="form-select" multiple></select>
            </div>
            <div class="col-md-3">
                <label class="form-label">Item</label>
                <select name="items" class="form-select" multiple></select>
            </div>
            <div class="col-md-2">
                <label class="form-label">Date From</label>
                <input type="date" name="date_from" class="form-control" value="{{ filters.date_from }}">
            </div>
            <div class="col-md-2">
                <label class="form-label">Date To</label>
                <input type="date" name="date_to" class="form-control" value="{{ filters.date_to }}">
            </div>
            <div class="col-md-2">
                <button type="submit" class="btn btn-primary w-100">
                    <i class="fas fa-search"></i> Show Report
                </button>
            </div>
        </div>
    </form>
    <div id="loadingSpinner" class="text-center my-4" style="display:none;">
        <div class="spinner-border text-primary" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
    </div>
    <div class="table-responsive">
        <button id="exportExcel" class="btn btn-success mb-2"><i class="fas fa-file-excel"></i> Export to Excel</button>
        <table id="salesTable" class="table table-bordered table-striped">
            <thead class="table-dark">
                <tr>
                    <th>Date</th>
                    <th>Customer</th>
                    <th>Size</th>
                    <th>Colour</th>
                    <th>Micron</th>
                    <th>Qty</th>
                    <th>Rate</th>
                    <th>Type</th>
                </tr>
                <tr>
                    <th><input type="text" placeholder="Search Date" class="form-control form-control-sm column-search" /></th>
                    <th><input type="text" placeholder="Search Customer" class="form-control form-control-sm column-search" /></th>
                    <th><input type="text" placeholder="Search Size" class="form-control form-control-sm column-search" /></th>
                    <th><input type="text" placeholder="Search Colour" class="form-control form-control-sm column-search" /></th>
                    <th><input type="text" placeholder="Search Micron" class="form-control form-control-sm column-search" /></th>
                    <th><input type="text" placeholder="Search Qty" class="form-control form-control-sm column-search" /></th>
                    <th><input type="text" placeholder="Search Rate" class="form-control form-control-sm column-search" /></th>
                    <th><input type="text" placeholder="Search Type" class="form-control form-control-sm column-search" /></th>
                </tr>
            </thead>
            <tbody>
                {% for row in sales_data %}
                <tr>
                    <td>{{ row[0] }}</td>
                    <td>{{ row[1] }}</td>
                    <td>{{ row[2] }}</td>
                    <td>{{ row[3] }}</td>
                    <td>{{ row[4] }}</td>
                    <td>{{ row[5] }}</td>
                    <td>{{ row[6] }}</td>
                    <td>{{ row[7] }}</td>
                </tr>
                {% endfor %}
                {# No data row removed for DataTables compatibility #}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}
{% block scripts %}
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/dataTables.bootstrap5.min.css" />
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/dataTables.bootstrap5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
<script>
$(document).ready(function() {
    // Party/Customer select2 with AJAX
    $('select[name="parties"]').select2({
        placeholder: 'Select Party',
        allowClear: true,
        ajax: {
            url: '/api/customers/search',
            dataType: 'json',
            delay: 250,
            data: function(params) {
                return { term: params.term };
            },
            processResults: function(data) {
                return {
                    results: data.map(function(name) {
                        return { id: name, text: name };
                    })
                };
            }
        }
    });
    // Item select2 with AJAX
    $('select[name="items"]').select2({
        placeholder: 'Select Item',
        allowClear: true,
        ajax: {
            url: '/api/sales_items/search',
            dataType: 'json',
            delay: 250,
            data: function(params) {
                return { term: params.term };
            },
            processResults: function(data) {
                return {
                    results: data.map(function(item) {
                        return { id: item.value, text: item.label };
                    })
                };
            }
        }
    });
    // DataTable
    var table = $('#salesTable').DataTable({
        responsive: true,
        ordering: true,
        searching: true,
        paging: true,
        info: true,
        language: { "emptyTable": "No data found." },
        initComplete: function () {
            // Per-column search
            this.api().columns().every(function () {
                var that = this;
                $('input', this.header()).on('keyup change clear', function () {
                    if (that.search() !== this.value) {
                        that.search(this.value).draw();
                    }
                });
            });
        }
    });
    // Export to Excel
    $('#exportExcel').on('click', function() {
        var wb = XLSX.utils.table_to_book(document.getElementById('salesTable'), {sheet:"Sales Report"});
        XLSX.writeFile(wb, 'Sales_Report.xlsx');
    });
    // Loading spinner on form submit
    $('#salesReportForm').on('submit', function() {
        $('#loadingSpinner').show();
    });
});
</script>
{% endblock %}