{% extends "base.html" %}
{% block content %}

<!-- Add jQuery and jQuery UI -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>

<style>
.customer-search-container {
    position: relative;
}
.customer-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
}
.customer-dropdown .dropdown-item {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
}
.customer-dropdown .dropdown-item:hover {
    background: #f8f9fa;
}
.customer-dropdown .dropdown-item.active {
    background: #007bff;
    color: white;
}

.jambo-search-container {
    position: relative;
}
.jambo-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
}
.jambo-dropdown .dropdown-item {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
}
.jambo-dropdown .dropdown-item:hover {
    background: #f8f9fa;
}
.jambo-dropdown .dropdown-item.active {
    background: #007bff;
    color: white;
}
.jambo-dropdown .jambo-details {
    font-size: 0.85em;
    color: #666;
}
.jambo-dropdown .dropdown-item.active .jambo-details {
    color: #fff;
}
</style>

<div class="container-fluid py-4">
    <div class="row">
        <div class="col-md-8">
            <h2 class="mb-4">
                <i class="fas fa-file-invoice"></i>
                Generate Jambo Bill
            </h2>
        </div>
        <div class="col-md-4">
            <!-- Find Bill Section -->
            <div class="card mb-4" style="background: #f8f9fa;">
                <div class="card-header bg-success text-white py-2">
                    <h6 class="mb-0">
                        <i class="fas fa-search me-2"></i>
                        Find Bill
                    </h6>
                </div>
                <div class="card-body p-3">
                    <div class="input-group input-group-sm">
                        <input type="text" class="form-control" id="findBillInput" placeholder="Search by Bill No, Customer, Date...">
                        <button class="btn btn-outline-success" type="button" id="searchBillBtn">
                            <i class="fas fa-search"></i>
                        </button>
                    </div>
                    <div id="billSearchResults" class="mt-2" style="max-height: 200px; overflow-y: auto; display: none;">
                        <!-- Search results will appear here -->
                    </div>
                </div>
            </div>
        </div>
    </div>
    <form method="POST" action="{{ url_for('reports.generate_jambo_bill') }}" id="jamboBillForm">
        <div class="card">
            <div class="card-body">
                <!-- Bill Header -->
                <div class="row mb-4">
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>M/S</label>
                            <div class="customer-search-container">
                                <input type="text" name="customer_name" id="customer_search" 
                                       class="form-control" placeholder="Type to search customers..." required>
                                <div id="customerDropdown" class="customer-dropdown">
                                    <!-- Customers will be loaded here -->
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>Date</label>
                            <input type="date" name="date" class="form-control" value="{{ today }}" required>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>Bill No</label>
                            <input type="text" name="bill_no" class="form-control" value="{{ next_jambo_bill_no }}" readonly>
                        </div>
                    </div>
                </div>
                <!-- Jambo Bill Table -->
                <div class="table-responsive">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>S.No</th>
                                <th>Jambo No</th>
                                <th>Jambo Size</th>
                                <th>Colour</th>
                                <th>Micron</th>
                                <th>Weight</th>
                                <th>Roll No</th>
                                <th>Varity</th>
                                <th>@</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for i in range(10) %}
                            <tr>
                                <td>{{ i + 1 }}</td>
                                <td>
                                    <div class="jambo-search-container">
                                        <input type="text" name="jambo_no_{{ i }}" class="form-control form-control-sm jambo-search"
                                               data-row="{{ i }}" placeholder="Search jambo...">
                                        <div id="jamboDropdown_{{ i }}" class="jambo-dropdown">
                                            <!-- Jambo items will be loaded here -->
                                        </div>
                                    </div>
                                </td>
                                <td><input type="text" name="jambo_size_{{ i }}" class="form-control form-control-sm" id="jambo_size_{{ i }}" readonly></td>
                                <td><input type="text" name="colour_{{ i }}" class="form-control form-control-sm" id="colour_{{ i }}" readonly></td>
                                <td><input type="text" name="micron_{{ i }}" class="form-control form-control-sm" id="micron_{{ i }}" readonly></td>
                                <td><input type="text" name="weight_{{ i }}" class="form-control form-control-sm" id="weight_{{ i }}" readonly></td>
                                <td><input type="text" name="roll_no_{{ i }}" class="form-control form-control-sm" id="roll_no_{{ i }}" readonly></td>
                                <td><input type="text" name="varity_{{ i }}" class="form-control form-control-sm"></td>
                                <td><input type="text" name="rate_{{ i }}" class="form-control form-control-sm"></td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>

                <div class="text-end mt-4">
                    <input type="hidden" name="action" value="preview">
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-eye me-2"></i>
                        Preview Jambo Bill
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>

