{% load static %}
{% include 'includes/header.html' %}
{% include 'includes/wholesale_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">Purchase Order</h4>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item">
                    <a href="/store/dashboard" class="d-flex align-items-center text-decoration-none">
                        <i class="ti tabler-home me-1"></i>
                    </a>
                </li>
                <li class="breadcrumb-item">Purchase</li>
                <li class="breadcrumb-item active" aria-current="page">Purchase Order </li>
            </ol>
        </nav>
    </div>

    <div class="row">
        <!-- FormValidation -->
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <form id="add_form" class="row g-6 pt-5">
                        {% csrf_token %}
                        <div class="col-9">
                            <div class="row">
                                <div class="col-md-3 form-control-validation mb-5">
                                    <label class="form-label" for="po_date">Transfer No</label>
                                    <input type="text" id="po_no" class="form-control" name="po_no"
                                        value="{{generated_po_no}}" readonly />
                                </div>

                                <div class="col-md-3 form-control-validation mb-5">
                                    <label class="form-label" for="po_date">Transfer Date <span
                                            style="color: red;">*</span></label>
                                    <input type="date" id="po_date" class="form-control" name="po_date" required />
                                </div>

                                <div class="col-md-3 form-control-validation mb-5">
                                    <label class="form-label" for="supply_branch_id">Supply Branch</label>
                                    <select class="select2  form-control" id="supply_branch_id" name="supply_branch_id">
                                        <option value="">Select</option>
                                        {% for k in branch %}
                                        <option value="{{k.id}}">{{k.name}}</option>
                                        {% endfor %}
                                    </select>
                                </div>

                                <div class="col-md-3 mb-5 form-control-validation">
                                    <label class="form-label" for="supply_branch_id">Employee</label>
                                    <select class="select2  form-control" id="employee_id" name="employee_id">
                                        <option value="">Select</option>
                                        {% for emp in employee %}
                                        <option value="{{ emp.id }}" {% if emp.selected %}selected{% endif %}>
                                            {{ emp.name }}
                                        </option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>

                            <div class="row">


                                <div class="col-md-1 form-control-validation text-start mt-5">
                                    <input type="hidden" id="item_id" name="item_id" />
                                    <input type="hidden" id="hsn_code" name="hsn_code" />
                                    <input type="hidden" id="db_price" name="db_price" />
                                    <input type="hidden" id="fsp" name="fsp" />
                                    <input type="hidden" id="wsp" name="wsp" />
                                    <input type="hidden" id="mop" name="mop" />
                                    <input type="hidden" id="bop" name="bop" />
                                    <input type="hidden" id="mrp" name="mrp" />

                                </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>EAN</th>
                                                    <th>Subcategory</th>
                                                    <th>Brand</th>
                                                    <th>Model</th>
                                                    <th>Variant</th>
                                                    <th>Color</th>
                                                    <th>Rate (₹)</th>
                                                    <th style="width: 100px;">Quantity</th>
                                                    <th>Amount (₹)</th>
                                                </tr>
                                            </thead>
                                            <tbody></tbody>
                                        </table>
                                    </div>
                                </div>


                            </div>
                        </div>


                        <div class="col-md-3">
                            <div class="row">
                                <div class="col-12 mb-5 mt-5">
                                    <div class="d-flex justify-content-end mb-2">
                                        <button type="button" id="loadStockBtn" class="btn btn-sm btn-primary"
                                            onclick="openStockModal()" disabled>
                                            View Stock
                                        </button>
                                    </div>
                                    <!-- Old stock list table removed -->

                                    <!-- Selected Stock Table Container to prevent shake -->


                                    <table id="summaryTable" class="table table-bordered w-100"
                                        style="border: 1px solid #f2f2f2; margin-top: 3%;">
                                        <thead style="background-color: #9cd3f3;">
                                            <tr>
                                                <th colspan="2" style="text-align: center;">Summary Table</th>
                                            </tr>
                                        </thead>
                                        <tbody style="background-color: #EAF4FD;">
                                            <tr>
                                                <td> Total Quantity</td>
                                                <td align="end" colspan="2" id="qty_total_placeholder">0</td>
                                            </tr>
                                            <tr>
                                                <td>Sub Total</td>
                                                <td align="end" colspan="2" id="sub_total_placeholder">0.00</td>
                                            </tr>
                                            <tr>
                                                <td>RoundOff</td>
                                                <td align="end" colspan="2" id="round_off_placeholder">0.00</td>
                                            </tr>

                                            <tr>
                                                <td>Grand Total</td>
                                                <td colspan="2" id="total_payable" align="end"
                                                    style="background-color: #9cd3f3; color: black; font-size: 21px;">
                                                    0.00
                                                </td>
                                            </tr>

                                        </tbody>
                                    </table>
                                </div>

                                <div class="col-12 mt-5 mb-4">
                                    <label class="form-label" for="supply_branch_id">Remarks</label>
                                    <textarea class="form-control" id="description" rows="3"
                                        name="description"></textarea>
                                </div>


                                <div class="col-12 mt-4 d-flex justify-content-center form-control-validation">
                                    <button type="button" class="btn btn-primary"
                                        onclick="history.back()">Back</button>&nbsp; &nbsp;
                                    <button type="submit" id="submit" name="submitButton" class="btn btn-success"
                                        id="updateBtn">Save</button>
                                </div>

                            </div>

                        </div>

                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Stock View Modal -->
<div class="modal fade" id="stockViewModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="stockViewModalLabel">Available Stock</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row mb-4">
                    <div class="col-md-4">
                        <label class="form-label">Brand</label>
                        <select class="select2 form-control" id="modal_brand_id">
                            <option value="">Select Brand</option>
                            {% for b in brand %}
                            <option value="{{ b.id }}">{{ b.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Model</label>
                        <select class="select2 form-control" id="modal_model_id">
                            <option value="">Select Model</option>
                        </select>
                    </div>
                </div>
                <div class="table-responsive text-nowrap">
                    <table class="table table-bordered table-hover" id="modalStockTable">
                        <thead class="table-light">
                            <tr>
                                <th>Action</th>
                                <th>Subcategory</th>
                                <th>Brand</th>
                                <th>Model</th>
                                <th>Variant</th>
                                <th>Color</th>
                                <th>Available Quantity</th>
                                <th>Purchase Price (₹)</th>
                                <th>MRP (₹)</th>
                                <th>MOP (₹)</th>
                                <th>BOP (₹)</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td colspan="11" class="text-center">Please select a Brand to load stock.</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

{% include 'includes/footer.html' %}
{% include 'includes/common_js.html' %}
{% include 'includes/load_dropdown.html' %}
{% include 'material_request/order_js.html' %}

<script>
    let isEditingRow = false;

    $(document).ready(function () {
        CurrentDate('po_date');

        $('#supply_branch_id').on('change', function () {
            clearTable();
            if (this.value) {
                $('#loadStockBtn').prop('disabled', false);
                openStockModal();
            } else {
                $('#loadStockBtn').prop('disabled', true);
            }
        });

        // Modal filter events
        $('#modal_brand_id').on('change', function () {
            loadModels('modal_brand_id', 'modal_model_id');
            loadStockSummary($('#supply_branch_id').val());
        });

        $('#modal_model_id').on('change', function () {
            loadStockSummary($('#supply_branch_id').val());
        });
    });



    function addItemFromModal(itemJson) {
        let item = JSON.parse(decodeURIComponent(itemJson));

        // Use default quantity 1 for modal addition
        updateOrAddRow(item.item_id, item.ean,
            item.subcategory_id, item.subcategory,
            item.brand_id, item.brand,
            item.model_id, item.model,
            item.variant_id, item.variant,
            item.color_id, item.color,
            item.fsp, 1,
            item.hsn_code, item.db_price,
            item.fsp, item.wsp, item.mop, item.bop, item.mrp,
            item.stock
        );

        // Optional: Keep modal open as per user request flow? 
        // "On clicking Add, the selected item should be added directly to the main itemTable."
        // Usually, for bulk adds, we keep it open.
    }

    $(document).ready(function () {
        $('#supply_branch_id').select2('open');
        originalSubcategories = $('#subcategory_id').html();
    });

    $('#supply_branch_id').on('select2:select', function () {
        $('#ean_number').focus().select();
    });

    function updateAmount() {
        let qty = parseFloat($('#quantity').val()) || 0;
        let rate = parseFloat($('#rate').val()) || 0;
        let amount = qty * rate;
        $('#amount').val(amount.toFixed(2));
    }

    $('#quantity, #rate').on('input', function () {
        updateAmount();
    });

    function clearTable() {
        $('#itemTable tbody').empty();
        $('#ean_number').val('');
        resetItemFields();
        updateSummaryTable();
    }

    function addRow() {
        clearErrors();

        let itemId = $('#item_id').val();
        let EanNumber = $('#ean_number').val().trim();
        let subcategoryId = $('#subcategory_id').val();
        let subcategoryName = $('#subcategory_id option:selected').text();
        let brandId = $('#brand_id').val();
        let brandName = $('#brand_id option:selected').text();
        let modelId = $('#model_id').val();
        let modelName = $('#model_id option:selected').text();
        let variantId = $('#variant_id').val();
        let variantName = $('#variant_id option:selected').text();
        let colorId = $('#color_id').val();
        let colorName = $('#color_id option:selected').text();
        let rate = parseFloat($('#rate').val()) || 0;
        let quantity = parseFloat($('#quantity').val()) || 0;
        let hsnCode = $('#hsn_code').val();
        let dbPrice = $('#db_price').val();
        let fsp = $('#fsp').val() || 0;
        let wsp = $('#wsp').val() || 0;
        let mop = $('#mop').val() || 0;
        let bop = $('#bop').val() || 0;
        let mrp = $('#mrp').val() || 0;
        let maxStock = parseFloat($('#max_allowed_stock').val()) || 0;

        let hasError = false;
        if (!brandId) {
            $('#brand_id').addClass('is-invalid');
            $('#brand-error').text('Please select a brand.');
            hasError = true;
        }
        if (!subcategoryId) {
            $('#subcategory_id').addClass('is-invalid');
            $('#subcategory-error').text('Please select a subcategory.');
            hasError = true;
        }
        if (!modelId) {
            $('#model_id').addClass('is-invalid');
            $('#model-error').text('Please select a model.');
            hasError = true;
        }
        if (!variantId) {
            $('#variant_id').addClass('is-invalid');
            $('#variant-error').text('Please select a variant.');
            hasError = true;
        }
        if (!colorId) {
            $('#color_id').addClass('is-invalid');
            $('#color-error').text('Please select a color.');
            hasError = true;
        }
        if (!rate) {
            $('#rate').addClass('is-invalid');
            $('#rate-error').text('Rate is required.');
            hasError = true;
        }
        if (!quantity) {
            $('#quantity').addClass('is-invalid');
            $('#quantity-error').text('Quantity is required.');
            hasError = true;
        } else {
            // Validate if total quantity (existing + new) for this product exceeds stock
            let alreadyInTableQty = 0;
            let selector = `#itemTable tbody tr[data-product-id="${brandId}-${modelId}-${variantId}-${colorId}"]`;
            let existingRow = $(selector);
            if (existingRow.length > 0) {
                alreadyInTableQty = parseFloat(existingRow.find('.quantity-input').val()) || 0;
            }

            if ((quantity + alreadyInTableQty) > maxStock) {
                showSweetAlert('info', `Total quantity (${quantity + alreadyInTableQty}) cannot exceed available stock (${maxStock}).`);
                hasError = true;
            }
        }

        if (hasError) return;

        updateOrAddRow(itemId, EanNumber,
            subcategoryId, subcategoryName,
            brandId, brandName,
            modelId, modelName,
            variantId, variantName,
            colorId, colorName,
            rate, quantity,
            hsnCode, dbPrice,
            fsp, wsp, mop, bop, mrp,
            maxStock
        );

        $('#ean_number').val('');
        resetItemFields();
    }

    function clearErrors() {
        $('#brand_id, #subcategory_id, #model_id, #variant_id, #color_id, #rate, #quantity').removeClass('is-invalid');
        $('.invalid-feedback').text('');
    }

    function updateOrAddRow(itemId, EanNumber,
        subcategoryId, subcategoryName,
        brandId, brandName,
        modelId, modelName,
        variantId, variantName,
        colorId, colorName,
        rate, quantity,
        hsnCode, dbPrice,
        fsp, wsp, mop, bop, mrp,
        maxStock) {

        rate = parseFloat(rate).toFixed(2);
        quantity = parseFloat(quantity);
        maxStock = parseFloat(maxStock);

        // Strong key for identification: brand-model-variant-color
        let productKey = `${brandId}-${modelId}-${variantId}-${colorId}`;
        let selector = `#itemTable tbody tr[data-product-id="${productKey}"]`;
        let existingRow = $(selector);

        if (existingRow.length > 0) {
            let input = existingRow.find('.quantity-input');
            let currentQty = parseFloat(input.val()) || 0;
            let newTotalQty = currentQty + quantity;

            if (newTotalQty > maxStock) {
                showSweetAlert('info', `Cannot add more. Total quantity (${newTotalQty}) exceeds available stock (${maxStock}).`);
                return;
            }

            input.val(newTotalQty).trigger('input');
        } else {
            let totalAmount = (rate * quantity).toFixed(2);
            let newRow = `
            <tr 
                data-product-id="${productKey}"
                data-brand-id="${brandId}" 
                data-model-id="${modelId}" 
                data-variant-id="${variantId}" 
                data-color-id="${colorId}" 
                data-rate="${rate}"  
                data-mrp="${mrp}"  
                data-db-price="${dbPrice}"  
                data-fsp="${fsp}"  
                data-wsp="${wsp}"  
                data-mop="${mop}"  
                data-bop="${bop}"
                data-ean-no="${EanNumber}"
                data-hsn-code="${hsnCode}"  
                data-subcategory-id="${subcategoryId}"
                data-max-stock="${maxStock}">
                <td>
                    <button type="button" class="btn btn-outline-danger btn-xs p-1" onclick="$(this).closest('tr').remove(); updateSummaryTable();"><i class="fas fa-trash-alt"></i></button>
                </td>
                <td class="ean">${EanNumber} <br><small>HSN: ${hsnCode}</small></td>
                <td>${subcategoryName}</td>
                <td>${brandName}</td>
                <td>${modelName}</td>
                <td>${variantName}</td>
                <td>${colorName}</td>
                <td class="rate text-end">${rate}</td>
                <td>
                    <input type="number" class="form-control form-control-sm quantity-input text-end" value="${quantity}" min="1" oninput="validateRowQuantity(this)">
                </td>
                <td class="amount text-end">${totalAmount}</td>
            </tr>`;

            $('#itemTable tbody').append(newRow);
        }
        updateSummaryTable();
    }

    function validateRowQuantity(input) {
        let row = $(input).closest('tr');
        let qty = parseFloat($(input).val()) || 0;
        let maxStock = parseFloat(row.data('max-stock')) || 0;

        if (qty > maxStock) {
            showSweetAlert('info', `Quantity exceeds available stock (${maxStock})!`);
            $(input).val(maxStock);
            qty = maxStock;
        }

        if (qty < 0) {
            $(input).val(1);
            qty = 1;
        }

        let rate = parseFloat(row.data('rate')) || 0;
        row.find('.amount').text((qty * rate).toFixed(2));
        updateSummaryTable();
    }

    function updateSummaryTable() {
        let totalQty = 0;
        let subTotal = 0;

        $('#itemTable tbody tr').each(function () {
            let qty = parseFloat($(this).find('.quantity-input').val()) || 0;
            let amount = parseFloat($(this).find('.amount').text()) || 0;
            totalQty += qty;
            subTotal += amount;
        });

        $('#qty_total_placeholder').text(totalQty);
        $('#sub_total_placeholder').text(subTotal.toFixed(2));

        let roundedTotal = Math.round(subTotal);
        let roundOff = parseFloat((roundedTotal - subTotal).toFixed(2));
        $('#round_off_placeholder').text(roundOff.toFixed(2));
        $('#total_payable').text(roundedTotal.toFixed(2));
    }

    $('#add_form').on('submit', function (e) {
        e.preventDefault();
        let branchId = $('#supply_branch_id').val();

        if (!branchId) {
            showToast('info', 'Please select a Supply Branch.');
            return;
        }

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

        let formData = new FormData(this);
        let items = [];

        $('#itemTable tbody tr').each(function () {
            items.push({
                subcategory_id: $(this).data('subcategory-id'),
                brand_id: $(this).data('brand-id'),
                model_id: $(this).data('model-id'),
                variant_id: $(this).data('variant-id'),
                color_id: $(this).data('color-id'),
                ean_number: $(this).data('ean-no'),
                rate: $(this).find('.rate').text(),
                quantity: $(this).find('.quantity-input').val(),
                amount: $(this).find('.amount').text(),
                hsn_code: $(this).data('hsn-code'),
                mrp: $(this).data('mrp') || 0,
                fsp: $(this).data('fsp') || 0,
                wsp: $(this).data('wsp') || 0,
                mop: $(this).data('mop') || 0,
                bop: $(this).data('bop') || 0,
                db_price: $(this).data('db-price') || 0,
            });
        });

        formData.append('items', JSON.stringify(items));
        formData.append('total_quantity', $('#qty_total_placeholder').text());
        formData.append('sub_total', $('#sub_total_placeholder').text());
        formData.append('round_off', $('#round_off_placeholder').text());
        formData.append('grand_total', $('#total_payable').text());

        handleFormSubmit(
            this,
            '/add_wholesale_po/',
            null,
            'add_form',
            true,
            'Purchase Order',
            [
                function (response) {
                    window.location.href = '/purchase-order';
                }
            ],
            formData,
            false
        );
    });

    $('#quantity').on('keydown', function (e) {
        if (e.key === 'Enter') {
            e.preventDefault();
            addRow();
        }
    });
</script>