@extends('frontend.app')
<!-- Main Container  -->
@section('content')
<div class="position-relative">
    <div id="carouselExampleIndicators" class="carousel slide" data-pause="false" data-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item active innerHeaderimg">
                <img src="/assets/frontend/images/inner-about.jpg" />
                <div class="carousel-caption innertopHEadcaption">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-5">
                                <div class="capbg">
                                    <p>Home <i class="fa fa-angle-right mx-2"></i></p>
                                    <div class="heading-seperator innerseperatorspace"><span></span></div>
                                    <h4>Apply New Connection</h4>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
<section>
    <div class="container">
        <div class="row">

            <div class="col-md-12 py-3 py-sm-5">

                @if ($message = Session::get('success'))
                <div class="alert alert-success alert-block">
                    <button type="button" class="close" data-dismiss="alert">×</button>
                    <strong>{{ $message }}</strong>
                </div>
                @endif
                <div class="innerabout-content">

                    <h2 class="f-20">MNGL <strong>New Connection Application</strong></h2>

                    <ul class="mt-3">
                        <li>Applicant residing in a particular building should have a gas supply</li>
                        <li>Payments can be made through online transaction only.</li>
                        <li>As per safety standards, in case, the applicant's residence is found to be
                            technically not feasible, MNGL will refund the amount paid by the applicant in full.</li>
                        <li>Applicant should be the owner of the flat for which new connection is requested.
                            Incase of any dispute w.r.t. ownership arising in future, the security
                            deposit against the connection stands forfeited.</li>
                        <li>Online Scheme1 not applicable to those customers who have surrender the connection before the installment plan.</li>
                    </ul>

                    <hr class="mt-4">


                    <div class="tab-content mt-5">

                        <div class="tab-pane active" role="tabpanel" id="step1">
                            <div class="row mb-5">
                                <div class="col-md-12 application-step">
                                    <div class="row">
                                        <div class="col-3 active">
                                            <p>1</p>
                                            <span>Select City</span>
                                        </div>
                                        <div class="col-3">
                                            <p>2</p>
                                            <span>Residential Information</span>
                                        </div>
                                        <div class="col-3">
                                            <p>3</p>
                                            <span>Personal Information</span>
                                        </div>
                                        <div class="col-3">
                                            <p>4</p>
                                            <span>Payment</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <h2 class="f-18 mb-4"><b>Step 1 </b> - Please choose your city</h2>
                            <p class="text-danger">* Required Fields</p>

                            <div class="row">
                                <div class="col-md-4 form-group">
                                    <select name="location_id" class="form-control" id="location_id" onchange="getPinCodes(this,'pincodes');">
                                        <option value="">Select City*</option>
                                        @foreach($locations as $location)
                                        <option value="{{$location->id}}" {{ ($connection && ($connection->location == $location->name)) || (old('location_id') == $location->id) ? 'selected' : '' }}>
                                            {{$location->name}}
                                        </option>
                                        @endforeach
                                    </select>

                                    <p id="locationErr" style="display: none; color:red;">City field is required.</p>
                                </div>

                                <div class="col-md-4 form-group {{{ $errors->has('connection_type') ? 'has-error' : '' }}}">
                                    <select class="form-control" id="connection_type" name="connection_type" onchange="getConnectionType(this)">
                                        <option value="">Select Type*</option>
                                        @foreach($connectionTypes as $connectionType)
                                        <option value="{{ $connectionType[0] }}" {{ ($connection && ($connection->connection_type == $connectionType[0])) || (old('connectionType') == $connectionType[0]) ? 'selected' : '' }}>
                                            {{ucFirst($connectionType[1])}}
                                        </option>
                                        @endforeach
                                    </select>
                                    {!! $errors->first('connection_type', '<label class="control-label" for="connection_type">:message</label>')!!}
                                    <p id="connectionTypeErr" style="display: none; color:red;">Connection type field is required.</p>


                                </div>

                                <div class="col-md-4 form-group {{{ $errors->has('postal_code') ? 'has-error' : '' }}}" id="pincodes">
                                    <select name="blank_postal_code" class="form-control selectpicker" data-live-search="true" id="blank_postal_code">
                                        <option value="">Select Pincode* </option>
                                    </select>
                                    {!! $errors->first('postal_code', '<label class="control-label" for="postal_code">:message</label>')!!}

                                    <p id="pincodeErr" style="display: none; color:red;">Pincode field is required.</p>

                                </div>

                                <div class="col-md-4 form-group {{{ $errors->has('society_master_id') ? 'has-error' : '' }}}" id="society-master">
                                    <select name="blank_society" class="form-control selectpicker" data-live-search="true" id="blank_society">
                                        <option value="">Select Society*</option>
                                    </select>
                                    {!! $errors->first('society_master_id', '<label class="control-label" for="society_master_id">:message</label>')!!}

                                    <p id="societyMasterErr" style="display: none; color:red;">Society field is required.</p>
                                </div>

                            </div>

                            <button type="button" data-toggle="tab" data-target="" class="btn btn-primary mt-4" onclick="saveAndNext();">Save and Next <i class="fa ml-2 fa-arrow-circle-right"></i></button>

                        </div>
                        <div class="tab-pane" role="tabpanel" id="step2">
                            <div class="row mb-5">
                                <div class="col-md-12 application-step">
                                    <div class="row">
                                        <div class="col-3">
                                            <p>1</p>
                                            <span>Select City</span>
                                        </div>
                                        <div class="col-3 active">
                                            <p>2</p>
                                            <span>Residential Information</span>
                                        </div>
                                        <div class="col-3">
                                            <p>3</p>
                                            <span>Personal Information</span>
                                        </div>
                                        <div class="col-3">
                                            <p>4</p>
                                            <span>Payment</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <h2 class="f-18 mb-4"><b>Step 2 </b> - Residential Information</h2>
                            <p class="text-danger">* Required Fields</p>
                            <div class="row">
                                <div class="col-md-3 form-group">
                                    <input type="text" class="form-control" placeholder="Flat No*" maxlength="180" name="flat_no" id="flat_no">
                                    <p id="flatErr" style="display: none; color:red;">Flat no field is required.</p>
                                </div>
                                <div class="col-md-3 form-group">
                                    <input type="text" class="form-control" placeholder="Floor*" maxlength="180" name="floor" id="floor">
                                    <p id="floorErr" style="display: none; color:red;">Floor field is required.</p>
                                </div>
                                <div class="col-md-3 form-group">
                                    <input type="text" class="form-control" placeholder="Plot No/Sector No" maxlength="180" name="plot_no" id="plot_no">
                                </div>
                                <div class="col-md-3 form-group">
                                    <input type="text" class="form-control" placeholder="wing" maxlength="180" name="wing" id="wing">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-4 form-group">
                                    <select class="form-control" id="type_of_house" name="type_of_house">
                                        <option value="" selected>Select Type of House*</option>
                                        <option value="flat">Flat</option>
                                        <option value="plot">Plot</option>
                                    </select>
                                    <p id="houseTypeErr" style="display: none; color:red;">This field is required.</p>
                                </div>
                                <div class="col-md-4 form-group">
                                    <input type="text" class="form-control" placeholder="Building Name" maxlength="180" name="building_name" id="building_name">
                                </div>
                                <div class="col-md-4 form-group">
                                    <input type="text" name="apartment" id="apartment" class="form-control" maxlength="180" placeholder="Enter apartment" readonly>
                                </div>

                                <div class="col-md-4  form-group">
                                    <input type="text" name="area" id="area" class="form-control" maxlength="180" placeholder="Enter Area">
                                </div>
                                <div class="col-md-4  form-group">
                                    <input type="text" class="form-control" placeholder="Enter road name" maxlength="180" name="road_name" id="road_name">
                                </div>
                                <div class="col-md-4 form-group">
                                    <input type="text" class="form-control" placeholder="Enter landmark" maxlength="180" name="landmark" id="landmark" readonly>
                                </div>

                                <div class="col-md-4 form-group">
                                    <input type="text" class="form-control" placeholder="Enter location" maxlength="180" name="location" id="location" readonly>
                                </div>
                                <div class="col-md-4 form-group">
                                    <input type="text" class="form-control" placeholder="City/ District" maxlength="180" id="city" name="city">
                                </div>
                                <div class="col-md-4 form-group">
                                    <input type="text" class="form-control" placeholder="Postal code" maxlength="180" name="postal_code" id="postal_code_new" readonly>
                                </div>

                                <div class="col-md-4 form-group" id="residence_type_id_div">
                                    <select class="form-control" id="residence_type_id" name="residence_type_id">
                                        <option value="">Select Residence Type</option>
                                    </select>
                                    {{-- <p id="residenceTypeErr" style="color:red;">This field is required.</p> --}}
                                </div>
                            </div>
                            <input type="hidden" name="online_connection_id" id="online_connection_id">

                            <button type="button" data-toggle="tab" data-target="#step1" class="btn mr-2 btn-outline-secondary mt-4" onclick="previousFromResidential();"><i class="fa ml-1 fa-arrow-circle-left"></i> Previous</button>

                            <button type="button" data-toggle="tab" data-target="" class="btn btn-primary mt-4" onclick="saveAndNextFormTwo();">Save and Next<i class="fa ml-2 fa-arrow-circle-right"></i></button>

                        </div>
                        <div class="tab-pane" role="tabpanel" id="step3">
                            <div class="row mb-5">
                                <div class="col-md-12 application-step">
                                    <div class="row">
                                        <div class="col-3">
                                            <p>1</p>
                                            <span>Select City</span>
                                        </div>
                                        <div class="col-3">
                                            <p>2</p>
                                            <span>Residential Information</span>
                                        </div>
                                        <div class="col-3 active">
                                            <p>3</p>
                                            <span>Personal Information</span>
                                        </div>
                                        <div class="col-3">
                                            <p>4</p>
                                            <span>Payment</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <h2 class="f-18 mb-4"><b>Step 3 </b> - Personal Information</h2>
                            <div class="row">
                                <div class="col-md-3 form-group">
                                    <select class="form-control" id="title" name="title">
                                        <option value="" selected>Title*</option>
                                        <option value="Mr.">Mr.</option>
                                        <option value="Ms.">Ms.</option>
                                    </select>
                                    <p id="titleErr" style="display:none;color:red;">Title field is required.</p>

                                </div>

                                <div class="col-md-3 form-group">
                                    <input type="text" class="form-control" placeholder="First Name*" name="first_name" id="first_name" maxlength="180">
                                    <p id="fnErr" style="display:none;color:red;">First name field is required.</p>

                                </div>

                                <div class="col-md-3 form-group">
                                    <input type="text" class="form-control" placeholder="Middle Name" name="middle_name" id="middle_name" maxlength="180">
                                </div>

                                <div class="col-md-3 form-group">
                                    <input type="text" class="form-control" placeholder="Last Name*" name="last_name" id="last_name" maxlength="180">
                                    <p id="lnErr" style="display:none;color:red;">Last name field is required.</p>

                                </div>



                                <div class="col-md-4 form-group">
                                    <input type="text" class="form-control" placeholder="Mobile No*" name="mobile" id="mobile" onkeypress="NumOnly(event)" onpaste="return false;" maxlength="10">
                                    <p id="mobileErr" style="display:none;color:red;"></p>

                                </div>
                                <div class="col-md-4 form-group">
                                    <input type="email" class="form-control" placeholder="Email*" name="email" id="email" onkeypress="emailOnly(event)" onpaste="return false;" maxlength="180">
                                    <p id="emailErr" style="display:none;color:red;">Email field is required.</p>
                                    <p id="validEmailErr" style="display:none;color:red;">The email must be a valid email address.</p>
                                    <p id="existEmailErr" style="display:none;color:red;">Email is already exist, please choose different.</p>

                                </div>

                                <!-- <div class="col-md-4 form-group">
                                <input type="text" class="form-control" placeholder="Aadhar No" name="aadhar_no" id="aadhar_no">
                                <p id="aadharErr" style="display:none;color:red;">Aadhar no. field is required.</p>  
                            </div> -->

                                <div class="col-md-4 form-group">
                                    <input type="hidden" class="form-control" placeholder="PAN No" name="pan_no" id="pan_no" onkeypress="AlphaNumeric(event)" onpaste="return false;" maxlength="10">
                                    <p id="panErr" style="display:none;color:red;">Pan no. field is required.</p>
                                    <p id="invalidPanErr" style="display:none;color:red;">Invalid Pan No.</p>
                                    <p id="existPanNoErr" style="display:none;color:red;">Pan no. is already exist, please choose different.</p>


                                </div>

                                <!-- isb - 17 feb 2024
                                <div class="col-md-4 form-group">
                                    <input type="text" class="form-control" placeholder="Tel (Res)" name="" id="" onkeypress="NumOnly(event)" onpaste="return false;" maxlength="20">
                                </div>
                                <div class="col-md-4 form-group">
                                    <input type="text" class="form-control" placeholder="Tel (Off)" name="residential_tel_number" id="residential_tel_number" onkeypress="NumOnly(event)" onpaste="return false;" maxlength="20">
                                </div>
								isb - 17 feb 2024 -->
								
								<input type="hidden" class="form-control" name="" id="" value="" />
								<input type="hidden" class="form-control" name="residential_tel_number" id="residential_tel_number" value="" />
								
                            </div>
                            <div class="row">

                                <div class="col-md-4 form-group">
                                    <label>Date of birth*</label>
                                    <input type="date" class="form-control" name="dob" id="dob">
                                    <p id="dobErr" style="display:none;color:red;">Dob field is required.</p>
                                    <p id="dobErrAge" style="display:none;color:red;">You must be 18 Years Old.</p>
                                </div>

                                <div class="col-md-4 form-group">
								    <!--
                                    <label>Do You Have a LPG connection in Your name?*</label>
									<select class="form-control" name="is_your_name_in_lpg_connection" id="is_your_name_in_lpg_connection" onchange="getLPGInfo(this.value);">
                                        <option selected value="">Select</option>
                                        <option value="1">Yes</option>
                                        <option value="0">No</option>
                                    </select>
                                    <p id="lpgConnectionErr" style="display:none;color:red;">This field is required.</p>
									-->
								    <input type="hidden" class="form-control" name="is_your_name_in_lpg_connection" id="is_your_name_in_lpg_connection" value="0"/>
                                </div>
                            </div>
                            <div class="row" style="display:none;" id="lpgConnectionDivData">
                                <div class="col-md-4 form-group" id="company_master_id_div">
                                    <select class="form-control" name="company_master_id" id="company_master_id">
                                        <option selected>Please Select LPG Company*</option>
                                    </select>
                                    <p id="company_masterErr" style="display:none;color:red;">LPG company field is required.</p>


                                </div>
                                <div class="col-md-4 form-group">
                                    <input type="text" class="form-control" placeholder="Name of the LPG Distributor*" name="lpg_distributor_name" id="lpg_distributor_name" maxlength="180">
                                    <p id="lpg_distributor_nameErr" style="display:none;color:red;">Distributor name field is required.</p>


                                </div>
                                <div class="col-md-4 form-group">
                                    <input type="text" class="form-control" placeholder="LPG Consumer No.*" name="lpg_customer_number" id="lpg_customer_number" onkeypress="NumOnly(event)" onpaste="return false;" maxlength="25">
                                    <p id="customerNumErr" style="display:none;color:red;">LPG Consumer No. field is required.</p>
                                </div>
                            </div>



                            <button type="button" data-toggle="tab" data-target="#step2" class="btn mr-2 btn-outline-secondary mt-4" onclick="previousFromPersonalInfo();"><i class="fa ml-1 fa-arrow-circle-left"></i> Previous</button>

                            <button type="button" data-toggle="tab" data-target="" class="btn btn-primary mt-4" onclick="saveAndNextFormThree();">Save and Next <i class="fa ml-2 fa-arrow-circle-right"></i></button>



                        </div>


                        <div class="tab-pane" role="tabpanel" id="step4">
                            <div class="row mb-5">
                                <div class="col-md-12 application-step">
                                    <div class="row">
                                        <div class="col-3">
                                            <p>1</p>
                                            <span>Select City</span>
                                        </div>
                                        <div class="col-3">
                                            <p>2</p>
                                            <span>Residential Information</span>
                                        </div>
                                        <div class="col-3 active">
                                            <p>3</p>
                                            <span>Personal Information</span>
                                        </div>
                                        <div class="col-3">
                                            <p>4</p>
                                            <span>Payment</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <h2 class="f-18 mb-4"><b>Step 3 </b> - Application Details</h2>
                            <p class="text-danger">* Required Fields</p>

                            <div class="row">
                                <div class="col-md-4 form-group">
                                    <p class="mb-0 ml-2">Name</p>
                                    <label class="bg-light p-2 d-block rounded"><strong id="appDName"></strong></label>
                                </div>
                                <div class="col-md-4 form-group">
                                    <p class="mb-0 ml-2">Flat No</p>
                                    <label class="bg-light p-2 d-block rounded"><strong id="appDFlatNo"></strong></label>
                                </div>
                                <div class="col-md-4 form-group">
                                    <p class="mb-0 ml-2">Society Name</p>
                                    <label class="bg-light p-2 d-block rounded"><strong id="appDSociety"></strong></label>
                                </div>
                                <div class="col-md-4 form-group">
                                    <p class="mb-0 ml-2">Building</p>
                                    <label class="bg-light p-2 d-block rounded"><strong id="appDBuilding"></strong></label>
                                </div>
                                <div class="col-md-4 form-group">
                                    <p class="mb-0 ml-2">Location</p>
                                    <label class="bg-light p-2 d-block rounded"><strong id="appDLocation"></strong></label>
                                </div>
                                <div class="col-md-4 form-group">
                                    <p class="mb-0 ml-2">Mobile</p>
                                    <label class="bg-light p-2 d-block rounded"><strong id="appDMobile"></strong></label>
                                </div>
                                <div class="col-md-4 form-group">
                                    <p class="mb-0 ml-2">Email</p>
                                    <label class="bg-light p-2 d-block rounded"><strong id="appDEmail"></strong></label>
                                </div>
                            </div>



                            <button type="button" data-toggle="tab" data-target="#step3" class="btn mr-2 btn-outline-secondary mt-4" onclick="previousFromApplicationDetail();"><i class="fa ml-1 fa-arrow-circle-left"></i> Previous</button>

                            <button type="button" data-toggle="tab" data-target="#complete" class="btn btn-primary mt-4" onclick="getPaymentFormData();">Confirm and Next<i class="fa ml-2 fa-arrow-circle-right"></i></button>

                            {{-- <button type="button" id="nonGassified" style="display:none;" class="btn btn-primary mt-4" onclick="redirectToSuccessPage();">Confirm and Next<i class="fa ml-2 fa-arrow-circle-right"></i></button> --}}

                        </div>


                        <div class="tab-pane" role="tabpanel" id="complete">
                            <div class="row mb-5">
                                <div class="col-md-12 application-step">
                                    <div class="row">
                                        <div class="col-3">
                                            <p>1</p>
                                            <span>Select City</span>
                                        </div>
                                        <div class="col-3">
                                            <p>2</p>
                                            <span>Residential Information</span>
                                        </div>
                                        <div class="col-3">
                                            <p>3</p>
                                            <span>Personal Information</span>
                                        </div>
                                        <div class="col-3 active">
                                            <p>4</p>
                                            <span>Payment</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <h2 class="f-18 mb-4"><b>Step 4 </b> - Payment</h2>
                            <p class="text-danger">* Required Fields</p>

                            <form role="form" action="/online-connection/new-connection-payment" method="post" enctype="multipart/form-data" onsubmit="return step4Check()">
                                @csrf
                                <div id="gassified-payment">
                                    <label class=""><input class="" type="radio" name="online_payment" id="online_payment" value="1"> Online Payment </label>
                                    <label id="onlinePaymentErr" style="color:red;">Please select this option.</label>
                                </div>

                                <div class="row">
                                    <div class="col-md-12">
                                        <p>Please Upload Scanned copy of the of the document mention in the below list (Please select pdf file only)*:-</p>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-4 form-group" id="proof_of_add_div">
                                        <select class="form-control" id="proof_of_add_id" name="proof_of_add_id">
                                            <option value="" selected>Proof of Address</option>
                                        </select>
                                        <label id="proofIdErr" style="color:red;">This field is required.</label>
                                    </div>

                                    <div class="col-md-4 form-group">
                                        <input type="file" name="doc" id="doc" class="form-control" accept=".pdf">
                                        <label id="docErr" style="color:red;"></label>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-4 form-group" id="social_link_div_id">
                                        <label>Where did you find :-</label>
                                        <select class="form-control" id="social_link" name="social_links" onchange="dmaName1(this);">
                                            <option value="" selected>Select</option>
                                        </select>
                                        <label id="socialLinkErr" style="color:red;">This field is required.</label>
                                    </div>
                                </div>

                                <div class="row" id="dma_select_div" style="display:none">
                                    <div class="col-md-4 form-group">
                                        <label>Select DMA</label>
                                        <select class="form-control" id="dma_select" name="dma_master_id" onchange="dmaName2(this);">
                                            <option value="" selected>Select</option>
                                        </select>
                                        <label id="dmaSelectErr" style="color:red;">This field is required.</label>
                                    </div>
                                </div>

                                <div class="row" id="dma_name_div" style="display:none">
                                    <div class="col-md-4 form-group">
                                        <label>Name of DMA</label>
                                        <input type="text" class="form-control" placeholder="Enter DMA Name" maxlength="99" name="dma_name" id="dmaName">
                                        <label id="dmaErr" style="color:red;">This field is required.</label>
                                    </div>
                                </div>

                             <!-- added by isb: 17 feb 2024 -->
							 <div id="isb_payment_type_area">
							  Please select an option*:
							  <div class="row">
                                <div class="col-md-4 form-group">
								    <select class="form-control" id="isb_payment_type" name="isb_payment_type" onchange="isbPaymentType(this.value);">
									   <option value="" selected="">Select</option>
									   <option value="campaign">Limited Period offer Registration Scheme 2,Pay Only Rs.500</option>
									   <option value="regular">Limited Period offer Registration Scheme 1, Pay only Rs.5500</option>
									</select>
									<label id="isb_payment_SelectErr" style="color:red;">This field is required.</label>		
                                </div>
                                
                                </div>  
                              </div>
                            <!-- //added by isb: 17 feb 2024 -->
							  

                              <div id="gassified-section">
                                
								
								<!-- added by isb: 17 feb 2024 -->
								<div id="gassified-section_campaign" class="isb-gassified-section" style="display:none;">
								    <div>If Customer want to  register with Domestic Scheme, Kindly note the same,</div>
                                        <ul class="mt-4 mb-4">
                                         <li>Apply for a PNG connection by paying just Rs.500 (Non-refundable application fees) </li>
                                         <li>The remaining Rs. 5,500 interest free refundable security deposit can be paid easy Rs. 500 instalments over 11 bi-monthly billing cycles. Saved Rs.550 with waived connection charges</li>
                                        </ul>
									
								</div>
								<!-- //added by isb: 17 feb 2024 -->
								
								
								<!-- added by isb: 17 feb 2024 -->
								<div id="gassified-section_regular" class="isb-gassified-section" style="display:none;">
								    <div>Customer wants to follow regular registration process as,</div>
                                     <ul class="mt-4 mb-4" id="deposit_master_ul">
                                        <li id="security_deposit"></li>
                                        <li id="others_deposit"></li>
                                        <li id="online_charge"></li>
                                        <li id="total_amount"></li>
                                    </ul>
								</div>
								<!-- //added by isb: 17 feb 2024 -->
								
								<div class="row" id="isb_amount_pay_area" style="visibility:hidden;">
                                    <div class="col-md-4 form-group">
									  <label>Total Amount To Be Paid :-</label>
									  <input type="text" class="form-control" placeholder="Amount to be paid" readonly name="paid_amount" id="paid_amount" value=""/> 
								  </div>
								</div>	
								
								
                                 <div id="paymentoptionData" class="mb-3"></div>
                                </div>

                                <div class="row">
                                    <div class="col-md-4">
                                        <label>OTP received on Mobile or Email</label>
                                        <input type="text" class="form-control" placeholder="Enter OTP" maxlength="5" id="otp">
                                        <label id="otpErr" style="color:red;"></label>
                                        <div id="some_div"></div>
                                        <p class="text-right" id="resend-otp"><a href="" class="text-primary fw-bold f-13">Resend OTP</a></p>
                                        <p class="text-right mt-1" id="spinner"><i class="fa fa-circle-o-notch fa-spin" style="font-size:20px"></i></p>
                                    </div>
                                </div>

                                <div class="row mt-3">
                                    <div class="col-md-12">
                                        <input class="" type="checkbox" name="terms_and_condition" id="terms_and_condition" value="1" onclick="checkTermsAndConditions();">
                                        <label> I have read & accepted the <a href="/assets/frontend/pdf/Terms & Conditions_Gasified.pdf" target="_new" class="text-danger">Terms and Conditions</a> </label>
                                    </div>
                                </div>
                                <input type="hidden" name="online_connection_table_id" id="online_connection_table_id">

                                <button type="button" data-toggle="tab" data-target="#step4" class="btn mr-2 btn-outline-secondary mt-4" onclick="previousFromPayment();"><i class="fa ml-1 fa-arrow-circle-left"></i> Previous</button>

                                <button type="submit" id="submitBtn" class="btn btn-primary mt-4" disabled>Submit<i class="fa ml-2 fa-send"></i></button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>


