{% 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: #28a745;
    color: white;
}
.jambo-details {
    font-size: 0.85em;
    color: #666;
}
.jambo-dropdown .dropdown-item.active .jambo-details {
    color: #fff;
}
</style>

<div class="container-fluid py-4">
    <h2 class="mb-4">
        <i class="fas fa-edit"></i>
        Edit Jambo Bill - {{ bill.bill_no }}
    </h2>

    <form id="editJamboBillForm">
        <div class="card">
            <div class="card-body">
                <!-- Bill Header -->
                <div class="row mb-4">
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="customer_name" class="form-label">Customer Name *</label>
                            <div class="customer-search-container">
                                <input type="text" name="customer_name" id="customer_name" class="form-control customer-search" 
                                       placeholder="Type to search customers..." value="{{ bill.customer_name }}" required>
                                <div id="customerDropdown" class="customer-dropdown">
                                    <!-- Customer items will be loaded here -->
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="date" class="form-label">Date *</label>
                            <input type="date" name="date" id="date" class="form-control" value="{{ bill.date }}" required>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="bill_no" class="form-label">Bill No</label>
                            <input type="text" id="bill_no" class="form-control" value="{{ bill.bill_no }}" readonly>
                        </div>
                    </div>
                </div>

                <!-- Items Table -->
                <div class="table-responsive">
                    <table class="table table-bordered">
                        <thead class="table-dark">
                            <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>Rate</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody id="itemsTableBody">
                            {% for item in bill.jambo_items %}
                            <tr data-row="{{ loop.index0 }}">
                                <td>{{ loop.index }}</td>
                                <td>
                                    <div class="jambo-search-container">
                                        <input type="text" name="jambo_no_{{ loop.index0 }}" class="form-control form-control-sm jambo-search"
                                               data-row="{{ loop.index0 }}" value="{{ item.jambo_no }}" placeholder="Search jambo...">
                                        <div id="jamboDropdown_{{ loop.index0 }}" class="jambo-dropdown">
                                            <!-- Jambo items will be loaded here -->
                                        </div>
                                    </div>
                                </td>
                                <td><input type="text" name="jambo_size_{{ loop.index0 }}" class="form-control form-control-sm" id="jambo_size_{{ loop.index0 }}" value="{{ item.jambo_size }}" readonly></td>
                                <td><input type="text" name="colour_{{ loop.index0 }}" class="form-control form-control-sm" id="colour_{{ loop.index0 }}" value="{{ item.colour }}" readonly></td>
                                <td><input type="text" name="micron_{{ loop.index0 }}" class="form-control form-control-sm" id="micron_{{ loop.index0 }}" value="{{ item.micron }}" readonly></td>
                                <td><input type="text" name="weight_{{ loop.index0 }}" class="form-control form-control-sm" id="weight_{{ loop.index0 }}" value="{{ item.weight }}"></td>
                                <td><input type="text" name="roll_no_{{ loop.index0 }}" class="form-control form-control-sm" id="roll_no_{{ loop.index0 }}" value="{{ item.roll_no }}" readonly></td>
                                <td><input type="text" name="varity_{{ loop.index0 }}" class="form-control form-control-sm" id="varity_{{ loop.index0 }}" value="{{ item.varity }}"></td>
                                <td><input type="number" name="rate_{{ loop.index0 }}" class="form-control form-control-sm" id="rate_{{ loop.index0 }}" value="{{ item.rate }}" step="0.01"></td>
                                <td>
                                    <button type="button" class="btn btn-sm btn-danger remove-row">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </td>
                            </tr>
                            {% endfor %}
                            
                            <!-- Empty rows -->
                            {% for i in range(bill.jambo_items|length, 10) %}
                            <tr data-row="{{ i }}">
                                <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 }}"></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" id="varity_{{ i }}"></td>
                                <td><input type="number" name="rate_{{ i }}" class="form-control form-control-sm" id="rate_{{ i }}" step="0.01"></td>
                                <td>
                                    <button type="button" class="btn btn-sm btn-danger remove-row">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>

                <div class="text-end mt-4">
                    <a href="{{ url_for('reports.list_bills') }}" class="btn btn-secondary me-2">
                        <i class="fas fa-arrow-left me-2"></i>
                        Cancel
                    </a>
                    <button type="submit" class="btn btn-success">
                        <i class="fas fa-save me-2"></i>
                        Update Jambo Bill
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>

