{% extends "base.html" %}
{% block title %}Revenue Twin{% endblock %}
{% block page_title %}Revenue Twin{% endblock %}

{% block content %}
<div class="row g-4">
    <div class="col-lg-8">
        <div class="glass-card p-4" style="height: 400px;">
            <h5 class="mb-3" style="font-weight: 600;">Revenue Trends</h5>
            <div id="revenueChart" style="width: 100%; height: 330px;"></div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="glass-card p-4">
            <h5 class="mb-3" style="font-weight: 600;">Revenue Metrics</h5>
            <div class="mb-3">
                <small style="color: var(--text-secondary);">30-Day Revenue</small>
                <div style="font-size: 22px; font-weight: 700;">{{ summary.revenue_30d | format_currency }}</div>
            </div>
            <div class="mb-3">
                <small style="color: var(--text-secondary);">Profit Margin</small>
                <div style="font-size: 22px; font-weight: 700; color: #10B981;">{{ "%.1f"|format(summary.margin) }}%</div>
            </div>
            <div class="mb-3">
                <small style="color: var(--text-secondary);">30-Day Profit</small>
                <div style="font-size: 22px; font-weight: 700;">{{ summary.profit_30d | format_currency }}</div>
            </div>
        </div>
    </div>
</div>

<!-- Revenue Records Section -->
<div class="row g-4 mt-2">
    <div class="col-12">
        <div class="glass-card p-4">
            <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
                <h5 class="mb-0" style="font-weight: 600;">Revenue Records</h5>
                <div class="d-flex gap-2 flex-wrap">
                    <button class="btn btn-sm btn-outline-info" onclick="openImportCsvModal()">
                        <i class="fas fa-file-csv"></i> Import CSV
                    </button>
                    <button class="btn btn-sm btn-outline-info" onclick="openImportExcelModal()">
                        <i class="fas fa-file-excel"></i> Import Excel
                    </button>
                    <button class="btn btn-sm btn-outline-danger" onclick="confirmDeleteAll()">
                        <i class="fas fa-trash-alt"></i> Delete All
                    </button>
                    <button class="btn btn-sm" style="background: #00D4FF; color: #0f172a; font-weight: 600;" onclick="openAddModal()">
                        <i class="fas fa-plus"></i> Add Revenue
                    </button>
                </div>
            </div>

            <div class="table-responsive">
                <table class="table table-dark table-hover align-middle" style="background: transparent; border-color: rgba(255,255,255,0.05);">
                    <thead style="color: #94A3B8; border-bottom: 1px solid rgba(255,255,255,0.1);">
                        <tr>
                            <th>Date</th>
                            <th>Category</th>
                            <th>Subcategory</th>
                            <th>Amount</th>
                            <th>Description</th>
                            <th>Reference</th>
                            <th>Recurring</th>
                            <th style="width: 100px;">Actions</th>
                        </tr>
                    </thead>
                    <tbody id="revenueTableBody">
                        {% for record in records %}
                        <tr data-id="{{ record.id }}">
                            <td>{{ record.transaction_date }}</td>
                            <td>{{ record.category or '-' }}</td>
                            <td>{{ record.subcategory or '-' }}</td>
                            <td style="color: #00D4FF; font-weight: 600;">{{ currency_symbol }}{{ "{:,.2f}".format(record.amount) }}</td>
                            <td>{{ record.description or '-' }}</td>
                            <td><code style="color: #94A3B8;">{{ record.reference_number or '-' }}</code></td>
                            <td>
                                {% if record.is_recurring %}
                                    <span class="badge" style="background: rgba(139,92,246,0.2); color: #8B5CF6;">{{ record.recurring_frequency or 'Yes' }}</span>
                                {% else %}
                                    <span class="badge" style="background: rgba(255,255,255,0.05); color: #64748B;">No</span>
                                {% endif %}
                            </td>
                            <td>
                                <button class="btn btn-sm btn-link text-info p-1" onclick="openEditModal({{ record.id }})" title="Edit">
                                    <i class="fas fa-pencil-alt"></i>
                                </button>
                                <button class="btn btn-sm btn-link text-danger p-1" onclick="deleteRecord({{ record.id }})" title="Delete">
                                    <i class="fas fa-trash-alt"></i>
                                </button>
                            </td>
                        </tr>
                        {% else %}
                        <tr>
                            <td colspan="8" class="text-center py-4" style="color: #64748B;">No revenue records found. Add your first revenue record to get started.</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Add Revenue Modal -->
