{% extends "base.html" %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2 class="text-gradient">
        <i class="fas fa-industry me-2"></i> Supplier Companies
    </h2>
    <div>
        <button class="btn btn-danger me-2" id="bulkDeleteCompaniesBtn" style="display: none;">
            <i class="fas fa-trash me-1"></i> Delete Selected
        </button>
        <button class="btn btn-primary glow" data-bs-toggle="modal" data-bs-target="#addCompanyModal">
            <i class="fas fa-plus me-1"></i> Add New Company
        </button>
    </div>
</div>

<!-- Search Bar -->
<div class="search-controls mb-4">
    <div class="row">
        <div class="col-md-6">
            <div class="input-group">
                <input type="text" id="companySearch" class="form-control" 
                       placeholder="🔍 Search by company name, contact person, or phone...">
                <button class="btn btn-outline-secondary" type="button" id="clearCompanySearch">
                    <i class="fas fa-times"></i>
                </button>
            </div>
        </div>
    </div>
</div>

<div class="garments-card">
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-striped table-hover">
                <thead>
                    <tr>
                        <th>
                            <input type="checkbox" id="selectAllCompanies" class="form-check-input" title="Select All">
                        </th>
                        <th>🏢 Company Name</th>
                        <th>👤 Contact Person</th>
                        <th>📧 Email</th>
                        <th>📞 Phone</th>
                        <th>📍 Address</th>
                        <th>💰 Total Due</th>
                        <th>💳 Advance Payment</th>
                        <th>⚡ Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for company in companies %}
                    <tr>
                        <td>
                            <input type="checkbox" class="form-check-input company-checkbox" 
                                   data-company-id="{{ company.id }}">
                        </td>
                        <td><strong>{{ company.company_name }}</strong></td>
                        <td>{{ company.contact_person }}</td>
                        <td>{{ company.email }}</td>
                        <td>{{ company.phone }}</td>
                        <td>{{ company.address }}</td>
                        <td>
                            {% if company.total_due > 0 %}
                            <span class="badge bg-danger">BDT {{ "{:,.2f}".format(company.total_due) }}</span>
                            {% else %}
                            <span class="badge bg-success">BDT 0.00</span>
                            {% endif %}
                        </td>
                        <td>
                            {% if company.advance_payment > 0 %}
                            <span class="badge bg-info">BDT {{ "{:,.2f}".format(company.advance_payment) }}</span>
                            {% else %}
                            <span class="badge bg-secondary">BDT 0.00</span>
                            {% endif %}
                        </td>
                        <td>
                            <div class="btn-group btn-group-sm" role="group">
                                <button class="btn btn-outline-danger delete-company-btn" 
                                        data-company-id="{{ company.id }}"
                                        data-company-name="{{ company.company_name }}"
                                        title="Delete Company">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Add Company Modal -->
