Subversion Repositories SmartDukaan

Rev

Blame | Last modification | View Log | RSS feed

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

    #agreementEsignTable .action-btns {
        display: inline-flex;
        gap: 4px;
        flex-wrap: nowrap;
        align-items: center;
    }
</style>
<section class="wrapper">
    <div class="row">
        <div class="col-lg-12">
            <h3 class="page-header"><i class="icon_document_alt"></i>BUSINESS AGREEMENT E-SIGN</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>Business Agreement E-Sign</li>
            </ol>
        </div>
    </div>

    <div class="col-lg-12">
        <table class="table table-border table-condensed table-bordered" id="agreementEsignTable" 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:center;">Agreement Doc</th>
                <th style="text-align:center;">E-Sign Status</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($verified = $esignDoneIds.contains($obId))
                        #set($esign = $esignMap.get($obId))
                        #set($hasDoc = false)
                        #if($esign && $esign.getAttachment() > 0)#set($hasDoc = true)#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:center;">
                            #if($hasDoc)
                                <button type="button" class="btn btn-info btn-xs esign-view-doc-btn"
                                        data-doc-url="${context}/document/$esign.getAttachment()">
                                    <i class="fa fa-eye"></i> View
                                </button>
                            #else
                                <span class="text-muted" style="font-size:11px;">Not uploaded</span>
                            #end
                        </td>
                        <td style="text-align:center;">
                            #if($verified)
                                <span class="label label-success" style="font-size:11px;">Verified</span>
                            #elseif($hasDoc)
                                <span class="label label-info" style="font-size:11px;">Uploaded</span>
                            #else
                                <span class="label label-warning" style="font-size:11px;">Pending</span>
                            #end
                        </td>
                        <td style="text-align:center;">
                            <div class="action-btns">
                                #if(!$verified)
                                    <button type="button" class="btn btn-primary btn-sm esign-upload-btn"
                                            data-id="$obId" data-partner-name="$!panel.getOutLetName()">
                                        <i class="fa fa-upload"></i> Upload
                                    </button>
                                    #if($isEsignApprover)
                                        <button type="button" class="btn btn-success btn-sm esign-verify-btn"
                                                data-onboarding-id="$obId" data-partner-name="$!panel.getOutLetName()">
                                            <i class="fa fa-check"></i> Verify E-Sign
                                        </button>
                                    #end
                                #else
                                    <span class="text-muted" style="font-size:11px;">&mdash;</span>
                                #end
                            </div>
                        </td>
                    </tr>
                    #end
                #end
            </tbody>
        </table>
    </div>

    <!-- Upload Signed Agreement Modal -->
    <div class="modal fade" id="agreementEsignModal" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Upload Signed Agreement - <span id="esign-modal-partner-name"></span></h4>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="esign-onboarding-id">
                    <input type="hidden" id="esign-attachment-id">
                    <div class="form-group">
                        <label>Signed Agreement (PDF / image):</label>
                        <input type="file" class="form-control" id="esign-attachment-file" required>
                        <p class="help-block" style="font-size:11px;">Upload the partner's signed business agreement, then Gaurav Sharma verifies it.</p>
                    </div>
                </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="esign-upload-submit-btn">
                        <i class="fa fa-paper-plane"></i> Save
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Document View Modal -->
    <div class="modal fade" id="esignDocViewModal" 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">Signed Agreement</h4>
                </div>
                <div class="modal-body" style="text-align:center;">
                    <img id="esign-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">
    $(document).ready(function () {
        if ($.fn.DataTable.isDataTable('#agreementEsignTable')) {
            $('#agreementEsignTable').DataTable().destroy();
        }
        $('#agreementEsignTable').DataTable({
            "scrollX": true,
            "order": [[0, "desc"]],
            "pageLength": 25
        });
    });

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

    // View uploaded document
    $(document).on('click', '.esign-view-doc-btn', function () {
        $('#esign-doc-preview').attr('src', $(this).data('doc-url'));
        $('#esignDocViewModal').modal('show');
    });

    // Open upload modal
    $(document).on('click', '.esign-upload-btn', function () {
        var onboardingId = $(this).data('id');
        var partnerName = $(this).data('partner-name');
        $('#esign-onboarding-id').val(onboardingId);
        $('#esign-modal-partner-name').text(partnerName);
        $('#esign-attachment-id').val('');
        $('#esign-attachment-file').val('');
        $('#agreementEsignModal').modal('show');
    });

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

    // Save uploaded agreement
    $(document).on('click', '#esign-upload-submit-btn', function () {
        var onboardingId = $('#esign-onboarding-id').val();
        var attachment = $('#esign-attachment-id').val();
        if (!attachment || attachment.trim() === '') {
            alert('Please upload the signed agreement file first.');
            return;
        }
        doPostAjaxRequestWithJsonHandler(
                context + "/agreementEsignUpload?onboardingId=" + onboardingId + "&attachment=" + attachment,
                "{}",
                function (response) {
                    alert('Signed agreement uploaded.');
                    $('#agreementEsignModal').modal('hide');
                    $('.modal-backdrop').remove();
                    $('body').removeClass('modal-open');
                    doGetAjaxRequestHandler(context + "/agreementEsignPanel", function (response) {
                        $('#main-content').html(response);
                    });
                }
        );
    });

    // Verify agreement e-sign (Gaurav marks AGREEMENT_ESIGN done -> unblocks PO)
    $(document).on('click', '.esign-verify-btn', function () {
        var onboardingId = $(this).data('onboarding-id');
        var partnerName = $(this).data('partner-name');
        if (confirm("Confirm the business agreement e-sign for " + partnerName + " ?\n\nThis marks the store timeline entry and unblocks PO creation.")) {
            doPutAjaxRequestHandler(
                    context + "/agreementEsignVerify?onboardingId=" + onboardingId,
                    function (response) {
                        alert("Agreement e-sign verified for " + partnerName);
                        $('.modal-backdrop').remove();
                        $('body').removeClass('modal-open');
                        doGetAjaxRequestHandler(context + "/agreementEsignPanel", function (response) {
                            $('#main-content').html(response);
                        });
                    }
            );
        }
    });
</script>