{% 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">Sales</h4>
            <a href="/sales/add"><button type="button" class="btn btn-success btn-sm">Add</button></a> &nbsp
        </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">Sales</li>
            </ol>
        </nav>
    </div>

    <div class="card">
        <div class="card-header border-bottom">
            <div class="row mt-2">
                <div class="col-3">
                    <label class="form-label">Date Filter</label>
                    <input type="checkbox" id="is_date" checked>
                    <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-2">
                    <label class="form-label">Sales Status</label>
                    <select class="select2 form-control" id="filter_sales_status" name="sales_status">
                        <option value="">Select</option>
                        <option value="approved">Approved</option>
                        <option value="rejected">Rejected</option>
                    </select>
                </div>







                <div class="col-2 mt-6">
                    <button type="button" class="btn btn-primary" onclick="refresh_data()"><i
                            class="fas fa-search"></i>&nbsp; Search</button>
                    <input type="hidden" name="sales_id" id="sales_id" value="{{decoded_id}}">
                </div>
            </div>
        </div>
        <div class="card-body">
            <div class="card-datatable table-responsive pt-0">
                <table class="datatables-basic table table-bordered" id="datatable">
                    <thead>
                        {% csrf_token %}
                        <tr>
                            <th rowspan="2">Id</th>
                            <th rowspan="2">Action</th>
                            <th rowspan="2">INV No</th>
                            <th rowspan="2">INV Date</th>
                            <th rowspan="2">Customer</th>
                            <th rowspan="2">Phone</th>
                            <th rowspan="2">Customer Type</th>
                            <th rowspan="2">Total Quantity</th>
                            <th rowspan="2">Total Amount</th>
                            <th colspan="5">Payments</th>
                            <th rowspan="2">Claim Amount</th>
                            <th rowspan="2">Collection Amount</th>
                            <th rowspan="2">Balance</th>
                            <th rowspan="2">Remarks</th>
                            <th rowspan="2">Sales Status</th>
                        </tr>
                        <tr>
                            <th>Cash</th>
                            <th>Bank</th>
                            <th>Exchange</th>
                            <th>Finance</th>
                            <th>Bank</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                    <tfoot>
                        <th colspan="7" class="text-end fw-bold">Total :</th>
                        <th id="footer_qty" class="text-end fw-bold"></th>
                        <th id="footer_amount" class="text-end fw-bold"></th>
                        <th id="footer_cash" class="text-end fw-bold"></th>
                        <th id="footer_bank" class="text-end fw-bold"></th>
                        <th id="footer_exchange" class="text-end fw-bold"></th>
                        <th id="footer_finance" class="text-end fw-bold"></th>
                        <th id="footer_card" class="text-end fw-bold"></th>
                        <th id="footer_claim" class="text-end fw-bold"></th>
                        <th id="footer_collection" class="text-end fw-bold"></th>
                        <th id="footer_balance" class="text-end fw-bold"></th>
                        <th id="footer_remarks" class="text-end fw-bold"></th>
                        <th id="footer_status" class="text-end fw-bold"></th>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>




</div>

<!-- Modal for Rejection Details -->
<div class="modal fade" id="rejectionModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-transparent">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body px-sm-5 pb-5">
                <div class="text-center mb-4">
                    <i class="fas fa-info-circle text-info mb-2" style="font-size: 5rem !important;"></i>
                    <h3 class="mb-2">Rejection Details</h3>
                </div>
                <div class="row g-3">
                    <div class="col-12 border-bottom pb-2">
                        <span class="fw-bold text-heading">INV No:</span> <span id="reject_inv_no"></span>
                    </div>
                    <div class="col-12 border-bottom pb-2">
                        <span class="fw-bold text-heading">Status:</span> <span
                            class="badge text-bg-danger">Rejected</span>
                    </div>
                    <div class="col-12 border-bottom pb-2">
                        <span class="fw-bold text-heading">Rejected By:</span> <span id="reject_user"></span>
                    </div>
                    <div class="col-12 border-bottom pb-2">
                        <span class="fw-bold text-heading">Rejected On:</span> <span id="reject_date"></span>
                    </div>
                    <div class="col-12 mb-3">
                        <span class="fw-bold d-block mb-1 text-heading">Rejection Remarks:</span>
                        <div class="p-2 bg-lighter rounded" id="reject_remarks" style="min-height: 50px;"></div>
                    </div>
                </div>
                <div class="col-12 text-center mt-4">
                    <button type="reset" class="btn btn-primary w-100" data-bs-dismiss="modal">OK</button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal for Sales Order Details -->
<div class="modal fade" id="viewDetailsModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Sales Order Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row mb-4">
                    <div class="col-md-6">
                        <div class="card bg-lighter shadow-none">
                            <div class="card-body p-3">
                                <p class="mb-1"><span class="fw-semibold">ORDER NO:</span> <span
                                        id="view_inv_no"></span></p>
                                <p class="mb-0"><span class="fw-semibold">DATE:</span> <span id="view_date"></span></p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card bg-lighter shadow-none">
                            <div class="card-body p-3">
                                <p class="mb-1"><span class="fw-semibold">CUSTOMER:</span> <span
                                        id="view_customer"></span></p>
                                <p class="mb-0"><span class="fw-semibold">PHONE:</span> <span id="view_phone"></span>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

                <h6 class="text-uppercase fw-bold"><i class="ti ti-credit-card me-1"></i> Payment Transactions</h6>
                <div class="table-responsive border rounded mb-4">
                    <table class="table table-sm table-striped" id="view_payment_table">
                        <thead class="table-light">
                            <tr>
                                <th>TYPE</th>
                                <th>SOURCE</th>
                                <th>BANK</th>
                                <th class="text-end">AMOUNT</th>
                                <th>CHARGE BANK</th>
                                <th class="text-end">CHARGES</th>
                                <th class="text-end">CASHBACK</th>
                                <th>REF / REMARKS</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>

                <h6 class="text-uppercase fw-bold"><i class="ti ti-package me-1"></i> Product Items</h6>
                <div class="table-responsive border rounded">
                    <table class="table table-sm table-striped" id="view_item_table">
                        <thead class="table-light">
                            <tr>
                                <th>SUBCATEGORY / BRAND</th>
                                <th>MODEL / VARIANT</th>
                                <th>IMEI</th>
                                <th class="text-end">RATE</th>
                                <th class="text-end">QTY</th>
                                <th class="text-end">AMOUNT</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

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

    var table;




    $(document).ready(function () {
        initializeDateRangePicker('this_month'); // date range picker (function in common_js)
        refresh_data();

        if (sessionStorage.getItem('addSuccessMessage')) {
            showToast('success', "Sales Order Saved successfully")
            sessionStorage.removeItem('addSuccessMessage');
        }

        if (sessionStorage.getItem('editSuccessMessage')) {
            showToast('success', "Purchase Order Updated successfully")
            sessionStorage.removeItem('editSuccessMessage');
        }


    });






    // datatable 
    function initializeDataTable() {
        table = $('#datatable').DataTable({
            "processing": true,
            "pageLength": 50,
            "destroy": true,
            "order": [],
            "dom": getDataTableDom(),
            "buttons": getExportButtons(),
            "columns": [
                { "data": "id", "title": " ID #" },
                { "data": "action", "title": "Action" },
                { "data": "inv_no", "title": "INV No" },
                { "data": "date", "title": "INV Date" },
                { "data": "customer", "title": "Customer" },
                { "data": "phone", "title": "Phone" },
                { "data": "customer_type", "title": "Customer Type" },
                { "data": "quantity", "title": "Total Quantity", "className": "text-end" },
                { "data": "amount", "title": "Total Amount", "className": "text-end" },
                { "data": "cash", "title": "Cash", "className": "text-end" },
                { "data": "bank", "title": "Bank", "className": "text-end" },
                { "data": "exchange", "title": "Exchange", "className": "text-end" },
                { "data": "finance", "title": "Finance", "className": "text-end" },
                { "data": "card", "title": "Card", "className": "text-end" },
                { "data": "claim", "title": "Claim", "className": "text-end" },
                { "data": "collection", "title": "Collection", "className": "text-end" },
                { "data": "balance", "title": "Balance", "className": "text-end" },
                { "data": "remarks", "title": "Remarks" },
                { "data": "status", "title": "Sales Status" }
            ],
            "ajax": {
                "url": '/ajax_sales_view/',
                "type": "POST",

                "data": function (data) {
                    data.csrfmiddlewaretoken =
                        document.getElementsByName("csrfmiddlewaretoken")[0].value;

                    const isDateChecked = $('#is_date').is(":checked");
                    const fromDate = $('#from_date').val();
                    const toDate = $('#to_date').val();
                    const storeId = $('#filter_store_id').val();
                    const salesId = $('#sales_id').val();
                    const filterSalesStatus = $('#filter_sales_status').val();

                    if (storeId) data.filter_store_id = storeId;
                    if (filterSalesStatus) data.filter_sales_status = filterSalesStatus;

                    // ✅ sales_id always has priority
                    if (salesId && salesId !== '0') {
                        data.sales_id = salesId;
                        // ❌ do NOT send date filters
                    } else {
                        // ✅ apply date filter only when sales_id is 0 / empty
                        if (isDateChecked && fromDate && toDate) {
                            data.from_date = fromDate;
                            data.to_date = toDate;
                        }
                    }
                },

                dataSrc: function (response) {
                    if (response.message === 'permission') {
                        showSweetAlert('warning', response.error_message || 'You do not have permission to view the user role.');
                        table.clear().draw();
                        return [];
                    }

                    return response.data || [];
                }
            },
            footerCallback: function (row, data, start, end, display) {
                const api = this.api();

                const intVal = function (i) {
                    return typeof i === 'string'
                        ? parseFloat(i.replace(/[^0-9.-]+/g, '')) || 0
                        : typeof i === 'number'
                            ? i
                            : 0;
                };

                const Quantity = data.reduce((sum, row) => sum + intVal(row.quantity), 0);
                const Amount = data.reduce((sum, row) => sum + intVal(row.amount), 0);
                const Claim = data.reduce((sum, row) => sum + intVal(row.claim), 0);
                const Collection = data.reduce((sum, row) => sum + intVal(row.collection), 0);
                const Exchange = data.reduce((sum, row) => sum + intVal(row.exchange), 0);
                const Balance = data.reduce((sum, row) => sum + intVal(row.balance), 0);
                const Cash = data.reduce((sum, row) => sum + intVal(row.cash), 0);
                const Bank = data.reduce((sum, row) => sum + intVal(row.bank), 0);
                const Finance = data.reduce((sum, row) => sum + intVal(row.finance), 0);
                const Card = data.reduce((sum, row) => sum + intVal(row.card), 0);


                // Upate footer cells
                $('#footer_qty').html(Quantity.toLocaleString(undefined, { minimumFractionDigits: 2 }));
                $('#footer_amount').html(Amount.toLocaleString(undefined, { minimumFractionDigits: 2 }));
                $('#footer_claim').html(Claim.toLocaleString(undefined, { minimumFractionDigits: 2 }));
                $('#footer_collection').html(Collection.toLocaleString(undefined, { minimumFractionDigits: 2 }));
                $('#footer_exchange').html(Exchange.toLocaleString(undefined, { minimumFractionDigits: 2 }));
                $('#footer_balance').html(Balance.toLocaleString(undefined, { minimumFractionDigits: 2 }));
                $('#footer_cash').html(Cash.toLocaleString(undefined, { minimumFractionDigits: 2 }));
                $('#footer_bank').html(Bank.toLocaleString(undefined, { minimumFractionDigits: 2 }));
                $('#footer_finance').html(Finance.toLocaleString(undefined, { minimumFractionDigits: 2 }));
                $('#footer_card').html(Card.toLocaleString(undefined, { minimumFractionDigits: 2 }));
                $('#footer_remarks').html('-');
                $('#footer_status').html('-');


            },
        });
    }


    function refresh_data() {
        if (!table) {
            initializeDataTable();
        } else {
            table.ajax.reload();
        }
    }


    function edit_data(id) {
        var encodedId = btoa(id);
        window.location.href = '/sales/edit/?id=' + encodedId;
    }


    function delete_data(id) {
        deleteEntity('/tm_sales_delete/', id, '{{ csrf_token }}', 'Sales Order');
    }


    function print_data(id) {
        var url = '/sales_invoice/?k=' + window.btoa(id);
        printExternal(url);
    }




    function thermal_print_data(id) {
        var url = '/sales_invoice_thermal/?k=' + window.btoa(id);
        printExternal(url);
    }



    function printExternal(url) {
        var printWindow = window.open(url, 'Print', 'left=200,top=200,width=950,height=500,toolbar=0,resizable=0');

        if (!printWindow) {
            showToast('info', 'Pop-up blocked! Please allow pop-ups for this site.');
            return;
        }

        printWindow.onload = function () {
            printWindow.focus();
            printWindow.print();

            // Close after printing
            printWindow.onafterprint = function () {
                printWindow.close();
            };
        };
    }


    function showRejectionDetails(id) {
        const row = table.rows().data().toArray().find(r => r.action.includes("'" + id + "'"));
        if (row) {
            $('#reject_inv_no').text(row.inv_no);
            $('#reject_user').text(row.rejected_by);
            $('#reject_date').text(row.rejected_on);
            $('#reject_remarks').text(row.rejected_remarks);
            $('#rejectionModal').modal('show');
        }
    }

    function view_data(id) {
        const row = table.rows().data().toArray().find(r => r.action.includes("'" + id + "'"));
        if (!row) return;

        $('#view_inv_no').text(row.inv_no);
        $('#view_date').text(row.date);
        $('#view_customer').text(row.customer);
        $('#view_phone').text(row.phone);

        // Clear tables
        $('#view_payment_table tbody').empty();
        $('#view_item_table tbody').empty();

        $.ajax({
            url: '/ajax_sales_edit/',
            type: 'POST',
            data: {
                'sales_id': id,
                'csrfmiddlewaretoken': '{{ csrf_token }}'
            },
            success: function (response) {
                // Payments
                if (response.tx_transaction && response.tx_transaction.length > 0) {
                    response.tx_transaction.forEach(tx => {
                        const amount = tx.amount || '0.00';
                        const charges = tx.charges || '0.00';
                        const cashback = tx.cashback || '0.00';
                        $('#view_payment_table tbody').append(`
                            <tr>
                                <td>${tx.payment_type}</td>
                                <td>${tx.finance_customer || '-'}</td>
                                <td>${tx.bank_name || '-'}</td>
                                <td class="text-end">${amount}</td>
                                <td>${tx.charge_bank_name || '-'}</td>
                                <td class="text-end">${charges}</td>
                                <td class="text-end">${cashback}</td>
                                <td>${tx.reference_no || '-'}</td>
                            </tr>
                        `);
                    });
                } else {
                    $('#view_payment_table tbody').append('<tr><td colspan="7" class="text-center">No payment transactions recorded.</td></tr>');
                }

                // Items
                if (response.items && response.items.length > 0) {
                    response.items.forEach(item => {
                        const subcat = item.subcategory_name || '-';
                        const brand = item.brand_name || '-';
                        const model = item.model_name || '-';
                        const variant = item.variant_name || '-';

                        $('#view_item_table tbody').append(`
                            <tr>
                                <td>${subcat} / ${brand}</td>
                                <td>${model} / ${variant}</td>
                                <td>${item.imei_no || '-'}</td>
                                <td class="text-end">${item.rate}</td>
                                <td class="text-end">${item.quantity}</td>
                                <td class="text-end">${item.amount}</td>
                            </tr>
                        `);
                    });
                } else {
                    $('#view_item_table tbody').append('<tr><td colspan="6" class="text-center">No items recorded.</td></tr>');
                }

                $('#viewDetailsModal').modal('show');
            },
            error: function () {
                showToast('error', 'Failed to load sales details');
            }
        });
    }


</script>