{% 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;
    }
</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 active" aria-current="page">Slabwise Sales</li>
            </ol>
        </nav>
    </div>

    <div class="card">
        <form id="slabForm">
            <div class="card-header border-bottom">
                {% csrf_token %}
                <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" required>
                            <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="{{selected_month}}"
                            required>
                    </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>
                            <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>
                            <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">Load Sales</button>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-9">
                        <div class="card-datatable table-responsive pt-5">
                            <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">No data available</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"></textarea>
                            </div>
                        </div>

                        <div class="mt-4 text-end">
                            <button type="button" class="btn btn-secondary"
                                onclick="window.history.back()">Back</button>
                            <button type="submit" class="btn btn-success" id="saveBtn">Save</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 () {
        // Auto-refresh when store or month changes
        $('#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();

            if (slab_id && month && supplier_id && brand_id) {
                fetchSalesData(store_id, brand_id, month, slab_id, supplier_id);
            }
        });

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

        function resetTable() {
            $('#datatable tbody').html('<tr class="no-data"><td colspan="10" class="text-center">No data available</td></tr>');
            $('#total_qty').text('0');
            $('#total_amount').text('0.00');
        }

        // 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 },
                    success: function (response) {
                        if (response.status === 'success') {
                            if (response.already_exists) {
                                showSweetAlert('warning', 'Slab Letter already used in Slabwise Sales.');
                                $('#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
        $('#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, supplier_id);
        });

        function fetchSalesData(store_id, brand_id, month, slab_id, supplier_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,
                },
                success: function (response) {
                    if (response.status === 'success') {
                        populateTable(response.data);
                    } else {
                        showSweetAlert('error', response.message);
                    }
                }
            });
        }

        function populateTable(data) {
            console.log('Sale', data)
            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 {
                data.forEach((item, index) => {
                    tbody.append(`
						<tr>
							<td>${index + 1}</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">${item.slab_amount.toFixed(2)}</td>
							<td class="text-end total-row-amount">${item.total.toFixed(2)}</td>
						</tr>
					`);

                });
            }
            calculateTotals();
        }

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

            $('#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.append('items', JSON.stringify(items));

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