@extends('reachassuree_agent_sub/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-sm-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>
                </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" role="tablist">
                            <li class="nav-item waves-effect waves-light">
                                @if ($data['title'] == "Profile")
                                    <a class="profileButton active" href="{{ route('profile') }}"><span class="d-none d-sm-block">Profile</span></a>
                                @else
                                    <a class="profileButton" href="{{ route('profile') }}"><span class="d-none 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-none 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-none 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-none 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-none 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-none 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-none 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-none 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-none d-sm-block">KYC Details</span></a>
                                @else
                                    <a class="profileButton" href="{{ route('kyc.details') }}"><span class="d-none 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)
                                                <label for="user_email" class="form-label">Email  <a onclick="return editEmailId()" type="button" id="btnEditEmailId" class="mr-3"><i class="bx bx-edit-alt font-size-15 ms-2"></i></a></label>
                                            @else
                                                <label for="user_email" class="form-label">Email</label>
                                            @endif
                                            <input type="email" class="form-control" 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)
                                                <label for="user_mobile_1" class="form-label">Mobile Number <a onclick="return editMobileNumber()" type="button" id="btnEditMobileNumber" class="mr-3"><i class="bx bx-edit-alt font-size-15 ms-2"></i></a></label>
                                            @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">
                                            <label for="website_link" class="form-label">Website Link <span style="font-size: 12px;color: #808080bd;">(If you have personal website)</span></label>
                                            <input type="text" id="website_link" name="website_link" class="form-control" placeholder="Enter website link" maxlength="120" value="{{ Auth::user()->	website }}" autocomplete="off">
                                        </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">
                                    <div class="col-md-4">
                                        <div class="mb-3">
                                            <label for="address1" class="form-label">Address 1<span class="text-danger">*</span></label>
                                            <input type="text" id="address1" name="address1" class="form-control" placeholder="Enter your address" value="{{ Auth::user()->address1 }}" required 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>

                                <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">Fill Required Fields</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">Attention: It is essential to provide the following details before continuing:</p>
                        <ol><li>Firm Name</li><li>First Name</li><li>Last Name</li></ol>
                        <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);" 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="modalEmailId" 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();

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

        $('#modalMode').modal('hide');

        var firmName = "{{ Auth::user()->firm_name }}";
        var firstName = "{{ Auth::user()->first_name }}";
        var lastName = "{{ Auth::user()->last_name }}";
  
        if("{{ Auth::user()->id }}" == 1){
            if(firmName == '' || firstName == '' || lastName == ''){
                $('#modalMode').modal('show');
            }
        }

        $('#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) {
                        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) {
                      
                        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 {
                            toastr["error"](resultData['msg']);
                        }
                    }
                }
            });
        });

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

            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();
        });

        Inputmask("9{2}-9{2}-9{4}", {
            definitions: {
                "C": {
                validator: "[C,S,c,s]",
                cardinality: 1,
                }
            },
            insertMode: false
        }).mask($('#date_of_birth'));

        // 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");
            }
        });

        $("#wp_number , #agent_mobile_number").on('change',function(e) {
            var mobile = $(this).val();

            if (mobile.length > 10) {
                e.preventDefault();
            }

            if(mobile.length != ''){
                if (e.target.value.length === 10) {
                    $(this).removeClass("is-invalid");

                }else{
                    $(this).addClass("is-invalid").removeClass("is-valid");

                    var errorMessage = (e.target.id === 'agent_mobile_number') ? "Mobile number length must be 10 digits" : "Whatsapp number length must be 10 digits";
                    toastr['error'](errorMessage);
                }
            }else{
                $(this).removeClass("is-invalid");
            }
        });

        $("#wp_number , #agent_mobile_number").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);",
        });

        $('#aadhar_number').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);
        });

        $('#aadhar_number').on('paste', function (event) {
            var input = $(this);

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

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

                input.val(sanitizedValue);
            }, 0);
        });
      
        $("#aadhar_number").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..!');
                }
            }
        });

        $("#pancard_number").attr({
            "style": "text-transform:uppercase",
            "maxlength": 10,
        });

        $("#pancard_number").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,
        });

        $("#gst_number").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_firmname').bind('keyup blur', function(e) {
            e.target.value = this.value.replace(/(\s{2,})|[^a-zA-Z0-9_']/g, ' ').replace(/^\s*/, '');
        });
        
        $('#user_username').bind('keyup blur', function() {
            var node = $(this);
            node.val(node.val().replace(/[^a-z0-9]/g, ''));
        });

        $("#agent_email").on("keyup", function(e) {
            var email = $(this).val();
            var id = $("#user_id").val();

            if (!validateEmail(email)) {
                $(this).addClass("is-invalid");
            } else {
                $(this).removeClass("is-invalid");
            }

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

        $('#agent_email').on('change',function(e) {
            var email = $(this).val();

            if(email.length != ''){
                if (!validateEmail(email)) {
                    $(this).addClass("is-invalid").removeClass("is-valid");
                    $("#btnGetOtpEmail").attr("disabled", true);
                    toastr['error']("Please enter a valid email address");
                } else {
                    $(this).removeClass("is-invalid");
                }
            }else{
                $(this).removeClass("is-invalid");
            }
        });

        var agent_mobile_number = '';

        $("#agent_mobile_number").on('input', function() {
            agent_mobile_number = $(this).val();
           
            if (agent_mobile_number !== '') {
                $.ajax({
                    type: "GET",
                    url: "{{ route('mobile.exits')}}",
                    data: {
                        agent_mobile_number: agent_mobile_number
                    },
                    success: function(resultData) {
                        if (resultData['status'] == 1) {
                            $('#agent_mobile_number').addClass('is-invalid');
                            toastr["error"]('Enter mobile number is already associated with one of our agents.!!');
                            $("#formAddMobileNumber").removeClass('was-validated');
                        }
                    }
                });
            }
        });

        $("#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 {
                            toastr["error"](resultData['msg']);
                        }
                    }
                });
            }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']);
                            $("#modalEmailId").modal("hide");
                            $("#modalEmailOtpVerification").modal("show");
                            $("#enter_email_id").val(resultData['data']);
                        } else {
                            toastr["error"](resultData['msg']);
                        }
                    }
                });
            }
        });

        $("#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']);
                        $("#modalEmailId").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 editMobileNumber(){
        $("#modalMobileNumber").modal('show');
        $("#formAddMobileNumber").trigger("reset").removeClass('was-validated');
        $("#agent_mobile_number").removeClass('is-valid , is-invalid');
        $("#btnGetOtp").attr('disabled',false);
    }

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

    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");
        $("#modalEmailId").modal("show");
    }

    function isNumber(evt) {
        var ch = String.fromCharCode(evt.which);
        if ((!/[0-9]/.test(ch))) {
            evt.preventDefault();
        }
    }

    function validateEmail(email) {
        // var regex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.(com|org|net|edu|gov|mil|biz|info|io|me|co|uk|ca)$/i;
        var regex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
        return regex.test(email);
    }

    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);
    }
</script>
@endsection