Subversion Repositories SmartDukaan

<script type="text/javascript">

    $(document).ready(function () {

        $('#trial-users').DataTable({

                    "bPaginate": true,
                    "bLengthChange": true,
                    "bFilter": true,
                    "bInfo": false,
                    "bAutoWidth": false,
                    "scrollX": true,

                }
        );
    });
</script>

<style>


    img:target {
        border: 5px solid red;
    }

    .lightbox {
        /* Default to hidden */
        display: none;

        /* Overlay entire screen */
        position: fixed;
        z-index: 999;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;

        /* A bit of padding around image */
        padding: 1em;

        /* Translucent background */
        background: rgba(0, 0, 0, 0.8);
    }

    /* Unhide the lightbox when it's the target */
    .lightbox:target {
        display: block;
    }

    .lightbox span {
        /* Full width and height */
        display: block;
        width: 100%;
        height: 100%;

        /* Size and position background image */
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
    }


</style>
<section class="wrapper">
    <div class="row">
        <div class="col-lg-12">
            <h3 class="page-header"><i class="icon_document_alt"></i>Trial Detail</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>Pending Trial User Detail</li>
            </ol>
        </div>
    </div>


    <div class="row">
        <div class="col-lg-12">
            <table class="table table-border table-condensed table-bordered" id="trial-users">
                <thead>
                <tr>
                    <th>Outlet Name</th>
                    <th>Email</th>
                    <th>Mobile</th>
                    <th>Name</th>
                    <th>City</th>
                    <th>State</th>
                    <th>Address</th>
                    <th>Pin Code</th>
                    <th>Pan Document</th>
                    <th>Aadhaar Document</th>
                    <th>Action</th>
                </tr>
                </thead>
                <tbody>
                    #if($trialForms.size() > 0)
                        #foreach( $trialForm in $trialForms )
                        <tr data-id="$trialForm.getId()">
                            <td>$trialForm.getBusinessName()</td>
                            <td>$trialForm.getEmail()</td>
                            <td>$trialForm.getMobile()</td>
                            <td>$trialForm.getFirstName() $trialForm.getLastName()</td>
                            <td>$trialForm.getCity()</td>
                            <td>$trialForm.getState()</td>
                            <td>$trialForm.getAddressLine1() $trialForm.getAddressLine2()</td>
                            <td>$trialForm.getPincode()</td>
                            <td>
                                <a href="#pan-id$trialForm.getId()">
                                    <img src="${rc.contextPath}/download-attachment?documentId=$trialForm.getPanDocumentId()"
                                         width="100">
                                </a>
                                <a href="#" class="lightbox" id="pan-id$trialForm.getId()">
                                    <span style="background-image:url('${rc.contextPath}/download-attachment?documentId=$trialForm.getPanDocumentId()')"></span>
                                </a>
                            </td>
                            <td>
                                <a href="#aadhaar-id$trialForm.getId()">
                                    <img src="${rc.contextPath}/download-attachment?documentId=$trialForm.getAadhaarDocumentId()"
                                         width="100">
                                </a>
                                <a href="#" class="lightbox" id="aadhaar-id$trialForm.getId()">
                                    <span style="background-image:url('${rc.contextPath}/download-attachment?documentId=$trialForm.getAadhaarDocumentId()')"></span>
                                </a>
                            </td>

                            <td class="text-center">
                                <button class="btn btn-success btn-xs openBrandModal"
                                        style="margin-bottom: 5px;margin-right: 5px;" data-id="$trialForm.getId()"
                                        data-toggle="modal"
                                        data-target="#brandPotentialModal">
                                    <i class="fa fa-check-circle"></i> Verify
                                </button>
                                <button class="btn btn-danger btn-xs mk_cancel mk_trial_cancel">
                                    <i class="fa fa-times-circle"></i> Cancel Trial
                                </button>
                            </td>

                        </tr>
                        #end
                    #else
                    <tr>
                        <td colspan="12" style="text-align:center;">NO MATCHING DATA FOUND FOR CRITERIA</td>
                    </tr>
                    #end
                </tbody>
            </table>
        </div>
    </div>


    <div id="fetchLeadActivityData" class="modal" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content"></div>
        </div>
    </div>
</section>

<div class="modal fade" id="brandPotentialModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">

            <!-- Modal Header -->
            <div class="modal-header bg-dark text-white">
                <h5 class="modal-title">Brand Potential Verification</h5>
                <button type="button" class="close text-white" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>

            <!-- Modal Body -->
            <div class="modal-body">

                <form id="brandPotentialForm" onsubmit="event.preventDefault(); saveBrandPotential();">

                    <input type="hidden" name="trialFormId" value=""/>

                    <table class="table table-bordered align-middle">
                        <thead class="table-light">
                        <tr>
                            <th>Brand</th>
                            <th>Potential</th>
                            <th style="width: 50px;">Add</th>
                        </tr>
                        </thead>

                        <tbody id="brandPotentialRows">
                        <tr>
                            <td>
                                <input type="text" name="brand_1" class="form-control" placeholder="Brand Name"/>
                            </td>
                            <td>
                                <input type="number" name="potential_1" class="form-control"
                                       placeholder="Enter Potential"/>
                            </td>
                            <td class="text-center">
                                <button type="button" class="btn btn-sm btn-danger" onclick="addRow()">+</button>
                            </td>
                        </tr>
                        </tbody>

                    </table>

                    <button type="submit" class="btn w-100 mt-3" style="background:#d93025;color:white;">
                        Save & Verify
                    </button>

                </form>

            </div>

        </div>
    </div>
</div>


<script>
    let rowCount = 1;

    function addRow() {
        rowCount++;

        const tbody = document.getElementById("brandPotentialRows");

        const newRow = document.createElement("tr");
        newRow.innerHTML = `
            <td>
                <input type="text" name="brand_${rowCount}" class="form-control" placeholder="Brand Name" />
            </td>
            <td>
                <input type="number" name="potential_${rowCount}" class="form-control"  placeholder="Enter Potential" />
            </td>
            <td class="text-center">
                <button type="button" class="btn btn-sm btn-danger" onclick="addRow()">+</button>
            </td>
        `;

        tbody.appendChild(newRow);
    }
</script>