Subversion Repositories SmartDukaan

<style>
    .settle-form {
        display: none;
        margin-top: 6px;
        padding: 6px;
        background: #f5f5f5;
        border: 1px solid #ddd;
        border-radius: 3px;
        min-width: 220px;
    }

    .settle-form label {
        display: block;
        font-size: 11px;
        margin: 4px 0 2px;
    }

    .settle-form input, .settle-form select {
        width: 100%;
        font-size: 12px;
    }

    .settle-form .settle-actions {
        margin-top: 6px;
    }

    #pr-items-table th, #pr-items-table td,
    #pr-settlements-table th, #pr-settlements-table td {
        font-size: 12px;
    }

    #unsettled-pr-table td {
        vertical-align: top;
    }
</style>

<section class="wrapper">
    <div class="row">
        <div class="col-lg-12">
            <h3 class="page-header"><i class="icon_document_alt"></i>Unsettled Purchase Returns</h3>
            <ol class="breadcrumb">
                <li><i class="fa fa-home"></i><a href="${rc.contextPath}/dashboard">Home</a></li>
                <li><i class="icon_document_alt"></i>Unsettled Purchase Returns</li>
            </ol>
            <div style="margin: 8px 0;">
                <a href="javascript:void(0);" class="btn btn-primary btn-sm create-purchase-return">Create New Purchase
                    Return</a>
            </div>
        </div>
    </div>

    #if($empty)
        #include("./empty.vm")
    #else
        <div>
            <div class="row">
                <div class="col-lg-12">
                    <table class="table table-striped table-condensed table-bordered" id="unsettled-pr-table">
                        <thead>
                        <tr>
                            <th>PurchaseRet ID</th>
                            <th>Vendor</th>
                            <th>Amount</th>
                            <th>Return Time</th>
                            <th>Return Inventory Type</th>
                            <th>Unsettled Amount</th>
                            <th>Purchase Return Reason</th>
                            <th>Reason Text</th>
                            #if($canSettle)
                                <th>Mark Settled</th>
                            #end
                            <th>Item Details</th>
                            <th>PR Settlement Info</th>
                        </tr>
                        </thead>
                        <tbody>
                            #foreach( $row in $rows )
                            <tr data-pr-id="$row.getPurchaseReturnId()">
                                <td>$row.getPurchaseReturnId()</td>
                                <td>$row.getVendorName()</td>
                                <td>$row.getAmount()</td>
                                <td>$row.getFormattedReturnTime()</td>
                                <td>$row.getReturnInventoryType()</td>
                                <td>$row.getUnsettledAmount()</td>
                                <td>$row.getPurchaseReturnType()</td>
                                <td>$row.getReasonText()</td>
                                #if($canSettle)
                                    <td>
                                        <a href="javascript:void(0);" class="btn btn-xs btn-primary settle-toggle">Mark
                                            as Settled</a>
                                        <div class="settle-form">
                                            <label>Settled Amount:</label>
                                            <input type="text" class="settled-amount" placeholder="e.g. 32000"/>
                                            <label>Settlement Type:</label>
                                            <select class="settlement-type">
                                                <option value="CREDIT_NOTE" selected="selected">CREDIT_NOTE</option>
                                                <option value="REPLACEMENT">REPLACEMENT</option>
                                                <option value="AGAINST_GRN">AGAINST_GRN</option>
                                            </select>
                                            <label>Document Number:</label>
                                            <input type="text" class="document-number"/>
                                            <div class="settle-actions">
                                                <a href="javascript:void(0);"
                                                   class="btn btn-xs btn-success settle-confirm">Settle</a>
                                                <a href="javascript:void(0);"
                                                   class="btn btn-xs btn-default settle-cancel">Cancel</a>
                                            </div>
                                        </div>
                                    </td>
                                #end
                                <td><a href="javascript:void(0);" class="btn btn-xs btn-default view-items">View
                                    Items</a></td>
                                <td><a href="javascript:void(0);" class="btn btn-xs btn-default view-settlements">View
                                    Settlements</a></td>
                            </tr>
                            #end
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    #end
</section>

