{% extends 'base.html' %}

{% block title %}Jambo Ledger - Jambo Management Cloud{% endblock %}

{% block content %}
<div class="container-fluid py-4">
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2 class="mb-0">
            <i class="fas fa-book text-primary"></i>
            Jambo Ledger
        </h2>
    </div>

    <!-- Search Section -->
    <div class="card mb-4">
        <div class="card-body">
            <div class="row">
                <div class="col-md-4">
                    <div class="form-group">
                        <label class="form-label">Jambo Number</label>
                        <div class="input-group">
                            <input type="text" id="jamboSearch" class="form-control" placeholder="Search jambo by number, color, party...">
                            <button class="btn btn-primary" onclick="searchJambo()">
                                <i class="fas fa-search"></i> Search
                            </button>
                        </div>
                    </div>
                    <!-- Search Results Dropdown -->
                    <div id="searchResults" class="list-group mt-2 shadow-sm" style="display: none; position: absolute; z-index: 1000; width: 95%;"></div>
                </div>
                <div class="col-md-8">
                    <div id="jamboPreview" class="d-none">
                        <div class="alert alert-info mb-0">
                            <div class="row align-items-center">
                                <div class="col">
                                    <h5 class="alert-heading mb-1">Jambo Details</h5>
                                    <p class="mb-0" id="jamboBasicInfo"></p>
                                </div>
                                <div class="col-auto">
                                    <button class="btn btn-info" onclick="viewLedger()">
                                        <i class="fas fa-eye"></i> View Ledger
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Ledger Section -->
    <div id="ledgerSection" class="d-none">
        <!-- Jambo Header -->
        <div class="card mb-4 bg-primary text-white">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-3">
                        <h5 class="mb-1">Jambo #<span id="ledgerJamboNo"></span></h5>
                        <p class="mb-0" id="ledgerParty"></p>
                    </div>
                    <div class="col-md-3">
                        <h5 class="mb-1">Size</h5>
                        <p class="mb-0" id="ledgerSize"></p>
                    </div>
                    <div class="col-md-3">
                        <h5 class="mb-1">Details</h5>
                        <p class="mb-0" id="ledgerDetails"></p>
                    </div>
                    <div class="col-md-3 text-end">
                        <button class="btn btn-light me-2" onclick="printLedger()">
                            <i class="fas fa-print"></i> Print
                        </button>
                        <button class="btn btn-danger" onclick="exportToPDF()">
                            <i class="fas fa-file-pdf"></i> PDF
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Ledger Table -->
        <div class="card">
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-striped table-hover mb-0">
                        <thead class="table-dark">
                            <tr>
                                <th style="width: 100px;">Date</th>
                                <th>Party Name</th>
                                <th>Ref</th>
                                <th>Size</th>
                                <th style="width: 80px;">Shaft</th>
                                <th style="width: 80px;">Pcs</th>
                                <th style="width: 100px;">Yard In</th>
                                <th style="width: 100px;">Yard Out</th>
                                <th style="width: 120px;">Balance Yard</th>
                                <th style="width: 100px;">Status</th>
                            </tr>
                        </thead>
                        <tbody id="ledgerTableBody">
                            <!-- Ledger entries will be added here -->
                        </tbody>
                        <tfoot class="table-dark">
                            <tr>
                                <td colspan="2" class="text-end"><strong>Totals:</strong></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td class="text-end"><strong id="totalYardIn">0</strong></td>
                                <td class="text-end"><strong id="totalYardOut">0</strong></td>
                                <td class="text-end"><strong id="finalBalance">0</strong></td>
                                <td></td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
<script>
let currentJamboData = null;
let searchTimeout = null;

