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

<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">Claim</h4>
        </div>

        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item">
                    <a href="/dashboard" class="d-flex align-items-center text-decoration-none">
                        <i class="ti tabler-home me-1"></i>
                    </a>
                </li>
                <li class="breadcrumb-item">Claim</li>
                <li class="breadcrumb-item active" aria-current="page">Add</li>
            </ol>
        </nav>
    </div>

    <div class="row">
        <!-- FormValidaton -->
        <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-5 form-control-validation">
                                    <label class="form-label" for="po_date">Date Range <span
                                            style="color: red;">*</span></label>
                                    <input type="text" id="date_filter" class="form-control" style="cursor: pointer;" />
                                    <input type="hidden" id="from_date" name="from_date">
                                    <input type="hidden" id="to_date" name="to_date">
                                </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">Scheme</label>
                                    <select class="select2  form-control" id="scheme_type" name="scheme_type">
                                        <option value="">Select</option>
                                        <option value="price_drop">Price Drop</option>
                                        <option value="special">Special Scheme</option>
                                        <option value="slab_sales">Slab Sales</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">Claim Status</label>
                                    <select class="select2 form-control" id="claim_status" name="claim_status" multiple>
                                        <option value="pending" selected>Pending</option>
                                        <option value="partial" selected>Partial</option>
                                        <option value="claimed" selected>Claimed</option>
                                    </select>
                                </div>





                                <div class="col-md-2 mb-4 form-control-validation">
                                    <button type="button" class="btn btn-secondary mt-6" id="load_items"
                                        onclick="refresh_data()">Load</button>
                                </div>
                                <hr>
                            </div>
                            <div class="row">
                                <div class="col-md-9 pe-4">
                                    <div class="table-responsive text-nowrap">
                                        <table class="table mt-5" id="datatable">
                                            <thead>
                                                <tr>
                                                    <th>
                                                        <input type="checkbox" id="select_all" class="form-check-input"
                                                            onchange="toggleSelectAll(this)">
                                                    </th>
                                                    <th id="col_no">INV / REF No</th>
                                                    <th id="col_date">INV / REF Date</th>
                                                    <th>Store</th>
                                                    <th>IMEI No</th>
                                                    <th>Scheme</th>
                                                    <th>Status</th>
                                                    <th>Debit Note Issued (₹)</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td colspan="8" class="text-center">No Data.</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <div class="col-md-3 mb-4 form-control-validation">
                                    <div class="row">
                                        <div class="col-md-6 mb-4 form-control-validation">
                                            <label class="form-label" for="item_code"><span class="text-danger">*</span>
                                                Debit Note Date</label>
                                            <input type="date" class="form-control" id="debit_note_date"
                                                name="debit_note_date" required>
                                        </div>

                                        <div class="col-md-6 mb-4 form-control-validation">
                                            <label class="form-label" for="item_code"><span class="text-danger">*</span>
                                                Debit Note No</label>
                                            <input type="text" class="form-control" id="debit_note_no"
                                                name="debit_note_no" value="{{claim_no}}" required>
                                        </div>

                                        <div class="col-md-6 mb-4">
                                            <label class="form-label" for="total_amount">Total Amount (₹)</label>
                                            <input type="text" class="form-control" id="total_amount"
                                                name="total_amount" readonly>
                                        </div>
                                        <div class="col-md-6 mb-4">
                                            <label class="form-label" for="total_amount">Debit Note Amount (₹)</label>
                                            <input type="number" class="form-control" id="debit_amount"
                                                name="debit_amount">
                                        </div>
                                        <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' %}
