@include('front.layouts.old_header')

<style type="text/css">
    .applicant{
        margin-top: 100px;

    }
    #loading {
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        position: fixed;
        display: block;
        opacity: 0.7;
        background-color: #fff;
        z-index: 99;
        text-align: center;
    }

    #loading-image {
        position: absolute;
        top: 35%;
        left: 40%;
        z-index: 100;
    }

    .enterotpweb{
        display: unset;
    }
    .enterotpmobie{
        display: none;
    }

    @media only screen and (max-width: 600px) {
        /* For mobile phones: */
       .enterotpweb{
           display: none;
       }
        .enterotpmobie{
            display: unset;
        }
        .languageselect{
            margin-left: 20px;
            margin-right: 20px;
        }
        .applicantselect{
            margin-left: 20px;
            margin-right: 20px;
        }
        #loading-image {
            position: absolute;
            top: 35%;
            left: 20%;
            z-index: 100;
        }
    }
</style>
<div class="text-center applicant">
    <div class="enterotpweb">
        <div class="row justify-content-md-center enterotp" id="enterotp" style="display: none;margin-right:0px; margin-left: 0px;">
            <div class="col-12 col-md-4 mt-4" id="esign_otp">
                <div class="md-form mt-0 mb-0">
                    <input type="text" class="form-control" id="otpweb">
                    <label for="">Enter your OTP</label>
                </div>
                <a href="javascript:void(0)" id="verify_esign_otp" class="submit_otp btn-sm btn btn-primary verify_esign_otp" style="background-color: #f89010!important;" >SUBMIT</a>
                <a href="javascript:void(0)" id="resend" class="submit_otp btn-sm btn btn-primary" style="right: 90px !important;background-color: #f89010!important;">Resend</a>
            </div>
        </div>
        <div class="row justify-content-md-center errormsg" id="errormsg" style="display: none;margin-right:0px; margin-left: 0px;">
            <h4 style="margin: 20px; color: red">We are facing some issue in online signing currently. Please proceed with physical signing to complete the process quickly</h4>
        </div>
    </div>
    </div>
    <div class="row justify-content-md-center" id="applicant" style="margin-right:0px; margin-left: 0px;">
    <div class="form-group m-form__group row applicantselect" style="padding-right: 20px;">
        <label class="col-md-auto col-form-label">
            Account Type: <span style="color: red;">*</span>
        </label>
        <div class="col-md-auto">
            <select class="form-control m-input" name="applicant" id="applicant" required="required" style="display: inline !important;">
                @if((count($applicant) > 0) && (count($co_applicant) > 0))
                    <option value=""> Select Applicant </option>
                    <option value="{{$applicant['value']}}">{{$applicant['name']}}</option>
                    <option value="{{$co_applicant['value']}}">{{$co_applicant['name']}}</option>
                @elseif(count($applicant) > 0)
                    <option value="">Select Applicant</option>
                    <option value="{{$applicant['value']}}">{{$applicant['name']}}</option>
                @elseif(count($co_applicant) > 0)
                    <option value="">Select Applicant</option>
                    <option value="{{$co_applicant['value']}}">{{$co_applicant['name']}}</option>
                @endif
            </select>
        </div>
    </div>
        <div class="form-group m-form__group row languageselect">
            <label class="col-md-auto col-form-label">
                Choose your Language: <span style="color: red;">*</span>
            </label>
            <div class="col-md-auto">
                <select class="form-control m-input" name="language" id="language" required="required" style="display: inline !important;">
                    <option value=""> Select Language </option>
                    <option value="ENGLISH" @if($preferred_language == "ENGLISH") selected="selected" @endif>ENGLISH</option>
                    <option value="HINDI" @if($preferred_language == "HINDI") selected="selected" @endif>हिंदी</option>
                    <option value="MARATHI" @if($preferred_language == "MARATHI") selected="selected" @endif>मराठी</option>
                    <option value="GUJARATI" @if($preferred_language == "GUJARATI") selected="selected" @endif>ગુજરાતી</option>
                    <option value="BENGALI" @if($preferred_language == "BENGALI") selected="selected" @endif>বাঙালি</option>
                    <option value="PUNJABI" @if($preferred_language == "PUNJABI") selected="selected" @endif>ਪੰਜਾਬੀ</option>
                    <option value="TAMIL" @if($preferred_language == "TAMIL") selected="selected" @endif>தமிழ்</option>
                    <option value="TELUGU" @if($preferred_language == "TELUGU") selected="selected" @endif>తెలుగు</option>
                    <option value="KANNADA" @if($preferred_language == "KANNADA") selected="selected" @endif>ಕನ್ನಡ</option>
                    <option value="MALAYALAM" @if($preferred_language == "MALAYALAM") selected="selected" @endif>മലയാളം</option>
                    <option value="URDU" @if($preferred_language == "URDU") selected="selected" @endif>اردو</option>
                    <option value="ODIA" @if($preferred_language == "ODIA") selected="selected" @endif>ଓଡ଼ିଆ</option>
                </select>
            </div>
        </div>
    </div>
</div>
<div class="pdf" id="pdf">
@if($lender['id'] == \App\ABFL\Services\Services::$lender_id)
    @include('admin.documents.abfl.combine_loan_agreement')
@elseif($lender['id'] == \App\LendBox::$lender_id || $lender['id'] == \App\LendBoxLSP::$lender_id)
        @include('admin.documents.lendbox.borrower_agreement')
@elseif($lender['id'] == \App\JMService\JMServices::$lender_id)
        @include('admin.documents.jm.loan_agreement_v2')
@elseif($lender['id'] == App\Utkarsh\Utkarsh::$lender_id)
        @include('admin.documents.utkarsh.loan_agreement_v3')
