{% extends "base.html" %}

{% block content %}
<!-- Expense Management Header -->
<div class="section-header mb-4 scroll-animate">
    <div class="row align-items-center">
        <div class="col-md-8">
            <h2><i class="fas fa-money-bill-wave me-3"></i>Expense Management</h2>
            <p class="lead mb-0">Track daily expenses, company payments, and financial obligations</p>
        </div>
    </div>
</div>

<!-- Action Buttons -->
<div class="mb-4 d-flex justify-content-end gap-2 flex-wrap">
    <button class="btn btn-danger" id="bulkDeleteExpensesBtn" style="display: none;">
        <i class="fas fa-trash me-1"></i> Delete Selected
    </button>
    <button class="btn btn-success btn-lg glow" data-bs-toggle="modal" data-bs-target="#companyPaymentModal">
        <i class="fas fa-hand-holding-usd me-2"></i> Pay Company
    </button>
    <button class="btn btn-primary btn-lg glow" data-bs-toggle="modal" data-bs-target="#addExpenseModal">
        <i class="fas fa-plus me-2"></i> Add Expense
    </button>
</div>

<!-- Company Payment Section -->
<div class="garments-card mb-4 scroll-animate">
    <div class="card-header">
        <h5><i class="fas fa-building me-2"></i> Quick Company Payment</h5>
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-md-6">
                <div class="mb-3">
                    <label class="form-label">Select Company</label>
                    <div class="position-relative">
                        <div class="input-group">
                            <input type="text" class="form-control" id="quickCompanySearch"
                                   placeholder="Search or select company..." autocomplete="off">
                            <button class="btn btn-outline-secondary" type="button" id="quickCompanyDropdownBtn"
                                    title="Show all companies">
                                <i class="fas fa-chevron-down"></i>
                            </button>
                        </div>
                        <div id="companySuggestions" class="dropdown-menu position-absolute w-100 show"
                             style="display: none; max-height: 300px; overflow-y: auto; z-index: 1000;">
                        </div>
                    </div>
                    <input type="hidden" id="quickCompanySelect">
                </div>
            </div>
            <div class="col-md-6">
                <div class="mb-3">
                    <label class="form-label">Total Due Amount</label>
                    <div class="alert alert-danger mb-0" id="quickDueAmountDisplay" style="font-size: 1.1rem; font-weight: bold;">
                        BDT 0.00
                    </div>
                </div>
                <div class="mb-3">
                    <label class="form-label">Advance Payment</label>
                    <div class="alert alert-info mb-0" id="quickAdvanceDisplay" style="font-size: 1.1rem; font-weight: bold;">
                        BDT 0.00
                    </div>
                </div>
            </div>
        </div>
        <div class="text-center">
            <button class="btn btn-success btn-lg" onclick="openPaymentModal()" id="quickPayBtn" disabled>
                <i class="fas fa-credit-card me-2"></i> Proceed to Payment
            </button>
        </div>
    </div>
</div>

<!-- Expense Statistics -->
<div class="row mb-4">
    <div class="col-xl-6 col-md-6 mb-4">
        <div class="manufacturing-stat scroll-animate">
            <i class="fas fa-calendar-alt text-primary"></i>
            <h3 class="text-primary mb-1">AED {{ "{:,.2f}".format(current_year_expenses or 0) }}</h3>
            <p class="text-muted mb-0">Current Year Expenses</p>
        </div>
    </div>
    <div class="col-xl-6 col-md-6 mb-4">
        <div class="manufacturing-stat scroll-animate">
            <i class="fas fa-calendar-week text-warning"></i>
            <h3 class="text-warning mb-1">AED {{ "{:,.2f}".format(current_month_expenses or 0) }}</h3>
            <p class="text-muted mb-0">This Month's Expenses</p>
        </div>
    </div>
</div>

<!-- Expenses Table -->
<div class="garments-card scroll-animate">
    <div class="card-header">
        <h5><i class="fas fa-receipt me-2"></i> Expense Records</h5>
    </div>
    <div class="card-body">
        <!-- Search and Filter Controls -->
        <div class="row mb-3">
            <div class="col-md-2">
                <div class="input-group">
                    <input type="text" id="expenseSearch" class="form-control" 
                           placeholder="🔍 Search expenses...">
                    <button class="btn btn-outline-secondary" type="button" id="clearExpenseSearch">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            </div>
            <div class="col-md-2">
                <select id="categoryFilter" class="form-select">
                    <option value="">All Categories</option>
                    <option value="Daily">Daily</option>
                    <option value="Monthly">Monthly</option>
                    <option value="Yearly">Yearly</option>
                </select>
            </div>
            <div class="col-md-2">
                <select id="expenseMonthFilter" class="form-select">
                    <option value="">All Months</option>
                    <option value="01">January</option>
                    <option value="02">February</option>
                    <option value="03">March</option>
                    <option value="04">April</option>
                    <option value="05">May</option>
                    <option value="06">June</option>
                    <option value="07">July</option>
                    <option value="08">August</option>
                    <option value="09">September</option>
                    <option value="10">October</option>
                    <option value="11">November</option>
                    <option value="12">December</option>
                </select>
            </div>
            <div class="col-md-2">
                <select id="expenseYearFilter" class="form-select">
                    <option value="">All Years</option>
                    <option value="2025">2025</option>
                    <option value="2024">2024</option>
                    <option value="2023">2023</option>
                </select>
            </div>
            <div class="col-md-2">
                <input type="date" id="expenseDateFrom" class="form-control" placeholder="From Date">
            </div>
            <div class="col-md-2">
                <input type="date" id="expenseDateTo" class="form-control" placeholder="To Date">
            </div>
        </div>
        
        <div class="table-responsive">
            <table class="table table-striped table-hover" id="expensesTable">
                <thead>
                    <tr>
                        <th><input type="checkbox" class="form-check-input" id="selectAllExpenses" title="Select All"></th>
                        <th>📋 Expense Name</th>
                        <th>🏷️ Category</th>
                        <th>💰 Amount</th>
                        <th>📅 Date</th>
                        <th>📝 Notes</th>
                        <th>⚡ Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for expense in expenses %}
                    <tr class="scroll-animate" data-category="{{ expense.category or '' }}" data-expense-date="{{ expense.expense_date }}">
                        <td>
                            <input type="checkbox" class="form-check-input expense-checkbox" data-expense-id="{{ expense.id }}">
                        </td>
                        <td>
                            <strong class="text-primary">{{ expense.expense_name }}</strong>
                        </td>
                        <td>
                            {% if expense.category %}
                            <span class="badge bg-info glow">{{ expense.category }}</span>
                            {% else %}
                            <span class="badge bg-secondary">Uncategorized</span>
                            {% endif %}
                        </td>
                        <td>
                            <strong class="text-danger">AED {{ "{:,.2f}".format(expense.amount or 0) }}</strong>
                        </td>
                        <td>
                            <i class="fas fa-calendar me-2 text-muted"></i>
                            {{ expense.expense_date }}
                        </td>
                        <td>
                            <small class="text-muted">{{ expense.notes or '-' }}</small>
                        </td>
                        <td>
                            <div class="btn-group btn-group-sm" role="group">
                                <button class="btn btn-outline-info print-expense-btn" 
                                        data-expense-id="{{ expense.id }}"
                                        data-expense-name="{{ expense.expense_name }}"
                                        data-category="{{ expense.category or '' }}"
                                        data-amount="{{ expense.amount }}"
                                        data-expense-date="{{ expense.expense_date }}"
                                        data-notes="{{ expense.notes or '' }}"
                                        title="Print Receipt">
                                    <i class="fas fa-print"></i>
                                </button>
                                <button class="btn btn-outline-warning edit-expense-btn" 
                                        data-expense-id="{{ expense.id }}"
                                        data-expense-name="{{ expense.expense_name }}"
                                        data-category="{{ expense.category or '' }}"
                                        data-amount="{{ expense.amount }}"
                                        data-expense-date="{{ expense.expense_date }}"
                                        data-notes="{{ expense.notes or '' }}"
                                        title="Edit Expense">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <button class="btn btn-outline-danger delete-expense-btn" 
                                        data-expense-id="{{ expense.id }}"
                                        data-expense-name="{{ expense.expense_name }}"
                                        title="Delete Expense">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        <div id="expensePagination"></div>
    </div>
</div>