<div class="modal fade" id="addRevenueModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content glass-card" style="background: rgba(15,23,42,0.95); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.1);">
            <div class="modal-header" style="border-bottom: 1px solid rgba(255,255,255,0.1);">
                <h5 class="modal-title" style="font-weight: 600; color: #00D4FF;">Add Revenue Record</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="addRevenueForm">
                    <div class="row g-3">
                        <div class="col-md-4">
                            <label class="form-label" style="color: #94A3B8; font-size: 12px;">Transaction Date</label>
                            <input type="date" class="form-control" name="transaction_date" required style="background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #E2E8F0;">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label" style="color: #94A3B8; font-size: 12px;">Amount</label>
                            <div class="input-group">
                                <span class="input-group-text" style="background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #94A3B8;">{{ currency_symbol }}</span>
                                <input type="number" step="0.01" class="form-control" name="amount" required style="background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #E2E8F0;">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label" style="color: #94A3B8; font-size: 12px;">Reference Number</label>
                            <input type="text" class="form-control" name="reference_number" placeholder="e.g. INV-001" style="background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #E2E8F0;">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label" style="color: #94A3B8; font-size: 12px;">Category</label>
                            <input type="text" class="form-control" name="category" value="Revenue" required style="background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #E2E8F0;">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label" style="color: #94A3B8; font-size: 12px;">Subcategory</label>
                            <input type="text" class="form-control" name="subcategory" placeholder="e.g. Product Sales" style="background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #E2E8F0;">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label" style="color: #94A3B8; font-size: 12px;">Department</label>
                            <select class="form-select" name="department_id" style="background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #E2E8F0;">
                                <option value="">-- Select Department --</option>
                                {% for dept in departments %}
                                <option value="{{ dept.id }}">{{ dept.name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label" style="color: #94A3B8; font-size: 12px;">Account</label>
                            <select class="form-select" name="account_id" style="background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #E2E8F0;">
                                <option value="">-- Select Account --</option>
                                {% for acc in accounts %}
                                <option value="{{ acc.id }}">{{ acc.account_name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-12">
                            <label class="form-label" style="color: #94A3B8; font-size: 12px;">Description</label>
                            <textarea class="form-control" name="description" rows="2" placeholder="Brief description of the revenue source..." style="background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #E2E8F0;"></textarea>
                        </div>
                        <div class="col-md-4">
                            <div class="form-check mt-4">
                                <input class="form-check-input" type="checkbox" name="is_recurring" id="addIsRecurring" style="background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.2);">
                                <label class="form-check-label" for="addIsRecurring" style="color: #94A3B8;">Recurring?</label>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label" style="color: #94A3B8; font-size: 12px;">Frequency</label>
                            <select class="form-select" name="recurring_frequency" style="background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #E2E8F0;">
                                <option value="">-- Select --</option>
                                <option value="daily">Daily</option>
                                <option value="weekly">Weekly</option>
                                <option value="biweekly">Bi-Weekly</option>
                                <option value="monthly">Monthly</option>
                                <option value="quarterly">Quarterly</option>
                                <option value="yearly">Yearly</option>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer" style="border-top: 1px solid rgba(255,255,255,0.1);">
                <button type="button" class="btn btn-sm" style="background: rgba(255,255,255,0.1); color: #E2E8F0;" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-sm" style="background: #00D4FF; color: #0f172a; font-weight: 600;" onclick="submitAddRevenue()">Save Revenue</button>
            </div>
        </div>
    </div>
</div>

<!-- Edit Revenue Modal -->
<div class="modal fade" id="editRevenueModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content glass-card" style="background: rgba(15,23,42,0.95); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.1);">
            <div class="modal-header" style="border-bottom: 1px solid rgba(255,255,255,0.1);">
                <h5 class="modal-title" style="font-weight: 600; color: #00D4FF;">Edit Revenue Record</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="editRevenueForm">
                    <input type="hidden" name="record_id" id="editRecordId">
                    <div class="row g-3">
                        <div class="col-md-4">
                            <label class="form-label" style="color: #94A3B8; font-size: 12px;">Transaction Date</label>
                            <input type="date" class="form-control" name="transaction_date" id="editTransactionDate" required style="background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #E2E8F0;">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label" style="color: #94A3B8; font-size: 12px;">Amount</label>
                            <div class="input-group">
                                <span class="input-group-text" style="background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #94A3B8;">{{ currency_symbol }}</span>
                                <input type="number" step="0.01" class="form-control" name="amount" id="editAmount" required style="background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #E2E8F0;">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label" style="color: #94A3B8; font-size: 12px;">Reference Number</label>
                            <input type="text" class="form-control" name="reference_number" id="editReferenceNumber" style="background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #E2E8F0;">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label" style="color: #94A3B8; font-size: 12px;">Category</label>
                            <input type="text" class="form-control" name="category" id="editCategory" required style="background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #E2E8F0;">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label" style="color: #94A3B8; font-size: 12px;">Subcategory</label>
                            <input type="text" class="form-control" name="subcategory" id="editSubcategory" style="background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #E2E8F0;">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label" style="color: #94A3B8; font-size: 12px;">Department</label>
                            <select class="form-select" name="department_id" id="editDepartmentId" style="background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #E2E8F0;">
                                <option value="">-- Select Department --</option>
                                {% for dept in departments %}
                                <option value="{{ dept.id }}">{{ dept.name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label" style="color: #94A3B8; font-size: 12px;">Account</label>
                            <select class="form-select" name="account_id" id="editAccountId" style="background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #E2E8F0;">
                                <option value="">-- Select Account --</option>
                                {% for acc in accounts %}
                                <option value="{{ acc.id }}">{{ acc.account_name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-12">
                            <label class="form-label" style="color: #94A3B8; font-size: 12px;">Description</label>
                            <textarea class="form-control" name="description" id="editDescription" rows="2" style="background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #E2E8F0;"></textarea>
                        </div>
                        <div class="col-md-4">
                            <div class="form-check mt-4">
                                <input class="form-check-input" type="checkbox" name="is_recurring" id="editIsRecurring" style="background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.2);">
                                <label class="form-check-label" for="editIsRecurring" style="color: #94A3B8;">Recurring?</label>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label" style="color: #94A3B8; font-size: 12px;">Frequency</label>
                            <select class="form-select" name="recurring_frequency" id="editRecurringFrequency" style="background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #E2E8F0;">
                                <option value="">-- Select --</option>
                                <option value="daily">Daily</option>
                                <option value="weekly">Weekly</option>
                                <option value="biweekly">Bi-Weekly</option>
                                <option value="monthly">Monthly</option>
                                <option value="quarterly">Quarterly</option>
                                <option value="yearly">Yearly</option>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer" style="border-top: 1px solid rgba(255,255,255,0.1);">
                <button type="button" class="btn btn-sm" style="background: rgba(255,255,255,0.1); color: #E2E8F0;" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-sm" style="background: #00D4FF; color: #0f172a; font-weight: 600;" onclick="submitEditRevenue()">Update Revenue</button>
            </div>
        </div>
    </div>
</div>

<!-- Import CSV Modal -->
<div class="modal fade" id="importCsvModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content glass-card" style="background: rgba(15,23,42,0.95); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.1);">
            <div class="modal-header" style="border-bottom: 1px solid rgba(255,255,255,0.1);">
                <h5 class="modal-title" style="font-weight: 600; color: #00D4FF;">Import Revenue from CSV</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p style="color: #94A3B8; font-size: 13px;">Upload a CSV file. Duplicate records (same <code>reference_number</code> + <code>transaction_date</code>) will be updated instead of inserted.</p>
                <form id="importCsvForm" enctype="multipart/form-data">
                    <input type="file" class="form-control" name="csv_file" accept=".csv" required style="background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #E2E8F0;">
                </form>
                <div class="mt-3">
                    <a href="{{ url_for('business_twin.download_revenue_csv_template') }}" style="color: #00D4FF; font-size: 12px; text-decoration: none;">
                        <i class="fas fa-download"></i> Download CSV Template
                    </a>
                </div>
            </div>
            <div class="modal-footer" style="border-top: 1px solid rgba(255,255,255,0.1);">
                <button type="button" class="btn btn-sm" style="background: rgba(255,255,255,0.1); color: #E2E8F0;" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-sm" style="background: #00D4FF; color: #0f172a; font-weight: 600;" onclick="submitImportCsv()">Import</button>
            </div>
        </div>
    </div>
</div>

<!-- Import Excel Modal -->
<div class="modal fade" id="importExcelModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content glass-card" style="background: rgba(15,23,42,0.95); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.1);">
            <div class="modal-header" style="border-bottom: 1px solid rgba(255,255,255,0.1);">
                <h5 class="modal-title" style="font-weight: 600; color: #00D4FF;">Import Revenue from Excel</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p style="color: #94A3B8; font-size: 13px;">Upload an Excel file (.xlsx). Duplicate records (same <code>reference_number</code> + <code>transaction_date</code>) will be updated instead of inserted.</p>
                <form id="importExcelForm" enctype="multipart/form-data">
                    <input type="file" class="form-control" name="excel_file" accept=".xlsx,.xls" required style="background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #E2E8F0;">
                </form>
                <div class="mt-3">
                    <a href="{{ url_for('business_twin.download_revenue_excel_template') }}" style="color: #00D4FF; font-size: 12px; text-decoration: none;">
                        <i class="fas fa-download"></i> Download Excel Template
                    </a>
                </div>
            </div>
            <div class="modal-footer" style="border-top: 1px solid rgba(255,255,255,0.1);">
                <button type="button" class="btn btn-sm" style="background: rgba(255,255,255,0.1); color: #E2E8F0;" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-sm" style="background: #00D4FF; color: #0f172a; font-weight: 600;" onclick="submitImportExcel()">Import</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
const currencySymbol = "{{ currency_symbol }}";
const trend = {{ trend | tojson }};
const recordsData = {{ records | tojson }};

Plotly.newPlot('revenueChart', [
    {x: trend.dates, y: trend.revenue, type: 'scatter', mode: 'lines', name: 'Revenue', line: {color: '#00D4FF', width: 2}, fill: 'tozeroy', fillcolor: 'rgba(0,212,255,0.05)'},
    {x: trend.dates, y: trend.profit, type: 'scatter', mode: 'lines', name: 'Profit', line: {color: '#10B981', width: 2}}
], {
    paper_bgcolor: 'transparent', plot_bgcolor: 'transparent',
    font: {color: '#94A3B8', family: 'Inter'},
    xaxis: {gridcolor: 'rgba(255,255,255,0.03)', tickfont: {size: 10}},
    yaxis: {gridcolor: 'rgba(255,255,255,0.03)', tickfont: {size: 10}, tickprefix: currencySymbol},
    legend: {orientation: 'h', y: -0.15, font: {size: 11}},
    margin: {t: 10, r: 10, b: 40, l: 50}
}, {responsive: true, displayModeBar: false});

// URL helpers — pass 0 so url_for is happy with <int:record_id>, then slice off the trailing 0
const addRevenueUrl = "{{ url_for('business_twin.add_revenue') }}";
const deleteAllRevenueUrl = "{{ url_for('business_twin.delete_all_revenue') }}";
const importCsvUrl = "{{ url_for('business_twin.import_revenue_csv') }}";
const importExcelUrl = "{{ url_for('business_twin.import_revenue_excel') }}";
const editRevenueUrlBase = "{{ url_for('business_twin.edit_revenue', record_id=0) }}".slice(0, -1);
const deleteRevenueUrlBase = "{{ url_for('business_twin.delete_revenue', record_id=0) }}".slice(0, -1);

// Modals
const addModal = new bootstrap.Modal(document.getElementById('addRevenueModal'));
const editModal = new bootstrap.Modal(document.getElementById('editRevenueModal'));
const importCsvModal = new bootstrap.Modal(document.getElementById('importCsvModal'));
const importExcelModal = new bootstrap.Modal(document.getElementById('importExcelModal'));

function openAddModal() {
    document.getElementById('addRevenueForm').reset();
    addModal.show();
}

function openImportCsvModal() {
    document.getElementById('importCsvForm').reset();
    importCsvModal.show();
}

function openImportExcelModal() {
    document.getElementById('importExcelForm').reset();
    importExcelModal.show();
}

function openEditModal(recordId) {
    const record = recordsData.find(r => r.id === recordId);
    if (!record) return;

    document.getElementById('editRecordId').value = record.id;
    document.getElementById('editTransactionDate').value = record.transaction_date;
    document.getElementById('editAmount').value = record.amount;
    document.getElementById('editReferenceNumber').value = record.reference_number || '';
    document.getElementById('editCategory').value = record.category || 'Revenue';
    document.getElementById('editSubcategory').value = record.subcategory || '';
    document.getElementById('editDepartmentId').value = record.department_id || '';
    document.getElementById('editAccountId').value = record.account_id || '';
    document.getElementById('editDescription').value = record.description || '';
    document.getElementById('editIsRecurring').checked = record.is_recurring || false;
    document.getElementById('editRecurringFrequency').value = record.recurring_frequency || '';

    editModal.show();
}

function submitAddRevenue() {
    const form = document.getElementById('addRevenueForm');
    const formData = new FormData(form);
    formData.append('transaction_type', 'revenue');

    fetch(addRevenueUrl, {
        method: 'POST',
        body: formData
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) {
            addModal.hide();
            location.reload();
        } else {
            alert(data.error || 'Failed to add revenue');
        }
    })
    .catch(err => alert('Error: ' + err));
}

function submitEditRevenue() {
    const recordId = document.getElementById('editRecordId').value;
    const form = document.getElementById('editRevenueForm');
    const formData = new FormData(form);

    fetch(editRevenueUrlBase + recordId, {
        method: 'POST',
        body: formData
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) {
            editModal.hide();
            location.reload();
        } else {
            alert(data.error || 'Failed to update revenue');
        }
    })
    .catch(err => alert('Error: ' + err));
}

function deleteRecord(recordId) {
    if (!confirm('Are you sure you want to delete this revenue record?')) return;

    fetch(deleteRevenueUrlBase + recordId, {
        method: 'DELETE'
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) {
            location.reload();
        } else {
            alert(data.error || 'Failed to delete');
        }
    })
    .catch(err => alert('Error: ' + err));
}

function confirmDeleteAll() {
    if (!confirm('WARNING: This will permanently delete ALL revenue records for your company. This action cannot be undone. Are you sure?')) return;
    if (!confirm('FINAL CONFIRMATION: Are you absolutely sure?')) return;

    fetch(deleteAllRevenueUrl, {
        method: 'DELETE'
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) {
            location.reload();
        } else {
            alert(data.error || 'Failed to delete all records');
        }
    })
    .catch(err => alert('Error: ' + err));
}

function submitImportCsv() {
    const form = document.getElementById('importCsvForm');
    const formData = new FormData(form);

    fetch(importCsvUrl, {
        method: 'POST',
        body: formData
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) {
            importCsvModal.hide();
            alert(data.message + (data.errors && data.errors.length ? '\n\nErrors:\n' + data.errors.join('\n') : ''));
            location.reload();
        } else {
            alert(data.error || 'Import failed');
        }
    })
    .catch(err => alert('Error: ' + err));
}

function submitImportExcel() {
    const form = document.getElementById('importExcelForm');
    const formData = new FormData(form);

    fetch(importExcelUrl, {
        method: 'POST',
        body: formData
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) {
            importExcelModal.hide();
            alert(data.message + (data.errors && data.errors.length ? '\n\nErrors:\n' + data.errors.join('\n') : ''));
            location.reload();
        } else {
            alert(data.error || 'Import failed');
        }
    })
    .catch(err => alert('Error: ' + err));
}
</script>
{% endblock %}