Subversion Repositories SmartDukaan

<style>
    #fullStockPaymentTable td {
        vertical-align: middle !important;
    }

    #fullStockPaymentTable .action-btns {
        display: inline-flex;
        gap: 4px;
        flex-wrap: nowrap;
        align-items: center;
    }

    .fsp-past-entries-table {
        margin-bottom: 15px;
    }

    .fsp-past-entries-table th {
        background: #f5f5f5;
        font-size: 12px;
    }

    .fsp-past-entries-table td {
        font-size: 12px;
    }
</style>
<section class="wrapper">
    <div class="row">
        <div class="col-lg-12">
            <h3 class="page-header"><i class="icon_document_alt"></i>FULL STOCK PAYMENT</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>Full Stock Payment</li>
            </ol>
        </div>
    </div>

    <div class="col-lg-12">
        <table class="table table-border table-condensed table-bordered" id="fullStockPaymentTable" style="width:100%">
            <thead class="row htable" style="background:#F5F5F5;">
            <tr style="color:black;">
                <th>ID</th>
                <th>Partner Name</th>
                <th>Code</th>
                <th>City</th>
                <th>RBM</th>
                <th style="text-align:right;">Total Approved</th>
                <th style="text-align:center;">Entries</th>
                <th style="text-align:center;">Action</th>
            </tr>
            </thead>
            <tbody>
                #foreach($st in $eligibleTimelines)
                    #set($obId = $st.getOnboardingId())
                    #set($panel = $panelMap.get($obId))
                    #if($panel)
                        #set($payments = $paymentsByOnboardingId.get($obId))
                        #set($approvedAmt = 0)
                        #if($approvedFspAmountByOnboardingId.get($obId))
                            #set($approvedAmt = $approvedFspAmountByOnboardingId.get($obId))
                        #end
                        ## Count entries by status
                        #set($pendingCount = 0)
                        #set($approvedCount = 0)
                        #set($rejectedCount = 0)
                        #if($payments && $payments.size() > 0)
                            #foreach($p in $payments)
                                #if($p.getPaymentStatus() == $PENDING)
                                    #set($pendingCount = $pendingCount + 1)
                                #elseif($p.getPaymentStatus() == $APPROVED)
                                    #set($approvedCount = $approvedCount + 1)
                                #elseif($p.getPaymentStatus() == $REJECTED)
                                    #set($rejectedCount = $rejectedCount + 1)
                                #end
                            #end
                        #end
                    <tr>
                        <td>$obId</td>
                        <td>$!panel.getOutLetName()</td>
                        <td>$!panel.getCode()</td>
                        <td>$!panel.getCity()</td>
                        <td>
                            #if($panel.getAuthId() != 0 && $authUseMap.get($panel.getAuthId()))
                            $authUseMap.get($panel.getAuthId()).getName()
                        #end
                        </td>
                        <td style="text-align:right; font-weight:bold;">
                            #if($approvedAmt > 0)
                                $approvedAmt
                            #else
                                -
                            #end
                        </td>
                        <td style="text-align:center;">
                            #if($payments && $payments.size() > 0)
                                #if($approvedCount > 0)
                                    <span class="label label-success"
                                          style="font-size:11px;">$approvedCount Approved</span>
                                #end
                                #if($pendingCount > 0)
                                    <span class="label label-warning"
                                          style="font-size:11px;">$pendingCount Pending</span>
                                #end
                                #if($rejectedCount > 0)
                                    <span class="label label-danger"
                                          style="font-size:11px;">$rejectedCount Rejected</span>
                                #end
                            #else
                                <span class="label label-default" style="font-size:11px;">No Entries</span>
                            #end
                        </td>
                        <td style="text-align:center;">
                            <div class="action-btns">
                                ## View button for everyone to see entry history
                                #if($payments && $payments.size() > 0)
                                    <button type="button" class="btn btn-info btn-sm fsp-view-entries-btn"
                                            data-id="$obId" data-partner-name="$!panel.getOutLetName()">
                                        <i class="fa fa-eye"></i> View
                                    </button>
                                #end
                                ## Upload button always available for non-approvers
                                #if(!$isApprover)
                                    <button type="button" class="btn btn-primary btn-sm fsp-upload-btn"
                                            data-id="$obId" data-partner-name="$!panel.getOutLetName()">
                                        <i class="fa fa-upload"></i> Upload
                                    </button>
                                #end
                                ## Manual Accept button for approvers (any amount, as long as at least one FSP entry is wallet-approved)
                                #if($isApprover && $approvedAmt >= 1)
                                    <button type="button" class="btn btn-success btn-sm fsp-manual-accept-btn"
                                            data-onboarding-id="$obId" data-partner-name="$!panel.getOutLetName()">
                                        <i class="fa fa-check"></i> Accept
                                    </button>
                                #end
                            </div>
                        </td>
                    </tr>
                    #end
                #end
            </tbody>
        </table>
    </div>

    <!-- Upload Payment Modal -->
    <div class="modal fade" id="fullStockPaymentModal" role="dialog">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Full Stock Payment - <span id="fsp-modal-partner-name"></span></h4>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="fsp-onboarding-id">

                    <!-- Past Entries Section -->
                    <div id="fsp-past-entries-section">
                        <h5 style="font-weight:bold; margin-bottom:10px;">Past Entries</h5>
                        <div id="fsp-past-entries-container">
                            <p class="text-muted">Loading...</p>
                        </div>
                        <hr>
                    </div>

                    <!-- Upload Form -->
                    <h5 style="font-weight:bold; margin-bottom:10px;">New Payment Entry</h5>
                    <form name="fullStockPaymentForm" id="fullStockPaymentForm" method="post">
                        <div class="row">
                            <div class="col-lg-3 col-md-3 col-sm-6">
                                <div class="form-group">
                                    <label>Amount:</label>
                                    <input type="number" name="collectedAmount" class="form-control"
                                           placeholder="Enter amount" required>
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-3 col-sm-6">
                                <div class="form-group">
                                    <label>Payment Mode:</label>
                                    <select class="form-control" name="paymentMode" required>
                                        <option value="" selected disabled>Select mode</option>
                                        <option value="UPI">UPI</option>
                                        <option value="Cheque">Cheque</option>
                                        <option value="IMPS">IMPS</option>
                                        <option value="NEFT">NEFT</option>
                                        <option value="RTGS">RTGS</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-3 col-sm-6">
                                <div class="form-group">
                                    <label>Reference No:</label>
                                    <input type="text" name="paymentReferenceNo" class="form-control"
                                           placeholder="Enter reference no" required>
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-3 col-sm-6">
                                <div class="form-group">
                                    <label>Bank Name:</label>
                                    <select class="form-control" name="bankName" required>
                                        <option value="" selected disabled>Select bank</option>
                                        <option value="HDFC Bank Limited">HDFC Bank Limited</option>
                                        <option value="ICICI Bank Ltd">ICICI Bank Ltd</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-3 col-md-3 col-sm-6">
                                <div class="form-group">
                                    <label>Reference Date:</label>
                                    <input type="date" name="referenceDate" class="form-control" required>
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-3 col-sm-6">
                                <div class="form-group">
                                    <label>Attachment:</label>
                                    <input type="hidden" id="fsp-attachment-id" name="attachment">
                                    <input type="file" class="form-control" id="fsp-attachment-file" required>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="fsp-submit-btn">
                        <i class="fa fa-paper-plane"></i> Submit Payment
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- View Entries Modal (read-only history) -->
    <div class="modal fade" id="fspViewEntriesModal" role="dialog">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Payment History - <span id="fsp-view-partner-name"></span></h4>
                </div>
                <div class="modal-body">
                    <div id="fsp-view-entries-container">
                        <p class="text-muted">Loading...</p>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Document View Modal -->
    <div class="modal fade" id="fspDocViewModal" role="dialog">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Payment Proof</h4>
                </div>
                <div class="modal-body" style="text-align:center;">
                    <img id="fsp-doc-preview" src="" style="max-width:100%; max-height:500px;">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

