{% load static %}
{% include 'includes/header.html' %}
<style>
    .custom-col-8 {
        width: 72% !important;
    }

    .custom-col-4 {
        width: 28% !important;
    }
</style>
{% include 'pages/sidebar.html' %}
{% include 'includes/customer_sidebar.html' %}
{% include 'includes/navbar.html' %}

<div class="container-xxl flex-grow-1 container-p-y">

    <!-- Breadcrumb -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h4 class="mb-0">Edit Sales </h4>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item"><a href="/store/dashboard">Dashboard</a></li>
                <li class="breadcrumb-item"><a href="/wholesale/sales/">Sales</a></li>
                <li class="breadcrumb-item active" aria-current="page">Edit</li>
            </ol>
        </nav>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <form id="sales_form" class="row g-6 pt-3">
                        {% csrf_token %}
                        <input type="hidden" name="id" id="sales_order_id" value="{{ sales.id }}" />

                        <div class="col-8 custom-col-8">
                            <div class="row">
                                <div class="col-md-3 mb-4 form-control-validation">
                                    <label class="form-label" for="sales_date">INV Date <span
                                            style="color: red;">*</span></label>
                                    <input type="date" id="sales_date" class="form-control" name="sales_date"
                                        value="{{ sales.inv_date|date:'Y-m-d' }}" required />
                                </div>
                                <div class="col-3 mb-5">
                                    <label class="form-label mt-1" for="customer_id">Customer <span
                                            style="color: red;">*</span></label>
                                    <select class="form-control select2" id="customer_id" name="customer_id"
                                        autocomplete="off" required>
                                        {% for item in customer %}
                                        <option value="{{ item.id }}" {% if item.id == sales.customer_id %}selected{% endif %}>{{ item.name }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                                <div class="col-md-3 mb-4 form-control-validation">
                                    <label class="form-label" for="sales_person">Sales Person</label>
                                    <input type="text" id="sales_person" class="form-control" name="sales_person"
                                        value="{{ sales.employee_name|default:'' }}" />
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-3 mb-4 form-control-validation">
                                    <label class="form-label" for="imei_number_enter">Search IMEI Number</label>
                                    <div class="input-group">
                                        <input type="text" id="imei_number_enter" class="form-control typeahead"
                                            name="imei_number_enter" placeholder="Type and enter" autocomplete="off"
                                            style="background-color: #dbf7ff;" />
                                    </div>
                                    <div class="invalid-feedback" id="imei-error"></div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-3 mb-4 form-control-validation">
                                    <label class="form-label" for="subcategory_id">Subcategory</label>
                                    <select class="select2  form-control" id="subcategory_id" name="subcategory_id">
                                        <option value="">Select</option>
                                        {% for subcat in subcategory %}
                                        <option value="{{ subcat.id }}">{{ subcat.name }}</option>
                                        {% endfor %}
                                    </select>
                                </div>

                                <div class="col-md-3 mb-4 form-control-validation">
                                    <label class="form-label" for="brand_id">Brand</label>
                                    <select class="select2  form-control" id="brand_id" name="brand_id">
                                        <option value="">Select</option>
                                    </select>
                                </div>

                                <div class="col-md-3 mb-4 form-control-validation">
                                    <label class="form-label" for="model_id">Model</label>
                                    <select class="select2  form-control" id="model_id" name="model_id">
                                        <option value="">Select</option>
                                    </select>
                                </div>

                                <div class="col-md-3 mb-4 form-control-validation">
                                    <label class="form-label" for="variant_no">Variant</label>
                                    <select class="select2  form-control" id="variant_no" name="variant_no">
                                        <option value="">Select</option>
                                    </select>
                                </div>

                                <div class="col-md-3 mb-4 form-control-validation">
                                    <label class="form-label" for="color_id">Color</label>
                                    <select class="select2  form-control" id="color_id" name="color_id">
                                        <option value="">Select</option>
                                    </select>
                                </div>

                                <div class="col-md-3 form-control-validation mb-4">
                                    <label class="form-label" for="rate">Rate (₹)</label>
                                    <input type="number" id="rate" class="form-control" name="rate" readonly />
                                </div>

                                <div class="col-md-3 form-control-validation ">
                                    <label class="form-label" for="discount">Discount (₹)</label>
                                    <div class="d-flex gap-2">
                                        <input type="number" id="discount_percent" class="form-control" placeholder="%"
                                            min="0" />
                                        <input type="number" id="discount_amount" class="form-control" placeholder="₹"
                                            min="0" />
                                    </div>
                                </div>

                                <div class="col-md-3 form-control-validation mb-4">
                                    <div class="row">
                                        <div class="col-md-6 form-control-validation">
                                            <label class="form-label" for="tax_cgst">CGST (₹)</label>
                                            <input type="number" id="tax_cgst" class="form-control" name="tax_cgst"
                                                readonly />
                                        </div>
                                        <div class="col-md-6 form-control-validation">
                                            <label class="form-label" for="tax_sgst">SGST (₹)</label>
                                            <input type="number" id="tax_sgst" class="form-control" name="tax_sgst"
                                                readonly />
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-3  form-control-validation">
                                    <label class="form-label" for="net_rate">Net Rate (₹)</label>
                                    <input type="number" id="net_rate" class="form-control" name="net_rate" readonly />
                                    <small class="text-muted mt-2" id="mop_price_text" style="display:none;">MOP:
                                        ₹0</small>
                                    <div class="invalid-feedback" id="rate-error"></div>
                                </div>

                                <div class="col-md-3 text-start mt-5">
                                    <button type="button" class="btn btn-success" name="add_item" id="add_item"
                                        onclick="addInwardRow()">+Update List</button>
                                </div>

                                <!-- Hidden fields -->
                                <div class="col-12">
                                    <input type="hidden" name="upgrade_id" id="upgrade_id" />
                                    <input type="hidden" name="upgrade_amount" id="upgrade_amount" />
                                    <input type="hidden" name="special_id" id="special_id" />
                                    <input type="hidden" name="special_amount" id="special_amount" />
                                    <input type="hidden" name="mop_price" id="mop_price" />
                                    <input type="hidden" name="bop_price" id="bop_price" />
                                    <input type="hidden" name="wsp_price" id="wsp_price" />
                                    <input type="hidden" name="fsp_price" id="fsp_price" />
                                    <input type="hidden" name="db_price" id="db_price" />
                                    <input type="hidden" name="source" id="source" />
                                    <input type="hidden" name="tax_amount" id="tax_amount" />
                                    <input type="hidden" name="tax_percent" id="tax_percent" />
                                    <input type="hidden" name="ean_number" id="ean_number" />
                                    <input type="hidden" name="purchase_price" id="purchase_price" />
                                    <input type="hidden" name="sales_id" id="sales_id" />
                                    <input type="hidden" name="item_id" id="item_id" />
                                </div>

                                <div class="col-md-12 ">
                                    <div class="table-responsive text-nowrap">
                                        <table class="table mt-5" id="itemTable">
                                            <thead>
                                                <tr>
                                                    <th>Actions</th>
                                                    <th>Subcategory</th>
                                                    <th>Brand</th>
                                                    <th>Model</th>
                                                    <th>Variant</th>
                                                    <th>Color</th>
                                                    <th>IMEI</th>
                                                    <th>Rate (₹)</th>
                                                    <th>Discount (₹)</th>
                                                    <th>CGST (₹)</th>
                                                    <th>SGST (₹)</th>
                                                    <th>Amount (₹)</th>
                                                </tr>
                                            </thead>
                                            <tbody></tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Sidebar column -->
                        <div class="col-md-4 custom-col-4 mt-5 mb-4 form-control-validation"
                            style="padding: 2%; padding-top: 0px;">
                            <div class="row">
                                <!-- Available Stock Card -->
                                <div class="col-12" id="stock_list_wrapper" style="padding: 0px; padding-bottom: 20px;">
                                    <h6 class="text-muted">Available Stock</h6>
                                    <div id="stockListContainer"
                                        style="max-height: 200px; overflow-y: auto; border: 1px solid #f0f0f0; border-radius: 4px; background-color: #f9f9f9; padding: 10px; text-align: center;">
                                        <div class="text-center text-muted">Loading...</div>
                                    </div>
                                </div>

                                <div class="col-12">
                                    <hr style="border-top: 2px dashed #999; margin-top: 3%;">
                                </div>

                                <!-- Scheme Details Card -->
                                <div class="col-12" style="padding:0;">
                                    <div style="max-height:300px; overflow-y:auto;">
                                        <h5 class="text-center mb-2">Scheme Details</h5>
                                        <table id="stock_table" class="table table-bordered mb-0"
                                            style="border:1px solid #f2f2f2; background-color:#c3c3f1;">
                                            <thead style="background-color:#9cd3f3; position:sticky; top:0; z-index:1;">
                                                <tr>
                                                    <th>Scheme Type</th>
                                                    <th>Amount (₹)</th>
                                                </tr>
                                            </thead>
                                            <tbody style="background-color:#EAF4FD;">
                                                <tr class="no-data">
                                                    <td colspan="2" align="center">No data</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>

                                <div class="col-12">
                                    <hr style="border-top: 2px dashed #999; margin-top: 3%;">
                                </div>

                                <!-- Summary Box -->
                                <div class="col-12 mb-4 mt-5">
                                    <div class="summary-box shadow"
                                        style="border: 1px solid #ddd; padding: 24px 28px; background:#EAF4FD; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.08);">
                                        <h5
                                            style="text-align:center;background:#9cd3f3;padding:5px; border-radius:8px;font-weight:600;color:#333;">
                                            Sales Summary (<small style="color: red;">Total Quantity - <span
                                                    id="total_quantity">0</span></small>)
                                        </h5>

                                        <div class="summary-row"><span class="label">MRP (₹)</span><span class="value"
                                                id="sub_total">0.00</span></div>
                                        <div class="summary-row"><span class="label">Discount (₹)</span><span
                                                class="value" id="total_discount">0.00</span></div>
                                        <div class="summary-row"><span class="label">Taxable Value (₹)</span><span
                                                class="value" id="total_tax">0.00</span></div>
                                        <div class="summary-row"><span class="label">Tax CGST (₹)</span><span
                                                class="value" id="total_tax_cgst">0.00</span></div>
                                        <div class="summary-row"><span class="label">Tax SGST (₹)</span><span
                                                class="value" id="total_tax_sgst">0.00</span></div>

                                        <div class="summary-upi" style="margin-top:12px;">
                                            <h5 style="text-align:center;color:#333;">Transaction Modes</h5>
                                            <div
                                                style="display:flex;justify-content:center;gap:16px;margin-bottom:10px;flex-wrap: wrap;">
                                                <label><input type="checkbox" class="payment-option"
                                                        data-target="cashBox" {% if sales.cash > 0 %}checked{% endif %}>
                                                    Cash</label>
                                                <label><input type="checkbox" class="payment-option"
                                                        data-target="bankBox" {% if sales.bank > 0 %}checked{% endif %}>
                                                    Bank</label>
                                                <label><input type="checkbox" class="payment-option"
                                                        data-target="financeBox" {% if sales.finance_amount > 0 %}checked{% endif %}>
                                                    Finance</label>
                                            </div>

                                            {% if sales.cash > 0 %}
                                            <div class="payment-box" id="cashBox" style="display:block;">
                                                {% else %}
                                                <div class="payment-box" id="cashBox" style="display:none;">
                                                    {% endif %}
                                                    <div class="summary-row2"><span class="label">Cash Amount (₹)</span>
                                                        <input type="number" class="value" id="cash_amount"
                                                            value="{{ sales.cash }}" step="0.01"
                                                            style="text-align: right; background-color: white !important; border: 1px solid #ced4da; border-radius: 4px;">
                                                    </div>
                                                    <div class="col-12" id="dividerCash" style="display:none;">
                                                        <hr>
                                                    </div>
                                                </div>

                                                {% if sales.bank > 0 %}
                                                <div class="payment-box" id="bankBox" style="display:block;">
                                                    {% else %}
                                                    <div class="payment-box" id="bankBox" style="display:none;">
                                                        {% endif %}
                                                        <div class="summary-row2"><span class="label">Bank Amount
                                                                (₹)</span>
                                                            <input type="number" class="value" id="bank_amount"
                                                                value="{{ sales.bank }}" step="0.01"
                                                                style="text-align: right;">
                                                        </div>
                                                        <div class="col-12" id="dividerBank" style="display:none;">
                                                            <hr>
                                                        </div>
                                                    </div>

                                                    {% if sales.finance_amount > 0 %}
                                                    <div class="payment-box" id="financeBox" style="display:block;">
                                                        {% else %}
                                                        <div class="payment-box" id="financeBox" style="display:none;">
                                                            {% endif %}
                                                            <div class="summary-row2"><span class="label">Finance
                                                                    Name</span>
                                                                <select class="value select2" id="finance_id"
                                                                    name="finance_id">
                                                                    <option value="">Select</option>
                                                                    {% for b in finance %}
                                                                    <option value="{{ b.id }}" {% if b.id == sales.finance_id %}selected{% endif %}>{{b.name }}</option>
                                                                    {% endfor %}
                                                                </select>
                                                            </div>
                                                            <div class="summary-row2"><span class="label">Disbursed
                                                                    Amount
                                                                    (₹)</span>
                                                                <input type="number" class="value" id="finance_amount"
                                                                    value="{{ sales.finance_amount }}" step="0.01"
                                                                    style="text-align: right;">
                                                            </div>
                                                            <div class="summary-row2" id="finance_charges_row">
                                                                <span class="label">Finance Charges (₹)</span>
                                                                <input type="number" class="value" id="finance_charges"
                                                                    value="{{ sales.charges }}" step="0.01"
                                                                    style="text-align: right;">
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-12">
                                                        <hr style="border-top:2px dashed #999;margin-top:3%;">
                                                    </div>
                                                    <div class="summary-row total-row"><span class="label">Total
                                                            (₹)</span><span class="value" id="total_payable">0.00</span>
                                                    </div>
                                                    <div class="summary-row2"><span class="label">Balance
                                                            (₹)</span><span class="value"
                                                            id="balance_amount">0.00</span></div>
                                                    <div id="overpay_warning"
                                                        style="display:none; background:#ffe5e5; color:#b30000; font-size:14px; margin-top:10px; text-align:center; font-weight:700; padding:8px 12px; border:1px solid #ff4d4d; border-radius:8px;">
                                                        ⚠ Overpayment detected.</div>
                                                </div>
                                            </div>

                                            <div class="col-12 mb-4">
                                                <label class="form-label">Remarks</label>
                                                <textarea class="form-control" rows="3"
                                                    id="description">{{ sales.remarks|default:'' }}</textarea>
                                            </div>

                                            <div class="col-12 d-flex justify-content-end gap-3 mb-4">
                                                <button type="button" class="btn btn-primary"
                                                    onclick="history.back()">Back</button>
                                                <button type="submit" class="btn btn-success px-4">Update</button>
                                            </div>
                                        </div>
                                    </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

{% include 'includes/footer.html' %}
{% include 'includes/common_js.html' %}
{% include 'includes/load_dropdown.html' %}
{% include 'external_wholesale/sales/sales_js.html' %}

<script>
    $(document).ready(function () {
        // CSRF Token set for AJAX
        $.ajaxSetup({
            headers: { "X-CSRFToken": $('input[name="csrfmiddlewaretoken"]').val() }
        });

        const salesOrderId = $('#sales_order_id').val();

        // 1. Initial Load of Items
        loadExistingItems(salesOrderId);

        // 2. Load Stock logic (override to pass edit_id)
        window.loadWholesaleCustomerStock = function () {
            const customerId = $('#customer_id').val();
            if (!customerId) return;

            $.ajax({
                url: '/wholesale/ajax/customer-stock/',
                type: 'POST',
                data: {
                    csrfmiddlewaretoken: $('input[name="csrfmiddlewaretoken"]').val(),
                    edit_id: salesOrderId
                },
                success: function (response) {
                    if (response.status === 'success') {
                        displayStockList(response.stock);
                    } else {
                        $('#stockListContainer').html('<div class="text-center text-muted">No stock available</div>');
                    }
                }
            });
        };

        // Load stock initially
        loadWholesaleCustomerStock();

        // 3. Form Submit Override
        $('#sales_form').off('submit').on('submit', function (e) {
            e.preventDefault();
            if (!this.checkValidity()) { this.reportValidity(); return; }

            if ($('#itemTable tbody tr').length === 0) {
                showToast('info', 'Please add at least one item.'); return;
            }

            const paymentErrors = validatePaymentModes();
            if (paymentErrors.length > 0) {
                showSweetAlert('warning', paymentErrors.join('\n')); return;
            }

            let items = [];
            $('#itemTable tbody tr').each(function () {
                let $row = $(this);
                items.push({
                    item_id: $row.data('item-id'),
                    sales_id: $row.data('sales-id'),
                    ean: $row.data('ean'),
                    subcategory_id: $row.data('subcategory-id'),
                    brand_id: $row.data('brand-id'),
                    model_id: $row.data('model-id'),
                    variant_id: $row.data('variant-id'),
                    color_id: $row.data('color-id'),
                    imei: $row.find('.imei').text().trim(),
                    rate: parseFloat($row.find('.rate').text()) || 0,
                    tax_percent: $row.data('tax-percent'),
                    tax_amount: $row.data('tax-amount'),
                    tax_cgst: $row.find('.tax_cgst').text(),
                    tax_sgst: $row.find('.tax_sgst').text(),
                    discount_percent: $row.data('discount-percent'),
                    discount_amount: parseFloat($row.find('.discount').text()),
                    net_rate: parseFloat($row.find('.net_rate').text()),
                    upgrade_id: $row.data('upgrade-id'),
                    upgrade_amount: $row.data('upgrade-amount'),
                    special_id: $row.data('special-id'),
                    special_amount: $row.data('special-amount'),
                    mop_price: $row.data('mop-price'),
                    bop_price: $row.data('bop-price'),
                    fsp_price: $row.data('fsp-price'),
                    wsp_price: $row.data('wsp-price'),
                    db_price: $row.data('db-price'),
                    source: $row.data('source'),
                    purchase_price: $row.data('purchase-price')
                });
            });

            let payments = [];
            let cashVal = parseFloat($('#cash_amount').val()) || 0;
            if (cashVal > 0) payments.push({ type: 'cash', amount: cashVal });
            let bankVal = parseFloat($('#bank_amount').val()) || 0;
            if (bankVal > 0) payments.push({ type: 'bank', amount: bankVal });
            let financeAmt = parseFloat($('#finance_amount').val()) || 0;
            if (financeAmt > 0) payments.push({ type: 'finance', id: $('#finance_id').val(), amount: financeAmt });

            let formData = new FormData(this);
            formData.append('items', JSON.stringify(items));
            formData.append('payments', JSON.stringify(payments));
            formData.append('total_quantity', $('#total_quantity').text());
            formData.append('sub_total', $('#sub_total').text());
            formData.append('total_payable', $('#total_payable').text());
            formData.append('total_paid', (cashVal + bankVal + financeAmt));
            formData.append('balance', $('#balance_amount').text());
            formData.append('total_discount', $('#total_discount').text());
            formData.append('total_tax_cgst', $('#total_tax_cgst').text());
            formData.append('total_tax_sgst', $('#total_tax_sgst').text());
            formData.append('description', $('#description').val());

            handleFormSubmit(
                this,
                '/wholesale/sales/update/',
                null,
                'sales_form',
                true,
                'Wholesale Sales Update',
                [() => { window.location.href = '/wholesale/sales/'; }],
                formData,
                false
            );
        });
    });

    function loadExistingItems(tm_id) {
        $.ajax({
            url: '/wholesale/ajax/sales-items/',
            type: 'GET',
            data: { tm_sales_id: tm_id },
            success: function (response) {
                if (response.status === 'success') {
                    response.data.forEach(item => {
                        updateInwardTable(
                            item.item_id, item.ean,
                            item.subcategory_id, item.subcategory_name,
                            item.brand_id, item.brand_name,
                            item.model_id, item.model_name,
                            item.variant_id, item.variant_name,
                            item.color_id, item.color_name,
                            item.imei, item.rate,
                            item.tax_percent, item.tax_amount, item.tax_sgst, item.tax_cgst,
                            item.discount_percent, item.discount_amount,
                            item.net_rate,
                            item.upgrade_id, item.upgrade_amount,
                            item.special_id, item.special_amount,
                            0, // priceId
                            item.mop_price, item.bop_price, item.wsp_price, item.fsp_price, item.db_price,
                            '', // source
                            item.purchase_price, item.sales_id
                        );
                    });
                    updateSalesSummary();
                }
            }
        });
    }
</script>