@extends('layouts/contentNavbarLayout')

@section('title', 'Dashboard - Analytics')

@section('vendor-style')
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/apex-charts/apex-charts.css') }}">
@endsection

@section('vendor-script')
    <script src="{{ asset('assets/vendor/libs/apex-charts/apexcharts.js') }}"></script>
@endsection

@section('page-script')
    <script src="{{ asset('assets/js/dashboards-analytics.js') }}"></script>
@endsection

@section('content')
    <div class="card">
        <div class="card-header bg-primary text-white">
            KYC - Verification
        </div>
        <div class="card-body">
            <form id="formAuthentication" enctype="multipart/form-data" class="m-3" action="{{ route('kyc-verification-store') }}" method="POST">
                @csrf <!-- Include CSRF token for form submission -->
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-floating form-floating-outline mb-3">
                            <input type="text" class="form-control" id="first_name" name="first_name"
                                placeholder="Enter First Name" value="{{ old('first_name', $user->first_name) }}" autofocus>
                            <label for="first_name">First Name</label>
                            @error('first_name')
                                <div class="invalid-feedback d-block mb-3">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-floating form-floating-outline mb-3">
                            <input type="text" class="form-control" id="last_name" name="last_name"
                                placeholder="Enter Last Name" value="{{ old('last_name', $user->last_name) }}" autofocus>
                            <label for="last_name">Last Name</label>
                            @error('last_name')
                                <div class="invalid-feedback d-block mb-3">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-floating form-floating-outline mb-3">
                            <input type="text" class="form-control" id="email" name="email"
                                placeholder="Enter Email Address" value="{{ old('email', $user->email) }}" autofocus>
                            <label for="Email">Email</label>
                            @error('email')
                                <div class="invalid-feedback d-block mb-3">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-floating form-floating-outline mb-3">
                            <input type="text" class="form-control" onkeypress="return /^[0-9]$/.test(event.key)" id="phone_number" name="phone_number"
                                placeholder="Enter Phone Number" maxlength="16" value="{{ old('phone_number', $user->phone_number) }}"
                                autofocus>
                            <label for="phone_number">Phone Number</label>
                            @error('phone_number')
                                <div class="invalid-feedback d-block mb-3">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-6">
                        @php
                            $company_types = config('constant.COMPANY_TYPES');
                        @endphp
                        <div class="form-floating form-floating-outline mb-3 mt-2">
                            <select id="company_type" name="company_type" class="form-select">
                                <option value="">Choose Company Type</option>
                                @foreach ($company_types as $key => $company_type)
                                    <option value="{{ $key }}"
                                        {{ old('company_type', $user->company_type) == $key ? 'selected' : '' }}>
                                        {{ $company_type }}</option>
                                @endforeach
                            </select>
                            <label for="company_type">Company Type</label>
                            @error('company_type')
                                <div class="invalid-feedback d-block mb-3">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-floating form-floating-outline mb-3">
                            <select id="country" name="country" class="form-select">
                                <option value="India">India</option>
                            </select>
                            <label for="country">Country</label>
                            @error('country')
                                <div class="invalid-feedback d-block mb-3">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-floating form-floating-outline mb-3">
                            <select id="state" name="state" class="form-select">
                                <option value="">Choose state</option>
                                @foreach ($states as $key => $state)
                                    <option value="{{ $key }}" {{ old('state', $user->state) == $key ? 'selected' : '' }}>
                                        {{ $state }}</option>
                                @endforeach
                            </select>
                            <label for="state">State</label>
                            @error('state')
                                <div class="invalid-feedback d-block mb-3">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-floating form-floating-outline mb-3">
                            <textarea type="text" class="form-control" id="address" name="address" placeholder="Enter Address" autofocus>{{ old('address', $user->address) }}</textarea>
                            <label for="address">Address</label>
                            @error('address')
                                <div class="invalid-feedback d-block mb-3">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-floating form-floating-outline mb-3">
                            <input type="text" class="form-control" id="zip_code" name="zip_code"
                                placeholder="Enter Zip Code" maxlength="6" value= "{{ old('zip_code', $user->zip_code) }}" autofocus>
                            <label for="zip_code">Zip Code</label>
                            @error('zip_code')
                                <div class="invalid-feedback d-block mb-3">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    @php
                        $aadhar_no = explode(',',$user->aadhar_no);
                        $aadhar_no_1 = $aadhar_no[0] ?? '';
                        $aadhar_no_2 = $aadhar_no[1] ?? '';
                        $pan_no = explode(',',$user->pan_no);
                        $pan_no_1 = $pan_no[0] ?? '';
                        $pan_no_2 = $pan_no[1] ?? '';
                    @endphp
                    <div class="col-md-6">
                        <div class="input-group form-floating form-floating-outline">
                            <input type="text" class="form-control aadhar_verify" name="aadhar_no"
                                placeholder="Enter Aadhar Card Number" maxlength="12"
                                value = "{{ old('aadhar_no', $aadhar_no_1) }}"
                                onkeypress="return /^[0-9]$/.test(event.key)" autofocus>
                                <button type="button"
                                    class="btn btn-outline-primary d-flex align-items-center aadharVerify @if(auth()->user()->is_aadhar1_verified == 1) btn-primary text-dark border border-primary @endif"
                                    @if(auth()->user()->is_aadhar1_verified == 1) disabled @endif>

                                    @if(auth()->user()->is_aadhar1_verified == 1)
                                        <span class="button-text">Verified <i class="fa fa-circle-check text-success fs-5"></i></span>
                                    @else
                                        <span class="button-text">Verify Now</span>
                                        <span class="spinner-border spinner-border-sm ms-2 d-none" role="status" aria-hidden="true"></span>
                                    @endif
                                </button>
                            <label for="aadhar_no">Aadhar Card Number</label>
                        </div>
                        <p class="aadhar-message"></p>
                        @error('aadhar_no')
                            <div class="invalid-feedback d-block mb-3">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="col-md-6">
                        <div class="form-floating form-floating-outline mb-3">
                            <input type="file" class="form-control" name="aadhar_front"
                                placeholder="Choose Aadhar Front" autofocus>
                            <label for="aadhar_front">Aadhar Front</label>
                            @error('aadhar_front')
                                <div class="invalid-feedback d-block mb-3">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-floating form-floating-outline mb-3">
                            <input type="file" class="form-control" name="aadhar_back"
                                placeholder="Choose Aadhar Back" autofocus>
                            <label for="aadhar_back">Aadhar Back</label>
                            @error('aadhar_back')
                                <div class="invalid-feedback d-block mb-3">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                                        <div class="col-md-6">
                        <div class="input-group form-floating form-floating-outline">
                        <input type="text" class="form-control pan_verify" name="pan_no"
                            placeholder="Enter PAN Card Number"
                            value="{{ old('pan_no', $pan_no_1) }}"
                            maxlength="10"
                            onkeypress="return /^[A-Z0-9]$/.test(String.fromCharCode(event.which));"
                            oninput="this.value = this.value.toUpperCase();"
                            autofocus>
                            <button type="button"
                                class="btn btn-outline-primary d-flex align-items-center panVerify @if(auth()->user()->is_pan_verified == 1) btn-primary text-dark border border-primary @endif"
                                @if(auth()->user()->is_pan_verified == 1) disabled @endif>

                                @if(auth()->user()->is_pan_verified == 1)
                                    <span class="button-text">Verified <i class="fa fa-circle-check text-success fs-5"></i></span>
                                @else
                                    <span class="button-text">Verify Now</span>
                                    <span class="spinner-border spinner-border-sm ms-2 d-none" role="status" aria-hidden="true"></span>
                                @endif
                            </button>
                            <label for="pan_no">PAN Card Number</label>
                        </div>
                        <p class="pan-message"></p>
                        @error('pan_no')
                            <div class="invalid-feedback d-block mb-3">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="col-md-6">
                        <div class="form-floating form-floating-outline mb-3">
                            <input type="file" class="form-control" name="pan_file" placeholder="Choose PAN Card"
                                autofocus>
                            <label for="pan_file">PAN Card</label>
                            @error('pan_file')
                                <div class="invalid-feedback d-block mb-3">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-floating form-floating-outline mb-3">
                            <input type="file" class="form-control" id="cancelled_cheque" name="cancelled_cheque"
                                placeholder="Choose Cancelled Cheque" autofocus>
                            <label for="cancelled_cheque">Bank Statement / Cancelled Cheque</label>
                            @error('cancelled_cheque')
                                <div class="invalid-feedback d-block mb-3">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div id="dynamic_fields" class="row"></div>
                </div>
                <button class="btn btn-primary" type="submit">Submit</button>
            </form>
        </div>
    </div>
