{% extends 'base.html' %}
{% load static %}

{% block page_title %}Sales Reports{% endblock %}

{% block header_actions %}
<div class="btn-group me-2">
    <button type="button" class="btn btn-sm btn-primary" onclick="printReport()">
        <i class="fas fa-print me-1"></i> Print
    </button>
    <button type="button" class="btn btn-sm btn-success" onclick="exportSales()">
        <i class="fas fa-file-export me-1"></i> Export
    </button>
    <a href="{% url 'dashboard' %}" class="btn btn-sm btn-outline-secondary">
        <i class="fas fa-arrow-left me-1"></i> Back
    </a>
</div>
{% endblock %}

{% block content %}
<div class="row mb-4">
    <div class="col-12">
        <div class="card shadow">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0"><i class="fas fa-filter me-2"></i>Report Filters</h5>
            </div>
            <div class="card-body">
                <form method="get" id="reportFilterForm" class="row g-3">
                    <div class="col-md-3">
                        <label for="start_date" class="form-label">Start Date</label>
                        <input type="date" class="form-control" id="start_date" name="start_date" 
                               value="{{ request.GET.start_date }}">
                    </div>
                    <div class="col-md-3">
                        <label for="end_date" class="form-label">End Date</label>
                        <input type="date" class="form-control" id="end_date" name="end_date"
                               value="{{ request.GET.end_date }}">
                    </div>
                    <div class="col-md-3">
                        <label for="product_id" class="form-label">Product</label>
                        <select class="form-select" id="product_id" name="product_id">
                            <option value="">All Products</option>
                            {% for product in products %}
                            <option value="{{ product.id }}" 
                                    {% if request.GET.product_id == product.id|stringformat:"i" %}selected{% endif %}>
                                {{ product.name }}
                            </option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label for="payment_method" class="form-label">Payment Method</label>
                        <select class="form-select" id="payment_method" name="payment_method">
                            <option value="">All Methods</option>
                            <option value="cash" {% if request.GET.payment_method == 'cash' %}selected{% endif %}>Cash</option>
                            <option value="mpesa" {% if request.GET.payment_method == 'mpesa' %}selected{% endif %}>M-Pesa</option>
                            <option value="card" {% if request.GET.payment_method == 'card' %}selected{% endif %}>Card</option>
                            <option value="credit" {% if request.GET.payment_method == 'credit' %}selected{% endif %}>Credit</option>
                        </select>
                    </div>
                    <div class="col-12">
                        <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                            <button type="submit" class="btn btn-primary me-md-2">
                                <i class="fas fa-filter me-1"></i> Apply Filters
                            </button>
                            <a href="{% url 'sales_report' %}" class="btn btn-outline-secondary">
                                <i class="fas fa-times me-1"></i> Clear Filters
                            </a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Summary Cards -->
