Subversion Repositories SmartDukaan

<link href="https://cdn.datatables.net/fixedcolumns/3.3.0/css/fixedColumns.bootstrap.css" rel="stylesheet"/>

<section class="wrapper">
    <div class="row">
        <div class="col-lg-12">
            <h3 class="page-header"><i class="icon_document_alt"></i>PARTNER ONBOARDING</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>Partner Onboarding</li>
            </ol>
        </div>
    </div>

    ## Filter, Search and New Button (Top)
    <div class="col-lg-12" style="margin-bottom: 15px;">
        <div class="row">
            <div class="col-lg-3">
                <label style="margin-right: 10px;"><strong>Filter:</strong></label>
                <select id="holdFilterSelect" class="form-control" style="width: 150px; display: inline-block;">
                    <option value="pending" #if($holdFilter == "pending") selected #end>Pending</option>
                    <option value="hold" #if($holdFilter == "hold") selected #end>On Hold</option>
                    <option value="all" #if($holdFilter == "all") selected #end>All</option>
                </select>
            </div>
            <div class="col-lg-6">
                <label style="margin-right: 10px;"><strong>Search:</strong></label>
                <input type="text" id="onboardingSearch" class="form-control"
                       style="width: 250px; display: inline-block;"
                       placeholder="Outlet, Phone, Code, City..." value="$!search">
                <button type="button" class="btn btn-primary" id="searchBtn" style="margin-left: 5px;">
                    <i class="fa fa-search"></i> Search
                </button>
                #if($search && $search != "")
                    <button type="button" class="btn btn-default" id="clearSearchBtn" style="margin-left: 5px;">
                        Clear
                    </button>
                #end
            </div>
            <div class="col-lg-3 text-right">
                <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"
                        style="font-size:12px;">New
                </button>
            </div>
        </div>
    </div>

    ## New Onboarding Modal (must be outside hidden div for Bootstrap to work)
    <div id="myModal" class="modal fade" role="dialog">
        <div class="modal-dialog modal-lg">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">NEW ONBOARDING</h4>
                </div>
                <div class="modal-body" style="height: 400px; width: 1050px;">
                    <form>

                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label for="leadId">Lead Id </label>
                                <input type="text" class="form-control leadIdOnboarding" id="leadId"
                                       placeholder="Lead Id">
                            </div>

                        </div>
                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label for="outLetName1">OutLet Name</label>
                                <input type="text" class="form-control" id="outLetName1"
                                       placeholder="OutLet Name">
                            </div>
                            <div class="form-group col-md-6">
                                <label for="number1">Mobile Number</label>
                                <input type="number" class="form-control" id="number1" placeholder="Mobile Number">
                            </div>
                            <div class="form-group col-md-6">
                                <label for="acquireddate1">Acquired Date</label>
                                <input type="date" class="form-control" id="acquireddate1" placeholder="Acquired Date">
                            </div>
                        </div>
                        <div>
                            <div class="form-group col-md-3 ">
                                <select class="form-control input-sm" id="authUserOnboarding" name="authUser"
                                        placeholder="AuthUser">
                                    <option value="" disabled selected>AuthUser</option>
                                    #foreach($authUser in $authUsers)
                                        <option value="$authUser.getId()">$authUser.getName()</option>
                                    #end
                                </select>
                            </div>
                        </div>

                        <div class="text-end form-group col-md-2" style="padding:22px;">
                            <button type="button" class="btn btn-primary" id="newmodal" data-dismiss="modal"
                                    data-backdrop='static' data-keyboard='false'>submit
                            </button>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-12">
        <table class="table table-border table-condensed table-bordered" id="example" style="width:100%">

            <thead class="row htable" style="background:#F5F5F5;">

            <tr style="color:black;">
                <th>Id</th>
                <th>Outlet Name(SM)</th>
                <th>Created On</th>
                <th>Acquired Date()</th>
                <th class="hidden-col">Outlet Name(SM)</th>
                <th>Phone Number(SM)</th>
                <th>Counter Potential</th>
                <th>RBM Name(SM)</th>
                <th>City (SM)</th>
                <th>State Head(SM)</th>
                <th>BDM (SM)</th>
                <th>Agreed Brand fees(SM)</th>
                <th>Received Brand fees(SM)</th>
                <th>Final Brand fees(SM)</th>
                <th>Agreed Wallet(SM)</th>
                <th class="hidden-col">Adv Stock Date(SM)</th>
                <th class="hidden-col">KYC (legal)</th>
                <th>Aadhaar Front(legal)</th>
                <th>Aadhaar Back(legal)</th>
                <th>pan(legal)</th>
                <th>GST(legal)</th>
                <th>Cancel cheque(legal)</th>
                <th>Rent agreement/Owner ship proof(legal)</th>
                <th>LOI(legal)</th>
                <th>Doc Compl</th>
                <th>Code(legal)</th>
                <th class="hidden-col">Recee Planed(Kamini)</th>
                <th class="hidden-col">Recee Actual(Kamini)</th>
                <th class="hidden-col">Designing Planed(Kamini)</th>
                <th>Designing Actual(Kamini)</th>
                <th class="hidden-col">Stock payment(kamini)</th>
                <th class="hidden-col">Expected Date(kamini)</th>
                <th class="hidden-col">Pay Date(Kamini)</th>
                <th>Inaugration(SW)</th>
                <th class="hidden-col">Billing Status(Kamini)</th>
                <th>Verification</th>
                <th>Submit</th>
                <th>OutLet Open</th>
                <th>OutLet Reject</th>
                <th>OutLet Hold</th>
                <th>Notice Issue</th>
                <th>Resend Veri</th>
            </tr>
            </thead>
            <tbody>
                #foreach($pob in $partnerOnBoardingPanel )
                #if($pob.getHoldTimestamp())
                <tr  class="hold-onboarding">
                   #parse("partner-onboarding-row-index.vm")

                </tr>
                #else
                <tr>
                   #parse("partner-onboarding-row-index.vm")

                </tr>
                #end
                #end

            </tbody>

        </table>
    </div>

    ## Pagination Controls (Bottom)
    <div class="col-lg-12" style="margin-top: 15px;">
        <div class="row">
            <div class="col-lg-12 text-center">
                #if($totalRecords > 0)
                    <span class="pagination-info">Showing $startRecord - $endRecord of $totalRecords</span>
                    <ul class="pagination pagination-sm" style="margin: 0 15px; display: inline-flex;">
                        #if($currentPage > 0)
                            <li><a href="javascript:void(0)" class="onboarding-page-link" data-page="0">First</a></li>
                            <li><a href="javascript:void(0)" class="onboarding-page-link" data-page="$prevPage">Prev</a>
                            </li>
                        #else
                            <li class="disabled"><span>First</span></li>
                            <li class="disabled"><span>Prev</span></li>
                        #end

                        <li class="active"><span>Page $currentPageDisplay of $totalPages</span></li>

                        #if($currentPage < $lastPage)
                            <li><a href="javascript:void(0)" class="onboarding-page-link" data-page="$nextPage">Next</a>
                            </li>
                            <li><a href="javascript:void(0)" class="onboarding-page-link" data-page="$lastPage">Last</a>
                            </li>
                        #else
                            <li class="disabled"><span>Next</span></li>
                            <li class="disabled"><span>Last</span></li>
                        #end
                    </ul>
                    <select class="form-control onboarding-page-size" style="width: 120px; display: inline-block;">
                        <option value="10" #if($pageSize==10)selected#end>10 per page</option>
                        <option value="25" #if($pageSize==25)selected#end>25 per page</option>
                        <option value="50" #if($pageSize==50)selected#end>50 per page</option>
                        <option value="100" #if($pageSize==100)selected#end>100 per page</option>
                    </select>
                #end
            </div>
        </div>
    </div>