@endsection
@section('js')
<script>
    $(document).ready(function() {
        let isAadharVerified = @json($user->is_aadhar_verified) == 1;
        let isPanVerified = @json($user->is_pan_verified) == 1;
        let isGstVerified = @json($user->is_gst_verified) == 1;
        let isCoiVerified = @json($user->is_coi_verified) == 1;

        function updateVerificationStatus(type, isVerified) {
            switch (type) {
                case 'aadhar': isAadharVerified = isVerified; break;
                case 'pan': isPanVerified = isVerified; break;
                case 'gst': isGstVerified = isVerified; break;
                case 'coi': isCoiVerified = isVerified; break;
            }
        }

        async function getLocationAndAppend(form) {
            return new Promise(resolve => {
                if (navigator.geolocation) {
                    navigator.geolocation.getCurrentPosition(
                        position => {
                            let latitude = position.coords.latitude;
                            let longitude = position.coords.longitude;
                            $(form).append('<input type="hidden" name="latitude" value="' + latitude + '" />');
                            $(form).append('<input type="hidden" name="longitude" value="' + longitude + '" />');
                            resolve();
                        },
                        error => {
                            let message = (error.message === 'User denied Geolocation')
                                ? 'You have denied location permission. Please allow location access.'
                                : error.message;
                            $('#loginErrorMessages').html('<div class="alert alert-danger"><span class="close">x</span>' + message + '</div>');
                            resolve(); // Still resolve so form does not hang
                        }
                    );
                } else {
                    $('#loginErrorMessages').html('<div class="alert alert-danger"><span class="close">x</span>Geolocation not supported.</div>');
                    resolve();
                }
            });
        }

        $('#formAuthentication').on('submit', async function (e) {
            e.preventDefault();

            const form = this;
            const company_type = $('#company_type').val();
            let missingFields = [];

            if (company_type === 'one_person' || company_type === 'individual') {
                if (!isAadharVerified) missingFields.push('Aadhar');
                if (!isPanVerified) missingFields.push('PAN');
            } else if (company_type === 'private_ltd') {
                if (!isAadharVerified) missingFields.push('Aadhar');
                if (!isPanVerified) missingFields.push('PAN');
                if (!isGstVerified) missingFields.push('GST');
                if (!isCoiVerified) missingFields.push('Certificate of Incorporation');
            }

            if (missingFields.length > 0) {
                toastr.warning('Please verify the following before submitting: ' + missingFields.join(', '));
                return;
            }

            await getLocationAndAppend(form);
            form.submit(); // Now it's safe to submit
        });

        function appendFields(companyType) {
            let fieldsContainer = $('#dynamic_fields');
            fieldsContainer.empty();
            if (companyType == 'one_person') {
                fieldsContainer.append(`
                    <div class="col-md-6">
                        <div class="form-floating form-floating-outline mb-3">
                            <input type="file" class="form-control" id="e_shop" name="e_shop"
                                placeholder="Choose Eshop / MSME / GST / Any Other" autofocus>
                            <label for="e_shop">Eshop / MSME / GST / Any Other</label>
                            @error('e_shop')
                                <div class="invalid-feedback d-block mb-3">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                `);
            } else if (companyType == 'private_ltd') {
                fieldsContainer.append(`
                    <div class="col-md-6">
                        <div class="input-group form-floating form-floating-outline">
                            <input type="text" id="gst_no" class="form-control" name="gst_no" placeholder="Enter GST Number"
                                value="{{ old('gst_no', $user->gst_no) }}"  maxlength="15" onkeypress="return /^[A-Z0-9]$/.test(event.key)" autofocus>
                            <label for="gst_no">GST Number</label>
                            <button type="button"
                                class="btn btn-outline-primary d-flex align-items-center @if(auth()->user()->is_gst_verified == 1) btn-primary text-dark border border-primary @endif"
                                id="gstVerify" @if(auth()->user()->is_gst_verified == 1) disabled @endif>

                                @if(auth()->user()->is_gst_verified == 1)
                                    <span class="button-text">Verified <i class="fa fa-circle-check text-success fs-5"></i></span>
                                @else
                                    <span class="button-text">Verify Now</span>
                                    <span class="spinner-border spinner-border-sm ms-2 d-none" role="status" aria-hidden="true"></span>
                                @endif
                            </button>
                        </div>
                        <p class="gst-message"></p>
                        @error('gst_no')
                            <div class="invalid-feedback d-block mb-3">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="col-md-6">
                        <div class="form-floating form-floating-outline mb-3">
                            <input type="file" class="form-control" id="gst_file" name="gst_file"
                                placeholder="Choose GST" autofocus>
                            <label for="gst_file">GST</label>
                            @error('gst_file')
                                <div class="invalid-feedback d-block mb-3">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="input-group form-floating form-floating-outline">
                            <input type="text" class="form-control gstDisabled" name="pan_no_company" placeholder="Enter PAN Card Number"
                                value="{{ old('pan_no_company', $user->pan_no_company) }}" id="pan_no_company"  maxlength="10" onkeypress="return /^[A-Z0-9]$/.test(event.key)" autofocus>
                            <label for="pan_no_company">PAN Card Number (Company)</label>
                        </div>
                        <p class="pan-message"></p>
                        @error('pan_no_company')
                            <div class="invalid-feedback d-block mb-3">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="col-md-6">
                        <div class="form-floating form-floating-outline mb-3">
                            <input type="file" class="form-control gstDisabled" id="pan_file_company" name="pan_file_company"
                                placeholder="Choose PAN Card" autofocus>
                            <label for="pan_file_company">PAN Card (Company)</label>
                            @error('pan_file_company')
                                <div class="invalid-feedback d-block mb-3">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-floating form-floating-outline mb-3">
                            <input type="text" class="form-control gstDisabled" id="company_name" name="company_name" placeholder="Enter Company Name" value="{{ old('company_name', $user->company_name) }}" autofocus>
                            <label for="company_name">Company Name</label>
                            @error('company_name')
                                <div class="invalid-feedback d-block mb-3">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-floating form-floating-outline mb-3">
                            <textarea type="text" class="form-control gstDisabled" id="company_address" name="company_address" placeholder="Enter Company Address" autofocus>{{ old('company_address', $user->company_address) }}</textarea>
                            <label for="company_address">Company Address</label>
                            @error('company_address')
                                <div class="invalid-feedback d-block mb-3">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="input-group form-floating form-floating-outline">
                            <input type="text" id="coi_no" class="form-control gstDisabled" name="coi_no" placeholder="Enter COI Number"
                                value="{{ old('coi_no', $user->coi_no) }}"  maxlength="22" onkeypress="return /^[A-Z0-9]$/.test(event.key)" autofocus>
                            <button type="button"
                                class="btn btn-outline-primary d-flex align-items-center @if(auth()->user()->is_coi_verified == 1) btn-primary text-dark border border-primary @endif"
                                id="coiVerify" @if(auth()->user()->is_coi_verified == 1) disabled @endif>

                                @if(auth()->user()->is_coi_verified == 1)
                                    <span class="button-text">Verified <i class="fa fa-circle-check text-success fs-5"></i></span>
                                @else
                                    <span class="button-text">Verify Now</span>
                                    <span class="spinner-border spinner-border-sm ms-2 d-none" role="status" aria-hidden="true"></span>
                                @endif
                            </button>
                             <label for="coi_no">COI Number</label>
                        </div>
                         <p class="coi-message"></p>
                        @error('coi_no')
                            <div class="invalid-feedback d-block mb-3">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="col-md-6">
                        <div class="form-floating form-floating-outline mb-3">
                            <input type="file" class="form-control gstDisabled" id="coi_file" name="coi_file"
                                placeholder="Choose COI" autofocus>
                            <label for="coi_file">COI</label>
                            @error('coi_file')
                                <div class="invalid-feedback d-block mb-3">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-floating form-floating-outline mb-3">
                            <input type="file" class="form-control" id="moa_file" name="moa_file"
                                placeholder="Choose MOA" autofocus>
                            <label for="moa_file">MOA</label>
                            @error('moa_file')
                                <div class="invalid-feedback d-block mb-3">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-floating form-floating-outline mb-3">
                            <input type="file" class="form-control" id="aoa_file" name="aoa_file"
                                placeholder="Choose AOA" autofocus>
                            <label for="aoa_file">AOA</label>
                            @error('aoa_file')
                                <div class="invalid-feedback d-block mb-3">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                `);
            }
        }
        appendFields($('#company_type').val());

        $('#company_type').on('change', function() {
            let companyType = $(this).val();
            var isGstVerified = @json(auth()->user()->is_gst_verified);
            appendFields(companyType);
            if ($('#gstVerify').length) {
                if(isGstVerified == 1){
                    $('#gstVerify').closest('.col-md-6')
                    .nextAll('.col-md-6')
                    .find('.gstDisabled')
                    .prop('disabled', false);
                }else{
                    $('#gstVerify').closest('.col-md-6')
                    .nextAll('.col-md-6')
                    .find('.gstDisabled')
                    .prop('disabled', true);
                }
            }
        })

        $(document).on('click', '#gstVerify', function () {
            let $this = $(this);
            if ($this.prop('disabled')) return;
            let $formGroup = $this.closest('.col-md-6');
            let gst_no = $('#gst_no').val();
            let refid = generateRandomString(10);
            let messageContainer = $formGroup.find('.gst-message');

            let buttonText = $this.find('.button-text');
            let loader = $this.find('.spinner-border');

            $.ajax({
                url: '/verify-gst',
                type: 'POST',
                headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                'Content-Type': 'application/json'
                },
                data: JSON.stringify({
                    gst_number: gst_no,
                    refid: refid
                }),
                dataType: 'json',
                beforeSend: function () {
                    loader.removeClass('d-none');
                    buttonText.text('Verifying...');
                    $this.prop('disabled', true);
                },
                success: function (response) {
                messageContainer.removeClass('text-danger text-success');

                if (response.status === true) {
                    messageContainer.text('GST Verified Successfully.').addClass('text-success');
                    updateVerificationStatus('gst', true);

                    $formGroup.nextAll('.col-md-6').find('.gstDisabled').prop('disabled', false);
                    $('#pan_no_company').val(response.data.pan_number).prop('disabled','true');
                    buttonText.html('Verified <i class="fa fa-circle-check text-success fs-5"></i>');
                    $this.addClass('btn-success').addClass('text-dark border-primary');
                    $this.prop('disabled', true);
                    $('#company_address').val(response.data.address);
                    $('#company_name').val(response.data.business_name);
                } else {
                    messageContainer.text(response.message).addClass('text-danger');
                    handleVerificationError();
                }
                },
                error: function (xhr, status, error) {
                console.error('Error:', error);
                messageContainer.text('Something went wrong! Please try again.').addClass('text-danger');
                handleVerificationError();
                },
                complete: function () {
                loader.addClass('d-none');
                }
        });
        function handleVerificationError() {
            buttonText.html('Not Verified <i class="fa fa-circle-xmark text-danger fs-5"></i>');
            $this.prop('disabled', true);
            $this.addClass('btn-danger text-dark').addClass('border-primary');

            setTimeout(function () {
                buttonText.html('Verify Now');
                $this.prop('disabled', false);
                messageContainer.text('');
                $this.addClass('btn-outline-primary').removeClass('btn-danger');
            }, 2000);
        }
        });

        $(document).on('click', '#coiVerify', function () {
            let $this = $(this);
            if ($this.prop('disabled')) return;
            let $formGroup = $this.closest('.col-md-6');
            let coi_no = $('#coi_no').val();
            let refid = generateRandomString(10);
            let messageContainer = $formGroup.find('.coi-message');

            let buttonText = $this.find('.button-text');
            let loader = $this.find('.spinner-border');

            $.ajax({
                url: '/verify-coi',
                type: 'POST',
                headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                'Content-Type': 'application/json'
                },
                data: JSON.stringify({
                    coi_number: coi_no,
                    refid: refid
                }),
                dataType: 'json',
                beforeSend: function () {
                    loader.removeClass('d-none');
                    buttonText.text('Verifying...');
                    $this.prop('disabled', true);
                },
                success: function (response) {
                messageContainer.removeClass('text-danger text-success');

                if (response.status === true) {
                    messageContainer.text('COI Verified Successfully.').addClass('text-success');
                    updateVerificationStatus('coi', true);

                    buttonText.html('Verified <i class="fa fa-circle-check text-success fs-5"></i>');
                    $this.addClass('btn-success').addClass('text-dark border-primary');
                    $this.prop('disabled', true);
                } else {
                    messageContainer.text(response.message).addClass('text-danger');
                    handleVerificationError();
                }
                },
                error: function (xhr, status, error) {
                console.error('Error:', error);
                messageContainer.text('Something went wrong! Please try again.').addClass('text-danger');
                handleVerificationError();
                },
                complete: function () {
                loader.addClass('d-none');
                }
        });
        function handleVerificationError() {
            buttonText.html('Not Verified <i class="fa fa-circle-xmark text-danger fs-5"></i>');
            $this.prop('disabled', true);
            $this.addClass('btn-danger text-dark').addClass('border-primary');

            setTimeout(function () {
                buttonText.html('Verify Now');
                $this.prop('disabled', false);
                messageContainer.text('');
                $this.addClass('btn-outline-primary').removeClass('btn-danger');
            }, 2000);
        }
        });

        $(document).on('click', '.aadharVerify', function () {
            let $this = $(this);
            if ($this.prop('disabled')) return;
            let $formGroup = $this.closest('.col-md-6');
            let aadhar_no = $formGroup.find('.aadhar_verify').val();
            let refid = generateRandomString(10);
            let messageContainer = $formGroup.find('.aadhar-message');
            let buttonText = $this.find('.button-text');
            let loader = $this.find('.spinner-border');
            $.ajax({
                url: '/verify-aadhar',
                type: 'POST',
                headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                'Content-Type': 'application/json'
                },
                data: JSON.stringify({
                    id_number: aadhar_no,
                    refid: refid
                }),
                dataType: 'json',
                beforeSend: function () {
                    loader.removeClass('d-none');
                    buttonText.text('Verifying...');
                    $this.prop('disabled', true);
                },
                success: function (response) {
                messageContainer.removeClass('text-danger text-success');

                if (response.status === true) {
                    // messageContainer.text('Aadhar Verified Successfully.').addClass('text-success');
                    buttonText.html('OTP Sent <i class="fa fa-circle-check text-success fs-5"></i>');
                    $this.addClass('btn-success').addClass('text-dark border-primary');
                    $this.prop('disabled', true);
                    if (response.data.otp_sent) {
                        $('.aadhar_verify').closest('.col-md-6').append(`
                            <div class="input-group form-floating form-floating-outline mt-2 mb-3 otp-input">
                                <input type="text" maxlength="6" class="form-control otp_code" name="otp_code" placeholder="Enter OTP">
                                <label for="otp_code">Enter OTP</label>
                                <button type="button" class="btn btn-outline-primary d-flex align-items-center aadhar-otp-sent">
                                    <span class="button-text">Submit</span>
                                    <span class="spinner-border spinner-border-sm ms-2 d-none" role="status" aria-hidden="true"></span>
                                </button>
                            </div>
                            <div><p class="aadhar-otp-message"></p></div>
                        `);
                        $(document).on('click','.aadhar-otp-sent',function(){
                            let $this = $(this);
                            if ($this.prop('disabled')) return;
                            let $formGroup = $this.closest('.input-group');
                            let otp = $formGroup.find('.otp_code').val();
                            let refid = generateRandomString(10);
                            let client_id = response.data.client_id;
                            let messageOtpContainer = $('.aadhar-otp-message');
                            let buttonText = $this.find('.button-text');
                            let loader = $this.find('.spinner-border');
                            let $mainFormGroup = $this.closest('.col-md-6');
                            let aadharInput = $mainFormGroup.find('.aadhar_verify');
                            let aadharType = aadharInput.attr('name') === 'aadhar_no' ? 'aadhar1' : 'aadhar2';

                            $.ajax({
                                url: '/verify-aadhar-otp',
                                type: 'POST',
                                headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                                'Content-Type': 'application/json'
                                },
                                data: JSON.stringify({
                                    clientId: client_id,
                                    refid: refid,
                                    otp: otp,
                                    aadharType: aadharType,
                                }),
                                dataType: 'json',
                                beforeSend: function () {
                                    loader.removeClass('d-none');
                                    buttonText.text('Verifying...');
                                    $this.prop('disabled', true);
                                },
                                success: function (response) {
                                    var isAadhar1Verified = @json(auth()->user()->is_aadhar1_verified);
                                    updateVerificationStatus(aadharType, true);
                                    messageOtpContainer.removeClass('text-danger text-success');
                                    messageOtpContainer.text('');

                                    if (response.status === true) {
                                        messageContainer.text('Aadhar Verified Successfully.').addClass('text-success');

                                        // buttonText.html('Verified <i class="fa fa-circle-check text-success fs-5"></i>');
                                        $this.addClass('btn-success').addClass('text-dark border-primary');
                                        $this.prop('disabled', true);
                                        $mainFormGroup.find('.aadharVerify').find('.button-text').html('Verified <i class="fa fa-circle-check text-success fs-5"></i>');
                                        $formGroup.addClass('d-none');
                                    } else {
                                        messageOtpContainer.html(response.message).addClass('text-danger');
                                        // handleVerificationError();
                                    }
                                },
                                error: function (xhr, status, error) {
                                    console.error('Error:', error);
                                    messageOtpContainer.text('Something went wrong! Please try again.').addClass('text-danger');
                                    // handleVerificationError();
                                },
                                complete: function () {
                                    loader.addClass('d-none');
                                }
                            });
                            function handleVerificationError() {
                                buttonText.html('Not Verified <i class="fa fa-circle-xmark text-danger fs-5"></i>');
                                $this.prop('disabled', true);
                                $this.addClass('btn-danger text-dark').addClass('border-primary');

                                setTimeout(function () {
                                    buttonText.html('Verify Now');
                                    $this.prop('disabled', false);
                                    messageContainer.text('');
                                    $this.addClass('btn-outline-primary').removeClass('btn-danger');
                                }, 2000);
                            }
                        });
                    }
                } else {
                    messageContainer.html(response.message).addClass('text-danger');
                    handleVerificationError();
                }
                },
                error: function (xhr, status, error) {
                console.error('Error:', error);
                messageContainer.html(response.message).addClass('text-danger');
                handleVerificationError();
                },
                complete: function () {
                loader.addClass('d-none');
                }
            });

        function handleVerificationError() {
            buttonText.html('Not Verified <i class="fa fa-circle-xmark text-danger fs-5"></i>');
            $this.prop('disabled', true);
            $this.addClass('btn-danger text-dark').addClass('border-primary');

            setTimeout(function () {
                buttonText.html('Verify Now');
                $this.prop('disabled', false);
                messageContainer.text('');
                $this.addClass('btn-outline-primary').removeClass('btn-danger');
            }, 2000);
        }
        });

        $(document).on('click', '.panVerify', function () {
            let $this = $(this);
            if ($this.prop('disabled')) return;
            let $formGroup = $this.closest('.col-md-6');
            let panInput = $formGroup.find('.pan_verify');
            let pan_no = $formGroup.find('.pan_verify').val();
            let refid = generateRandomString(10);
            let messageContainer = $formGroup.find('.pan-message');
            let buttonText = $this.find('.button-text');
            let loader = $this.find('.spinner-border');
            let panType = panInput.attr('name') === 'pan_no' ? 'pan1' : 'pan2';

            $.ajax({
                url: '/verify-pan',
                type: 'POST',
                headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                'Content-Type': 'application/json'
                },
                data: JSON.stringify({
                    pan_number: pan_no,
                    refid: refid,
                    panType: panType,
                }),
                dataType: 'json',
                beforeSend: function () {
                    loader.removeClass('d-none');
                    buttonText.text('Verifying...');
                    $this.prop('disabled', true);
                },
                success: function (response) {
                messageContainer.removeClass('text-danger text-success');

                if (response.status === true) {
                updateVerificationStatus(panType, true);
                    messageContainer.text('PAN Verified Successfully.').addClass('text-success');

                    buttonText.html('Verified <i class="fa fa-circle-check text-success fs-5"></i>');
                    $this.addClass('btn-success').addClass('text-dark border-primary');
                    $this.prop('disabled', true);
                } else {
                    messageContainer.text(response.message).addClass('text-danger');
                    handleVerificationError();
                }
                },
                error: function (xhr, status, error) {
                    console.error('Error:', error);
                    messageContainer.text(response.message).addClass('text-danger');
                    handleVerificationError();
                },
                complete: function () {
                    loader.addClass('d-none');
                }
            });

            function handleVerificationError() {
                buttonText.html('Not Verified <i class="fa fa-circle-xmark text-danger fs-5"></i>');
                $this.prop('disabled', true);
                $this.addClass('btn-danger text-dark').addClass('border-primary');

                setTimeout(function () {
                    buttonText.html('Verify Now');
                    $this.prop('disabled', false);
                    messageContainer.text('');
                    $this.addClass('btn-outline-primary').removeClass('btn-danger');
                }, 2000);
            }
        });

        function generateRandomString(length) {
            let chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
            let result = '';
            for (let i = 0; i < length; i++) {
                result += chars.charAt(Math.floor(Math.random() * chars.length));
            }
            return result;
        }


        $(document).on("input", ".aadhar_verify", function() {
            var inputField = $(this);
            var parentDiv = inputField.closest(".input-group");
            var userId = @json(auth()->user()->id);
            let $mainFormGroup = inputField.closest('.col-md-6');
            let aadharInput = $mainFormGroup.find('.aadhar_verify');
            let aadharType = aadharInput.attr('name') === 'aadhar_no' ? 'aadhar1' : 'aadhar2';
            $mainFormGroup.find('.aadharVerify').find('.button-text').html('<span class="button-text">Verify Now</span><span class="spinner-border spinner-border-sm ms-2 d-none" role="status" aria-hidden="true"></span>');
            $mainFormGroup.find('.aadharVerify').prop('disabled',false);
            var requestData = {
                user_id: userId,
                _token: "{{ csrf_token() }}"
            };
            requestData[`is_${aadharType}_verified`] = 0;

            $.ajax({
                url: "/update-aadhar-status",
                type: "POST",
                data: requestData,
                success: function(response) {
                    if (response.success) {
                        $mainFormGroup.find('.aadharVerify').find('.button-text').html('<span class="button-text">Verify Now</span><span class="spinner-border spinner-border-sm ms-2 d-none" role="status" aria-hidden="true"></span>');
                        $mainFormGroup.find('.aadharVerify').prop('disabled',false);
                    }
                },
                error: function(xhr, status, error) {
                    console.error("Error updating Aadhar status:", error);
                }
            });
        });

        $(document).on("input", ".pan_verify", function() {
            var inputField = $(this);
            var parentDiv = inputField.closest(".input-group");
            var userId = @json(auth()->user()->id);
            let $mainFormGroup = inputField.closest('.col-md-6');
            let panInput = $mainFormGroup.find('.pan_verify');
            let panType = panInput.attr('name') === 'pan_no' ? 'pan1' : 'pan2';
            $mainFormGroup.find('.panVerify').find('.button-text').html('<span class="button-text">Verify Now</span><span class="spinner-border spinner-border-sm ms-2 d-none" role="status" aria-hidden="true"></span>');
            $mainFormGroup.find('.panVerify').prop('disabled',false);
            var requestData = {
                user_id: userId,
                _token: "{{ csrf_token() }}"
            };
            requestData[`is_${panType}_verified`] = 0;

            $.ajax({
                url: "/update-pan-status",
                type: "POST",
                data: requestData,
                success: function(response) {
                    if (response.success) {
                        $mainFormGroup.find('.panVerify').find('.button-text').html('<span class="button-text">Verify Now</span><span class="spinner-border spinner-border-sm ms-2 d-none" role="status" aria-hidden="true"></span>');
                        $mainFormGroup.find('.panVerify').prop('disabled',false);
                    }
                },
                error: function(xhr, status, error) {
                    console.error("Error updating PAN status:", error);
                }
            });
        });

        $(document).on("input", "#gst_no", function() {
            var inputField = $(this);
            var parentDiv = inputField.closest(".input-group");
            var userId = @json(auth()->user()->id);
            let $mainFormGroup = inputField.closest('.col-md-6');
            $mainFormGroup.find('#gstVerify').find('.button-text').html('<span class="button-text">Verify Now</span><span class="spinner-border spinner-border-sm ms-2 d-none" role="status" aria-hidden="true"></span>');
            $mainFormGroup.find('#gstVerify').prop('disabled',false);
            var requestData = {
                user_id: userId,
                _token: "{{ csrf_token() }}",
                is_gst_verified: '0',
            };

            $.ajax({
                url: "/update-gst-status",
                type: "POST",
                data: requestData,
                success: function(response) {
                    if (response.success) {
                        $mainFormGroup.find('#gstVerify').find('.button-text').html('<span class="button-text">Verify Now</span><span class="spinner-border spinner-border-sm ms-2 d-none" role="status" aria-hidden="true"></span>');
                        $mainFormGroup.find('#gstVerify').prop('disabled',false);
                    }
                },
                error: function(xhr, status, error) {
                    console.error("Error updating GST status:", error);
                }
            });
        });

        $(document).on("input", "#coi_no", function() {
            var inputField = $(this);
            var parentDiv = inputField.closest(".input-group");
            var userId = @json(auth()->user()->id);
            let $mainFormGroup = inputField.closest('.col-md-6');
            $mainFormGroup.find('#coiVerify').find('.button-text').html('<span class="button-text">Verify Now</span><span class="spinner-border spinner-border-sm ms-2 d-none" role="status" aria-hidden="true"></span>');
            $mainFormGroup.find('#coiVerify').prop('disabled',false);
            var requestData = {
                user_id: userId,
                _token: "{{ csrf_token() }}",
                is_coi_verified: '0',
            };

            $.ajax({
                url: "/update-coi-status",
                type: "POST",
                data: requestData,
                success: function(response) {
                    if (response.success) {
                        $mainFormGroup.find('#coiVerify').find('.button-text').html('<span class="button-text">Verify Now</span><span class="spinner-border spinner-border-sm ms-2 d-none" role="status" aria-hidden="true"></span>');
                        $mainFormGroup.find('#coiVerify').prop('disabled',false);
                    }
                },
                error: function(xhr, status, error) {
                    console.error("Error updating COI status:", error);
                }
            });
        });
    });
</script>
@endsection