@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;
        }
        #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="merchant_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_merchant_esign_otp" class="submit_otp btn-sm btn btn-primary verify_merchant_esign_otp" >SUBMIT</a>
                <a href="javascript:void(0)" id="resend" class="submit_otp btn-sm btn btn-primary" style="right: 90px !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-top: 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>
<div class="pdf" id="pdf">
@if($merchant['category_id'] != "6")
@include('admin.documents.merchant_agreement_v1')
@else
@include('admin.documents.merchant_agreement_solar')
@endif
</div>
<div class="text-center">
<button type="button" class="btn btn-primary btn-lg merchant_esign" id="merchant_esign">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="merchant_esign_otp">
                <div class="md-form mt-0 mb-0">
                    <input type="text" class="form-control" id="otpmobile">
                    <label for="">Enter your OTP</label>s
                </div>
                <a href="javascript:void(0)" id="verify_merchant_esign_otp" class="submit_otp btn-sm btn btn-primary verify_merchant_esign_otp" >SUBMIT</a>
                <a href="javascript:void(0)" id="merchantresend" class="submit_otp btn-sm btn btn-primary" style="right: 90px !important;">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="merchant_id" id="merchant_id" style="visibility: hidden">{{$merchant['id']}}</span>

<span class="mobile_number" id="mobile_number" style="visibility: hidden">{{$merchant['contact_number']}}</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="isPOPBlocked" id="isPOPBlocked" style="visibility: hidden">1</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-merchant">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-merchant" >Okay</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal" id="esign-popup-cancel">Cancel</button>
            </div>
        </div>
    </div>
</div>

<script src="/assets/app/js/cam.js"></script>
@include('front.layouts.old_footer')