Subversion Repositories SmartDukaan

Rev

Rev 35336 | Blame | Compare with Previous | Last modification | View Log | RSS feed

<style>
    .border-red {
        border: 1px solid red;
    }

    .border-green {
        border: 1px solid green;
    }

    .hide-textarea {
        display: none
    }

    .show-textarea {
        display: block
    }

    .hide-model {
        display: none
    }

    .show-model {
        display: block
    }

    .form-control {
        border-radius: 8px; /* Adjust the value for more or less rounding */
        border: 1px solid #ccc; /* Optional: Add a border */
    }

</style>
<section class="wrapper">
    <div class="row">
        <div class="col-lg-12">
            ##            Header - LOI FORM
            <h3 class="page-header" style="text-align: center ;color:green">loi form</h3>
            <ol class="breadcrumb">
                <li><i class="fa fa-home"></i><a href="${rc.contextPath}/dashboard"></a></li>
                <li><i class="icon_document_alt"></i>LOI Form</li>
            </ol>
        </div>
    </div>

    <div class="col-md-12">
        ##        bg-success p-2 text-dark bg-opacity-10 - This is 10% opacity success background , colour - green
        <div class="container bg-success p-2 text-dark bg-opacity-10" style="border-radius: 25px">
            <form name="loi-form" id="loi-form" method="post" style="margin-top:40px;">
                <div class="row">
                    <div class="col-lg-3 form-group">
                        <label>Refer By(BGC Team)</label><span style="color:red ;font-size: 140%">*</span>
                        <select class="form-control type" name="referId" required>

                            <option selected disabled>
                                Select BGC
                            </option>
                            <option value="0">NA</option>
                            #foreach($authUsers in $authUsersList)
                                <option value=$authUsers.getId()>$authUsers.getFullName() </option>
                            #end
                        </select>

                    </div>
                    <div class="col-lg-3 form-group">
                        <label>State Head</label><span style="color:red ;font-size: 140%">*</span>
                        <select class="form-control type" name="stateHead" required>

                            <option selected disabled>
                                Select State Head
                            </option>
                            <option value="0">NA</option>
                            #foreach($stateHead in $stateHeadList)
                                <option value=$stateHead.getId()>$stateHead.getFullName() </option>
                            #end
                        </select>

                    </div>
                    <div class="col-lg-3 form-group">
                        <label>BDM</label>
                        <span style="color:red ;font-size: 140%">*</span>
                        <select class="form-control type" name="bdm" required>
                            <option selected disabled>
                                Select BDM
                            </option>
                            <option value="0">NA</option>
                            #foreach($bdm in $bdmList)
                                <option value=$bdm.getId()>$bdm.getFullName() </option>
                            #end
                        </select>

                    </div>
                </div>
                <div>
                    <h4>Personal Details</h4>
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <!-- Owner Name -->
                        <div class="form-group">
                            <label>First Name </label><span
                                style="color:red ;font-size: 140%">*</span>
                            <input type="text" class="form-control" required name="firstName"
                                   placeholder="Enter first name">

                        </div>
                    </div>
                    <div class="col-md-4">
                        <!-- Owner Name -->
                        <div class="form-group">
                            <label>Last Name </label><span
                                style="color:red ;font-size: 140%">*</span>
                            <input type="text" class="form-control" required name="lastName"
                                   placeholder="Enter last name">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <!-- Mobile No -->
                        <div class="form-group">
                            <label>Mobile No. </label><span
                                style="color:red ;font-size: 140%">*</span>

                            <input type="tel" class="form-control" required name="mobile"
                                   placeholder="10-digit Mobile"
                                   maxlength="10"
                                   minlength="10"
                                   pattern="[0-9]"
                                   pla
                                   value="">

                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <!-- Landline No -->
                        <div class="form-group">
                            <label>Alternative Mobile No.</label>
                            <input type="tel" class="form-control" name="landline"
                                   maxlength="10"
                                   minlength="10"
                                   pattern="[0-9]"
                                   placeholder="Enter Alternative mobile"
                                   value="">


                        </div>
                    </div>
                    <div class="col-lg-4"><!-- Email ID -->
                        <div class="form-group">
                            <label>Email ID </label>
                            <span
                                    style="color:red ;font-size: 140%">*</span>

                            <input type="email" class="form-control" required name="email" placeholder="Enter Email"
                                   value="">

                        </div>
                    </div>
                    <div class="col-lg-4"> <!-- DOB -->
                        <div class="form-group">
                            <label>DOB </label>
                            <span
                                    style="color:red ;font-size: 140%">*</span>

                            <input type="date" class="form-control" required name="dob" placeholder="Enter DOB">

                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-3"> <!-- PAN No-->
                        <div class="form-group">
                            <label>PAN No</label><span
                                style="color:red ;font-size: 140%">*</span>
                            <input type="text" class="form-control" required name="panNo" placeholder="enter Pan No"
                                   minlength="10"
                                   maxlength="10">


                        </div>
                    </div>
                    <div class="col-lg-3"> <!-- Aadhar No-->
                        <div class="form-group">
                            <label>Aadhar No</label><span
                                style="color:red ;font-size: 140%">*</span>
                            <input type="tel" class="form-control" required name="adharNo"
                                   placeholder="Adhar Number"
                                   maxlength="12"
                                   minlength="12"
                                   pattern="[0-9]{12}">

                        </div>
                    </div>
                    <div class="col-lg-3"><!-- ANNIV DT- -->
                        <div class="form-group">
                            <label>Marital Status</label>
                            <span
                                    style="color:red ;font-size: 140%">*</span>
                            <select class="form-control" name="maritalStatus"
                                    placeholder="Marital Status" required id="maritalStatus">
                                <option disabled selected>Select Marital Status</option>
                                <option value="0">Single</option>
                                <option value="1">Married</option>
                            </select>
                        </div>
                    </div>
                    <div class="loiAnniversaryDate hide-model">
                        <div class="col-lg-3"><!-- ANNIV DT- -->
                            <div class="form-group">
                                <label>Anniversary Date </label>
                                <span
                                        style="color:red ;font-size: 140%">*</span>

                                <input type="date" class="form-control" name="anniversaryDate"
                                       placeholder="Enter Anniversary date" value=" ">

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


                </div>

                <h4>Business Detail</h4>
                <!-- GST No-->
                <div class="row">
                    <div class="col-lg-3 form-group">
                        <label>Business type</label><span
                            style="color:red ;font-size: 140%">*</span>

                        <select class="form-control" name="businessType"
                                placeholder="Business type" required>
                            <option value="$businessTypes.get(0)" selected>$businessTypes.get(0)</option>
                            #foreach($businessType in $businessTypes)
                                <option value=$businessType>$businessType</option>
                            #end
                        </select>

                    </div>
                    <!--Acquired Date-->
                    <div class="col-lg-3 form-group">
                        <label>Acquired Date</label><span
                            style="color:red ;font-size: 140%">*</span>
                        <input type="date" name="acquiredDate" class="form-control">

                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-6">
                        <div class="form-group">
                            <label>GST No </label>
                            <span
                                    style="color:red ;font-size: 140%">*</span>

                            <input
                                    type="text"
                                    class="form-control gstNo"
                                    id="gstValidate"
                                    required
                                    name="gstNo"
                                    placeholder="Enter GST Reg No."
                                    minlength="15"
                                    maxlength="15" value="">
                        </div>
                    </div>


                    <div class="col-lg-6">
                        <div class="form-group">
                            <label for="gstName">Company Name:</label>
                            <span
                                    style="color:red ;font-size: 140%">*</span>

                            <input type="text" class="form-control" id="CompanyName" name="companyName" required
                                   value="" placeholder="Company Name">
                        </div>
                    </div>
                </div>
                <!-- GST Address -->
                <div class="row">
                    <div class="col-lg-3">
                        <label class="bold-details">PIN CODE</lebel>

                        <input
                                placeholder="Pin Code" id="gstPinCode"
                                name="gstPin" value=""
                                class="form-control input-sm">

                    </div>

                    <div class="col-lg-3">
                        <div class="form-group">
                            <label for="gstState">State</label>

                            <input placeholder="State"
                                   id="gstState" name="gstState"
                                   value="" class="form-control input-sm"
                                   style="font-weight: bold;">

                        </div>
                    </div>

                    <div class="col-lg-3">
                        <div class="form-group">
                            <label>City :</label>
                            <input placeholder="State"
                                   id="gstCity" name="gstCity"
                                   value="" class="form-control input-sm"
                                   style="font-weight: bold;">

                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="form-group">
                            <label for="gstDistrict">District :</label>

                            <input placeholder="District" id="gstDistrict" name="gstDistrict"
                                   class="form-control input-sm"
                                   value="">

                        </div>
                    </div>
                </div>
                <div><h4>Addition Place of Business</h4></div>
                <div class="row" id="autoAddress">
                    <div class="col-lg-6">
                        <div class="form-group">
                            <label>Select Address</label>
                            <span style="color:red ;font-size: 140%">*</span>
                            <div id="addlist"></div>
                        </div>
                    </div>
                </div>
                <div class="row" id="manualAddress">
                </div>
                <div><h4>Bank Details :</h4></div>
                <div class="row">
                    <!-- Bank name-->
                    <div class="col-lg-4">
                        <div class="form-group">
                            <label>Bank name :</label><span
                                style="color:red ;font-size: 140%">*</span>

                            <input type="text" class="form-control" required name="bankName" placeholder="Bank Name"
                                   value="">
                        </div>
                    </div>

                    <!-- IFSC Code-->
                    <div class="col-lg-4">
                        <div class="form-group">
                            <label>IFSC Code :</label><span
                                style="color:red ;font-size: 140%">*</span>
                            <input type="text" class="form-control" required name="ifscCode" placeholder="IFSC Code"
                                   value="">

                        </div>
                    </div>

                    <!-- Account No.-->
                    <div class="col-lg-4">
                        <div class="form-group">
                            <label>Account No :</label><span
                                style="color:red ;font-size: 140%">*</span>
                            <input type="number" class="form-control" required name="accountNo"
                                   placeholder="Account Number" value="">
                        </div>
                    </div>
                </div>
                <!-- Agreed Minimum Wallet value (INR) -->
                <div><h4>Store Details </h4></div>
                <div class="row">
                    <div class="col-lg-3">
                        <div class="form-group" style="text-align: left;">
                            <label>Minimum Wallet value :</label><span
                                style="color:red ;font-size: 140%">*</span>

                            <select class="form-control" name="agreeWalletValue" required>
                                <option value="600000">600000</option>
                                <option value="700000">700000</option>
                                <option value="800000">800000</option>
                                <option value="900000">900000</option>
                                <option value="1000000">1000000</option>
                                <option value="1100000">1100000</option>
                                <option value="1200000">1200000</option>
                                <option value="1500000">1500000</option>
                                <option value="2000000">2000000</option>
                                <option value="2500000">2500000</option>
                                <option value="3000000">3000000</option>
                            </select>
                        </div>

                    </div>
                    <!-- Store area (sq ft) -->
                    <div class="col-lg-3">
                        <div class="form-group">
                            <label>Store area </label><span
                                style="color:red ;font-size: 140%">*</span>
                            <input type="number" class="form-control" id="storeArea" required
                                   name="storeArea" placeholder="in square feet" value="">

                        </div>
                    </div>
                    <div class="col-lg-3">
                        <!-- Store Potential -->
                        <div class="form-group">
                            <label>Store Potential</label><span
                                style="color:red ;font-size: 140%">*</span>
                            <input type="number" class="form-control" required name="storePotential"
                                   min="400000" id="storePotential"
                                   placeholder="Store Potential" value="">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12">
                        <h4>Finance Codes</h4>
                    </div>
                    #foreach($finOption in $paperFinanceOptions)
                        <div class="col-lg-3">
                            <div class="form-group">
                                <label>$finOption.getName()</label>
                                <input type="text" class="form-control finance-code-input"
                                       data-payment-option-id="$finOption.getId()"
                                       name="finCode_$finOption.getId()"
                                       placeholder="Finance code" value="">
                            </div>
                        </div>
                    #end
                </div>
                <h4>Brand Commitment (Qty)</h4>
                <div id="loiBrandCommitment form-contro" class="row">
                    #foreach($brandCommit in $brandCommits)
                        <div class="col-lg-3">
                            <div class="form-group">
                                <label>$brandCommit.getBrand() (Qty)</label><span
                                    style="color:red ;font-size: 140%">*</span>
                                <input type="number" class="form-control brand-commitment" required
                                       name="$brandCommit.getBrand()" min="0" max="1000" placeholder="0" value="">
                            </div>
                        </div>
                    #end
                    <div>
                        <div class="col-lg-3">
                            <div class="form-group">
                                <label>Accessories (Qty)</label><span
                                    style="color:red ;font-size: 140%">*</span>
                                <input type="number" class="form-control brand-commitment" required
                                       name="Accessories" min="0" max="1000" placeholder="0" value="">
                            </div>
                        </div>
                        <div class="col-lg-3">
                            <div class="form-group">
                                <label>Other (Qty)</label><span
                                    style="color:red ;font-size: 140%">*</span>
                                <input type="number" class="form-control brand-commitment" required
                                       name="Other" min="0" max="1000" placeholder="0" value="">
                            </div>
                        </div>
                        <div class="col-lg-3">
                            <div class="form-group">
                                <label>Total Qty</label>
                                <span style="font-size: 140%"></span>
                                <input type="number" class="form-control " name="totaCommitmentAmount" id="totalAmount"
                                       readonly required
                                       placeholder="Total Qty" value="">
                            </div>
                        </div>
                    </div>
                    <div id="lessCommitReasonSection" style="display: none;">
                        <div class="col-lg-12">
                            <div class="form-group">
                                <label>Reason for Less Commitment</label><span
                                    style="color:red ;font-size: 140%">*</span>
                                <textarea class="form-control" name="lessCommitReason" rows="2"
                                          placeholder="Please provide reason for commitment below 70% of store potential"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
                ##                Agreed Brand fees (INR)
                <div class="row">
                    <div class="col-lg-4">
                        <div class="form-group">
                            <label>Agreed Brand fees</label><span
                                style="color:red ;font-size: 140%">*</span>
                            <select name="agreedBrandFees" class="form-control">
                                <option selected disabled>Select Brand Fee</option>
                                #foreach($storeTypeFeePair in $storeTypeFeePairs)
                                    #set($storeType1 =$storeTypeFeePair.getKey())
                                    #set($brandFee = $storeTypeFeePair.getValue())
                                    #if($brandFee.getFeeByStoreType($storeType1)>0)
                                        <option value="$storeTypeFeePair.getKey()-$brandFee.getFeeByStoreType($storeType1)-$brandFee.getId()"> $storeType1
                                            ($brandFee.getFeeByStoreType($storeType1))
                                        </option>
                                    #end
                                #end
                            </select>
                        </div>
                    </div>

                    <!-- Brand fees collected (INR) -->
                    <div class="col-lg-4">
                        <div class="form-group">
                            <label>Brand fees collected</label><span
                                style="color:red ;font-size: 140%">*</span>
                            <input type="number" class="form-control " id="brandFeesCollected" required
                                   name="brandFeesCollected" placeholder="500000">
                        </div>
                    </div>
                    <!-- Mode of Payment Online/Cheque/IMPS/NEFT/RTGS/Wallet -->
                    <div class="col-lg-4">
                        <div class="form-group">
                            <label>Mode of Payment</label><span
                                style="color:red ;font-size: 140%">*</span>
                            <select class="form-control" name="paymentMode" required>
                                <option value="">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>
                <!-- Payment reference no -->
                <div class="row">
                    <div class="col-lg-4">
                        <div class="form-group">
                            <label>Payment Reference No</label><span
                                style="color:red ;font-size: 140%">*</span>
                            <input type="text" class="form-control" id="paymentReferenceNo" required
                                   name="paymentReferenceNo" placeholder="Payment Reference No">
                        </div>
                    </div>
                    <!-- fee collection date -->
                    <div class="col-lg-4">
                        <div class="form-group">
                            <label>Fee collecting Date</label><span
                                style="color:red ;font-size: 140%">*</span>
                            <input type="datetime-local" class="form-control " id="feeCollectingDate" required
                                   name="feeCollectingDate">
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="form-group">
                            <label>Attach Screenshot</label><span
                                style="color:red ;font-size: 140%">*</span>
                            <input type="hidden" id="payment-sc-docId" name="paymentAttachment">
                            <input type="file" class="form-control" id="payment-sc-doc" required>
                        </div>
                    </div>
                </div>
                <!-- Submit button-->
                <div class="form-group" style="text-align: center; margin-bottom:2px;">
                    <button type="button"
                            class="btn btn-success text-white font-semibold py-1 px-4 rounded background-red mk_submit_loi_form"
                            style="box-shadow:none;margin-bottom:2px;">
                        <span>Submit</span>
                    </button>
                </div>
            </form>
        </div>
    </div>