@elseif($lender['id'] == \App\Vivriti::$lender_id)
        @include('admin.documents.vivriti.loan_agreement_v2')
@elseif($is_bnpl)
    @include('admin.documents.bnpl.service_agreement')
@elseif($lender['id'] == \App\ConsumerApplication::AVANSE_LENDER_ID)
    <div class="page-width" id="page-width" onscroll="enableesign()">
        @include('admin.documents.avanse.sanction_letter_v3')
        @include('admin.documents.avanse.loan_agreement_v2')
    </div>
@elseif($lender['id'] == \App\KMGP2P::$lender_id)
    @include('admin.documents.kmgp2p.borrower_agreement')
@elseif($lender['id'] == \App\BlackSoil::$lender_id) {{-- BlackSoil --}}
    <div class="page-width" id="page-width" onscroll="enableesign()">
        @include('admin.documents.blacksoil.sanction_letter')
        @include('admin.documents.blacksoil.loan_agreement_v1')
    </div>
@else
    @if($agreement_version == 2)
        @if($lender['id'] == 2)
            @include('admin.documents.borrower_loan_agreement_esign_v_two_v2')
        @else
            @include('admin.documents.borrower_loan_agreement_esign_v_two')
        @endif
    @else
        @include('admin.documents.borrower_loan_agreement_esign')
    @endif
@endif
</div>

@if($skipOtp)
    <div style="margin-left: 12%; padding: 15px">
        <input type="checkbox" id="signed" name="signed" value="signed">
        <label for="signed"> I agree to the terms and conditions. </label><br>
    </div>
@endif


<div class="text-center">
    <button type="button" class="btn btn-lg esign" id="esign" style="background-color: #f89010;" @if($skipOtp) disabled @endif>Sign Agreement</button>
    <div class="enterotpmobie">
        <div class="row justify-content-md-center enterotp" id="enterotp" style="display: none;margin-right:0px; margin-left: 0px;">
            <div class="col-12 col-md-4 mt-4" id="esign_otp">
                <div class="md-form mt-0 mb-0">
                    <input type="text" class="form-control" id="otpmobile">
                    <label for="">Enter your OTP</label>
                </div>
                <a href="javascript:void(0)" id="verify_esign_otp" class="submit_otp btn-sm btn btn-primary verify_esign_otp" style="background-color: #f89010;"  >SUBMIT</a>
                <a href="javascript:void(0)" id="resend" class="submit_otp btn-sm btn btn-primary" style="right: 90px !important; background-color: #f89010;">Resend</a>
            </div>
        </div>
        <div class="row justify-content-md-center errormsg" id="errormsg" style="display: none;margin-right:0px; margin-left: 0px;">
            <div class="col-12 col-md-8" style="margin-top: 20px; color: red">
               <h5>We are facing some issue in online signing currently. Please proceed with physical signing to complete the process quickly</h5>
            </div>
        </div>
    </div>


</div>
<span class="application_id" id="application_id" style="visibility: hidden">{{$id}}</span>

<span class="mobile_number" id="mobile_number" style="visibility: hidden">{{$customer_mobile}}</span>

<span class="merchant_id" id="merchant_id" style="visibility: hidden">{{$user['merchant_id']}}</span>

<span class="merchant_access" id="merchant_access" style="visibility: hidden">{{$user['merchant_skip_otp']}}</span>

<span class="skipOtp" id="skipOtp" style="visibility: hidden"><?php echo isset($skipOtp) && $skipOtp ? 'true' : 'false' ?></span>

<span class="lender_id" id="lender_id" style="visibility: hidden">{{$lender['id']}}</span>

<span class="enableSubmit" id="enableSubmit" style="visibility: hidden">0</span>

    <span class="startdatetime" id="startdatetime" style="visibility: hidden">{{$opendatetime}}</span>

    <span class="clickdatetime" id="clickdatetime" style="visibility: hidden"></span>
<div id="loading" style="display: none">

    <img id="loading-image" src="{{ asset('assets/front/img') }}/loader.gif" alt="Loading..." />
</div>

<div>
    <div class="modal fade" id="cam_view" role="dialog">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="select" style="display: none;">
                        <label for="audioSource">Audio source: </label><select style="display: block !important;" id="audioSource">

                        </select>
                    </div>
                    <div class="select">
                        <label for="videoSource">Video source: </label><select style="display: block !important;" id="videoSource">

                        </select>
                    </div>
                    <video muted="" autoplay=""></video>
                    <div id="cam_output"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="process_capture" style="display: none;">Submit</button>
                    <button type="button" class="btn btn-success" id="init_capture" data-id="1">Capture</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="modal" id='esign-popup' tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Credit Fair Says </h5>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <p class="lng-txt-consumer">I have been read out and explained, the contents of the master agreement to partner with K. M. Global Credit Pvt. Ltd. and I have signed the said documents after having understood them and by signing the same I do hereby agree to abide by all the general terms and conditions of the master agreement.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="esign-popup-ok-customer" style="background-color: #f89010!important;" >Okay</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal" id="esign-popup-cancel" style="background-color: darkgrey!important;" >Cancel</button>
            </div>
        </div>
    </div>
</div>

<script src="/assets/app/js/cam.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        $('#language').on('change', function() {
            var selectedLanguage = $(this).val();
            if (selectedLanguage) {
                // Make an AJAX call to save the selected language
                $.ajax({
                    url: '{{ route("language.store") }}', // Route for the API to store the language
                    type: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}', // Pass CSRF token
                        language: selectedLanguage,
                        application_id: {!! $id !!}
                    },
                    success: function(response) {
                        // Reload the page on success
                        location.reload();
                    },
                    error: function(error) {
                        console.log('Error:', error);
                    }
                });
            }
        });
    });
</script>
@include('front.layouts.footerfixed')