{% 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">
                        {% 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">Type</label>
                                    <select class="select2  form-control" id="f_type" name="f_type">
                                        <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 / Bank</label>
                                    <select class="select2  form-control" id="finance_id" name="finance_id" required>
                                        <option value="">Select</option>

                                    </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">Collection status</label>
                                    <select class="select2 form-control" id="claim_status" name="claim_status" multiple>
                                        <option value="pending" selected>Pending</option>
                                        <option value="claimed">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="data_refresh()">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/Bank</th>
                                                    <th>Receipt (₹)</th>
                                                    <th>Status</th>
                                                    <th>Action</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td colspan="11" class="text-center">No Data.</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <div class="col-md-3 mb-4 form-control-validation" id="receipt_info"
                                    style="display: none;">
                                    <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>
                                                Receipt Date</label>
                                            <input type="date" class="form-control" id="receipt_date"
                                                name="receipt_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>
                                                Receipt No</label>
                                            <input type="text" class="form-control" id="receipt_no" name="receipt_no"
                                                value="{{claim_no}}" readonly required>
                                        </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 Amount (₹)</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>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Reject Modal -->
<div class="modal fade" id="rejectModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Reject Sales Order</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="reject_sales_id">
                <div class="row">
                    <div class="col mb-3">
                        <label for="reject_remarks" class="form-label">Rejection Remarks <span
                                class="text-danger">*</span></label>
                        <textarea id="reject_remarks" class="form-control" rows="3"
                            placeholder="Enter reason for rejection..."></textarea>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-danger" onclick="submitRejection()">Reject</button>
            </div>
        </div>
    </div>
</div>

</div>

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


    // Bind once
    $(document).ready(function () {
        $('#f_type').on('change', loadFinance);
        CurrentDate('receipt_date');

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

    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') {
                $('#bank_id').val('').trigger('change').prop('disabled', false);
            }
        }
    }


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

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

        // Handle Exchange Type
        if (f_type === 'exchange') {
            $('#finance_id').html('<option value="0">Exchange</option>').val('0').trigger('change');
            $('#finance_id').prop('disabled', true).prop('required', false);
            $('#receipt_info').slideDown(150);
            return;
        }

        // Handle Other Types
        $('#finance_id').prop('disabled', false).prop('required', true);
        $('#bank_id').prop('disabled', false); // Re-enable bank_id when type changes

        $.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');
            },
            error: function () {
                $('#finance_id').html('<option value="">Error loading data</option>');
            }
        });
    }

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

    $('#f_type').on('change', function () {
        let finance_id = $(this).val() || 0;

        if (!finance_id) {
            $('#datatable tbody').html('<tr><td colspan="11" class="text-center">No Data.</td></tr>');
            return;
        }
        data_refresh();
    });


    $('#finance_id').on('change', function () {

        data_refresh();
    });

    function data_refresh() {
        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
                csrfmiddlewaretoken: document.getElementsByName('csrfmiddlewaretoken')[0].value
            },
            success: function (response) {
                let rows = '';
                console.log(response.data);

                if (response.data && response.data.length > 0) {
                    $.each(response.data, function (index, item) {
                        let canCollect = true;
                        if (f_type === 'exchange' && item.sales_status === 'pending') {
                            canCollect = false;
                        }

                        if (item.sales_status !== 'approved') {
                            canCollect = false;
                        }

                        let checkboxHtml = '';
                        if (item.is_collect == 0) {
                            if (canCollect) {
                                checkboxHtml = `<input type="checkbox" class="form-check-input item-checkbox" value="${item.id}" onchange="syncSelectAll()">`;
                            } 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>`;
                            }
                        } else {
                            checkboxHtml = `<i class="bx bx-check-circle text-success" title="Fully Claimed"></i>`;
                        }

                        let financeHtml = '';

                        if (item.row_type === 'charge') {
                            // ... (kept same)
                            if (f_type === 'bank') {
                                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}</div>
                                        <div><strong>Charge:</strong> ${item.amount}</div>
                                    </small>
                                </div>
                            `;
                            } else {
                                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>Charge:</strong> ${item.charge_amount}</div>
                                    </small>
                                </div>
                            `;
                            }
                        } else {
                            // Transaction row
                            if (f_type === 'bank') {
                                financeHtml = `
                                <div class="d-flex flex-column">
                                    <span class="fw-semibold">${item.finance_name}</span>
                                    <div><strong>Bank Amount:</strong> ${item.amount}</div>
                                </div>
                            `;
                            } else {
                                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>Charge:</strong> ${item.charges}</div>
                                        ${item.bank_name && item.bank_name !== '-' ? `<div><strong>Bank:</strong> ${item.bank_name}</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-row-type="${item.row_type}"
                            data-finance-id="${item.finance_id}"
                            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">
                                        <i class="bx bx-phone me-1"></i>
                                        <strong>Phone:</strong> ${item.customer_phone}<br>
                                    </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>
                            <td>
                                ${(item.sales_status !== 'rejected' && item.raw_claim_status === 'pending') ?
                                `<button type="button" class="btn btn-sm btn-outline-danger" onclick="openRejectModal('${item.sales_id}')">Reject</button>` :
                                '<span class="text-muted">-</span>'}
                            </td>
                      </tr>
                    `;
                    });


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

                $('#datatable tbody').html(rows);
                syncSelectAll();
            },
            error: function () {
                alert("Error while loading collection details");
            }
        });
    }


    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;
        $('.item-checkbox:checked').each(function () {
            const amountText = $(this).closest('tr').find('.row-amount').text().replace(/[^0-9.-]+/g, "");
            console.log(amountText);
            total += parseFloat(amountText) || 0;
        });
        console.log(total);

        $('#total_amount').val(total.toFixed(2));
    }

    function toggleSelectAll(masterCheckbox) {
        $('.item-checkbox').prop('checked', masterCheckbox.checked);
        calculateTotal();
    }


    $('#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); // Enable before getting FormData
        let formData = new FormData(this);
        if ($('#f_type').val() === 'bank') $('#bank_id').prop('disabled', true); // Re-disable if needed
        formData.append('items', JSON.stringify(items));

        handleFormSubmit(
            this,
            '/add_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
        );
    });



    function openRejectModal(id) {
        $('#reject_sales_id').val(id);
        $('#reject_remarks').val('');
        $('#rejectModal').modal('show');
    }

    function submitRejection() {
        let id = $('#reject_sales_id').val();
        let remarks = $('#reject_remarks').val();
        if (!remarks) {
            alert('Please enter rejection remarks');
            return;
        }

        $.ajax({
            url: '/reject_sales_order/',
            type: 'POST',
            data: {
                id: id,
                remarks: remarks,
                csrfmiddlewaretoken: document.getElementsByName('csrfmiddlewaretoken')[0].value
            },
            success: function (response) {
                if (response.status === 'success') {
                    $('#rejectModal').modal('hide');
                    data_refresh(); // Refresh table to update status/remove row
                    showToast('success', response.message);
                } else {
                    alert(response.message);
                }
            },
            error: function () {
                alert('Error processing rejection');
            }
        });
    }

</script>