@extends('layout.master')
@section('content')

<section class="content pb-5">
    <div class="row mt-4">
        <div class="col-md-12">
            <div class="title-section">
                <p>KYC</p>
            </div>
        </div>
    </div>

    <div class="about-you-sec">
        <div class="row">
            <div class="col-md-5">
                <p>Are you an individual or a company running the bussiness?</p>
            </div>
        </div>
    </div>

    <!-- tabs  -->
    @if(Auth::user()->role == 'agent' && Auth::user()->type == 'agent')
    <ul class="nav nav-tabs kyc-tabs" id="myTab" role="tablist">
        <li class="nav-item kyc-item">
            <a class="nav-link kyc-link active" id="individual-tab" data-toggle="tab" href="#individual" role="tab" aria-controls="individual" aria-selected="true">Agent</a>
        </li>
    </ul>
    @elseif(Auth::user()->role == 'seller' && Auth::user()->type == 'enterprise')
    <ul class="nav nav-tabs kyc-tabs" id="myTab" role="tablist">
        <li class="nav-item kyc-item">
            <a class="nav-link kyc-link" id="business-tab" data-toggle="tab" href="#business" role="tab" aria-controls="business" aria-selected="false">Business</a>
        </li>
    </ul>
    @else
    <ul class="nav nav-tabs kyc-tabs" id="myTab" role="tablist">
        <li class="nav-item kyc-item">
            <a class="nav-link kyc-link active" id="individual-tab" data-toggle="tab" href="#individual" role="tab" aria-controls="individual" aria-selected="true">Individual</a>
        </li>
        <li class="nav-item kyc-item">
            <a class="nav-link kyc-link" id="business-tab" data-toggle="tab" href="#business" role="tab" aria-controls="business" aria-selected="false">Business</a>
        </li>
    </ul>
    @endif
    <div class="tab-content kyc-content" id="myTabContent">

        <!-- individual-tab  -->
        <div class="tab-pane fade  individual-details" id="individual" role="tabpanel" aria-labelledby="individual-tab">
            <div class="about-you-sec">
                <div class="row mt-4">
                    <div class="col-md-12">
                        <h6>Complate the below mentioned KYC steps:</h6>
                    </div>
                </div>
                <div class="kyc-section-content mt-3">
                    <div class="row">
                        <div class="col-md-6 col-10">
                            <h3>Step 1 - Photo Identification</h3>
                        </div>
                        
                    </div>
                </div>
                <h4>Please switch ON webcam by clicking on the ‘switch Webcam ON' button, capture your selfie image and upload below.</h4>
            </div>
            <div class="row mt-4">
                <div class="col-md-12">
                    <div class="user-box">
                        <div class="row justify-content-center text-center">
                            <div class="col-md-9">
                                <div class="row py-3">
                                    <div class="col-md-6 mb-3">
                                        <div class="capture-image-box">
                                            <div id="capture_image_div">
                                                <p id="selphi_paragraph">Switch on webcam and allow to take selfie</p>
                                                <h5 id="capture_image">Capture Image</h5>
                                                <button type="button" class="btn btn-primary switch-btn my-4" id="webcamOn">Switch webcam on</button>
                                            </div>
                                            <div id="my_camera">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <div class="capture-image-box h-100">
                                            <div class="capture-img">
                                                @if(!empty($generalInformation['user_images']))
                                                <img id="take_snapshot_image" src="{{$generalInformation['user_images']}}" alt="">
                                                @else
                                                <img id="take_snapshot_image" src="{{asset('assets/images/user-procapture.png')}}"alt="">
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row text-center my-3">
                            <div class="col-md-12">
                                <button type="button" class="btn btn-danger button-dissable" id="take_snapshot_individual">Save Image</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="about-you-sec mt-5">
                <div class="kyc-section-content">
                    <div class="row">
                        <div class="col-md-6 col-10">
                            <h3>Step 2 - Photo Identification</h3>
                        </div>
                        
                    </div>
                </div>
                <h2>You can select any of the below mentioned options where in automated KYC with Aadhaar
                    OPT verification process is available in the left section and the manual KYC option with
                    document upload process available in the right section.
                    The Aadhaar OPT is recommended if you have your mobile number registered with your Aadhaar card.
                </h2>
            </div>
            <div class="row mt-4 dissable-individual-tab" id="individual-document-upload">
                <div class="col-md-12">
                    <form  id="individual_form_kyc" method="post" autocomplete="off">
                        @csrf
                        <div class="user-box">
                            <div class="row justify-content-center">
                                <div class="col-md-11">
                                    <div class="row py-3 ">
                                        <div class="col-md-5 mb-3">
                                            <form id="individual_form_express_kyc" method="post"
                                                autocomplete="off">
                                                @csrf
                                                <div class="capture-image-box">
                                                    <p>Express KYC – Get KYC verified in 30 Seconds</p>
                                                    <div class="row text-center mt-4">
                                                        <div class="col-md-12">
                                                            <button type="button"
                                                                class="btn btn-primary switch-btn">
                                                                OTP</button>
                                                        </div>
                                                    </div>
                                                    <h1>Document:</h1>
                                                    <div class="row">
                                                        <div class="col-md-12">
                                                            <div class="form-group custom-form-group mt-3">
                                                                <label class="form-label"
                                                                    for="customer">Select Document<span
                                                                        class="text-danger">*</span></label>
                                                                <select class="form-control"
                                                                    name="expressDocument1"
                                                                    id="expressDocument1">
                                                                    <option value="">Select Document
                                                                    </option>
                                                                    <option value="pancard"
                                                                        {{ $generalInformation['document1'] == 'pancard' && $generalInformation['kyc_type'] == 'express' ? 'selected' : '' }}>
                                                                        Pan Card</option>
                                                                    <option value="adharcard"
                                                                        {{ $generalInformation['document1'] == 'adharcard' && $generalInformation['kyc_type'] == 'express' ? 'selected' : '' }}>
                                                                        Adhar Card</option>
                                                                    <option value="voterid"
                                                                        {{ $generalInformation['document1'] == 'voterid' && $generalInformation['kyc_type'] == 'express' ? 'selected' : '' }}>
                                                                        Voter Id</option>
                                                                    <option value="dl"
                                                                        {{ $generalInformation['document1'] == 'dl' && $generalInformation['kyc_type'] == 'express' ? 'selected' : '' }}>
                                                                        Driving License</option>
                                                                    <option value="passport"
                                                                        {{ $generalInformation['document1'] == 'passport' && $generalInformation['kyc_type'] == 'express' ? 'selected' : '' }}>
                                                                        Passport</option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-md-12">
                                                            <div class="form-group custom-form-group mt-3">
                                                                <input class="form-control"
                                                                    placeholder="Selected Id No"
                                                                    type="text"
                                                                    name="expressDocumentNumber1"
                                                                    id="expressDocumentNumber1"
                                                                    value="{{ !empty($generalInformation['documentNumber1']) && $generalInformation['kyc_type'] == 'express' ? $generalInformation['documentNumber1'] : old('documentNumber1') }}">
                                                            </div>
                                                        </div>
                                                    </div>
                                                    @if ($generalInformation['is_kyc_verified'] == 'no' || $generalInformation['is_kyc_verified'] == '')
                                                        <button type="button"
                                                            class="btn btn-danger mt-2 mb-3"
                                                            id="individualExpressKycGenerateOtp"
                                                            disabled>Generate
                                                            OTP</button>
                                                        <div class="row">
                                                            <div class="col-md-12">
                                                                <div class="form-group custom-form-group">
                                                                    <label class="form-label"
                                                                        for="customer">Enter OTP<span
                                                                            class="text-danger">*</span></label>
                                                                    <input class="form-control"
                                                                        placeholder="Enter Otp"
                                                                        type="text" value=""
                                                                        name="otp" id="expressOtp"
                                                                        disabled>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <button type="submit"
                                                            class="btn btn-danger mt-2 mb-3"
                                                            id="expressKycVerify" disabled>Verify</button>
                                                    @endif
                                                    @if ($generalInformation['is_kyc_verified'] == 'yes' && $generalInformation['kyc_type'] == 'express')
                                                        <p style="color: green;"><i
                                                                class="fa fa-check"></i>Verified</p>
                                                    @endif
                                                </div>
                                            </form>
                                        </div>
                                        <div class="col-md-2 d-none d-sm-block">
                                            <div class="vertical-line">
                                                <p class="toggle" style="cursor:default"> OR</p>
                                            </div>
                                        </div>
                                        <div class="col-md-5">
                                            <div class="capture-image-box">
                                                <p>Manual KYC – Get KYC verified in 2-3 Business Days</p>
                                                <div class="row text-center mt-4">
                                                    <div class="col-md-12">
                                                        <button type="button" class="btn btn-primary switch-btn">Manual KYC</button>
                                                    </div>
                                                </div>
                                                <h1>Document 1</h1>
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <div class="form-group custom-form-group mt-3">
                                                                           
                                                            <label class="form-label" for="customer">Select Document<span class="text-danger">*</span></label>
                                                            <select class="form-control" name="document1" id="document1">
                                                                <option value="">Select First Document</option>
                                                                <option value="pancard" {{ ($generalInformation['document1'] =='pancard') ? 'selected' : ''}}>Pan Card</option>
                                                                <option value="adharcard" {{ ($generalInformation['document1'] =='adharcard') ? 'selected' : ''}}>Adhar Card</option>
                                                                <option value="voterid" {{ ($generalInformation['document1'] =='voterid') ? 'selected' : ''}}>Voter Id</option>
                                                                <option value="dl" {{ ($generalInformation['document1'] =='dl') ? 'selected' : ''}}>Driving License</option>
                                                            </select>
                                                            <input class="form-control mt-3" name="documentNumber1" placeholder="Enter Selected ID No" type="text" value="{{!empty($generalInformation['document_number_1']) ? $generalInformation['document_number_1'] : old('documentNumber1')}}" id="documentNumber1"> 
                                                            <span id="lblPANCard" class="error">Invalid pan number</span>
                                                            <span id="adharCardError" class="error">Invalid adhar number</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <label class="form-label" for="customer">Document Image Front</label>
                                                    <h6>
                                                        <div class="user-img">
                                                            <img src="{{asset('assets/images/user-procapture.png')}}" alt="" id="frontDocumentImageUpload1">
                                                        </div>
                                                        <div class="upload-btn-wrapper kyc-btn mt-3">
                                                            <button class="kycupload" id="uploadImgeFirst">
                                                                Upload
                                                            </button>
                                                            <input type="file" name="frontDocumentImage1[]" id="frontDocumentImage1" enctype="multipart/form-data" multiple>
                                                        </div>
                                                    </h6>
                                                </div>
                                                <div class="col-md-6" id="firstDocumentSecondUploadImage">
                                                    <label class="form-label" for="customer">Back</label>
                                                    <h6>
                                                        <div class="user-img">
                                                            <img src="{{asset('assets/images/user-procapture.png')}}" alt="" id="frontDocumentImageUpload2">
                                                        </div>
                                                        <div class="upload-btn-wrapper kyc-btn mt-3">
                                                            <button class="kycupload">
                                                                Upload
                                                            </button>
                                                            <input type="file" name="frontDocumentImage2[]" id="frontDocumentImage2" enctype="multipart/form-data" multiple>
                                                        </div>
                                                    </h6>
                                                </div>
                                            </div>

                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="form-group custom-form-group mt-3">
                                                        <label class="form-label" for="customer">Select Document 2<span class="text-danger">*</span></label>
                                                        <select class="form-control" name="document2" id="document2">
                                                            <option value="">Select Second Document</option>
                                                            <option value="pancard" {{ ($generalInformation['document2'] =='pancard') ? 'selected' : ''}}>Pan Card</option>
                                                            <option value="adharcard" {{ ($generalInformation['document2'] =='adharcard') ? 'selected' : ''}}>Adhar Card</option>
                                                            <option value="voterid" {{ ($generalInformation['document2'] =='voterid') ? 'selected' : ''}}>Voter Id</option>
                                                            <option value="dl" {{ ($generalInformation['document2'] =='dl') ? 'selected' : ''}}>Driving License</option>
                                                        </select>
                                                        <input class="form-control mt-3" name="documentNumber2" placeholder="Enter Selected ID No" type="text" value="{{!empty($generalInformation['documentNumber2']) ? $generalInformation['documentNumber2'] : old('documentNumber2')}}" id="documentNumber2">
                                                        <span id="lblPANCard1" class="error">Invalid pan number</span>
                                                        <span id="adharCardError1" class="error">Invalid adhar number</span> 
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <label class="form-label" for="customer">Document Image Front</label>
                                                    <h6>
                                                        <div class="user-img">
                                                            <img src="{{asset('assets/images/user-procapture.png')}}" alt="" id="frontDocumentImageUpload3">

                                                        </div>
                                                        <div class="upload-btn-wrapper kyc-btn mt-3">
                                                            <button class="kycupload" id="uploadImgeThird">
                                                                Upload
                                                            </button>
                                                            <input type="file" name="frontDocumentImage3[]" id="frontDocumentImage3" enctype="multipart/form-data" multiple>
                                                        </div>
                                                    </h6>
                                                </div>
                                                <div class="col-md-6" style="display: none;" id="secondDocumentUploadImage">
                                                    <label class="form-label" for="customer">Back</label>
                                                    <h6>
                                                        <div class="user-img">
                                                            <img src="{{asset('assets/images/user-procapture.png')}}" alt="" id="uploadBackDocumentImg4">
                                                        </div>
                                                        <div class="upload-btn-wrapper kyc-btn mt-3">
                                                            <button class="kycupload" id="uploadImgeForth">
                                                                Upload
                                                            </button>
                                                            <input type="file" name="backDocumentImage3[]" id="backDocumentImage3" enctype="multipart/form-data" multiple>
                                                        </div>
                                                    </h6>
                                                </div>
                                            </div>
                                            <button type="submit" class="btn btn-danger mt-4 mb-3">save</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="row mt-4 mb-4 mr-4 text-right">
                        <div class="col-md-12 ">
                            <button id="fifthPreviousButton" type="button" class="btn btn-danger mr-3" data-target="#home4" data-toggle="tab">Back</button>
                            <button type="button" class="btn btn-outline-dark next-btn">Done</button>
                        </div>
                    </div>
                    </div>
                </div>
            </div>
        </div>
        <!------->

        <!-- business-tab  -->
        <div class="tab-pane fade active company-details" id="business" role="tabpanel" aria-labelledby="business-tab">
            <div class="row align-items-center mt-4">
                <div class="col-md-2">
                    <p>Select Company</p>
                </div>
                <div class="col-md-3">
                    <div class="form-group custom-form-group">
                        <select class="form-control">
                            @if(Auth::user()->role == 'seller' && Auth::user()->type == 'enterprise')
                            <option value="">{{Auth::user()->company_name}}</option>
                            @else
                            <option value="">Staqo Private Ltd.</option>
                            @endif
                        </select>
                    </div>
                </div>
            </div>
            <div class="about-you-sec">
                <div class="row mt-2">
                    <div class="col-md-12">
                        <h6>Complate the below mentioned KYC steps:</h6>
                    </div>
                </div>
                <div class="kyc-section-content mt-3">
                    <div class="row">
                        <div class="col-md-6 col-10">
                            <h3>Step 1 - Photo Identification</h3>
                        </div>
                        
                    </div>
                </div>
                <h4>Please switch ON webcam by clicking on the ‘switch Webcam ON' button, capture your selfie image and upload below.</h4>
            </div>
            <div class="row mt-4">
                <div class="col-md-12">
                    <div class="user-box">
                        <div class="row justify-content-center text-center">
                            <div class="col-md-9">
                                <div class="row py-3">
                                    <div class="col-md-6 mb-3">
                                        <div class="capture-image-box">
                                            <div id="my_camera_for_Buissiness_static">
                                                <p id="selphi_paragraph">Switch on webcam and allow to take selfie</p>
                                                <h5 id="capture_image">Capture Image</h5>
                                                <button type="button" class="btn btn-primary switch-btn my-4" id="webcamOnForBuissiness">Switch webcam on</button>
                                            </div>
                                            <div id="my_camera_for_Buissiness">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <div class="capture-image-box h-100">
                                            <div class="capture-img">
                                                @if(!empty($generalInformation['user_images']))
                                                <img id="take_snapshot_image_bussiness" src="{{$generalInformation['user_images']}}" alt="">
                                                @else
                                                <img id="take_snapshot_image_bussiness" src="{{asset('assets/images/user-procapture.png')}}"alt="">
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row text-center my-3">
                            <div class="col-md-12">
                                <button type="button" class="btn btn-danger" id="take_snapshot_buissiness">Save Image</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="about-you-sec mt-5">
                <div class="kyc-section-content">
                    <div class="row">
                        <div class="col-md-6 col-10">
                            <h3>Step 2 - Photo Identification</h3>
                        </div>
                        
                    </div>
                </div>
                <h2>You can select any of the below mentioned options where in automated KYC with Aadhaar
                    OPT verification process is available in the left section and the manual KYC option with
                    document upload process available in the right section.
                    The Aadhaar OPT is recommended if you have your mobile number registered with your Aadhaar card.
                </h2>
            </div>
            <div class="row mt-4">
                <div class="col-md-12">
                    <div class="user-box">
                        <div class="row justify-content-center">
                            <div class="col-md-11">
                                <div class="row py-3 ">
                                    <div class="col-md-5 mb-3">
                                        <div class="capture-image-box">
                                            <p>Express KYC – Get KYC verified in 30 Seconds</p>
                                            <div class="row text-center mt-4">
                                                <div class="col-md-12">
                                                    <button type="button" class="btn btn-primary switch-btn">Aadhaar OPT</button>
                                                </div>
                                            </div>
                                            <h1>Document: Aadhaar Card</h1>
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="form-group custom-form-group mt-3">
                                                        <label class="form-label" for="customer">Aadhaar Number<span class="text-danger">*</span></label>
                                                        <input class="form-control" placeholder="12 digit Aaadhaar Number" type="text" value=""> 
                                                    </div>
                                                </div>
                                            </div>
                                            <button type="button" class="btn btn-danger mt-2 mb-3">Generate OTP</button>
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="form-group custom-form-group">
                                                        <label class="form-label" for="customer">Enter OTP<span class="text-danger">*</span></label>
                                                        <input class="form-control" placeholder="12 digit Aaadhaar Number" type="text" value=""> 
                                                    </div>
                                                </div>
                                            </div>
                                            <button type="button" class="btn btn-danger mt-2 mb-3">Verify</button>
                                        </div>
                                    </div>
                                    <div class="col-md-2 d-none d-sm-block">
                                        <div class="vertical-line">
                                            <p class="toggle" style="cursor:default"> OR</p>
                                        </div>
                                    </div>
                                    <div class="col-md-5">
                                     <form  id="manual_buissiness_form_kyc" method="post" autocomplete="off">
                                        @csrf
                                        <div class="capture-image-box">
                                            <p>Manual KYC – Get KYC verified in 2-3 Business Days</p>
                                            <div class="row text-center mt-4">
                                                <div class="col-md-12">
                                                    <button type="button" class="btn btn-primary switch-btn">Manual KYC</button>
                                                </div>
                                            </div>
                                            <h1>Document 1</h1>
                                            <div class="col-md-12">
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <div class="form-group custom-form-group mt-3">
                                                            <label class="form-label" for="customer">Select Document<span class="text-danger">*</span></label>
                                                            <select class="form-control" name="buissiness_document_1" id="buissiness_document_1" {{(!empty($generalInformation['document1'] && $generalInformation['is_kyc_verified'] == 'yes')) ? 'disabled' : '' }}>
                                                                <option value="" >Select First Document</option>
                                                                <option value="pancard" {{(!empty($generalInformation['document1']) && $generalInformation['document1'] == 'pancard' ) ? 'selected' : '' }}>Pan Card</option>
                                                                <option value="adharcard" {{(!empty($generalInformation['document1']) && $generalInformation['document1'] == 'adharcard' ) ? 'selected' : '' }}>Adhar Card</option>
                                                                <option value="voterid" {{(!empty($generalInformation['document1']) && $generalInformation['document1'] == 'voterid' ) ? 'selected' : '' }}>Voter Id</option>
                                                                <option value="dl" {{(!empty($generalInformation['document1']) && $generalInformation['document1'] == 'dl' ) ? 'selected' : '' }}>Driving License</option>
                                                                <option value="gstin" {{(!empty($generalInformation['document1']) && $generalInformation['document1'] == 'gstin' ) ? 'selected' : '' }}>GST</option>
                                                            </select>
                                                            <input class="form-control mt-3" placeholder="Enter Pan Number" type="text" name="buissiness_document_1_number" value="{{!empty($generalInformation['documentNumber1']) ? $generalInformation['documentNumber1'] : old('documentNumber1')}}"  id="buissiness_document_1_number" {{!empty($generalInformation['documentNumber1'] && $generalInformation['is_kyc_verified'] == 'yes') ? 'disabled' : ''}}>
                                                            <span id="lblPANCard5" class="error">Invalid pan number</span>
                                                            <span id="adharCardError5" class="error">Invalid adhar number</span> 
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <label class="form-label" for="customer">Document Image Front</label>
                                                    <h6>
                                                        <!-- <img src="{{asset('assets/images/user-procapture.png')}}" alt="" id="frontDocumentBuissinessImageUpload1"> -->
                                                        @if(!empty($generalInformation['document1_front_image']))
                                                        <img id="frontDocumentBuissinessImageUpload1" src="{{$generalInformation['document1_front_image']}}" alt="">
                                                        @else
                                                        <img src="{{asset('assets/images/user-procapture.png')}}" alt="" id="frontDocumentBuissinessImageUpload1">
                                                        @endif

                                                        <div class="upload-btn-wrapper kyc-btn mt-3">
                                                            <button class="kycupload">
                                                                Upload
                                                            </button>
                                                            <input type="file" name="frontBuissinessDocumentImage1" id="frontBuissinessDocumentImage1">
                                                        </div>
                                                    </h6>
                                                </div>
                                                <div class="col-md-6" id="buissiness_document_upload_2">
                                                    <label class="form-label" for="customer">Back</label>
                                                    <h6>
                                                        <!-- <img src="{{asset('assets/images/user-procapture.png')}}" alt="" id="backDocumentBuissinessImageUpload1"> -->
                                                        @if(!empty($generalInformation['document1_back_image']))
                                                        <img id="backDocumentBuissinessImageUpload1" src="{{$generalInformation['document1_back_image']}}" alt="">
                                                        @else
                                                        <img src="{{asset('assets/images/user-procapture.png')}}" alt="" id="backDocumentBuissinessImageUpload1">
                                                        @endif
                                                        <div class="upload-btn-wrapper kyc-btn mt-3">
                                                            <button class="kycupload">
                                                                Upload
                                                            </button>
                                                            <input type="file" name="backBuissinessDocumentImage1" id="backBuissinessDocumentImage1">
                                                        </div>
                                                    </h6>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="form-group custom-form-group mt-3">
                                                        <label class="form-label" for="customer">Select Document 2<span class="text-danger">*</span></label>
                                                        <select class="form-control" name="buissiness_document_4" id="buissiness_document_4" {{(!empty($generalInformation['document2']  && $generalInformation['is_kyc_verified'] == 'yes')) ? 'disabled' : '' }}>
                                                            <option value="">Select Second Document</option>
                                                            <option value="pancard" {{(!empty($generalInformation['document2']) && $generalInformation['document2'] == 'pancard') ? 'selected' : '' }}>Pan Card</option>
                                                            <option value="adharcard" {{(!empty($generalInformation['document2']) && $generalInformation['document2'] == 'adharcard' && $generalInformation['is_kyc_verified'] == 'yes') ? 'selected' : '' }}>Adhar Card</option>
                                                            <option value="voterid" {{(!empty($generalInformation['document2']) && $generalInformation['document2'] == 'voterid' && $generalInformation['is_kyc_verified'] == 'yes') ? 'selected' : '' }}>Voter Id</option>
                                                            <option value="dl" {{(!empty($generalInformation['document2']) && $generalInformation['document2'] == 'dl' && $generalInformation['is_kyc_verified'] == 'yes') ? 'selected' : '' }}>Driving License</option>
                                                            <option value="gstin" {{(!empty($generalInformation['document2']) && $generalInformation['document2'] == 'gstin' && $generalInformation['is_kyc_verified'] == 'yes') ? 'selected' : '' }}>GST</option>
                                                        </select>
                                                        <input class="form-control mt-3" placeholder="Enter Number" type="text" name="buissiness_document_4_number" value="{{!empty($generalInformation['documentNumber2']) ? $generalInformation['documentNumber2'] : old('documentNumber2')}}" id="buissiness_document_4_number" {{!empty($generalInformation['documentNumber2'] && $generalInformation['is_kyc_verified'] == 'yes') ? 'disabled' : ''}}>

                                                        <span id="lblPANCard6" class="error">Invalid pan number</span>
                                                        <span id="adharCardError6" class="error">Invalid adhar number</span> 
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <label class="form-label" for="customer">Document Image Front</label>
                                                    <h6>
                                                        <!-- <img src="{{asset('assets/images/user-procapture.png')}}" alt="" id="frontDocumentBuissinessImageUpload2"> -->
                                                        @if(!empty($generalInformation['document2_front_image'] && $generalInformation['is_kyc_verified'] == 'yes'))
                                                            <img id="frontDocumentBuissinessImageUpload2" src="{{$generalInformation['document2_front_image']}}" alt="">
                                                        @else
                                                            <img src="{{asset('assets/images/user-procapture.png')}}" alt="" id="frontDocumentBuissinessImageUpload2">
                                                        @endif
                                                        <div class="upload-btn-wrapper kyc-btn mt-3">
                                                            <button class="kycupload">
                                                                Upload
                                                            </button>
                                                            <input type="file" name="frontDocumentBuissinessImage2" id="frontDocumentBuissinessImage2">
                                                        </div>
                                                    </h6>
                                                </div>
                                                <div class="col-md-6" id="buissiness_document_upload_3">
                                                    <label class="form-label" for="customer">Back</label>
                                                    <h6>
                                                        <!-- <img src="{{asset('assets/images/user-procapture.png')}}" alt="" id="backBuissinessDocumentImageUpload2"> -->
                                                        @if(!empty($generalInformation['document2_back_image']))
                                                            <img id="backBuissinessDocumentImageUpload2" src="{{$generalInformation['document2_back_image']}}" alt="">
                                                        @else
                                                            <img src="{{asset('assets/images/user-procapture.png')}}" alt="" id="backBuissinessDocumentImageUpload2">
                                                        @endif
                                                        <div class="upload-btn-wrapper kyc-btn mt-3">
                                                            <button class="kycupload">
                                                                Upload
                                                            </button>
                                                            <input type="file" name="backBuissinessDocumentImage2" id="backBuissinessDocumentImage2">
                                                        </div>
                                                    </h6>
                                                </div>
                                            </div>
                                            <button type="submit" class="btn btn-danger mt-4 mb-3">save</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- <div class="row mt-4 mb-4 mr-4 text-right">
                            <div class="col-md-12 ">
                                <!-- <button id="fifthPreviousButton" type="button" class="btn btn-danger mr-3" data-target="#home4" data-toggle="tab">Back</button> -->
                                <!-- <button type="submit" class="btn btn-outline-dark next-btn">Done</button> -->
                                <!-- <a href="{{route('kyc/download')}}" class="btn btn-outline-dark next-btn" target="_blank">Download</a>
                            </div>
                        </div> --> 
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- ---- -->
</div>
</div>
</div>
</div>
</section>
<style type="text/css">
    .button-dissable {
        pointer-events: none;
    }
    .dissable-individual-tab {
        pointer-events: none;
    }
   .company-details {
        display: none;
    }
    .individual-details {
        display: none;
    }
    .dissbleClickButton {
        pointer-events: none;
    }