</section>


<script type="text/javascript">

    $(document).ready(function () {

        // Hold filter change handler - reload via AJAX
        $('#holdFilterSelect').on('change', function () {
            refreshOnboardingList(0);
        });

        // Search button click handler
        $('#searchBtn').on('click', function () {
            refreshOnboardingList(0);
        });

        // Search on Enter key
        $('#onboardingSearch').on('keypress', function (e) {
            if (e.which === 13) {
                refreshOnboardingList(0);
            }
        });

        // Clear search button
        $('#clearSearchBtn').on('click', function () {
            $('#onboardingSearch').val('');
            refreshOnboardingList(0);
        });

        // Pagination link click handler
        $(document).on('click', '.onboarding-page-link', function (e) {
            e.preventDefault();
            refreshOnboardingList($(this).data('page'));
        });

        // Page size change handler
        $(document).on('change', '.onboarding-page-size', function () {
            refreshOnboardingList(0);  // Reset to first page on size change
        });

        // Destroy existing DataTable if it exists (prevents reinitialization error on AJAX reload)
        if ($.fn.DataTable.isDataTable('#example')) {
            $('#example').DataTable().destroy();
        }

      var dtable = $('#example').DataTable({
             "scrollX": true,
            "scrollY": "518px",
            scrollCollapse: true,
          "fixedHeader": true,
          "order": [[0, "desc"]],
          "paging": false,  // Disable client-side pagination (server-side)
          "info": false,    // Hide DataTables info (we show our own)
          fixedColumns: {
              leftColumns: 2
          },

          "columnDefs": [
                   { "targets": 1, "orderDataType":  "date-dd-mmm-yyyy", "type":"string" },
                   { "targets": 2, "orderDataType":  "date-dd-mmm-yyyy", "type":"string" },
                   { "targets": 3, "orderDataType": "date-dd-mmm-yyyy", "type": "string" },
              {"targets": 5, "orderDataType": "dom-text-numeric", "type": "number"},
                   { "targets": 6, "orderDataType": "dom-text", "type": "string" },
              {"targets": 7, "orderDataType": "dom-text", "type": "string"},
              {"targets": 8, "orderDataType": "dom-text", "type": "string"},
              {"targets": 9, "orderDataType": "dom-text", "type": "string"},
                   { "targets": 10, "orderDataType": "dom-text-numeric", "type":"number"},
              {"targets": 11, "orderDataType": "dom-text-numeric", "type": "number"},
                   { "targets": 12, "orderDataType": "date-dd-mmm-yyyy", "type": "string" },
              {"targets": 13, "orderDataType": "dom-text-numeric", "type": "number"},
                   { "targets": 14, "orderDataType": "date-dd-mmm-yyyy", "type": "string" },
              {"targets": 22, "orderDataType": "dom-text", "type": "string"},
                   { "targets": 23, "orderDataType": "dom-text", "type": "string" },
              {"targets": 29, "orderDataType": "date-dd-mmm-yyyy", "type": "string"},
              {"targets": 30, "orderDataType": "date-dd-mmm-yyyy", "type": "string"},
              {"targets": 33, "orderDataType": "dom-text", "type": "string"},
              ## Column hiding is done via CSS class="hidden-col" on <th>/<td> elements.
              ## Do NOT use DataTables visible:false — it removes TDs from DOM,
              ## which breaks td:eq(N) selectors in panel-listing.js double-click and submit handlers.
              {"targets": [4, 15, 16, 26, 27, 28, 30, 31, 32, 34], "className": "hidden-col"}
          ],

      });

        $('#authUserOnboarding').multiselect({
            includeSelectAllOption: true,
            multiple: true,
            maxHeight: 200,
            buttonWidth: '180px',
            numberDisplayed: 1,
            nonSelectedText: 'AuthUsers',
            nSelectedText: ' - AuthUser Selected',
            allSelectedText: 'All AuthUser Selected',
            enableFiltering: true,
            enableCaseInsensitiveFiltering: true
        });

    });

    // Function to refresh onboarding list via AJAX
    function refreshOnboardingList(page) {
        var holdFilter = $('#holdFilterSelect').val() || 'pending';
        var pageSize = $('.onboarding-page-size').val() || '25';
        var search = $('#onboardingSearch').val() || '';

        var url = context + '/partnerOnBoardingPanel?holdFilter=' + encodeURIComponent(holdFilter)
                + '&page=' + (page || 0)
                + '&pageSize=' + pageSize
                + '&search=' + encodeURIComponent(search);

        $.ajax({
            url: url,
            type: 'GET',
            success: function (response) {
                $('#main-content').html(response);
            }
        });
    }
    
    
    
    
    
</script>


<style>
    .hold-onboarding td {
        background-color: crimson !important;
    }

    /* Hide columns */
    .hidden-col {
        display: none !important;
    }

    td.hidden-col {
        display: none !important;
}

    /* Pagination styling */
    .pagination-info {
        margin-right: 15px;
        font-weight: bold;
    }

    .pagination {
        margin: 0;
    }

    .pagination li {
        display: inline-block;
        margin: 0 2px;
    }

    .pagination li a, .pagination li span {
        padding: 5px 10px;
        border: 1px solid #ddd;
        text-decoration: none;
        color: #333;
    }

    .pagination li.active span {
        background-color: #337ab7;
        color: white;
        border-color: #337ab7;
    }

    .pagination li.disabled span {
        color: #999;
        cursor: not-allowed;
    }
</style>