// Handle search input
$('#jamboSearch').on('input', function() {
    const query = $(this).val().trim();
    
    // Clear previous timeout
    if (searchTimeout) {
        clearTimeout(searchTimeout);
    }
    
    // Hide results if query is empty
    if (!query) {
        $('#searchResults').hide();
        return;
    }
    
    // Set new timeout to prevent too many requests
    searchTimeout = setTimeout(() => {
        // Get search results
        $.get('/reports/jambo/search', { query: query })
            .done(function(response) {
                if (response.success) {
                    const results = $('#searchResults');
                    results.empty();
                    
                    if (response.jambos.length === 0) {
                        results.append(`
                            <div class="list-group-item text-muted">
                                No jambos found
                            </div>
                        `);
                    } else {
                        response.jambos.forEach(jambo => {
                            results.append(`
                                <a href="#" class="list-group-item list-group-item-action" 
                                   onclick="selectJambo(${jambo.jambo_no})">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div>
                                            <strong class="text-primary">${jambo.description}</strong>
                                            <small class="d-block text-muted">
                                                Balance: ${jambo.balance_yard} yards
                                            </small>
                                        </div>
                                        <span class="badge bg-secondary">${formatDate(jambo.date)}</span>
                                    </div>
                                </a>
                            `);
                        });
                    }
                    
                    results.show();
                }
            });
    }, 300);  // 300ms delay
});

// Select jambo from search results
function selectJambo(jamboNo) {
    $('#jamboSearch').val(jamboNo);
    $('#searchResults').hide();
    searchJambo();
}

// Hide search results when clicking outside
$(document).on('click', function(e) {
    if (!$(e.target).closest('#jamboSearch, #searchResults').length) {
        $('#searchResults').hide();
    }
});

// Search jambo
function searchJambo() {
    const jamboNo = $('#jamboSearch').val();
    if (!jamboNo) {
        showToast('error', 'Please enter jambo number');
        return;
    }

    // Show loading
    $('#jamboSearch').prop('disabled', true);
    
    // Get jambo details
    $.get(`/reports/jambo/${jamboNo}`)
        .done(function(response) {
            if (response.success) {
                currentJamboData = response.jambo;
                
                // Show preview
                $('#jamboBasicInfo').html(`
                    <strong>Party:</strong> ${response.jambo.party_name} | 
                    <strong>Size:</strong> ${response.jambo.size_mm}mm x ${response.jambo.size_meter}m | 
                    <strong>Color:</strong> ${response.jambo.colour} | 
                    <strong>Micron:</strong> ${response.jambo.micron}
                `);
                $('#jamboPreview').removeClass('d-none');
                
                // Hide ledger section
                $('#ledgerSection').addClass('d-none');
            } else {
                showToast('error', response.message || 'Jambo not found');
                $('#jamboPreview').addClass('d-none');
            }
        })
        .fail(function() {
            showToast('error', 'Error searching jambo');
        })
        .always(function() {
            $('#jamboSearch').prop('disabled', false);
        });
}

// View ledger
function viewLedger() {
    if (!currentJamboData) return;
    
    // Update ledger header
    $('#ledgerJamboNo').text(currentJamboData.jambo_no);
    $('#ledgerParty').text(currentJamboData.party_name);
    $('#ledgerSize').text(`${currentJamboData.size_mm}mm x ${currentJamboData.size_meter}m`);
    $('#ledgerDetails').html(`
        Color: ${currentJamboData.colour}<br>
        Micron: ${currentJamboData.micron}
    `);
    
    // Get ledger entries
    $.get(`/reports/jambo/${currentJamboData.jambo_no}/ledger`)
        .done(function(response) {
            if (response.success) {
                // Clear table
                const tbody = $('#ledgerTableBody');
                tbody.empty();
                
                let totalYardIn = 0;
                let totalYardOut = 0;
                let balanceYard = currentJamboData.actual_yard;
                
                // Add initial entry
                tbody.append(`
                    <tr>
                        <td>${formatDate(currentJamboData.date)}</td>
                        <td>${currentJamboData.party_name}</td>
                        <td>${response.opening_challan_no || '-'}</td>
                        <td>${currentJamboData.size_mm}mm x ${currentJamboData.size_meter}m</td>
                        <td>-</td>
                        <td>-</td>
                        <td class="text-end">${currentJamboData.actual_yard}</td>
                        <td class="text-end">0</td>
                        <td class="text-end">${balanceYard}</td>
                        <td><span class="badge bg-success">Opening</span></td>
                    </tr>
                `);
                
                totalYardIn += currentJamboData.actual_yard;
                
                // Add production and sale entries
                response.entries.forEach(entry => {
                    balanceYard -= entry.status === 'Sale' ? 0 : (entry.yards_used || 0);
                    totalYardOut += entry.status === 'Sale' ? 0 : (entry.yards_used || 0);
                    tbody.append(`
                        <tr>
                            <td>${formatDate(entry.production_date)}</td>
                            <td>${entry.customer_name}</td>
                            <td>${entry.status === 'Opening' ? (response.opening_challan_no || '-') : (entry.reference_id || '-')}</td>
                            <td>${entry.size || '-'}</td>
                            <td class="text-center">${entry.shafts_used !== null && entry.shafts_used !== undefined ? entry.shafts_used : '-'}</td>
                            <td class="text-center">${entry.produced_pieces !== null && entry.produced_pieces !== undefined ? entry.produced_pieces : '-'}</td>
                            <td class="text-end">${entry.status === 'Sale' ? '-' : '0'}</td>
                            <td class="text-end">${entry.status === 'Sale' ? (entry.yards_used || '-') : (entry.yards_used || '-')}</td>
                            <td class="text-end">${balanceYard}</td>
                            <td><span class="badge bg-${entry.status === 'Completed' ? 'success' : (entry.status === 'Sale' ? 'danger' : 'warning')}">${entry.status}</span></td>
                        </tr>
                    `);
                });
                
                // Update totals
                $('#totalYardIn').text(totalYardIn);
                $('#totalYardOut').text(totalYardOut);
                $('#finalBalance').text(balanceYard);
                
                // Show ledger section
                $('#ledgerSection').removeClass('d-none');
                
            } else {
                showToast('error', response.message || 'Error loading ledger');
            }
        })
        .fail(function() {
            showToast('error', 'Error loading ledger');
        });
}