</style>
<script src="{{asset('assets/js/jquery-3.4.1.min.js')}}"></script>
<script src="{{asset('assets/plugins/jquery/jquery.min.js')}}"></script>
<script src="{{asset('assets/plugins/jquery-validation/jquery.validate.js')}}"></script>
<script src="{{asset('assets/plugins/jquery-validation/jquery.validate.min.js')}}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcamjs/1.0.25/webcam.min.js"></script>
<script type = "text/javascript">

    $(document).ready(function() {

        $('#buissiness_document_upload_2').hide();
        $('#buissiness_document_upload_3').hide();

        var a = $('#buissiness_document_1').val();
        var b = $('#buissiness_document_4').val();
        if(a && a != 'pancard'){

            $('#buissiness_document_upload_2').show();
        }
        if(b && b != 'pancard'){
            $('#buissiness_document_upload_3').show();
        }

        // frontDocumentBuissinessImageUpload2

        let kyc = "no";
        let userType = "";

        if (kyc == 'yes') {

            $('#home1').removeClass('active show');
            $('#home2').removeClass('active show');
            $('#home3').removeClass('active show');
            $('#home4').removeClass('active show');
            $('#home5').addClass('active show');
            $('#nextButtonHome5').addClass('active');

            //return;
        }


        //div hide show according to manual kyc

        let documentValBuissiness = '';
        let documentVal2Buissiness = '';

        $("#buissiness_document_1").on("change", function(e) {

            documentValBuissiness = $('#buissiness_document_1').val();
            documentVal2Buissiness = $('#buissiness_document_4').val() ? $('#buissiness_document_4').val() : $('#buissiness_document_4').val('');
            // console.log(documentVal2Buissiness); return false;
            // $('#front').show();

            if (documentValBuissiness == 'pancard') {

                $('#buissiness_document_upload_2').hide();
                $("#buissiness_document_4 option[value='pancard']").hide();
                $("#buissiness_document_4 option[value='adharcard']").show();
                $("#buissiness_document_4 option[value='voterid']").show();
                $("#buissiness_document_4 option[value='dl']").show();
                $("#buissiness_document_4 option[value='gstin']").show();

                $("#lblPANCard5").hide();
                $("#adharCardError5").hide();

            } else if (documentValBuissiness == 'adharcard') {

                $('#buissiness_document_upload_2').show();
                $("#buissiness_document_4 option[value='pancard']").show();
                $("#buissiness_document_4 option[value='adharcard']").hide();
                $("#buissiness_document_4 option[value='voterid']").show();
                $("#buissiness_document_4 option[value='dl']").show();
                $("#buissiness_document_4 option[value='gstin']").show();

                $("#lblPANCard5").hide();
                $("#adharCardError5").hide();

            } else if (documentValBuissiness == 'dl') {

                $('#buissiness_document_upload_2').show();
                $("#buissiness_document_4 option[value='pancard']").show();
                $("#buissiness_document_4 option[value='adharcard']").show();
                $("#buissiness_document_4 option[value='voterid']").show();
                $("#buissiness_document_4 option[value='dl']").hide();
                $("#buissiness_document_4 option[value='gstin']").show();

                $("#lblPANCard5").hide();
                $("#adharCardError5").hide();

            } else if (documentValBuissiness == 'gstin') {

                $('#buissiness_document_upload_2').show();
                $("#buissiness_document_4 option[value='pancard']").show();
                $("#buissiness_document_4 option[value='adharcard']").show();
                $("#buissiness_document_4 option[value='voterid']").show();
                $("#buissiness_document_4 option[value='dl']").show();
                $("#buissiness_document_4 option[value='gstin']").hide();

                $("#lblPANCard5").hide();
                $("#adharCardError5").hide();
            }
        });


        $("#buissiness_document_4").on("change", function(e) {

            documentVal2Buissiness = $('#buissiness_document_4').val();

            if (documentVal2Buissiness == 'pancard') {
                alert(documentVal2Buissiness);
                $('#buissiness_document_upload_3').hide();
                $("#lblPANCard6").hide();
                $("#adharCardError6").hide();
            } else {
                $('#buissiness_document_upload_3').show();
                $("#lblPANCard6").hide();
                $("#adharCardError6").hide();
            }

        });


        //Condition for Individual Kyc Images

        let firstFontImages = "";

        let secondFontImages = "";

        let firstBackImages = "";

        let SecondBackImages = "";

        if (firstFontImages != '') $('#frontDocumentImageUpload1').attr('src', firstFontImages);

        if (secondFontImages != '') $('#frontDocumentImageUpload3').attr('src', secondFontImages);

        if (firstBackImages != '') {
            $('#frontDocumentImageUpload2').attr('src', firstBackImages);
            $('#firstDocumentSecondUploadImage').show();
        }

        if (SecondBackImages != '') {
            $('#uploadBackDocumentImg4').attr('src', SecondBackImages);
            $('#secondDocumentUploadImage').show();
        }

        //Kyc documentUpload 1 Condition habdling

        $("#lblPANCard").hide();
        $("#adharCardError").hide();

        $("#lblPANCard1").hide();
        $("#adharCardError1").hide();

        $("#lblPANCard5").hide();
        $("#adharCardError5").hide();

        $("#lblPANCard6").hide();
        $("#adharCardError6").hide();

        let documentVal = '';
        let documentVal2 = '';

        $("#document1").on("change", function(e) {

            documentVal = $('#document1').val();

            if (documentVal == 'pancard') {

                documentVal == $('#document2').val() ? $('#document2').val('') : $('#document2').val();

                $('#firstDocumentSecondUploadImage').hide();
                $("#document2 option[value='pancard']").hide();
                $("#document2 option[value='adharcard']").show();
                $("#document2 option[value='voterid']").show();
                $("#document2 option[value='dl']").show();
                $("#adharCardError").hide();
                $("#lblPANCard").hide();

                $("#lblPANCard1").hide();
                $("#adharCardError1").hide();
            } 
            else if (documentVal == 'adharcard') {

                documentVal == $('#document2').val() ? $('#document2').val('') : $('#document2').val();
                $('#firstDocumentSecondUploadImage').show();
                $("#document2 option[value='adharcard']").hide();
                $("#document2 option[value='voterid']").show();
                $("#document2 option[value='dl']").show();
                $("#document2 option[value='pancard']").show();
                $("#adharCardError").hide();
                $("#lblPANCard").hide();

                $("#lblPANCard1").hide();
                $("#adharCardError1").hide();
            } 
            else if (documentVal == 'dl') {

                documentVal == $('#document2').val() ? $('#document2').val('') : $('#document2').val();

                $("#document2 option[value='dl']").hide();
                $("#document2 option[value='voterid']").show();
                $("#document2 option[value='adharcard']").show();
                $("#document2 option[value='pancard']").show();
                $("#adharCardError").hide();
                $("#lblPANCard").hide();

                $("#lblPANCard1").hide();
                $("#adharCardError1").hide();
            } 
            else {

                documentVal = 'dl';

                documentVal == $('#document2').val() ? $('#document2').val('') : $('#document2').val();

                $("#document2 option[value='dl']").show();
                $("#document2 option[value='voterid']").hide();
                $("#document2 option[value='adharcard']").show();
                $("#document2 option[value='pancard']").show();
                $("#adharCardError").hide();
                $("#lblPANCard").hide();

                $("#lblPANCard1").hide();
                $("#adharCardError1").hide();
            }
        });

        $("#document2").on("change", function(e) {

            documentVal = $('#document2').val();

            if (documentVal == 'pancard') {
                $('#secondDocumentUploadImage').hide();
            } else {
                $('#secondDocumentUploadImage').show();
            }
        });


        let photoIdentification = "";

        if (photoIdentification != '') {
            $('#individual-document-upload').removeClass('dissable-individual-tab');
        }

        if (userType == 'individual') {

            $('#forthPreviosButton2').removeClass('individual-details');
            $('#thirdNextHomeButtonb2').removeClass('individual-details');
            $('#individual-details-tab').removeClass('individual-details');
            $('#business').removeClass('active');
            $('#business').removeClass('show');
            $('#individual').addClass('show');
            $('#individual').addClass('active');
        } 
        else {
            $('#home3').removeClass('company-details');
            $('#companyDetails1').removeClass('company-details');
            $('#companyDetails2').removeClass('company-details');
            $('#companyDetails3').removeClass('company-details');
            $('#companyDetails4').removeClass('company-details');
            $('#companyDetails5').removeClass('company-details');
            $('#forthPreviosButton1').removeClass('company-details');
            $('#thirdNextHomeButtonb1').removeClass('company-details');
            $('#company-details-tab').removeClass('company-details');
            $('#business').removeClass('company-details');
            $('#business').addClass('show');
            $('#business').addClass('active');
        }

        $("#general_information").validate({
            rules: {

                first_name: "required",
                last_name: "required",
                dob: {
                    required: true
                },
                gender: "required",
                email: {
                    required: true,
                    email: true
                },
                city: "required",
                mobile_number: {
                    required: true,
                    digits: true,
                    minlength: 10,
                    maxlength: 10
                },
                pincode: {
                    required: true,
                    number: true,
                },
            },
            messages: {
                first_name: "First name is required",
                last_name: "Last name is required",
                dob: "Dob is required",
                gender: "Gender is required",
                email: "Email is required",
                city: "City is required",
                mobile_number: {
                    required: 'Please enter mobile number',
                    digits: 'please enter digits only',
                    minLength: 'Invalid mobile number',
                    maxlength: 'Invalid mobile number'
                },
                pincode: {
                    required: 'Zipcode is required',
                    number: 'Zipcode must be a number',
                },
                email: {
                    required: 'Email is required',
                    email: 'Please enter a valid email address'
                },
            }
        });


        $("#account_information_form").validate({

            rules: {

                beneficiary_name: "required",
                account_type: "required",
                account_number: "required",
                re_account_number: "required",
                ifsc_code: "required",
            },
            messages: {
                beneficiary_name: "Beneficiary name is required",
                account_type: "Account type is required",
                account_number: "Account number is required",
                re_account_number: "Re account number is required",
                ifsc_code: "Ifsc code is required",
            }
        });

        //Individual Form Kyc validations

        $("#individual_form_kyc").validate({

            rules: {

                document1: "required",
                document2: "required",
                documentNumber1: "required",
                documentNumber2: "required",
            },
            messages: {
                document1: "Please select first document",
                document2: "Please select first document",
                documentNumber1: "Please enter first document number",
                documentNumber2: "Please enter second document number",
            }

        });


        //Buissiness Form Kyc validations 

        $("#manual_buissiness_form_kyc").validate({

            rules: {

                buissiness_document_1: "required",
                buissiness_document_4: "required",
                buissiness_document_1_number: "required",
                buissiness_document_4_number: "required",
            },
            messages: {
                buissiness_document_1: "Please select first document",
                buissiness_document_4: "Please select first document",
                buissiness_document_1_number: "Please enter first document number",
                buissiness_document_4_number: "Please enter second document number",
            }
        });
        check = [];

        check = 'home2';


        //Movement with next button

        $("#secondHomeButton").on("click", function(e) {

            if ($("#general_information").valid()) {

                $('#home1').removeClass('active show');
                $('#home2').addClass('active show');
                $('#home3').removeClass('active show');
                $('#home4').removeClass('active show');
                $('#home5').removeClass('active show');
                $('#secondHomeButton').addClass('active');

            } else {

                $('#home1').addClass('active show');
                $('#home2').removeClass('active show');
                $('#home3').removeClass('active show');
                $('#home4').removeClass('active show');
                $('#home5').removeClass('active show');
                $('#secondHomeButton').addClass('active');

                swal({
                    icon: 'error',
                    title: "Alert",
                    text: 'Please fill all mandatory fields.',
                    type: "error",

                    closeOnConfirm: false,
                    showLoaderOnConfirm: true,
                });

                return;
            }
        });

        $("#thirdNextHomeButtonb2").on("click", function(e) {

            if ($("#about_you_form").valid()) {

                $('#home1').removeClass('active show');
                $('#home2').removeClass('active show');
                $('#home3').removeClass('active show');
                $('#home4').addClass('active show');
                $('#home5').removeClass('active show');
                $('#thirdNextHomeButtonb').addClass('active');

            } 
            else {

                $('#home1').removeClass('active show');
                $('#home2').addClass('active show');
                $('#home3').removeClass('active show');
                $('#home4').removeClass('active show');
                $('#home5').removeClass('active show');
                $('#thirdNextHomeButtonb').addClass('active');

                swal({
                    icon: 'error',
                    title: "Alert",
                    text: 'Please fill all mandatory fields.',
                    type: "error",

                    closeOnConfirm: false,
                    showLoaderOnConfirm: true,
                });

                return;
            }
        });

        $("#thirdNextHomeButtonb1").on("click", function(e) {

            if ($("#about_you_form").valid()) {

                $('#home1').removeClass('active show');
                $('#home2').removeClass('active show');
                $('#home3').addClass('active show');
                $('#home4').removeClass('active show');
                $('#home5').removeClass('active show');
                $('#thirdNextHomeButtonb').addClass('active');

            } else {


                $('#home1').removeClass('active show');
                $('#home2').addClass('active show');
                $('#home3').removeClass('active show');
                $('#home4').removeClass('active show');
                $('#home5').removeClass('active show');
                $('#thirdNextHomeButtonb').addClass('active');

                swal({
                    icon: 'error',
                    title: "Alert",
                    text: 'Please fill all mandatory fields.',
                    type: "error",

                    closeOnConfirm: false,
                    showLoaderOnConfirm: true,
                });

                return;

            }
        });

        $("#nextButtonHome4").on("click", function(e) {

            if ($("#company_details").valid()) {
                $('#home1').removeClass('active show');
                $('#home2').removeClass('active show');
                $('#home3').removeClass('active show');
                $('#home4').addClass('active show');
                $('#home5').removeClass('active show');
                $('#nextButtonHome4').addClass('active');
            } else {
                $('#home1').removeClass('active show');
                $('#home2').removeClass('active show');
                $('#home3').addClass('active show');
                $('#home4').removeClass('active show');
                $('#home5').removeClass('active show');
                $('#nextButtonHome4').addClass('active');

                swal({
                    icon: 'error',
                    title: "Oops...",
                    text: 'Please fill all mandatory fields.',
                    type: "error",

                    closeOnConfirm: false,
                    showLoaderOnConfirm: true,
                });

                return;
            }
        });

        $("#nextButtonHome5").on("click", function(e) {



            //if($("#account_information_form").valid()) {

            /*if ($('#re_account_number').val() != $('#account_number').val()) {
   
                        swal({
                           icon: 'error',
                           title: "Alert",
                           text: 'Account number and re-account number must be same.',
                           type: "error",
   
                           closeOnConfirm: false,
                           showLoaderOnConfirm: true,
                       });
   
                       $('#home1').removeClass('active show');
                       $('#home2').removeClass('active show');
                       $('#home3').removeClass('active show');
                       $('#home4').addClass('active show');
                       $('#home5').removeClass('active show');
                       $('#nextButtonHome5').addClass('active');
   
                        return;
   
                   }*/
            /* else {*/

            $('#home1').removeClass('active show');
            $('#home2').removeClass('active show');
            $('#home3').removeClass('active show');
            $('#home4').removeClass('active show');
            $('#home5').addClass('active show');
            $('#nextButtonHome5').addClass('active');

            /* }*/


            /* } else {*/

            /*   $('#home1').removeClass('active show');
               $('#home2').removeClass('active show');
               $('#home3').removeClass('active show');
               $('#home4').addClass('active show');
               $('#home5').removeClass('active show');
               $('#nextButtonHome5').addClass('active');*/

            /* swal({
                       icon: 'error',
                       title: "Alert",
                       text: 'Please fill all mandatory fields.',
                       type: "error",
   
                       closeOnConfirm: false,
                       showLoaderOnConfirm: true,
                   });
   
                   return;*/
            //}

        });

        //Movement with Previos button

        $("#fifthPreviousButton").on("click", function(e) {

            $('#home1').removeClass('active show');
            $('#home2').removeClass('active show');
            $('#home3').removeClass('active show');
            $('#home4').addClass('active show');
            $('#home5').removeClass('active show');

        });

        $("#forthPreviosButton2").on("click", function(e) {

            $('#home1').removeClass('active show');
            $('#home2').addClass('active show');
            $('#home3').removeClass('active show');
            $('#home4').removeClass('active show');
            $('#home5').removeClass('active show');

        });

        $("#forthPreviosButton1").on("click", function(e) {

            $('#home1').removeClass('active show');
            $('#home2').addClass('active show');
            $('#home3').removeClass('active show');
            $('#home4').removeClass('active show');
            $('#home5').removeClass('active show');

        });

        $("#thirdPreviosButton").on("click", function(e) {

            $('#home1').removeClass('active show');
            $('#home2').addClass('active show');
            $('#home3').removeClass('active show');
            $('#home4').removeClass('active show');
            $('#home5').removeClass('active show');

        });

        $("#secondPreviosButton").on("click", function(e) {

            $('#home1').addClass('active show');
            $('#home2').removeClass('active show');
            $('#home3').removeClass('active show');
            $('#home4').removeClass('active show');
            $('#home5').removeClass('active show');
            $('#secondHomeButton').addClass('active');

        });

        //Resetting Account Information field

        $("#resetField").on("click", function(e) {

            $('#beneficiary_name').val('');
            $('#account_type').val('');
            $('#account_number').val('');
            $('#re_account_number').val('');
            $('#ifsc_code').val('');


        });

        //General Inforamtion

        $("#general_information").on('submit', function(e) {
            e.preventDefault();

            var form = $(this);


            var validator = $("#general_information").validate();

            if (validator.numberOfInvalids() != 0) {

                return;
            } else {

                e.preventDefault();

                var form = $(this);

                $.ajax({
                    method: 'POST',
                    url: "{{url('add-general-inforamation')}}",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: form.serialize(),
                    success: function(data) {

                        if (data.success == true) {

                            swal({
                                    title: "Success",
                                    text: data.message,
                                    type: "success",

                                    closeOnConfirm: true,
                                    showLoaderOnConfirm: true,
                                },
                                function() {



                                    $('#home1').removeClass('active show');
                                    $('#home2').addClass('active show');
                                    $('#home3').removeClass('active show');
                                    $('#home4').removeClass('active show');
                                    $('#home5').removeClass('active show');
                                    $('#secondHomeButton').addClass('active');


                                });

                        }

                    },
                    error: function(data) {
                        var errors = $.parseJSON(data.responseText);

                        $.each(errors, function(index, value) {


                        });

                    }
                });
            }
        });

        // About you

        $("#about_you_form").on('submit', function(e) {
            e.preventDefault();

            var form = $(this);


            var validator = $("#about_you_form").validate();

            if (validator.numberOfInvalids() != 0) {

                return;
            } else {

                e.preventDefault();

                var form = $(this);

                $.ajax({
                    method: 'POST',
                    url: "{{url('add-about-you')}}",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: form.serialize(),
                    success: function(data) {

                        if (data.success == true) {

                            swal({
                                    title: "Success",
                                    text: data.message,
                                    type: "success",

                                    closeOnConfirm: true,
                                    showLoaderOnConfirm: true,
                                },
                                function() {



                                    $('#home1').removeClass('active show');
                                    $('#home2').removeClass('active show');
                                    $('#home3').removeClass('active show');
                                    $('#home4').addClass('active show');
                                    $('#home5').removeClass('active show');
                                    $('#thirdNextHomeButtonb').addClass('active');


                                });

                        }

                    },
                    error: function(data) {
                        var errors = $.parseJSON(data.responseText);

                        $.each(errors, function(index, value) {


                        });

                    }
                });
            }
        });


        //

        $("#account_information_form").on('submit', function(e) {
            e.preventDefault();

            var form = $(this);


            var validator = $("#account_information_form").validate();

            if (validator.numberOfInvalids() != 0) {

                return;
            } else {

                e.preventDefault();

                var form = $(this);


                if ($('#re_account_number').val() != $('#account_number').val()) {

                    swal({
                        icon: 'error',
                        title: "Alert",
                        text: 'Account number and re-account number must be same.',
                        type: "error",

                        closeOnConfirm: false,
                        showLoaderOnConfirm: true,
                    });

                    return;
                }

                $.ajax({
                    method: 'POST',
                    url: "{{url('add-account-information-form')}}",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: form.serialize(),
                    success: function(data) {

                        if (data.success == true) {

                            swal({
                                title: "Success",
                                text: data.message,
                                type: "success",

                                closeOnConfirm: true,
                                showLoaderOnConfirm: true,
                            },
                            function() {



                                $('#home1').removeClass('active show');
                                $('#home2').removeClass('active show');
                                $('#home3').removeClass('active show');
                                $('#home4').removeClass('active show');
                                $('#home5').addClass('active show');
                                $('#thirdNextHomeButtonb').addClass('active');
                            });
                        }
                    },
                    error: function(data) {
                        var errors = $.parseJSON(data.responseText);

                        $.each(errors, function(index, value) {


                        });

                    }
                });


            }
        });

        //Individual KYC


        function readURL(input, id) {

            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function(e) {
                    $('#' + id + '').attr('src', e.target.result);
                }

                reader.readAsDataURL(input.files[0]);
            }

        }
        // getPincode
        $("#pincode_id").keyup(function(){
            // console.log('hi');

        let pincode = $('#pincode_id').val();
        // console.log(pincode);

        if (pincode.length == 6) {
        $('#custum-loader').removeClass('hidden');
            jQuery.ajax({
                url : "{{route('pincode-country-state')}}",
                type : "POST",
                data: {  _token: "{{csrf_token()}}",pincode:pincode },
                success:function(data)
                {
                    // console.log(data.data.state); return false;



                    $('#custum-loader').addClass('hidden');
                    if (!data.data) {
                        jQuery('select[name="state"]').empty();
                        //jQuery('select[name="country_id"]').empty();
                        jQuery('select[name="city"]').empty();

                        $('#state').removeClass('dissbleClickButton');
                        $('#city').addClass('dissbleClickButton');
                        //$('#country_id').removeClass('dissbleClickButton');


                       /* $('select[name="country_id"]').append('<option value="">'+ 'Select Country' +'</option>');
                        $('select[name="country_id"]').append('<option value="'+ 101 +'">'+ 'India' +'</option>');
*/
                        $('select[name="state"]').append('<option value="">'+ 'Select State' +'</option>');

                        jQuery.each(data.states, function(key,value){

                            $('select[name="state"]').append('<option value="'+ value.id +'">'+ value.name +'</option>');
                        });

                        swal({
                            icon: 'error',
                            title: "Alert",
                            text: 'Please select state & city',
                            type: "error",

                            closeOnConfirm: false,
                            showLoaderOnConfirm: true,
                        });
                        return;
                    }
                
                    $('#state').addClass('dissbleClickButton');
                    $('#city').addClass('dissbleClickButton');
                    // $('#country_id').addClass('dissbleClickButton');

                     jQuery('select[name="state"]').empty();
                     jQuery('select[name="city"]').empty();
                     // jQuery('select[name="country_id"]').empty();

                     // $('select[name="country_id"]').append('<option value="'+ 101 +'">'+ 'India' +'</option>');

                    if (data.data.state) {
                            $('select[name="state"]').append('<option value="'+ data.data.state.id +'">'+ data.data.state.name +'</option>');    
                    }

                    if (data.data.district) {
                        $('select[name="city"]').append('<option value="'+ data.data.district.id +'">'+ data.data.district.name +'</option>');
                    }

                    $('#custum-loader').addClass('hidden');
                }
            });

        }

     });

        //individuial Image Reader

        $("#frontDocumentImage1").change(function() {
            readURL(this, 'frontDocumentImageUpload1');
        });

        $("#frontDocumentImage2").change(function() {
            readURL(this, 'frontDocumentImageUpload2');
        });

        $("#frontDocumentImage3").change(function() {
            readURL(this, 'frontDocumentImageUpload3');
        });

        $("#backDocumentImage3").change(function() {
            readURL(this, 'uploadBackDocumentImg4');
        });


        //Buissiness Image Reader

        $("#frontBuissinessDocumentImage1").change(function() {
            readURL(this, 'frontDocumentBuissinessImageUpload1');
        });


        $("#backBuissinessDocumentImage1").change(function() {
            readURL(this, 'backDocumentBuissinessImageUpload1');
        });

        $("#frontDocumentBuissinessImage2").change(function() {
            readURL(this, 'frontDocumentBuissinessImageUpload2');
        });

        $("#backBuissinessDocumentImage2").change(function() {
            readURL(this, 'backBuissinessDocumentImageUpload2');
        });

        //Form submission


        $("#individual_form_kyc").on('submit', function(e) {
            event.preventDefault();

            console.log($('#document1').val(), $('#document2').val());

            if ($('#document1').val() == 'pancard') {
                pancardRegualExpression();
            }
            if ($('#document1').val() == 'adharcard') {
                adharcardRegualarExpression();
            }

            if ($('#document2').val() == 'pancard') {
                pancardRegualExpression1();
            }

            if ($('#document2').val() == 'adharcard') {
                adharcardRegualarExpression1();
            }

            let kycDocumentUpload = new FormData();


            let TotalImages = $('#frontDocumentImage1')[0].files.length;
            let frontImage = $('#frontDocumentImage1')[0];

            for (let i = 0; i < TotalImages; i++) {
                kycDocumentUpload.append('frontImage[]', frontImage.files[i]);
            }

            kycDocumentUpload.append('TotalImages', TotalImages);


            if ($('#frontDocumentImage2')[0].files.length > 0) {

                let TotalImages1 = $('#frontDocumentImage2')[0].files.length;
                let backImage = $('#frontDocumentImage2')[0];

                for (let i = 0; i < TotalImages1; i++) {
                    kycDocumentUpload.append('backImage[]', backImage.files[i]);
                }

                kycDocumentUpload.append('TotalImages', TotalImages1);

                console.log('ImageUploadedData', backImage.files[0]);
            }

            //second document first document image.

            let TotalImages3 = $('#frontDocumentImage3')[0].files.length;
            let frontImage3 = $('#frontDocumentImage3')[0];

            for (let i = 0; i < TotalImages3; i++) {
                kycDocumentUpload.append('frontImage3[]', frontImage3.files[i]);
            }

            //Second back document image.

            let TotalImages4 = $('#backDocumentImage3')[0].files.length;
            let SecondDocumentBackImg = $('#backDocumentImage3')[0];

            for (let i = 0; i < TotalImages4; i++) {
                kycDocumentUpload.append('SecondDocumentBackImg[]', SecondDocumentBackImg.files[i]);
            }

            kycDocumentUpload.append('documentNumber1', $('#documentNumber1').val());
            kycDocumentUpload.append('documentNumber2', $('#documentNumber2').val());
            kycDocumentUpload.append('document1', $('#document1').val());
            kycDocumentUpload.append('document2', $('#document2').val());




            $.ajax({
                method: 'POST',
                url: "{{url('upload-individual-user-kyc-document')}}",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: kycDocumentUpload,
                contentType: false,
                processData: false,
                success: function(data) {
                    console.log('Data', data);
                    if (data.success == true) {
                        swal({

                            title: "Success",
                            text: data.message,
                            type: "success",

                            closeOnConfirm: true,
                            showLoaderOnConfirm: true,
                        });

                        window.location.href = '{{url("/settings")}}';

                        return;

                    } else {

                        swal({
                            title: "oops!",
                            text: data.message,
                            type: "error",
                            closeOnConfirm: false,
                            showLoaderOnConfirm: true,
                        });

                    }
                },
                error: function() {
                    console.log(`Failed`)
                }
            })

        });

        $("#individual_form_express_kyc").on('submit', function(e) {
            event.preventDefault();
            let kycDocumentUpload = new FormData();

            kycDocumentUpload.append('expressDocumentNumber1', $('#expressDocumentNumber1').val());
            kycDocumentUpload.append('expressDocument1', $('#expressDocument1').val());
            kycDocumentUpload.append('otp', $('#expressOtp').val());
            kycDocumentUpload.append('kyc_type', 'express');

            $.ajax({
                method: 'POST',
                url: "{{ url('upload-express-kyc-document') }}",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: kycDocumentUpload,
                contentType: false,
                processData: false,
                success: function(data) {
                    if (data.success == true) {
                        $('#individual-document-upload').addClass('dissbleClickButton');
                        swal({
                                title: "Success",
                                text: data.message,
                                type: "success",

                                closeOnConfirm: true,
                                showLoaderOnConfirm: true,
                            },
                            function() {
                                $('#home1').removeClass('active show');
                                $('#home2').removeClass('active show');
                                $('#home3').removeClass('active show');
                                $('#home4').removeClass('active show');
                                $('#home5').addClass('active show');
                                window.location.href =
                                    '{{ url('/profile') }}?tab=kyc';
                            });

                    }

                },
                error: function($response) {
                    if ($response.status === 422) {
                        if (Object.size($response.responseJSON) > 0 && Object.size(
                                $response
                                .responseJSON.errors) > 0) {
                            show_validation_error($response.responseJSON.errors);
                            $('#home1').removeClass('active show');
                            $('#home2').removeClass('active show');
                            $('#home3').removeClass('active show');
                            $('#home4').removeClass('active show');
                            $('#home5').addClass('active show');
                        }
                    } else {
                        Swal.fire(
                            'Error', $response.responseJSON.message, 'warning'
                        )
                        setTimeout(function() {}, 1200)
                    }

                }
            })

        });


        $('#individualExpressKycGenerateOtp').on("click", function() {
                $.ajax({
                    method: 'GET',
                    url: "{{ url('generate-otp-express-kyc') }}",
                    data: {
                        expressDocumentNumber1: $('#expressDocumentNumber1').val(),
                        expressDocument1: $('#expressDocument1').val(),
                    },
                    success: function(data) {
                        if (data.success == true) {
                            $("#expressOtp").prop("disabled", false);
                            $("#expressKycVerify").prop("disabled", false);
                            swal({
                                icon: 'success',
                                title: "Success",
                                text: data.message,
                                type: "success",
                                closeOnConfirm: false,
                                showLoaderOnConfirm: true,
                            });
                            return;

                        } else {
                            $("#expressOtp").prop("disabled", true);
                            $("#expressKycVerify").prop("disabled", true);
                        }

                    },
                    error: function($response) {
                        console.log($response.status);
                        if ($response.status === 422) {
                            if (Object.size($response.responseJSON) > 0 &&
                                Object.size(
                                    $response
                                    .responseJSON.errors) > 0) {
                                show_validation_error($response.responseJSON
                                    .errors);
                            }
                        } else {
                            Swal.fire(
                                'Error', $response.responseJSON.message,
                                'warning'
                            )
                            setTimeout(function() {}, 1200)
                        }

                    }
                });
            });

        //Manual Kyc form submittions

        $("#manual_buissiness_form_kyc").on('submit', function(e) {
            event.preventDefault();

            console.log($('#buissiness_document_1').val(), $('#buissiness_document_1').val());

            if ($('#buissiness_document_1').val() == 'pancard') pancardRegualExpressionForBuissiness();

            if ($('#buissiness_document_1').val() == 'adharcard') adharcardRegualarExpressionForBuissiness();


            if ($('#buissiness_document_4').val() == 'pancard') pancardRegualExpressionForBuissiness1();

            if ($('#buissiness_document_4').val() == 'adharcard') adharcardRegualarExpressionForBuissiness1();


            let kycDocumentUpload = new FormData();


            let TotalImages = $('#frontBuissinessDocumentImage1')[0].files.length;
            let frontImage = $('#frontBuissinessDocumentImage1')[0];

            for (let i = 0; i < TotalImages; i++) {
                kycDocumentUpload.append('frontImage[]', frontImage.files[i]);
            }

            kycDocumentUpload.append('TotalImages', TotalImages);


            if ($('#backBuissinessDocumentImage1')[0].files.length > 0) {

                let TotalImages1 = $('#backBuissinessDocumentImage1')[0].files.length;
                let backImage = $('#backBuissinessDocumentImage1')[0];

                for (let i = 0; i < TotalImages1; i++) {
                    kycDocumentUpload.append('backImage[]', backImage.files[i]);
                }

                kycDocumentUpload.append('TotalImages', TotalImages1);

                console.log('ImageUploadedData', backImage.files[0]);
            }

            //second document first document image.

            let TotalImages3 = $('#frontDocumentBuissinessImage2')[0].files.length;
            let frontImage3 = $('#frontDocumentBuissinessImage2')[0];

            for (let i = 0; i < TotalImages3; i++) {
                kycDocumentUpload.append('frontImage3[]', frontImage3.files[i]);
            }

            //Second back document image.

            let TotalImages4 = $('#backBuissinessDocumentImage2')[0].files.length;
            let SecondDocumentBackImg = $('#backBuissinessDocumentImage2')[0];

            for (let i = 0; i < TotalImages4; i++) {
                kycDocumentUpload.append('SecondDocumentBackImg[]', SecondDocumentBackImg.files[i]);
            }

            kycDocumentUpload.append('documentNumber1', $('#buissiness_document_1_number').val());
            kycDocumentUpload.append('documentNumber2', $('#buissiness_document_4_number').val());
            kycDocumentUpload.append('document1', $('#buissiness_document_1').val());
            kycDocumentUpload.append('document2', $('#buissiness_document_4').val());




            $.ajax({
                method: 'POST',
                url: "{{url('upload-buissiness-user-kyc-document')}}",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: kycDocumentUpload,
                contentType: false,
                processData: false,
                success: function(data) {
                    console.log('Data', data);
                    if (data.success == true) {
                        swal({

                            title: "Success",
                            text: data.message,
                            type: "success",

                            closeOnConfirm: true,
                            showLoaderOnConfirm: true,
                        });

                        window.location.href = '{{url("/settings")}}';

                        return;

                    } else {

                        swal({
                            title: "oops!",
                            text: data.message,
                            type: "error",
                            closeOnConfirm: false,
                            showLoaderOnConfirm: true,
                        });

                    }
                },
                error: function() {
                    console.log(`Failed`);
                }
            })

        });


        //image upload

        $('#image-upload').change(function() {

            event.preventDefault();
            let image_upload = new FormData();
            let TotalImages = $('#image-upload')[0].files.length;
            let images = $('#image-upload')[0];

            for (let i = 0; i < TotalImages; i++) {
                image_upload.append('images[]', images.files[i]);
            }

            image_upload.append('TotalImages', TotalImages);
            console.log(image_upload);

            $.ajax({
                method: 'POST',
                url: "{{url('user-profile-images')}}",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: image_upload,
                contentType: false,
                processData: false,
                success: function(data) {
                    if (data.status == 'true') {

                        $('#profilePic').attr('src', data.data);
                        $('#headerProfilePic').attr('src', data.data);


                        swal({

                            title: "Success",
                            text: data.message,
                            type: "success",

                            closeOnConfirm: true,
                            showLoaderOnConfirm: true,
                        });

                        return;

                    } else {

                        swal({
                            title: "oops!",
                            text: data.message,
                            type: "error",
                            closeOnConfirm: false,
                            showLoaderOnConfirm: true,
                        });

                    }
                },
                error: function() {
                    console.log(`Failed`)
                }
            })

        });

        //open web cam for individual Users

        $("#webcamOn").on("click", function(e) {

            Webcam.set({
                height: 160,
                image_format: 'jpeg',
                jpeg_quality: 90
            });

            Webcam.attach('#my_camera');

            $("#capture_image_div").hide();
            $('#take_snapshot_individual').removeClass('button-dissable');


        });


        //Open web cam for Buissiness Users

        $("#webcamOnForBuissiness").on("click", function(e) {

            Webcam.set({
                height: 160,
                image_format: 'jpeg',
                jpeg_quality: 90
            });

            Webcam.attach('#my_camera_for_Buissiness');

            $("#my_camera_for_Buissiness_static").hide();
            //$('#take_snapshot_individual').removeClass('button-dissable');


        });




        $("#take_snapshot_individual").on("click", function(e) {

            Webcam.snap(function(data_uri) {
                $("#take_snapshot_image").attr('src', data_uri);
                $('#custum-loader').removeClass('hidden');
                jQuery.ajax({
                    enctype: 'multipart/form-data',
                    url: "{{route('save-selfie')}}",
                    type: "POST",
                    data: {
                        _token: "{{csrf_token()}}",
                        images: $("#take_snapshot_image").attr('src'),
                        userType: 'individual'
                    },
                    success: function(data) {
                        $('#custum-loader').addClass('hidden');
                        Webcam.reset();
                        $("#capture_image_div").show();
                        swal({

                            title: "Success",
                            text: data.message,
                            type: "success",

                            closeOnConfirm: true,
                            showLoaderOnConfirm: true,
                        });
                        $('#take_snapshot_individual').addClass('button-dissable');
                        $('#individual-document-upload').removeClass('dissable-individual-tab');

                    },
                    error: function(errorLog) {
                        $('#custum-loader').addClass('hidden');
                        $('#take_snapshot_individual').addClass('button-dissable');
                        $("#capture_image_div").show();
                    }

                });


            });



        });


        $("#take_snapshot_buissiness").on("click", function(e) {

            Webcam.snap(function(data_uri) {
                $("#take_snapshot_image_bussiness").attr('src', data_uri);
                $('#custum-loader').removeClass('hidden');
                jQuery.ajax({
                    enctype: 'multipart/form-data',
                    url: "{{route('save-selfie')}}",
                    type: "POST",
                    data: {
                        _token: "{{csrf_token()}}",
                        images: $("#take_snapshot_image_bussiness").attr('src'),
                        userType: 'enterprise'
                    },
                    success: function(data) {
                        $('#custum-loader').addClass('hidden');
                        Webcam.reset();
                        $("#my_camera_for_Buissiness_static").show();
                        swal({

                            title: "Success",
                            text: data.message,
                            type: "success",

                            closeOnConfirm: true,
                            showLoaderOnConfirm: true,
                        });
                        $('#take_snapshot_individual').addClass('button-dissable');
                        $('#individual-document-upload').removeClass('dissable-individual-tab');

                    },
                    error: function(errorLog) {
                        $('#custum-loader').addClass('hidden');
                        $('#take_snapshot_individual').addClass('button-dissable');
                        $("#my_camera_for_Buissiness_static").show();
                    }

                });


            });



        });


        //Individual Document Validations

        $("#documentNumber1").on("input", function() {

            if ($('#document1').val() == 'pancard') {
                pancardRegualExpression();
            } else if ($('#document1').val() == 'adharcard') {
                adharcardRegualarExpression();
            }

        });

        $("#documentNumber2").on("input", function() {

            if ($('#document2').val() == 'pancard') {
                pancardRegualExpression1();
                //return;
            } else if ($('#document2').val() == 'adharcard') {
                adharcardRegualarExpression1();
            }

        });

        $("#individual_form_express_kyc").validate({
            rules: {
                expressDocument1: "required",
                expressDocumentNumber1: "required",
            },
            messages: {
                expressDocument1: "Please select document",
                expressDocumentNumber1: "Please enter document number",
            }
        });

        $('#expressDocument1').on("change", function() {
            if ($(this).val()) {
                $('#individualExpressKycGenerateOtp').prop('disabled', false);
            } else {
                $('#individualExpressKycGenerateOtp').prop('disabled', true);

            }
        })

        //Buissiness Validations

        $("#buissiness_document_1_number").on("input", function() {

            if ($('#buissiness_document_1').val() == 'pancard') {
                pancardRegualExpressionForBuissiness();
                //return;
            } else if ($('#buissiness_document_1').val() == 'adharcard') {
                adharcardRegualarExpressionForBuissiness();
            }

        });

        $("#buissiness_document_4_number").on("input", function() {

            if ($('#buissiness_document_4').val() == 'pancard') {
                pancardRegualExpressionForBuissiness1();
                //return;
            } else if ($('#buissiness_document_4').val() == 'adharcard') {
                adharcardRegualarExpressionForBuissiness1();
            }

        });

        //Pancard Regular expression.

        function pancardRegualExpression() {

            var regex = /([A-Z]){5}([0-9]){4}([A-Z]){1}$/;

            if (regex.test($("#documentNumber1").val().toUpperCase())) {
                $("#lblPANCard").hide();
            } else {
                $("#lblPANCard").show();
                return;
            }

        }

        function pancardRegualExpression1() {

            var regex = /([A-Z]){5}([0-9]){4}([A-Z]){1}$/;

            if (regex.test($("#documentNumber2").val().toUpperCase())) {
                $("#lblPANCard1").hide();
            } else {
                $("#lblPANCard1").show();
                return;
            }

        }

        function pancardRegualExpressionForBuissiness() {

            var regex = /([A-Z]){5}([0-9]){4}([A-Z]){1}$/;

            if (regex.test($("#buissiness_document_1_number").val().toUpperCase())) {
                $("#lblPANCard5").hide();
            } else {
                $("#lblPANCard5").show();
                return;
            }

        }

        function pancardRegualExpressionForBuissiness1() {

            var regex = /([A-Z]){5}([0-9]){4}([A-Z]){1}$/;

            if (regex.test($("#buissiness_document_4_number").val().toUpperCase())) {
                $("#lblPANCard6").hide();
            } else {
                $("#lblPANCard6").show();
                return;
            }

        }

        function adharcardRegualarExpression() {

            var regex = /^[2-9]{1}[0-9]{3}\s{1}[0-9]{4}\s{1}[0-9]{4}$/;

            if (regex.test($("#documentNumber1").val())) {
                $("#adharCardError").hide();
            } else {
                $("#adharCardError").show();
                return;
            }

        }

        function adharcardRegualarExpression1() {

            var regex = /^[2-9]{1}[0-9]{3}\s{1}[0-9]{4}\s{1}[0-9]{4}$/;

            if (regex.test($("#documentNumber2").val())) {
                $("#adharCardError1").hide();
            } else {
                $("#adharCardError1").show();
                return;
            }

        }

        //Buissiness Adharcard validations

        function adharcardRegualarExpressionForBuissiness() {

            var regex = /^[2-9]{1}[0-9]{3}\s{1}[0-9]{4}\s{1}[0-9]{4}$/;

            if (regex.test($("#buissiness_document_1").val())) {
                $("#adharCardError5").hide();
            } else {
                $("#adharCardError5").show();
                return;
            }

        }

        function adharcardRegualarExpressionForBuissiness1() {

            var regex = /^[2-9]{1}[0-9]{3}\s{1}[0-9]{4}\s{1}[0-9]{4}$/;

            if (regex.test($("#buissiness_document_4").val())) {
                $("#adharCardError6").hide();
            } else {
                $("#adharCardError6").show();
                return;
            }

        }

        //Ajax Calling while we selecting state


        jQuery('select[name="state"]').on('change', function() {

            var state_id = jQuery(this).val();

            if (state_id) {
                jQuery.ajax({
                    url: "{{route('cities-list')}}",
                    type: "POST",
                    data: {
                        _token: "{{csrf_token()}}",
                        state_id: state_id
                    },

                    success: function(data) {
                        jQuery('select[name="city"]').empty();
                        window.localStorage.removeItem('city');
                        localStorage.setItem("city", JSON.stringify(data));
                        $('select[name="city"]').append('<option value="' + '' + '">' + 'Select City' + '</option>');
                        jQuery.each(data.cities, function(key, value) {

                            $('select[name="city"]').append('<option value="' + value.id + '">' + value.name + '</option>');
                        });
                    }
                });


            }
        });


        //Company Details Forms

        $("#company_details").validate({

            rules: {

                company_name: "required",
                gstin_number: {
                    required: true
                },
                billing_address_1: "required",
                billing_address_2: "required",
                company_email: {
                    required: true,
                    email: true
                },
                state: "required",
                city: "required",
                phone_number: {
                    required: true,
                    digits: true,
                    minlength: 10,
                    maxlength: 10
                },
                zipcode: {
                    required: true,
                    number: true,
                },
            },
            messages: {
                company_name: "Company name is required",
                gstin_number: "GST number is required",
                billing_address_1: "Billing address 1 is required",
                billing_address_2: "Billing address 2 is required",
                city: "City is required",
                phone_number: {
                    required: 'Please enter mobile number',
                    digits: 'please enter digits only',
                    minLength: 'Invalid mobile number',
                    maxlength: 'Invalid mobile number'
                },
                zipcode: {
                    required: 'Zipcode is required',
                    number: 'Zipcode must be a number',
                },
                company_email: {
                    required: 'Email is required',
                    email: 'Please enter a valid email address'
                },

            }

        });


        //Ajax calling form Company Details 

        $("#company_details").on('submit', function(e) {
            e.preventDefault();

            var form = $(this);


            var validator = $("#company_details").validate();

            if (validator.numberOfInvalids() != 0) {

                return;
            } else {

                e.preventDefault();

                var form = $(this);

                $.ajax({
                    method: 'POST',
                    url: "{{url('save-company-information')}}",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: form.serialize(),
                    success: function(data) {

                        if (data.success == true) {

                            swal({
                                    title: "Success",
                                    text: data.message,
                                    type: "success",

                                    closeOnConfirm: true,
                                    showLoaderOnConfirm: true,
                                },
                                function() {



                                    $('#home1').removeClass('active show');
                                    $('#home2').removeClass('active show');
                                    $('#home3').removeClass('active show');
                                    $('#home4').addClass('active show');
                                    $('#home5').removeClass('active show');
                                    $('#nextButtonHome4').addClass('active');


                                });

                        }

                    },
                    error: function(data) {
                        var errors = $.parseJSON(data.responseText);

                        $.each(errors, function(index, value) {


                        });

                    }
                });


            }
        });

        //Localstorage Handling Dependend dropdown
        
        var city = JSON.parse(localStorage.getItem("city"));

        var city_id = "";

        if (city_id == '' || city_id == null) {
            $('select[name="city"]').val('');
            window.localStorage.removeItem('city');
        }

        if (city_id != '' || city_id != null) {
            jQuery.each(city.cities, function(key, value) {

                $('select[name="city"]').append('<option value="' + value.id + '" ' + (value.id == city_id ? 'selected' : '') + '>' + value.name + '</option>');
            });
        }
    });
</script>
@endsection