{% load static %}
{% include 'includes/header.html' %}
{% include 'pages/sidebar.html' %}
{% include 'includes/store_sidebar.html' %}
{% include 'includes/navbar.html' %}
{% include 'includes/datatable_css.html' %}

<style>
    /* FSP - Light Blue */
    #datatable td.fsp-before,
    #datatable td.fsp-discount,
    #datatable td.fsp-after {
        background-color: #e7f1ff !important;
    }

    /* WSP - Light Green */
    #datatable td.wsp-before,
    #datatable td.wsp-discount,
    #datatable td.wsp-after {
        background-color: #e9f7ef !important;
    }
    
    /* MOP - Light Yellow/Orange */
    #datatable td.mop-before,
    #datatable td.mop-discount,
    #datatable td.mop-after {
        background-color: #fff4e5 !important;
    }

    /* BOP - Light Purple */
    #datatable td.bop-before,
    #datatable td.bop-discount,
    #datatable td.bop-after {
        background-color: #f3e8ff !important;
    }

    /* Credit Note - Light Red */
    #datatable td.cn-fsp,
    #datatable td.cn-wsp {
        background-color: #fdecea !important;
    }
    /* Forces text to wrap and prevents horizontal table blowout */
    .text-wrap-cell {
        white-space: normal !important;
        word-break: break-word;
        vertical-align: top !important;
    }

    /* Optional: styling for the SKU description text */
    .text-wrap-cell small {
        display: block;
        margin-top: 2px;
        color: #6c757d; /* text-muted */
    }
</style>

