{% load static %}
{% include 'includes/header.html' %}
{% include 'includes/store_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">Transfer Request</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">Transfer</li>
                <li class="breadcrumb-item active" aria-current="page">Transfer Request </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_no">Transfer No</label>
                                    <input type="text" id="po_no" class="form-control" name="po_no" disabled />
                                </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" readonly />
                                </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"
                                        disabled>
                                        <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="employee_id">Employee</label>
                                    <select class="select2  form-control" id="employee_id" name="employee_id" disabled>
                                        <option value="">Select</option>
                                        {% for emp in employee %}
                                        <option value="{{ emp.id }}">
                                            {{ 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="datatables-ajax table table-bordered" 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()">
                                            View Stock
                                        </button>
                                    </div>

                                    <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="description">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="historyBack()">Back</button>&nbsp; &nbsp;
                                    <button type="button" id="updateBtn" class="btn btn-success"
                                        onclick="window.location.href='/transfer-request'">Update</button>
                                </div>

                                <div class="col-12 d-flex justify-content-center form-control-validation">
                                    <input type="hidden" id="tm_id" name="tm_id" value="{{id}}">
                                    <input type="hidden" id="tx_id" name="tx_id">
                                </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>
    var table;

    $(document).ready(function () {
        safeValue('#po_no', '{{ material_request.po_no|escapejs }}');
        safeValue('#po_date', '{{ material_request.po_date|escapejs }}');
        safeValue('#description', '{{ material_request.remarks|escapejs }}');
        safeSelectValue('#supply_branch_id', '{{ material_request.supply_branch_id|escapejs }}');
        safeSelectValue('#store_id', '{{ material_request.supply_branch_id|escapejs }}');
        safeSelectValue('#employee_id', '{{ material_request.employee_id|escapejs }}');
        refresh_data();

        // 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 displaySummary() {
        let totalQuantity = 0;
        let subTotal = 0;

        $('#itemTable tbody tr').each(function () {
            let quantity = parseFloat($(this).find('.quantity-input').val()) || 0;
            let amount = parseFloat($(this).find('td:eq(9)').text()) || 0;

            totalQuantity += quantity;
            subTotal += amount;
        });

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

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


    function initializeDataTable() {
        table = $('#itemTable').DataTable({
            "processing": true,
            "pageLength": 50,
            "destroy": true,
            "order": [],
            "dom": "t",
            "columns": [
                { "data": "action", "title": "Action" },
                { "data": "ean", "title": "EAN" },
                { "data": "subcategory", "title": "Subcategory" },
                { "data": "brand", "title": "Brand" },
                { "data": "model", "title": "Model" },
                { "data": "variant", "title": "Variant" },
                { "data": "color", "title": "Color" },
                { "data": "rate", "title": "Rate (₹)", "className": "text-end" },
                {
                    "data": "qty",
                    "title": "Quantity",
                    "className": "text-end",
                    "render": function (data, type, row) {
                        return `<input type="number" class="form-control form-control-sm quantity-input text-end" value="${data}" min="1" style="width: 80px;" onchange="updateRowQuantity(this, ${row.tx_id})">`;
                    }
                },
                { "data": "amt", "title": "Amount (₹)", "className": "text-end" }
            ],
            "ajax": {
                "url": '/ajax_material_request_edit/',
                "type": "POST",
                "data": function (data) {
                    data.csrfmiddlewaretoken = $('[name=csrfmiddlewaretoken]').val();
                    data.po_id = $('#tm_id').val();
                }
            },
            "createdRow": function (row, data, dataIndex) {
                $(row).attr('data-product-id', `${data.brand_id}-${data.model_id}-${data.variant_id}-${data.color_id}`);
                $(row).attr('data-max-stock', data.available_stock || 9999);
                $(row).attr('data-rate', data.rate);
            },
            "drawCallback": function (settings) {
                displaySummary();
            }
        });
    }

    function updateRowQuantity(input, tx_id) {
        let row = $(input).closest('tr');
        let qty = parseFloat($(input).val()) || 0;
        let maxStock = parseFloat(row.attr('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;
        }

        // Update amount display
        let rate = parseFloat(row.attr('data-rate')) || 0;
        row.find('td:eq(9)').text((qty * rate).toFixed(2));
        displaySummary();

        // Save to backend
        let rowData = table.row(row).data();
        saveOrder(
            $('#tm_id').val(),
            tx_id,
            rowData.ean,
            rowData.subcategory_id,
            rowData.brand_id,
            rowData.model_id,
            rowData.variant_id,
            rowData.color_id,
            rowData.rate,
            qty,
            qty * rowData.rate,
            rowData.hsn_code,
            rowData.db_price,
            rowData.fsp,
            rowData.wsp,
            rowData.mop,
            rowData.bop,
            rowData.mrp,
            0 // edit_id
        );
    }


    function refresh_data() {
        if (!table) {
            initializeDataTable();
        } else {
            table.ajax.reload();
        }
    }


    function addItemFromModal(itemJson) {
        let item = JSON.parse(decodeURIComponent(itemJson));
        let tm_id = $('#tm_id').val();

        let alreadyInTableQty = 0;
        let existingTxId = '';
        if (table) {
            table.rows().every(function () {
                let rowData = this.data();
                if (rowData.brand_id == item.brand_id && rowData.model_id == item.model_id && rowData.variant_id == item.variant_id && rowData.color_id == item.color_id) {
                    alreadyInTableQty = parseFloat(rowData.qty) || 0;
                    existingTxId = rowData.tx_id;
                }
            });
        }

        let newQty = alreadyInTableQty + 1;
        if (newQty > item.stock) {
            showSweetAlert('info', `Cannot add more. Total quantity (${newQty}) exceeds available stock (${item.stock}).`);
            return;
        }

        saveOrder(
            tm_id,
            existingTxId,
            item.ean,
            item.subcategory_id,
            item.brand_id,
            item.model_id,
            item.variant_id,
            item.color_id,
            item.fsp,
            newQty,
            newQty * item.fsp,
            item.hsn_code,
            item.db_price,
            item.fsp,
            item.wsp,
            item.mop,
            item.bop,
            item.mrp
        );
    }

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

    function saveOrder(tm_id, tx_id, ean_number, subcategoryId, brandId, modelId, variantId, colorId, rate, quantity, amount, hsn_code, db_price, fsp, wsp, mop, bop, mrp, edit_id = 0) {
        const payload = {
            tm_id: tm_id,
            tx_id: tx_id,
            ean_number: ean_number,
            subcategory_id: subcategoryId,
            brand_id: brandId,
            model_id: modelId,
            variant_id: variantId,
            color_id: colorId,
            rate: parseFloat(rate),
            quantity: parseInt(quantity),
            amount: parseFloat(amount),
            hsn_code: hsn_code,
            db_price: parseFloat(db_price),
            fsp: parseFloat(fsp),
            wsp: parseFloat(wsp),
            mop: parseFloat(mop),
            bop: parseFloat(bop),
            mrp: parseFloat(mrp),
            edit_id: edit_id
        };

        $.ajax({
            url: '/update_material_request/',
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify(payload),
            headers: {
                'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
            },
            success: function (response) {
                if (response.info === false) {
                    showSweetAlert('info', response.message || 'This Purchase Order is locked.');
                    return;
                }

                if (response.message === 'warning') {
                    showToast('warning', response.error_message);
                    return;
                }

                if (response.success) {
                    const msgMap = {
                        added: 'Material Request added successfully.',
                        updated: 'Material Request quantity updated.',
                        edited: 'Material Request updated successfully.'
                    };

                    showToast('success', msgMap[response.action] || 'Purchase Order updated.');
                    clearTable();

                    refresh_data();
                }
                else if (response.message === 'infos') {
                    showSweetAlert('info', response.error_message);
                }
                else {
                    showToast('error', response.message || 'Failed to save item.');
                }
            },
            error: function (xhr, status, error) {
                showToast('error', 'Error saving item to Purchase Order.');
            }
        });
    }

    function delete_data(id) {
        deleteEntity('/delete_tx_material_request/', id, '{{ csrf_token }}', 'Transfer Request');
    }

    function edit_data(id) {
        var tkn = $('[name=csrfmiddlewaretoken]').val();
        $.post('/edit_material_request/', { id: id, csrfmiddlewaretoken: tkn }, function (res) {
            $('#tx_id').val(res.id);
        });
    }

    function clearTable() {
        $('#tx_id').val('');
    }

    function historyBack() {
        window.location.href = '/material-request'
    }
</script>