<!-- Company Payment History -->
<div class="garments-card mb-4 scroll-animate">
    <div class="card-header">
        <h5><i class="fas fa-receipt me-2"></i> Company Payment History</h5>
    </div>
    <div class="card-body">
        <!-- Payment Search & Filters -->
        <div class="row mb-3">
            <div class="col-md-4">
                <div class="input-group">
                    <input type="text" id="paymentSearch" class="form-control" 
                           placeholder="🔍 Search by receipt or company...">
                    <button class="btn btn-outline-secondary" type="button" id="clearPaymentSearch">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            </div>
            <div class="col-md-3">
                <select id="paymentMonthFilter" class="form-select">
                    <option value="">All Months</option>
                    <option value="01">January</option>
                    <option value="02">February</option>
                    <option value="03">March</option>
                    <option value="04">April</option>
                    <option value="05">May</option>
                    <option value="06">June</option>
                    <option value="07">July</option>
                    <option value="08">August</option>
                    <option value="09">September</option>
                    <option value="10">October</option>
                    <option value="11">November</option>
                    <option value="12">December</option>
                </select>
            </div>
            <div class="col-md-3">
                <select id="paymentYearFilter" class="form-select">
                    <option value="">All Years</option>
                    <option value="2025">2025</option>
                    <option value="2024">2024</option>
                    <option value="2023">2023</option>
                </select>
            </div>
        </div>
        
        <div class="table-responsive">
            <table class="table table-striped table-hover" id="paymentHistoryTable">
                <thead>
                    <tr>
                        <th>🧾 Receipt Number</th>
                        <th>🏢 Company</th>
                        <th>📅 Payment Date</th>
                        <th>💰 Amount Paid</th>
                        <th>💳 Payment Method</th>
                        <th>� Current Balance</th>
                        <th>�📝 Notes</th>
                        <th>⚡ Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for payment in company_payments %}
                    <tr class="scroll-animate" data-payment-date="{{ payment.payment_date }}">
                        <td>
                            <strong class="text-primary">{{ payment.receipt_number }}</strong>
                        </td>
                        <td>
                            <i class="fas fa-building me-2 text-muted"></i>
                            {{ payment.company_name }}
                        </td>
                        <td>
                            <i class="fas fa-calendar me-2 text-muted"></i>
                            {{ payment.payment_date }}
                        </td>
                        <td>
                            <strong class="text-success">BDT {{ "{:,.2f}".format(payment.amount) }}</strong>
                        </td>
                        <td>
                            <span class="badge bg-info">{{ payment.payment_method }}</span>
                        </td>
                        <td>
                            {% if payment.current_due > 0 %}
                                <strong class="text-danger">
                                    <i class="fas fa-arrow-up me-1"></i>Due: BDT {{ "{:,.2f}".format(payment.current_due) }}
                                </strong>
                            {% elif payment.current_advance > 0 %}
                                <strong class="text-success">
                                    <i class="fas fa-arrow-down me-1"></i>Advance: BDT {{ "{:,.2f}".format(payment.current_advance) }}
                                </strong>
                            {% else %}
                                <span class="text-muted badge bg-secondary">Settled</span>
                            {% endif %}
                        </td>
                        <td>
                            <small class="text-muted">{{ payment.notes or '-' }}</small>
                        </td>
                        <td>
                            <div class="btn-group btn-group-sm" role="group">
                                <button class="btn btn-outline-info view-payment-btn" 
                                        data-payment-id="{{ payment.id }}"
                                        title="View Details">
                                    <i class="fas fa-eye"></i>
                                </button>
                                <button class="btn btn-outline-success print-payment-btn" 
                                        data-payment-id="{{ payment.id }}"
                                        title="Print Receipt">
                                    <i class="fas fa-print"></i>
                                </button>
                                <button class="btn btn-outline-warning edit-payment-btn" 
                                        data-payment-id="{{ payment.id }}"
                                        data-receipt-number="{{ payment.receipt_number }}"
                                        data-company-id="{{ payment.company_id }}"
                                        data-amount="{{ payment.amount }}"
                                        data-payment-date="{{ payment.payment_date }}"
                                        data-payment-method="{{ payment.payment_method }}"
                                        data-notes="{{ payment.notes or '' }}"
                                        title="Edit Payment">
                                    <i class="fas fa-edit"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        <div id="paymentPagination"></div>
    </div>
</div>