</section>
<script>
    $(document).on('blur', 'input[name="storePotential"]', function () {
        const walletValue = parseInt($('select[name="agreeWalletValue"]').val());
        const storePotantial = parseInt($('input[name="storePotential"]').val());
        if (walletValue > storePotantial) {
            alert("Store Potential must be greater than or equal to Wallet Value ")
            return false;
        }

    });

    $(".gstNo").change(function () {
        var inputGstNo = $(this).val();
        var gstinformat = new RegExp('^[0-9]{2}[A-Z]{5}[0-9]{4}[A-Z]{1}[1-9A-Z]{1}Z[0-9A-Z]{1}$');
        if (gstinformat.test(inputGstNo)) {
            doGetAjaxRequestHandler(`${context}/gstValidate?gstNo=` + inputGstNo,
                    function (response) {
                        console.log("resType--", typeof response)
                        console.log("res----", response)
                        if (response && Object.keys(response).length > 0) {
                            if (response.sts === "Active") {
                                $('#manualAddress').empty();
                                $('#manualAddress').hide();
                                $("#autoAddress").show();
                                $("#CompanyName").val(response.tradeNam);
                                $("#gstPinCode").val(response.pradr.addr.pncd);
                                $("#gstState").val(response.pradr.addr.stcd);
                                $("#gstCity").val(response.pradr.addr.loc);
                                $("#gstDistrict").val(response.pradr.addr.dst);
                                var selectOptions = [];
                                var addresses = response.adadr;
                                selectOptions.push(`<select id="billingAddress" name="billingAddress" class="form-control">`);
                                addresses.forEach((pradr) => {
                                    var addrString = getAddressString(pradr.addr);
                                    var addrStringify = JSON.stringify(pradr.addr);
                                    selectOptions.push(`<option value='${addrStringify}'>
                                      ${addrString}
                                </option>`);
                                });
                                selectOptions.push(`</select>`);
                                $('#addlist').html(selectOptions.join(''));
                            } else {
                                alert("GSTIN - " + inputGstNo + " is not Active")
                                $('#addlist').html("");
                            }
                        } else {
                            alert("Unable to validate GST. Please check the GST number.");
                            $('#addlist').html("");
                        }
                        // else {
                        //     alert("Problem to fatching Details From GST , Please Enter manually")
                        //     $('#addlist').html("");
                        //     $("#CompanyName").removeAttr('readonly');
                        //     $("#CompanyName").val("");
                        //     const addrFieldData = {
                        //         "bno": "Building no",
                        //         "bnm": "Building Name",
                        //         "st": "Street",
                        //         "locality": "Locality",
                        //         "loc": "City",
                        //         "dst": "District",
                        //         "pncd": "Pincode",
                        //         "stcd": "State"
                        //     };
                        //     $('#manualAddress').show();
                        //     // Dynamically create input fields
                        //     Object.keys(addrFieldData).forEach(function (field) {
                        //         $('#manualAddress').append('<div class="address-field"><div class="col-md-3"><label for="' + field + '">' + addrFieldData[field] + ':</label><input class="form-control" id="' + field + '" name="' + field + '" placeholder="' + addrFieldData[field] + '"></div></div>');
                        //     });
                        //
                        //
                        // }
                    });
        } else {
            alert('Please Enter Valid GSTIN Number');
            $(".gstNo").val('');
            $(".gstNo").focus();
        }
    });


    function getAddressString(addr) {
        addrFields = ["bno", "bnm", "st", "locality", "loc", "pncd", "stcd"];
        addresArr = [];
        for (let i = 0; i < addrFields.length; i++) {
            if (addr.hasOwnProperty(addrFields[i]) && addr[addrFields[i]] !== "") {
                addresArr.push(addr[addrFields[i]]);
            }
        }
        return addresArr.join(", ");
    }

    $(document).ready(function () {
        $("#autoAddress").hide();
        var brandCommitmentInputs = document.querySelectorAll(".brand-commitment");
        var totalCommitmentAmount = 0;
        brandCommitmentInputs[brandCommitmentInputs.length - 1].addEventListener("blur", function () {
            updateTotalCommitmentAmount();
        });

        function updateTotalCommitmentAmount() {
            // Recalculate the total commitment qty
            totalCommitmentAmount = 0;
            var hasInvalidQty = false;
            brandCommitmentInputs.forEach(function (input) {
                var commitmentValue = parseInt(input.value);
                if (!isNaN(commitmentValue)) {
                    if (commitmentValue > 1000) {
                        hasInvalidQty = true;
                        input.classList.add('border-red');
                    } else {
                        input.classList.remove('border-red');
                        totalCommitmentAmount += commitmentValue;
                    }
                }
            });

            if (hasInvalidQty) {
                alert("Quantity per brand cannot exceed 1000. Please enter valid quantities.");
            }

            var totalCommitmentInput = document.getElementById("totalAmount");
            totalCommitmentInput.value = totalCommitmentAmount;

            // Check 70% validation: (totalQty × 20000) >= 70% of storePotential
            var storePotential = parseInt($('input[name="storePotential"]').val()) || 0;
            var estimatedValue = totalCommitmentAmount * 20000;
            var minRequired = 0.7 * storePotential;
            var lessCommitSection = document.getElementById("lessCommitReasonSection");
            if (estimatedValue < minRequired && storePotential > 0) {
                lessCommitSection.style.display = "block";
            } else {
                lessCommitSection.style.display = "none";
            }
        }
    });
    $(".gstNo").on("input", function () {
        this.value = this.value.toUpperCase();
    });
</script>