{% extends "base.html" %}

{% block content %}
<!-- Shipment 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-shipping-fast me-3"></i>Shipment Management</h2>
            <p class="lead mb-0">Track and manage all your garment shipments and supplier companies</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="bulkDeleteShipmentsBtn" 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="#addSupplierModal">
        <i class="fas fa-industry me-2"></i> Add New Supplier
    </button>
    <button class="btn btn-primary btn-lg glow" data-bs-toggle="modal" data-bs-target="#addShipmentModal">
        <i class="fas fa-plus me-2"></i> Add New Shipment
    </button>
</div>

<!-- Shipping Statistics -->
<div class="row mb-4">
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="manufacturing-stat scroll-animate">
            <i class="fas fa-truck-loading text-primary"></i>
            <h3 class="text-primary mb-1">{{ shipments_active|default(0) }}</h3>
            <p class="text-muted mb-0">Active Shipments</p>
        </div>
    </div>
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="manufacturing-stat scroll-animate">
            <i class="fas fa-check-circle text-success"></i>
            <h3 class="text-success mb-1">{{ shipments_delivered|default(0) }}</h3>
            <p class="text-muted mb-0">Arrived</p>
        </div>
    </div>
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="manufacturing-stat scroll-animate">
            <i class="fas fa-clock text-warning"></i>
            <h3 class="text-warning mb-1">{{ shipments_in_transit|default(0) }}</h3>
            <p class="text-muted mb-0">In Transit</p>
        </div>
    </div>
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="manufacturing-stat scroll-animate">
            <i class="fas fa-exclamation-triangle text-danger"></i>
            <h3 class="text-danger mb-1">{{ shipments_delayed|default(0) }}</h3>
            <p class="text-muted mb-0">Delayed</p>
        </div>
    </div>
</div>

<!-- Shipments Table -->
<div class="garments-card scroll-animate mb-4">
    <div class="card-header">
        <h5><i class="fas fa-shipping-fast me-2"></i> Shipment Records ({{ shipments|length }})</h5>
    </div>
    <div class="card-body">
        <!-- Search and Filter Controls -->
        <div class="row mb-3">
            <div class="col-md-4">
                <div class="input-group">
                    <input type="text" id="shipmentSearch" class="form-control" 
                           placeholder="🔍 Search shipments...">
                    <button class="btn btn-outline-secondary" type="button" id="clearShipmentSearch">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            </div>
            <div class="col-md-3">
                <select id="monthFilter" 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="yearFilter" 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="shipmentsTable">
                <thead>
                    <tr>
                        <th><input type="checkbox" class="form-check-input" id="selectAllShipments" title="Select All"></th>
                        <th>🔢 Shipment Number</th>
                        <th>🏢 Company</th>
                        <th>�️ Products</th>
                        <th>�📅 Ordered Date</th>
                        <th>🚚 Shipping Date</th>
                        <th>📦 Receiving Date</th>
                        <th>💰 Total Cost</th>
                        <th>📊 Status</th>
                        <th>⚡ Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for shipment in shipments %}
                    <tr class="scroll-animate" data-ordered-date="{{ shipment.ordered_date }}">
                        <td>
                            <input type="checkbox" class="form-check-input shipment-checkbox" data-shipment-id="{{ shipment.id }}">
                        </td>
                        <td>
                            <strong class="text-primary">{{ shipment.shipment_number }}</strong>
                            <br>
                            <small class="text-muted">ID: {{ shipment.id }}</small>
                        </td>
                        <td>
                            <div class="d-flex align-items-center">
                                <i class="fas fa-industry me-2 text-muted"></i>
                                {{ shipment.company_name or 'N/A' }}
                            </div>
                        </td>
                        <td>
                            <small class="text-muted">
                                {% if shipment.products_list %}
                                    {{ shipment.products_list }}
                                {% else %}
                                    <span class="text-warning">No products</span>
                                {% endif %}
                            </small>
                            <br>
                            <span class="badge bg-info">{{ shipment.item_count or 0 }} items</span>
                        </td>
                        <td>
                            <i class="fas fa-calendar me-2 text-muted"></i>
                            {{ shipment.ordered_date }}
                        </td>
                        <td>
                            <i class="fas fa-truck me-2 text-muted"></i>
                            {{ shipment.shipping_date or 'TBD' }}
                        </td>
                        <td>
                            <i class="fas fa-box-open me-2 text-muted"></i>
                            {{ shipment.receiving_date or 'TBD' }}
                        </td>
                        <td>
                            <strong class="text-primary">BDT {{ "{:,.2f}".format(shipment.shipping_cost or 0) }}</strong>
                        </td>
                        <td>
                            <span class="status-badge 
                                {% if shipment.status == 'arrived' %}status-arrived
                                {% elif shipment.status == 'shipped' %}status-shipped
                                {% else %}status-ordered{% endif %}">
                                <i class="fas 
                                    {% if shipment.status == 'arrived' %}fa-box-open
                                    {% elif shipment.status == 'shipped' %}fa-shipping-fast
                                    {% else %}fa-clock{% endif %} me-1"></i>
                                {{ shipment.status|title }}
                            </span>
                        </td>
                        <td>
                            <div class="btn-group btn-group-sm" role="group">
                                <button type="button" class="btn btn-outline-info view-shipment-btn" 
                                        data-shipment-id="{{ shipment.id }}"
                                        data-shipment-number="{{ shipment.shipment_number }}"
                                        data-company-name="{{ shipment.company_name or 'N/A' }}"
                                        data-ordered-date="{{ shipment.ordered_date }}"
                                        data-shipping-date="{{ shipment.shipping_date or 'TBD' }}"
                                        data-receiving-date="{{ shipment.receiving_date or 'TBD' }}"
                                        data-shipping-cost="BDT {{ '{:,.2f}'.format(shipment.shipping_cost or 0) }}"
                                        data-status="{{ shipment.status|title }}"
                                        title="View Details">
                                    <i class="fas fa-eye"></i>
                                </button>
                                <button type="button" class="btn btn-outline-warning edit-shipment-btn" 
                                        data-shipment-id="{{ shipment.id }}"
                                        data-shipment-number="{{ shipment.shipment_number }}"
                                        data-company-id="{{ shipment.company_id }}"
                                        data-shipping-cost="{{ shipment.shipping_cost }}"
                                        data-ordered-date="{{ shipment.ordered_date }}"
                                        data-shipping-date="{{ shipment.shipping_date or '' }}"
                                        data-receiving-date="{{ shipment.receiving_date or '' }}"
                                        data-paid-amount="{{ shipment.paid_amount }}"
                                        data-due-amount="{{ shipment.due_amount }}"
                                        data-status="{{ shipment.status }}"
                                        title="Edit Shipment">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <button type="button" class="btn btn-outline-danger delete-shipment-btn" 
                                        data-shipment-id="{{ shipment.id }}"
                                        data-shipment-number="{{ shipment.shipment_number }}"
                                        title="Delete Shipment">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        <div id="shipmentPagination"></div>
    </div>
