@extends('reachassuree_agent/layouts.main')
@section('title', $data['title'])
@section('content')

<style>
    @media (max-width:1630px) {
        .full-width{
            width:100% !important;
        }
    }

    @media (max-width:496px) {
        .second-button {
            font-size: 14px;
        }

        .second-button .btn {
            font-size: 0.9rem;
        }
    }
    
    .img-thumbnail{
        width: 72px;
    }

    .modal-footer>*{
        margin: unset;
    }
    
    ol{
        font-weight: 600;
        padding-left: 1.5rem;
    }

    .nav-justified .nav-item {
        margin: 0 10px 0 0;
        flex-basis: unset !important;
        -webkit-box-flex: unset !important;
    }

    a#profileButton:hover,
    a.profileButton:hover,
    .profileButton.active{
        color: #fff;
        background: var(--bs-blue);
    }

    .profileButton{
        width: 100%;
        display: block;
        background: white;
        padding: 0.5rem 1rem;
        border-radius: 0.6rem;
    }

    .second-button {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

</style>

<div class="page-content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="page-title-box d-flex align-items-center justify-content-between">
                    <h4 class="mb-sm-0 font-size-18">
                        <a href="javascript:void(0);" onclick="history.back();"class="btn btn-primary px-3 waves-effect waves-light btn-sm backToButton" title="Back Button" id="backToButton"><i class="mdi mdi-arrow-left font-size-20"></i></a>&nbsp;&nbsp;&nbsp; {{$data['title']}}
                    </h4>
                    <a href="javascript:void(0);" onclick="showDataSecurityLetter();"class="btn btn-light waves-effect" title="Data Security Letter" style="border: 2px solid #d0d0d0;">Data Security Policy</a>
                </div>
            </div>
        </div>

        <div class="row justify-content-end">
            <a href="javascript:void(0);" onclick="return learningVideo()" class="btn-youtube-pulse btn-youtube-pulse-border">
                <i class="mdi mdi-youtube"></i>
            </a>
        </div>
       
        @if(getExpiryDateWithGracePeriod() >= date('Y-m-d H:i:s'))            
            <div class="row">
                <div class="col-12">
                    <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                        <ul class="nav nav-pills nav-justified" id="myTab" role="tablist">
                            <li class="nav-item waves-effect waves-light">
                                @if ($data['title'] == "Profile")
                                    <a class="profileButton active" href="{{ route('profile') }}"><span class="d-sm-block">Profile</span></a>
                                @else
                                    <a class="profileButton" href="{{ route('profile') }}"><span class="d-sm-block">Profile</span></a>
                                @endif
                            </li>
                            <li class="nav-item waves-effect waves-light">
                                <a class="profileButton" href="{{ route('general.settings', ['type' => 'general']) }}"><span class="d-sm-block">General</span></a>
                            </li>
                            <!-- <li class="nav-item waves-effect waves-light">
                                <a class="profileButton" href="{{ route('general.settings', ['type' => 'loading']) }}"><span class="d-sm-block">Loading</span></a>
                            </li> -->
                            {{-- <li class="nav-item waves-effect waves-light">
                                <a class="profileButton" href="{{ route('general.settings', ['type' => 'header']) }}"><span class="d-sm-block">Header</span></a>
                            </li> --}}
                            <li class="nav-item waves-effect waves-light">
                                <a class="profileButton" href="{{ route('general.settings', ['type' => 'social']) }}"><span class="d-sm-block">Social</span></a>
                            </li>
                            <li class="nav-item waves-effect waves-light">
                                <a class="profileButton" href="{{ route('general.settings', ['type' => 'footer']) }}"><span class="d-sm-block">Footer</span></a>
                            </li>
                            <li class="nav-item waves-effect waves-light">
                                <a class="profileButton" href="{{ route('general.settings', ['type' => 'email']) }}"><span class="d-sm-block">Email</span></a>
                            </li>
                            <li class="nav-item waves-effect waves-light">
                                <a class="profileButton" href="{{ route('general.settings', ['type' => 'google']) }}"><span class="d-sm-block">Google</span></a>
                            </li>

                            @if(Auth::user()->type == 1)
                                <li class="nav-item waves-effect waves-light">
                                    @if ($data['title'] == "KYC Details")
                                        <a class="profileButton active" href="{{ route('kyc.details') }}"><span class="d-sm-block">KYC Details</span></a>
                                    @else
                                        <a class="profileButton" href="{{ route('kyc.details') }}"><span class="d-sm-block">KYC Details</span></a>
                                    @endif
                                </li>
                            @endif
                        </ul>
                    </div>
                </div>
            </div>
        @endif

        <div class="row">
            <div class="col-md-12">
                <div class="card overflow-hidden">
                    <div class="bg-primary bg-soft">
                        <div class="row">
                            <div class="col-7">
                                <div class="text-primary p-4">
                                    @if(agentDetails(3) != '')
                                        <h3 class="text-primary" id="firm_name_id">Welcome to {{agentDetails(3)}} !</h3>
                                    @else
                                        <h3 class="text-primary" id="firm_name_id_1">Welcome to Reach Assuree !</h3>
                                    @endif
                                    <h5 id="timeMessage"></h5>
                                </div>
                                <div class="d-flex px-4" style="align-items: center;">
                                    <div class="one">
                                        <div class="avatar-md profile-user-wid" style="margin-right: 15px;">
                                            @if (getHostBaseUrl() == 1)
                                                <img src="{{ getUserProfile() }}" alt="" class="img-thumbnail rounded-circle" style="height: 100%;">
                                            @else
                                                <img src="{{ getUserProfile() }}" alt="" class="img-thumbnail rounded-circle" style="height: 100%;">
                                            @endif
                                        </div>
                                    </div>
                                    <div class="two">
                                        <h5 class="font-size-16 text-capitalize" style="margin-bottom: 0.2rem;"><strong>{{ Auth::user()->first_name }} {{ Auth::user()->last_name }}</strong></h5>
                                        <p class="mb-0 text-uppercase"><strong>{{ getUserType(Auth::user()->type) }}</strong></p>
                                    </div>
                                </div>
                            </div>

                            <div class="col-5 align-self-end" style="text-align: end;"> 
                                <img src="{{ asset('assets/images/profile-img.png') }}" alt="" class="img-fluid" style="height: 200px;">
                            </div>

                            <div class="card" style="height: fit-content;margin: 0;">
                                <div class="card-body drop" style="box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; border-radius: 0 0 0.8rem 0.8rem;">
                                    <div class="row">
                                        <h5 style="margin: 0; text-align: center;">Agent Code : <strong>{{ Auth::user()->agent_code }}</strong></h5>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        @if ($data['title'] == "Profile")
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="d-flex">
                                <h4 class="card-title mb-4">Personal Information</h4>
                            </div>    
                            
                            <form id="formUserProfile"  method="POST" class="needs-validation" enctype="multipart/form-data" novalidate>
                                @csrf
                                <div class="row">
                                    <div class="col-md-3">
                                        <div class="mb-3">
                                            <label for="user_first_name" class="form-label">First Name<span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" id="user_first_name" name="user_first_name" placeholder="First name" value="{{ Auth::user()->first_name }}" required maxlength="64" autocomplete="off">
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="mb-3">
                                            <label for="user_middle_name" class="form-label">Middle Name<span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" id="user_middle_name" name="user_middle_name" placeholder="Middle name" value="{{ Auth::user()->middle_name }}" required maxlength="64" autocomplete="off">
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="mb-3">
                                            <label for="user_last_name" class="form-label">Last Name<span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" id="user_last_name" name="user_last_name" placeholder="Last name" value="{{ Auth::user()->last_name }}" required maxlength="64" autocomplete="off">
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="mb-3">
                                            <label for="user_username" class="form-label">Username<span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" id="user_username" name="user_username" placeholder="Username" value="{{ Auth::user()->username }}" required maxlength="32" autocomplete="off">
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-3">
                                        <div class="mb-3">
                                            <label for="user_firmname" class="form-label">Firm Name<span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" id="user_firmname" name="user_firmname" placeholder="firm name" value="{{ Auth::user()->firm_name }}" required autocomplete="off">
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="mb-3">
                                            <label for="date_of_birth" class="form-label">Date of Birth<span class="text-danger">*</span></label>
                                            @if (Auth::user()->dob == null)
                                                <input type="text" id="date_of_birth" name="date_of_birth" class="form-control" placeholder="Select date of birth" value="" required autocomplete="off">
                                            @else
                                                <input type="text" id="date_of_birth" name="date_of_birth" class="form-control" placeholder="Select date of birth" value="{{ Carbon\Carbon::parse(Auth::user()->dob)->format('d-m-Y') }}" required autocomplete="off">
                                            @endif
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="mb-3">
                                            @if(Auth::user()->id == 1)
                                                <div class="d-flex justify-content-between">
                                                    <label for="user_email" class="form-label">Email  <a onclick="return editEmailId()" type="button" id="btnEditEmailId" title="Edit" class="mr-3 emailMobileArea"><i class="bx bx-edit-alt font-size-15 ms-2"></i></a></label>
                                                    
                                                    @if($data['is_email_verified'] == 0)
                                                        <span class="badge badge-pill badge-soft-danger font-size-11 emailMobileArea" style="height: max-content;"><i class="mdi mdi-close-thick"></i> Unverified</span>
                                                    @else
                                                        <span class="badge badge-pill badge-soft-success font-size-11 emailMobileArea" style="height: max-content;"><i class="mdi mdi-check-bold"></i> Verified</span>
                                                    @endif
                                                </div>
                                            @else
                                                <label for="user_email" class="form-label">Email</label>
                                            @endif
                                            <input type="email" class="form-control text-lowercase" id="user_email" name="user_email" placeholder="Email" value="{{ Auth::user()->email }}" required autocomplete="off" disabled>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="mb-3">
                                            <input type="hidden" id="user_mobileLength">
                                            @if(Auth::user()->id == 1)
                                                <div class="d-flex justify-content-between">
                                                    <label for="user_mobile" class="form-label">Mobile Number <a onclick="return editMobileNumber()" type="button" id="btnEditMobileNumber" class="emailMobileArea mr-3" title="Edit"><i class="bx bx-edit-alt font-size-15 ms-2"></i></a></label>
                                                    @if($data['is_mobile_verified'] == 0)
                                                        <span class="badge badge-pill badge-soft-danger font-size-11 emailMobileArea" style="height: max-content;"><i class="mdi mdi-close-thick"></i> Unverified</span>
                                                    @else
                                                        <span class="badge badge-pill badge-soft-success font-size-11 emailMobileArea" style="height: max-content;"><i class="mdi mdi-check-bold"></i> Verified</span>
                                                    @endif
                                                </div>
                                            @else
                                                <label for="user_mobile" class="form-label">Mobile Number</label>
                                            @endif
                                            <input type="text" class="form-control" id="user_mobile" name="user_mobile" placeholder="Mobile" value="{{ Auth::user()->mobile }}" maxlength="10" required autocomplete="off" disabled>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-3">
                                        <div class="mb-3">
                                            <label for="wp_number" class="form-label">Whatsapp Number</label>
                                            <input type="text" class="form-control" name="wp_number" id="wp_number" onkeypress="return isNumber(event);" placeholder="Enter whatsapp number" value="{{ Auth::user()->whatsapp }}" autocomplete="off" maxlength="10">
                                        </div>
                                    </div>

                                    <div class="col-md-3">
                                        <div class="mb-3">
                                            @if(Auth::user()->id == 1)
                                                <label for="sub_domain" class="form-label">Sub domain <span class="text-danger">*</span></label>
                                                <input type="text" id="sub_domain" name="sub_domain" class="form-control" placeholder="Sub Domain" maxlength="320" required value="{{ $data['subdomain'] }}" autocomplete="off">
                                            @else
                                                <label for="sub_domain" class="form-label">Sub domain</label>
                                                <input type="text" class="form-control" placeholder="Sub Domain" required value="{{ $data['subdomain'] }}" autocomplete="off" readonly>
                                            @endif
                                        </div>
                                    </div>

                                    <div class="col-md-3">
                                        <div class="mb-3">
                                            <input type="hidden" id="pincodeLength" value="">
                                            <label for="pincode" class="form-label">Pincode<span class="text-danger">*</span></label>
                                            <input type="text" id="pincode" name="pincode" class="form-control" placeholder="Enter your pincode" minlength="6" maxlength="6" value="{{ Auth::user()->pincode }}" required autocomplete="off">
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="mb-3">
                                            <label for="gender_id" class="form-label">Gender<span class="text-danger">*</span></label>
                                            <select class="form-control" id="gender_id" name="gender_id" required>
                                                <option value="0" {{ ((Auth::user()->gender_id === null) ? 0 : Auth::user()->gender_id == 0) ? 'selected' : '' }}>Male</option>
                                                <option value="1" {{ ((Auth::user()->gender_id === null) ? 0 : Auth::user()->gender_id == 1) ? 'selected' : '' }}>Female</option>
                                                <option value="2" {{ ((Auth::user()->gender_id === null) ? 0 : Auth::user()->gender_id == 2) ? "selected" : "" }}>Firm</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="row mb-2">
                                    <div class="col-md-4">
                                        <div class="mb-3">
                                            <label for="address1" class="form-label">Address 1</label>
                                            <input type="text" id="address1" name="address1" class="form-control" placeholder="Enter your address" value="{{ Auth::user()->address1 }}" autocomplete="off">
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="mb-3">
                                            <label for="address2" class="form-label">Address 2</label>
                                            <input type="text" id="address2" name="address2" class="form-control" placeholder="Enter your address" value="{{ Auth::user()->address2 }}" autocomplete="off">
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="mb-3">
                                            <input type="hidden" id="current_user_avatar" name="current_user_avatar" class="form-control" value="">
                                            <label for="user_avatar" class="form-label">Profile Image<span style="font-size: 12px;color: #808080bd;">(JPG, PNG, or JPEG)</span></label>
                                            @if (Auth::user()->avatar != null && Auth::user()->avatar != 'default.png')
                                                <a href="{{ route('download.user.avatar', ['id' => Auth::user()->id, 'document' => Auth::user()->avatar]) }}" class="text text-primary ms-2">Download</a>                                    
                                            @endif
                                            <input type="file" class="form-control" id="user_avatar" name="user_avatar" accept="image/jpeg,image/png">
                                        </div>
                                    </div>
                                </div>
                                <!--  -->
                                <div class="row passwordArea">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="password" class="col-form-label">Password<span class="text-danger">*</span></label>
                                            <div class="input-group auth-pass-inputgroup">
                                                <input type="password" class="form-control" placeholder="Enter password" id="password" name="password" autocomplete="off" required minlength="6" maxlength="14">
                                                <button class="btn btn-light" id="eye1" type="button" title="eye1"><i class="mdi mdi-eye-off-outline"></i></button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="confirm_password" class="col-form-label">Confirm Password<span class="text-danger">*</span></label>
                                            <div class="input-group auth-pass-inputgroup">
                                                <input type="password" class="form-control" placeholder="Enter confirm password" id="confirm_password" name="confirm_password" autocomplete="off" required minlength="6" maxlength="14">
                                                <button class="btn btn-light" id="eye2" type="button" title="eye2"><i class="mdi mdi-eye-off-outline"></i></button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                @if (Auth::user()->id == 1)
                                    <div class="form-check mb-2">
                                        <input name="gridCheck[]" id="is_accepted_tac_1" value="1" class="form-check-input childCheckbox" type="checkbox" required>
                                        <label class="form-check-label" for="is_accepted_tac_1">By requesting Free CRM services and/or products of Reach Assuree, I acknowledge the fact that the Free CRM version will only be available with its fixed criteria Limitation.</a></label>
                                        <div class="help-block with-errors gridCheck-error"></div>
                                    </div>

                                    <div class="form-check mb-2">
                                        <input name="gridCheck[]" id="is_accepted_tac_2" value="2" class="form-check-input childCheckbox" type="checkbox" required>
                                        <label class="form-check-label" for="is_accepted_tac_2">I hereby declare that I am aware of the privacy policy of Reach Assuree and give my consent to process my data with regard to Free CRM registration as per the policies, terms and conditions of Reach Assuree.</a></label>                                        
                                        <div class="help-block with-errors gridCheck-error"></div>
                                    </div>

                                    <div class="form-check mb-2">
                                        <input name="gridCheck[]" id="is_accepted_tac_3" value="3" class="form-check-input childCheckbox" type="checkbox" required>
                                        <label class="form-check-label" for="is_accepted_tac_3">I hereby declare that I do not have any right or claim for my insurance and other data that is being submitted or/ and entered by me for the Free CRM registration of services and/or product of Reach Assuree.</a></label>
                                        <div class="help-block with-errors gridCheck-error"></div>
                                    </div>

                                    <div class="form-check mb-2">
                                        <input name="gridCheck[]" id="is_accepted_tac_4" value="4" class="form-check-input childCheckbox" type="checkbox" required>
                                        <label class="form-check-label" for="is_accepted_tac_4">I hereby declare that all the information and documents provided by me are correct and signify my legal identity. In case of any discrepancy in the above data filed by me, I hereby abide to the decision of Reach Assure regarding the registration which may include the cancelation of Free CRM registration.</a></label>
                                        <div class="help-block with-errors gridCheck-error"></div>
                                    </div>

                                    <div class="form-check mb-2">
                                        <input name="gridCheck[]" id="is_accepted_tac_5" value="5" class="form-check-input childCheckbox" type="checkbox" required>
                                        <label class="form-check-label" for="is_accepted_tac_5">I hereby abide to comply with all the terms, conditions, and policies of Reach Assuree and if I am found in breach of them, then the Reach Assuree has the right to start legal proceedings against me and can cancel my registration without any intimation or refund.</a></label>
                                        <div class="help-block with-errors gridCheck-error"></div>
                                    </div>

                                    <div class="form-check mb-2">
                                        <input name="gridCheck[]" id="is_accepted_tac_6" value="6" class="form-check-input childCheckbox" type="checkbox" required>
                                        <label class="form-check-label" for="is_accepted_tac_6">I hereby declare that I will not create fake or multiple profiles for the Free CRM registration for the services and/or product of Reach Assuree and if I do so, Reach Assuree has the right to claim the amount equivalent to the subscription amount for the period used by creating fake or multiple profiles and I will pay the claim amount in 15 days from the date of initiation of such claim.</a></label>
                                        <div class="help-block with-errors gridCheck-error"></div>
                                    </div>

                                    <div class="form-check mb-2">
                                        <input name="gridCheck[]" id="is_accepted_tac_7" value="7" class="form-check-input childCheckbox" type="checkbox" required>
                                        <label class="form-check-label" for="is_accepted_tac_7">I agree to accept any digital message like SMS, WhatsApp messages, E-mail messages, or telecaller from Reachassuree. I am here to agree as above after I have knowledge of TRAI rules and regulations.</a></label>
                                        <div class="help-block with-errors gridCheck-error"></div>
                                    </div>

                                    <div class="form-check">
                                        <input name="gridCheck[]" id="is_accepted_tac_8" value="8" class="form-check-input" type="checkbox" required>
                                        <label class="form-check-label" for="is_accepted_tac_8">I've read and accept the all above <span class="text-danger">Terms & Conditions.</span></a></label>
                                        <div class="help-block with-errors gridCheck-error"></div>
                                    </div>
                                @endif                              

                                <button type="submit" class="btn btn-primary px-5 float-end" id="btnSaveProfile">Save</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        @if ($data['title'] == "KYC Details")
            <div class="row">
                <div class="col-md-12">
                    <div class="card overflow-hidden">
                        <form action="{{ route('agent.document.save') }}" accept-charset="utf-8" method="POST" id="formUploadAgentDocument" class="needs-validation" novalidate>
                            @csrf
                            <div class="row">
                                <div class="card mb-0">
                                    <div class="card-body">
                                        <h4 class="card-title mb-4">Upload Your KYC Details</h4>

                                        <div class="row">
                                            <div class="col-md-6 full-width">
                                                <input type="hidden" id="can_document" name="can_document" class="form-control" value="">
                                                <div class="mb-3">
                                                    <label for="aadhar_number" class="form-label">Aadhar Number<span class="text-danger">*</span></label>
                                                    <input type="text" class="form-control" name="aadhar_number" id="aadhar_number" placeholder="Aadhar number" value="{{ Auth::user()->aadhar_number }}" required autocomplete="off">
                                                </div>
                                            </div>
                                            <div class="col-md-6 full-width">
                                                <div class="mb-3">
                                                    <input type="hidden" id="current_aadhar_document" name="current_aadhar_document" class="form-control" value="">
                                                    <label for="aadhar_document" class="form-label">Upload Document<span style="font-size: 12px;color: #808080bd;">(JPG, PNG, JPEG or PDF)</span><span class="text-danger">*</span></label>
                                                    @if (Auth::user()->aadhar_document != null)
                                                        <a href="{{ route('download.agent.aadhar', ['id' => Auth::user()->id, 'document' => Auth::user()->aadhar_document]) }}" class="text text-primary ms-2">Download</a>
                                                    @endif
                                                    <input type="file" class="form-control" multiple  name="aadhar_document[]" id="aadhar_document" accept="image/jpeg,image/png,application/pdf" required>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-md-6 full-width">
                                                <div class="mb-3">
                                                    <label for="pancard_number" class="form-label">Pan Card Number<span class="text-danger">*</span></label>
                                                    <input type="text" class="form-control" name="pancard_number" id="pancard_number" placeholder="Pan Card number" value="{{ Auth::user()->pan_number }}" required autocomplete="off">
                                                </div>
                                            </div>
                                            <div class="col-md-6 full-width">
                                                <div class="mb-3">
                                                    <input type="hidden" id="current_pan_document" name="current_pan_document" class="form-control" value="">
                                                    <label for="pan_document" class="form-label">Upload Document<span style="font-size: 12px;color: #808080bd;">(JPG, PNG, JPEG or PDF)</span><span class="text-danger">*</span></label>
                                                    @if (Auth::user()->pan_document != null)
                                                        <a href="{{ route('download.agent.panCard', ['id' => Auth::user()->id, 'document' => Auth::user()->pan_document]) }}" class="text text-primary ms-2">Download</a>                                                        
                                                    @endif
                                                    <input type="file" class="form-control" multiple name="pan_document[]" id="pan_document" required accept="image/jpeg,image/png,application/pdf">
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-md-6 full-width">
                                                <div class="mb-3">
                                                    <label for="gst_number" class="form-label">GST Number</label>
                                                    <input type="text" class="form-control" name="gst_number" id="gst_number" placeholder="GST number" value="{{ Auth::user()->gst_number }}" autocomplete="off">
                                                </div>
                                            </div>
                                            <div class="col-md-6 full-width">
                                                <div class="mb-3">
                                                    <input type="hidden" id="current_gst_document" name="current_gst_document" class="form-control" value="">
                                                    <label for="gst_document" class="form-label">Upload Document<span style="font-size: 12px;color: #808080bd;">(JPG, PNG, JPEG or PDF)</span></label>
                                                    @if (Auth::user()->gst_document != null)
                                                        <a href="{{ route('download.agent.GstDocument', ['id' => Auth::user()->id, 'document' => Auth::user()->gst_document]) }}" class="text text-primary ms-2">Download</a>
                                                    @endif
                                                    <input type="file" class="form-control" multiple name="gst_document[]" id="gst_document" accept="image/jpeg,image/png,application/pdf">
                                                </div>
                                            </div>
                                        </div>

                                        <button class="btn btn-primary px-5 float-end" type="submit" id="saveKYC">Save</button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        @endif
    </div>
</div>

<div class="modal fade" id="modalMode" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="modalModeLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalModeLabel">Personal Information</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        <p class="m-0">Before we proceed, we kindly request you to provide your Personal Information. This is essential for us to offer you a tailored and efficient experience. Please fill in the following details</p>
                        <ul>
                            <li>Your Full Name</li>
                            <li>Firm Name</li>
                            <li>Username</li>
                            <li>Date of Birth</li>
                            <li>Password</li>
                            <li>Address</li>
                        </ul>
                        <p class="m-0">We value your input and want to ensure a personalized experience for you. Kindly fill in these required fields. Thank you for your cooperation!</p>
                    </div>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modalMobileNumber" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="modalMobileNumberLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalMobileNumLabel">Verified Mobile Number</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <form id="formAddMobileNumber" action="javascript:void(0);" method="POST" class="needs-validation" novalidate>
                @csrf
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="mb-3">
                                <label for="agent_mobile_number" class="form-label">Mobile Number<span class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="agent_mobile_number" id="agent_mobile_number" onkeypress="return isNumber(event);" minlength="10" maxlength="10" placeholder="Mobile number" autocomplete="off" required >
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-light me-2" data-bs-dismiss="modal">Close</button>
                    <button type="submit" id="btnGetOtp" class="btn btn-primary px-3">Get OTP</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="modalOtpVerification" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="modalOtpVerificationLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalOtpVerificationLabel">OTP Verify</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <form id="formOtpVerification" action="javascript:void(0);" method="POST" class="needs-validation" novalidate>
                @csrf
                <div class="modal-body">
                    <input type="hidden" id="mobile_num" name="mobile_num" class="form-control">
                    <div class="row">
                        <div class="col-lg-12 col-sm-12">
                            <label for="mobile_otp" class="form-label">Mobile OTP</label>
                            <input type="text" name="mobile_otp" id="mobile_otp" maxLength="4" class="form-control" placeholder="Mobile OTP" value="" onkeypress="return isNumber(event);" autocomplete="off" required>
                        </div>
                    </div>
                    <div class="modal-footer justify-content-between">
                        <a href="javascript:void(0);" onclick="changeVerificationData();">Want to change mobile number?</a>
                        <div class="d-flex">
                            <button class="btn btn-primary me-2" id="ResendOTP">Resend OTP</button>
                            <button type="submit" class="btn btn-primary" id="btnOtpVerify">Verify</button>
                        </div>
                    </div>
                    
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="modalEmailForm" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="modalEmailLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalEmailLabel">Verified E-Mail</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <form id="formAddEmail" action="javascript:void(0);" method="POST" class="needs-validation" novalidate>
                @csrf
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="mb-3">
                                <label for="agent_email" class="form-label">E-Mail<span class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="agent_email" id="agent_email" placeholder="Enter Email" autocomplete="off" required data-error="Please enter your mobile">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-light me-2" data-bs-dismiss="modal">Close</button>
                    <button type="submit" id="btnGetOtpEmail" class="btn btn-primary px-3">Get OTP</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="modalEmailOtpVerification" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="modalEmailOtpVerificationLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalEmailOtpVerificationLabel">OTP Verify</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <form id="formEmailOtpVerification" action="javascript:void(0);" method="POST" class="needs-validation" novalidate>
                @csrf
                <div class="modal-body">
                    <input type="hidden" id="enter_email_id" name="enter_email_id" class="form-control">
                    <div class="row">
                        <div class="col-lg-12 col-sm-12">
                            <label for="email_otp" class="form-label">Email OTP</label>
                            <input type="text" class="form-control" name="email_otp" id="email_otp" maxLength="4"  placeholder="Email OTP" value="" onkeypress="return isNumber(event);" autocomplete="off" required>
                        </div>
                    </div>
                    <div class="modal-footer justify-content-between">
                        <a href="javascript:void(0);" onclick="changeEmailVerificationData();">Want to change Email?</a>
                        <div class="d-flex">
                            <button class="btn btn-primary me-2" id="ResendEmailOTP">Resend OTP</button>
                            <button type="submit" class="btn btn-primary" id="btnEmailOtpVerify">Verify</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

@section('custom-scripts')
<script src="{{ asset('assets/libs/parsleyjs/parsley.min.js') }}"></script>
<script src="{{ asset('assets/js/pages/kendo.all.min.js') }}"></script>
<script src="{{ asset('assets/js/pages/form-validation.init.js') }}?v=2"></script>
<script src="{{ asset('assets/js/pages/jquery.form.js') }}"></script>

<script type="text/javascript">
    var firstFormSaveAjaxUrl = "{{ route('user.profile.save') }}";
    var secondFormSaveAjaxUrl = "{{ route('agent.document.save') }}";    
    var csrfToken = $("[name=_token").val();
    var data = [];

    $(document).ready(function() {
        $('.passwordArea').hide().find('input').attr('disabled',true);
        $('.emailMobileArea').show();

        if("{{ Auth::user()->id }}" == 1 && "{{ Auth::user()->password }}" == ''){                            
            $('.passwordArea').show().find('input').attr('disabled',false);
            $('.emailMobileArea').hide();
        }

        if("{{ Auth::user()->id }}" == 1){

            let indicesToCheckString  = "{{Auth::user()->privacy_policy}}";

            let indicesToCheck = indicesToCheckString.split(',').map(Number); // Convert to an array of integers

            indicesToCheck = indicesToCheck.map(index => index - 1);
            
            $("input[type=checkbox][name='gridCheck[]']").each(function(index, element) {
                if (indicesToCheck.includes(index)) {
                    $(element).prop('checked', true);
                    element.value = index + 1; // Setting the value to the 1-based index
                    data.push(index + 1); 
                }
            });
        }
        
        $('#eye1').click(function(){
            if($('#eye1 i').hasClass('mdi-eye-off-outline')){
                $('#eye1 i').removeClass('mdi-eye-off-outline').addClass('mdi-eye-outline');
                $('#password').attr('type','text');
            }else{
                $('#eye1 i').removeClass('mdi-eye-outline').addClass('mdi-eye-off-outline');
                $('#password').attr('type','password');
            }
        });

        $('#eye2').click(function(){
            if($('#eye2 i').hasClass('mdi-eye-off-outline')){
                $('#eye2 i').removeClass('mdi-eye-off-outline').addClass('mdi-eye-outline');
                $('#confirm_password').attr('type','text');
            }else{
                $('#eye2 i').removeClass('mdi-eye-outline').addClass('mdi-eye-off-outline');
                $('#confirm_password').attr('type','password');
            }
        });

        $('#user_first_name, #user_middle_name, #user_last_name, #address1, #address2').on('input', function() {
            var inputValue = $(this).val();
            var capitalizedValue = capitalizeString(inputValue);
            $(this).val(capitalizedValue);
        });

        $('#aadhar_number, #wp_number, #pincode, #agent_mobile_number').on('input paste', function(){
            let value = $(this).val();

            // Remove leading zeros but keep "0" if it's the only digit
            value = notAllZeroAmt(value);

            // Set the cleaned value back to the input field
            $(this).val(value);            
        });

        $('#user_firmname').on('input', function() {
            var inputValue = $(this).val();
            var capitalizedValue = capitalizeWords(inputValue);
            $(this).val(capitalizedValue);
        }).bind('input blur', function(e) {
            e.target.value = this.value.replace(/(\s{2,})/g, ' ').replace(/^\s*/, '');
        });;  
        
        $(document).on('click', '#is_accepted_tac_8', function() {
            var isChecked = $(this).prop('checked');
            
            if (isChecked) {
                $(document).find('.childCheckbox').prop('checked', true);
                
                $("input[type=checkbox][name='gridCheck[]']:checked").each(function() {
                    let value = parseInt(this.value);
                    if (!data.includes(value)) {
                        if(!isNaN(value)){
                            data.push(value);
                        }
                    }
                });
            } else {
                $(document).find('.childCheckbox').prop('checked', false);
                 data = []; 
            }
            changeTermsConditions(data);
        });

        $("input[type=checkbox][name='gridCheck[]']").on('change', function() {
            var index = $("input[type=checkbox][name='gridCheck[]']").index(this);
            this.value = this.checked ? index + 1 : '';
            
            var value = index + 1;

            if (this.checked) {
                if (!data.includes(value)) {
                    data.push(value);
                }
            } else {
                // Remove the value from the data array
                data = data.filter(function(item) {
                    return item !== value;
                });

                data = data.filter(function(item) {
                    return item !== 8;
                });
            }
            
            // Check if all checkboxes are checked to update the master checkbox
            if(this.value == ''){
                $("#is_accepted_tac_8").prop('checked',false);                
            }else{                
                if($("input[type=checkbox][name='gridCheck[]']:checked").length == 7 || $("input[type=checkbox][name='gridCheck[]']:checked").length == 8){
                    $("#is_accepted_tac_8").prop('checked',true);
                    
                    $('.childCheckbox').prop('checked', true);

                    $("input[type=checkbox][name='gridCheck[]']:checked").each(function() {
                        let value1 = parseInt(this.value);
                        if (!data.includes(value1)) {
                            if(!isNaN(value1)){
                                data.push(value1);
                            }
                        }
                    });
                }
            }

            changeTermsConditions(data);
        });

        function changeTermsConditions(data){
            var changePrivacyPolicy = "{{ route('change.terms.conditions') }}";
    
            let uniqueArray = [...new Set(data)];

            $.ajax({  
                type: "GET",
                url: changePrivacyPolicy + "?value="+ uniqueArray,  
                success:function(response){  
                }  
            }); 
        }

        function capitalizeWords(input) {
            return input.replace(/\b\w/g, function(char) {
                return char.toUpperCase();
            });
        }

        $('#modalMode').modal('hide');
        $('#modalMobileNumLabel').text("Verified Mobile Number");
        $('#modalEmailLabel').text("Verified E-Mail");

        var firmName = "{{ Auth::user()->firm_name }}";
        var firstName = "{{ Auth::user()->first_name }}";
        var lastName = "{{ Auth::user()->last_name }}";
        var isEmailVerified = "{{ $data['is_email_verified'] }}";
        var isMobileVerified = "{{ $data['is_mobile_verified'] }}";
        var isVerificationCompleted = "{{ $data['is_verification_completed'] }}";
        
        if("{{ Auth::user()->id }}" == 1){
            if(firmName == '' || firstName == '' || lastName == ''){
                $('#modalMode').modal('show');
            }else if(isVerificationCompleted == 0 && isEmailVerified == 0){
                $('#modalEmailForm').modal('show');
                $('#modalEmailLabel').text("You Need To Verify Your Email");
            }else if(isVerificationCompleted == 0 && isMobileVerified == 0){
                $('#modalMobileNumber').modal('show');
                $('#modalMobileNumLabel').text("You Need To Verify Your Mobile Number");
            }
        }

        $('#gender_id').select2();

        $('#current_user_avatar').val("{{ Auth::user()->avatar }}");
        $('#current_aadhar_document').val("{{ Auth::user()->aadhar_document }}");
        $('#current_pan_document').val("{{ Auth::user()->pan_document }}");
        $('#current_gst_document').val("{{ Auth::user()->gst_document }}");

        $('#btnSaveProfile').on('click', function(e) {
            e.preventDefault();

            var formData = new FormData($('#formUserProfile')[0]);

            $.ajax({
                type: 'POST',
                url: firstFormSaveAjaxUrl,
                data: formData,
                processData: false,
                contentType: false, 
                beforeSend: function(){
                    showLoader();
                },
                success: function(resultData) {
                    hideLoader();

                    if (resultData['status'] == 1) {

                        var newAgentUrl = resultData['new_agent_url'];
                        if (newAgentUrl != null) {
                            window.location = newAgentUrl;
                        }

                        $('#modalPrivacyPolicy').modal('hide');
                        $('.passwordArea').hide().find('input').attr('disabled',true);;
                        $('.emailMobileArea').show();

                        $("#formUserProfile").removeClass('was-validated').find('input').removeClass('is-valid, is-invalid');

                        toastr["success"](resultData['msg']);

                       if("{{Auth::user()->id}}" == 1){                            
                            $("#firm_name_id , #firm_name_id_1").html("Welcome to " + resultData['firm_name'] + " !");
                       }

                        var currentUrl = window.location.href;
                        var url = new URL(currentUrl);
                        var type = url.searchParams.get("type");

                        setTimeout(function() {
                            if (type === "purchase") {
                                window.location= "{{ route('purchase.index') }}";
                            }
                            if (type === "upgrade") {
                                window.location= "{{ route('upgrade.reactive.purchase.index', ['type'=>'upgrade']) }}";
                            }
                            if(type == null){
                                if(resultData['is_upload'] == 1){
                                    window.location= "{{ route('profile') }}";
                                }
                            }
                        }, 3000);

                    } else if (resultData['status'] == 0) {

                        $("#formUserProfile").addClass('was-validated');
                      
                        if (typeof resultData['data'] !== "undefined") {
                            var size = Object.keys(resultData['data']).length;
                            if (size > 0) {
                                for (var [key, value] of Object.entries(resultData['data'])) {
                                    toastr["error"](value);
                                    
                                    if(key == "wp_number"){
                                        $("#wp_number").addClass('is-invalid').removeClass('is-valid');
                                    }
                                }
                            }
                        } else {

                            if(resultData['msg'] == "Entered subdomain is already exists !"){
                                $("#sub_domain").removeClass('is-valid').addClass('is-invalid');
                                $("#formUserProfile").removeClass('was-validated');
                            }
                            toastr["error"](resultData['msg']);
                        }
                    }
                }
            });
        });

        $('#saveKYC').on('click', function(e) {
            e.preventDefault();

            let aadhaar = $('input[name="aadhar_number"]');

            // Validate Aadhaar before submitting
            if (!setupAadhaarValidation(aadhaar, true)) {
                aadhaar.addClass("is-invalid");
                hideLoader();
                return; // ❌ stop submission
            }

            var formData = new FormData($('#formUploadAgentDocument')[0]);

            $.ajax({
                type: 'POST',
                url: secondFormSaveAjaxUrl,
                data: formData,
                processData: false,
                contentType: false, 
                beforeSend: function(){
                    showLoader();
                },
                success: function(resultData) {
                    hideLoader();

                    if (resultData['status'] == 1) {
                        toastr["success"](resultData['msg']);
                        
                        $('#formUploadAgentDocument').removeClass('was-validated');
                        
                        var currentUrl = window.location.href;
                        var url = new URL(currentUrl);
                        var type = url.searchParams.get("type");

                        setTimeout(function() {
                            if (type === "purchase") {
                                window.location= "{{ route('purchase.index') }}";
                            }
                            if (type === "upgrade") {
                                window.location= "{{route('upgrade.reactive.purchase.index', ['type'=>'upgrade'])}}";
                            }
                        }, 3000);
                        
                    } else if (resultData['status'] == 0) {
                        toastr["error"](resultData['msg']);
                    }
                }
            });
        });

        $('#can_document').val('0');

        
        var currentDate = new Date();
      
        var eighteenYearsAgo = new Date();
        eighteenYearsAgo.setFullYear(currentDate.getFullYear() - 18);

        $("#date_of_birth").datepicker({
            format: "dd-mm-yyyy",
            endDate: eighteenYearsAgo,
        }).on('changeDate', function() {
            $('.datepicker').hide();
        });

        dateValidations($('#date_of_birth'));

        $("#wp_number, #agent_mobile_number").on('keyup blur', function (e) {
            var value = $(this).val();

            if (value.length !== '' && value.length !== 0) {
                if (value.length === 10) {
                    $(this).removeClass("is-invalid");
                } else {
                    $(this).addClass("is-invalid").removeClass("is-valid");
                }
            } else {               
                $(this).removeClass("is-invalid");
            }
        }).on('paste', function (evt) {
            var input = $(this);

            setTimeout(function () {
                var inputValues = input.val();

                var sanitizedValue = inputValues.replace(/[^0-9]/g, "");

                input.val(sanitizedValue);
            }, 0);
        });

        // $("#aadhar_number").attr({
        //     "maxlength": 14,
        //     "onkeypress": "isNumber(event);",
        // }).on('input', function(event) {           
        //     let input = event.target;
        //     let value = input.value.replace(/\D/g, '');
        //     let cursorPosition = input.selectionStart;
            
        //     if (value.trim().length > 4 && value.trim().length < 9) {
        //         value = value.replace(/(\d{4})(\d)/, '$1 $2');
        //         if (cursorPosition === 5) {
        //             cursorPosition = cursorPosition + 1;
        //         }
        //     } else if (value.trim().length >= 9) {
        //         if (cursorPosition === 10 && value.trim().length <= 9) {
        //             value = value.replace(/(\d{4})(\d{4})(\d{0,2})/, '$1 $2 $3');
        //             cursorPosition = cursorPosition + 2;
        //         } else {
        //             value = value.replace(/(\d{4})(\d{4})(\d)/, '$1 $2 $3');
        //         }
        //     }

        //     input.value = value;
        //     input.setSelectionRange(cursorPosition, cursorPosition);
        // }).on('paste', function (event) {
        //     var input = $(this);

        //     setTimeout(function () {
        //         var inputValues = input.val();

        //         var sanitizedValue = inputValues.substring(0, 14);

        //         input.val(sanitizedValue);
        //     }, 0);
        // }).change(function() {
        //     var inputvalues = $(this).val();
        //     var regex = /[0-9]{4}[0-9]{4}[0-9]{4}$/;

        //     if (regex.test(inputvalues.replace(/ /g, ""))) {
        //         $("#aadhar_number").removeClass('is-invalid');

        //     } else {
        //         $("#aadhar_number").val('').addClass('is-invalid');

        //         if(inputvalues != ''){
        //             toastr["error"]('Aadhar Card number is wrong please enter correct number..!');
        //         }
        //     }
        // });

        setupAadhaarValidation('#aadhar_number'); //in agent_validation.js

        $("#pancard_number").attr({
            "style": "text-transform:uppercase",
            "maxlength": 10,
        }).change(function() {
            var inputvalues = $(this).val();
            var regex = /[A-Z]{5}[0-9]{4}[A-Z]{1}$/;

            if (regex.test(inputvalues.toUpperCase())) {
                $("#pancard_number").removeClass('is-invalid');

            } else {
                $("#pancard_number").val('').addClass('is-invalid');

                if(inputvalues != ''){
                    toastr["error"]('invalid number. Please check and try again.');
                }
            }
        });

        $("#gst_number").attr({
            "style": "text-transform:uppercase",
            "maxlength": 16,
        }).change(function() {
            var inputvalues = $(this).val();
            var regex = /\d{2}[A-Z]{5}\d{4}[A-Z]{1}[A-Z\d]{1}[Z]{1}[A-Z\d]{1}/;

            if (regex.test(inputvalues.toUpperCase())) {
                $("#gst_number").removeClass('is-invalid');
            } else {
                $("#gst_number").val('').addClass('is-invalid');

                if(inputvalues != ''){
                    toastr["error"]('invalid number. Please check and try again.');
                }
            }
        });

        // $("form input").on("keyup change", function() {
        //     var form = $(this).closest("form");

        //     if (form.find("input.is-invalid").length > 0) {
        //         form.find("button").attr("disabled", true);
        //     } else {
        //         form.find("button").removeAttr("disabled");
        //     }
        // });

        $('#pincode').on('input', function(e) {
            var pincode = $(this).val();

            e.target.value = this.value.replace(/[^0-9\.]/g, '');

            if (e.target.value.length === 6) {
                $(this).removeClass("is-invalid");

                $.ajax({
                    type: "GET",
                    url: "{{ route('user.pincode.exits') }}",
                    data: {
                        pincode: pincode
                    },
                    success: function(resultData) {
                        if (resultData['status'] == 0) {
                            toastr["error"](resultData['msg']);
                            $("#pincode").val('');
                        }
                    }
                });
            } else {
                $(this).addClass("is-invalid");
            }
        });

        $('#user_first_name, #user_middle_name, #user_last_name').bind('keyup blur', function() {
            var node = $(this);
            node.val(node.val().replace(/[^a-zA-Z]/g, ''));
        });        
        
        $('#user_username, #sub_domain').on('keyup blur', function() {
            var node = $(this);
            node.val(node.val().toLowerCase().replace(/[^a-z0-9]/g, ''));

            if($(this).val() != ''){
                if($(this).attr('id') == 'sub_doamin'){
                    $(this).removeClass('is-invalid');
                }
            }
        });

        // function validateEmail(email) {
        //     var re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        //     return re.test(email);
        // }

        $('#agent_email').on('keyup change', function(e) {
            var email = $(this).val().replace(/\s/g, ''); // Remove spaces
            $(this).val(email);
            
            var id = $("#user_id").val();

            if (email.length !== '') {
                if (!validateEmail(email)) {
                    $(this).addClass("is-invalid").removeClass("is-valid");
                    if (e.type === 'change') {
                        toastr['error']("Please enter a valid email address");
                    }
                } else {
                    $(this).removeClass("is-invalid").addClass("is-valid");
                }
            } else {
                $(this).removeClass("is-invalid is-valid");
            }
        });

        var agent_mobile_number = '';

        $("#btnGetOtp").on('click', function(){
            agent_mobile_number = $("#agent_mobile_number").val();

            if(agent_mobile_number == '') {
                toastr["error"]('Please Enter Mobile Number');

            }else if (agent_mobile_number.length == 10){
                $.ajax({
                    type: "POST",
                    url: "{{ route('mobile.num.update')}}",
                    data: {
                        "_token": csrfToken,
                        agent_mobile_number: agent_mobile_number
                    },
                    beforeSend :function(e){
                       showLoader();
                    },
                    success: function(resultData) {
                        hideLoader();

                        if (resultData['status'] == 1) {
                            toastr["success"](resultData['msg']);
                            $("#modalMobileNumber").modal("hide");
                            $("#modalOtpVerification").modal("show");
                            $("#formOtpVerification").trigger('reset').removeClass('was-validated');
                            $("#mobile_otp").removeClass('is-valid , is-invalid');
                            $("#mobile_num").val(resultData['data']);
                        } else {
                            if (typeof resultData['data'] !== "undefined") {
                                var size = Object.keys(resultData['data']).length;
                                if (size > 0) {
                                    for (var [key, value] of Object.entries(resultData['data'])) {
                                        toastr["error"](value);
                                    }
                                }
                            } else {
                                toastr["error"](resultData['msg']);
                            }
                            $("#agent_mobile_number").addClass('is-invalid').removeClass('is-valid');
                            $("#formAddMobileNumber").removeClass('was-validated');
                        }
                    }
                });
            }else{
                setTimeout(function() {
                    $("#formAddMobileNumber").removeClass('was-validated');
                    $("#agent_mobile_number").removeClass('is-valid').addClass('is-invalid');
                }, 500);

                toastr["error"]('Please Enter Atleat 10 Digit Mobile Number');
            }
        });

        var mobile_otp = '';

        $("#mobile_otp").on('input', function() {
            mobile_otp = $(this).val();
            $(this).removeClass('is-invalid');
        });
        
        $("#btnOtpVerify").on('click',function(){
            mobile_otp = $("#mobile_otp").val();

            $.ajax({
                type: "POST",
                url: "{{ route('agent.mobile.otp.verified')}}",
                data: {
                    "_token": csrfToken,
                    mobile_otp: mobile_otp,
                    mobile_num : $("#mobile_num").val(),
                },
                beforeSend :function(e){
                   showLoader();
                },
                success: function(resultData) {
                    hideLoader();

                    if (resultData['status'] == 1) {
                        toastr["success"](resultData['msg']);
                        $("#modalMobileNumber").modal("hide");
                        $("#modalOtpVerification").modal("show");
                        $("#mobile_num").val(resultData['data']);

                        setTimeout(function() {
                            location.reload();
                        }, 500);

                    } else {
                        toastr["error"](resultData['msg']);
                        $("#formOtpVerification").removeClass('was-validated');
                        $("#mobile_otp").addClass('is-invalid');
                    }
                }
            });
        });

        $("#ResendOTP").on('click',function(){
            $.ajax({
                type: "POST",
                url: "{{ route('mobile.num.update')}}",
                data: {
                    "_token": csrfToken,
                    agent_mobile_number: $("#mobile_num").val(),
                    "resend_otp" : 1,
                },
                beforeSend :function(e){
                  showLoader();
                },
                success: function(resultData) {
                    hideLoader();

                    if (resultData['status'] == 1) {
                        $('#formOtpVerification').removeClass('was-validated');
                        $('#mobile_otp').removeClass('is-invalid , is-valid');
                        $('#mobile_otp').val('');

                        toastr["success"](resultData['msg']);
                        $("#modalOtpVerification").modal("show");
                        $("#mobile_num").val(resultData['data']);
                    } else {
                        toastr["error"](resultData['msg']);
                    }
                }
            });
        });

        $("#btnGetOtpEmail").on('click', function(){
            agent_email =  $("#agent_email").val();

            if(agent_email == '') {
                toastr["error"]('Please Enter Email');
            }else {
                $.ajax({
                    type: "POST",
                    url: "{{ route('email.update')}}",
                    data: {
                        "_token": csrfToken,
                        agent_email: agent_email
                    },
                    beforeSend :function(e){
                      showLoader();
                    },
                    success: function(resultData) {
                        hideLoader();

                        if (resultData['status'] == 1) {
                            toastr["success"](resultData['msg']);
                            $("#modalEmailForm").modal("hide");
                            $("#modalEmailOtpVerification").modal("show");
                            $("#enter_email_id").val(resultData['data']);
                            $("#agent_email").addClass('is-valid').removeClass('is-invalid');
                            $("#formAddEmail").addClass('was-validated');
                        } else {
                            if (typeof resultData['data'] !== "undefined") {
                                var size = Object.keys(resultData['data']).length;
                                if (size > 0) {
                                    for (var [key, value] of Object.entries(resultData['data'])) {
                                        toastr["error"](value);
                                        
                                    }
                                }
                            } else {
                                toastr["error"](resultData['msg']);
                            }
                            $("#agent_email").addClass('is-invalid').removeClass('is-valid');
                            $("#formAddEmail").removeClass('was-validated');
                        }
                    }
                });
            }
        });

        $("#btnEmailOtpVerify").on('click',function(){
           email_otp = $("#email_otp").val();

            $.ajax({
                type: "POST",
                url: "{{ route('agent.email.otp.verified')}}",
                data: {
                    "_token": csrfToken,
                    email_otp: email_otp,
                    email : $("#enter_email_id").val(),
                },
                beforeSend :function(e){
                   showLoader();
                },
                success: function(resultData) {
                    hideLoader();

                    if (resultData['status'] == 1) {
                        toastr["success"](resultData['msg']);
                        $("#modalEmailForm").modal("hide");
                        $("#modalEmailOtpVerification").modal("show");
                        $("#enter_email_id").val(resultData['data']);

                        setTimeout(function() {
                            location.reload();
                        }, 500);

                    } else {
                        toastr["error"](resultData['msg']);
                        $("#formEmailOtpVerification").removeClass('was-validated');
                        $("#email_otp").addClass('is-invalid');
                    }
                }
            });
        });

        $("#ResendEmailOTP").on('click',function(){
            $.ajax({
                type: "POST",
                url: "{{ route('email.update')}}",
                data: {
                    "_token": csrfToken,
                    agent_email: $("#enter_email_id").val(),
                    "resend_otp" : 1,
                },
                beforeSend :function(e){
                  showLoader();
                },
                success: function(resultData) {
                    hideLoader();

                    if (resultData['status'] == 1) {
                        $('#formEmailOtpVerification').removeClass('was-validated');
                        $('#email_otp').removeClass('is-invalid, is-valid');
                        $('#email_otp').val('');

                        toastr["success"](resultData['msg']);
                        $("#modalEmailOtpVerification").modal("show");
                        $("#enter_email_id").val(resultData['data']);
                    } else {
                        toastr["error"](resultData['msg']);
                    }
                }
            });
        });

        $("#email_otp").on('input' , function(){
            $(this).removeClass('is-invalid');
        });

        setInterval(updateMessage, 300000);
    });

    updateMessage();

    function showDataSecurityLetter(){
        $("#showDataSecurityLetter").modal("show");
    }

    function editMobileNumber(){
        $("#modalMobileNumber").modal('show');
        $("#formAddMobileNumber").trigger("reset").removeClass('was-validated');
        $("#agent_mobile_number").removeClass('is-valid , is-invalid');
    }

    function editEmailId(){
        $("#modalEmailForm").modal('show');
        $("#formAddEmail").trigger("reset").removeClass('was-validated');
        $("#agent_email").removeClass('is-valid , is-invalid');
    }

    function changeVerificationData() {
        $("#formOtpVerification").trigger("reset").removeClass('was-validated');
        $("#formAddMobileNumber").removeClass('was-validated');
        $("#modalOtpVerification").modal("hide");
        $("#modalMobileNumber").modal("show");
    }

    function changeEmailVerificationData() {
        $("#formEmailOtpVerification").trigger("reset").removeClass('was-validated');
        $("#formAddEmail").removeClass('was-validated');
        $("#modalEmailOtpVerification").modal("hide");
        $("#modalEmailForm").modal("show");
    }

    function getMessage() {
        var time = new Date().getHours();
        var message;

        if (time < 12) {
            message = "Good Morning";
        } else if (time < 17) {
            message = "Good Afternoon";
        } else if (time < 19) {
            message = "Good Evening";
        } else {
            message = "Good Night";
        }

        return message;
    }

    function updateMessage() {
        var data = {message: getMessage()};
        $('#timeMessage').html(data.message);
    }

    $('#formUploadAgentDocument').on('change', 'input[type="file"]', function() {
        const fileInput = $(this);

        const maxFiles = 5;

        if (fileInput[0].files.length > maxFiles) {
            toastr["error"](`You can only upload ${maxFiles} files.`);
            fileInput.val(''); // reset the file input
        }
    });
</script>
@endsection