<div class="row mb-4">
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card stat-card border-left-primary h-100">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs fw-bold text-primary text-uppercase mb-1">
                            Total Revenue
                        </div>
                        <div class="h5 mb-0 fw-bold">KSh {{ total_amount|default:"0.00"|floatformat:2 }}</div>
                        <div class="text-muted">From {{ sales.count }} sales</div>
                    </div>
                    <div class="col-auto">
                        <div class="stat-icon bg-primary text-white">
                            <i class="fas fa-money-bill-wave"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card stat-card border-left-success h-100">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs fw-bold text-success text-uppercase mb-1">
                            Total Quantity
                        </div>
                        <div class="h5 mb-0 fw-bold">{{ total_quantity|default:"0" }}</div>
                        <div class="text-muted">Units sold</div>
                    </div>
                    <div class="col-auto">
                        <div class="stat-icon bg-success text-white">
                            <i class="fas fa-box"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card stat-card border-left-info h-100">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs fw-bold text-info text-uppercase mb-1">
                            Average Sale
                        </div>
                        <div class="h5 mb-0 fw-bold">
                            {% if sales.count > 0 %}
                            KSh {{ average_sale|default:"0.00"|floatformat:2 }}
                            {% else %}
                            KSh 0.00
                            {% endif %}
                        </div>
                        <div class="text-muted">Per transaction</div>
                    </div>
                    <div class="col-auto">
                        <div class="stat-icon bg-info text-white">
                            <i class="fas fa-calculator"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card stat-card border-left-warning h-100">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs fw-bold text-warning text-uppercase mb-1">
                            Top Product
                        </div>
                        <div class="h5 mb-0 fw-bold">
                            {% if product_sales.0 %}
                            {{ product_sales.0.product__name|truncatechars:15 }}
                            {% else %}
                            N/A
                            {% endif %}
                        </div>
                        <div class="text-muted">
                            {% if product_sales.0 %}
                            {{ product_sales.0.total_quantity }} units
                            {% endif %}
                        </div>
                    </div>
                    <div class="col-auto">
                        <div class="stat-icon bg-warning text-white">
                            <i class="fas fa-chart-line"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <!-- Sales Table -->
    <div class="col-lg-8 mb-4">
        <div class="card shadow">
            <div class="card-header bg-white d-flex justify-content-between align-items-center">
                <h5 class="mb-0"><i class="fas fa-shopping-cart me-2"></i>Sales Transactions</h5>
                <span class="badge bg-primary">{{ sales.count }} records</span>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover data-table">
                        <thead class="table-light">
                            <tr>
                                <th>Date & Time</th>
                                <th>Product</th>
                                <th>Quantity</th>
                                <th>Unit Price</th>
                                <th>Total</th>
                                <th>Payment</th>
                                <th>Customer</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for sale in sales %}
                            <tr>
                                <td>
                                    <div>
                                        {{ sale.sale_date|date:"M d, Y" }}
                                        <small class="text-muted d-block">{{ sale.sale_date|date:"H:i" }}</small>
                                    </div>
                                </td>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <div class="rounded bg-secondary text-white d-flex align-items-center justify-content-center me-2" 
                                             style="width: 30px; height: 30px;">
                                            <i class="fas fa-box"></i>
                                        </div>
                                        <div>
                                            <strong>{{ sale.product.name }}</strong>
                                            <small class="text-muted d-block">SKU: {{ sale.product.sku }}</small>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <span class="badge bg-info">{{ sale.quantity }}</span>
                                </td>
                                <td>
                                    <strong>KSh {{ sale.unit_price|floatformat:2 }}</strong>
                                </td>
                                <td>
                                    <strong class="text-success">KSh {{ sale.total_amount|floatformat:2 }}</strong>
                                </td>
                                <td>
                                    {% if sale.payment_method == 'cash' %}
                                    <span class="badge bg-success">Cash</span>
                                    {% elif sale.payment_method == 'mpesa' %}
                                    <span class="badge bg-primary">M-Pesa</span>
                                    {% elif sale.payment_method == 'card' %}
                                    <span class="badge bg-warning">Card</span>
                                    {% else %}
                                    <span class="badge bg-secondary">{{ sale.payment_method }}</span>
                                    {% endif %}
                                </td>
                                <td>
                                    {% if sale.customer_name %}
                                    <div>
                                        <strong>{{ sale.customer_name }}</strong>
                                        {% if sale.customer_phone %}
                                        <small class="text-muted d-block">{{ sale.customer_phone }}</small>
                                        {% endif %}
                                    </div>
                                    {% else %}
                                    <span class="text-muted">Walk-in</span>
                                    {% endif %}
                                </td>
                                <td>
                                    <div class="btn-group btn-group-sm">
                                        <button class="btn btn-outline-primary btn-action" 
                                                onclick="viewSaleDetails({{ sale.id }})"
                                                title="View Details">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                        <button class="btn btn-outline-danger btn-action" 
                                                onclick="deleteSale({{ sale.id }})"
                                                title="Delete">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="8" class="text-center py-4">
                                    <i class="fas fa-chart-bar fa-3x text-muted mb-3"></i>
                                    <h5>No sales records found</h5>
                                    <p class="text-muted">Try adjusting your filters or make your first sale.</p>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Charts and Analysis -->
    <div class="col-lg-4 mb-4">
        <!-- Product Sales Breakdown -->
        <div class="card shadow mb-4">
            <div class="card-header bg-white">
                <h5 class="mb-0"><i class="fas fa-chart-pie me-2"></i>Product Sales</h5>
            </div>
            <div class="card-body">
                <div class="chart-container" style="height: 250px;">
                    <canvas id="productSalesChart"></canvas>
                </div>
                <div class="mt-3">
                    <table class="table table-sm">
                        <thead>
                            <tr>
                                <th>Product</th>
                                <th class="text-end">Quantity</th>
                                <th class="text-end">Revenue</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for item in product_sales|slice:":5" %}
                            <tr>
                                <td>{{ item.product__name|truncatechars:20 }}</td>
                                <td class="text-end">{{ item.total_quantity }}</td>
                                <td class="text-end">KSh {{ item.total_amount|floatformat:2 }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        
        <!-- Payment Method Breakdown -->
        <div class="card shadow">
            <div class="card-header bg-white">
                <h5 class="mb-0"><i class="fas fa-credit-card me-2"></i>Payment Methods</h5>
            </div>
            <div class="card-body">
                <div class="chart-container" style="height: 200px;">
                    <canvas id="paymentMethodChart"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- View Sale Details Modal -->
<div class="modal fade" id="saleDetailsModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title">
                    <i class="fas fa-receipt me-2"></i>Sale Details
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div id="saleDetailsContent">
                    <!-- Sale details will be loaded here -->
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" onclick="printReceipt()">
                    <i class="fas fa-print me-1"></i> Print Receipt
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteSaleModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title">
                    <i class="fas fa-exclamation-triangle me-2"></i>Confirm Delete
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p id="deleteSaleMessage">Are you sure you want to delete this sale record?</p>
                <div class="alert alert-warning">
                    <i class="fas fa-exclamation-circle me-2"></i>
                    <strong>Warning:</strong> Deleting a sale will restore the product stock.
                    This action cannot be undone.
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-danger" id="confirmSaleDeleteBtn">
                    <i class="fas fa-trash me-1"></i> Delete
                </button>
            </div>
        </div>
    </div>
</div>

<style>
    .stat-card {
        border-radius: 10px;
        border: none;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    .stat-icon {
        width: 50px;
        height: 50px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
    }
    .btn-action {
        padding: 0.25rem 0.5rem;
        font-size: 0.875rem;
        border-radius: 0.2rem;
    }
    .chart-container {
        position: relative;
    }
</style>

<script>
    // CSRF Token setup
    function getCookie(name) {
        let cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            const cookies = document.cookie.split(';');
            for (let i = 0; i < cookies.length; i++) {
                const cookie = cookies[i].trim();
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
    
    const csrftoken = getCookie('csrftoken');
    
    // Helper function to show notifications
    function showNotification(message, type = 'success', duration = 5000) {
        const alertClass = {
            'success': 'alert-success',
            'danger': 'alert-danger',
            'warning': 'alert-warning',
            'info': 'alert-info'
        }[type] || 'alert-info';
        
        const alertId = 'alert-' + Date.now();
        const alertHtml = `
            <div id="${alertId}" class="alert ${alertClass} alert-dismissible fade show" role="alert" 
                 style="position: fixed; top: 20px; right: 20px; z-index: 9999; min-width: 300px;">
                ${message}
                <button type="button" class="btn-close" onclick="$('#${alertId}').alert('close')"></button>
            </div>
        `;
        
        $('body').append(alertHtml);
        
        setTimeout(function() {
            $(`#${alertId}`).alert('close');
        }, duration);
    }
    
    // Initialize date pickers to default values
    $(document).ready(function() {
        // Set default dates if not set
        if (!$('#start_date').val()) {
            const today = new Date();
            const firstDay = new Date(today.getFullYear(), today.getMonth(), 1);
            $('#start_date').val(firstDay.toISOString().split('T')[0]);
        }
        
        if (!$('#end_date').val()) {
            const today = new Date();
            $('#end_date').val(today.toISOString().split('T')[0]);
        }
        
        // Initialize DataTables
        $('.data-table').DataTable({
            pageLength: 25,
            responsive: true,
            dom: '<"row"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6"f>>rt<"row"<"col-sm-12 col-md-6"i><"col-sm-12 col-md-6"p>>',
            language: {
                search: "_INPUT_",
                searchPlaceholder: "Search sales...",
                lengthMenu: "Show _MENU_ entries",
                info: "Showing _START_ to _END_ of _TOTAL_ entries",
                infoEmpty: "Showing 0 to 0 of 0 entries",
                infoFiltered: "(filtered from _MAX_ total entries)",
                paginate: {
                    first: "First",
                    last: "Last",
                    next: "Next",
                    previous: "Previous"
                }
            },
            columnDefs: [
                { orderable: false, targets: -1 } // Make actions column not sortable
            ]
        });
        
        // Initialize charts
        initializeCharts();
    });
    
    // Initialize Charts
    function initializeCharts() {
        // Product Sales Chart
        const productCtx = document.getElementById('productSalesChart').getContext('2d');
        const productLabels = [];
        const productData = [];
        const productColors = [];
        
        {% for item in product_sales|slice:":5" %}
        productLabels.push('{{ item.product__name|truncatechars:15 }}');
        productData.push({{ item.total_amount }});
        productColors.push(getRandomColor());
        {% endfor %}
        
        const productSalesChart = new Chart(productCtx, {
            type: 'doughnut',
            data: {
                labels: productLabels,
                datasets: [{
                    data: productData,
                    backgroundColor: productColors,
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom'
                    }
                }
            }
        });
        
        // Payment Method Chart
        const paymentCtx = document.getElementById('paymentMethodChart').getContext('2d');
        const paymentData = {
            cash: 0,
            mpesa: 0,
            card: 0,
            credit: 0
        };
        
        // You would need to pass payment method data from the view
        // For now, using dummy data
        const paymentMethodChart = new Chart(paymentCtx, {
            type: 'pie',
            data: {
                labels: ['Cash', 'M-Pesa', 'Card', 'Credit'],
                datasets: [{
                    data: [40, 35, 15, 10],
                    backgroundColor: [
                        '#28a745', // green
                        '#007bff', // blue
                        '#ffc107', // yellow
                        '#6c757d'  // gray
                    ]
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom'
                    }
                }
            }
        });
    }
    
    // Helper function for random colors
    function getRandomColor() {
        const colors = [
            '#007bff', '#28a745', '#ffc107', '#dc3545',
            '#6c757d', '#17a2b8', '#6610f2', '#fd7e14',
            '#20c997', '#e83e8c'
        ];
        return colors[Math.floor(Math.random() * colors.length)];
    }
    
    // View sale details
    function viewSaleDetails(saleId) {
        $.ajax({
            url: `/api/sale-details/${saleId}/`,
            method: 'GET',
            success: function(sale) {
                const details = `
                    <div class="receipt">
                        <h6 class="text-center mb-3">SALE RECEIPT</h6>
                        <hr>
                        <div class="row mb-2">
                            <div class="col-6 text-muted">Receipt #</div>
                            <div class="col-6 text-end">${sale.id}</div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-6 text-muted">Date</div>
                            <div class="col-6 text-end">${new Date(sale.sale_date).toLocaleString()}</div>
                        </div>
                        <hr>
                        
                        <div class="row mb-2">
                            <div class="col-6">
                                <strong>${sale.product_name}</strong>
                                <small class="text-muted d-block">SKU: ${sale.product_sku}</small>
                            </div>
                            <div class="col-6 text-end">
                                <div>${sale.quantity} × KSh ${parseFloat(sale.unit_price).toFixed(2)}</div>
                            </div>
                        </div>
                        <hr>
                        
                        <div class="row mb-2">
                            <div class="col-6"><strong>Subtotal</strong></div>
                            <div class="col-6 text-end">KSh ${parseFloat(sale.total_amount).toFixed(2)}</div>
                        </div>
                        
                        <div class="row mb-2">
                            <div class="col-6 text-muted">Payment Method</div>
                            <div class="col-6 text-end">
                                <span class="badge ${sale.payment_method === 'cash' ? 'bg-success' : 
                                                   sale.payment_method === 'mpesa' ? 'bg-primary' : 
                                                   sale.payment_method === 'card' ? 'bg-warning' : 'bg-secondary'}">
                                    ${sale.payment_method}
                                </span>
                            </div>
                        </div>
                        
                        ${sale.customer_name ? `
                        <hr>
                        <div class="row mb-2">
                            <div class="col-6 text-muted">Customer</div>
                            <div class="col-6 text-end">${sale.customer_name}</div>
                        </div>
                        ${sale.customer_phone ? `
                        <div class="row mb-2">
                            <div class="col-6 text-muted">Phone</div>
                            <div class="col-6 text-end">${sale.customer_phone}</div>
                        </div>
                        ` : ''}
                        ` : ''}
                        
                        <hr>
                        <div class="row mb-2">
                            <div class="col-6"><h5>TOTAL</h5></div>
                            <div class="col-6 text-end"><h5>KSh ${parseFloat(sale.total_amount).toFixed(2)}</h5></div>
                        </div>
                        
                        ${sale.notes ? `
                        <hr>
                        <div class="row">
                            <div class="col-12">
                                <small class="text-muted">Notes:</small>
                                <p>${sale.notes}</p>
                            </div>
                        </div>
                        ` : ''}
                    </div>
                `;
                
                $('#saleDetailsContent').html(details);
                $('#saleDetailsModal').modal('show');
            },
            error: function() {
                showNotification('Error loading sale details', 'danger');
            }
        });
    }
    
    // Print receipt
    function printReceipt() {
        const receiptContent = $('#saleDetailsContent').html();
        const printWindow = window.open('', '_blank');
        printWindow.document.write(`
            <!DOCTYPE html>
            <html>
            <head>
                <title>Print Receipt</title>
                <style>
                    body { font-family: Arial, sans-serif; padding: 20px; }
                    .receipt { max-width: 300px; margin: 0 auto; }
                    .text-center { text-align: center; }
                    .text-end { text-align: right; }
                    hr { border: none; border-top: 1px solid #ccc; margin: 10px 0; }
                    .text-muted { color: #6c757d; }
                </style>
            </head>
            <body>
                ${receiptContent}
                <script>
                    window.onload = function() {
                        window.print();
                        setTimeout(function() {
                            window.close();
                        }, 1000);
                    }
                <\/script>
            </body>
            </html>
        `);
        printWindow.document.close();
    }
    
    // Delete sale
    let saleToDelete = null;
    
    function deleteSale(saleId) {
        saleToDelete = saleId;
        $('#deleteSaleMessage').text('Are you sure you want to delete this sale record?');
        $('#deleteSaleModal').modal('show');
    }
    
    $('#confirmSaleDeleteBtn').click(function() {
        if (!saleToDelete) return;
        
        // Show loading state
        $(this).prop('disabled', true).html('<span class="loading-spinner"></span> Deleting...');
        
        $.ajax({
            url: `/api/delete-sale/${saleToDelete}/`,
            method: 'POST',
            headers: {
                'X-CSRFToken': csrftoken
            },
            success: function(response) {
                if (response.success) {
                    showNotification(response.message, 'success');
                    
                    // Close modal and reload
                    $('#deleteSaleModal').modal('hide');
                    
                    // Reload page after a short delay
                    setTimeout(function() {
                        location.reload();
                    }, 1000);
                    
                } else {
                    showNotification(response.message, 'danger');
                    $('#deleteSaleModal').modal('hide');
                }
            },
            error: function(xhr, status, error) {
                showNotification('An error occurred: ' + error, 'danger');
                $('#deleteSaleModal').modal('hide');
            },
            complete: function() {
                // Reset delete button
                $('#confirmSaleDeleteBtn').prop('disabled', false).html('<i class="fas fa-trash me-1"></i> Delete');
            }
        });
    });
    
    // Export sales data
    function exportSales() {
        // Get current filter parameters
        const params = new URLSearchParams(window.location.search);
        
        // Create export URL
        let exportUrl = `/api/sales-export/?${params.toString()}`;
        
        // Add timestamp to avoid caching
        exportUrl += `&_=${Date.now()}`;
        
        // Create temporary link and trigger download
        const link = document.createElement('a');
        link.href = exportUrl;
        link.download = `sales_report_${new Date().toISOString().split('T')[0]}.csv`;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        
        showNotification('Export started. Your download will begin shortly.', 'info');
    }
    
    // Print report
    function printReport() {
        window.print();
    }
    
    // Set default dates for quick filters
    function setQuickFilter(range) {
        const today = new Date();
        let startDate = new Date();
        
        switch(range) {
            case 'today':
                startDate = today;
                break;
            case 'yesterday':
                startDate.setDate(today.getDate() - 1);
                break;
            case 'week':
                startDate.setDate(today.getDate() - 7);
                break;
            case 'month':
                startDate.setMonth(today.getMonth() - 1);
                break;
            case 'year':
                startDate.setFullYear(today.getFullYear() - 1);
                break;
        }
        
        $('#start_date').val(startDate.toISOString().split('T')[0]);
        $('#end_date').val(today.toISOString().split('T')[0]);
        $('#reportFilterForm').submit();
    }
</script>

<!-- Quick Filter Buttons -->
<div class="row mb-3">
    <div class="col-12">
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-outline-primary btn-sm" onclick="setQuickFilter('today')">
                Today
            </button>
            <button type="button" class="btn btn-outline-primary btn-sm" onclick="setQuickFilter('yesterday')">
                Yesterday
            </button>
            <button type="button" class="btn btn-outline-primary btn-sm" onclick="setQuickFilter('week')">
                Last 7 Days
            </button>
            <button type="button" class="btn btn-outline-primary btn-sm" onclick="setQuickFilter('month')">
                Last 30 Days
            </button>
            <button type="button" class="btn btn-outline-primary btn-sm" onclick="setQuickFilter('year')">
                Last Year
            </button>
        </div>
    </div>
</div>
{% endblock %}