</div>

<!-- Supplier Companies Table -->
<div class="garments-card scroll-animate mb-4">
    <div class="card-header">
        <h5><i class="fas fa-industry me-2"></i> Supplier Companies ({{ companies|length }})</h5>
    </div>
    <div class="card-body">
        <!-- Supplier Search -->
        <div class="row mb-3">
            <div class="col-md-4">
                <div class="input-group">
                    <input type="text" id="supplierSearch" class="form-control" 
                           placeholder="🔍 Search suppliers...">
                    <button class="btn btn-outline-secondary" type="button" id="clearSupplierSearch">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            </div>
        </div>
        
        <div class="table-responsive">
            <table class="table table-striped table-hover" id="suppliersTable">
                <thead>
                    <tr>
                        <th>🏢 Company Name</th>
                        <th>👤 Contact Person</th>
                        <th>📧 Email</th>
                        <th>📞 Phone</th>
                        <th>📍 Address</th>
                        <th>💰 Balance</th>
                        <th>⚡ Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for company in companies %}
                    <tr data-company-id="{{ company.id }}">
                        <td>
                            <strong class="text-primary">{{ company.company_name }}</strong>
                        </td>
                        <td>
                            <i class="fas fa-user me-2 text-muted"></i>
                            {{ company.contact_person or '-' }}
                        </td>
                        <td>
                            <small>{{ company.email or '-' }}</small>
                        </td>
                        <td>
                            <small>{{ company.phone or '-' }}</small>
                        </td>
                        <td>
                            <small class="text-muted">{{ company.address or '-' }}</small>
                        </td>
                        <td>
                            {% if company.total_due > 0 %}
                                <strong class="text-danger">
                                    <i class="fas fa-arrow-up me-1"></i>Due: BDT {{ "{:,.2f}".format(company.total_due) }}
                                </strong>
                            {% elif company.advance_payment > 0 %}
                                <strong class="text-success">
                                    <i class="fas fa-arrow-down me-1"></i>Advance: BDT {{ "{:,.2f}".format(company.advance_payment) }}
                                </strong>
                            {% else %}
                                <span class="text-muted">-</span>
                            {% endif %}
                        </td>
                        <td>
                            <div class="btn-group btn-group-sm" role="group">
                                <button class="btn btn-outline-success pay-supplier-btn" 
                                        data-company-id="{{ company.id }}"
                                        data-company-name="{{ company.company_name }}"
                                        data-total-due="{{ company.total_due or 0 }}"
                                        data-advance-payment="{{ company.advance_payment or 0 }}"
                                        data-contact-person="{{ company.contact_person or '' }}"
                                        data-phone="{{ company.phone or '' }}"
                                        data-email="{{ company.email or '' }}"
                                        title="Make Payment">
                                    <i class="fas fa-credit-card"></i>
                                </button>
                                <button class="btn btn-outline-warning edit-supplier-btn" 
                                        data-company-id="{{ company.id }}"
                                        data-company-name="{{ company.company_name }}"
                                        data-contact-person="{{ company.contact_person or '' }}"
                                        data-email="{{ company.email or '' }}"
                                        data-phone="{{ company.phone or '' }}"
                                        data-address="{{ company.address or '' }}"
                                        title="Edit">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <button class="btn btn-outline-danger delete-supplier-btn" 
                                        data-company-id="{{ company.id }}"
                                        data-company-name="{{ company.company_name }}"
                                        title="Delete">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        <div id="supplierPagination"></div>
    </div>
</div>