<!-- Add Expense Modal -->
<div class="modal fade" id="addExpenseModal" 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-circle me-2"></i> Add New Expense
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" action="{{ url_for('add_expense') }}">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">📋 Expense Name <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="expense_name" required 
                                       placeholder="e.g., Shop Rent, Employee Salary, Electricity Bill">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">🏷️ Category <span class="text-danger">*</span></label>
                                <select class="form-select" name="category" required>
                                    <option value="">Select Category</option>
                                    <option value="Daily">Daily</option>
                                    <option value="Monthly">Monthly</option>
                                    <option value="Yearly">Yearly</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">💰 Amount (AED) <span class="text-danger">*</span></label>
                                <input type="number" step="0.01" class="form-control" name="amount" required 
                                       placeholder="0.00" min="0">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">📅 Expense Date <span class="text-danger">*</span></label>
                                <input type="date" class="form-control" name="expense_date" required 
                                       value="{{ today }}">
                            </div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">📝 Notes</label>
                        <textarea class="form-control" name="notes" rows="3" 
                                  placeholder="Additional details about this expense..."></textarea>
                    </div>
                    <div class="alert alert-info">
                        <i class="fas fa-info-circle me-2"></i>
                        <strong>Tip:</strong> Use consistent category names to easily track and analyze expenses.
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="fas fa-times me-1"></i> Cancel
                    </button>
                    <button type="submit" class="btn btn-primary glow" id="addExpenseSubmitBtn">
                        <i class="fas fa-check me-1"></i> Add Expense
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Edit Expense Modal -->
<div class="modal fade" id="editExpenseModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-edit me-2"></i> Edit Expense
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form id="editExpenseForm" method="POST">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">📋 Expense Name <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="expense_name" required 
                                       id="editExpenseName">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">🏷️ Category <span class="text-danger">*</span></label>
                                <select class="form-select" name="category" required id="editCategory">
                                    <option value="">Select Category</option>
                                    <option value="Daily">Daily</option>
                                    <option value="Monthly">Monthly</option>
                                    <option value="Yearly">Yearly</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">💰 Amount (AED) <span class="text-danger">*</span></label>
                                <input type="number" step="0.01" class="form-control" name="amount" required 
                                       id="editAmount" min="0">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">📅 Expense Date <span class="text-danger">*</span></label>
                                <input type="date" class="form-control" name="expense_date" required 
                                       id="editExpenseDate">
                            </div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">📝 Notes</label>
                        <textarea class="form-control" name="notes" rows="3" id="editNotes"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="fas fa-times me-1"></i> Cancel
                    </button>
                    <button type="submit" class="btn btn-warning glow">
                        <i class="fas fa-save me-1"></i> Update Expense
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteExpenseModal" tabindex="-1">
    <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 Deletion
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p id="deleteExpenseMessage">Are you sure you want to delete this expense?</p>
                <div class="alert alert-warning">
                    <strong>Warning:</strong> This action cannot be undone!
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="fas fa-times me-1"></i> Cancel
                </button>
                <form id="deleteExpenseForm" method="POST" style="display: inline;">
                    <button type="submit" class="btn btn-danger">
                        <i class="fas fa-trash me-1"></i> Delete Expense
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Company Payment Modal -->
<div class="modal fade" id="companyPaymentModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-hand-holding-usd me-2"></i> Record Company Payment
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" action="{{ url_for('add_company_payment') }}">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">🏢 Company <span class="text-danger">*</span></label>
                                <select class="form-select" name="company_id" required id="paymentCompanyId" onchange="updateModalDueAmount()">
                                    <option value="">Select Company</option>
                                    {% for company in companies %}
                                    <option value="{{ company.id }}" data-due="{{ company.total_due }}">
                                        {{ company.company_name }}
                                        {% if company.total_due > 0 %}
                                        (Due: BDT {{ "{:,.2f}".format(company.total_due) }})
                                        {% endif %}
                                    </option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">💰 Total Due Amount</label>
                                <div class="alert alert-danger mb-0" id="modalDueAmountDisplay" style="font-size: 1.2rem; font-weight: bold;">
                                    BDT 0.00
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label class="form-label">💵 Payment Amount (BDT) <span class="text-danger">*</span></label>
                                <input type="number" step="0.01" class="form-control" name="amount" required 
                                       placeholder="0.00" min="0" id="paymentAmount">
                                <small class="text-muted">Bangladeshi Taka (৳)</small>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label class="form-label">📅 Payment Date <span class="text-danger">*</span></label>
                                <input type="date" class="form-control" name="payment_date" required 
                                       value="{{ today }}">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label class="form-label">💳 Payment Method <span class="text-danger">*</span></label>
                                <select class="form-select" name="payment_method" required>
                                    <option value="">Select Method</option>
                                    <option value="Cash">💵 Cash</option>
                                    <option value="Bank Transfer">🏦 Bank Transfer</option>
                                    <option value="Credit Card">💳 Credit Card</option>
                                    <option value="Cheque">📝 Cheque</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">📝 Notes</label>
                        <textarea class="form-control" name="notes" rows="3" 
                                  placeholder="Additional payment details..."></textarea>
                    </div>
                    <div class="alert alert-info">
                        <i class="fas fa-info-circle me-2"></i>
                        <strong>Payment Information:</strong> This payment will be recorded and the company's due amount will be updated automatically. A receipt number will be generated.
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="fas fa-times me-1"></i> Cancel
                    </button>
                    <button type="submit" class="btn btn-success glow" id="companyPaymentSubmitBtn">
                        <i class="fas fa-check me-1"></i> Record Payment
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- View Payment Modal -->
<div class="modal fade" id="viewPaymentModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-eye me-2"></i> Payment Details
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="viewPaymentContent">
                <!-- Content will be loaded dynamically -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="fas fa-times me-1"></i> Close
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Edit Payment Modal -->
<div class="modal fade" id="editPaymentModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-edit me-2"></i> Edit Company Payment
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form id="editPaymentForm" method="POST">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">🧾 Receipt Number</label>
                                <input type="text" class="form-control" id="editReceiptNumber" readonly>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">🏢 Company</label>
                                <select class="form-select" name="company_id" required id="editPaymentCompanyId" disabled>
                                    <option value="">Select Company</option>
                                    {% for company in companies %}
                                    <option value="{{ company.id }}">{{ company.company_name }}</option>
                                    {% endfor %}
                                </select>
                                <input type="hidden" name="company_id" id="editPaymentCompanyIdHidden">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label class="form-label">💵 Payment Amount (BDT) <span class="text-danger">*</span></label>
                                <input type="number" step="0.01" class="form-control" name="amount" required 
                                       id="editPaymentAmount" min="0">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label class="form-label">📅 Payment Date <span class="text-danger">*</span></label>
                                <input type="date" class="form-control" name="payment_date" required 
                                       id="editPaymentDate">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label class="form-label">💳 Payment Method <span class="text-danger">*</span></label>
                                <select class="form-select" name="payment_method" required id="editPaymentMethod">
                                    <option value="">Select Method</option>
                                    <option value="Cash">💵 Cash</option>
                                    <option value="Bank Transfer">🏦 Bank Transfer</option>
                                    <option value="Credit Card">💳 Credit Card</option>
                                    <option value="Cheque">📝 Cheque</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">📝 Notes</label>
                        <textarea class="form-control" name="notes" rows="3" id="editPaymentNotes"></textarea>
                    </div>
                    <div class="alert alert-info">
                        <i class="fas fa-info-circle me-2"></i>
                        <strong>Note:</strong> Editing a payment will update the company's due amount accordingly.
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="fas fa-times me-1"></i> Cancel
                    </button>
                    <button type="submit" class="btn btn-warning glow">
                        <i class="fas fa-save me-1"></i> Update Payment
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    console.log('Expenses page scripts loaded');

    // Prevent multiple form submissions for Add Expense Modal
    const addExpenseModal = document.getElementById('addExpenseModal');
    const addExpenseForm = addExpenseModal ? addExpenseModal.querySelector('form') : null;
    const addExpenseSubmitBtn = document.getElementById('addExpenseSubmitBtn');
    let isSubmittingExpense = false;

    if (addExpenseForm) {
        addExpenseForm.addEventListener('submit', function(e) {
            if (isSubmittingExpense) {
                e.preventDefault();
                console.log('Form submission prevented - already submitting');
                return false;
            }
            
            isSubmittingExpense = true;
            if (addExpenseSubmitBtn) {
                addExpenseSubmitBtn.disabled = true;
                addExpenseSubmitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i> Adding...';
            }
        });

        // Reset the flag when modal is closed
        addExpenseModal.addEventListener('hidden.bs.modal', function() {
            isSubmittingExpense = false;
            if (addExpenseSubmitBtn) {
                addExpenseSubmitBtn.disabled = false;
                addExpenseSubmitBtn.innerHTML = '<i class="fas fa-check me-1"></i> Add Expense';
            }
        });
    }

    // Prevent multiple form submissions for Company Payment Modal
    const companyPaymentModal = document.getElementById('companyPaymentModal');
    const companyPaymentForm = companyPaymentModal ? companyPaymentModal.querySelector('form') : null;
    const companyPaymentSubmitBtn = document.getElementById('companyPaymentSubmitBtn');
    let isSubmittingPayment = false;

    if (companyPaymentForm) {
        companyPaymentForm.addEventListener('submit', function(e) {
            if (isSubmittingPayment) {
                e.preventDefault();
                console.log('Payment form submission prevented - already submitting');
                return false;
            }
            
            isSubmittingPayment = true;
            if (companyPaymentSubmitBtn) {
                companyPaymentSubmitBtn.disabled = true;
                companyPaymentSubmitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i> Recording...';
            }
        });

        // Reset the flag when modal is closed
        companyPaymentModal.addEventListener('hidden.bs.modal', function() {
            isSubmittingPayment = false;
            if (companyPaymentSubmitBtn) {
                companyPaymentSubmitBtn.disabled = false;
                companyPaymentSubmitBtn.innerHTML = '<i class="fas fa-check me-1"></i> Record Payment';
            }
        });
    }

    // Bulk delete expenses
    const selectAllExpenses = document.getElementById('selectAllExpenses');
    const bulkDeleteExpensesBtn = document.getElementById('bulkDeleteExpensesBtn');

    // Helper to get visible checkboxes only (not hidden by filters/pagination)
    function getVisibleExpenseCheckboxes() {
        return document.querySelectorAll('tbody tr:not([style*="display: none"]) .expense-checkbox');
    }

    function updateBulkDeleteExpensesButton() {
        const checked = document.querySelectorAll('.expense-checkbox:checked').length;
        if (bulkDeleteExpensesBtn) {
            bulkDeleteExpensesBtn.style.display = checked > 0 ? 'inline-block' : 'none';
            bulkDeleteExpensesBtn.innerHTML = `<i class="fas fa-trash me-1"></i> Delete Selected (${checked})`;
        }
    }

    // Select/Deselect all VISIBLE expenses on current page
    if (selectAllExpenses) {
        selectAllExpenses.addEventListener('change', function() {
            const visibleCheckboxes = getVisibleExpenseCheckboxes();
            visibleCheckboxes.forEach(cb => cb.checked = this.checked);
            updateBulkDeleteExpensesButton();
        });
    }

    // Update button visibility when individual checkboxes change
    document.addEventListener('change', function(e) {
        if (e.target.classList.contains('expense-checkbox')) {
            updateBulkDeleteExpensesButton();
            // Update select all checkbox state based on visible expenses only
            const visibleCheckboxes = getVisibleExpenseCheckboxes();
            const allVisibleChecked = Array.from(visibleCheckboxes).every(cb => cb.checked);
            const anyVisibleChecked = Array.from(visibleCheckboxes).some(cb => cb.checked);
            if (selectAllExpenses) {
                selectAllExpenses.checked = allVisibleChecked && visibleCheckboxes.length > 0;
                selectAllExpenses.indeterminate = anyVisibleChecked && !allVisibleChecked;
            }
        }
    });

    if (bulkDeleteExpensesBtn) {
        bulkDeleteExpensesBtn.addEventListener('click', async function() {
            const ids = Array.from(document.querySelectorAll('.expense-checkbox:checked')).map(cb => cb.dataset.expenseId);
            if (ids.length === 0) return;
            if (!confirm(`Delete ${ids.length} expense(s)?`)) return;
            try {
                const res = await fetch('/bulk_delete_expenses', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ expense_ids: ids })
                });
                const data = await res.json();
                if (data.success) {
                    alert(data.message);
                    location.reload();
                } else {
                    alert(data.message || 'Failed to delete expenses');
                }
            } catch (err) {
                console.error(err);
                alert('Error deleting expenses');
            }
        });
    }
    
    // Consolidated click handler for all expense action buttons
    document.addEventListener('click', function(e) {
        // Edit Expense Button
        if (e.target.closest('.edit-expense-btn')) {
            e.preventDefault();
            console.log('Edit expense button clicked');
            var button = e.target.closest('.edit-expense-btn');
            var expenseId = button.getAttribute('data-expense-id');
            var expenseName = button.getAttribute('data-expense-name');
            var category = button.getAttribute('data-category');
            var amount = button.getAttribute('data-amount');
            var expenseDate = button.getAttribute('data-expense-date');
            var notes = button.getAttribute('data-notes');

            var editModal = document.getElementById('editExpenseModal');
            var editForm = document.getElementById('editExpenseForm');

            // Populate form fields
            document.getElementById('editExpenseName').value = expenseName;
            document.getElementById('editCategory').value = category;
            document.getElementById('editAmount').value = amount;
            document.getElementById('editExpenseDate').value = expenseDate;
            document.getElementById('editNotes').value = notes;

            // Set form action
            editForm.action = "/edit_expense/" + expenseId;

            var modal = new bootstrap.Modal(editModal);
            modal.show();
            return;
        }

        // Delete Expense Button
        if (e.target.closest('.delete-expense-btn')) {
            e.preventDefault();
            console.log('Delete expense button clicked');
            var button = e.target.closest('.delete-expense-btn');
            var expenseId = button.getAttribute('data-expense-id');
            var expenseName = button.getAttribute('data-expense-name');
            
            var deleteModal = document.getElementById('deleteExpenseModal');
            var deleteForm = document.getElementById('deleteExpenseForm');
            var deleteMessage = document.getElementById('deleteExpenseMessage');
            
            deleteMessage.innerHTML = `Are you sure you want to delete expense <strong>"${expenseName}"</strong>?`;
            deleteForm.action = "/delete_expense/" + expenseId;
            
            var modal = new bootstrap.Modal(deleteModal);
            modal.show();
            return;
        }

        // Print Expense Button
        if (e.target.closest('.print-expense-btn')) {
            e.preventDefault();
            console.log('Print expense button clicked');
            var button = e.target.closest('.print-expense-btn');
            var expenseId = button.getAttribute('data-expense-id');
            var expenseName = button.getAttribute('data-expense-name');
            var category = button.getAttribute('data-category');
            var amount = parseFloat(button.getAttribute('data-amount'));
            var expenseDate = button.getAttribute('data-expense-date');
            var notes = button.getAttribute('data-notes');
            
            // Generate receipt number based on expense ID and date
            var receiptNumber = 'EXP-' + expenseId.padStart(6, '0');
            
            var content = `
                <div class="expense-receipt" style="max-width: 780px; margin: 0 auto; border: 2px solid #333; padding: 18px;">
                    <div style="display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px;">
                        <img src="/static/images/logo.png" alt="Company Logo" style="height: 60px; width: auto;">
                        <div style="flex: 1 1 auto;">
                            <h3 style="margin: 0 0 4px 0; color: #222; font-size: 1.2rem;">SH READYMADE GARMENTS TRADING LLC</h3>
                            <p style="margin: 0; color: #444; font-size: 0.95rem;">Expense Receipt</p>
                            <p style="margin: 4px 0 0 0; color: #666; font-size: 0.9rem;">+971 55 320 9940 · Shop 018, New Industrial Area - 2, Ajman, U.A.E.</p>
                        </div>
                        <div style="text-align: right; font-size: 0.9rem; line-height: 1.35;">
                            <div><strong>Receipt #</strong> ${receiptNumber}</div>
                            <div><strong>Date</strong> ${expenseDate}</div>
                        </div>
                    </div>
                    
                    <div style="display: flex; justify-content: space-between; margin-bottom: 30px;">
                        <div style="width: 48%;">
                            <div style="background: #f8f9fa; padding: 15px; border-radius: 8px; border-left: 4px solid #007bff; margin-bottom: 15px;">
                                <h6 style="margin: 0 0 8px 0; color: #666;"><i class="fas fa-receipt"></i> Receipt Number</h6>
                                <p style="margin: 0; font-weight: bold;">${receiptNumber}</p>
                            </div>
                        </div>
                        <div style="width: 48%;">
                            <div style="background: #f8f9fa; padding: 15px; border-radius: 8px; border-left: 4px solid #007bff; margin-bottom: 15px;">
                                <h6 style="margin: 0 0 8px 0; color: #666;"><i class="fas fa-calendar"></i> Expense Date</h6>
                                <p style="margin: 0; font-weight: bold;">${expenseDate}</p>
                            </div>
                        </div>
                    </div>
                    
                    <table style="width: 100%; border-collapse: collapse; margin-bottom: 40px; border: 2px solid #000;">
                        <thead>
                            <tr style="background: #343a40; color: white;">
                                <th style="border: 1px solid #000; padding: 12px; text-align: left;">Description</th>
                                <th style="border: 1px solid #000; padding: 12px; text-align: right; width: 30%;">Amount</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td style="border: 1px solid #000; padding: 12px;"><strong>${expenseName}</strong></td>
                                <td style="border: 1px solid #000; padding: 12px; text-align: right;"><strong>AED ${amount.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</strong></td>
                            </tr>
                            <tr>
                                <td style="border: 1px solid #000; padding: 12px;"><strong>Category:</strong></td>
                                <td style="border: 1px solid #000; padding: 12px; text-align: right;"><span style="background: #17a2b8; color: white; padding: 5px 10px; border-radius: 4px;">${category || 'Uncategorized'}</span></td>
                            </tr>
                            ${notes ? `
                            <tr>
                                <td colspan="2" style="border: 1px solid #000; padding: 12px;">
                                    <strong>Notes:</strong><br>
                                    ${notes}
                                </td>
                            </tr>
                            ` : ''}
                        </tbody>
                        <tfoot style="background: #e9ecef;">
                            <tr>
                                <td style="border: 1px solid #000; padding: 12px; text-align: right;"><strong>Total Expense Amount:</strong></td>
                                <td style="border: 1px solid #000; padding: 12px; text-align: right;"><strong>AED ${amount.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</strong></td>
                            </tr>
                        </tfoot>
                    </table>
                    
                    <div class="receipt-signatures" style="margin-top: 100px; page-break-inside: avoid;">
                        <div style="display: flex; justify-content: space-between;">
                            <div style="text-align: center; width: 45%;">
                                <div style="border-bottom: 2px solid #000; height: 60px; margin-bottom: 10px;"></div>
                                <p style="margin: 5px 0;"><strong>Authorized By</strong></p>
                                <small style="color: #666;">Manager Signature</small>
                            </div>
                            <div style="text-align: center; width: 45%;">
                                <div style="border-bottom: 2px solid #000; height: 60px; margin-bottom: 10px;"></div>
                                <p style="margin: 5px 0;"><strong>SH READYMADE GARMENTS TRADING LLC</strong></p>
                                <small style="color: #666;">Company Seal</small>
                            </div>
                        </div>
                    </div>
                    
                    <div style="text-align: center; margin-top: 30px;">
                        <p style="color: #666; font-size: 12px; margin: 5px 0;">Generated on: ${new Date().toLocaleDateString()} ${new Date().toLocaleTimeString()}</p>
                        <p style="color: #666; font-size: 12px; margin: 5px 0;">This is a computer-generated receipt</p>
                    </div>
                </div>
            `;
            
            const printWindow = window.open('', '_blank');
            if (printWindow) {
                printWindow.document.write(`
                    <!DOCTYPE html>
                    <html>
                    <head>
                        <title>Expense Receipt - ${expenseName}</title>
                        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
                        <style>
                            @page {
                                size: A4;
                                margin: 10mm;
                            }
                            
                            body { 
                                font-family: Arial, sans-serif; 
                                margin: 10mm; 
                                min-height: 100vh;
                                display: flex;
                                flex-direction: column;
                                font-size: 12px;
                                line-height: 1.35;
                            }
                            
                            .expense-receipt {
                                flex-grow: 1;
                                display: flex;
                                flex-direction: column;
                            }
                            
                            .receipt-signatures {
                                margin-top: auto !important;
                                padding-top: 40px;
                            }
                            
                            @media print { 
                                body { 
                                    margin: 8mm; 
                                    min-height: 100vh;
                                }
                                
                                .expense-receipt {
                                    border: none !important;
                                    min-height: 100vh;
                                }
                                
                                .no-print { 
                                    display: none !important; 
                                }
                                
                                .receipt-signatures {
                                    position: absolute;
                                    bottom: 80px;
                                    left: 0;
                                    right: 0;
                                }
                            }
                        </style>
                    </head>
                    <body>
                        ${content}
                        <div class="text-center mt-3 no-print" style="text-align: center; margin-top: 20px;">
                            <button onclick="window.print()" style="padding: 10px 20px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; margin-right: 10px;">
                                <i class="fas fa-print"></i> Print
                            </button>
                            <button onclick="window.close()" style="padding: 10px 20px; background: #6c757d; color: white; border: none; border-radius: 4px; cursor: pointer;">
                                <i class="fas fa-times"></i> Close
                            </button>
                        </div>
                        <script>setTimeout(() => window.print(), 500);<\/script>
                    </body>
                    </html>
                `);
                
                printWindow.document.close();
            } else {
                alert('Please allow popups for this site to print expense receipts.');
            }
            return;
        }
    });

    // Search and Filter Functionality for Expenses with Pagination
    const expenseSearch = document.getElementById('expenseSearch');
    const clearExpenseSearch = document.getElementById('clearExpenseSearch');
    const categoryFilter = document.getElementById('categoryFilter');
    const expenseMonthFilter = document.getElementById('expenseMonthFilter');
    const expenseYearFilter = document.getElementById('expenseYearFilter');
    const expenseDateFrom = document.getElementById('expenseDateFrom');
    const expenseDateTo = document.getElementById('expenseDateTo');
    const expensesTable = document.querySelector('#expensesTable tbody');
    let allExpenseRows = [];
    let filteredExpenseRows = [];
    let currentExpensePage = 1;
    const expensesPerPage = 10;
    
    if (expensesTable) {
        allExpenseRows = Array.from(expensesTable.querySelectorAll('tr'));
        filteredExpenseRows = [...allExpenseRows];
        
        function filterExpenses() {
            const searchTerm = expenseSearch.value.toLowerCase().trim();
            const selectedCategory = categoryFilter.value;
            const selectedMonth = expenseMonthFilter.value;
            const selectedYear = expenseYearFilter.value;
            const dateFrom = expenseDateFrom.value;
            const dateTo = expenseDateTo.value;
            
            filteredExpenseRows = allExpenseRows.filter(row => {
                const expenseName = row.cells[1].textContent.toLowerCase();
                const rowCategory = row.getAttribute('data-category') || '';
                const notes = row.cells[4].textContent.toLowerCase();
                const expenseDate = row.getAttribute('data-expense-date') || row.cells[3].textContent.trim();
                
                const matchesSearch = expenseName.includes(searchTerm) || notes.includes(searchTerm);
                const matchesCategory = !selectedCategory || rowCategory === selectedCategory;
                
                // Month/Year filter
                let matchesDate = true;
                if (selectedMonth || selectedYear) {
                    const dateMatch = expenseDate.match(/\d{4}-\d{2}-\d{2}/);
                    if (dateMatch) {
                        const date = dateMatch[0];
                        const [year, month] = date.split('-');
                        
                        if (selectedMonth && month !== selectedMonth) {
                            matchesDate = false;
                        }
                        if (selectedYear && year !== selectedYear) {
                            matchesDate = false;
                        }
                    }
                }
                
                // Date range filter
                let matchesDateRange = true;
                if (dateFrom || dateTo) {
                    const dateMatch = expenseDate.match(/\d{4}-\d{2}-\d{2}/);
                    if (dateMatch) {
                        const rowDate = new Date(dateMatch[0]);
                        if (dateFrom) {
                            const fromDate = new Date(dateFrom);
                            if (rowDate < fromDate) matchesDateRange = false;
                        }
                        if (dateTo) {
                            const toDate = new Date(dateTo);
                            toDate.setHours(23, 59, 59);
                            if (rowDate > toDate) matchesDateRange = false;
                        }
                    } else {
                        matchesDateRange = false;
                    }
                }
                
                return matchesSearch && matchesCategory && matchesDate && matchesDateRange;
            });
            
            currentExpensePage = 1;
            displayExpensePage();
        }
        
        function displayExpensePage() {
            const startIndex = (currentExpensePage - 1) * expensesPerPage;
            const endIndex = startIndex + expensesPerPage;
            
            allExpenseRows.forEach(row => row.style.display = 'none');
            filteredExpenseRows.slice(startIndex, endIndex).forEach(row => {
                row.style.display = '';
            });
            
            updateExpensePagination();
        }
        
        function updateExpensePagination() {
            const totalPages = Math.ceil(filteredExpenseRows.length / expensesPerPage);
            let paginationHTML = '';
            
            if (totalPages > 1) {
                paginationHTML += '<nav class="mt-3"><ul class="pagination justify-content-center">';
                
                paginationHTML += `<li class="page-item ${currentExpensePage === 1 ? 'disabled' : ''}">
                    <a class="page-link" href="#" data-page="${currentExpensePage - 1}">Previous</a>
                </li>`;
                
                for (let i = 1; i <= totalPages; i++) {
                    if (i === 1 || i === totalPages || (i >= currentExpensePage - 2 && i <= currentExpensePage + 2)) {
                        paginationHTML += `<li class="page-item ${i === currentExpensePage ? 'active' : ''}">
                            <a class="page-link" href="#" data-page="${i}">${i}</a>
                        </li>`;
                    } else if (i === currentExpensePage - 3 || i === currentExpensePage + 3) {
                        paginationHTML += '<li class="page-item disabled"><span class="page-link">...</span></li>';
                    }
                }
                
                paginationHTML += `<li class="page-item ${currentExpensePage === totalPages ? 'disabled' : ''}">
                    <a class="page-link" href="#" data-page="${currentExpensePage + 1}">Next</a>
                </li>`;
                
                paginationHTML += '</ul></nav>';
            }
            
            const paginationContainer = document.getElementById('expensePagination');
            if (paginationContainer) {
                paginationContainer.innerHTML = paginationHTML;
                
                paginationContainer.querySelectorAll('.page-link').forEach(link => {
                    link.addEventListener('click', function(e) {
                        e.preventDefault();
                        const page = parseInt(this.getAttribute('data-page'));
                        if (page > 0 && page <= totalPages) {
                            currentExpensePage = page;
                            displayExpensePage();
                        }
                    });
                });
            }
        }
        
        if (expenseSearch) {
            expenseSearch.addEventListener('input', filterExpenses);
        }
        
        if (categoryFilter) {
            categoryFilter.addEventListener('change', filterExpenses);
        }
        
        if (expenseMonthFilter) {
            expenseMonthFilter.addEventListener('change', filterExpenses);
        }
        
        if (expenseYearFilter) {
            expenseYearFilter.addEventListener('change', filterExpenses);
        }
        
        if (expenseDateFrom) {
            expenseDateFrom.addEventListener('change', filterExpenses);
        }
        
        if (expenseDateTo) {
            expenseDateTo.addEventListener('change', filterExpenses);
        }
        
        if (clearExpenseSearch) {
            clearExpenseSearch.addEventListener('click', function() {
                expenseSearch.value = '';
                categoryFilter.value = '';
                expenseMonthFilter.value = '';
                expenseYearFilter.value = '';
                if (expenseDateFrom) expenseDateFrom.value = '';
                if (expenseDateTo) expenseDateTo.value = '';
                filterExpenses();
                expenseSearch.focus();
            });
        }
        
        // Initial display
        displayExpensePage();
    }
    
    // ==================== COMPANY PAYMENT FUNCTIONALITY ====================
    
    // Update quick company payment due amount
    window.updateQuickDueAmount = function(companyId) {
        const displayDiv = document.getElementById('quickDueAmountDisplay');
        const advanceDiv = document.getElementById('quickAdvanceDisplay');
        const payBtn = document.getElementById('quickPayBtn');

        if (!companyId) {
            displayDiv.textContent = `BDT 0.00`;
            advanceDiv.textContent = `BDT 0.00`;
            payBtn.disabled = true;
            return;
        }

        // Fetch fresh data from server
        fetch(`/api/company/${companyId}`)
            .then(response => response.json())
            .then(data => {
                console.log('Company data received:', data);
                const dueAmount = parseFloat(data.total_due || 0);
                const advanceAmount = parseFloat(data.advance_payment || 0);
                displayDiv.textContent = `BDT ${dueAmount.toFixed(2)}`;
                advanceDiv.textContent = `BDT ${advanceAmount.toFixed(2)}`;
                payBtn.disabled = false;
            })
            .catch(error => {
                console.error('Error fetching company data:', error);
                payBtn.disabled = true;
            });
    };
    
    // Open payment modal from quick section
    window.openPaymentModal = function() {
        const quickSelectHidden = document.getElementById('quickCompanySelect');
        const companyId = quickSelectHidden.value;
        
        if (companyId) {
            const paymentModal = new bootstrap.Modal(document.getElementById('companyPaymentModal'));
            const modalSelect = document.getElementById('paymentCompanyId');
            
            // Pre-select the company in the modal
            modalSelect.value = companyId;
            updateModalDueAmount();
            
            paymentModal.show();
        }
    };
    
    // Update modal due amount
    window.updateModalDueAmount = function() {
        const select = document.getElementById('paymentCompanyId');
        const companyId = select.value;
        const displayDiv = document.getElementById('modalDueAmountDisplay');

        if (!companyId) {
            displayDiv.textContent = `BDT 0.00`;
            return;
        }

        // Fetch fresh data from server instead of using data attributes
        fetch(`/api/company/${companyId}`)
            .then(response => response.json())
            .then(data => {
                console.log('Modal - Company data received:', data);
                const dueAmount = parseFloat(data.total_due || 0);
                displayDiv.textContent = `BDT ${dueAmount.toFixed(2)}`;
            })
            .catch(error => {
                console.error('Error fetching company data:', error);
                displayDiv.textContent = `BDT 0.00`;
            });
    };
    
    // Company search autocomplete functionality
    (function() {
        const quickCompanySearch = document.getElementById('quickCompanySearch');
        const companySuggestions = document.getElementById('companySuggestions');
        const quickCompanySelect = document.getElementById('quickCompanySelect');
        let allCompanies = [];

        if (!quickCompanySearch || !companySuggestions || !quickCompanySelect) {
            console.error('Quick company payment elements not found!');
            return;
        }

        // Fetch all companies on page load
        fetch('/api/companies')
            .then(response => {
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                return response.json();
            })
            .then(data => {
                if (data.success && data.companies) {
                    allCompanies = data.companies;
                    console.log('Companies loaded successfully:', allCompanies.length);
                } else {
                    console.error('Failed to load companies:', data);
                }
            })
            .catch(error => {
                console.error('Error fetching companies:', error);
                alert('Failed to load companies. Please refresh the page.');
            });

        // Show all companies when clicking on the search input
        if (quickCompanySearch) {
            quickCompanySearch.addEventListener('focus', function(e) {
                console.log('Search field focused, companies count:', allCompanies.length);
                if (allCompanies.length > 0) {
                    showCompanySuggestions('');
                }
            });
        }

        // Show all companies when clicking the dropdown arrow button
        const quickCompanyDropdownBtn = document.getElementById('quickCompanyDropdownBtn');
        if (quickCompanyDropdownBtn) {
            quickCompanyDropdownBtn.addEventListener('click', function(e) {
                e.preventDefault();
                e.stopPropagation();
                console.log('Dropdown button clicked, companies count:', allCompanies.length);
                if (allCompanies.length > 0) {
                    // Toggle suggestions visibility
                    if (companySuggestions.style.display === 'block') {
                        companySuggestions.style.display = 'none';
                    } else {
                        showCompanySuggestions('');
                        quickCompanySearch.focus();
                    }
                } else {
                    alert('No companies available. Please add companies first.');
                }
            });
        }

        // Filter companies when typing
        if (quickCompanySearch) {
            quickCompanySearch.addEventListener('input', function(e) {
                const searchTerm = e.target.value.toLowerCase().trim();
                showCompanySuggestions(searchTerm);
            });
        }

        // Function to display company suggestions
        function showCompanySuggestions(searchTerm) {
            if (!companySuggestions) return;

            const filtered = searchTerm
                ? allCompanies.filter(company => company.company_name.toLowerCase().includes(searchTerm))
                : allCompanies;

            console.log('Showing suggestions, filtered count:', filtered.length);

            if (filtered.length === 0) {
                companySuggestions.innerHTML = '<div class="dropdown-item disabled">No companies found</div>';
                companySuggestions.style.display = 'block';
                return;
            }

            companySuggestions.innerHTML = filtered.map(company =>
                `<button class="dropdown-item" type="button" data-id="${company.id}" data-name="${company.company_name}">
                    ${company.company_name}
                    ${company.total_due > 0 ? ` - Due: BDT ${parseFloat(company.total_due).toFixed(2)}` : ''}
                </button>`
            ).join('');
            companySuggestions.style.display = 'block';

            // Add click handlers to suggestions
            companySuggestions.querySelectorAll('.dropdown-item[data-id]').forEach(item => {
                item.addEventListener('click', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    const companyId = this.getAttribute('data-id');
                    const companyName = this.getAttribute('data-name');
                    console.log('Company selected:', companyName, 'ID:', companyId);
                    quickCompanySearch.value = companyName;
                    quickCompanySelect.value = companyId;
                    companySuggestions.style.display = 'none';
                    updateQuickDueAmount(companyId);
                });
            });
        }

        // Close suggestions when clicking outside
        document.addEventListener('click', function(e) {
            if (e.target !== quickCompanySearch && e.target !== quickCompanyDropdownBtn) {
                companySuggestions.style.display = 'none';
            }
        });
    })();
    
    // Payment History Search and Filter
    const paymentSearch = document.getElementById('paymentSearch');
    const clearPaymentSearch = document.getElementById('clearPaymentSearch');
    const paymentMonthFilter = document.getElementById('paymentMonthFilter');
    const paymentYearFilter = document.getElementById('paymentYearFilter');
    const paymentTable = document.querySelector('#paymentHistoryTable tbody');
    let allPaymentRows = [];
    let filteredPaymentRows = [];
    let currentPaymentPage = 1;
    const paymentsPerPage = 10;
    
    if (paymentTable) {
        allPaymentRows = Array.from(paymentTable.querySelectorAll('tr'));
        filteredPaymentRows = [...allPaymentRows];
        
        function performPaymentSearch() {
            const searchTerm = paymentSearch.value.toLowerCase().trim();
            const selectedMonth = paymentMonthFilter.value;
            const selectedYear = paymentYearFilter.value;
            
            filteredPaymentRows = allPaymentRows.filter(row => {
                const receiptNumber = row.cells[0].textContent.toLowerCase();
                const companyName = row.cells[1].textContent.toLowerCase();
                const paymentDate = row.getAttribute('data-payment-date');
                
                // Search filter
                const matchesSearch = !searchTerm || 
                    receiptNumber.includes(searchTerm) || 
                    companyName.includes(searchTerm);
                
                // Month/Year filter
                let matchesDate = true;
                if (selectedMonth || selectedYear) {
                    if (paymentDate) {
                        const [year, month] = paymentDate.split('-');
                        
                        if (selectedMonth && month !== selectedMonth) {
                            matchesDate = false;
                        }
                        if (selectedYear && year !== selectedYear) {
                            matchesDate = false;
                        }
                    }
                }
                
                return matchesSearch && matchesDate;
            });
            
            currentPaymentPage = 1;
            displayPaymentPage();
        }
        
        function displayPaymentPage() {
            const startIndex = (currentPaymentPage - 1) * paymentsPerPage;
            const endIndex = startIndex + paymentsPerPage;
            
            allPaymentRows.forEach(row => row.style.display = 'none');
            filteredPaymentRows.slice(startIndex, endIndex).forEach(row => {
                row.style.display = '';
            });
            
            updatePaymentPagination();
        }
        
        function updatePaymentPagination() {
            const totalPages = Math.ceil(filteredPaymentRows.length / paymentsPerPage);
            let paginationHTML = '';
            
            if (totalPages > 1) {
                paginationHTML += '<nav class="mt-3"><ul class="pagination justify-content-center">';
                
                paginationHTML += `<li class="page-item ${currentPaymentPage === 1 ? 'disabled' : ''}">
                    <a class="page-link" href="#" data-page="${currentPaymentPage - 1}">Previous</a>
                </li>`;
                
                for (let i = 1; i <= totalPages; i++) {
                    if (i === 1 || i === totalPages || (i >= currentPaymentPage - 2 && i <= currentPaymentPage + 2)) {
                        paginationHTML += `<li class="page-item ${i === currentPaymentPage ? 'active' : ''}">
                            <a class="page-link" href="#" data-page="${i}">${i}</a>
                        </li>`;
                    } else if (i === currentPaymentPage - 3 || i === currentPaymentPage + 3) {
                        paginationHTML += '<li class="page-item disabled"><span class="page-link">...</span></li>';
                    }
                }
                
                paginationHTML += `<li class="page-item ${currentPaymentPage === totalPages ? 'disabled' : ''}">
                    <a class="page-link" href="#" data-page="${currentPaymentPage + 1}">Next</a>
                </li>`;
                
                paginationHTML += '</ul></nav>';
            }
            
            const paginationContainer = document.getElementById('paymentPagination');
            if (paginationContainer) {
                paginationContainer.innerHTML = paginationHTML;
                
                paginationContainer.querySelectorAll('.page-link').forEach(link => {
                    link.addEventListener('click', function(e) {
                        e.preventDefault();
                        const page = parseInt(this.getAttribute('data-page'));
                        if (page > 0 && page <= totalPages) {
                            currentPaymentPage = page;
                            displayPaymentPage();
                        }
                    });
                });
            }
        }
        
        if (paymentSearch) {
            paymentSearch.addEventListener('input', performPaymentSearch);
        }
        
        if (paymentMonthFilter) {
            paymentMonthFilter.addEventListener('change', performPaymentSearch);
        }
        
        if (paymentYearFilter) {
            paymentYearFilter.addEventListener('change', performPaymentSearch);
        }
        
        if (clearPaymentSearch) {
            clearPaymentSearch.addEventListener('click', function() {
                paymentSearch.value = '';
                paymentMonthFilter.value = '';
                paymentYearFilter.value = '';
                performPaymentSearch();
                paymentSearch.focus();
            });
        }
        
        // Initial display
        displayPaymentPage();
    }
    
    // View Payment Details - Using Event Delegation
    var viewPaymentModal = document.getElementById('viewPaymentModal');
    var viewPaymentContent = document.getElementById('viewPaymentContent');

    document.addEventListener('click', function(e) {
        if (e.target.closest('.view-payment-btn')) {
            var button = e.target.closest('.view-payment-btn');
            var paymentId = button.getAttribute('data-payment-id');
            
            viewPaymentContent.innerHTML = '<div class="text-center"><div class="spinner-border" role="status"></div><p class="mt-2">Loading...</p></div>';
            
            fetch('/get_payment_details/' + paymentId)
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        const payment = data.payment;
                        const prevDue = payment.due_before || 0;
                        const prevAdv = payment.advance_before || 0;
                        const paid = payment.amount || 0;
                        const remainingDue = payment.due_after || 0;
                        const resultingAdv = payment.advance_after || 0;
                        const balanceLabel = remainingDue > 0 ? 'Remaining Due' : 'Advance';
                        const balanceValue = remainingDue > 0 ? remainingDue : resultingAdv;
                        const previousLabel = prevDue > 0 ? 'Previous Due' : 'Previous Advance';
                        const previousValue = prevDue > 0 ? prevDue : prevAdv;

                        viewPaymentContent.innerHTML = `
                            <div class="payment-details" id="printablePayment">
                                <div class="d-flex align-items-start gap-3 mb-3">
                                    <img src="/static/images/logo.png" alt="Company Logo" class="mb-0" style="height: 64px; width: auto;">
                                    <div class="flex-grow-1">
                                        <h3 class="mb-1" style="color: #0f172a; font-weight: 700; font-size: 1.2rem;">SUMSUL HAQUE <span style="font-size: 0.9rem; font-weight: 500;">سَمْسُل حَقّ</span></h3>
                                        <p class="mb-1" style="color: #334155; font-size: 0.95rem;">لِتِجَارَةِ الْمَلَابِسِ الْجَاهِزَةِ ذ.م.م</p>
                                        <p class="mb-1" style="color: #1f2937; font-size: 0.95rem;">READYMADE GARMENTS TRADING L.L.C</p>
                                        <p class="mb-0" style="color: #475569; font-size: 0.9rem;">+971 55 320 9940 (WhatsApp) | +971 56 901 7316 · Shop 018, New Industrial Area - 2, Ajman, U.A.E.</p>
                                    </div>
                                    <div class="text-end" style="font-size: 0.9rem; line-height: 1.35;">
                                        <div><strong>Receipt #</strong> ${payment.receipt_number}</div>
                                        <div><strong>Date</strong> ${payment.payment_date}</div>
                                    </div>
                                </div>
                                <h4 class="mt-0 mb-3">Company Payment Receipt</h4>
                                
                                <div class="row mb-4">
                                    <div class="col-md-6">
                                        <div class="info-card mb-3">
                                            <h6><i class="fas fa-receipt me-2"></i>Receipt Number</h6>
                                            <p class="mb-0"><strong>${payment.receipt_number}</strong></p>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="info-card mb-3">
                                            <h6><i class="fas fa-calendar me-2"></i>Payment Date</h6>
                                            <p class="mb-0">${payment.payment_date}</p>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="row mb-4">
                                    <div class="col-md-12">
                                        <div class="info-card mb-3">
                                            <h6><i class="fas fa-building me-2"></i>Company Name</h6>
                                            <p class="mb-0"><strong>${payment.company_name}</strong></p>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="table-responsive mb-4">
                                    <table class="table table-bordered">
                                        <thead class="table-dark">
                                            <tr>
                                                <th>Description</th>
                                                <th width="30%">Amount</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td><strong>Payment to Supplier Company</strong></td>
                                                <td><strong>BDT ${payment.amount.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</strong></td>
                                            </tr>
                                            <tr>
                                                <td><strong>Payment Method:</strong></td>
                                                <td><span class="badge bg-info">${payment.payment_method}</span></td>
                                            </tr>
                                            <tr>
                                                <td><strong>${previousLabel}:</strong></td>
                                                <td>BDT ${previousValue.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
                                            </tr>
                                            <tr>
                                                <td><strong>Balance Update:</strong></td>
                                                <td>BDT ${previousValue.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})} - BDT ${paid.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})} = BDT ${balanceValue.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})} (${balanceLabel})</td>
                                            </tr>
                                            ${payment.notes ? `
                                            <tr>
                                                <td colspan="2">
                                                    <strong>Notes:</strong><br>
                                                    ${payment.notes}
                                                </td>
                                            </tr>
                                            ` : ''}
                                        </tbody>
                                        <tfoot class="table-secondary">
                                            <tr>
                                                <td class="text-end"><strong>Total Amount Paid:</strong></td>
                                                <td><strong>BDT ${payment.amount.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</strong></td>
                                            </tr>
                                            <tr>
                                                <td class="text-end"><strong>${balanceLabel}:</strong></td>
                                                <td><strong class="${remainingDue > 0 ? 'text-danger' : 'text-success'}">BDT ${balanceValue.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</strong></td>
                                            </tr>
                                        </tfoot>
                                    </table>
                                </div>
                                
                                <div class="receipt-signatures" style="margin-top: 80px; page-break-inside: avoid;">
                                    <div class="row">
                                        <div class="col-md-6 text-center">
                                            <div class="signature-box">
                                                <div class="signature-line" style="border-bottom: 2px solid #000; width: 250px; height: 60px; margin: 15px auto;"></div>
                                                <p class="mb-0"><strong>${payment.company_name}</strong></p>
                                                <small class="text-muted">Supplier Signature</small>
                                            </div>
                                        </div>
                                        <div class="col-md-6 text-center">
                                            <div class="signature-box">
                                                <div class="signature-line" style="border-bottom: 2px solid #000; width: 250px; height: 60px; margin: 15px auto;"></div>
                                                <p class="mb-0"><strong>SH READYMADE GARMENTS TRADING LLC</strong></p>
                                                <small class="text-muted">Company Representative</small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="text-center mt-4">
                                    <p class="text-muted"><small>Generated on: ${new Date().toLocaleDateString()} ${new Date().toLocaleTimeString()}</small></p>
                                    <p class="text-muted"><small>Thank you for your business</small></p>
                                </div>
                            </div>
                        `;
                    } else {
                        viewPaymentContent.innerHTML = '<div class="alert alert-danger">Failed to load payment details</div>';
                    }
                })
                .catch(error => {
                    viewPaymentContent.innerHTML = '<div class="alert alert-danger">Error loading payment details</div>';
                });
            
            var modal = new bootstrap.Modal(viewPaymentModal);
            modal.show();
        }
    });
    
    // Print Payment Receipt
    function printPaymentReceipt() {
        const printableContent = document.getElementById('printablePayment').innerHTML;
        
        const printWindow = window.open('', '_blank');
        printWindow.document.write(`
            <!DOCTYPE html>
            <html>
            <head>
                <title>Payment Receipt - SH Garments</title>
                <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
                <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
                <style>
                    @page {
                        size: A4;
                        margin: 10mm;
                    }
                    
                    body { 
                        font-family: Arial, sans-serif; 
                        margin: 10mm;
                        color: #000;
                        min-height: 100vh;
                        display: flex;
                        flex-direction: column;
                        font-size: 12px;
                        line-height: 1.35;
                    }
                    
                    .payment-details { 
                        max-width: 780px; 
                        margin: 0 auto;
                        border: 2px solid #333;
                        padding: 18px;
                        flex-grow: 1;
                        display: flex;
                        flex-direction: column;
                    }
                    
                    .info-card {
                        background: #f8f9fa;
                        padding: 12px;
                        border-radius: 8px;
                        border-left: 4px solid #007bff;
                    }
                    
                    .table-bordered {
                        border: 2px solid #000 !important;
                    }
                    
                    .table-bordered th,
                    .table-bordered td {
                        border: 1px solid #000 !important;
                        padding: 8px !important;
                        font-size: 12px;
                    }
                    
                    .table-dark th {
                        background: #1f2937 !important;
                        color: white !important;
                    }
                    
                    .receipt-signatures {
                        margin-top: auto !important;
                        padding-top: 40px;
                        page-break-inside: avoid;
                    }
                    
                    .signature-line {
                        border-bottom: 1px solid #000 !important;
                    }
                    
                    @media print {
                        body { 
                            margin: 8mm; 
                            min-height: 100vh;
                        }
                        
                        .payment-details { 
                            border: none; 
                            padding: 14px;
                            min-height: 100vh;
                            display: flex;
                            flex-direction: column;
                        }
                        
                        .no-print { 
                            display: none !important; 
                        }
                        
                        .receipt-signatures {
                            position: absolute;
                            bottom: 80px;
                            left: 0;
                            right: 0;
                            page-break-inside: avoid;
                        }
                    }
                    
                    .text-center { text-align: center; }
                    .signature-box {
                        padding: 14px;
                    }
                </style>
            </head>
            <body>
                ${printableContent}
                <div class="text-center mt-3 no-print">
                    <button onclick="window.print()" class="btn btn-primary me-2">
                        <i class="fas fa-print me-1"></i> Print
                    </button>
                    <button onclick="window.close()" class="btn btn-secondary">
                        <i class="fas fa-times me-1"></i> Close
                    </button>
                </div>
                <script>
                    setTimeout(() => {
                        window.print();
                    }, 500);
                <\/script>
            </body>
            </html>
        `);
        
        printWindow.document.close();
    }
    
    // Print Payment from table button - Using Event Delegation
    document.addEventListener('click', function(e) {
        if (e.target.closest('.print-payment-btn')) {
            var button = e.target.closest('.print-payment-btn');
            var paymentId = button.getAttribute('data-payment-id');
            
            fetch('/get_payment_details/' + paymentId)
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        const payment = data.payment;
                        const prevDue = payment.due_before || 0;
                        const prevAdv = payment.advance_before || 0;
                        const paid = payment.amount || 0;
                        const remainingDue = payment.due_after || 0;
                        const resultingAdv = payment.advance_after || 0;
                        const balanceLabel = remainingDue > 0 ? 'Remaining Due' : 'Advance';
                        const balanceValue = remainingDue > 0 ? remainingDue : resultingAdv;
                        const previousLabel = prevDue > 0 ? 'Previous Due' : 'Previous Advance';
                        const previousValue = prevDue > 0 ? prevDue : prevAdv;

                        const content = `
                            <div class="payment-details">
                                <div style="display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px;">
                                    <img src="/static/images/logo.png" alt="Company Logo" style="height: 60px; width: auto;">
                                    <div style="flex: 1 1 auto;">
                                        <h3 style="margin: 0 0 4px 0; font-size: 1.15rem; color: #111;">SH READYMADE GARMENTS TRADING LLC</h3>
                                        <p style="margin: 0 0 2px 0; font-weight: 600; color: #222;">Company Payment Receipt</p>
                                        <p style="margin: 0; color: #555; font-size: 0.9rem;">+971 55 320 9940 · Shop 018, New Industrial Area - 2, Ajman, U.A.E.</p>
                                    </div>
                                    <div style="text-align: right; font-size: 0.9rem; line-height: 1.35;">
                                        <div><strong>Receipt #</strong> ${payment.receipt_number}</div>
                                        <div><strong>Date</strong> ${payment.payment_date}</div>
                                    </div>
                                </div>
                                
                                <div style="margin-bottom: 20px;">
                                    <div style="display: inline-block; width: 48%; vertical-align: top;">
                                        <p style="margin: 10px 0;"><strong>Receipt Number:</strong> ${payment.receipt_number}</p>
                                    </div>
                                    <div style="display: inline-block; width: 48%; vertical-align: top;">
                                        <p style="margin: 10px 0;"><strong>Date:</strong> ${payment.payment_date}</p>
                                    </div>
                                </div>
                                
                                <div style="margin-bottom: 20px;">
                                    <p style="margin: 10px 0;"><strong>Company Name:</strong> ${payment.company_name}</p>
                                </div>
                                
                                <table style="width: 100%; border-collapse: collapse; margin: 20px 0; border: 2px solid #000;">
                                    <thead>
                                        <tr style="background: #343a40; color: white;">
                                            <th style="border: 1px solid #000; padding: 12px; text-align: left;">Description</th>
                                            <th style="border: 1px solid #000; padding: 12px; text-align: right; width: 30%;">Amount</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td style="border: 1px solid #000; padding: 12px;"><strong>Payment to Supplier Company</strong></td>
                                            <td style="border: 1px solid #000; padding: 12px; text-align: right;"><strong>BDT ${payment.amount.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</strong></td>
                                        </tr>
                                        <tr>
                                            <td style="border: 1px solid #000; padding: 12px;"><strong>Payment Method:</strong></td>
                                            <td style="border: 1px solid #000; padding: 12px; text-align: right;">${payment.payment_method}</td>
                                        </tr>
                                        <tr>
                                            <td style="border: 1px solid #000; padding: 12px;"><strong>${previousLabel}:</strong></td>
                                            <td style="border: 1px solid #000; padding: 12px; text-align: right;">BDT ${previousValue.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
                                        </tr>
                                        <tr>
                                            <td style="border: 1px solid #000; padding: 12px;"><strong>Balance Update:</strong></td>
                                            <td style="border: 1px solid #000; padding: 12px; text-align: right;">BDT ${previousValue.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})} - BDT ${paid.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})} = BDT ${balanceValue.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})} (${balanceLabel})</td>
                                        </tr>
                                        ${payment.notes ? `
                                        <tr>
                                            <td colspan="2" style="border: 1px solid #000; padding: 12px;">
                                                <strong>Notes:</strong><br>${payment.notes}
                                            </td>
                                        </tr>
                                        ` : ''}
                                    </tbody>
                                    <tfoot style="background: #f8f9fa;">
                                        <tr>
                                            <td style="border: 1px solid #000; padding: 12px; text-align: right;"><strong>Total Amount Paid:</strong></td>
                                            <td style="border: 1px solid #000; padding: 12px; text-align: right;"><strong>BDT ${payment.amount.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</strong></td>
                                        </tr>
                                        <tr style="background: ${remainingDue > 0 ? '#ffe6e6' : '#e6ffe6'};">
                                            <td style="border: 1px solid #000; padding: 12px; text-align: right;"><strong>${balanceLabel}:</strong></td>
                                            <td style="border: 1px solid #000; padding: 12px; text-align: right; ${remainingDue > 0 ? 'color: #dc3545;' : 'color: #28a745;'}"><strong>BDT ${balanceValue.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</strong></td>
                                        </tr>
                                        ${balanceValue === 0 ? `
                                        <tr style="background: #e6f2ff;">
                                            <td colspan="2" style="border: 1px solid #000; padding: 12px; text-align: center; color: #0056b3;"><strong>✓ Account Settled - No Outstanding Balance</strong></td>
                                        </tr>
                                        ` : ''}
                                    </tfoot>
                                </table>
                                
                                <div class="receipt-signatures" style="margin-top: 100px; page-break-inside: avoid;">
                                    <div style="display: flex; justify-content: space-between;">
                                        <div style="text-align: center; width: 45%;">
                                            <div style="border-bottom: 2px solid #000; height: 60px; margin-bottom: 10px;"></div>
                                            <p style="margin: 5px 0;"><strong>${payment.company_name}</strong></p>
                                            <small style="color: #666;">Supplier Signature</small>
                                        </div>
                                        <div style="text-align: center; width: 45%;">
                                            <div style="border-bottom: 2px solid #000; height: 60px; margin-bottom: 10px;"></div>
                                            <p style="margin: 5px 0;"><strong>SH READYMADE GARMENTS TRADING LLC</strong></p>
                                            <small style="color: #666;">Company Representative</small>
                                        </div>
                                    </div>
                                </div>
                                
                                <div style="text-align: center; margin-top: 30px;">
                                    <p style="color: #666; font-size: 12px; margin: 5px 0;">Generated on: ${new Date().toLocaleDateString()} ${new Date().toLocaleTimeString()}</p>
                                    <p style="color: #666; font-size: 12px; margin: 5px 0;">Thank you for your business</p>
                                </div>
                            </div>
                        `;
                        
                        const printWindow = window.open('', '_blank');
                        printWindow.document.write(`
                            <!DOCTYPE html>
                            <html>
                            <head>
                                <title>Payment Receipt</title>
                                <style>
                                    @page {
                                        size: A4;
                                        margin: 10mm;
                                    }
                                    
                                    body { 
                                        font-family: Arial, sans-serif; 
                                        margin: 10mm; 
                                        min-height: 100vh;
                                        display: flex;
                                        flex-direction: column;
                                        font-size: 12px;
                                        line-height: 1.35;
                                    }
                                    
                                    .payment-details {
                                        max-width: 780px;
                                        margin: 0 auto;
                                        border: 2px solid #333;
                                        padding: 18px;
                                        flex-grow: 1;
                                        display: flex;
                                        flex-direction: column;
                                    }
                                    
                                    .receipt-signatures {
                                        margin-top: auto !important;
                                        padding-top: 40px;
                                    }
                                    
                                    @media print { 
                                        body { 
                                            margin: 8mm; 
                                            min-height: 100vh;
                                        }
                                        
                                        .payment-details {
                                            border: none;
                                            min-height: 100vh;
                                        }
                                        
                                        .no-print { 
                                            display: none !important; 
                                        }
                                        
                                        .receipt-signatures {
                                            position: absolute;
                                            bottom: 80px;
                                            left: 0;
                                            right: 0;
                                        }
                                    }
                                </style>
                            </head>
                            <body>
                                ${content}
                                <div class="text-center mt-3 no-print">
                                    <button onclick="window.print()">Print</button>
                                    <button onclick="window.close()">Close</button>
                                </div>
                                <script>setTimeout(() => window.print(), 500);<\/script>
                            </body>
                            </html>
                        `);
                        printWindow.document.close();
                    }
                });
        }
    });

    // Edit Payment Button - Using Event Delegation
    document.addEventListener('click', function(e) {
        if (e.target.closest('.edit-payment-btn')) {
            e.preventDefault();
            var button = e.target.closest('.edit-payment-btn');
            var paymentId = button.getAttribute('data-payment-id');
            var receiptNumber = button.getAttribute('data-receipt-number');
            var companyId = button.getAttribute('data-company-id');
            var amount = button.getAttribute('data-amount');
            var paymentDate = button.getAttribute('data-payment-date');
            var paymentMethod = button.getAttribute('data-payment-method');
            var notes = button.getAttribute('data-notes');
            
            var editModal = document.getElementById('editPaymentModal');
            var editForm = document.getElementById('editPaymentForm');
            
            // Populate form fields
            document.getElementById('editReceiptNumber').value = receiptNumber;
            document.getElementById('editPaymentCompanyId').value = companyId;
            document.getElementById('editPaymentCompanyIdHidden').value = companyId;
            document.getElementById('editPaymentAmount').value = amount;
            document.getElementById('editPaymentDate').value = paymentDate;
            document.getElementById('editPaymentMethod').value = paymentMethod;
            document.getElementById('editPaymentNotes').value = notes;
            
            // Set form action
            editForm.action = "/edit_company_payment/" + paymentId;
            
            var modal = new bootstrap.Modal(editModal);
            modal.show();
        }
    });

    // Delete Payment Confirmation - Using Event Delegation
    var deletePaymentModal = document.getElementById('deletePaymentModal');
    var deletePaymentForm = document.getElementById('deletePaymentForm');
    var deletePaymentMessage = document.getElementById('deletePaymentMessage');

    document.addEventListener('click', function(e) {
        if (e.target.closest('.delete-payment-btn')) {
            var button = e.target.closest('.delete-payment-btn');
            var paymentId = button.getAttribute('data-payment-id');
            var receiptNumber = button.getAttribute('data-receipt-number');

            deletePaymentMessage.innerHTML = `Are you sure you want to delete payment <strong>"${receiptNumber}"</strong>?`;
            deletePaymentForm.action = "/delete_company_payment/" + paymentId;

            var modal = new bootstrap.Modal(deletePaymentModal);
            modal.show();
        }
    });
});
</script>
{% endblock %}