{% 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">Collection</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">Collection</li>
                <li class="breadcrumb-item active" aria-current="page">Add</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 custom-col-8">
                            <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">Type</label>
                                    <select class="select2  form-control" id="f_type" name="f_type" disabled>
                                        <option value="">Select</option>
                                        <option value="finance">Finance</option>
                                        <option value="card">Card</option>
                                        <option value="bank">Bank</option>
                                        <option value="exchange">Exchange</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">Finance / cards</label>
                                    <select class="select2  form-control" id="finance_id" name="finance_id" disabled>
                                        <option value="">Select</option>
                                        {% for k in finance %}
                                        <option value="{{k.id}}">{{k.name}}</option>
                                        {% endfor %}

                                    </select>
                                    <div class="invalid-feedback" id="item-error"></div>
                                </div>
                                <div class="col-md-2 mb-5 form-control-validation">
                                    <label class="form-label" for="po_date">Claim status</label>
                                    <select class="select2 form-control" id="claim_status" name="claim_status" multiple>
                                        <option value="pending" selected>Pending</option>
                                        <option value="claimed" selected>Claimed</option>
                                        <option value="partial" selected>Partial</option>
                                        <option value="rejected">Rejected</option>
                                    </select>
                                </div>

                                <div class="col-md-2 mb-5 form-control-validation">
                                    <label class="form-label" for="sales_status">Sales status</label>
                                    <select class="select2  form-control" id="sales_status" name="sales_status">
                                        <option value="">Select</option>
                                        <option value="approved" selected>Approved</option>
                                        <option value="pending">Pending</option>
                                        <option value="rejected">Rejected</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">
                                    <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>INV No</th>
                                                    <th>INV Date</th>
                                                    <th>Customer Name</th>
                                                    <th>Store</th>
                                                    <th>Bill Amount</th>
                                                    <th>Type</th>
                                                    <th>Finance/Cards (₹)</th>
                                                    <th>Receipt (₹)</th>
                                                    <th>Status</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td colspan="10" 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">Receipt Date</label>
                                            <input type="date" class="form-control" id="receipt_date"
                                                name="receipt_date">
                                        </div>

                                        <div class="col-md-6 mb-4 form-control-validation">
                                            <label class="form-label" for="item_code">Receipt No</label>
                                            <input type="text" class="form-control" id="receipt_no" name="receipt_no">
                                        </div>
                                        <div class="col-md-6 mb-4">
                                            <label class="form-label" for="bank_id"><span class="text-danger">*</span>
                                                Bank</label>
                                            <select class="select2  form-control" id="bank_id" name="bank_id" required>
                                                <option value="">Select</option>
                                                {% for bank in bank %}
                                                <option value="{{bank.id}}">{{bank.name}}</option>
                                                {% endfor %}
                                            </select>
                                        </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-12 mb-4">
                                            <label class="form-label" for="total_amount">Receipt (₹)</label>
                                            <input type="text" class="form-control" id="debit_note" name="debit_note">
                                        </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>
                                            <input type="hidden" id="tm_collect_id" name="tm_collect_id"
                                                value="{{ collect.id|escapejs }}">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                </div>
                </form>
            </div>
        </div>
    </div>
</div>
</div>

{% include 'includes/footer.html' %}
{% include 'includes/common_js.html' %}
<script>


    $(document).ready(function () {
        safeSelectValue('#f_type', '{{ collect.f_type|escapejs }}');
        safeSelectValue('#bank_id', '{{ collect.bank_id|escapejs }}');
        loadFinance('{{ collect.finance_id|escapejs }}');
        safeValue('#receipt_date', '{{ collect.receipt_date|escapejs }}');
        safeValue('#receipt_no', '{{ collect.receipt_no|escapejs }}');
        safeValue('#total_amount', '{{ collect.total_amount|escapejs }}');
        safeValue('#debit_note', '{{ collect.receipt|escapejs }}');

        if ('{{ collect.f_type|escapejs }}' === 'bank') {
            $('#bank_id').prop('disabled', true);
        }

        initializeDateRangePicker('this_month');

        $('#finance_id, #f_type, #sales_status').on('select2:select select2:clear change', function () {
            checkReceiptInfoVisibility();
        });

        // Initial check
        setTimeout(checkReceiptInfoVisibility, 500);
    });

    function checkReceiptInfoVisibility() {
        const val = $('#finance_id').val();
        const f_type = $('#f_type').val();
        const sales_status = $('#sales_status').val();

        // Rule 7: Show col-3 section only when ALL conditions are met:
        // Status = Approved, f_type is selected, finance_id is selected
        if (val && f_type && sales_status === 'approved') {
            $('#receipt_info').slideDown(150);
            if (f_type === 'bank') {
                $('#bank_id').val(val).trigger('change').prop('disabled', true);
            }
        } else {
            $('#receipt_info').slideUp(150);
            if (f_type === 'bank') {
                // Only re-enable if NOT in bank mode or if explicit change needed
                // In edit mode, f_type is often disabled, so we respect that
                if (!$('#f_type').is(':disabled')) {
                    $('#bank_id').val('').trigger('change').prop('disabled', false);
                }
            }
        }
    }

    function loadFinance(preselectedId = null) {
        let f_type = $('#f_type').val();

        // Handle Exchange Type
        if (f_type === 'exchange') {
            $('#finance_id').html('<option value="0">Exchange</option>');
            if (preselectedId) safeSelectValue('#finance_id', preselectedId);
            return;
        }

        $.ajax({
            url: '/ajax_load_finance/',
            type: 'POST',
            data: {
                f_type: f_type,
                csrfmiddlewaretoken: document.getElementsByName('csrfmiddlewaretoken')[0].value
            },
            success: function (response) {
                let options = '<option value="">Select</option>';

                if (response.status === 'success') {
                    response.data.forEach(function (item) {
                        options += `<option value="${item.id}">${item.name}</option>`;
                    });
                }

                $('#finance_id').html(options).trigger('change');

                // 🔹 Preselect after AJAX load
                if (preselectedId) {
                    safeSelectValue('#finance_id', preselectedId);
                }
            },
            error: function () {
                $('#finance_id').html('<option value="">Error loading data</option>');
            }
        });
    }
    let CURRENT_MODE = 'edit';

    function refresh_data() {
        let from_date = $('#from_date').val();
        let to_date = $('#to_date').val();
        let finance_id = $('#finance_id').val();
        let f_type = $('#f_type').val();
        let claim_status = $('#claim_status').val();
        let sales_status = $('#sales_status').val(); // NEW

        if (!from_date || !to_date) {
            showToast('info', "Please select a date range");
            return;
        }

        if (!f_type) {
            showToast('info', "Please select Type");
            return;
        }

        $.ajax({
            url: "/load_collection_details/",
            type: "POST",
            data: {
                from_date: from_date,
                to_date: to_date,
                finance_id: finance_id,
                f_type: f_type,
                claim_status: JSON.stringify(claim_status),
                sales_status: sales_status, // NEW
                mode: 'edit',
                tm_collect_id: '{{ collect.id|escapejs }}',
                csrfmiddlewaretoken: document.getElementsByName('csrfmiddlewaretoken')[0].value
            },
            success: function (response) {
                let rows = '';
                let initialTotal = 0; // Total from backend for pre-checked items

                if (response.data && response.data.length > 0) {
                    $.each(response.data, function (index, item) {
                        let isClaimed = item.claim_status.toLowerCase().includes('claimed');
                        let isChecked = item.is_checked == 1 || isClaimed;

                        if (isChecked) initialTotal += parseFloat(item.amount) || 0;

                        // Rule 8: If approval is Pending, Do not display checkbox, Display status only
                        let canCollect = true;
                        if (f_type === 'exchange' && item.sales_status === 'pending') {
                            canCollect = false;
                        }
                        if (item.sales_status !== 'approved') {
                            canCollect = false;
                        }

                        let checkboxHtml = '';
                        if (isClaimed) {
                            checkboxHtml = `<i class="bx bx-check-circle text-success" title="Fully Claimed"></i>`;
                        } else if (canCollect) {
                            checkboxHtml = `<input type="checkbox" class="form-check-input item-checkbox" 
                                            value="${item.id}" 
                                            onchange="syncSelectAll(true)"
                                            ${isChecked ? 'checked' : ''}>`;
                        } else {
                            // Rule 8: Display status only
                            let badgeClass = item.sales_status === 'pending' ? 'bg-label-warning' : 'bg-label-danger';
                            let statusText = item.sales_status ? item.sales_status.toUpperCase() : 'PENDING';
                            checkboxHtml = `<span class="badge ${badgeClass}" title="${item.rejected_remarks || ''}">${statusText}</span>`;
                        }

                        // ... (same logic for financeHtml)
                        let financeHtml = '';
                        if (item.row_type === 'transaction' && f_type === 'bank') {
                            // Bank view + normal transaction → show only Amount
                            financeHtml = `<div class="d-flex flex-column">
                                        <span class="fw-semibold">${item.finance_name}</span>
                                        <small class="text-muted mt-1">
                                            <div><strong>Amount:</strong> ${item.amount}</div>
                                        </small>
                                    </div>`;
                        } else if (item.row_type === 'charge' && f_type === 'bank') {
                            // Bank view + charge row → show bank + finance + charge value
                            financeHtml = `<div class="d-flex flex-column">
                                        <span class="fw-semibold">${item.finance_name}</span>
                                        <small class="text-muted mt-1">
                                            <div><strong>${item.p_type === 'finance' ? 'Finance' : 'Cards'}:</strong> ${item.base_name.split('(')[0]}</div>
                                            <div><strong>Charge:</strong> ${item.charge_amount}</div>
                                        </small>
                                    </div>`;
                        } else {
                            // Other views (finance/card/transaction/charge) → show full details
                            financeHtml = `<div class="d-flex flex-column">
                                        <span class="fw-semibold">${item.finance_name}</span>
                                        <small class="text-muted mt-1">
                                            <div><strong>Amount:</strong> ${item.receipt}</div>
                                            <div><strong>Charges:</strong> ${item.charges}</div>
                                            ${f_type === 'card' ? `<div><strong>Cashback:</strong> ${item.cashback}</div>` : ''}
                                        </small>
                                    </div>`;
                        }

                        rows += `
                        <tr data-transaction-id="${item.transaction_id}"
                            data-sales-id="${item.sales_id}"
                            data-branch-id="${item.branch_id}"
                            data-finance-id="${item.finance_id}"
                            data-row-type="${item.row_type}"
                            data-backend-amount="${parseFloat(item.amount) || 0}">

                            <td>${checkboxHtml}</td>
                            <td class="date">${item.inv_date}</td>
                            <td class="inv-no">${item.inv_no}</td>                            
                            <td>
                                <div class="d-flex flex-column">
                                    <span class="fw-semibold">${item.customer_name} 
                                        <span class="text-danger">(${item.customer_type})</span>
                                    </span>
                                    <small class="text-muted d-flex align-items-center">
                                        <i class="bx bx-phone me-2" style="width:14px;"></i>
                                        <span><strong>Phone:</strong> ${item.customer_phone}</span>
                                    </small>
                                </div>
                            </td>

                            <td>${item.branch_name}</td>
                            <td>${item.total_amount}</td>
                            <td class="type"><span class="badge bg-label-info">${item.type}</span></td>
                            <td>${financeHtml}</td>

                            <td class="row-amount">₹ ${item.amount}</td>
                            <td>${item.claim_status}</td>
                        </tr>
                    `;
                    });

                } else {
                    rows = `<tr>
                            <td colspan="10" class="text-center text-muted">
                                No Data Available
                            </td>
                        </tr>`;
                }

                $('#datatable tbody').html(rows);

                // Set initial total based on backend pre-checked items
                $('#total_amount').val(initialTotal.toFixed(2));

                syncSelectAll(true); // sync select all checkboxes
            },
            error: function () {
                alert("Error while loading collection details");
            }
        });
    }

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

        $('#select_all').prop(
            'checked',
            allCheckboxes.length > 0 && allCheckboxes.length === checkedCheckboxes.length
        );

        calculateTotal(true); // always recalc total on any checkbox change
    }

    function calculateTotal(force = false) {
        // Only recalc on user interaction
        let total = 0;

        $('.item-checkbox:checked').each(function () {
            const row = $(this).closest('tr');
            // Use backend amount from data attribute
            total += parseFloat(row.data('backend-amount')) || 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'),
                finance_id: $row.data('finance-id'), // Often needed for backend updates
                inv_date: $row.find('.date').text().trim(),
                price_no: $row.find('.inv-no').text().trim(),
                f_type: $row.find('.type').text().trim(),
                transaction_id: $row.data('transaction-id'),
                row_type: $row.data('row-type'),
                amount: parseFloat($row.data('backend-amount')) || 0,
            });
        });

        $('#bank_id').prop('disabled', false);
        let formData = new FormData(this);
        if ($('#f_type').val() === 'bank') $('#bank_id').prop('disabled', true);
        formData.append('items', JSON.stringify(items));

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