<script>
$(document).ready(function() {
    // Customer search functionality (same as generate jambo bill)
    let selectedCustomerIndex = -1;
    const customerInput = $('.customer-search');
    const customerDropdown = $('#customerDropdown');

    customerInput.on('input', function() {
        const query = $(this).val().trim();
        if (query.length >= 1) {
            $.getJSON("{{ url_for('reports.search_customers') }}", { query: query })
                .done(function(response) {
                    if (response.success) {
                        updateCustomerDropdown(response.customers);
                    }
                });
        } else {
            customerDropdown.hide();
        }
    });

    function updateCustomerDropdown(customers) {
        customerDropdown.empty();
        selectedCustomerIndex = -1;
        
        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-customer="${customer.name}">${customer.name}</div>`);
            });
        }
        customerDropdown.show();
    }

    customerDropdown.on('click', '.dropdown-item', function() {
        const customerName = $(this).data('customer');
        if (customerName) {
            customerInput.val(customerName);
            customerDropdown.hide();
            selectedCustomerIndex = -1;
        }
    });

    // Jambo search functionality
    $('.jambo-search').each(function(index) {
        const jamboInput = $(this);
        const jamboDropdown = $(`#jamboDropdown_${index}`);
        let selectedJamboIndex = -1;

        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();
            }
        });

        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 => {
                    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();
        }

        jamboDropdown.on('click', '.dropdown-item', function() {
            const jamboData = $(this).data('jambo');
            if (jamboData) {
                jamboInput.val(jamboData.jambo_no);
                $(`#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 || '');
                jamboDropdown.hide();
                selectedJamboIndex = -1;
            }
        });
    });

    // Remove row functionality
    $('.remove-row').on('click', function() {
        const row = $(this).closest('tr');
        const inputs = row.find('input');
        inputs.val('');
    });

    // Form submission
    $('#editJamboBillForm').on('submit', function(e) {
        e.preventDefault();
        
        const formData = new FormData(this);
        const items = [];
        
        // Collect jambo items
        for (let i = 0; i < 10; i++) {
            const jamboNo = $(`input[name="jambo_no_${i}"]`).val();
            if (jamboNo && jamboNo.trim()) {
                items.push({
                    jambo_no: jamboNo,
                    jambo_size: $(`input[name="jambo_size_${i}"]`).val(),
                    colour: $(`input[name="colour_${i}"]`).val(),
                    micron: $(`input[name="micron_${i}"]`).val(),
                    weight: $(`input[name="weight_${i}"]`).val(),
                    roll_no: $(`input[name="roll_no_${i}"]`).val(),
                    varity: $(`input[name="varity_${i}"]`).val(),
                    rate: $(`input[name="rate_${i}"]`).val()
                });
            }
        }
        
        if (items.length === 0) {
            alert('Please add at least one jambo item');
            return;
        }
        
        // Submit form
        const submitData = new FormData();
        submitData.append('customer_name', $('#customer_name').val());
        submitData.append('date', $('#date').val());
        submitData.append('items', JSON.stringify(items));
        
        fetch(`{{ url_for('reports.edit_jambo_bill', bill_no=bill.bill_no) }}`, {
            method: 'POST',
            body: submitData
        })
        .then(response => {
            if (response.redirected) {
                window.location.href = response.url;
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Error updating jambo bill');
        });
    });
});
</script>

{% endblock %}