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

{% block title %}Inventory Reports - {{ block.super }}{% endblock %}

{% block css %}
<style>
.reports-header {
    background: linear-gradient(135deg, #6f42c1 0%, #e83e8c 100%);
    color: white;
    border-radius: 10px;
    padding: 30px;
    margin-bottom: 30px;
}
.report-card {
    background: white;
    border-radius: 8px;
    padding: 20px;
    margin: 15px 0;
    border: 1px solid #dee2e6;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    cursor: pointer;
}
.report-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    border-color: #007bff;
}
.report-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-right: 20px;
}
.icon-stock { background: #e3f2fd; color: #1976d2; }
.icon-valuation { background: #f3e5f5; color: #7b1fa2; }
.icon-movement { background: #e8f5e8; color: #388e3c; }
.icon-expiry { background: #fff3e0; color: #f57c00; }
.icon-supplier { background: #fce4ec; color: #c2185b; }
.icon-usage { background: #e0f2f1; color: #00796b; }
.icon-abc { background: #fff8e1; color: #f9a825; }
.icon-reorder { background: #ffebee; color: #d32f2f; }
.report-title {
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
}
.report-description {
    color: #6c757d;
    font-size: 0.9rem;
    margin-bottom: 15px;
}
.report-stats {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
}
.stat-item {
    text-align: center;
}
.stat-value {
    font-weight: bold;
    color: #007bff;
    font-size: 1.1rem;
}
.stat-label {
    color: #6c757d;
    font-size: 0.8rem;
}
.report-actions {
    display: flex;
    gap: 10px;
}
.filter-panel {
    background: white;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.quick-reports {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 15px;
    margin: 20px 0;
}
.quick-report-btn {
    margin: 5px;
    border-radius: 20px;
}
.report-preview {
    background: white;
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.chart-container {
    height: 300px;
    margin: 20px 0;
    background: #f8f9fa;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6c757d;
}
.data-table {
    margin: 20px 0;
}
.data-table table {
    width: 100%;
    border-collapse: collapse;
}
.data-table th,
.data-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #dee2e6;
}
.data-table th {
    background: #f8f9fa;
    font-weight: bold;
    color: #495057;
}
.data-table tr:hover {
    background: #f8f9fa;
}
.export-options {
    background: white;
    border-radius: 8px;
    padding: 15px;
    margin: 15px 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.schedule-options {
    background: #e3f2fd;
    border: 1px solid #bbdefb;
    border-radius: 6px;
    padding: 15px;
    margin: 15px 0;
}
.report-frequency {
    display: flex;
    gap: 15px;
    margin: 10px 0;
}
.frequency-option {
    flex: 1;
    text-align: center;
    padding: 10px;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.frequency-option:hover,
.frequency-option.active {
    background: #007bff;
    color: white;
    border-color: #007bff;
}
.report-category {
    margin: 30px 0;
}
.category-title {
    font-size: 1.2rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #007bff;
}
.recent-reports {
    background: white;
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.recent-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #dee2e6;
}
.recent-item:last-child {
    border-bottom: none;
}
.recent-info {
    flex: 1;
}
.recent-name {
    font-weight: bold;
    color: #333;
}
.recent-date {
    color: #6c757d;
    font-size: 0.9rem;
}
.recent-actions {
    display: flex;
    gap: 5px;
}
</style>
{% endblock %}

{% block content %}
<div class="content">
    <div class="container-fluid">
        <!-- Page Header -->
        <div class="row">
            <div class="col-12">
                <div class="page-header">
                    <div class="page-title">
                        <h4><i class="fas fa-chart-bar"></i> Inventory Reports</h4>
                        <h6>Generate comprehensive inventory reports and analytics</h6>
                    </div>
                    <div class="page-btn">
                        <button class="btn btn-info me-2" data-bs-toggle="modal" data-bs-target="#customReportModal">
                            <i class="fas fa-plus"></i> Custom Report
                        </button>
                        <button class="btn btn-success me-2" id="scheduleReport">
                            <i class="fas fa-clock"></i> Schedule Report
                        </button>
                        <button class="btn btn-primary" id="viewHistory">
                            <i class="fas fa-history"></i> Report History
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Reports Header -->
        <div class="row">
            <div class="col-12">
                <div class="reports-header">
                    <div class="row">
                        <div class="col-md-8">
                            <h5><i class="fas fa-analytics"></i> Inventory Analytics Dashboard</h5>
                            <p>Generate detailed reports on stock levels, valuations, movements, and performance metrics</p>
                        </div>
                        <div class="col-md-4">
                            <div class="text-end">
                                <h6>Total Items: <span class="badge bg-light text-dark">2,847</span></h6>
                                <h6>Total Value: <span class="badge bg-light text-dark">$1,234,567</span></h6>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Quick Reports -->
        <div class="row">
            <div class="col-12">
                <div class="quick-reports">
                    <h6><i class="fas fa-bolt"></i> Quick Reports</h6>
                    <div class="d-flex flex-wrap">
                        <button class="btn btn-sm btn-outline-primary quick-report-btn" data-report="daily-summary">
                            <i class="fas fa-calendar-day"></i> Daily Summary
                        </button>
                        <button class="btn btn-sm btn-outline-success quick-report-btn" data-report="low-stock">
                            <i class="fas fa-exclamation-triangle"></i> Low Stock Alert
                        </button>
                        <button class="btn btn-sm btn-outline-warning quick-report-btn" data-report="expiring-items">
                            <i class="fas fa-clock"></i> Expiring Items
                        </button>
                        <button class="btn btn-sm btn-outline-info quick-report-btn" data-report="top-movers">
                            <i class="fas fa-arrow-up"></i> Top Moving Items
                        </button>
                        <button class="btn btn-sm btn-outline-secondary quick-report-btn" data-report="dead-stock">
                            <i class="fas fa-pause"></i> Dead Stock
                        </button>
                        <button class="btn btn-sm btn-outline-danger quick-report-btn" data-report="variance">
                            <i class="fas fa-balance-scale"></i> Stock Variance
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <!-- Report Categories -->
            <div class="col-md-8">
                <!-- Stock Reports -->
                <div class="report-category">
                    <div class="category-title">
                        <i class="fas fa-boxes"></i> Stock Reports
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="report-card" data-report="stock-levels">
                                <div class="d-flex">
                                    <div class="report-icon icon-stock">
                                        <i class="fas fa-layer-group"></i>
                                    </div>
                                    <div class="flex-grow-1">
                                        <div class="report-title">Current Stock Levels</div>
                                        <div class="report-description">
                                            Comprehensive overview of current inventory levels across all locations
                                        </div>
                                        <div class="report-stats">
                                            <div class="stat-item">
                                                <div class="stat-value">2,847</div>
                                                <div class="stat-label">Total Items</div>
                                            </div>
                                            <div class="stat-item">
                                                <div class="stat-value">156</div>
                                                <div class="stat-label">Low Stock</div>
                                            </div>
                                            <div class="stat-item">
                                                <div class="stat-value">23</div>
                                                <div class="stat-label">Critical</div>
                                            </div>
                                        </div>
                                        <div class="report-actions">
                                            <button class="btn btn-sm btn-primary">Generate</button>
                                            <button class="btn btn-sm btn-outline-secondary">Preview</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="report-card" data-report="stock-valuation">
                                <div class="d-flex">
                                    <div class="report-icon icon-valuation">
                                        <i class="fas fa-dollar-sign"></i>
                                    </div>
                                    <div class="flex-grow-1">
                                        <div class="report-title">Stock Valuation Report</div>
                                        <div class="report-description">
                                            Financial valuation of inventory using FIFO, LIFO, or weighted average methods
                                        </div>
                                        <div class="report-stats">
                                            <div class="stat-item">
                                                <div class="stat-value">$1.2M</div>
                                                <div class="stat-label">Total Value</div>
                                            </div>
                                            <div class="stat-item">
                                                <div class="stat-value">$45K</div>
                                                <div class="stat-label">This Month</div>
                                            </div>
                                            <div class="stat-item">
                                                <div class="stat-value">+5.2%</div>
                                                <div class="stat-label">Growth</div>
                                            </div>
                                        </div>
                                        <div class="report-actions">
                                            <button class="btn btn-sm btn-primary">Generate</button>
                                            <button class="btn btn-sm btn-outline-secondary">Preview</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Movement Reports -->
                <div class="report-category">
                    <div class="category-title">
                        <i class="fas fa-exchange-alt"></i> Movement Reports
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="report-card" data-report="stock-movement">
                                <div class="d-flex">
                                    <div class="report-icon icon-movement">
                                        <i class="fas fa-arrows-alt"></i>
                                    </div>
                                    <div class="flex-grow-1">
                                        <div class="report-title">Stock Movement Analysis</div>
                                        <div class="report-description">
                                            Track inventory movements, receipts, issues, and transfers
                                        </div>
                                        <div class="report-stats">
                                            <div class="stat-item">
                                                <div class="stat-value">1,234</div>
                                                <div class="stat-label">Transactions</div>
                                            </div>
                                            <div class="stat-item">
                                                <div class="stat-value">567</div>
                                                <div class="stat-label">Issues</div>
                                            </div>
                                            <div class="stat-item">
                                                <div class="stat-value">89</div>
                                                <div class="stat-label">Receipts</div>
                                            </div>
                                        </div>
                                        <div class="report-actions">
                                            <button class="btn btn-sm btn-primary">Generate</button>
                                            <button class="btn btn-sm btn-outline-secondary">Preview</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="report-card" data-report="usage-analysis">
                                <div class="d-flex">
                                    <div class="report-icon icon-usage">
                                        <i class="fas fa-chart-line"></i>
                                    </div>
                                    <div class="flex-grow-1">
                                        <div class="report-title">Usage Pattern Analysis</div>
                                        <div class="report-description">
                                            Analyze consumption patterns and forecast future requirements
                                        </div>
                                        <div class="report-stats">
                                            <div class="stat-item">
                                                <div class="stat-value">78%</div>
                                                <div class="stat-label">Accuracy</div>
                                            </div>
                                            <div class="stat-item">
                                                <div class="stat-value">456</div>
                                                <div class="stat-label">Fast Movers</div>
                                            </div>
                                            <div class="stat-item">
                                                <div class="stat-value">123</div>
                                                <div class="stat-label">Slow Movers</div>
                                            </div>
                                        </div>
                                        <div class="report-actions">
                                            <button class="btn btn-sm btn-primary">Generate</button>
                                            <button class="btn btn-sm btn-outline-secondary">Preview</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Compliance Reports -->
                <div class="report-category">
                    <div class="category-title">
                        <i class="fas fa-shield-alt"></i> Compliance Reports
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="report-card" data-report="expiry-tracking">
                                <div class="d-flex">
                                    <div class="report-icon icon-expiry">
                                        <i class="fas fa-calendar-times"></i>
                                    </div>
                                    <div class="flex-grow-1">
                                        <div class="report-title">Expiry Tracking Report</div>
                                        <div class="report-description">
                                            Monitor expiration dates and manage product lifecycle
                                        </div>
                                        <div class="report-stats">
                                            <div class="stat-item">
                                                <div class="stat-value">45</div>
                                                <div class="stat-label">Expiring</div>
                                            </div>
                                            <div class="stat-item">
                                                <div class="stat-value">12</div>
                                                <div class="stat-label">Expired</div>
                                            </div>
                                            <div class="stat-item">
                                                <div class="stat-value">$8.5K</div>
                                                <div class="stat-label">At Risk</div>
                                            </div>
                                        </div>
                                        <div class="report-actions">
                                            <button class="btn btn-sm btn-primary">Generate</button>
                                            <button class="btn btn-sm btn-outline-secondary">Preview</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="report-card" data-report="abc-analysis">
                                <div class="d-flex">
                                    <div class="report-icon icon-abc">
                                        <i class="fas fa-sort-alpha-down"></i>
                                    </div>
                                    <div class="flex-grow-1">
                                        <div class="report-title">ABC Analysis Report</div>
                                        <div class="report-description">
                                            Categorize inventory based on value and importance
                                        </div>
                                        <div class="report-stats">
                                            <div class="stat-item">
                                                <div class="stat-value">285</div>
                                                <div class="stat-label">Class A</div>
                                            </div>
                                            <div class="stat-item">
                                                <div class="stat-value">854</div>
                                                <div class="stat-label">Class B</div>
                                            </div>
                                            <div class="stat-item">
                                                <div class="stat-value">1,708</div>
                                                <div class="stat-label">Class C</div>
                                            </div>
                                        </div>
                                        <div class="report-actions">
                                            <button class="btn btn-sm btn-primary">Generate</button>
                                            <button class="btn btn-sm btn-outline-secondary">Preview</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Supplier Reports -->
                <div class="report-category">
                    <div class="category-title">
                        <i class="fas fa-handshake"></i> Supplier Reports
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="report-card" data-report="supplier-performance">
                                <div class="d-flex">
                                    <div class="report-icon icon-supplier">
                                        <i class="fas fa-building"></i>
                                    </div>
                                    <div class="flex-grow-1">
                                        <div class="report-title">Supplier Performance</div>
                                        <div class="report-description">
                                            Evaluate supplier delivery times, quality, and reliability
                                        </div>
                                        <div class="report-stats">
                                            <div class="stat-item">
                                                <div class="stat-value">24</div>
                                                <div class="stat-label">Suppliers</div>
                                            </div>
                                            <div class="stat-item">
                                                <div class="stat-value">92%</div>
                                                <div class="stat-label">On-Time</div>
                                            </div>
                                            <div class="stat-item">
                                                <div class="stat-value">4.2</div>
                                                <div class="stat-label">Avg Rating</div>
                                            </div>
                                        </div>
                                        <div class="report-actions">
                                            <button class="btn btn-sm btn-primary">Generate</button>
                                            <button class="btn btn-sm btn-outline-secondary">Preview</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="report-card" data-report="reorder-points">
                                <div class="d-flex">
                                    <div class="report-icon icon-reorder">
                                        <i class="fas fa-redo"></i>
                                    </div>
                                    <div class="flex-grow-1">
                                        <div class="report-title">Reorder Point Analysis</div>
                                        <div class="report-description">
                                            Optimize reorder points and safety stock levels
                                        </div>
                                        <div class="report-stats">
                                            <div class="stat-item">
                                                <div class="stat-value">156</div>
                                                <div class="stat-label">Need Reorder</div>
                                            </div>
                                            <div class="stat-item">
                                                <div class="stat-value">23</div>
                                                <div class="stat-label">Critical</div>
                                            </div>
                                            <div class="stat-item">
                                                <div class="stat-value">$45K</div>
                                                <div class="stat-label">Order Value</div>
                                            </div>
                                        </div>
                                        <div class="report-actions">
                                            <button class="btn btn-sm btn-primary">Generate</button>
                                            <button class="btn btn-sm btn-outline-secondary">Preview</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Sidebar -->
            <div class="col-md-4">
                <!-- Export Options -->
                <div class="export-options">
                    <h6><i class="fas fa-download"></i> Export Options</h6>
                    <div class="d-grid gap-2">
                        <button class="btn btn-sm btn-outline-success">
                            <i class="fas fa-file-excel"></i> Export to Excel
                        </button>
                        <button class="btn btn-sm btn-outline-danger">
                            <i class="fas fa-file-pdf"></i> Export to PDF
                        </button>
                        <button class="btn btn-sm btn-outline-info">
                            <i class="fas fa-file-csv"></i> Export to CSV
                        </button>
                        <button class="btn btn-sm btn-outline-secondary">
                            <i class="fas fa-print"></i> Print Report
                        </button>
                    </div>
                </div>

                <!-- Schedule Options -->
                <div class="schedule-options">
                    <h6><i class="fas fa-clock"></i> Schedule Reports</h6>
                    <p>Automatically generate and email reports</p>
                    <div class="report-frequency">
                        <div class="frequency-option active">Daily</div>
                        <div class="frequency-option">Weekly</div>
                        <div class="frequency-option">Monthly</div>
                    </div>
                    <div class="form-group mb-3">
                        <label>Email Recipients</label>
                        <input type="email" class="form-control" placeholder="Enter email addresses">
                    </div>
                    <button class="btn btn-sm btn-primary w-100">
                        <i class="fas fa-calendar-plus"></i> Schedule Report
                    </button>
                </div>

                <!-- Recent Reports -->
                <div class="recent-reports">
                    <h6><i class="fas fa-history"></i> Recent Reports</h6>
                    <div class="recent-item">
                        <div class="recent-info">
                            <div class="recent-name">Stock Levels Report</div>
                            <div class="recent-date">Generated 2 hours ago</div>
                        </div>
                        <div class="recent-actions">
                            <button class="btn btn-sm btn-outline-primary">
                                <i class="fas fa-eye"></i>
                            </button>
                            <button class="btn btn-sm btn-outline-success">
                                <i class="fas fa-download"></i>
                            </button>
                        </div>
                    </div>
                    <div class="recent-item">
                        <div class="recent-info">
                            <div class="recent-name">Expiry Tracking</div>
                            <div class="recent-date">Generated yesterday</div>
                        </div>
                        <div class="recent-actions">
                            <button class="btn btn-sm btn-outline-primary">
                                <i class="fas fa-eye"></i>
                            </button>
                            <button class="btn btn-sm btn-outline-success">
                                <i class="fas fa-download"></i>
                            </button>
                        </div>
                    </div>
                    <div class="recent-item">
                        <div class="recent-info">
                            <div class="recent-name">ABC Analysis</div>
                            <div class="recent-date">Generated 3 days ago</div>
                        </div>
                        <div class="recent-actions">
                            <button class="btn btn-sm btn-outline-primary">
                                <i class="fas fa-eye"></i>
                            </button>
                            <button class="btn btn-sm btn-outline-success">
                                <i class="fas fa-download"></i>
                            </button>
                        </div>
                    </div>
                    <div class="recent-item">
                        <div class="recent-info">
                            <div class="recent-name">Supplier Performance</div>
                            <div class="recent-date">Generated 1 week ago</div>
                        </div>
                        <div class="recent-actions">
                            <button class="btn btn-sm btn-outline-primary">
                                <i class="fas fa-eye"></i>
                            </button>
                            <button class="btn btn-sm btn-outline-success">
                                <i class="fas fa-download"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Report Preview -->
                <div class="report-preview" style="display: none;">
                    <h6><i class="fas fa-eye"></i> Report Preview</h6>
                    <div class="chart-container">
                        <i class="fas fa-chart-bar fa-3x"></i><br>
                        Chart Preview Area
                    </div>
                    <div class="data-table">
                        <table>
                            <thead>
                                <tr>
                                    <th>Item</th>
                                    <th>Stock</th>
                                    <th>Value</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Sample Item 1</td>
                                    <td>150</td>
                                    <td>$1,500</td>
                                </tr>
                                <tr>
                                    <td>Sample Item 2</td>
                                    <td>75</td>
                                    <td>$750</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Custom Report Modal -->
<div class="modal fade" id="customReportModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="fas fa-plus"></i> Create Custom Report</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label>Report Name</label>
                                <input type="text" class="form-control" placeholder="Enter report name">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label>Report Type</label>
                                <select class="form-control">
                                    <option>Stock Analysis</option>
                                    <option>Financial Report</option>
                                    <option>Movement Analysis</option>
                                    <option>Compliance Report</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label>Date Range</label>
                                <select class="form-control">
                                    <option>Last 7 days</option>
                                    <option>Last 30 days</option>
                                    <option>Last 3 months</option>
                                    <option>Custom range</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label>Location Filter</label>
                                <select class="form-control" multiple>
                                    <option>Main Warehouse</option>
                                    <option>Pharmacy</option>
                                    <option>Emergency Department</option>
                                    <option>ICU</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="form-group mb-3">
                        <label>Include Fields</label>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="includeStock" checked>
                                    <label class="form-check-label" for="includeStock">Stock Levels</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="includeValue" checked>
                                    <label class="form-check-label" for="includeValue">Valuation</label>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="includeMovement">
                                    <label class="form-check-label" for="includeMovement">Movement Data</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="includeExpiry">
                                    <label class="form-check-label" for="includeExpiry">Expiry Dates</label>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="includeSupplier">
                                    <label class="form-check-label" for="includeSupplier">Supplier Info</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="includeCategory">
                                    <label class="form-check-label" for="includeCategory">Categories</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-info">Preview Report</button>
                <button type="button" class="btn btn-primary">Generate Report</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block js %}
<script>
$(document).ready(function() {
    // Report card clicks
    $('.report-card').click(function() {
        var reportType = $(this).data('report');
        $('.report-preview').show();
        console.log('Generating report:', reportType);
    });
    
    // Quick report buttons
    $('.quick-report-btn').click(function() {
        var reportType = $(this).data('report');
        alert('Generating ' + reportType + ' report...');
    });
    
    // Generate buttons
    $('.report-actions .btn-primary').click(function(e) {
        e.stopPropagation();
        var reportCard = $(this).closest('.report-card');
        var reportType = reportCard.data('report');
        alert('Generating ' + reportType + ' report...');
    });
    
    // Preview buttons
    $('.report-actions .btn-outline-secondary').click(function(e) {
        e.stopPropagation();
        $('.report-preview').show();
    });
    
    // Export buttons
    $('.export-options .btn').click(function() {
        var format = $(this).text().trim();
        alert('Exporting report as ' + format + '...');
    });
    
    // Frequency selection
    $('.frequency-option').click(function() {
        $('.frequency-option').removeClass('active');
        $(this).addClass('active');
    });
    
    // Schedule report
    $('#scheduleReport, .schedule-options .btn-primary').click(function() {
        var frequency = $('.frequency-option.active').text();
        var email = $('.schedule-options input[type="email"]').val();
        
        if (!email) {
            alert('Please enter email address for scheduled reports');
            return;
        }
        
        alert('Report scheduled for ' + frequency.toLowerCase() + ' delivery to ' + email);
    });
    
    // View history
    $('#viewHistory').click(function() {
        alert('Opening report history...');
    });
    
    // Recent report actions
    $('.recent-actions .btn-outline-primary').click(function() {
        alert('Opening report preview...');
    });
    
    $('.recent-actions .btn-outline-success').click(function() {
        alert('Downloading report...');
    });
    
    // Custom report modal
    $('#customReportModal .btn-info').click(function() {
        alert('Generating custom report preview...');
    });
    
    $('#customReportModal .btn-primary').click(function() {
        var reportName = $('#customReportModal input[type="text"]').val();
        if (!reportName) {
            alert('Please enter a report name');
            return;
        }
        
        alert('Generating custom report: ' + reportName);
        $('#customReportModal').modal('hide');
    });
});
</script>
{% endblock %}