<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">Price Drop</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 active" aria-current="page">Price Drop</li>
            </ol>
        </nav>
    </div>

    <div class="row">
        <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-12">
                            <div class="row">
                                <div class="col-md-2 mb-4 form-control-validation">
                                    <label class="form-label" for="po_date">From Date <span style="color: red;">*</span></label>
                                    <input type="date" id="sales_date" class="form-control" name="sales_date" required/>
                                    <input type="hidden" id="price_drop_no" class="form-control" name="price_drop_no" value="{{inv_no}}"/>
                                </div>

                                <div class="col-md-2 mb-4 form-control-validation">
                                    <label class="form-label" for="item_code">Supplier</label>
                                    <select class="select2 form-control" id="supplier_id" name="supplier_id" required>
                                        <option value="">Select</option>
                                        {% for k in supplier %}
                                            <option value="{{ k.id }}">{{ k.name }}</option>
                                        {% endfor %}
                                    </select>
                                    <div class="invalid-feedback" id="item-error"></div>
                                </div>

                                <div class="col-md-2 mb-4 form-control-validation">
                                    <label class="form-label" for="item_code">Subcategory</label>
                                    <select class="select2 form-control" id="subcategory_id" name="subcategory_id">
                                        <option value="">Select</option>
                                        {% for k in sub_category %}
                                            <option value="{{ k.id }}">{{ k.name }}</option>
                                        {% endfor %}
                                    </select>
                                    <div class="invalid-feedback" id="item-error"></div>
                                </div>

                                <div class="col-md-2 mb-4 form-control-validation">
                                    <label class="form-label" for="item_code">Brand</label>
                                    <select class="select2 form-control" id="brand_id" name="brand_id">
                                        <option value="">Select</option>
                                        
                                    </select>
                                    <div class="invalid-feedback" id="item-error"></div>
                                </div>

                                <div class="col-md-2 mb-4 form-control-validation">
                                    <label class="form-label" for="item_code">Model</label>
                                    <select class="select2 form-control" id="model_id" name="model_id">
                                        <option value="">Select</option>
                                    </select>
                                    <div class="invalid-feedback" id="item-error"></div>
                                </div>

                                <div class="col-md-2 mb-4 form-control-validation">
                                    <label class="form-label" for="batch_no">Variant</label>
                                    <select class="select2 form-control" id="variant_id" name="variant_id">
                                        <option value="">Select</option>
                                    </select>
                                    <div class="invalid-feedback" id="serial-error"></div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-2 mb-4 form-control-validation">
                                    <label class="form-label" for="fsp_price">FSP (₹)</label>
                                    <input type="number" class="form-control" id="fsp_price" name="fsp_price" />
                                </div>

                                <div class="col-md-2 mb-4 form-control-validation">
                                    <label class="form-label" for="wsp_price">WSP (₹)</label>
                                    <input type="number" class="form-control" id="wsp_price" name="wsp_price" />
                                </div>

                                <div class="col-md-2 mb-4 form-control-validation">
                                    <label class="form-label" for="mop_price">MOP (₹)</label>
                                    <input type="number" class="form-control" id="mop_price" name="mop_price" />
                                </div>

                                <div class="col-md-2 mb-4 form-control-validation">
                                    <label class="form-label" for="bop_price">BOP (₹)</label>
                                    <input type="number" class="form-control" id="bop_price" name="bop_price" />
                                </div>

                                <div class="col-md-3 mb-4 form-control-validation mt-5">
                                    <button type="button" class="btn btn-secondary" id="distribute-btn">Distribute</button>
                                </div>
                                <!-- <div class="row mb-3">
                                    <div class="col-md-6">
                                        <h6>
                                            Total Credit Note :
                                        </h6>
                                    </div>
                                    <div class="col-md-6 text-end">
                                        <h6>
                                            Total Debit Note :
                                        </h6>
                                    </div>
                                </div> -->
                                
                                <span class="fw-bold text-danger" style="display: none;" id="total_debit_note">0.00</span>
                                <span class="fw-bold text-success" style="display: none;" id="total_credit_note">0.00</span>


                                <div class="col-md-12">                                           
                                    <div class="table-responsive text-nowrap">
                                        <table class="table mt-5" id="datatable">
                                            <thead class="table-light sticky-top">
                                                <tr>
                                                    <th rowspan="2" class="text-center">
                                                        <input type="checkbox" id="check_all"
                                                            style="width:16px;height:16px;">
                                                    </th>
                                                    <th rowspan="2">Action</th>
                                                    <th rowspan="2">IMEI</th>
                                                    <th rowspan="2">Store</th>
                                                    <th colspan="3">FSP</th>
                                                    <th colspan="3">WSP</th>
                                                    <th colspan="3">MOP</th>
                                                    <th colspan="3">BOP</th>
                                                    <th rowspan="2">Applicable</th>
                                                    <th colspan="2">Credit Note</th>
                                                </tr>
                                                <tr>
                                                    <th>Before <br>(₹)</th>
                                                    <th>Discount <br>(%)</th>
                                                    <th>After <br>(₹)</th>
                                                    <th>Before <br>(₹)</th>
                                                    <th>Discount <br>(%)</th>
                                                    <th>After <br>(₹)</th>
                                                    <th>Before <br>(₹)</th>
                                                    <th>Before <br>(₹)</th>
                                                    <th>Discount <br>(%)</th>
                                                    <th>After <br>(₹)</th>
                                                    <th>Before <br>(₹)</th>
                                                    <th>Discount <br>(%)</th>
                                                    <th>FSP (₹)</th>
                                                    <th>WSP (₹)</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td colspan="18" class="text-center">No live stock available for this model.</td>
                                                </tr>
                                            </tbody>
                                            <tfoot>
                                                <tr>
                                                    <th colspan="17" class="text-end">Total Credit Note Amount:</th>
                                                    <th id="total_fsp_cn">0.00</th>
                                                    <th id="total_wsp_cn">0.00</th>
                                                </tr>
                                            </tfoot>
                                        </table>
                                    </div>
                                </div>

                                <div class="col-12 d-flex justify-content-end gap-3 mb-4 mt-5">
                                    <div class="row">
                                        <div class="col-12 mb-4">
                                            <label class="form-label">Remarks</label>
                                            <textarea class="form-control" rows="3" id="description"></textarea>
                                        </div>
                                        <div class="col-12 text-end">
                                            <button type="button" class="btn btn-primary" onclick="history.back()">Back</button>
                                            <button type="submit" class="btn btn-success px-4">Save</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>


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

