@extends('layouts.app')

@section('content')

<style>
.ws-po-outerbox {
    display: none !important;
}
</style>

<button class="btn btn-outline-secondary mt-0 btn-abandon-contract p-0" data-backdrop="true" data-toggle="modal" data-target="#abandonEditContract" style="float:right" disabled>
    <img src="{{ asset('img/icon_exit_blue.png') }}" width="20px" height="20px">
</button>

@if( ! Request::ajax() )

<input id="ajaxContract" type="hidden" value="{!! base64_encode(json_encode($contract ?? '', JSON_UNESCAPED_SLASHES)) !!}">

@if (Session::has('signature_image'))
<input type="hidden" name="signature_image_session" id="signature_image_session" value="{{ Session::get('signature_image') }}">
@endif

@endif
<div class="position-relative">
    <h1 class="text-center">{{ __('expressone.contract.sign.title.slave') }}</h1>
</div>
<hr class="my-4" />

<form id="anotherSignatoryForm" name="anotherSignatoryForm" action="{{ route('contract.sendSignAnother', [app()->getlocale(), $hash]) }}" method="POST">
@csrf
<input type="hidden" name="hash" value="{{$hash}}">

<div class="container sign">
    <div class="row justify-content-center">
        <div class="col-lg-9">
            @include('components.pdfPreview')

            <div class="my-4">
                <h1 class="text-center">aláíró megadása</h1>
            </div>

            <div class="form-group question d-block component-type-text bmd-form-group" id="question-another_signatory">
                <div class="component required"><label for="another_signatory" class="component-label">Aláíró fél teljes neve</label>
                    <input id="another_signatory" type="text" class="col-md-12 form-control user-error" name="another_signatory" onchange="$(this).next().hide()" required maxlength="100" autocomplete="off" aria-required="true" aria-invalid="true">
                    <span class="invalid-feedback" role="alert" style="display: none;"></span>
                </div>
            </div>

            <script type="text/javascript" src="{{URL::asset('/js/signature_pad.umd.min.js')}}?{{ time() }}"></script>

            <input id="signaturePng" name="signaturePng" type="hidden" value="">
       
            <div class="signature-pad-main">
                <div class="my-4">
                    <h1 class="text-center">{{ __('expressone.contract.sign.text.andsign') }}</h1>
                </div>
                <div id="signature-pad" class="signature-pad">
                    <div class="signature-pad--body">
                        <canvas id="signature-pad-canvas" style="touch-action: none;" width="400" height="200"></canvas>
                    </div>
                </div>
                <div class="container" style="border: 1px solid white;">
                    <div class="row">
                        <div class="col-lg-4 m-0 p-0">
                            <button id="clear" class="btn btn-secondary btn-save btn_little_save w-100">{{ __('button.retake') }}</button>
                        </div>
                        <div class="col-lg-1 m-0 p-0"></div>
                        <div class="col-lg-7 m-0 p-0">
                            <button id="sendSignature" type="submit" class="btn btn-secondary btn-save btn_little_save w-100 contractPreview fly-to-top d-none"><i class="fas fa-pen mr-1"></i> {{ __('button.confirmSignature') }}</button>

                            <button id="submitSignature" class="btn btn-primary w-100 fly-to-top" onclick="submitForm()"><i class="fa fa-check content-text-success"></i> {{ __('expressone.button.sendContract') }}
                            </button>
                        </div>
                    </div>
                </div>
            </div>

           </div>
    </div>
</div>

</form>

@endsection

@push('scripts')
<script type="text/javascript" src="{{ URL::asset('/js/signature_pad.js') }}?{{ time() }}"></script>

<script>
    function submitForm() {
        if(document.anotherSignatoryForm.checkValidity() && !signaturePad.isEmpty()) { 
            start_loader();
            $('#anotherSignatoryForm').submit(); 
        } else { 
            $('#another_signatory').next().show();
            $('#another_signatory').next().html( $('#another_signatory').getErrorMessage() );
        }
    }
</script>
@endpush