<div class="modal fade" id="pr-modal" tabindex="-1" role="dialog" aria-labelledby="pr-modal-title">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="pr-modal-title">Details</h4>
            </div>
            <div class="modal-body" id="pr-modal-body"></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        if ($.fn.DataTable.isDataTable('#unsettled-pr-table')) {
            $('#unsettled-pr-table').DataTable().destroy();
        }
        $('#unsettled-pr-table').DataTable({"pageLength": 25, "order": [[0, 'desc']]});
    });

    function escapeHtml(value) {
        if (value === null || value === undefined) return '';
        return String(value).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
    }

    function renderItemsTable(items) {
        if (!items || items.length === 0) return '<div class="alert alert-info">No items found.</div>';
        var html = '<table class="table table-striped table-condensed table-bordered" id="pr-items-table">';
        html += '<thead><tr><th>ItemId</th><th>Item</th><th>Quantity</th></tr></thead><tbody>';
        for (var i = 0; i < items.length; i++) {
            var it = items[i];
            html += '<tr><td>' + escapeHtml(it.itemId) + '</td><td>' + escapeHtml(it.itemDescription) + '</td><td>' + escapeHtml(it.quantity) + '</td></tr>';
        }
        html += '</tbody></table>';
        return html;
    }

    function renderSettlementsTable(settlements) {
        if (!settlements || settlements.length === 0) return '<div class="alert alert-info">No settlement records yet.</div>';
        var html = '<table class="table table-striped table-condensed table-bordered" id="pr-settlements-table">';
        html += '<thead><tr><th>Settlement Date</th><th>Settlement Type</th><th>Settled Amount</th><th>Settled By</th><th>Document Number</th></tr></thead><tbody>';
        for (var i = 0; i < settlements.length; i++) {
            var s = settlements[i];
            html += '<tr>'
                    + '<td>' + escapeHtml(s.formattedSettlementDate) + '</td>'
                    + '<td>' + escapeHtml(s.settlementType) + '</td>'
                    + '<td>' + escapeHtml(s.settlementAmount) + '</td>'
                    + '<td>' + (s.settlementBy ? escapeHtml(s.settlementBy) : '--') + '</td>'
                    + '<td>' + (s.documentNumber ? escapeHtml(s.documentNumber) : '--') + '</td>'
                    + '</tr>';
        }
        html += '</tbody></table>';
        return html;
    }

    // Unbind any prior namespaced handlers BEFORE binding — this view is
    // loaded via AJAX into #main-content; without off(), each reload stacks
    // another document-level listener and a single click fires N POSTs.
    $(document).off('.unsettledpr');

    $(document).on('click.unsettledpr', '#unsettled-pr-table .view-items', function () {
        var prId = $(this).closest('tr').data('pr-id');
        doAjaxRequestHandler(context + "/return/unsettled/items/" + prId, "GET", function (response) {
            var items = typeof response === 'string' ? JSON.parse(response) : response;
            $('#pr-modal-title').text('Items for Purchase Return ' + prId);
            $('#pr-modal-body').html(renderItemsTable(items));
            $('#pr-modal').modal('show');
        });
    });

    $(document).on('click.unsettledpr', '#unsettled-pr-table .view-settlements', function () {
        var prId = $(this).closest('tr').data('pr-id');
        doAjaxRequestHandler(context + "/return/unsettled/settlements/" + prId, "GET", function (response) {
            var settlements = typeof response === 'string' ? JSON.parse(response) : response;
            $('#pr-modal-title').text('Settlements for Purchase Return ' + prId);
            $('#pr-modal-body').html(renderSettlementsTable(settlements));
            $('#pr-modal').modal('show');
        });
    });

    $(document).on('click.unsettledpr', '#unsettled-pr-table .settle-toggle', function () {
        var $row = $(this).closest('tr');
            $row.find('.settle-form').show();
        $(this).hide();
    });

    $(document).on('click.unsettledpr', '#unsettled-pr-table .settle-cancel', function () {
        var $row = $(this).closest('tr');
            $row.find('.settled-amount').val('');
            $row.find('.settlement-type').val('CREDIT_NOTE');
            $row.find('.document-number').val('');
            $row.find('.settle-form').hide();
            $row.find('.settle-toggle').show();
    });

    $(document).on('keypress.unsettledpr', '#unsettled-pr-table .settled-amount', function (e) {
        var k = e.which;
        if (k < 48 || k > 57) {
            e.preventDefault();
        }
    });

    $(document).on('click.unsettledpr', '#unsettled-pr-table .settle-confirm', function () {
        var $btn = $(this);
        if ($btn.data('submitting')) {
            return;
        }
            $btn.data('submitting', true);
            $btn.prop('disabled', true).addClass('disabled');

        var $row = $btn.closest('tr');
        var prId = $row.data('pr-id');
        var amount = $row.find('.settled-amount').val();
        var type = $row.find('.settlement-type').val();
        var docNum = $row.find('.document-number').val() || '';
        if (!amount || isNaN(parseInt(amount, 10)) || parseInt(amount, 10) <= 0) {
            alert('Please enter a valid settled amount.');
                $btn.data('submitting', false).prop('disabled', false).removeClass('disabled');
            return;
        }
        var url = context + "/return/unsettled/settle?purchaseReturnId=" + prId
                + "&settlementType=" + encodeURIComponent(type)
                + "&settledAmount=" + encodeURIComponent(amount)
                + "&documentNumber=" + encodeURIComponent(docNum);
        doAjaxRequestHandler(url, "POST", function (response) {
            var ok = (response === 'true' || response === true);
            try {
                var parsed = typeof response === 'string' ? JSON.parse(response) : response;
                if (parsed === true) ok = true;
            } catch (e) { /* ignore */
            }
            if (ok) {
                var table = $('#unsettled-pr-table').DataTable();
                table.row($row).remove().draw(false);
            } else {
                alert('Settlement failed. Please retry.');
                    $btn.data('submitting', false).prop('disabled', false).removeClass('disabled');
            }
        });
    });
</script>