// Print ledger
function printLedger() {
    if (!currentJamboData) return;
    
    // Create print-friendly content
    const printContent = createPrintContent();
    
    // Open print window
    const printWindow = window.open('', '_blank');
    printWindow.document.write(printContent);
    printWindow.document.close();
    
    // Wait for content to load then print
    printWindow.onload = function() {
        printWindow.print();
        printWindow.close();
    };
}

// Export to PDF
function exportToPDF() {
    if (!currentJamboData) return;
    
    // Show loading
    showToast('info', 'Generating PDF...');
    
    // Create PDF content
    const pdfContent = createPrintContent();
    
    // Use html2pdf library to generate PDF
    const element = document.createElement('div');
    element.innerHTML = pdfContent;
    document.body.appendChild(element);
    
    html2pdf()
        .from(element)
        .save(`Jambo_Ledger_${currentJamboData.jambo_no}_${new Date().toISOString().split('T')[0]}.pdf`)
        .then(() => {
            document.body.removeChild(element);
            showToast('success', 'PDF generated successfully!');
        })
        .catch(() => {
            document.body.removeChild(element);
            showToast('error', 'Error generating PDF');
        });
}

// Create print/PDF content
function createPrintContent() {
    const jamboNo = currentJamboData.jambo_no;
    const partyName = currentJamboData.party_name || 'N/A';
    const size = `${currentJamboData.size_mm}mm x ${currentJamboData.size_meter}m`;
    const color = currentJamboData.colour || 'N/A';
    const micron = currentJamboData.micron || 'N/A';
    const date = currentJamboData.date || 'N/A';
    
    // Get table content
    const tableBody = $('#ledgerTableBody').html();
    const totalYardIn = $('#totalYardIn').text();
    const totalYardOut = $('#totalYardOut').text();
    const finalBalance = $('#finalBalance').text();
    
    return `
        <!DOCTYPE html>
        <html>
        <head>
            <title>Jambo Ledger - ${jamboNo}</title>
            <style>
                body {
                    font-family: Arial, sans-serif;
                    margin: 20px;
                    font-size: 12px;
                }
                .header {
                    text-align: center;
                    margin-bottom: 20px;
                    border-bottom: 2px solid #333;
                    padding-bottom: 10px;
                }
                .company-name {
                    font-size: 24px;
                    font-weight: bold;
                    color: #2c3e50;
                    margin-bottom: 5px;
                }
                .report-title {
                    font-size: 18px;
                    color: #34495e;
                    margin-bottom: 5px;
                }
                .jambo-info {
                    background: #f8f9fa;
                    padding: 15px;
                    border-radius: 5px;
                    margin-bottom: 20px;
                }
                .jambo-info h3 {
                    margin: 0 0 15px 0;
                    color: #2c3e50;
                    font-size: 20px;
                    font-weight: bold;
                }
                .info-row {
                    display: flex;
                    justify-content: flex-start;
                    margin-bottom: 8px;
                    gap: 15px;
                    font-size: 14px;
                }
                .info-label {
                    font-weight: bold;
                    color: #34495e;
                    min-width: 120px;
                    font-size: 14px;
                }
                .info-value {
                    color: #2c3e50;
                    font-weight: bold;
                    font-size: 14px;
                }
                table {
                    width: 100%;
                    border-collapse: collapse;
                    margin-top: 20px;
                }
                th, td {
                    border: 1px solid #ddd;
                    padding: 8px;
                    text-align: left;
                }
                th {
                    background-color: #f2f2f2;
                    font-weight: bold;
                }
                .text-end {
                    text-align: right;
                }
                .text-center {
                    text-align: center;
                }
                .badge {
                    padding: 2px 6px;
                    border-radius: 3px;
                    font-size: 10px;
                    color: white;
                }
                .bg-success { background-color: #28a745; }
                .bg-danger { background-color: #dc3545; }
                .bg-warning { background-color: #ffc107; color: #000; }
                .totals-row {
                    background-color: #f8f9fa;
                    font-weight: bold;
                }
                .footer {
                    margin-top: 30px;
                    text-align: center;
                    font-size: 10px;
                    color: #666;
                }
                @media print {
                    body { margin: 0; }
                    .no-print { display: none; }
                }
            </style>
        </head>
        <body>
            <div class="header">
                <div class="company-name">Al-Wasiqa Packages Private Limited</div>
                <div class="report-title">Jambo Ledger Report</div>
                <div>Generated on: ${new Date().toLocaleDateString('en-GB')} at ${new Date().toLocaleTimeString('en-GB')}</div>
            </div>
            
            <div class="jambo-info">
                <h3>Jambo #${jamboNo}</h3>
                <div class="info-row">
                    <span class="info-label">Party:</span>
                    <span class="info-value">${partyName}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">Date:</span>
                    <span class="info-value">${formatDate(date)}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">Size:</span>
                    <span class="info-value">${size}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">Color:</span>
                    <span class="info-value">${color}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">Micron:</span>
                    <span class="info-value">${micron}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">Actual Yard:</span>
                    <span class="info-value">${currentJamboData.actual_yard || 0}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">Balance Yard:</span>
                    <span class="info-value">${currentJamboData.balance_yard || 0}</span>
                </div>
            </div>
            
            <table>
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>Party Name</th>
                        <th>Ref</th>
                        <th>Size</th>
                        <th>Shaft</th>
                        <th>Pcs</th>
                        <th>Yard In</th>
                        <th>Yard Out</th>
                        <th>Balance Yard</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    ${tableBody}
                </tbody>
                <tfoot>
                    <tr class="totals-row">
                        <td colspan="6" style="text-align: right;"><strong>Totals:</strong></td>
                        <td class="text-end"><strong>${totalYardIn}</strong></td>
                        <td class="text-end"><strong>${totalYardOut}</strong></td>
                        <td class="text-end"><strong>${finalBalance}</strong></td>
                        <td></td>
                    </tr>
                </tfoot>
            </table>
            
            <div class="footer">
                <p>This report was generated by Jambo Management System</p>
                <p>© 2025 Al-Wasiqa Packages Private Limited. All rights reserved.</p>
            </div>
        </body>
        </html>
    `;
}

// Format date
function formatDate(dateStr) {
    if (!dateStr) return '-';
    const date = new Date(dateStr);
    return date.toLocaleDateString('en-GB');  // DD/MM/YYYY format
}

// Handle enter key in search
$('#jamboSearch').on('keypress', function(e) {
    if (e.which === 13) {  // Enter key
        searchJambo();
    }
});
</script>

<style>
@media print {
    .no-print {
        display: none !important;
    }
    
    .card {
        border: none !important;
        box-shadow: none !important;
    }
    
    .table {
        border: 1px solid #dee2e6;
    }
    
    .table th {
        background-color: #f8f9fa !important;
        color: #000 !important;
    }
}
</style>
{% endblock %}