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

<style>
    #datatable input[type="number"] {
        text-align: right !important;
    }

    .unsaved-row {
        background-color: #dbf7ff !important;
        /* Mild light blue background */
    }

    .unsaved-row td {
        border-color: #b3e5fc !important;
    }

    .legend-card {
        border-radius: 12px;
        padding: 14px 18px;
        position: relative;
        display: none;
        /* Hidden by default */
        align-items: center;
        border: 1px solid #e0e0e0;
        margin-bottom: 18px;
        background: #ffffff;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
        animation: fadeInDown 0.6s ease-out;
    }

    .legend-card::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 6px;
        background: #6f42c1;
        /* Elegant purple accent */
        border-radius: 6px 0 0 6px;
    }

    .legend-indicator-box {
        width: 20px;
        height: 20px;
        background-color: #dbf7ff;
        /* SAME as table row */
        border: 2px solid #b3e5fc;
        border-radius: 4px;
        margin-right: 14px;
        flex-shrink: 0;
    }

    .legend-content span {
        font-size: 0.95rem;
        font-weight: 600;
        color: #333;
    }

    .legend-content strong {
        font-weight: 700;
        color: #000;
    }



    @keyframes fadeInDown {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
</style>

<div class="container-xxl flex-grow-1 container-p-y">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div class="d-flex align-items-center">
            <h4 class="mb-0 me-3">Slabwise Sales</h4>
        </div>

        <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">
                    <a href="/slabwise-sales" class="text-decoration-none">Slabwise Sales</a>
                </li>
                <li class="breadcrumb-item active" aria-current="page">Edit</li>
            </ol>
        </nav>
    </div>

    <div class="card">
        <form id="slabForm">
            <div class="card-header border-bottom">
                {% csrf_token %}
                <input type="hidden" name="id" value="{{ slab_sales.id }}">
                <div class="row mb-4">
                    <div class="col-md-2">
                        <label class="form-label">Slab Letter <span class="text-danger">*</span></label>
                        <select class="select2 form-control" id="slab_letter" name="slab_letter" disabled>
                            <option value="">Select</option>
                            {% for slab in slabs %}
                            <option value="{{ slab.id }}">{{slab.slab_no }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">Month <span class="text-danger">*</span></label>
                        <input type="month" id="month" name="month" class="form-control"
                            value="{{ slab_sales.from_date|date:'Y-m' }}">
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">Supplier <span class="text-danger">*</span></label>
                        <select class="select2 form-control" id="supplier_id" name="supplier_id" required disabled>
                            <option value="">Select Supplier</option>
                            {% for supplier in suppliers %}
                            <option value="{{ supplier.id }}">{{ supplier.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">Brand <span class="text-danger">*</span></label>
                        <select class="select2 form-control" id="brand_id" name="brand_id" required disabled>
                            <option value="">Select Brand</option>
                            {% for brand in brands %}
                            <option value="{{ brand.id }}">{{ brand.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">Store <span class="text-danger">*</span></label>
                        <select class="select2 form-control" id="store_id" name="store_id">
                            <option value="">Select</option>
                            {% for k in branch %}
                            <option value="{{ k.id }}">{{k.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-2 mt-6">
                        <button type="button" id="loadBtn" class="btn btn-primary">Refresh Sales</button>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-9">
                        <div class="card-datatable table-responsive pt-5">
                            <div class="legend-card">

                                <div class="legend-indicator-box"></div>
                                <div class="legend-content">
                                    <span class="text-secondary" style="font-size: 0.9rem;">
                                        Rows with the <strong>Light Blue background</strong> indicate
                                        <span class="fw-bold text-info">newly added sales quantity</span>
                                        that has not been saved yet for the selected month.
                                    </span>
                                </div>
                            </div>
                            <table class="datatables-basic table table-bordered" id="datatable">
                                <thead>
                                    <tr>
                                        <th>Id</th>
                                        <th class="text-center">Action</th>
                                        <th>Branch</th>
                                        <th>Brand</th>
                                        <th>Subcategory</th>
                                        <th>Model</th>
                                        <th>Variant</th>
                                        <th class="text-end">Sales Quantity</th>
                                        <th class="text-end">Slab Amount (₹)</th>
                                        <th class="text-end">Total (₹)</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr class="no-data">
                                        <td colspan="10" class="text-center">Loading saved items...</td>
                                    </tr>
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <th colspan="7" class="text-end">Total</th>
                                        <th id="total_qty" class="text-end">0</th>
                                        <th></th>
                                        <th id="total_amount" class="text-end">0.00</th>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                    <div class="col-3">
                        <div class="row mt-4">
                            <div class="col-md-12">
                                <label class="form-label">Remarks</label>
                                <textarea name="remarks" class="form-control"
                                    rows="2">{{ slab_sales.remarks }}</textarea>
                            </div>
                        </div>

                        <div class="mt-4 text-end">
                            <button type="button" class="btn btn-secondary"
                                onclick="window.history.back()">Back</button>
                            <input type="hidden" name="slab_sales_id" id="slab_sales_id" value="{{ slab_sales.id }}">
                            <input type="hidden" name="slab_letter_id" id="slab_letter_id"
                                value="{{ slab_sales.slab_id }}">
                            <button type="submit" class="btn btn-success" id="saveBtn">Update</button>
                        </div>
                    </div>
                </div>
        </form>
    </div>
</div>
</div>

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

<script>
    $(document).ready(function () {
        let savedItems = {};
        // Initial load of saved items
        loadSavedItems(function () {
            // Once saved items are loaded into memory, fetch current sales to show differences
            const month = $('#month').val();
            fetchSalesData(
                '',
                '{{ slab_sales.brand_id|escapejs }}',
                month,
                '{{ slab_sales.slab_id|escapejs }}'
            );
        });

        safeSelectValue('#store_id', '{{ slab_sales.supply_branch_id|escapejs }}');
        safeSelectValue('#slab_letter', '{{ slab_sales.slab_id|escapejs }}');
        safeSelectValue('#brand_id', '{{ slab_sales.brand_id|escapejs }}');
        safeSelectValue('#supplier_id', '{{ slab_sales.supplier_id|escapejs }}');

        // Focus slab_letter when store is selected
        // Auto-refresh when Store or Month is changed
        $('#store_id, #month').on('change', function () {
            const store_id = $('#store_id').val();
            const slab_id = $('#slab_letter').val();
            const month = $('#month').val();
            const supplier_id = $('#supplier_id').val();
            const brand_id = $('#brand_id').val();

            // Auto refresh if other required fields are selected
            if (slab_id && month && supplier_id && brand_id) {
                fetchSalesData(store_id, brand_id, month, slab_id);
            }
        });

        // Fetch supplier and brand when slab letter is selected
        $('#slab_letter').on('change', function () {
            const slab_id = $(this).val();
            if (slab_id) {
                $.ajax({
                    url: '/ajax_get_slab_details/',
                    data: {
                        'slab_id': slab_id,
                        'edit_id': $('#slab_sales_id').val()
                    },
                    success: function (response) {
                        if (response.status === 'success') {
                            if (response.already_exists) {
                                showSweetAlert('warning', 'Slab Letter already used in another Slabwise Sales record.');
                                $('#slab_letter').val('').trigger('change');
                                return;
                            }
                            $('#supplier_id').val(response.supplier_id).trigger('change').prop('disabled', true);
                            $('#brand_id').val(response.brand_id).trigger('change').prop('disabled', true);
                        }
                    }
                });
            } else {
                $('#supplier_id').val('').trigger('change').prop('disabled', false);
                $('#brand_id').val('').trigger('change').prop('disabled', false);
            }
        });

        // Manual Load button (Refresh)
        $('#loadBtn').on('click', function () {
            const store_id = $('#store_id').val();
            const slab_id = $('#slab_letter').val();
            const month = $('#month').val();
            const supplier_id = $('#supplier_id').val();
            const brand_id = $('#brand_id').val();

            if (!slab_id || !month || !supplier_id || !brand_id) {
                showSweetAlert('warning', 'Please select all required fields (Slab, Month, Supplier, Brand) before loading.');
                return;
            }

            fetchSalesData(store_id, brand_id, month, slab_id);
        });

        function loadSavedItems(callback) {
            const tm_slab_id = $('input[name="id"]').val();
            if (!tm_slab_id) return;

            $.ajax({
                url: '/ajax_get_saved_slab_sales_items/',
                data: { 'tm_slab_id': tm_slab_id },
                success: function (response) {
                    if (response.status === 'success') {
                        savedItems = {};
                        response.data.forEach(item => {
                            const key = `${item.brand_id}-${item.subcategory_id}-${item.model_id}-${item.variant_id}`;
                            if (savedItems[key]) {
                                savedItems[key].sales_qty = parseInt(savedItems[key].sales_qty) + parseInt(item.sales_qty);
                                savedItems[key].total_amount = parseFloat(savedItems[key].total_amount) + parseFloat(item.total_amount);
                            } else {
                                savedItems[key] = { ...item };
                            }
                        });
                        populateTable(response.data, false);
                        if (callback) callback();
                    } else {
                        showSweetAlert('error', response.message);
                    }
                }
            });
        }

        function fetchSalesData(store_id, brand_id, month, slab_id) {
            $.ajax({
                url: '/ajax_get_slab_sales/',
                data: {
                    'branch_id': store_id,
                    'brand_id': brand_id,
                    'month': month,
                    'slab_id': slab_id,
                    'supplier_id': $('#supplier_id').val(),
                    'edit_id': $('#slab_letter_id').val()
                },
                success: function (response) {
                    if (response.status === 'success') {
                        populateTable(response.data, true);
                    } else {
                        showSweetAlert('error', response.message);
                    }
                }
            });
        }

        function populateTable(data, isRefresh = false) {
            const tbody = $('#datatable tbody');
            tbody.empty();

            if (data.length === 0) {
                tbody.append('<tr class="no-data"><td colspan="10" class="text-center">No sales found for the selected criteria</td></tr>');
            } else {
                let rowCount = 1;
                data.forEach((item) => {
                    const key = `${item.brand_id}-${item.subcategory_id}-${item.model_id}-${item.variant_id}`;
                    let currentTotalQty = parseInt(item.sales_qty);

                    if (isRefresh) {
                        let savedQty = savedItems[key] ? parseInt(savedItems[key].sales_qty) : 0;

                        // Row for saved portion
                        let firstRowQty = Math.min(currentTotalQty, savedQty);
                        if (firstRowQty > 0) {
                            let firstRowTotal = firstRowQty * parseFloat(item.slab_amount);
                            tbody.append(renderRow(rowCount++, {
                                ...item,
                                sales_qty: firstRowQty,
                                total: firstRowTotal.toFixed(2)
                            }, false));
                        }

                        // Row for new portion (increment)
                        let secondRowQty = currentTotalQty - savedQty;
                        if (secondRowQty > 0) {
                            let secondRowTotal = secondRowQty * parseFloat(item.slab_amount);
                            tbody.append(renderRow(rowCount++, {
                                ...item,
                                sales_qty: secondRowQty,
                                total: secondRowTotal.toFixed(2)
                            }, true));
                        } else if (savedQty === 0) {
                            // Completely new item (not in savedItems)
                            tbody.append(renderRow(rowCount++, {
                                ...item,
                                total: (currentTotalQty * parseFloat(item.slab_amount)).toFixed(2)
                            }, true));
                        }
                    } else {
                        // Initial load - all items are marks as saved
                        tbody.append(renderRow(rowCount++, item, false));
                    }
                });
            }
            calculateTotals();
        }

        function renderRow(idx, item, isUnsaved) {
            const rowClass = isUnsaved ? 'unsaved-row' : '';
            return `
                <tr class="${rowClass}">
                    <td>${idx}</td>
                    <td class="text-center">
                        <button type="button" class="btn btn-outline-danger btn-xs p-1 removeRow"><i class="fas fa-trash"></i></button>
                        <input type="hidden" class="brand-id" value="${item.brand_id}">
                        <input type="hidden" class="subcategory-id" value="${item.subcategory_id}">
                        <input type="hidden" class="model-id" value="${item.model_id}">
                        <input type="hidden" class="variant-id" value="${item.variant_id}">
                        <input type="hidden" class="branch-id" value="${item.branch_id}">
                    </td>
                    <td>${item.branch_name}</td>
                    <td>${item.brand_name}</td>
                    <td>${item.subcategory_name}</td>
                    <td>${item.model_name}</td>
                    <td>${item.variant_name}</td>
                    <td class="text-end sales-qty">${item.sales_qty}</td>
                    <td class="text-end slab-amount">${parseFloat(item.slab_amount).toFixed(2)}</td>
                    <td class="text-end total-row-amount">${parseFloat(item.total || item.total_amount).toFixed(2)}</td>
                </tr>
            `;
        }

        function calculateTotals() {
            let totalQty = 0;
            let totalAmount = 0;

            const unsavedRows = $('#datatable tbody tr.unsaved-row').length;
            if (unsavedRows > 0) {
                if ($('.legend-card').css('display') === 'none') {
                    $('.legend-card').css('display', 'flex').hide().fadeIn();
                }
            } else {
                $('.legend-card').fadeOut();
            }

            $('#datatable tbody tr').not('.no-data').each(function () {
                totalQty += parseInt($(this).find('.sales-qty').text()) || 0;
                totalAmount += parseFloat($(this).find('.total-row-amount').text()) || 0;
            });

            $('#total_qty').text(totalQty);
            $('#total_amount').text(totalAmount.toFixed(2));
        }

        $(document).on('click', '.removeRow', function () {
            $(this).closest('tr').remove();
            if ($('#datatable tbody tr').not('.no-data').length === 0) {
                $('#datatable tbody').html('<tr class="no-data"><td colspan="10" class="text-center">No data available</td></tr>');
            }
            calculateTotals();
        });

        $('#slabForm').on('submit', function (e) {
            e.preventDefault();

            let items = [];
            $('#datatable tbody tr').not('.no-data').each(function () {
                let row = $(this);
                items.push({
                    brand_id: row.find('.brand-id').val(),
                    subcategory_id: row.find('.subcategory-id').val(),
                    model_id: row.find('.model-id').val(),
                    variant_id: row.find('.variant-id').val(),
                    sales_qty: row.find('.sales-qty').text().trim(),
                    slab_amount: row.find('.slab-amount').text().trim(),
                    total_amount: row.find('.total-row-amount').text().trim(),
                    supply_branch_id: row.find('.branch-id').val()
                });
            });

            if (items.length === 0) {
                showSweetAlert('warning', 'Please load data and add at least one row.');
                return;
            }

            const formData = new FormData(this);
            // Re-enable disabled fields so they are submitted
            formData.set('supplier_id', $('#supplier_id').val());
            formData.set('brand_id', $('#brand_id').val());
            formData.set('slab_sales_id', $('#slab_sales_id').val());
            formData.set('slab_letter', $('#slab_letter_id').val());
            formData.append('items', JSON.stringify(items));

            handleFormSubmit(
                this,
                '/update-slabwise-sales/',
                null,
                'slabForm',
                true,
                'Slabwise Sales',
                [
                    function () {
                        window.location.href = "/slabwise-sales";
                    }
                ],
                formData,
                false
            );
        });
    });
</script>