<script>
    // ============================================
    // Document Ready
    // ============================================
    $(document).ready(function() {
        CurrentDate('sales_date');
        $('#distribute-btn').on('click', function() {
            distributeDiscounts();
        });
    });

    $('#subcategory_id').on('change', function() {
        loadBrand('subcategory_id', 'brand_id');
    });


    // ============================================
    // Brand Change - Load Models
    // ============================================
    $('#brand_id').on('change', function() {
        loadModels('brand_id', 'model_id');
    });

    // ============================================
    // Model Change - Load Variants
    // ============================================
    $('#model_id').on('change', function() {
        loadVariants('brand_id', 'model_id', 'variant_id');
    });

    // ============================================
    // Variant Change - Load Available IMEIs
    // ============================================
    $('#variant_id').on('change', function() {
        let val = $(this).val();
        if (val) {
            loadAvailableImeis();
        }
    });

    function resetImeiTable(message = 'No live stock available for this model.') {
        const $tbody = $('#datatable tbody');
        $tbody.empty().append(`
            <tr>
                <td colspan="18" class="text-center">${message}</td>
            </tr>
        `);
        $('#total_stock_count').text(0);
    }
    $('#subcategory_id, #brand_id, #model_id, #variant_id').on('change', function () {
        resetImeiTable();
    });



    
    function loadAvailableImeis() {
        const subcategoryId = $('#subcategory_id').val();
        const brandId = $('#brand_id').val();
        const modelId = $('#model_id').val();
        const variantId = $('#variant_id').val();
        const csrfToken = $('input[name="csrfmiddlewaretoken"]').val();
            
        if (!brandId) return showToast('info', 'Please select Brand');
        if (!modelId) return showToast('info', 'Please select Model');
        if (!variantId) return showToast('info', 'Please select Variant');

        $.ajax({
            url: '/get-price-drop-list/',
            type: 'POST',
            data: {
                subcategory_id: subcategoryId,
                brand_id: brandId,
                model_id: modelId,
                variant_id: variantId,
                mode: 'add',
                edit_id: 0,
                csrfmiddlewaretoken: csrfToken
            },
            success: function(response) {
                $('#fsp_price').val('').focus().select();
                const $tbody = $('#datatable tbody');
                $tbody.empty();

                // Set the count display
                const count = response.data ? response.data.length : 0;
                $('#total_stock_count').text(count);

                if (response.status === 'success' && count > 0) {
                    response.data.forEach(item => {
                        updateTable(
                            item.branch_id, item.branch_name, item.imei_no,
                            item.fsp, item.wsp, item.mop, item.bop,
                            item.is_ho, item.is_store, item.is_franchise,
                            item.source, item.sku_text, item.is_wholesale
                        );
                    });
                } else {
                        const msg = response.message || 'No live stock available for this model.';
                        showSweetAlert('warning', msg);
                        resetImeiTable(msg);
                    }

            },
            error: function () {
                showToast('error', 'Failed to fetch available IMEIs');
                resetImeiTable();
            }

        });
    }

    $(document).on('change', '#check_all', function () {
        let isChecked = $(this).is(':checked');

        $('.row-checkbox').each(function () {
            if (!$(this).is(':disabled')) {
                $(this).prop('checked', isChecked);
            }
        });
    });
    $(document).on('change', '.row-checkbox', function () {
        let totalEnabled = $('.row-checkbox:not(:disabled)').length;
        let totalChecked = $('.row-checkbox:not(:disabled):checked').length;

        $('#check_all').prop('checked', totalEnabled === totalChecked);
    });
    // ============================================
    // Update Table with IMEI Data
    // ============================================
   
    function updateTable(branchId, branchName, imei, fspPrice, wspPrice, mopPrice, bopPrice, isHo, isStore, isFranchise, source, skuText, isWholesale) {
        // Safety Parsing
        fspPrice = parseFloat(fspPrice) || 0;
        wspPrice = parseFloat(wspPrice) || 0;
        mopPrice = parseFloat(mopPrice) || 0;
        bopPrice = parseFloat(bopPrice) || 0;

        // Determine Store Type
        let storeType = "N/A";
        if (parseInt(isStore) === 1) {
            storeType = "Store";
        } else if (parseInt(isFranchise) === 1) {
            storeType = "Franchise";
        }

        // Determine Applicability (HO = 1 is NOT applicable)
        // We store this in a data-attribute for easy access during discount distribution
        let isApplicable = parseInt(isHo) === 0; 
        let badgeHtml = isApplicable
            ? '<span class="badge bg-success">Yes</span>'
            : '<span class="badge bg-danger">No</span>';

        let rowId = 'row_' + Date.now() + Math.floor(Math.random() * 1000);
         let checkboxHtml = `<input type="checkbox" class="row-checkbox" 
                        style="width: 15px; height: 15px;">`;
        let newRow = `
            <tr id="${rowId}"
                data-branch-id="${branchId}"
                data-store-type="${storeType}"
                data-source-type="${source}"
                data-applicable="${isApplicable ? '1' : '0'}">
                <td class="text-center">${checkboxHtml}</td>
                <td>
                    <button type="button" class="btn btn-outline-danger btn-xs p-1" onclick="$(this).closest('tr').remove();">
                        <i class="fas fa-trash-alt"></i>
                    </button>
                </td>

                <td class="text-wrap-cell" style="min-width: 150px;">
                    <div class="font-weight-bold imei">${imei}</div>
                    <small class="text-muted d-block text-wrap-sku">${skuText || ''}</small>
                </td>
                <td class="name text-wrap-cell" style="min-width: 120px;">
                    ${branchName} ${parseInt(isWholesale) === 1 ? '<span class="text-primary font-weight-bold">(Wholesale)</span>' : ''}
                </td>

                <td class="fsp-before text-end">${fspPrice.toFixed(2)}</td>
                <td class="fsp-discount text-end">0.00</td>
                <td class="fsp-after text-end">${fspPrice.toFixed(2)}</td>

                <td class="wsp-before text-end">${wspPrice.toFixed(2)}</td>
                <td class="wsp-discount text-end">0.00</td>
                <td class="wsp-after text-end">${wspPrice.toFixed(2)}</td>

                <td class="mop-before text-end">${mopPrice.toFixed(2)}</td>
                <td class="mop-discount text-end">0.00</td>
                <td class="mop-after text-end">${mopPrice.toFixed(2)}</td>

                <td class="bop-before text-end">${bopPrice.toFixed(2)}</td>
                <td class="bop-discount text-end">0.00</td>
                <td class="bop-after text-end">${bopPrice.toFixed(2)}</td>

                <td class="text-center applicability-cell">
                    ${badgeHtml}                
                </td>
                
                <td class="cn-fsp text-danger font-weight-bold text-end">0.00</td>
                <td class="cn-wsp text-danger font-weight-bold text-end">0.00</td>
            </tr>
        `;

        $('#datatable tbody').append(newRow);
    }

    function distributeDiscounts() {
        const discountFSP = parseFloat($('#fsp_price').val()) || 0;
        const discountWSP = parseFloat($('#wsp_price').val()) || 0;
        const discountMOP = parseFloat($('#mop_price').val()) || 0;
        const discountBOP = parseFloat($('#bop_price').val()) || 0;
        console.log('discountFSP', discountFSP, 'discountWSP', discountWSP, 'discountMOP', discountMOP, 'discountBOP', discountBOP)
        let totalDebitNoteAmount = 0;

        let totalFSPCN = 0;
        let totalWSPCN = 0;

        $('#datatable tbody tr').each(function() {
            const row = $(this);
            
            // Skip the "No live stock" placeholder row if it exists
            if (row.find('td').length <= 1 && row.find('.text-center').length > 0) return;
            const checkbox = row.find('.row-checkbox');
            if (
                !checkbox.length ||
                !checkbox.is(':checked')
            ) {
                return;
            }
            const isApplicable = row.attr('data-applicable') === '1';

            // 1. Get Before Values
            const beforeFSP = parseFloat(row.find('.fsp-before').text()) || 0;
            const beforeWSP = parseFloat(row.find('.wsp-before').text()) || 0;
            const beforeMOP = parseFloat(row.find('.mop-before').text()) || 0;
            const beforeBOP = parseFloat(row.find('.bop-before').text()) || 0;

            // 2. Set Discount Values
            row.find('.fsp-discount').text(discountFSP.toFixed(2));
            row.find('.wsp-discount').text(discountWSP.toFixed(2));
            row.find('.mop-discount').text(discountMOP.toFixed(2));
            row.find('.bop-discount').text(discountBOP.toFixed(2));

            // 3. Update After Columns
            row.find('.fsp-after').text((beforeFSP - discountFSP).toFixed(2));
            row.find('.wsp-after').text((beforeWSP - discountWSP).toFixed(2));
            row.find('.mop-after').text((beforeMOP - discountMOP).toFixed(2));
            row.find('.bop-after').text((beforeBOP - discountBOP).toFixed(2));
           
            totalDebitNoteAmount += discountBOP;

            // 4. Credit Note Calculation & Accumulation
            if (isApplicable) {
                row.find('.cn-fsp').text(discountFSP.toFixed(2)).css('opacity', '1');
                row.find('.cn-wsp').text(discountWSP.toFixed(2)).css('opacity', '1');
                
                totalFSPCN += discountFSP;
                totalWSPCN += discountWSP;
            } else {
                row.find('.cn-fsp').text('0.00').css('opacity', '0.5');
                row.find('.cn-wsp').text('0.00').css('opacity', '0.5');
            }

        });
        $('#total_credit_note').text(totalFSPCN.toFixed(2));
        $('#total_debit_note').text(totalDebitNoteAmount.toFixed(2));
        console.log(totalFSPCN, totalWSPCN, totalDebitNoteAmount);

        // 5. Update Footer Totals
        $('#total_fsp_cn').text(totalFSPCN.toFixed(2));
        $('#total_wsp_cn').text(totalWSPCN.toFixed(2));
    }
    // ============================================
    // Price Input Enter Key - Trigger Distribute
    // ============================================
    $('#fsp_price').on('keydown', function(e) {
        if (e.key === 'Enter') {
            e.preventDefault();
            distributeDiscounts();
        }
    });

    $('#wsp_price').on('keydown', function(e) {
        if (e.key === 'Enter') {
            e.preventDefault();
            distributeDiscounts();
        }
    });

    $('#mop_price').on('keydown', function(e) {
        if (e.key === 'Enter') {
            e.preventDefault();
            distributeDiscounts();
        }
    });

    $('#bop_price').on('keydown', function(e) {
        if (e.key === 'Enter') {
            e.preventDefault();
            distributeDiscounts();
        }
    });

    // ============================================
    // Form Submit Handler
    // ============================================
    $('#add_form').on('submit', function(e) {
        e.preventDefault();

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

        let items = [];
        $('#datatable tbody tr').each(function() {
            let $row = $(this);
            const checkbox = $row.find('.row-checkbox');

            if (
                !checkbox.length ||
                (!checkbox.is(':checked') && !checkbox.is(':disabled'))
            ) {
                return;
            }

            let isApplicable = $row.find('.badge').hasClass('bg-success') ? 1 : 0;

            items.push({
                branch_id: $row.data('branch-id'),
                store_type: $row.data('store-type'),
                source: $row.data('source-type'),
                imei: $row.find('.imei').text().trim(),
                is_applicable: isApplicable,

                fsp_price: parseFloat($row.find('.fsp-before').text()) || 0.00,
                fsp_discount: parseFloat($row.find('.fsp-discount').text()) || 0.00,
                fsp_after: parseFloat($row.find('.fsp-after').text()) || 0.00,

                wsp_price: parseFloat($row.find('.wsp-before').text()) || 0.00,
                wsp_discount: parseFloat($row.find('.wsp-discount').text()) || 0.00,
                wsp_after: parseFloat($row.find('.wsp-after').text()) || 0.00,

                mop_price: parseFloat($row.find('.mop-before').text()) || 0.00, 
                mop_discount: parseFloat($row.find('.mop-discount').text()) || 0.00,
                mop_after: parseFloat($row.find('.mop-after').text()) || 0.00,

                bop_price: parseFloat($row.find('.bop-before').text()) || 0.00,
                bop_discount: parseFloat($row.find('.bop-discount').text()) || 0.00,
                bop_after: parseFloat($row.find('.bop-after').text()) || 0.00,

                credit_fsp: parseFloat($row.find('.cn-fsp').text()) || 0.00,   
                credit_wsp: parseFloat($row.find('.cn-wsp').text()) || 0.00
            });
        });

        let formData = new FormData(this);
        let total_debit = parseFloat($('#total_debit_note').text()) || 0;
        let total_credit = parseFloat($('#total_credit_note').text()) || 0;
        formData.append('items', JSON.stringify(items));
        formData.append('credit_note', total_credit.toFixed(2));
        formData.append('debit_note', total_debit.toFixed(2));

        handleFormSubmit(
            this,
            '/add_price_drop/',
            null,
            'add_form',
            true,
            'Price Drop',
            [
                function() {
                    $('#add_form')[0].reset();
                    $('#datatable tbody').empty();
                    window.location.href = '/price-drop';
                }
            ],
            formData,
            false
        );
    });
</script>