<div class="modal fade" id="addCompanyModal" 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 Company</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" action="{{ url_for('add_company') }}">
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">🏢 Company Name</label>
                        <input type="text" class="form-control" name="company_name" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">👤 Contact Person</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-primary glow"><i class="fas fa-check me-1"></i> Add Company</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteCompanyModal" 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="deleteCompanyMessage">Are you sure you want to delete this company?</p>
                <div class="alert alert-warning">
                    <strong>Warning:</strong> This action cannot be undone! Make sure the company 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="deleteCompanyForm" method="POST" style="display: inline;">
                    <button type="submit" class="btn btn-danger"><i class="fas fa-trash me-1"></i> Delete Company</button>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Delete Company Confirmation
    const deleteCompanyButtons = document.querySelectorAll('.delete-company-btn');
    const deleteCompanyModal = document.getElementById('deleteCompanyModal');
    const deleteCompanyForm = document.getElementById('deleteCompanyForm');
    const deleteCompanyMessage = document.getElementById('deleteCompanyMessage');

    deleteCompanyButtons.forEach(function(button) {
        button.addEventListener('click', function() {
            const companyId = this.getAttribute('data-company-id');
            const companyName = this.getAttribute('data-company-name');
            
            deleteCompanyMessage.innerHTML = `Are you sure you want to delete the company <strong>"${companyName}"</strong>?`;
            deleteCompanyForm.action = "{{ url_for('delete_company', company_id=0) }}".replace('0', companyId);
            
            const modal = new bootstrap.Modal(deleteCompanyModal);
            modal.show();
        });
    });

    // Company Search and Pagination Functionality
    const companySearch = document.getElementById('companySearch');
    const clearCompanySearch = document.getElementById('clearCompanySearch');
    const companiesTable = document.querySelector('.table tbody');
    let allCompanyRows = [];
    let filteredCompanyRows = [];
    let currentCompanyPage = 1;
    const companyRowsPerPage = 10;
    
    if (companiesTable) {
        allCompanyRows = Array.from(companiesTable.querySelectorAll('tr'));
        filteredCompanyRows = [...allCompanyRows];
        
        function performCompanySearch() {
            const searchTerm = companySearch.value.toLowerCase().trim();
            
            filteredCompanyRows = allCompanyRows.filter(row => {
                const companyName = row.cells[0].textContent.toLowerCase();
                const contactPerson = row.cells[1].textContent.toLowerCase();
                const phone = row.cells[3].textContent.toLowerCase();
                return companyName.includes(searchTerm) || 
                       contactPerson.includes(searchTerm) || 
                       phone.includes(searchTerm);
            });
            
            currentCompanyPage = 1;
            displayCompanyPage();
        }
        
        function displayCompanyPage() {
            const startIndex = (currentCompanyPage - 1) * companyRowsPerPage;
            const endIndex = startIndex + companyRowsPerPage;
            
            allCompanyRows.forEach(row => row.style.display = 'none');
            
            filteredCompanyRows.slice(startIndex, endIndex).forEach(row => {
                row.style.display = '';
            });
            
            updateCompanyPagination();
        }
        
        function updateCompanyPagination() {
            const totalPages = Math.ceil(filteredCompanyRows.length / companyRowsPerPage);
            let paginationHTML = '';
            
            if (totalPages > 1) {
                paginationHTML += '<nav class="mt-3"><ul class="pagination justify-content-center">';
                
                // Previous button
                paginationHTML += `<li class="page-item ${currentCompanyPage === 1 ? 'disabled' : ''}">
                    <a class="page-link" href="#" data-page="${currentCompanyPage - 1}">Previous</a>
                </li>`;
                
                // Page numbers
                for (let i = 1; i <= totalPages; i++) {
                    if (i === 1 || i === totalPages || (i >= currentCompanyPage - 2 && i <= currentCompanyPage + 2)) {
                        paginationHTML += `<li class="page-item ${i === currentCompanyPage ? 'active' : ''}">
                            <a class="page-link" href="#" data-page="${i}">${i}</a>
                        </li>`;
                    } else if (i === currentCompanyPage - 3 || i === currentCompanyPage + 3) {
                        paginationHTML += '<li class="page-item disabled"><span class="page-link">...</span></li>';
                    }
                }
                
                // Next button
                paginationHTML += `<li class="page-item ${currentCompanyPage === totalPages ? 'disabled' : ''}">
                    <a class="page-link" href="#" data-page="${currentCompanyPage + 1}">Next</a>
                </li>`;
                
                paginationHTML += '</ul></nav>';
            }
            
            let paginationContainer = document.getElementById('companyPagination');
            if (!paginationContainer) {
                paginationContainer = document.createElement('div');
                paginationContainer.id = 'companyPagination';
                companiesTable.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) {
                        currentCompanyPage = page;
                        displayCompanyPage();
                    }
                });
            });
        }
        
        if (companySearch) {
            companySearch.addEventListener('input', performCompanySearch);
        }
        
        if (clearCompanySearch) {
            clearCompanySearch.addEventListener('click', function() {
                companySearch.value = '';
                performCompanySearch();
                companySearch.focus();
            });
        }
        
        // Bulk Delete Functionality for Companies
        const selectAllCompanies = document.getElementById('selectAllCompanies');
        const bulkDeleteCompaniesBtn = document.getElementById('bulkDeleteCompaniesBtn');
        
        // Helper to get visible checkboxes only (not hidden by filters/pagination)
        function getVisibleCompanyCheckboxes() {
            return document.querySelectorAll('tbody tr:not([style*="display: none"]) .company-checkbox');
        }
        
        function updateBulkDeleteCompaniesButton() {
            const checkedCount = document.querySelectorAll('.company-checkbox:checked').length;
            if (bulkDeleteCompaniesBtn) {
                bulkDeleteCompaniesBtn.style.display = checkedCount > 0 ? 'inline-block' : 'none';
                bulkDeleteCompaniesBtn.innerHTML = `<i class="fas fa-trash me-1"></i> Delete Selected (${checkedCount})`;
            }
        }
        
        // Select/Deselect all VISIBLE companies on current page
        if (selectAllCompanies) {
            selectAllCompanies.addEventListener('change', function() {
                const visibleCheckboxes = getVisibleCompanyCheckboxes();
                visibleCheckboxes.forEach(checkbox => {
                    checkbox.checked = this.checked;
                });
                updateBulkDeleteCompaniesButton();
            });
        }
        
        // Update button visibility when individual checkboxes change
        document.addEventListener('change', function(e) {
            if (e.target.classList.contains('company-checkbox')) {
                updateBulkDeleteCompaniesButton();
                // Update select all checkbox state based on visible companies only
                const visibleCheckboxes = getVisibleCompanyCheckboxes();
                const allVisibleChecked = Array.from(visibleCheckboxes).every(cb => cb.checked);
                const anyVisibleChecked = Array.from(visibleCheckboxes).some(cb => cb.checked);
                if (selectAllCompanies) {
                    selectAllCompanies.checked = allVisibleChecked && visibleCheckboxes.length > 0;
                    selectAllCompanies.indeterminate = anyVisibleChecked && !allVisibleChecked;
                }
            }
        });
        
        if (bulkDeleteCompaniesBtn) {
            bulkDeleteCompaniesBtn.addEventListener('click', async function() {
                const checkedBoxes = document.querySelectorAll('.company-checkbox:checked');
                const companyIds = Array.from(checkedBoxes).map(cb => cb.dataset.companyId);
                
                if (companyIds.length === 0) return;
                
                const confirmMsg = `Are you sure you want to delete ${companyIds.length} company(ies)? Companies with shipments will be skipped.`;
                
                if (!confirm(confirmMsg)) return;
                
                try {
                    const response = await fetch('/bulk_delete_companies', {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify({ company_ids: companyIds })
                    });
                    
                    const data = await response.json();
                    
                    if (data.success) {
                        alert(data.message);
                        location.reload();
                    } else {
                        alert(data.message || 'Error deleting companies');
                    }
                } catch (error) {
                    console.error('Error:', error);
                    alert('Error deleting companies');
                }
            });
        }
        
        // Initial display
        displayCompanyPage();
    }
});
</script>
{% endblock %}