</section>

<script type="text/javascript">
    // Build past entries data from server-side
    var fspPastEntries = {};
        #foreach($st in $eligibleTimelines)
            #set($obId = $st.getOnboardingId())
            #set($payments = $paymentsByOnboardingId.get($obId))
            #if($payments && $payments.size() > 0)
            fspPastEntries[$obId] = [
                #foreach($p in $payments)
                    {
                        id: $p.getId(),
                        amount: $p.getCollectedAmount(),
                        mode: '$!p.getPaymentMode()',
                        refNo: '$!p.getPaymentReferenceNo()',
                        bank: '$!p.getBankName()',
                        refDate: '$!p.getReferenceDate()',
                        status: '$p.getPaymentStatus()',
                        attachment: $p.getAttachment(),
                        submitDate: '$!p.getSubmitTimestamp()'
                    }#if($foreach.hasNext),#end
                #end
            ];
            #end
        #end

    $(document).ready(function () {
        if ($.fn.DataTable.isDataTable('#fullStockPaymentTable')) {
            $('#fullStockPaymentTable').DataTable().destroy();
        }
        $('#fullStockPaymentTable').DataTable({
            "scrollX": true,
            "order": [[0, "desc"]],
            "pageLength": 25
        });
    });

    // Unbind previous handlers to prevent duplicates on AJAX reload
    $(document).off('click', '.fsp-view-doc-btn');
    $(document).off('click', '.fsp-view-entries-btn');
    $(document).off('click', '.fsp-upload-btn');
    $(document).off('input', '#fsp-attachment-file');
    $(document).off('click', '#fsp-submit-btn');
    $(document).off('click', '.fsp-manual-accept-btn');

    // Build entries table HTML (reusable)
    function buildEntriesTableHtml(entries) {
        if (!entries || entries.length === 0) {
            return '<p class="text-muted">No entries found</p>';
        }
        var html = '<table class="table table-bordered table-condensed fsp-past-entries-table">';
        html += '<thead><tr><th>Amount</th><th>Mode</th><th>Ref No</th><th>Bank</th><th>Ref Date</th><th>Status</th><th>Doc</th></tr></thead>';
        html += '<tbody>';
        for (var i = 0; i < entries.length; i++) {
            var e = entries[i];
            var statusLabel = '';
            if (e.status === 'PENDING') {
                statusLabel = '<span class="label label-warning">PENDING</span>';
            } else if (e.status === 'APPROVED') {
                statusLabel = '<span class="label label-success">APPROVED</span>';
            } else if (e.status === 'REJECTED') {
                statusLabel = '<span class="label label-danger">REJECTED</span>';
            }
            var docLink = e.attachment > 0
                    ? '<button type="button" class="btn btn-info btn-xs fsp-view-doc-btn" data-doc-url="' + context + '/document/' + e.attachment + '"><i class="fa fa-eye"></i></button>'
                    : '-';
            html += '<tr><td>' + e.amount + '</td><td>' + e.mode + '</td><td>' + e.refNo + '</td><td>' + e.bank + '</td><td>' + e.refDate + '</td><td>' + statusLabel + '</td><td>' + docLink + '</td></tr>';
        }
        html += '</tbody></table>';
        return html;
    }

    // View document in modal
    $(document).on('click', '.fsp-view-doc-btn', function () {
        var docUrl = $(this).data('doc-url');
        $('#fsp-doc-preview').attr('src', docUrl);
        $('#fspDocViewModal').modal('show');
    });

    // View entries history (read-only, for everyone)
    $(document).on('click', '.fsp-view-entries-btn', function () {
        var onboardingId = $(this).data('id');
        var partnerName = $(this).data('partner-name');
        $('#fsp-view-partner-name').text(partnerName);
        var entries = fspPastEntries[onboardingId] || [];
        $('#fsp-view-entries-container').html(buildEntriesTableHtml(entries));
        $('#fspViewEntriesModal').modal('show');
    });

    // Set onboarding ID and show past entries when upload modal opens
    $(document).on('click', '.fsp-upload-btn', function () {
        var onboardingId = $(this).data('id');
        var partnerName = $(this).data('partner-name');
        $('#fsp-onboarding-id').val(onboardingId);
        $('#fsp-modal-partner-name').text(partnerName);
        // Reset form
        $('#fullStockPaymentForm')[0].reset();
        $('#fsp-attachment-id').val('');

        // Populate past entries
        var entries = fspPastEntries[onboardingId] || [];
        $('#fsp-past-entries-container').html(buildEntriesTableHtml(entries));

        // Show modal
        $('#fullStockPaymentModal').modal('show');
    });

    // File upload handler
    $(document).on('input', '#fsp-attachment-file', function () {
        if (confirm('Confirm file upload ?')) {
            var file = this.files[0];
            uploadDocument(file, function (documentId) {
                $('#fsp-attachment-id').val(documentId);
            });
        }
    });

    // Submit payment
    $(document).on('click', '#fsp-submit-btn', function () {
        var formData = objectifyForm($("form[name='fullStockPaymentForm']").serializeArray());
        var onboardingId = $('#fsp-onboarding-id').val();

        // Validate
        if (!formData.collectedAmount || formData.collectedAmount.trim() === '') {
            alert("Amount is required!");
            return;
        }
        if (!formData.paymentMode || formData.paymentMode === 'Select mode') {
            alert("Payment mode is required!");
            return;
        }
        if (!formData.paymentReferenceNo || formData.paymentReferenceNo.trim() === '') {
            alert("Reference number is required!");
            return;
        }
        if (!formData.bankName || formData.bankName === 'Select bank') {
            alert("Bank name is required!");
            return;
        }
        if (!formData.referenceDate || formData.referenceDate.trim() === '') {
            alert("Reference date is required!");
            return;
        }
        if (!formData.attachment || formData.attachment.trim() === '') {
            alert("Please upload payment proof!");
            return;
        }

        var jsonData = JSON.stringify(formData);

        if (confirm("Are you sure you want to submit this payment?")) {
            doPostAjaxRequestWithJsonHandler(
                    context + "/fullStockPaymentSubmit?onboardingId=" + onboardingId,
                    jsonData,
                    function (response) {
                        alert("Payment submitted successfully!");
                        // Close modal and remove backdrop before replacing content
                        $('#fullStockPaymentModal').modal('hide');
                        $('.modal-backdrop').remove();
                        $('body').removeClass('modal-open');
                        // Reload panel
                        doGetAjaxRequestHandler(context + "/fullStockPaymentPanel", function (response) {
                            $('#main-content').html(response);
                        });
                    }
            );
        }
    });

    // Manual Accept (Kamini marks FULL_STOCK_PAYMENT done)
    $(document).on('click', '.fsp-manual-accept-btn', function () {
        var onboardingId = $(this).data('onboarding-id');
        var partnerName = $(this).data('partner-name');
        if (confirm("Are you sure you want to mark FULL STOCK PAYMENT as complete for " + partnerName + "?\n\nThis will mark the store timeline entry.")) {
            doPutAjaxRequestHandler(
                    context + "/fullStockPaymentManualAccept?onboardingId=" + onboardingId,
                    function (response) {
                        alert("Full Stock Payment marked as complete for " + partnerName);
                        $('.modal-backdrop').remove();
                        $('body').removeClass('modal-open');
                        doGetAjaxRequestHandler(context + "/fullStockPaymentPanel", function (response) {
                            $('#main-content').html(response);
                        });
                    }
            );
        }
    });
</script>