<script>
$(document).ready(function() {
    // Customer search functionality
    const customerInput = $('#customer_search');
    const customerDropdown = $('#customerDropdown');
    let selectedCustomerIndex = -1;
    
    // Load customers on input
    customerInput.on('input', function() {
        const query = $(this).val().trim();
        if (query.length >= 1) {
            $.getJSON("{{ url_for('reports.search_customers') }}", { term: query })
                .done(function(customers) {
                    updateCustomerDropdown(customers);
                });
        } else {
            customerDropdown.hide();
        }
    });
    
    // Show dropdown on focus
    customerInput.on('focus', function() {
        const query = $(this).val().trim();
        if (query.length >= 1) {
            $.getJSON("{{ url_for('reports.search_customers') }}", { term: query })
                .done(function(customers) {
                    updateCustomerDropdown(customers);
                });
        }
    });
    
    // Hide dropdown when clicking outside
    $(document).on('click', function(e) {
        if (!$(e.target).closest('.customer-search-container').length) {
            customerDropdown.hide();
        }
    });
    
    // Update customer dropdown
    function updateCustomerDropdown(customers) {
        customerDropdown.empty();
        
        if (customers.length === 0) {
            customerDropdown.append(`
                <div class="dropdown-item text-muted">No customers found</div>
            `);
        } else {
            customers.forEach(customer => {
                customerDropdown.append(`
                    <div class="dropdown-item" data-name="${customer}">${customer}</div>
                `);
            });
        }
        
        customerDropdown.show();
    }
    
    // Handle customer selection
    customerDropdown.on('click', '.dropdown-item', function() {
        const name = $(this).data('name');
        if (name) {
            customerInput.val(name);
            customerDropdown.hide();
            selectedCustomerIndex = -1;
        }
    });
    
    // Handle customer keyboard navigation
    customerInput.on('keydown', function(e) {
        const items = customerDropdown.find('.dropdown-item:not(.text-muted)');
        
        switch(e.key) {
            case 'ArrowDown':
                e.preventDefault();
                selectedCustomerIndex = Math.min(selectedCustomerIndex + 1, items.length - 1);
                updateCustomerSelection(items);
                break;
                
            case 'ArrowUp':
                e.preventDefault();
                selectedCustomerIndex = Math.max(selectedCustomerIndex - 1, 0);
                updateCustomerSelection(items);
                break;
                
            case 'Enter':
                e.preventDefault();
                if (selectedCustomerIndex >= 0) {
                    const selected = items.eq(selectedCustomerIndex);
                    const name = selected.data('name');
                    if (name) {
                        customerInput.val(name);
                        customerDropdown.hide();
                        selectedCustomerIndex = -1;
                    }
                }
                break;
                
            case 'Escape':
                customerDropdown.hide();
                selectedCustomerIndex = -1;
                break;
        }
    });
    
    function updateCustomerSelection(items) {
        items.removeClass('active');
        if (selectedCustomerIndex >= 0) {
            items.eq(selectedCustomerIndex).addClass('active')
                .get(0).scrollIntoView({ block: 'nearest' });
        }
    }
    
    // Jambo search functionality
    $('.jambo-search').each(function(index) {
        const jamboInput = $(this);
        const jamboDropdown = $(`#jamboDropdown_${index}`);
        let selectedJamboIndex = -1;
        
        // Load jambo items on input
        jamboInput.on('input', function() {
            const query = $(this).val().trim();
            if (query.length >= 1) {
                $.getJSON("{{ url_for('reports.search_jambos') }}", { query: query })
                    .done(function(response) {
                        if (response.success) {
                            updateJamboDropdown(response.jambos, index);
                        }
                    });
            } else {
                jamboDropdown.hide();
            }
        });
        
        // Show dropdown on focus
        jamboInput.on('focus', function() {
            const query = $(this).val().trim();
            if (query.length >= 1) {
                $.getJSON("{{ url_for('reports.search_jambos') }}", { query: query })
                    .done(function(response) {
                        if (response.success) {
                            updateJamboDropdown(response.jambos, index);
                        }
                    });
            }
        });
        
        // Hide dropdown when clicking outside
        $(document).on('click', function(e) {
            if (!$(e.target).closest('.jambo-search-container').length) {
                jamboDropdown.hide();
            }
        });
        
        // Update jambo dropdown
        function updateJamboDropdown(jambos, rowIndex) {
            jamboDropdown.empty();
            selectedJamboIndex = -1;
            
            if (jambos.length === 0) {
                jamboDropdown.append(`
                    <div class="dropdown-item text-muted">No complete jambos found</div>
                `);
            } else {
                jambos.forEach(jambo => {
                    // Filter only complete jambos (balance_yard > 0 means no production)
                    if (jambo.balance_yard > 0) {
                        jamboDropdown.append(`
                            <div class="dropdown-item" data-jambo='${JSON.stringify(jambo)}'>
                                <div><strong>#${jambo.jambo_no}</strong> - ${jambo.colour} - ${jambo.party_name}</div>
                                <div class="jambo-details">${jambo.size_mm}mm x ${jambo.size_meter}m - ${jambo.micron}mic - Bal: ${jambo.balance_yard}y</div>
                            </div>
                        `);
                    }
                });
            }
            
            jamboDropdown.show();
        }
        
        // Handle jambo selection
        jamboDropdown.on('click', '.dropdown-item', function() {
            const jamboData = $(this).data('jambo');
            if (jamboData) {
                jamboInput.val(jamboData.jambo_no);
                
                // Fill other fields automatically
                $(`#jambo_size_${index}`).val(`${jamboData.size_mm}mm x ${jamboData.size_meter}m`);
                $(`#colour_${index}`).val(jamboData.colour);
                $(`#micron_${index}`).val(jamboData.micron);
                $(`#weight_${index}`).val(jamboData.net_weight || '');
                $(`#roll_no_${index}`).val(jamboData.roll_no || ''); // Assuming roll_no is part of jamboData
                
                jamboDropdown.hide();
                selectedJamboIndex = -1;
            }
        });
        
        // Handle jambo keyboard navigation
        jamboInput.on('keydown', function(e) {
            const items = jamboDropdown.find('.dropdown-item:not(.text-muted)');
            
            switch(e.key) {
                case 'ArrowDown':
                    e.preventDefault();
                    selectedJamboIndex = Math.min(selectedJamboIndex + 1, items.length - 1);
                    updateJamboSelection(items);
                    break;
                    
                case 'ArrowUp':
                    e.preventDefault();
                    selectedJamboIndex = Math.max(selectedJamboIndex - 1, 0);
                    updateJamboSelection(items);
                    break;
                    
                case 'Enter':
                    e.preventDefault();
                    if (selectedJamboIndex >= 0) {
                        const selected = items.eq(selectedJamboIndex);
                        const jamboData = selected.data('jambo');
                        if (jamboData) {
                            jamboInput.val(jamboData.jambo_no);
                            
                            // Fill other fields automatically
                            $(`#jambo_size_${index}`).val(`${jamboData.size_mm}mm x ${jamboData.size_meter}m`);
                            $(`#colour_${index}`).val(jamboData.colour);
                            $(`#micron_${index}`).val(jamboData.micron);
                            $(`#weight_${index}`).val(jamboData.net_weight || '');
                            $(`#roll_no_${index}`).val(jamboData.roll_no || ''); // Assuming roll_no is part of jamboData
                            
                            jamboDropdown.hide();
                            selectedJamboIndex = -1;
                        }
                    }
                    break;
                    
                case 'Escape':
                    jamboDropdown.hide();
                    selectedJamboIndex = -1;
                    break;
            }
        });
        
        function updateJamboSelection(items) {
            items.removeClass('active');
            if (selectedJamboIndex >= 0) {
                items.eq(selectedJamboIndex).addClass('active')
                    .get(0).scrollIntoView({ block: 'nearest' });
            }
        }
    });
    
    // Find Bill functionality
    $('#findBillInput, #searchBillBtn').on('input click', function(e) {
        if (e.type === 'click' || e.type === 'input') {
            const query = $('#findBillInput').val().trim();
            if (query.length >= 2) {
                $.getJSON('{{ url_for("reports.search_all_bills") }}', { query: query })
                    .done(function(response) {
                        if (response.success && response.bills.length > 0) {
                            let html = '';
                            response.bills.forEach(bill => {
                                html += `
                                    <div class="bill-result-item border-bottom py-2" style="cursor: pointer;" data-bill='${JSON.stringify(bill)}'>
                                        <div class="d-flex justify-content-between">
                                            <div>
                                                <strong>${bill.bill_no}</strong><br>
                                                <small class="text-muted">${bill.customer_name}</small>
                                            </div>
                                            <div class="text-end">
                                                <small>${bill.date}</small><br>
                                                <div class="btn-group btn-group-sm">
                                                    <button class="btn btn-outline-success btn-edit" data-bill-no="${bill.bill_no}" data-bill-type="${bill.bill_type}">
                                                        <i class="fas fa-edit"></i>
                                                    </button>
                                                    <button class="btn btn-outline-primary btn-print" data-bill-no="${bill.bill_no}" data-bill-type="${bill.bill_type}">
                                                        <i class="fas fa-print"></i>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                `;
                            });
                            $('#billSearchResults').html(html).show();
                        } else {
                            $('#billSearchResults').html('<div class="text-muted py-2">No bills found</div>').show();
                        }
                    });
            } else {
                $('#billSearchResults').hide();
            }
        }
    });
    
    // Handle bill actions
    $(document).on('click', '.btn-edit', function() {
        const billNo = $(this).data('bill-no');
        const billType = $(this).data('bill-type');
        if (billType === 'Normal') {
            window.open(`{{ url_for('reports.edit_bill', bill_no='') }}${billNo}`, '_blank');
        } else {
            window.open(`{{ url_for('reports.edit_jambo_bill', bill_no='') }}${billNo}`, '_blank');
        }
    });
    
    $(document).on('click', '.btn-print', function() {
        const billNo = $(this).data('bill-no');
        const billType = $(this).data('bill-type');
        if (billType === 'Normal') {
            window.open(`{{ url_for('reports.view_bill', bill_no='') }}${billNo}`, '_blank');
        } else {
            window.open(`{{ url_for('reports.view_jambo_bill', bill_no='') }}${billNo}`, '_blank');
        }
    });
});
</script>
{% endblock %}