<script>

    $(document).ready(function () {
        CurrentDate('debit_note_date');
        initializeDateRangePicker('this_month');
    });

    function toggleSelectAll(masterCheckbox) {
        const isChecked = $(masterCheckbox).is(':checked');
        $('.item-checkbox').prop('checked', isChecked);
        calculateTotal();
    }

    $('#supplier_id, #scheme_type, #claim_status').on('change', function () {
        refresh_data();
    });

    function refresh_data() {
        const fromDate = $('#from_date').val();
        const toDate = $('#to_date').val();
        const supplierId = $('#supplier_id').val();
        const schemeType = $('#scheme_type').val();
        const claimStatus = $('#claim_status').val();
        const csrfToken = $('input[name="csrfmiddlewaretoken"]').val();

        if (!supplierId || !fromDate || !toDate) {
            $('#datatable tbody').empty();
            showNoDataRow();
            return;
        }

        $('#select_all').prop('checked', false);

        // if (!supplierId) {
        //     return;
        // }

        $.ajax({
            url: "/load_claim_details/",
            type: "POST",
            data: {
                'from_date': fromDate,
                'to_date': toDate,
                'supplier_id': supplierId,
                'scheme_type': schemeType,
                'claim_status': claimStatus,
                'csrfmiddlewaretoken': csrfToken
            },
            success: function (response) {
                let tbody = $('#datatable tbody');
                tbody.empty();

                if (response.data && response.data.length > 0) {
                    response.data.forEach(function (item) {
                        updateTable(item);
                    });
                } else {
                    showNoDataRow();
                }
            },
            error: function () {
                showToast('error', "Error loading data.");
                showNoDataRow();
            }
        });
    }
    function updateTable(item) {
        let rowId = 'row_' + Date.now() + Math.floor(Math.random() * 1000);
        let isClaimed = item.claim_status === 'claimed';

        let checkboxHtml = isClaimed ? '-' : `
            <input type="checkbox" class="form-check-input item-checkbox" 
                   value="${item.id}" onchange="syncSelectAll()">
        `;

        let amountHtml = isClaimed ? `
            <div class="text-end">
                <span class="text-muted small">Total:</span> ₹ ${parseFloat(item.total_amount).toFixed(2)}<br>
                <span class="text-success small">Claimed:</span> ₹ ${parseFloat(item.claim_amount).toFixed(2)}
            </div>
        ` : `₹ ${parseFloat(item.amount).toFixed(2)}`;

        let newRow = `
        <tr id="${rowId}" 
            data-scheme-id="${item.id}" 
            data-branch-id="${item.branch_id}" 
            data-ean-no="${item.ean}" 
            data-sales-id="${item.sales_id}"
            data-scheme-type="${item.type}"
            data-source-id="${item.source_id}"
            data-supplier-id="${item.supplier_id}">
            <td>${checkboxHtml}</td>            
            <td class="price-no">${item.price_no}</td>
            <td class="date">${item.date}</td>
            <td>
                ${item.branch || ''}
                ${item.customer_name ? `<br><small class="text-primary">${item.customer_name}</small>` : ''}
            </td>
            <td style="white-space: normal; min-width: 250px; max-width: 350px;">
                <input type="hidden" class="row-ean" value="${item.ean}">
                <strong>${item.imei_nos}</strong><br>
                <small class="text-muted" style="display: block; word-break: break-word;">
                    ${item.sku_text}
                </small>
            </td>
            <td class="scheme-name">${item.scheme_name}</td>
            <td class="status text-center">
                ${isClaimed ? '<span class="badge bg-success">Claimed</span>' :
                item.claim_status === 'partial' ? '<span class="badge bg-warning">Partial</span>' :
                    '<span class="badge bg-danger">Pending</span>'}
            </td>
            <td class="row-amount text-end">${amountHtml}</td>
        </tr>
    `;
        $('#datatable tbody').append(newRow);
    }

    function removeRow(btn) {
        $(btn).closest('tr').remove();

        if ($('#datatable tbody tr').length === 0) {
            showNoDataRow();
        } else {
            syncSelectAll();
        }
    }

    function showNoDataRow() {
        $('#datatable tbody').html('<tr><td colspan="8" class="text-center">No Data found.</td></tr>');
        $('#total_amount').val('0.00');
        $('#select_all').prop('checked', false);
    }

    function syncSelectAll() {
        const allCheckboxes = $('.item-checkbox');
        const checkedCheckboxes = $('.item-checkbox:checked');

        if (allCheckboxes.length > 0 && allCheckboxes.length === checkedCheckboxes.length) {
            $('#select_all').prop('checked', true);
        } else {
            $('#select_all').prop('checked', false);
        }

        calculateTotal();
    }

    function calculateTotal() {
        let total = 0;
        $('#datatable tbody tr').each(function () {
            const checkbox = $(this).find('.item-checkbox');
            if (checkbox.is(':checked')) {
                const amountText = $(this).find('.row-amount').text().replace(/[^0-9.-]+/g, "");
                total += parseFloat(amountText) || 0;
            }
        });
        $('#total_amount').val(total.toFixed(2));
    }


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

        // 1. Get only the checked checkboxes
        let $checkedRows = $('#datatable tbody tr').has('.item-checkbox:checked');

        // 2. Validation: Ensure at least one item is selected
        if ($checkedRows.length === 0) {
            showToast('info', 'Please select at least one item from the table to submit.');
            return;
        }

        // ---------------------------
        // Collect ONLY checked items
        // ---------------------------
        let items = [];
        $checkedRows.each(function () {
            let $row = $(this);
            items.push({
                branch_id: $row.data('branch-id'),
                sales_id: $row.data('sales-id'),
                scheme_id: $row.data('scheme-id'), // Often needed for backend updates
                ean: $row.data('ean-no'),
                inv_date: $row.find('.date').text().trim(),
                price_no: $row.find('.price-no').text().trim(),
                scheme_name: ($row.data('scheme-type') === 'slab_sales') ? 'slab_sales' : $row.data('scheme-type').trim(),
                amount: parseFloat($row.find('.row-amount').text().replace(/[^0-9.-]+/g, "")) || 0,
                source_id: $row.data('source-id'),
                supplier_id: $row.data('supplier-id'),
            });
        });

        let formData = new FormData(this);
        formData.append('items', JSON.stringify(items));

        handleFormSubmit(
            this,
            '/add_claim/',
            null,
            'add_form',
            true,
            'Claim',
            [
                function () {
                    $('#add_form')[0].reset();
                    $('#datatable tbody').empty(); // Corrected table ID from your example
                    window.location.href = '/claim';
                }
            ],
            formData,
            false
        );
    });


</script>