@extends('layouts.app')
@section('appjs')
    <script type="application/javascript" src="{{ asset('js/app.js') }}"></script>
@endsection
@section('content')
@section('page_title') Customer Acquisition form @endsection
<style type="text/css">
    .alert-danger {
            display: none;
        }
        .card{
            width: 80%;
            background-color: #fffdfd;
        }
        .card-body{
            padding: 2rem;
        }
        .alignCenter{
            display: block;
        }
        .draft{
            margin-left: 20px;
        }
        .labelMargin{
            margin: 0;
        }
        #fileupload{
            cursor: auto;
        }
        .remarks{
            width: 100%;
            height: 120px !important;
            border-radius: 10px;
            border: 1px solid #ced4da;
        }
        .customerDetails,  .accountDocuments, .billingDetails, .paymentDetails, .serviceDetails{
            background: #fff;
            max-width: 1900px;
            padding: 30px;
            width: 100%;
            border-radius: 10px !important;
            /* box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px; */
            box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em, rgba(90, 125, 188, 0.05) 0px 0.25em 1em;
        }
        input[type=checkbox] { 
            cursor: auto;
        } 
        .tick-options, .hiddeninput, #securityDepositField, .paymentDetails, #modeTypeField, #smsRateField, #smsRateDeliveredField, #dltRateField{
            display: none;
        }
        #tickOptionsConnectivity{
            margin-top: -15px;
            margin-bottom: -20px;
        }
        .checkbox-container {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .hiddeninput{
            margin-bottom: 5px;
        }
        input:read-only {
            cursor: auto;
        }

        @media (max-width: 768px) {
            .card {
                width: 100%;
                /* Adjust width as needed */
            }
            .checkbox-container {
                display: block;
            }
            .form-group.row {
                flex-direction: column;
                margin-bottom: 15px;
            }

            .form-group.row .col {
                width: 100%;
            }

            .companyCol,
            .billingCol,
            .panCol,
            .customerCol,
            .contactCol,
            .mobileCol,
            .accountManagerCol,
            .fileCol,
            .paymentTermsCol {
                margin-top: 15px;
            }
        }
</style>
<div class="container">
      <div class="row justify-content-center">
            <div class="col-10 offset-md-1">
            <div class="card">
                <div class="card-header">CAF Entry (Customer Acquisition form)</div>
                    <div class="card-body">
                        <form method="post" action="{{route('addCustomerAccount')}}" onsubmit="return validateForm()" enctype="multipart/form-data" autocomplete="off">
                        {{ csrf_field() }}
                            <section class="customerDetails">
                                <h5><b>Customer Details:</b></h5>
                                <div class="form-group row">
                                    <div class="col">
                                        <label for="zone" class="form-label text-md-right labelMargin">Zone<i style="color: red;">*</i></label>
                                        <select id="zone" name='zone' class="form-control" required>
                                            <option value="" selected disabled hidden>Choose Zone</option>
                                            <option value="1">North</option>
                                            <option value="2">West</option>
                                            <option value="3">South</option>                                             
                                        </select>
                                    </div>
                                    <div class="col companyCol">
                                        <label for="company" class="form-label text-md-right labelMargin">Name of the Company<i style="color: red;">*</i></label>
                                        <input id="company" type="text" class="form-control " name="company" value="" placeholder="Enter Company name" required>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <div class="col">
                                        <label for="comAddress" class="form-label text-md-right labelMargin">Communication Address<i style="color: red;">*</i></label>
                                        <input id="comAddress" type="text" class="form-control " name="comAddress" value="" placeholder="Enter Communication Address" required>
                                    </div>
                                    <div class="col billingCol">
                                        <label for="bilAddress" class="form-label text-md-right labelMargin">Billing Address<i style="color: red;">*</i></label>
                                        <input id="bilAddress" type="text" class="form-control " name="bilAddress" value="" placeholder="Enter Billing Address" required>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <div class="col">
                                        <label for="gst" class="form-label text-md-right labelMargin">GST Number<i style="color: red;">*</i></label>
                                        <input id="gst" type="text" class="form-control" name="gst" value="" placeholder="Enter GST Number" pattern="[0-9]{2}[A-Z]{5}[0-9]{4}[A-Z]{1}[1-9A-Z]{1}Z[0-9A-Z]{1}" oninput="this.value = this.value.toUpperCase()" title="Please Enter Valid Format" autocomplete="off" required>
                                        <span class="error-gst span-error redIcon"></span>
                                     
                                    </div>
                                    <div class="col customerCol">
                                        <label for="CIN" class="form-label text-md-right labelMargin">Name of Constitution<i style="color: red;">*</i></label>
                                        <select id="CIN" name="cin" class="form-control" required>
                                            <option value="" selected disabled hidden>Choose Name of Constitution</option>
                                            <option value="1">Proprietorship</option>
                                            <option value="2">Partnership</option>
                                            <option value="3">Corporate (Pvt, Public, LLP)</option>                                       
                                            <option value="4">Society</option>                                      
                                            <option value="5">Trust</option> 
                                            <option value="6">NGO</option>
                                            <option value="7">Others</option>                                          
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <div class="col panCol">
                                        <label for="pan" class="form-label text-md-right labelMargin">Company PAN/Individual PAN<i style="color: red;">*</i></label>
                                        <input id="pan" type="text" class="form-control " name="pan" value="" placeholder="Enter Company PAN/Individual PAN Number" pattern="([A-Z]){5}([0-9]){4}([A-Z]){1}" oninput="this.value = this.value.toUpperCase()" title="Please Enter Valid Format" autocomplete="off"
                                        required>
                                    </div>
                                    <div class="col">
                                        <label for="tan" class="form-label text-md-right labelMargin">TAN Number</label>
                                        <input id="tan" type="text" class="form-control" name="tan" value="" placeholder="Enter TAN Number" pattern="[A-Z]{4}[0-9]{5}[A-Z]{1}" oninput="this.value = this.value.toUpperCase()" title="Please Enter Valid Format" autocomplete="off">

                                    </div>
                                </div>
                                <div class="form-group row">
                                    <div class="col customerCol">
                                        <label for="customerType" class="form-label text-md-right labelMargin">Customer Type<i style="color: red;">*</i></label>
                                        <select id="customerType" name="customerType" class="form-control" onchange="showOthers()" required>
                                            <option value="" selected disabled hidden>Choose Customer Type</option>
                                            <option value="1">Aggregator</option>
                                            <option value="2">Channel Partner</option>
                                            <option value="3">Reseller</option>                                          
                                            <option value="4">Enterprise</option>                                       
                                            <option value="5">Trust</option>                                      
                                            <option value="6">Govt.</option>
                                            <option value="7">Others</option>                                            
                                        </select>
                                    </div>
                                    <div class="col">
                                        <label for="entityId" class="form-label text-md-right labelMargin">Entity ID/Telemarketer ID</label>
                                        <input id="entityId" type="text" class="form-control " name="entityId" value="" placeholder="Enter Entity ID/Telemarketer ID"
                                        >
                                    </div>
                                </div>
                                <div class="form-group row" id="othersInput" style="display: none;">
                                    <div class="col-md-6">
                                        <label for="otherText" class="form-label text-md-right labelMargin">Specify Other<i style="color: red;">*</i></label>
                                        <input type="text" id="otherText" class="form-control">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <div class="col contactCol">
                                        <label for="keyName" class="form-label text-md-right labelMargin">Key Contact Name<i style="color: red;">*</i></label>
                                        <input id="keyName" type="text" class="form-control " name="keyName" value="" placeholder="Enter Key Contact Name"
                                        required>
                                    </div>
                                    <div class="col">
                                        <label for="designation" class="form-label text-md-right labelMargin">Designation<i style="color: red;">*</i></label>
                                        <input id="designation" type="text" class="form-control " name="designation" value="" placeholder="Enter Designation"
                                        required>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <div class="col mobileCol">
                                        <label for="mobile" class="form-label text-md-right labelMargin">Mobile Number<i style="color: red;">*</i></label>
                                        <input id="mobile" type="number" class="form-control " name="mobile" value="" placeholder="Enter Mobile Number"
                                        required>
                                    </div>
                                    <div class="col">
                                        <label for="email" class="form-label text-md-right labelMargin">Email ID<i style="color: red;">*</i></label>
                                        <input id="email" type="email" class="form-control " name="email" value="" placeholder="Enter Email Id"
                                        required>
                                        <span class="error-emailid span-error redIcon"></span>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <div class="col-md-6 accountManagerCol">
                                        <label for="accountManager" class="form-label text-md-right labelMargin">Account Manager<i style="color: red;">*</i></label>
                                        <select id="accountManager" name="accountManager" class="form-control" required>
                                            <option value="" selected disabled hidden>Choose Account Manager</option>
                                            <option value="1">Anand Iyer</option>
                                            <option value="2">Ananya Reddy</option>
                                            <option value="3">Keerthiraj</option>                                             
                                            <option value="4">Tenzin Bhutia</option>                                             
                                            <option value="5">Sukanta Bagchi</option>
                                            <option value="6">Jai Prakash</option>                                          
                                            <option value="7">Chandan Kumar</option>                                          
                                            <option value="8">Gurmeet Kaur</option>                                          
                                            <option value="9">Charul Aggarwal</option>                                          
                                            <option value="10">Nishtha Jawa</option>                                          
                                            <option value="11">Jaspreet Kaur</option>                                          
                                            <option value="12">Madhu Tare</option>                                          
                                            <option value="13">Parth Thakkar</option>                                          
                                          
                                        </select>
                                    </div>
                                </div>
                            </section>
                            <br>
                            <section class="accountDocuments">
                                <h5><b>Account documents and Proof:</b></h5>
                                    <div class="form-group row document-upload">
                                    <div class="col">
                                        <label for="purchaseOrderFile" class="form-label text-md-right labelMargin mt-3 ml-1">1. Purchase Order/Work Order<i style="color: red;">*</i> <span data-toggle="tooltip" title="Maximum file size should be 2 MB and PDF"><i class="fa fa-info-circle" aria-hidden="true"></i></span></label>
                                    </div>
                                    <div class="col fileCol mt-3">
                                        <input id="purchaseOrderFile" type="file" name="purchaseOrderFile"  placeholder="Upload Document" required>
                                        <span class="error-image-orderfile redIcon"></span>
                                    </div>  
                                    </div>
                                    <div class="form-group row">
                                    <div class="col">
                                        <label for="companyPAN" class="form-label text-md-right labelMargin mt-3 ml-1">2. Company PAN<i style="color: red;">*</i> <span data-toggle="tooltip" title="Maximum file size should be 2 MB and JPG, JPEG, PNG, or PDF"><i class="fa fa-info-circle" aria-hidden="true"></i></span></label>
                                    </div>
                                    <div class="col fileCol mt-3">
                                        <input id="companyPAN" type="file" name="companyPAN" value="fileupload" placeholder="Upload Document"
                                        required >
                                        <span class="error-image-pan redIcon"></span>
                                    </div>  
                                    </div>
                                    <div class="form-group row">
                                    <div class="col">
                                        <label for="COIFile" class="form-label text-md-right labelMargin mt-3 ml-1">3. Certificate of Incorporation (COI)<i style="color: red;">*</i> <span data-toggle="tooltip" title="Maximum file size should be 2 MB and PDF"><i class="fa fa-info-circle" aria-hidden="true"></i></span></label>
                                    </div>
                                    <div class="col fileCol mt-3">
                                        <input id="COIFile" type="file" name="COIFile" value="fileupload" placeholder="Upload Document"
                                        required>
                                        <span class="error-image-coifile redIcon"></span>
                                    </div>  
                                    </div>
                                    <div class="form-group row">
                                    <div class="col">
                                        <label for="AOAFile" class="form-label text-md-right labelMargin mt-3 ml-1">4. AOA <span data-toggle="tooltip" title="Maximum file size should be 2 MB and PDF"><i class="fa fa-info-circle" aria-hidden="true"></i></span></label>
                                    </div>
                                    <div class="col fileCol mt-3">
                                        <input id="AOAFile" type="file" name="AOAFile" value="fileupload" placeholder="Upload Document" >
                                        <span class="error-image-AOA redIcon"></span>
                                    </div>  
                                    </div>
                                    <div class="form-group row">
                                    <div class="col">
                                        <label for="MOAFile" class="form-label text-md-right labelMargin mt-3 ml-1">5. MOA <span data-toggle="tooltip" title="Maximum file size should be 2 MB and PDF"><i class="fa fa-info-circle" aria-hidden="true"></i></span></label>
                                    </div>
                                    <div class="col fileCol mt-3">
                                        <input id="MOAFile" type="file" name="MOAFile" value="fileupload" placeholder="Upload Document">
                                        <span class="error-image-MOA redIcon" ></span>
                                    </div>  
                                    </div>
                                    <div class="form-group row">
                                    <div class="col">
                                        <label for="addressProof" class="form-label text-md-right labelMargin mt-3 ml-1">6. Company Address Proof<i style="color: red;">*</i> <span data-toggle="tooltip" title="Maximum file size should be 2 MB and PDF"><i class="fa fa-info-circle" aria-hidden="true"></i></span></label>
                                        <select id="addressProof1" name="addressProof1" class="form-control" required>
                                            <option value="" selected disabled hidden>Select Address Proof</option>
                                            <option value="1">Telephone Bill</option>
                                            <option value="2">Internet Bill</option>
                                            <option value="3">Electricity Bill</option>
                                            <option value="4">Lease/Registration Agreement</option>
                                            <option value="5">GST Certificate</option>
                                        </select>
                                    </div>
                                    <div class="col fileCol mt-3">
                                        <input id="addressProof" type="file" name="addressProof" value="fileupload" placeholder="Upload Document"
                                        required>
                                            <span class="error-image-cap redIcon"></span>
                                    </div>  
                                    </div>
                                    <div class="form-group row">
                                    <div class="col">
                                        <label for="signatoryId1" class="form-label text-md-right labelMargin mt-3 ml-1">7. Authorised Signatory ID Proof<i style="color: red;">*</i> <span data-toggle="tooltip" title="Maximum file size should be 2 MB and PDF"><i class="fa fa-info-circle" aria-hidden="true"></i></span></label>
                                        <select id="signatoryId1" name="signatoryId1" class="form-control" required>
                                            <option value="" selected disabled hidden>Select Address Proof</option>
                                            <option value="1">Telephone Bill</option>
                                            <option value="2">Internet Bill</option>
                                            <option value="3">Electricity Bill</option>
                                            <option value="4">Lease/Registration Agreement</option>
                                            <option value="5">GST Certificate</option>
                                        </select>
                                    </div>
                                    <div class="col fileCol mt-3">
                                        <input id="signatoryId" type="file" name="signatoryId" value="fileupload" placeholder="Upload Document"
                                        required >
                                            <span class="error-image-sig redIcon"></span>
                                    </div>  
                                    </div>
                                    <div class="form-group row">
                                    <div class="col">
                                        <label for="GSTFile" class="form-label text-md-right labelMargin mt-3 ml-1">8. GST Certificate<i style="color: red;">*</i> <span data-toggle="tooltip" title="Maximum file size should be 2 MB and PDF"><i class="fa fa-info-circle" aria-hidden="true"></i></span></label>
                                    </div>
                                    <div class="col fileCol mt-3">
                                        <input id="GSTFile" type="file" name="GSTFile" value="fileupload" placeholder="Upload Document"
                                        required>
                                            <span class="error-image-gst redIcon"></span>
                                    </div>  
                                    </div>
                                    <div class="form-group row">
                                    <div class="col">
                                        <label for="serviceAgmnt" class="form-label text-md-right labelMargin mt-3 ml-1">9. Service Agreement<i style="color: red;">*</i> <span data-toggle="tooltip" title="Maximum file size should be 2 MB and PDF"><i class="fa fa-info-circle" aria-hidden="true"></i></span></label>
                                    </div>
                                    <div class="col fileCol mt-3">
                                        <input id="serviceAgmnt" type="file" name="serviceAgmnt" value="fileupload" placeholder="Upload Document"
                                        required>
                                            <span class="error-image-sa redIcon"></span>
                                    </div>  
                                    </div>
                                    <div class="form-group row">
                                    <div class="col">
                                        <label for="priceAprvl" class="form-label text-md-right labelMargin mt-3 ml-1">10. Price Approval<i style="color: red;">*</i> <span data-toggle="tooltip" title="Maximum file size should be 2 MB and PDF"><i class="fa fa-info-circle" aria-hidden="true"></i></span></label>
                                    </div>
                                    <div class="col fileCol mt-3">
                                        <input id="priceAprvl" type="file" name="priceAprvl" value="fileupload" placeholder="Upload Document"
                                        required>
                                            <span class="error-image-p redIcon"></span>
                                    </div>      
                                    </div>
                                    <div class="form-group row">
                                    <div class="col">
                                        <label for="otherFile" class="form-label text-md-right labelMargin mt-3 ml-1">11. Others(Please specify) <span data-toggle="tooltip" title="Maximum file size should be 2 MB and PDF"><i class="fa fa-info-circle" aria-hidden="true"></i></span></label>
                                    </div>
                                    <div class="col fileCol mt-3">
                                        <input id="otherFile" type="file" name="otherFile" value="fileupload" placeholder="Upload Document" >
                                        <span class="error-image-others redIcon"></span>
                                    </div>  
                                    </div>
                                </section>
                            <br>
                            <section class="serviceDetails">
                                <h5><b>Service Details:</b></h5>
                                <div class="form-group row">
                                    <div class="col">
                                        <label for="serviceType" class="form-label text-md-right labelMargin">Type of Service<i style="color: red;">*</i></label>
                                        <select id="serviceType" name="serviceType[]"   class="form-control"  onchange="showTickOptions(); checkEnableFields()"  multiple="multiple" required>
                                            <!-- <option value="" selected disabled hidden>Choose Service Type</option> -->
                                            <option value="1">SMS</option>
                                            <option value="2">WABA</option>
                                            <option value="3">RCS</option>                                        
                                            <option value="4">CPM</option>                                        
                                            <option value="5">Performance</option>                                        
                                        </select>
                                    </div>
                                    <div class="col paymentTermsCol">
                                        <label for="paymentTerms" class="form-label text-md-right labelMargin">Payment Terms<i style="color: red;">*</i></label>
                                        <select id="paymentTerms" name="paymentTerms" class="form-control"  onchange="handlePaymentTermsChange(); checkEnableFields()" required>
                                            <option value="" selected disabled hidden>Choose Payment Terms</option>
                                            <option value="1">Prepaid</option>
                                            <option value="2">Postpaid</option>                                           
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <div id="tickOptionsSMS" class="col-md-12 tick-options">
                                        <div class="checkbox-container">
                                            <label><input type="checkbox" name="otpCheckbox" onchange="showInputField(); checkEnableFields()"> OTP</label><br>
                                            <div id="hiddeninput1" class="hiddeninput">
                                                <input type="number" class="form-control" name="otp_sms_volume" value="" placeholder="Enter volume">
                                            </div>
                                        </div>   
                                        <div class="checkbox-container">     
                                                <label><input type="checkbox" name="transactionalCheckbox" onchange="showInputField()"> TRANSACTIONAL</label><br>
                                                <div id="hiddeninput2" class="hiddeninput">
                                                <input type="number" class="form-control " name="trans_sms_volume" value="" placeholder="Enter volume"
                                                    >
                                                </div>
                                        </div>
                                        <div class="checkbox-container">     
                                                <label><input type="checkbox" name="promotionalCheckbox" onchange="showInputField()"> PROMOTIONAL</label>
                                                <div id="hiddeninput3" class="hiddeninput">
                                                    <input type="number" class="form-control " name="promo_sms_volume" value="" placeholder="Enter volume"
                                                        >
                                                </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6" id="modeTypeField">
                                        <label for="modeType" class="form-label text-md-right labelMargin">Mode<i style="color: red;">*</i></label>
                                        <select id="modeType" name="modeType" class="form-control" onchange="handlemodeType()" >
                                            <option value="" selected disabled hidden>Choose Mode</option>
                                            <option value="1">Submission</option>
                                            <option value="2">Delivered</option>                                      
                                        </select>
                                        <span id="error-message-mode" style="color: red;" class="error-message"></span>
                                    </div>
                                    <div class="col-md-6" id="smsRateField">
                                        <label for="smsRate" class="form-label text-md-right labelMargin">SMS Rate<i style="color: red;">*</i></label>
                                        <input id="smsRate" type="number" class="form-control" name="smsRate" value="" placeholder="Enter SMS Rate"
                                            >
                                            <span id="error-message-rate" style="color: red;" class="error-message"></span>
                                    </div>
                                    <div class="col-md-3" id="smsRateDeliveredField">
                                        <label for="smsRateDelivered" class="form-label text-md-right labelMargin">SMS Rate<i style="color: red;">*</i></label>
                                        <input id="smsRateDelivered" type="number" class="form-control" name="smsRateDelivered" value="" placeholder="Enter SMS Rate"
                                            >
                                            <span id="error-message-srate" style="color: red;" class="error-message"></span>
                                    </div>
                                    <div class="col-md-3" id="dltRateField">
                                        <label for="dltRate" class="form-label text-md-right labelMargin">DLT Rate<i style="color: red;">*</i></label>
                                        <input id="dltRate" type="number" class="form-control" name="dltRate" value="" placeholder="Enter DLT Rate"
                                            >
                                            <span id="error-message-dlt" style="color: red;" class="error-message"></span>

                                    </div>
                                    <div id="tickOptionsWABA" class="col-md-12 tick-options mt-3">
                                            <div class="checkbox-container">
                                            <label><input type="checkbox" name="utilityCheckbox" onchange="showInputField(); checkEnableFields()"> Utility</label><br>
                                            <div id="hiddeninput4" class="hiddeninput">
                                            <input type="number" class="form-control" name="waba_utility_volume" value="" placeholder="Enter volume">
                                            </div>
                                            </div>

                                            <div class="checkbox-container">
                                            <label><input type="checkbox" name="marketingCheckbox" onchange="showInputField(); checkEnableFields()"> Marketing</label><br>
                                            <div id="hiddeninput5" class="hiddeninput">
                                            <input type="number" class="form-control" name="waba_marketing_volume" value="" placeholder="Enter volume">
                                            </div>
                                            </div>

                                            <div class="checkbox-container">
                                            <label><input type="checkbox" name="serviceCheckbox" onchange="showInputField(); checkEnableFields()"> Service</label><br>
                                            <div id="hiddeninput6" class="hiddeninput">
                                            <input type="number" class="form-control" name="waba_service_volume" value="" placeholder="Enter volume">
                                            </div>
                                            </div>

                                            <div class="checkbox-container">
                                            <label><input type="checkbox" name="authenticationCheckbox" onchange="showInputField(); checkEnableFields()"> Authentication</label>
                                            <div id="hiddeninput7" class="hiddeninput">
                                            <input type="number" class="form-control" name="waba_auth_volume" value="" placeholder="Enter volume">
                                            </div>
                                            </div>
                                    </div>
                                    <div id="tickOptionsRCS" class="col-md-12 tick-options mt-3">
                                            <div class="checkbox-container">
                                            <label><input type="checkbox" name="basicMessageCheckbox" onchange="showInputField(); checkEnableFields()"> Basic Message</label><br>
                                            <div id="hiddeninput8" class="hiddeninput">
                                            <input type="number" class="form-control" name="rcs_bm_volume" value="" placeholder="Enter volume">
                                            </div>
                                            </div>
                                            <div class="checkbox-container">
                                            <label><input type="checkbox" name="richMessageCheckbox" onchange="showInputField(); checkEnableFields()"> Rich Message</label><br>
                                            <div id="hiddeninput9" class="hiddeninput">
                                            <input type="number" class="form-control" name="rcs_meg_volume" value="" placeholder="Enter volume">
                                            </div>
                                            </div>
                                            <div class="checkbox-container">
                                            <label><input type="checkbox" name="conversationCheckbox" onchange="showInputField(); checkEnableFields()"> Conversation</label>
                                            <div id="hiddeninput10" class="hiddeninput">
                                            <input type="number" class="form-control" name="rcs_con_volume" value="" placeholder="Enter volume">
                                            </div>
                                            </div>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <div id="tickOptionsConnectivity" class="col-md-6 mt-0">
                                        <label for="tickOptionsConnectivity" class="form-label text-md-right">Connectivity Type<i style="color: red;">*</i></label><br>
                                            <label><input type="checkbox" name="connectivity" value="1" onchange="checkEnableFields()" > GUI</label><br>
                                            <label><input type="checkbox" name="connectivity" value="2" onchange="checkEnableFields()"> API</label><br>
                                            <label><input type="checkbox" name="connectivity" value="3" onchange="checkEnableFields()"> SMPP</label>
                                            <span id="error-message-con" style="color: red;" class="error-message"></span>

                                    </div>
                                </div>
                            </section>
                            <br>
                            <section class="billingDetails">
                                <h5><b>Billing Details:</b></h5>
                                <div class="form-group row">
                                    <div class="col">
                                        <label for="registrationCharges" class="form-label text-md-right labelMargin">Registration Charges/OSC<i style="color: red;">*</i></label>
                                        <input id="registrationCharges" type="number" class="form-control" name="registrationCharges" value="" placeholder="Enter Registration Charges"
                                        required>
                                    </div>
                                    <div class="col mobileCol">
                                        <label for="maintenanceCost" class="form-label text-md-right labelMargin">Monthly Maintenance Cost<i style="color: red;">*</i></label>
                                        <input id="maintenanceCost" type="number" class="form-control" name="maintenanceCost" value="" placeholder="Enter Monthly Maintenance Cost"
                                            required>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <div class="col-md-6" id="securityDepositField">
                                        <label for="securityDeposit" class="form-label text-md-right labelMargin">Security Deposit (In-case of Postpaid)<i style="color: red;">*</i></label>
                                        <input id="securityDeposit" type="number" class="form-control" name="securityDeposit" value="" placeholder="Security Deposit"
                                        required>
                                    </div>
                                </div>
                            </section>
                            <br>
                            <section class="paymentDetails">
                                <h5><b>Payment Details:</b></h5>
                                <div class="form-group row">
                                    <div class="col">
                                        <label for="receiptAmount" class="form-label text-md-right labelMargin">Receipt Amount<i style="color: red;">*</i></label>
                                        <input id="receiptAmount" type="number" class="form-control" name="receiptAmount" value="" placeholder="Enter Receipt Amount"
                                        required>
                                    </div>
                                    <div class="col paymentTermsCol">
                                        <label for="paymentMode" class="form-label text-md-right labelMargin">Payment made by<i style="color: red;">*</i></label>
                                        <select id="paymentMode" name="payment_mode" class="form-control" required>
                                            <option value="" selected disabled hidden>Choose Payment Mode</option>
                                            <option value="1">NEFT</option>
                                            <option value="2">Cheque</option>                                           
                                            <option value="3">RTGS</option>                                           
                                            <option value="4">DD</option>                                           
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <div class="col mobileCol">
                                        <label for="utr" class="form-label text-md-right labelMargin">UTR details<i style="color: red;">*</i></label>
                                        <input id="utr" type="text" class="form-control" name="utr" value="" placeholder="Enter UTR details"
                                        required>
                                    </div>
                                    <div class="col-md-6">
                                        <label for="paymentDate" class="form-label text-md-right labelMargin">Payment date<i style="color: red;">*</i></label>
                                        <input id="paymentDate" type="date" class="form-control" name="paymentDate" value="" placeholder="Enter Payment date"
                                        required >
                                    </div>
                                </div>
                            </section>
                            <br>
                            <h5 class="ml-2"><b>Remarks:</b></h5>
                            <div class="form-group row">
                                <div class="col-md-6">
                                <textarea name="remark" id="" class="form-control remarks" maxlength="1000"></textarea>
                                </div>
                            </div>
                            <div class="form-group  text-center alignCenter">
                                    <button type="submit" id="custome_submit" class="btn btn-success Sumbit">
                                        Submit
                                    </button>
                                    <!-- <button type="submit" class="btn btn-success draft">
                                        Save as Draft
                                    </button> -->
                            </div>
                        </form>
                    </div>
            </div>
    </div>
      </div>
    </div>
        <!-- Jquery 3.4.1 -->
        <script src="https://support.whistle.mobi/js/jquery.min.js"></script>
    <!-- Scripts -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>

    <!-- Styles -->
    <link href="https://support.whistle.mobi/css/main.css" rel="stylesheet">

    <!-- Bootstrap 4 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css">
    <script>
        $('#serviceType').select2();
        function showOthers() {
            var selectElement = document.getElementById("customerType");
            var othersInput = document.getElementById("othersInput");
            var otherText = document.getElementById("otherText");

            if (selectElement.value === "7") {
                othersInput.style.display = "block";
            } else {
                othersInput.style.display = "none";
            }
        }

         $(document).ready(function () {
        // Get the list of document types
        var documentTypes = [];
    });


        function showTickOptions() {
            var serviceTypeSelect = document.getElementById("serviceType");
            var selectedOptions = serviceTypeSelect.selectedOptions;

            var tickOptionsDivSMS = document.getElementById("tickOptionsSMS");
            var tickOptionsDivWABA = document.getElementById("tickOptionsWABA");
            var tickOptionsDivRCS = document.getElementById("tickOptionsRCS");
            var modeType = document.getElementById("modeTypeField");

            // Hide all tick option divs by default
            tickOptionsDivSMS.style.display = "none";
            tickOptionsDivWABA.style.display = "none";
            tickOptionsDivRCS.style.display = "none";
            modeType.style.display = "none";

                smsRateDeliveredField.style.display = "none";
            dltRateField.style.display = "none";
            smsRateField.style.display =  "none";

            // Show tick option divs for each selected service type
            for (var i = 0; i < selectedOptions.length; i++) {
                var selectedValue = selectedOptions[i].value;

                if (selectedValue === "1") {
                    tickOptionsDivSMS.style.display = "block";
                    modeType.style.display = "block";
                } else if (selectedValue === "2") {
                    tickOptionsDivWABA.style.display = "block";
                } else if (selectedValue === "3") {
                    tickOptionsDivRCS.style.display = "block";
                }
            }
            }

            var otpCheckbox = document.getElementsByName("otpCheckbox")[0];
            var transactionalCheckbox = document.getElementsByName("transactionalCheckbox")[0];
            var promotionalCheckbox = document.getElementsByName("promotionalCheckbox")[0];

            var utilityCheckbox = document.getElementsByName("utilityCheckbox")[0];
            var marketingCheckbox = document.getElementsByName("marketingCheckbox")[0];
            var serviceCheckbox = document.getElementsByName("serviceCheckbox")[0];
            var authCheckbox = document.getElementsByName("authenticationCheckbox")[0];

            var basicMessageCheckbox = document.getElementsByName("basicMessageCheckbox")[0];
            var richMessageCheckbox = document.getElementsByName("richMessageCheckbox")[0];
            var conversationCheckbox = document.getElementsByName("conversationCheckbox")[0];

        function showInputField() {
            var otpInputDiv = document.getElementsByClassName("hiddeninput")[0];
            var transactionalInputDiv = document.getElementsByClassName("hiddeninput")[1];
            var promotionalInputDiv = document.getElementsByClassName("hiddeninput")[2];

            var utilityInputDiv = document.getElementsByClassName("hiddeninput")[3];
            var marketingInputDiv = document.getElementsByClassName("hiddeninput")[4];
            var serviceInputDiv = document.getElementsByClassName("hiddeninput")[5];
            var authInputDiv = document.getElementsByClassName("hiddeninput")[6];

            var basicMsgInputDiv = document.getElementsByClassName("hiddeninput")[7];
            var richMsgInputDiv = document.getElementsByClassName("hiddeninput")[8];
            var conversationInputDiv = document.getElementsByClassName("hiddeninput")[9];

            otpInputDiv.style.display = otpCheckbox.checked ? "block" : "none";
            transactionalInputDiv.style.display = transactionalCheckbox.checked ? "block" : "none";
            promotionalInputDiv.style.display = promotionalCheckbox.checked ? "block" : "none";

            utilityInputDiv.style.display = utilityCheckbox.checked ? "block" : "none";
            marketingInputDiv.style.display = marketingCheckbox.checked ? "block" : "none";
            serviceInputDiv.style.display = serviceCheckbox.checked ? "block" : "none";
            authInputDiv.style.display = authCheckbox.checked ? "block" : "none";

            basicMsgInputDiv.style.display = basicMessageCheckbox.checked ? "block" : "none";
            richMsgInputDiv.style.display = richMessageCheckbox.checked ? "block" : "none";
            conversationInputDiv.style.display = conversationCheckbox.checked ? "block" : "none";
        }

       // Ensure only one checkbox can be checked at a time
       var checkboxes = document.querySelectorAll('input[type="checkbox"][name="connectivity"]');

        checkboxes.forEach(function (checkbox) {
            checkbox.addEventListener('change', function () {
                checkboxes.forEach(function (otherCheckbox) {
                    if (otherCheckbox !== checkbox) {
                        otherCheckbox.checked = false;
                    }
                });
            });
        });

        function handlePaymentTermsChange() {
            var paymentTermsSelect = document.getElementById("paymentTerms");
            var securityDeposit = document.getElementById("securityDepositField");

            var paymentDetails = document.getElementsByClassName("paymentDetails");

            // Loop through the collection and set the display property for each element
            for (var i = 0; i < paymentDetails.length; i++) {
                paymentDetails[i].style.display = (paymentTermsSelect.value === "1") ? "block" : "none";
            }

            // Check if the securityDeposit element exists before setting its display property
            if (securityDeposit) {
                securityDeposit.style.display = (paymentTermsSelect.value === "2") ? "block" : "none";
            }
        }

        var smsRateField = document.getElementById("smsRateField");
        var dltRateField = document.getElementById("dltRateField");
        var smsRateDeliveredField = document.getElementById("smsRateDeliveredField");

        function handlemodeType() {
            var modeTypeSelect = document.getElementById("modeType");

            smsRateField.style.display =  "none";
            smsRateDeliveredField.style.display = "none";
            dltRateField.style.display = "none";

            if (modeTypeSelect.value === "1") {
                smsRateField.style.display =  "block";
            }

            if (modeTypeSelect.value === "2") {
                smsRateDeliveredField.style.display = "block";
                dltRateField.style.display = "block";
            }
        }

        function checkEnableFields() {
            // Get selected values and checked states
            var serviceType = document.getElementById("serviceType").value;
            var paymentTerms = document.getElementById("paymentTerms").value;
            var connectivityGUI = document.getElementsByName("connectivity")[0].checked;
            var connectivityAPI = document.getElementsByName("connectivity")[1].checked;
            var connectivitySMPP = document.getElementsByName("connectivity")[2].checked;

            // Get input fields
            var otpInput = document.getElementById("hiddeninput1").querySelector("input");
            var transactionalInput = document.getElementById("hiddeninput2").querySelector("input");
            var promotionalInput = document.getElementById("hiddeninput3").querySelector("input");

            var utilityInputDiv = document.getElementById("hiddeninput4").querySelector("input");
            var marketingInputDiv = document.getElementById("hiddeninput5").querySelector("input");
            var serviceInputDiv = document.getElementById("hiddeninput6").querySelector("input");
            var authInputDiv = document.getElementById("hiddeninput7").querySelector("input");

            var basicMsgInputDiv = document.getElementById("hiddeninput8").querySelector("input");
            var richMsgInputDiv = document.getElementById("hiddeninput9").querySelector("input");
            var conversationInputDiv = document.getElementById("hiddeninput10").querySelector("input");

            // Check conditions to enable/disable input fields
            var enableFields =
                serviceType !== "" &&
                paymentTerms !== "" &&
                (otpCheckbox || transactionalCheckbox || promotionalCheckbox) &&
                (connectivityGUI || connectivityAPI || connectivitySMPP);

            var enableFields1 =
            serviceType !== "" &&
            paymentTerms !== "" &&
            (utilityCheckbox || marketingCheckbox || serviceCheckbox || authCheckbox) &&
            (connectivityGUI || connectivityAPI || connectivitySMPP);

            var enableFields2 =
            serviceType !== "" &&
            paymentTerms !== "" &&
            (basicMessageCheckbox || richMessageCheckbox || conversationCheckbox) &&
            (connectivityGUI || connectivityAPI || connectivitySMPP);

            // Enable/disable input fields based on conditions
            otpInput.disabled = !enableFields;
            transactionalInput.disabled = !enableFields;
            promotionalInput.disabled = !enableFields;

            utilityInputDiv.disabled = !enableFields1;
            marketingInputDiv.disabled = !enableFields1;
            serviceInputDiv.disabled = !enableFields1;
            authInputDiv.disabled = !enableFields1;

            basicMsgInputDiv.disabled = !enableFields2;
            richMsgInputDiv.disabled = !enableFields2;
            conversationInputDiv.disabled = !enableFields2;
        }

        $('#companyPAN').on('change', function() {
            var fileInput = $(this)[0];
            var file = fileInput.files[0];
            var sizeInBytes = file.size;
            var sizeInKb = sizeInBytes / 1024; // convert bytes to KB
            var fileType = file.type;

            // Check conditions
            if (sizeInKb > 2000) {
                $('.error-image-pan').html('File should be less than 2 MB');
                $(this).val('');
            } else if (!(fileType == 'image/jpeg' || fileType == 'image/png' || fileType == 'image/jpg' || fileType == 'application/pdf')) {
                $('.error-image-pan').html('File should be JPG, JPEG, PNG, or PDF');
                $(this).val('');
            }

            setTimeout(function() {
                $('.error-image-pan').html('');
            }, 3000);
        });


        $('#purchaseOrderFile').on('change', function() {
            var fileInput = $(this)[0];
            var file = fileInput.files[0];
            var sizeInBytes = file.size;
            var sizeInKb = sizeInBytes / 1024; // convert bytes to KB
            var fileType = file.type;

            // Check conditions
            if (sizeInKb > 2000) {
                $('.error-image-orderfile').html('File should be less than 2 MB');
                $('#purchaseOrderFile').val('');
            } else if (fileType != 'application/pdf') {
                $('.error-image-orderfile').html('File should be PDF');
                $('#purchaseOrderFile').val('');
            }

            setTimeout(function() {
                $('.error-image-orderfile').html('');
            }, 3000);
        });

        $('#COIFile').on('change', function() {
            var fileInput = $(this)[0];
            var file = fileInput.files[0];
            var sizeInBytes = file.size;
            var sizeInKb = sizeInBytes / 1024; // convert bytes to KB
            var fileType = file.type;

            // Check conditions
            if (sizeInKb > 2000) {
                $('.error-image-coifile').html('File should be less than 2 MB');
                $(this).val('');
            } else if (fileType != 'application/pdf') {
                $('.error-image-coifile').html('File should be PDF');
                $(this).val('');
            }

            setTimeout(function() {
                $('.error-image-coifile').html('');
            }, 3000);
        });

        $('#AOAFile').on('change', function() {
            var fileInput = $(this)[0];
            var file = fileInput.files[0];
            var sizeInBytes = file.size;
            var sizeInKb = sizeInBytes / 1024; // convert bytes to KB
            var fileType = file.type;

            // Check conditions
            if (sizeInKb > 2000) {
                $('.error-image-AOA').html('File should be less than 2 MB');
                $(this).val('');
            } else if (fileType != 'application/pdf') {
                $('.error-image-AOA').html('File should be PDF');
                $(this).val('');
            }

            setTimeout(function() {
                $('.error-image-AOA').html('');
            }, 3000);
        });

        $('#MOAFile').on('change', function() {
            var fileInput = $(this)[0];
            var file = fileInput.files[0];
            var sizeInBytes = file.size;
            var sizeInKb = sizeInBytes / 1024; // convert bytes to KB
            var fileType = file.type;

            // Check conditions
            if (sizeInKb > 2000) {
                $('.error-image-MOA').html('File should be less than 2 MB');
                $(this).val('');
            } else if (fileType != 'application/pdf') {
                $('.error-image-MOA').html('File should be PDF');
                $(this).val('');
            }

            setTimeout(function() {
                $('.error-image-MOA').html('');
            }, 3000);
        });

        $('#addressProof').on('change', function() {
            var fileInput = $(this)[0];
            var file = fileInput.files[0];
            var sizeInBytes = file.size;
            var sizeInKb = sizeInBytes / 1024; // convert bytes to KB
            var fileType = file.type;

            // Check conditions
            if (sizeInKb > 2000) {
                $('.error-image-cap').html('File should be less than 2 MB');
                $(this).val('');
            } else if (fileType != 'application/pdf') {
                $('.error-image-cap').html('File should be PDF');
                $(this).val('');
            }

            setTimeout(function() {
                $('.error-image-cap').html('');
            }, 3000);
        });

        $('#signatoryId').on('change', function() {
            var fileInput = $(this)[0];
            var file = fileInput.files[0];
            var sizeInBytes = file.size;
            var sizeInKb = sizeInBytes / 1024; // convert bytes to KB
            var fileType = file.type;

            // Check conditions
            if (sizeInKb > 2000) {
                $('.error-image-sig').html('File should be less than 2 MB');
                $(this).val('');
            } else if (fileType != 'application/pdf') {
                $('.error-image-sig').html('File should be PDF');
                $(this).val('');
            }

            setTimeout(function() {
                $('.error-image-sig').html('');
            }, 3000);
        });

        $('#GSTFile').on('change', function() {
            var fileInput = $(this)[0];
            var file = fileInput.files[0];
            var sizeInBytes = file.size;
            var sizeInKb = sizeInBytes / 1024; // convert bytes to KB
            var fileType = file.type;

            // Check conditions
            if (sizeInKb > 2000) {
                $('.error-image-gst').html('File should be less than 2 MB');
                $(this).val('');
            } else if (fileType != 'application/pdf') {
                $('.error-image-gst').html('File should be PDF');
                $(this).val('');
            }

            setTimeout(function() {
                $('.error-image-gst').html('');
            }, 3000);
        });

        $('#serviceAgmnt').on('change', function() {
            var fileInput = $(this)[0];
            var file = fileInput.files[0];
            var sizeInBytes = file.size;
            var sizeInKb = sizeInBytes / 1024; // convert bytes to KB
            var fileType = file.type;

            // Check conditions
            if (sizeInKb > 2000) {
                $('.error-image-sa').html('File should be less than 2 MB');
                $(this).val('');
            } else if (fileType != 'application/pdf') {
                $('.error-image-sa').html('File should be PDF');
                $(this).val('');
            }

            setTimeout(function() {
                $('.error-image-sa').html('');
            }, 3000);
        });

        $('#priceAprvl').on('change', function() {
            var fileInput = $(this)[0];
            var file = fileInput.files[0];
            var sizeInBytes = file.size;
            var sizeInKb = sizeInBytes / 1024; // convert bytes to KB
            var fileType = file.type;

            // Check conditions
            if (sizeInKb > 2000) {
                $('.error-image-p').html('File should be less than 2 MB');
                $(this).val('');
            } else if (fileType != 'application/pdf') {
                $('.error-image-p').html('File should be PDF');
                $(this).val('');
            }

            setTimeout(function() {
                $('.error-image-p').html('');
            }, 3000);
        });

        $('#otherFile').on('change', function() {
            var fileInput = $(this)[0];
            var file = fileInput.files[0];
            var sizeInBytes = file.size;
            var sizeInKb = sizeInBytes / 1024; // convert bytes to KB
            var fileType = file.type;

            // Check conditions
            if (sizeInKb > 2000) {
                $('.error-image-others').html('File should be less than 2 MB');
                $(this).val('');
            } else if (fileType != 'application/pdf') {
                $('.error-image-others').html('File should be PDF');
                $(this).val('');
            }

            setTimeout(function() {
                $('.error-image-others').html('');
            }, 3000);
        });

        document.getElementById('customerType').addEventListener('change', function() {
        var gstInput = document.getElementById('gst');
        if (this.value == '5') { // If 'Trust' is selected
            gstInput.removeAttribute('required');
        } else {
            gstInput.setAttribute('required', 'required');
        }
    });

    document.getElementById('paymentTerms').addEventListener('change', function() {
        var paymentMode = document.getElementById('paymentMode');
        var receiptAmount = document.getElementById('receiptAmount');
        var utr = document.getElementById('utr');
        var paymentDate = document.getElementById('paymentDate');
        var securityDeposit = document.getElementById('securityDeposit');

        if (this.value == '1') { // If 'Trust' is selected
            paymentMode.setAttribute('required', 'required');
            receiptAmount.setAttribute('required', 'required');
            utr.setAttribute('required', 'required');
            paymentDate.setAttribute('required', 'required');
            securityDeposit.removeAttribute('required');


        } else {
            paymentMode.removeAttribute('required');
            receiptAmount.removeAttribute('required');
            utr.removeAttribute('required');
            paymentDate.removeAttribute('required');
            securityDeposit.setAttribute('required', 'required');

        }
    });
$("#email").on("change", function(e){
    let emailid = $(this).val().trim();
    var emailregex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
     if(emailregex.test(emailid)==true){
        $.ajax({
                type: 'POST',
                url: 'checkEmail',
                dataType: "json",
                data: {
                    _token: "{{csrf_token()}}",
                    "emailid":emailid,
                    "dataType": 'json'
                },
            success: function(data){
                console.log(data);
              if(!data){
                    
        


            console.log("aaaaaaaaaaaaaaa");
                $('.error-emailid').html('');
                $('#custome_submit').prop("disabled", false);  
              }else {
            
                $('.error-emailid').html('Email ID already Exist!!');
                $('#custome_submit').prop("disabled", true);
                      
                setTimeout(function() {
                $('.error-emailid').html('');
            }, 3000);

              }
            }
        });
     }else{
        $('.error-emailid').html('Please Enter Valid Email!!');
        $('#custome_submit').prop("disabled", true);  
        setTimeout(function() {
                $('.error-emailid').html('');
            }, 3000);
     }
});

    
    function validateForm() {
        var checkboxes = document.querySelectorAll('#tickOptionsConnectivity input[type="checkbox"][name="connectivity"]');
        var isChecked = false;
        checkboxes.forEach(function(checkbox) {
            if (checkbox.checked) {
                isChecked = true;
            }
        });
                                        
        if (!isChecked) {
            var errorMessageSpan = document.getElementById('error-message-con');
            errorMessageSpan.textContent = "Please select at least one connectivity type.";
            errorMessageSpan.style.display = "block"; // Show the error message
            setTimeout(function() {
                $('#error-message-con').html('');
            }, 3000);
            return false; // Prevent form submission
        } else {
            var errorMessageSpan = document.getElementById('error-message-con');
            errorMessageSpan.textContent = ""; // Clear the error message
            errorMessageSpan.style.display = "none"; // Hide the error message
             // Allow form submission
        }
        var serviceTypeSelect = document.getElementById("serviceType");
    var selectedOptions = serviceTypeSelect.selectedOptions;
    var modeType = document.getElementById("modeType");
    var errorMessageSpanMode = document.getElementById('error-message-mode');
    var errorMessageSms = document.getElementById('error-message-rate');

    var errorMessagesr = document.getElementById('error-message-srate');
    var errorMessagedlt = document.getElementById('error-message-dlt');


    var modeSelected = modeType.value;
    console.log(modeSelected);
    
    // Reset mode field and error message
    errorMessageSms.textContent = "";
    errorMessageSms.style.display = "none";

    errorMessagesr.textContent = "";
    errorMessagesr.style.display = "none";

    errorMessagedlt.textContent = "";
    errorMessagedlt.style.display = "none";

    for (var i = 0; i < selectedOptions.length; i++) {
        var selectedValue = selectedOptions[i].value;
        
        if (selectedValue === "1") { // SMS selected
            modeType.style.display = "block";
            if (!modeSelected) {
                errorMessageSpanMode.textContent = "Please select Mode";
                errorMessageSpanMode.style.display = "block";
                setTimeout(function() {
                $('#error-message-mode').html('');
            }, 3000);
                return false; // Prevent form submission
            }
        }
    }
    if(modeSelected == '1'){
        if (document.getElementById("smsRate").value == "") {
        errorMessageSms.textContent = "Please select SMS Rate";
        errorMessageSms.style.display = "block";
        setTimeout(function() {
                $('#error-message-rate').html('');
            }, 3000);
        return false;
        }else {
            return true;
        }
    } else if (modeSelected == '2') {
        if (document.getElementById("smsRateDelivered").value == "") {
            errorMessagesr.textContent = "SMS Rate is required";
            errorMessagesr.style.display = "block";
            setTimeout(function() {
                $('#error-message-srate').html('');
            }, 3000);
            return false;
        }else if (document.getElementById("dltRate").value == "") {
            errorMessagedlt.textContent = "DLT Rate is required";
            errorMessagedlt.style.display = "block";
            setTimeout(function() {
                $('#error-message-dlt').html('');
            }, 3000);
            return false;
        } else {
            return true;
        }
    }
  
    return true; 
}
// $("#gst").on("change", function(e) {
//         var gstNumber = $(this).val().trim();
        
//         var gstPattern = /^\d{2}[A-Z]{5}\d{4}[A-Z]{1}\d{1}[A-Z]{1}\d{1}$/;

// if (gstPattern.test(gstNumber)) {
//     $('.error-gst').html('');
//                 $('#custome_submit').prop("disabled", false);  
           
//         } else {
//             $('.error-gst').html('GST Number is Invalid!');
//     $('#custome_submit').prop("disabled", true);  
//         }
       
//     });
    </script>
@endsection