<!-- Add Shipment Modal -->
<div class="modal fade" id="addShipmentModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-shipping-fast me-2"></i> Add New Shipment
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" action="{{ url_for('add_shipment') }}">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">🔢 Shipment Number</label>
                                <input type="text" class="form-control" name="shipment_number" required 
                                       placeholder="e.g., SH-2024-001" id="newShipmentNumber">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">🏢 Supplier Company</label>
                                <select class="form-select" name="company_id" required id="newCompanyId">
                                    <option value="">Select Company</option>
                                    {% for company in companies %}
                                    <option value="{{ company.id }}">{{ company.company_name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label class="form-label">📅 Ordered Date</label>
                                <input type="date" class="form-control" name="ordered_date" required 
                                       value="{{ today }}" id="newOrderedDate">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label class="form-label">🚚 Shipping Date <small class="text-muted">(Optional)</small></label>
                                <input type="date" class="form-control" name="shipping_date" 
                                       id="newShippingDate">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label class="form-label">📦 Receiving Date <small class="text-muted">(Optional)</small></label>
                                <input type="date" class="form-control" name="receiving_date" 
                                       id="newReceivingDate">
                            </div>
                        </div>
                    </div>
                    
                    <!-- Products Section -->
                    <div class="mb-4">
                        <h6 class="mb-3"><i class="fas fa-box me-2"></i>Shipment Products</h6>
                        <div id="shipmentProductsContainer">
                            <div class="product-row mb-3 border p-3 rounded">
                                <div class="row">
                                    <div class="col-md-5">
                                        <label class="form-label small">Product Name *</label>
                                        <input type="text" class="form-control product-name-input" name="product_name[]" required placeholder="Enter product name...">
                                    </div>
                                    <div class="col-md-2">
                                        <label class="form-label small">Quantity *</label>
                                        <input type="number" class="form-control quantity-input" name="quantity[]" required min="1" value="1">
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label small">Unit Price (BDT) *</label>
                                        <input type="number" step="0.01" class="form-control price-input" name="unit_price[]" required min="0" placeholder="0.00">
                                    </div>
                                    <div class="col-md-2">
                                        <label class="form-label small">Total (BDT)</label>
                                        <input type="text" class="form-control total-display" readonly value="0.00">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Add Product Button -->
                        <button type="button" class="btn btn-outline-primary w-100 mb-3" id="addShipmentProductBtn">
                            <i class="fas fa-plus me-1"></i> Add Another Product
                        </button>

                        <!-- Grand Total -->
                        <div class="alert alert-success">
                            <div class="d-flex justify-content-between align-items-center">
                                <strong>💰 Total Shipping Cost (BDT):</strong>
                                <strong id="shipmentGrandTotal">৳ 0.00</strong>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">📊 Status</label>
                        <select class="form-select" name="status" required id="newStatus">
                            <option value="ordered">📋 Ordered</option>
                            <option value="shipped">🚚 Shipped</option>
                            <option value="arrived">📦 Arrived</option>
                        </select>
                    </div>
                    <div class="alert alert-info">
                        <i class="fas fa-info-circle me-2"></i>
                        <strong>Shipping Information:</strong> Add all products in this shipment. The total cost will be calculated automatically in BDT (৳).
                    </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> Close
                    </button>
                    <button type="submit" class="btn btn-primary glow">
                        <i class="fas fa-check me-1"></i> Add Shipment
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Edit Shipment Modal -->
<div class="modal fade" id="editShipmentModal" 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 Shipment
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form id="editShipmentForm" method="POST">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">🔢 Shipment Number</label>
                                <input type="text" class="form-control" name="shipment_number" required 
                                       id="editShipmentNumber">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">🏢 Supplier Company</label>
                                <select class="form-select" name="company_id" required id="editCompanyId">
                                    <option value="">Select Company</option>
                                    {% for company in companies %}
                                    <option value="{{ company.id }}">{{ company.company_name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label class="form-label">📅 Ordered Date</label>
                                <input type="date" class="form-control" name="ordered_date" required 
                                       id="editOrderedDate">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label class="form-label">🚚 Shipping Date <small class="text-muted">(Optional)</small></label>
                                <input type="date" class="form-control" name="shipping_date" 
                                       id="editShippingDate">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label class="form-label">📦 Receiving Date <small class="text-muted">(Optional)</small></label>
                                <input type="date" class="form-control" name="receiving_date" 
                                       id="editReceivingDate">
                            </div>
                        </div>
                    </div>
                    
                    <!-- Products Section for Edit -->
                    <div class="mb-4">
                        <h6 class="mb-3"><i class="fas fa-box me-2"></i>Shipment Products</h6>
                        <div id="editShipmentProductsContainer">
                            <!-- Products will be loaded dynamically -->
                        </div>

                        <!-- Add Product Button -->
                        <button type="button" class="btn btn-outline-primary w-100 mb-3" id="addEditShipmentProductBtn">
                            <i class="fas fa-plus me-1"></i> Add Another Product
                        </button>

                        <!-- Grand Total -->
                        <div class="alert alert-success">
                            <div class="d-flex justify-content-between align-items-center">
                                <strong>💰 Total Shipping Cost (BDT):</strong>
                                <strong id="editShipmentGrandTotal">৳ 0.00</strong>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">📊 Status</label>
                        <select class="form-select" name="status" required id="editStatus">
                            <option value="ordered">📋 Ordered</option>
                            <option value="shipped">🚚 Shipped</option>
                            <option value="arrived">📦 Arrived</option>
                        </select>
                    </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> Close
                    </button>
                    <button type="submit" class="btn btn-warning glow">
                        <i class="fas fa-save me-1"></i> Update Shipment
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- View Shipment Modal -->
<div class="modal fade" id="viewShipmentModal" 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> Shipment Details
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="viewShipmentContent">
                <!-- 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>
                <button type="button" class="btn btn-success" id="printShipmentBtn">
                    <i class="fas fa-print me-1"></i> Print Shipment
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteShipmentModal" 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="deleteShipmentMessage">Are you sure you want to delete this shipment?</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="deleteShipmentForm" method="POST" style="display: inline;">
                    <button type="submit" class="btn btn-danger">
                        <i class="fas fa-trash me-1"></i> Delete Shipment
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Add Supplier Modal -->
<div class="modal fade" id="addSupplierModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="fas fa-industry me-2"></i> Add New Supplier</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" action="{{ url_for('add_company') }}">
                <input type="hidden" name="redirect_to" value="shipments">
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">🏢 Company Name <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" name="company_name" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">👤 Contact Person <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" name="contact_person" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">📧 Email</label>
                        <input type="email" class="form-control" name="email">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">📞 Phone</label>
                        <input type="text" class="form-control" name="phone">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">📍 Address</label>
                        <textarea class="form-control" name="address" rows="3"></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> Close</button>
                    <button type="submit" class="btn btn-success glow"><i class="fas fa-check me-1"></i> Add Supplier</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Edit Supplier Modal -->
<div class="modal fade" id="editSupplierModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="fas fa-edit me-2"></i> Edit Supplier</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form id="editSupplierForm" method="POST">
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">🏢 Company Name <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" name="company_name" id="editCompanyName" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">👤 Contact Person <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" name="contact_person" id="editContactPerson" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">📧 Email</label>
                        <input type="email" class="form-control" name="email" id="editEmail">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">📞 Phone</label>
                        <input type="text" class="form-control" name="phone" id="editPhone">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">📍 Address</label>
                        <textarea class="form-control" name="address" id="editAddress" rows="3"></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> Close</button>
                    <button type="submit" class="btn btn-warning glow"><i class="fas fa-check me-1"></i> Update Supplier</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Delete Supplier Confirmation Modal -->
<div class="modal fade" id="deleteSupplierModal" 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="deleteSupplierMessage">Are you sure you want to delete this supplier?</p>
                <div class="alert alert-warning">
                    <strong>Warning:</strong> This action cannot be undone! Make sure the supplier has no shipment records before deleting.
                </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="deleteSupplierForm" method="POST" style="display: inline;">
                    <input type="hidden" name="redirect_to" value="shipments">
                    <button type="submit" class="btn btn-danger"><i class="fas fa-trash me-1"></i> Delete Supplier</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') }}">
                <input type="hidden" name="redirect_to" value="shipments">
                <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>
                                <input type="text" class="form-control" id="paymentCompanyName" readonly>
                                <input type="hidden" name="company_id" id="paymentCompanyId">
                            </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">
                        <i class="fas fa-check me-1"></i> Record Payment
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

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

    // Bulk delete shipments
    const selectAllShipments = document.getElementById('selectAllShipments');
    const bulkDeleteShipmentsBtn = document.getElementById('bulkDeleteShipmentsBtn');

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

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

    // Select/Deselect all VISIBLE shipments on current page
    if (selectAllShipments) {
        selectAllShipments.addEventListener('change', function() {
            const visibleCheckboxes = getVisibleShipmentCheckboxes();
            visibleCheckboxes.forEach(cb => cb.checked = this.checked);
            updateBulkDeleteShipmentsButton();
        });
    }

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

    if (bulkDeleteShipmentsBtn) {
        bulkDeleteShipmentsBtn.addEventListener('click', async function() {
            const ids = Array.from(document.querySelectorAll('.shipment-checkbox:checked')).map(cb => cb.dataset.shipmentId);
            if (ids.length === 0) return;
            if (!confirm(`Delete ${ids.length} shipment(s)?`)) return;
            try {
                const res = await fetch('/bulk_delete_shipments', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ shipment_ids: ids })
                });
                const data = await res.json();
                if (data.success) {
                    alert(data.message);
                    location.reload();
                } else {
                    alert(data.message || 'Failed to delete shipments');
                }
            } catch (err) {
                console.error(err);
                alert('Error deleting shipments');
            }
        });
    }
    
    // ==================== MULTI-PRODUCT SHIPMENT FUNCTIONALITY ====================
    
    // Add product row in Add Shipment Modal
    const addShipmentProductBtn = document.getElementById('addShipmentProductBtn');
    const shipmentProductsContainer = document.getElementById('shipmentProductsContainer');
    
    if (addShipmentProductBtn && shipmentProductsContainer) {
        addShipmentProductBtn.addEventListener('click', function() {
            const productRow = document.createElement('div');
            productRow.className = 'product-row mb-3 border p-3 rounded position-relative';
            productRow.innerHTML = `
                <button type="button" class="btn btn-sm btn-danger position-absolute top-0 end-0 m-2 remove-product-btn">
                    <i class="fas fa-times"></i>
                </button>
                <div class="row">
                    <div class="col-md-5">
                        <label class="form-label small">Product Name *</label>
                        <input type="text" class="form-control product-name-input" name="product_name[]" required placeholder="Enter product name...">
                    </div>
                    <div class="col-md-2">
                        <label class="form-label small">Quantity *</label>
                        <input type="number" class="form-control quantity-input" name="quantity[]" required min="1" value="1">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label small">Unit Price (BDT) *</label>
                        <input type="number" step="0.01" class="form-control price-input" name="unit_price[]" required min="0" placeholder="0.00">
                    </div>
                    <div class="col-md-2">
                        <label class="form-label small">Total (BDT)</label>
                        <input type="text" class="form-control total-display" readonly value="0.00">
                    </div>
                </div>
            `;
            shipmentProductsContainer.appendChild(productRow);
            updateShipmentGrandTotal();
        });
    }
    
    // Remove product row
    document.addEventListener('click', function(e) {
        if (e.target.closest('.remove-product-btn')) {
            const productRow = e.target.closest('.product-row');
            if (shipmentProductsContainer && shipmentProductsContainer.querySelectorAll('.product-row').length > 1) {
                productRow.remove();
                updateShipmentGrandTotal();
            } else {
                alert('At least one product is required!');
            }
        }
    });
    
    // Calculate total for each product row and grand total
    function updateShipmentGrandTotal() {
        let grandTotal = 0;
        const productRows = shipmentProductsContainer ? shipmentProductsContainer.querySelectorAll('.product-row') : [];
        
        productRows.forEach(row => {
            const quantity = parseFloat(row.querySelector('.quantity-input')?.value || 0);
            const unitPrice = parseFloat(row.querySelector('.price-input')?.value || 0);
            const total = quantity * unitPrice;
            
            const totalDisplay = row.querySelector('.total-display');
            if (totalDisplay) {
                totalDisplay.value = total.toFixed(2);
            }
            
            grandTotal += total;
        });
        
        const grandTotalElement = document.getElementById('shipmentGrandTotal');
        if (grandTotalElement) {
            grandTotalElement.textContent = `৳ ${grandTotal.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})}`;
        }
    }
    
    // Update totals when quantity or price changes (use event delegation for dynamically added elements)
    document.addEventListener('input', function(e) {
        if (e.target.classList.contains('quantity-input') || e.target.classList.contains('price-input')) {
            updateShipmentGrandTotal();
        }
        // Edit mode inputs
        if (e.target.classList.contains('edit-quantity-input') || e.target.classList.contains('edit-price-input')) {
            updateEditShipmentGrandTotal();
        }
    });
    
    // Initialize total calculation when add shipment modal is opened
    const addShipmentModal = document.getElementById('addShipmentModal');
    if (addShipmentModal) {
        addShipmentModal.addEventListener('shown.bs.modal', function() {
            if (shipmentProductsContainer) {
                updateShipmentGrandTotal();
            }
        });
    }
    
    // Initialize total calculation on page load
    if (shipmentProductsContainer) {
        updateShipmentGrandTotal();
    }
    
    // ==================== EDIT SHIPMENT MULTI-PRODUCT FUNCTIONALITY ====================
    
    // Add product row in Edit Shipment Modal
    const addEditShipmentProductBtn = document.getElementById('addEditShipmentProductBtn');
    const editShipmentProductsContainer = document.getElementById('editShipmentProductsContainer');
    
    if (addEditShipmentProductBtn) {
        addEditShipmentProductBtn.addEventListener('click', function() {
            if (!editShipmentProductsContainer) return;
            
            const productRow = document.createElement('div');
            productRow.className = 'product-row mb-3 border p-3 rounded position-relative';
            productRow.innerHTML = `
                <button type="button" class="btn btn-sm btn-danger position-absolute top-0 end-0 m-2 remove-edit-product-btn">
                    <i class="fas fa-times"></i>
                </button>
                <div class="row">
                    <div class="col-md-5">
                        <label class="form-label small">Product Name *</label>
                        <input type="text" class="form-control edit-product-name-input" name="product_name[]" required placeholder="Enter product name...">
                    </div>
                    <div class="col-md-2">
                        <label class="form-label small">Quantity *</label>
                        <input type="number" class="form-control edit-quantity-input" name="quantity[]" required min="1" value="1">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label small">Unit Price (BDT) *</label>
                        <input type="number" step="0.01" class="form-control edit-price-input" name="unit_price[]" required min="0" placeholder="0.00">
                    </div>
                    <div class="col-md-2">
                        <label class="form-label small">Total (BDT)</label>
                        <input type="text" class="form-control edit-total-display" readonly value="0.00">
                    </div>
                </div>
            `;
            editShipmentProductsContainer.appendChild(productRow);
            updateEditShipmentGrandTotal();
        });
    }
    
    // Remove product row from edit modal
    document.addEventListener('click', function(e) {
        if (e.target.closest('.remove-edit-product-btn')) {
            const productRow = e.target.closest('.product-row');
            if (editShipmentProductsContainer && editShipmentProductsContainer.querySelectorAll('.product-row').length > 1) {
                productRow.remove();
                updateEditShipmentGrandTotal();
            } else {
                alert('At least one product is required!');
            }
        }
    });
    
    // Calculate total for edit modal
    function updateEditShipmentGrandTotal() {
        let grandTotal = 0;
        const productRows = editShipmentProductsContainer ? editShipmentProductsContainer.querySelectorAll('.product-row') : [];
        
        productRows.forEach(row => {
            const quantity = parseFloat(row.querySelector('.edit-quantity-input')?.value || 0);
            const unitPrice = parseFloat(row.querySelector('.edit-price-input')?.value || 0);
            const total = quantity * unitPrice;
            
            const totalDisplay = row.querySelector('.edit-total-display');
            if (totalDisplay) {
                totalDisplay.value = total.toFixed(2);
            }
            
            grandTotal += total;
        });
        
        const grandTotalElement = document.getElementById('editShipmentGrandTotal');
        if (grandTotalElement) {
            grandTotalElement.textContent = `৳ ${grandTotal.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})}`;
        }
    }
    
    // ==================== END EDIT MULTI-PRODUCT FUNCTIONALITY ====================
    
    // ==================== END MULTI-PRODUCT FUNCTIONALITY ====================
    
    // View Shipment Details - Using Event Delegation
    var viewModal = document.getElementById('viewShipmentModal');
    var viewContent = document.getElementById('viewShipmentContent');
    var printShipmentBtn = document.getElementById('printShipmentBtn');

    // Consolidated click handler for all shipment action buttons
    document.addEventListener('click', function(e) {
        // View Shipment Button
        if (e.target.closest('.view-shipment-btn')) {
            e.preventDefault();
            console.log('View shipment button clicked');
            var button = e.target.closest('.view-shipment-btn');
            var shipmentId = button.getAttribute('data-shipment-id');

            viewContent.innerHTML = '<div class="text-center"><div class="spinner-border" role="status"></div><p class="mt-2">Loading...</p></div>';
            
            // Fetch shipment details with items from API
            fetch(`/api/shipment/${shipmentId}`)
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        const shipment = data.shipment;
                        const items = data.items || [];
                        
                        // Build items table
                        let itemsTable = '';
                        if (items.length > 0) {
                            itemsTable = `
                                <h6 class="mb-3 mt-4"><i class="fas fa-box me-2"></i>Products</h6>
                                <div class="table-responsive mb-4">
                                    <table class="table table-bordered" style="background: white !important;">
                                        <thead style="background: #4c51bf !important; color: white !important;">
                                            <tr>
                                                <th style="width: 40%; color: white !important; padding: 12px; background: #4c51bf !important;">Product Name</th>
                                                <th style="width: 15%; color: white !important; padding: 12px; background: #4c51bf !important;">Quantity</th>
                                                <th style="width: 20%; color: white !important; padding: 12px; background: #4c51bf !important;">Unit Price (BDT)</th>
                                                <th style="width: 25%; color: white !important; padding: 12px; background: #4c51bf !important;">Total (BDT)</th>
                                            </tr>
                                        </thead>
                                        <tbody style="background: #2d3748 !important; color: white !important;">
                                            ${items.map(item => `
                                                <tr>
                                                    <td style="color: white !important; padding: 10px; background: #2d3748 !important;">${item.product_name}</td>
                                                    <td style="color: white !important; padding: 10px; background: #2d3748 !important;">${item.quantity}</td>
                                                    <td style="color: white !important; padding: 10px; background: #2d3748 !important;">৳ ${parseFloat(item.unit_price).toFixed(2)}</td>
                                                    <td style="color: white !important; padding: 10px; background: #2d3748 !important;">৳ ${parseFloat(item.total_price).toFixed(2)}</td>
                                                </tr>
                                            `).join('')}
                                        </tbody>
                                    </table>
                                </div>
                            `;
                        }

                        viewContent.innerHTML = `
                            <div class="receipt-container" id="printableShipment">
                                <!-- Compact Company Header -->
                                <div class="d-flex align-items-start gap-3 mb-3">
                                    <img src="{{ url_for('static', filename='images/logo.png') }}" alt="Company Logo" class="receipt-logo" style="height: 64px; width: auto;">
                                    <div class="flex-grow-1">
                                        <h3 class="company-name mb-1">SUMSUL HAQUE <span class="fw-normal" style="font-size: 0.9rem;">سَمْسُل حَقّ</span></h3>
                                        <p class="company-subtitle mb-1">لِتِجَارَةِ الْمَلَابِسِ الْجَاهِزَةِ ذ.م.م</p>
                                        <p class="company-tagline mb-1">READYMADE GARMENTS TRADING L.L.C</p>
                                        <p class="company-meta mb-0">+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 receipt-meta small">
                                        <div><strong>Shipment No:</strong> ${shipment.shipment_number}</div>
                                        <div><strong>Status:</strong> ${shipment.status}</div>
                                    </div>
                                </div>
                                <h4 class="receipt-title mb-3">SHIPMENT RECEIPT</h4>
                                <div class="receipt-content">
                                    <!-- Shipment Information -->
                                    <div class="row mb-3">
                                        <div class="col-md-6">
                                            <div class="contact-section p-3 rounded">
                                                <h6 class="mb-2"><i class="fas fa-hashtag me-2 text-primary"></i><strong>Shipment Number</strong></h6>
                                                <p class="mb-0 ms-4"><strong>${shipment.shipment_number}</strong></p>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="contact-section p-3 rounded">
                                                <h6 class="mb-2"><i class="fas fa-industry me-2 text-primary"></i><strong>Supplier Company</strong></h6>
                                                <p class="mb-0 ms-4">${shipment.company_name || 'N/A'}</p>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Date Information -->
                                    <div class="row mb-3">
                                        <div class="col-md-4">
                                            <div class="bg-light p-3 rounded">
                                                <h6 class="mb-2"><i class="fas fa-calendar-alt me-2 text-primary"></i><strong>Ordered Date</strong></h6>
                                                <p class="mb-0 ms-4">${shipment.ordered_date || 'N/A'}</p>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="bg-light p-3 rounded">
                                                <h6 class="mb-2"><i class="fas fa-truck me-2 text-success"></i><strong>Shipping Date</strong></h6>
                                                <p class="mb-0 ms-4">${shipment.shipping_date || 'N/A'}</p>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="bg-light p-3 rounded">
                                                <h6 class="mb-2"><i class="fas fa-box-open me-2 text-success"></i><strong>Receiving Date</strong></h6>
                                                <p class="mb-0 ms-4">${shipment.receiving_date || 'N/A'}</p>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <!-- Products Table -->
                                    ${itemsTable}

                                    <div class="receipt-spacer"></div>

                                    <!-- Status Information -->
                                    <div class="row mb-3">
                                        <div class="col-md-12">
                                            <div class="bg-light p-3 rounded">
                                                <h6 class="mb-2"><i class="fas fa-info-circle me-2 text-warning"></i><strong>Shipment Status</strong></h6>
                                                <p class="mb-0 ms-4"><span class="badge bg-primary">${shipment.status}</span></p>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="summary-box">
                                        <div class="d-flex justify-content-between"><span>Total Shipping Cost</span><strong>৳ ${parseFloat(shipment.shipping_cost).toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</strong></div>
                                    </div>
                                </div>

                                <!-- Signature Section -->
                                <div class="row mt-4 pt-3 border-top">
                                    <div class="col-md-6 text-center">
                                        <div class="signature-line mb-2"></div>
                                        <p class="mb-0 mt-2"><strong>${shipment.company_name || 'Supplier Company'}</strong></p>
                                        <small class="text-muted">Supplier Representative</small>
                                    </div>
                                    <div class="col-md-6 text-center">
                                        <div class="signature-line mb-2"></div>
                                        <p class="mb-0 mt-2">SUMSUL HAQUE GARMENTS</p>
                                        <small class="text-muted">Company Representative</small>
                                    </div>
                                </div>


                            </div>
                        `;
                    } else {
                        viewContent.innerHTML = '<div class="alert alert-danger">Failed to load shipment details</div>';
                    }
                })
                .catch(error => {
                    console.error('Error loading shipment details:', error);
                    viewContent.innerHTML = '<div class="alert alert-danger">Error loading shipment details</div>';
                });

            // Set print functionality for modal view
            printShipmentBtn.onclick = function() {
                printShipmentDetails();
            };

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

        // Delete Shipment Button
        if (e.target.closest('.delete-shipment-btn')) {
            e.preventDefault();
            console.log('Delete shipment button clicked');
            var button = e.target.closest('.delete-shipment-btn');
            var shipmentId = button.getAttribute('data-shipment-id');
            var shipmentNumber = button.getAttribute('data-shipment-number');
            
            var deleteModal = document.getElementById('deleteShipmentModal');
            var deleteForm = document.getElementById('deleteShipmentForm');
            var deleteMessage = document.getElementById('deleteShipmentMessage');
            
            deleteMessage.innerHTML = `Are you sure you want to delete shipment <strong>"${shipmentNumber}"</strong>?`;
            deleteForm.action = "/delete_shipment/" + shipmentId;
            
            var modal = new bootstrap.Modal(deleteModal);
            modal.show();
            return;
        }

        // Edit Shipment Button
        if (e.target.closest('.edit-shipment-btn')) {
            e.preventDefault();
            console.log('Edit shipment button clicked');
            var button = e.target.closest('.edit-shipment-btn');
            var shipmentId = button.getAttribute('data-shipment-id');
            
            var editModal = document.getElementById('editShipmentModal');
            var editForm = document.getElementById('editShipmentForm');
            
            // Fetch shipment details with items from API
            fetch(`/api/shipment/${shipmentId}`)
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        const shipment = data.shipment;
                        const items = data.items || [];
                        
                        // Populate basic form fields
                        document.getElementById('editShipmentNumber').value = shipment.shipment_number || '';
                        document.getElementById('editCompanyId').value = shipment.company_id || '';
                        document.getElementById('editOrderedDate').value = shipment.ordered_date || '';
                        document.getElementById('editShippingDate').value = shipment.shipping_date || '';
                        document.getElementById('editReceivingDate').value = shipment.receiving_date || '';
                        document.getElementById('editStatus').value = shipment.status || 'ordered';
                        
                        // Load products into edit container
                        const container = document.getElementById('editShipmentProductsContainer');
                        if (container) {
                            container.innerHTML = '';
                            
                            if (items.length > 0) {
                                items.forEach((item, index) => {
                                    const productRow = document.createElement('div');
                                    productRow.className = 'product-row mb-3 border p-3 rounded position-relative';
                                    productRow.innerHTML = `
                                        ${index > 0 ? '<button type="button" class="btn btn-sm btn-danger position-absolute top-0 end-0 m-2 remove-edit-product-btn"><i class="fas fa-times"></i></button>' : ''}
                                        <div class="row">
                                            <div class="col-md-5">
                                                <label class="form-label small">Product Name *</label>
                                                <input type="text" class="form-control edit-product-name-input" name="product_name[]" required placeholder="Enter product name..." value="${item.product_name}">
                                            </div>
                                            <div class="col-md-2">
                                                <label class="form-label small">Quantity *</label>
                                                <input type="number" class="form-control edit-quantity-input" name="quantity[]" required min="1" value="${item.quantity}">
                                            </div>
                                            <div class="col-md-3">
                                                <label class="form-label small">Unit Price (BDT) *</label>
                                                <input type="number" step="0.01" class="form-control edit-price-input" name="unit_price[]" required min="0" placeholder="0.00" value="${item.unit_price}">
                                            </div>
                                            <div class="col-md-2">
                                                <label class="form-label small">Total (BDT)</label>
                                                <input type="text" class="form-control edit-total-display" readonly value="${parseFloat(item.total_price).toFixed(2)}">
                                            </div>
                                        </div>
                                    `;
                                    container.appendChild(productRow);
                                });
                            } else {
                                // No items, add a blank row
                                const productRow = document.createElement('div');
                                productRow.className = 'product-row mb-3 border p-3 rounded';
                                productRow.innerHTML = `
                                    <div class="row">
                                        <div class="col-md-5">
                                            <label class="form-label small">Product Name *</label>
                                            <input type="text" class="form-control edit-product-name-input" name="product_name[]" required placeholder="Enter product name...">
                                        </div>
                                        <div class="col-md-2">
                                            <label class="form-label small">Quantity *</label>
                                            <input type="number" class="form-control edit-quantity-input" name="quantity[]" required min="1" value="1">
                                        </div>
                                        <div class="col-md-3">
                                            <label class="form-label small">Unit Price (BDT) *</label>
                                            <input type="number" step="0.01" class="form-control edit-price-input" name="unit_price[]" required min="0" placeholder="0.00">
                                        </div>
                                        <div class="col-md-2">
                                            <label class="form-label small">Total (BDT)</label>
                                            <input type="text" class="form-control edit-total-display" readonly value="0.00">
                                        </div>
                                    </div>
                                `;
                                container.appendChild(productRow);
                            }
                            
                            updateEditShipmentGrandTotal();
                        }
                        
                        // Set form action
                        editForm.action = "/edit_shipment/" + shipmentId;
                        
                        var modal = new bootstrap.Modal(editModal);
                        modal.show();
                        
                        // Update totals after modal is shown
                        updateEditShipmentGrandTotal();
                    } else {
                        alert('Failed to load shipment details');
                    }
                })
                .catch(error => {
                    console.error('Error loading shipment for edit:', error);
                    alert('Error loading shipment details');
                });
            
            return;
        }

        // Edit Supplier Button
        if (e.target.closest('.edit-supplier-btn')) {
            e.preventDefault();
            var button = e.target.closest('.edit-supplier-btn');
            var companyId = button.getAttribute('data-company-id');
            var companyName = button.getAttribute('data-company-name');
            var contactPerson = button.getAttribute('data-contact-person');
            var email = button.getAttribute('data-email');
            var phone = button.getAttribute('data-phone');
            var address = button.getAttribute('data-address');

            var editSupplierModal = document.getElementById('editSupplierModal');
            var editSupplierForm = document.getElementById('editSupplierForm');

            document.getElementById('editCompanyName').value = companyName;
            document.getElementById('editContactPerson').value = contactPerson;
            document.getElementById('editEmail').value = email;
            document.getElementById('editPhone').value = phone;
            document.getElementById('editAddress').value = address;

            editSupplierForm.action = "/edit_company/" + companyId;

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

        // Delete Supplier Button
        if (e.target.closest('.delete-supplier-btn')) {
            e.preventDefault();
            var button = e.target.closest('.delete-supplier-btn');
            var companyId = button.getAttribute('data-company-id');
            var companyName = button.getAttribute('data-company-name');

            var deleteSupplierModal = document.getElementById('deleteSupplierModal');
            var deleteSupplierForm = document.getElementById('deleteSupplierForm');
            var deleteSupplierMessage = document.getElementById('deleteSupplierMessage');

            deleteSupplierMessage.innerHTML = `Are you sure you want to delete the supplier <strong>"${companyName}"</strong>?`;
            deleteSupplierForm.action = "/delete_company/" + companyId;

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

        // Pay Supplier Button
        if (e.target.closest('.pay-supplier-btn')) {
            e.preventDefault();
            console.log('Pay supplier button clicked');
            var button = e.target.closest('.pay-supplier-btn');
            var companyId = button.getAttribute('data-company-id');
            var companyName = button.getAttribute('data-company-name');
            var totalDue = parseFloat(button.getAttribute('data-total-due') || 0);

            var paymentModal = document.getElementById('companyPaymentModal');
            document.getElementById('paymentCompanyName').value = companyName;
            document.getElementById('paymentCompanyId').value = companyId;
            document.getElementById('modalDueAmountDisplay').textContent = `BDT ${totalDue.toFixed(2)}`;
            document.getElementById('paymentAmount').value = '';

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

    // Print shipment details from modal
    function printShipmentDetails() {
        const printableContent = document.getElementById('printableShipment').innerHTML;
        
        const printWindow = window.open('', '_blank');
        if (printWindow) {
            printWindow.document.write(`
                <!DOCTYPE html>
                <html>
                <head>
                    <title>Shipment Receipt - SUMSUL HAQUE 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;
                            background: white;
                            font-size: 12px;
                            line-height: 1.35;
                        }
                        .receipt-container { 
                            max-width: 780px; 
                            margin: 0 auto;
                            border: 2px solid #333;
                            padding: 16px;
                            background: white;
                            display: flex;
                            flex-direction: column;
                            min-height: 100vh;
                        }
                        @media print {
                            body { margin: 8mm; }
                            .receipt-container { 
                                border: none; 
                                padding: 12px;
                                box-shadow: none;
                                min-height: 100vh;
                            }
                            .no-print { display: none !important; }
                            .contact-section { 
                                background: #f8f9fa !important;
                                -webkit-print-color-adjust: exact;
                            }
                            .table-dark th { 
                                background: #343a40 !important; 
                                -webkit-print-color-adjust: exact;
                            }
                            .bg-light { 
                                background: #f8f9fa !important;
                                -webkit-print-color-adjust: exact;
                            }
                            .table-success { 
                                background: #d1e7dd !important;
                                -webkit-print-color-adjust: exact;
                            }
                        }
                        .receipt-logo {
                            height: 60px;
                            width: auto;
                        }
                        .company-name {
                            font-size: 1.2rem;
                            font-weight: 700;
                            color: #1e293b;
                        }
                        .company-subtitle {
                            color: #334155;
                            font-size: 0.95rem;
                        }
                        .company-tagline {
                            color: #1f2937;
                            font-size: 0.95rem;
                        }
                        .company-meta {
                            color: #475569;
                            font-size: 0.9rem;
                        }
                        .receipt-meta {
                            font-size: 0.9rem;
                            line-height: 1.3;
                        }
                        .receipt-content {
                            flex: 1;
                            display: flex;
                            flex-direction: column;
                        }
                        .receipt-spacer {
                            flex: 1;
                        }
                        .summary-box {
                            align-self: flex-end;
                            width: 320px;
                            max-width: 100%;
                            border: 1px solid #dce4ef;
                            border-radius: 6px;
                            padding: 10px 12px;
                            background: #f8fafc;
                            gap: 6px;
                            display: flex;
                            flex-direction: column;
                            margin-bottom: 8px;
                        }
                        .summary-box div {
                            font-size: 12px;
                        }
                        .receipt-title {
                            color: #1e293b;
                            font-weight: bold;
                            border-bottom: 2px solid #6366f1;
                            padding-bottom: 6px;
                            margin-bottom: 10px;
                        }
                        .receipt-table th {
                            background: #1f2937 !important;
                            color: white;
                            border: none;
                            padding: 8px 6px;
                            font-size: 12px;
                        }
                        .receipt-table td {
                            padding: 8px 6px;
                            border: 1px solid #dee2e6;
                            font-size: 12px;
                        }
                        .signature-line {
                            height: 1px;
                            background: #000;
                            margin: 30px auto 8px;
                            width: 220px;
                        }
                        .receipt-signatures {
                            margin-top: auto;
                        }
                        .contact-section {
                            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
                            border-left: 4px solid #6366f1;
                        }
                        .text-center { text-align: center; }
                        .text-end { text-align: right; }
                        .text-primary { color: #6366f1 !important; }
                        .text-success { color: #059669 !important; }
                        .text-warning { color: #d97706 !important; }
                        .text-danger { color: #dc2626 !important; }
                        .border-top { border-top: 1px solid #dee2e6 !important; }
                        .receipt-footer {
                            background: #f8f9fa;
                            margin-top: 16px;
                            padding: 12px;
                        }
                    </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 Receipt
                        </button>
                        <button onclick="window.close()" class="btn btn-secondary">
                            <i class="fas fa-times me-1"></i> Close
                        </button>
                    </div>
                    <script>
                        // Auto-print option
                        setTimeout(() => {
                            window.print();
                        }, 500);
                    <\/script>
                </body>
                </html>
            `);
            
            printWindow.document.close();
        } else {
            alert('Please allow popups for this site to print shipment details.');
        }
    }

    // Shipment Search Functionality
    const shipmentSearch = document.getElementById('shipmentSearch');
    const clearShipmentSearch = document.getElementById('clearShipmentSearch');
    const monthFilter = document.getElementById('monthFilter');
    const yearFilter = document.getElementById('yearFilter');
    const shipmentsTable = document.querySelector('#shipmentsTable tbody');
    
    // Supplier Search and Pagination Functionality
    const supplierSearch = document.getElementById('supplierSearch');
    const clearSupplierSearch = document.getElementById('clearSupplierSearch');
    const suppliersTable = document.querySelector('#suppliersTable tbody');
    let allSupplierRows = [];
    let filteredSupplierRows = [];
    let currentSupplierPage = 1;
    const suppliersPerPage = 10;
    
    if (suppliersTable) {
        allSupplierRows = Array.from(suppliersTable.querySelectorAll('tr'));
        filteredSupplierRows = [...allSupplierRows];
        
        function performSupplierSearch() {
            const searchTerm = supplierSearch.value.toLowerCase().trim();
            
            filteredSupplierRows = allSupplierRows.filter(row => {
                const companyName = row.cells[0].textContent.toLowerCase();
                const contact = row.cells[1].textContent.toLowerCase();
                
                return !searchTerm ||
                    companyName.includes(searchTerm) ||
                    contact.includes(searchTerm);
            });
            
            currentSupplierPage = 1;
            displaySupplierPage();
        }
        
        function displaySupplierPage() {
            const startIndex = (currentSupplierPage - 1) * suppliersPerPage;
            const endIndex = startIndex + suppliersPerPage;
            
            allSupplierRows.forEach(row => row.style.display = 'none');
            filteredSupplierRows.slice(startIndex, endIndex).forEach(row => {
                row.style.display = '';
            });
            
            updateSupplierPagination();
        }
        
        function updateSupplierPagination() {
            const totalPages = Math.ceil(filteredSupplierRows.length / suppliersPerPage);
            let paginationHTML = '';
            
            if (totalPages > 1) {
                paginationHTML += '<nav class="mt-3"><ul class="pagination justify-content-center">';
                
                // Previous button
                paginationHTML += `<li class="page-item ${currentSupplierPage === 1 ? 'disabled' : ''}">
                    <a class="page-link" href="#" data-supplier-page="${currentSupplierPage - 1}">Previous</a>
                </li>`;
                
                // Page numbers
                for (let i = 1; i <= totalPages; i++) {
                    if (i === 1 || i === totalPages || (i >= currentSupplierPage - 2 && i <= currentSupplierPage + 2)) {
                        paginationHTML += `<li class="page-item ${i === currentSupplierPage ? 'active' : ''}">
                            <a class="page-link" href="#" data-supplier-page="${i}">${i}</a>
                        </li>`;
                    } else if (i === currentSupplierPage - 3 || i === currentSupplierPage + 3) {
                        paginationHTML += '<li class="page-item disabled"><span class="page-link">...</span></li>';
                    }
                }
                
                // Next button
                paginationHTML += `<li class="page-item ${currentSupplierPage === totalPages ? 'disabled' : ''}">
                    <a class="page-link" href="#" data-supplier-page="${currentSupplierPage + 1}">Next</a>
                </li>`;
                
                paginationHTML += '</ul></nav>';
            }
            
            const paginationContainer = document.getElementById('supplierPagination');
            if (paginationContainer) {
                paginationContainer.innerHTML = paginationHTML;
                
                // Add click handlers
                paginationContainer.querySelectorAll('.page-link').forEach(link => {
                    link.addEventListener('click', function(e) {
                        e.preventDefault();
                        const page = parseInt(this.getAttribute('data-supplier-page'));
                        if (page > 0 && page <= totalPages) {
                            currentSupplierPage = page;
                            displaySupplierPage();
                        }
                    });
                });
            }
        }
        
        if (supplierSearch) {
            supplierSearch.addEventListener('input', performSupplierSearch);
        }
        
        if (clearSupplierSearch) {
            clearSupplierSearch.addEventListener('click', function() {
                supplierSearch.value = '';
                performSupplierSearch();
                supplierSearch.focus();
            });
        }
        
        // Initial display
        displaySupplierPage();
    }
    let allRows = [];
    let filteredRows = [];
    let currentPage = 1;
    const rowsPerPage = 10;
    
    // Toggle supplier chevron icon
    window.toggleSupplierChevron = function() {
        const chevron = document.getElementById('supplierChevron');
        if (chevron.classList.contains('fa-chevron-down')) {
            chevron.classList.remove('fa-chevron-down');
            chevron.classList.add('fa-chevron-up');
        } else {
            chevron.classList.remove('fa-chevron-up');
            chevron.classList.add('fa-chevron-down');
        }
    };
    
    if (shipmentsTable) {
        allRows = Array.from(shipmentsTable.querySelectorAll('tr'));
        filteredRows = [...allRows];
        
        function performShipmentSearch() {
            const searchTerm = shipmentSearch.value.toLowerCase().trim();
            const selectedMonth = monthFilter.value;
            const selectedYear = yearFilter.value;
            
            filteredRows = allRows.filter(row => {
                const shipmentNumber = row.cells[0].textContent.toLowerCase();
                const companyName = row.cells[1].textContent.toLowerCase();
                const orderedDate = row.cells[2].textContent.trim(); // Get ordered date
                
                // Search filter
                const matchesSearch = !searchTerm || 
                    shipmentNumber.includes(searchTerm) || 
                    companyName.includes(searchTerm);
                
                // Month/Year filter
                let matchesDate = true;
                if (selectedMonth || selectedYear) {
                    // Extract date from the cell (format might vary)
                    const dateMatch = orderedDate.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;
                        }
                    }
                }
                
                return matchesSearch && matchesDate;
            });
            
            currentPage = 1;
            displayPage();
        }
        
        function displayPage() {
            const startIndex = (currentPage - 1) * rowsPerPage;
            const endIndex = startIndex + rowsPerPage;
            
            allRows.forEach(row => row.style.display = 'none');
            
            filteredRows.slice(startIndex, endIndex).forEach(row => {
                row.style.display = '';
            });
            
            updatePagination();
        }
        
        function updatePagination() {
            const totalPages = Math.ceil(filteredRows.length / rowsPerPage);
            let paginationHTML = '';
            
            if (totalPages > 1) {
                paginationHTML += '<nav class="mt-3"><ul class="pagination justify-content-center">';
                
                // Previous button
                paginationHTML += `<li class="page-item ${currentPage === 1 ? 'disabled' : ''}">
                    <a class="page-link" href="#" data-page="${currentPage - 1}">Previous</a>
                </li>`;
                
                // Page numbers
                for (let i = 1; i <= totalPages; i++) {
                    if (i === 1 || i === totalPages || (i >= currentPage - 2 && i <= currentPage + 2)) {
                        paginationHTML += `<li class="page-item ${i === currentPage ? 'active' : ''}">
                            <a class="page-link" href="#" data-page="${i}">${i}</a>
                        </li>`;
                    } else if (i === currentPage - 3 || i === currentPage + 3) {
                        paginationHTML += '<li class="page-item disabled"><span class="page-link">...</span></li>';
                    }
                }
                
                // Next button
                paginationHTML += `<li class="page-item ${currentPage === totalPages ? 'disabled' : ''}">
                    <a class="page-link" href="#" data-page="${currentPage + 1}">Next</a>
                </li>`;
                
                paginationHTML += '</ul></nav>';
            }
            
            let paginationContainer = document.getElementById('shipmentPagination');
            if (!paginationContainer) {
                paginationContainer = document.createElement('div');
                paginationContainer.id = 'shipmentPagination';
                shipmentsTable.parentElement.parentElement.appendChild(paginationContainer);
            }
            paginationContainer.innerHTML = paginationHTML;
            
            // Add click handlers to pagination links
            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) {
                        currentPage = page;
                        displayPage();
                    }
                });
            });
        }
        
        if (shipmentSearch) {
            shipmentSearch.addEventListener('input', performShipmentSearch);
        }
        
        if (monthFilter) {
            monthFilter.addEventListener('change', performShipmentSearch);
        }
        
        if (yearFilter) {
            yearFilter.addEventListener('change', performShipmentSearch);
        }
        
        if (clearShipmentSearch) {
            clearShipmentSearch.addEventListener('click', function() {
                shipmentSearch.value = '';
                monthFilter.value = '';
                yearFilter.value = '';
                performShipmentSearch();
                shipmentSearch.focus();
            });
        }
        
        // Initial display
        displayPage();
    }
});
</script>


{% endblock %}