@endsection

@section('styles')
@endsection

@section('scripts')
@parent
<script src="/assets/frontend/js/validation.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<script type="text/javascript">
    function getPinCodes(th) {
        var locationId = $('#location_id').val();
        var postalCode = $('#postal_code').val();

        var data = {
            location_id: locationId
            , '_token': '{{{csrf_token()}}}'
        }
        $.ajax({
            url: '/ajax/location-wise-pincodes'
            , type: 'POST'
            , data: data
            , success: function(data) {
                var selectbox = '';
                if (data) {
                    selectbox = '<select name="postal_code" class="form-control" data-live-search="true" onchange="pincodeWiseSocieties(this)" id="postal_code">';
                    selectbox += '<option value="">Select Pincode</option>';
                    $.each(data, function(i, item) {
                        if (item.id == postalCode) {
                            selectbox += '<option value="' + item.postal_code + '" selected="selected">' + item.postal_code + '</option>';
                        } else {
                            selectbox += '<option value="' + item.postal_code + '">' + item.postal_code + '</option>';
                        }
                    });
                    selectbox += '</select>';
                }
                $('#blank_postal_code').css('display', 'none');
                $('#pincodes').css('display', 'block');
                $('#pincodes').html(selectbox);
                getConnectionType(th);
                if (postalCode) {
                    pincodeWiseSocieties();
                }
            }
        });
    }

    function pincodeWiseSocieties(th) {
        var locationId = $('#location_id').val();
        var postalCode = $('#postal_code').val();
        var societyMasterId = "{{ old('society_master_id') }}";

        var data = {
            location_id: locationId,
            postal_code: postalCode
            , '_token': '{{{csrf_token()}}}'
        }
        $.ajax({
            url: '/ajax/pincode-wise-societies'
            , type: 'POST'
            , data: data
            , success: function(data) {
                var selectbox = '';
                if (data) {
                    selectbox = '<select name="society_master_id" class="form-control selectpicker" data-live-search="true" id="society_master_id">';
                    selectbox += '<option value="">Select Society*</option>';
                    $.each(data, function(i, item) {
                        if (item.id == societyMasterId) {
                            selectbox += '<option value="' + item.id + '" selected="selected">' + item.society_name + ' - '+  item.full_address + '</option>';
                        } else {
                            selectbox += '<option value="' + item.id + '">' + item.society_name + ' - '+  item.full_address + '</option>';
                        }
                    });
                    selectbox += '</select></div>';
                }
                $('#blank_society').css('display', 'none');
                $('#society-master').html(selectbox);
                $('#society-master').css('display', 'block');
                $('select').selectpicker();
            }
        });
    }

    $(document).ready(function() {
        if ($('#location_id').val() != '') {
            getPincodes();
        }
    });

    function getConnectionType(th) {
        var connectionType = $('#connection_type').val();
        if (connectionType == 'non-gassified') {
            $('#pincodes').css('display', 'none');
            $('#society-master').css('display', 'none');
        } else {
            $('#pincodes').css('display', 'block');
            $('#society-master').css('display', 'block');
        }
    }

    function saveAndNext() {
        var url = '/online-connection/save-city-tab-data';
        var location_id = $("#location_id").val();
        var connection_type = $("#connection_type").val();
        var blank_society = $("#blank_society").val();
        var blank_postal_code = $("#blank_postal_code").val();

        if (location_id == '') {
            $("#locationErr").show();
        } else {
            $("#locationErr").hide();
        }

        if (connection_type == '') {
            $("#connectionTypeErr").show();
        } else {
            $("#connectionTypeErr").hide();
        }

        if (connection_type == 'gassified' || connection_type == '') {

            if (connection_type == 'gassified') {
                var postal_code = $("#postal_code").val();
                if (postal_code != '') {
                    var societyMasterId = $("#society_master_id").val();
                } else {
                    societyMasterId = '';
                }
            } else {

                if (blank_postal_code == '') {
                    $("#pincodeErr").show();
                } else {
                    $("#pincodeErr").hide();
                }

                if (blank_society == '') {
                    $("#societyMasterErr").show();
                } else {
                    $("#societyMasterErr").hide();
                }

                postal_code = '';
            }

        }

        var token = "{{ csrf_token() }}";

        if (location_id != '' && connection_type != '' && postal_code != '' && societyMasterId != '') {

            $.ajax({
                url: url
                , type: 'POST'
                , data: {
                    location_id: location_id
                    , connection_type: connection_type
                    , postal_code: postal_code
                    , societyMasterId: societyMasterId
                    , '_token': token
                , }
                , success: function(result) {

                    result = JSON.parse(result);

                    // console.log(result.onlineConnectionData.id);
                    $("#online_connection_id").val(result.onlineConnectionData.id);

                    $("#step2").addClass("active");
                    $("#step1").removeClass("active");


                    residenceSelectbox = '';
                    residenceSelectbox = '<select class="form-control" id="residence_type_id" name="residence_type_id">';
                    residenceSelectbox += '<option value="">Select Residence Type</option>';

                    //console.log(result.residenceTypes);
                    for (var i = 0; i < result.residenceTypes.length; i++) {
                        residenceSelectbox += '<option value="' + result.residenceTypes[i].id + '">' + result.residenceTypes[i].name + '</option>';
                    }

                    residenceSelectbox += '</select>';

                    $("#residence_type_id_div").html(residenceSelectbox);

                    if (result.connectionData.society_master) {

                        if (result.connectionData.society_master.society_name != '') {
                            $("#apartment").val(result.connectionData.society_master.society_name);
                        }

                        if (result.connectionData.society_master.landmark != '') {
                            $("#landmark").val(result.connectionData.society_master.landmark);
                        }
                        if (result.connectionData.society_master.location != '') {
                            $("#location").val(result.connectionData.society_master.location);
                        }
                        if (result.connectionData.society_master.postal_code != '') {
                            $("#postal_code_new").val(result.connectionData.society_master.postal_code);
                        }
                    }

                }
            });
        }

    }

    function saveAndNextFormTwo() {
        var url = '/online-connection/save-residential-info-tab-data';

        var online_connection_id = $("#online_connection_id").val();
        var flat_no = $("#flat_no").val();
        var floor = $("#floor").val();
        var plot_no = $("#plot_no").val();
        var wing = $("#wing").val();
        var type_of_house = $("#type_of_house").val();
        var building_name = $("#building_name").val();
        var apartment = $("#apartment").val();
        var area = $("#area").val();
        var road_name = $("#road_name").val();
        var landmark = $("#landmark").val();
        var location = $("#location").val();
        var city = $("#city").val();
        var postal_code = $("#postal_code").val();
        var residence_type_id = $("#residence_type_id").val();
        var token = "{{ csrf_token() }}";

        // console.log(residence_type_id + " hi");

        if (flat_no == '') {
            $("#flatErr").show();
        } else {
            $("#flatErr").hide();
        }

        if (floor == '') {
            $("#floorErr").show();
        } else {
            $("#floorErr").hide();
        }

        if (type_of_house == '') {
            $("#houseTypeErr").show();
        } else {
            $("#houseTypeErr").hide();
        }

        // if(residence_type_id == '') {
        //     $("#residenceTypeErr").show();
        // } else {
        //     $("#residenceTypeErr").hide();
        // }

        if (flat_no != '' && floor != '' && type_of_house != '') {

            $.ajax({
                url: url
                , type: 'POST'
                , data: {
                    online_connection_id: online_connection_id
                    , flat_no: flat_no
                    , floor: floor
                    , plot_no: plot_no
                    , wing: wing
                    , type_of_house: type_of_house
                    , building_name: building_name
                    , apartment: apartment
                    , area: area
                    , road_name: road_name
                    , landmark: landmark
                    , location: location
                    , city: city
                    , postal_code: postal_code
                    , residence_type_id: residence_type_id
                    , '_token': token
                , }
                , success: function(result) {
                    //console.log(result);

                    result = JSON.parse(result);
                    //console.log('id=>' +result.connectionData.id);

                    var companyMasterSelectbox = '';
                    companyMasterSelectbox = '<select class="form-control" id="company_master_id" name="company_master_id">';
                    companyMasterSelectbox += '<option value="">Please Select LPG Company</option>';

                    //console.log(result.residenceTypes);
                    for (var i = 0; i < result.companyMasters.length; i++) {
                        companyMasterSelectbox += '<option value="' + result.companyMasters[i].id + '">' + result.companyMasters[i].name + '</option>';
                    }

                    companyMasterSelectbox += '</select>';

                    $("#company_master_id").html(companyMasterSelectbox);

                    // $("#online_connection_id").val(result.connectionData.id);

                    $("#step2").removeClass("active");
                    $("#step3").addClass("active");

                }
            });

        }
    }

    function saveAndNextFormThree() {

        var url = '/online-connection/save-personal-info-tab-data';

        var online_connection_id = $("#online_connection_id").val();
        var title = $("#title").val();
        var first_name = $("#first_name").val();
        var middle_name = $("#middle_name").val();
        var last_name = $("#last_name").val();
        var dob = $("#dob").val();
        var email = $("#email").val();
        var mobile = $("#mobile").val();
        var pan_regex = /^([a-zA-Z]){5}([0-9]){4}([a-zA-Z]){1}?$/;
        //var aadhar_no = $("#aadhar_no").val();
        var pan_no = $("#pan_no").val();
        var residential_tel_number = $("#residential_tel_number").val();
        var official_tel_number = $("#official_tel_number").val();
        var is_your_name_in_lpg_connection = $("#is_your_name_in_lpg_connection").val();
        var company_master_id = $("#company_master_id").val();
        var lpg_distributor_name = $("#lpg_distributor_name").val();
        var lpg_customer_number = $("#lpg_customer_number").val();


        var token = "{{ csrf_token() }}";

        //var lpg_connection_data = 'lpg-connection-data';

        if (getAge(dob) < 18) {
            $("#dobErrAge").show();
        } else {
            $("#dobErrAge").hide();
        }

        if (is_your_name_in_lpg_connection == "") {
            $("#lpgConnectionErr").show();
        } else {
            $("#lpgConnectionErr").hide();
        }

        if (is_your_name_in_lpg_connection == '1') {

            if (title == '') {
                $("#titleErr").show();
            } else {
                $("#titleErr").hide();
            }

            if (first_name == '') {
                $("#fnErr").show();
            } else {
                $("#fnErr").hide();
            }

            if (last_name == '') {
                $("#lnErr").show();
            } else {
                $("#lnErr").hide();
            }

            if (dob == '') {
                $("#dobErr").show();
            } else {
                $("#dobErr").hide();
            }

            if (mobile == '') {
                $("#mobileErr").show();
                $("#mobileErr").html('This field is required');
            }
            else if (mobile.length != 10) {
                $("#mobileErr").show();
                $("#mobileErr").html('Please enter valid Mobile Number');
            }
             else {
                $("#mobileErr").hide();
            }

            if (email == '') {
                $("#emailErr").show();
            } else {
                $("#emailErr").hide();
            }

            // if(aadhar_no == '') {
            //     $("#aadharErr").show();
            // } else {
            //     $("#aadharErr").hide();
            // } 

            // if (pan_no == '') {
            //     $("#panErr").show();
            // } else {
            //     $("#panErr").hide();
            // }

            if (pan_no == '') {
                // $("#panErr").show();
            } else if (!pan_regex.test(pan_no)) {
                $("#panErr").hide();
                $("#invalidPanErr").show();
            } else {
                $("#panErr").hide();
                $("#invalidPanErr").hide();
            }


            if (company_master_id == '') {
                $("#company_masterErr").show();
            } else {
                $("#company_masterErr").hide();
            }

            if (lpg_distributor_name == '') {
                $("#lpg_distributor_nameErr").show();
            } else {
                $("#lpg_distributor_nameErr").hide();
            }

            if (lpg_customer_number == '') {
                $("#customerNumErr").show();
            } else {
                $("#customerNumErr").hide();
            }

            if (title != '' && first_name != '' && last_name != '' && dob != '' && mobile != '' && mobile.length == 10 && email != '' && isValidEmail(email) && (pan_no == '' || pan_regex.test(pan_no)) && is_your_name_in_lpg_connection != '' && company_master_id != '' && lpg_distributor_name != '' && lpg_customer_number != '' && getAge(dob) > 18) {

                $.ajax({
                    url: url
                    , type: 'POST'
                    , data: {
                        online_connection_id: online_connection_id
                        , title: title
                        , first_name: first_name
                        , last_name: last_name
                        , middle_name: middle_name
                        , dob: dob
                        , email: email
                        , mobile: mobile
                        , pan_no: pan_no
                        , residential_tel_number: residential_tel_number
                        , official_tel_number: official_tel_number
                        , is_your_name_in_lpg_connection: is_your_name_in_lpg_connection
                        , company_master_id: company_master_id
                        , lpg_distributor_name: lpg_distributor_name
                        , lpg_customer_number: lpg_customer_number
                        , '_token': token
                    , }
                    , success: function(result) {

                        result = JSON.parse(result);
                        console.log(result);
                        // move to next step..
                        $("#step3").removeClass("active");
                        $("#step4").addClass("active");

                        // set form data here..
                        $("#appDName").html(result.newConnectionInfo.first_name + ' ' + result.newConnectionInfo.last_name);
                        $("#appDFlatNo").html(result.newConnectionInfo.flat_no);
                        $("#appDSociety").html(result.SocietyMaster.society_name);
                        $("#appDBuilding").html(result.newConnectionInfo.building_name);
                        $("#appDLocation").html(result.Location.name);
                        $("#appDMobile").html(result.newConnectionInfo.mobile);
                        $("#appDEmail").html(result.newConnectionInfo.email);
                    }
                });
            }

        } else {

            if (title == '') {
                $("#titleErr").show();
            } else {
                $("#titleErr").hide();
            }

            if (first_name == '') {
                $("#fnErr").show();
            } else {
                $("#fnErr").hide();
            }

            if (last_name == '') {
                $("#lnErr").show();
            } else {
                $("#lnErr").hide();
            }

            if (dob == '') {
                $("#dobErr").show();
            } else {
                $("#dobErr").hide();
            }

            if (mobile == '') {
                $("#mobileErr").show();
                $("#mobileErr").html('This field is required');
            }
            else if (mobile.length != 10) {
                $("#mobileErr").show();
                $("#mobileErr").html('Please enter valid Mobile Number');
            }
             else {
                $("#mobileErr").hide();
            }


            if (email == '') {
                $("#emailErr").show();
                $("#validEmailErr").hide();
            } else {
                if (isValidEmail(email)) {
                    $("#emailErr").hide();
                    $("#validEmailErr").hide();
                } else {
                    $("#validEmailErr").show();
                }
                $("#emailErr").hide();
            }

            // if(aadhar_no == '') {
            //     $("#aadharErr").show();
            // } else {
            //     $("#aadharErr").hide();
            // } 

            if (pan_no == '') {
                // $("#panErr").show();
            } else if (!pan_regex.test(pan_no)) {
                $("#panErr").hide();
                $("#invalidPanErr").show();
            } else {
                $("#panErr").hide();
                $("#invalidPanErr").hide();
            }


            if (title != '' && first_name != '' && last_name != '' && dob != '' && mobile != '' && mobile.length == 10 && email != '' && isValidEmail(email) && (pan_no == '' || pan_regex.test(pan_no)) && is_your_name_in_lpg_connection != '' && getAge(dob) > 18) {

                $.ajax({
                    url: url
                    , type: 'POST'
                    , data: {
                        online_connection_id: online_connection_id
                        , title: title
                        , first_name: first_name
                        , last_name: last_name
                        , middle_name: middle_name
                        , dob: dob
                        , email: email
                        , mobile: mobile
                        , pan_no: pan_no
                        , residential_tel_number: residential_tel_number
                        , official_tel_number: official_tel_number
                        , is_your_name_in_lpg_connection: is_your_name_in_lpg_connection
                        , company_master_id: company_master_id
                        , lpg_distributor_name: lpg_distributor_name
                        , lpg_customer_number: lpg_customer_number
                        , '_token': token
                    , }
                    , success: function(result) {

                        result = JSON.parse(result);
                        console.log(result);
                        // move to next step..
                        $("#step3").removeClass("active");
                        $("#step4").addClass("active");


                        // set form data here..
                        $("#appDName").html(result.newConnectionInfo.first_name + ' ' + result.newConnectionInfo.last_name);
                        $("#appDFlatNo").html(result.newConnectionInfo.flat_no);
                        $("#appDSociety").html(result.SocietyMaster.society_name);
                        $("#appDBuilding").html(result.newConnectionInfo.building_name);
                        $("#appDLocation").html(result.Location.name);
                        $("#appDMobile").html(result.newConnectionInfo.mobile);
                        $("#appDEmail").html(result.newConnectionInfo.email);
                    }
                });
            }
        }

    }


    var timeLeft = 30;
    var timerId = null;
    
	var Campaign_TotalAmnt2Pay = ''; //isb
	var Regular_TotalAmnt2Pay = ''; //isb
	
    function getPaymentFormData() {

        var url = '/online-connection/get-payment-form-data';
        var token = "{{ csrf_token() }}";
        var online_connection_id = $("#online_connection_id").val();
        $('#onlinePaymentErr').hide();
        $('#proofIdErr').hide();
        $('#docErr').hide();
        $('#socialLinkErr').hide();
        $('#dmaSelectErr').hide();
        $('#dmaErr').hide();
        $('#paymentChannelErr').hide();
        $('#otpErr').hide();

        $('#resend-otp').hide();
        $('#spinner').hide();
        $('#isb_payment_SelectErr').hide(); //isb

        $.ajax({
            url: url
            , type: 'POST'
            , data: {
                'online_connection_id': online_connection_id
                , '_token': token
            , }
            , success: function(result) {

                result = JSON.parse(result);
                var email_id = result.newConnectionInfo.email;
                var mobile_number = result.newConnectionInfo.mobile;
                var sms_type = "PNG Registration";
                var data = {
                    email_id: email_id
                    , sms_type: sms_type
                    , mobile_number: mobile_number
                    , type: 'new-connection'
                    , '_token': '{{{csrf_token()}}}'
                }
                $.ajax({
                    url: '/ajax/generate-otp'
                    , type: 'POST'
                    , data: data
                    , success: function(data) {
                        var data = JSON.parse(data);
                        timeLeft = 30;
                        customtimer();
                    }
                });
                $('#con-type').val(result.newConnectionInfo.connection_type);
                $("#gassified-payment").show();
                $("#gassified-section").show();
                if (result.newConnectionInfo.connection_type == 'non-gassified') {
                    $("#gassified-payment").hide();
                    $("#gassified-section").hide();
                }
                var onlineConId = $("#online_connection_id").val();

                $("#online_connection_table_id").val(onlineConId);

                var proffOfAddSelectbox = '';
                proffOfAddSelectbox = '<select class="form-control" id="proof_of_add_id" name="proof_of_add_id">';
                proffOfAddSelectbox += '<option value="" selected>Select Proof of Address</option>';

                //console.log(result.residenceTypes);
                for (var i = 0; i < result.ProofOfAddress.length; i++) {
                    proffOfAddSelectbox += '<option value="' + result.ProofOfAddress[i].id + '">' + result.ProofOfAddress[i].name + '</option>';
                }

                proffOfAddSelectbox += '</select>';
                proffOfAddSelectbox += '<label id="proofIdErr" style="color:red;">This field is required.</label>';

                $("#proof_of_add_div").html(proffOfAddSelectbox);

                // show social link drop down
                var socialSelectbox = '';
                socialSelectbox += '<label>Where did you find :-</label>';
                socialSelectbox += '<select class="form-control" id="social_link" name="social_links" onchange="dmaName1(this);">';
                socialSelectbox += '<option value="" selected>Select</option>';

                //console.log(result.residenceTypes);
                for (var i = 0; i < result.SocialLink.length; i++) {
                    socialSelectbox += '<option value="' + result.SocialLink[i].id + '">' + result.SocialLink[i].name + '</option>';
                }

                socialSelectbox += '</select>';
                socialSelectbox += '<label id="socialLinkErr" style="color:red;">This field is required.</label>';

                var dmaOptions = '<option value="" selected>Select</option>';
                for (var i = 0; i < result.dmaOptions.length; i++) {
                    dmaOptions += '<option value="' + result.dmaOptions[i].id + '">' + result.dmaOptions[i].dma_name + ' (' + result.dmaOptions[i].dma_code + ')</option>';
                }
                dmaOptions += '<option value="Other">Other</option>';

                $("#social_link_div_id").html(socialSelectbox);
                $("#dma_select").html(dmaOptions);
                $("#security_deposit").html(result.DepositMaster[0].security_deposit);
                $("#others_deposit").html(result.DepositMaster[0].others_deposit);
                $("#online_charge").html(result.DepositMaster[0].online_charge);

                var total_amount_html = 'Total Amount = ' + result.DepositMaster[0].total_amount + ' -/';
                $("#total_amount").html(total_amount_html);


                $("#paid_amount").val(result.DepositMaster[0].total_amount);
				
				Regular_TotalAmnt2Pay = result.DepositMaster[0].total_amount;
                Campaign_TotalAmnt2Pay =  '500.00';
                

                var paymentoptions = '';
                for (var i = 0; i < result.paymentChannels.length; i++) {

                    paymentoptions += '<input type="radio" name="payment_channel_id" class="mr-2" value="' + result.paymentChannels[i].id + '" >' + result.paymentChannels[i].name + " " + '<img src="' + result.paymentChannels[i].image + '"/><br/>';

                }
                paymentoptions += '<label id="paymentChannelErr" style="color:red;">Please Select Payment Method!</label>';

                //$("#paymentoptionData").html(paymentoptions);
                $("#paymentoptionData").html(paymentoptions).hide(); //isb

                $('#onlinePaymentErr').hide();
                $('#proofIdErr').hide();
                $('#dmaErr').hide();
                $('#docErr').hide();
                $('#socialLinkErr').hide();
                $('#paymentChannelErr').hide();

                // move to next step..
                $("#step4").removeClass("active");
                $("#complete").addClass("active");

            }
        });

        
    }

    function previousFromResidential() {
        $("#step2").removeClass('active');
        $("#step1").addClass('active');
    }

    function previousFromPersonalInfo() {
        $("#step3").removeClass('active');
        $("#step2").addClass('active');
    }

    function previousFromApplicationDetail() {
        $("#step4").removeClass('active');
        $("#step3").addClass('active');
    }

    function previousFromPayment() {
        $("#complete").removeClass('active');
        $("#step4").addClass('active');
    }

    function getLPGInfo(value) {
        if (value == 1) {
            $("#lpgConnectionDivData").show();
        } else {
            $("#lpgConnectionDivData").hide();
        }
    }

    function checkTermsAndConditions() {
        var isChecked = ($('input[name=terms_and_condition]').is(':checked'));
        var isCheckedPaymentOpt = $('input[name="payment_channel_id"]:checked').val();

        if (isChecked && isCheckedPaymentOpt != '') {
            $("#submitBtn").removeAttr("disabled").button('refresh');
        } else {
            $("#submitBtn").attr("disabled", "disabled").button('refresh');
        }
    }

    function isValidEmail(email) {
        var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
        return regex.test(email);
    }

    function redirectToSuccessPage() {
        var url = '/apply-new-connection/success';
        window.location.replace(url);
    }

    // function checkExistField(field, type) {

    //     var url = '/apply-new-connection/check-exist-field';
    // 	var token = "{{ csrf_token() }}";

    //     $.ajax({
    //         url:url,
    //         type:'POST',
    //         data:{
    //             '_token': token,
    //             field:field,
    //             type:type,
    //         },
    //         success:function(result){

    //             if(result !='record_not_exists') {

    //                 result = JSON.parse(result);

    //                 if(result.msg == 'record_exists') {
    //                     if(result.type =='email') {
    //                         // $("#existEmailErr").show();
    //                         $("#emailErr").hide();
    //                         $("#validEmailErr").hide();
    //                         $("#email").val('');
    //                     } else {
    //                         // $("#existPanNoErr").show();
    //                         $("#invalidPanErr").hide();
    //                         $("#panErr").hide();
    //                         $("#pan_no").val('');
    //                     }
    //                 } else {
    //                     // $("#existEmailErr").hide();
    //                     // $("#existPanNoErr").hide();
    //                 }
    //             } else {
    //                 // $("#existEmailErr").hide();
    //                 // $("#existPanNoErr").hide();
    //             }

    //         } 
    //     });
    // }

    function getAge(DOB) {
        var today = new Date();
        var birthDate = new Date(DOB);
        var age = today.getFullYear() - birthDate.getFullYear();
        var m = today.getMonth() - birthDate.getMonth();
        if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
            age--;
        }
        return age;
    }
    
	
   //updated by isb - 17 feb 2024	
    function step4Check() {
        var connection_type = $("#connection_type").val();
        if (connection_type == 'non-gassified') {
            var proofId = $('#proof_of_add_id').find(":selected").val();
            var doc = $("#doc").val();
            var socialLink = $('#social_link').find(":selected").val();
            var socialLinkText = $('#social_link').find(":selected").text();
            var dmaSelect = $('#dma_select').find(":selected").val();
            var dmaName = $('#dmaName').val();
            var otp = $('#otp').val();
            
			var isb_payment_type = $('#isb_payment_type').val(); //isb
			
			
            $('#proofIdErr').hide();
            $('#docErr').hide();
            $('#socialLinkErr').hide();
            $('#dmaErr').hide();
            $('#dmaSelectErr').hide();
            $('#otpErr').hide();
			$('#isb_payment_SelectErr').hide(); //isb
			
            if (isb_payment_type == '' || proofId == '' || doc == '' || socialLink == '' || otp == '' || (dmaSelect == '' && socialLinkText == 'Direct Marketing Agents') || (dmaName == '' && socialLinkText == 'Direct Marketing Agents' && dmaSelect == 'Other')) {
                if (isb_payment_type == '') {
                    $('#isb_payment_SelectErr').show();
                }
				if (proofId == '') {
                    $('#proofIdErr').show();
                }
                if (doc == '') {
                    $('#docErr').show();
                    $('#docErr').text('This field is required.');
                }
                if (socialLink == '') {
                    $('#socialLinkErr').show();
                }
                if (otp == '') {
                    $('#otpErr').show();
                    $('#otpErr').text('Please Enter OTP');
                }
                if (dmaSelect == '' && socialLinkText == 'Direct Marketing Agents') {
                    $('#dmaSelectErr').show();
                    $('#dmaSelectErr').text('This field is required.');
                }
                if (dmaName == '' && socialLinkText == 'Direct Marketing Agents' && dmaSelect == 'Other') {
                    $('#dmaErr').show();
                    $('#dmaErr').text('This field is required.');
                }
                return false;
            }
            if(($("#doc").val() != '') && (typeof ($("#doc")[0].files) != "undefined")){
                if (($("#doc").val() != '') && (typeof ($("#doc")[0].files) != "undefined")) {
                    var size = parseFloat(($("#doc")[0].files[0].size / 1024)/1024).toFixed(2);
                    if(size > 2){
                        $('#docErr').show();
                        $('#docErr').text('File must be within 2MB.');
                        return false;
                    }
                }
            }
        } else {
            var online_payment = $("input[name='online_payment']:checked").val();
            var proofId = $('#proof_of_add_id').find(":selected").val();
            var doc = $("#doc").val();
            var socialLink = $('#social_link').find(":selected").val();
            var socialLinkText = $('#social_link').find(":selected").text();
            var dmaSelect = $('#dma_select').find(":selected").val();
            var dmaName = $('#dmaName').val();
            var payment_channel_id = $("input[name='payment_channel_id']:checked").val();
            var otp = $('#otp').val();
			var isb_payment_type = $('#isb_payment_type').val(); //isb

            $('#onlinePaymentErr').hide();
            $('#proofIdErr').hide();
            $('#docErr').hide();
            $('#socialLinkErr').hide();
            $('#dmaErr').hide();
            $('#dmaSelectErr').hide();
            $('#paymentChannelErr').hide();
            $('#isb_payment_SelectErr').hide(); //isb 
			 
            if (isb_payment_type == '' || online_payment == undefined || payment_channel_id == undefined || proofId == '' || doc == '' || socialLink == '' || otp == '' || (dmaSelect == '' && socialLinkText == 'Direct Marketing Agents') || (dmaName == '' && socialLinkText == 'Direct Marketing Agents' && dmaSelect == 'Other')) {
                if (isb_payment_type == '') {
                    $('#isb_payment_SelectErr').show();
                }if(online_payment == undefined)
                    $('#onlinePaymentErr').show();
                if(payment_channel_id == undefined)
                    $('#paymentChannelErr').show();
                if (proofId == '') {
                    $('#proofIdErr').show();
                }
                if (doc == '') {
                    $('#docErr').show();
                    $('#docErr').text('This field is required.');
                }
                if (socialLink == '') {
                    $('#socialLinkErr').show();
                }
                if (otp == '') {
                    $('#otpErr').show();
                    $('#otpErr').text('Please Enter OTP');
                }
                if (dmaSelect == '' && socialLinkText == 'Direct Marketing Agents') {
                    $('#dmaSelectErr').show();
                    $('#dmaSelectErr').text('This field is required.');
                }
                if (dmaName == '' && socialLinkText == 'Direct Marketing Agents' && dmaSelect == 'Other') {
                    $('#dmaErr').show();
                    $('#dmaErr').text('This field is required.');
                }
                return false;
            }
            if(($("#doc").val() != '') && (typeof ($("#doc")[0].files) != "undefined")){
                if (($("#doc").val() != '') && (typeof ($("#doc")[0].files) != "undefined")) {
                    var size = parseFloat(($("#doc")[0].files[0].size / 1024)/1024).toFixed(2);
                    if(size > 2){
                        $('#docErr').show();
                        $('#docErr').text('File must be within 2MB.');
                        return false;
                    }
                }
            }
        }

        var otp = $('#otp').val();
        var email_id = $('#email').val();
        var mobile_number = $('#mobile').val();
        var data = {
            'otp': otp, 
            'email_id': email_id,
            'mobile_number': mobile_number,
            'data_type': "new_connection",
            '_token': '{{{csrf_token()}}}'
        }
        var status = false;
        $('#otpErr').hide();
        $.ajax({
            async:false,
            url: '/ajax/verify-otp'
            , type: 'POST'
            , data: data
            , success: function(data) {
                var data = JSON.parse(data);
                if (data.status == 200) {
                    status = true;
                } else {
                    $('#otpErr').show();
                    $('#otpErr').text(data.message);
                    status = false;
                }
            }
        });
        return status;
    }

    function customtimer(){
        timerId = setInterval(countdown, 1000);
    }

    function countdown() {
        var elem = document.getElementById('some_div');
        if (timeLeft == -1) {
            $('#some_div').hide();
            $('#resend-otp').show();
            clearTimeout(timerId);
        } else {
            elem.innerHTML = 'Resend OTP in ' + timeLeft + ' seconds';
            timeLeft--;
        }
    }

    $('#resend-otp').on('click',function(e) {
        e.preventDefault();
        $('#resend-otp').hide();
        $('#spinner').show();
       
        var email_id = $('#email').val();
        var mobile_number = $('#mobile').val();
        var sms_type = "PNG Registration";
        var data = {
            email_id: email_id
            , sms_type: sms_type
            , mobile_number: mobile_number
            , type: 'new-connection'
            , '_token': '{{{csrf_token()}}}'
        }
        $.ajax({
            url: '/ajax/generate-otp'
            , type: 'POST'
            , data: data
            , success: function(data) {
                var data = JSON.parse(data);
                if (data.status == 200) {
                    $('#otp-section').show();
                    $('#verify-otp-btn').show();
                    $('#otp-btn').hide();
                    $("#otp-status").css("color", "green");
                    $("#otp-status").html(data.message);
                    $('#resend-otp').hide();
                    $('#spinner').hide();
                    $('#some_div').show();
                    timeLeft = 30;
                    customtimer();
                }
            }
        });
    });

    function dmaName1(th){
        var socialLink = $('#social_link').find(':selected').text();
        if(socialLink == 'Direct Marketing Agents'){
            $('#dma_select_div').show();
        }
        else{
            $('#dma_select_div').hide();
        }
    }

    function dmaName2(th){
        var dmaOption = $('#dma_select').find(':selected').val();
        if(dmaOption == 'Other'){
            $('#dma_name_div').show();
        }
        else{
            $('#dma_name_div').hide();
        }
    }
	
	
//added by isb - 17 feb 2024
    function isbPaymentType(val){
	  $('#paid_amount').val('');
	  $('#isb_amount_pay_area').css("visibility", "hidden");
	  $("#submitBtn").attr("disabled", "disabled").button('refresh');
	  $('input:checkbox[name=terms_and_condition]').attr('checked',false);
	  $('#paymentoptionData').hide();
	  
	  $('.isb-gassified-section').hide();
	  
	  
	  
	if(val != ''){
	  if(val == 'campaign'){
		$('#paid_amount').val(Campaign_TotalAmnt2Pay);  
		$('#isb_amount_pay_area').css("visibility", "visible");
	  }else{
		$('#paid_amount').val(Regular_TotalAmnt2Pay);
        $('#isb_amount_pay_area').css("visibility", "visible"); 		
	  }
	   
	   $('#paymentoptionData').show();
	   $("#submitBtn").removeAttr("disabled").button('refresh');
	   $('#gassified-section_'+val).show();
	 }
     return false;
    }
</script>
@endsection