@extends('layouts.app')

@section('content')

@if( ! Request::ajax() )
<button class="btn btn-outline-secondary mt-1 btn-abandon-contract p-0" data-backdrop="true" data-toggle="modal" data-target="#abandonEditContract" style="float:right; z-index: 3000;">
    <img src="{{ asset('img/icon_exit_blue.png') }}" width="15px" height="15px">
</button>

<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">
    @if ($this_parties['status'] == 'master')
    <h1 class="text-center">{{ __('contract.sign.title.master') }}</h1>
    @elseif ($this_parties['status'] == 'slave')
    <h1 class="text-center">{{ __('contract.sign.title.slave') }}</h1>
    @endif
</div>
<hr class="my-4" />

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

            @if( ! $contract['createdByUser'] )
                @if( $contract['generated'] || $contract['title'] == 'free_body' || $contract['title'] == 'file_upload' )
                <div class="d-flex justify-content-end mt-4 vote-main-group">
                    <div class="btn-group btn-group-toggle m-0" data-toggle="buttons">  
                        <label class="btn btn-secondary btn-change-data d-flex align-items-center justify-content-center mt-0"> 
                            <input type="radio" name="vote_2" id="vote_2_3" value="declined" autocomplete="off" class="decision-main-declined" aria-invalid="false"> <i class="fa fa-times" style="margin-right: 5px; padding-top: 2px;"></i> {{ __('contract.status.decline') }}
                        <div class="ripple-container"></div></label>
                        <label class="btn btn-primary btn-change-data d-none default active mt-0"> 
                            <input type="radio" name="vote_2" id="vote_2_2" value="pending" autocomplete="off" class="decision-main-pending" aria-invalid="false"> {{ __('contract.status.pending') }}
                        </label>
                        <label id='decision-main-accepted-label' class="btn btn-primary btn-change-data border-radius-btn-group ml-4 d-flex align-items-center justify-content-center mt-0">
                            <i class="fa fa-check content-text-success" style="margin-right: 5px; padding-top: 2px;"></i>
                            <input type="radio" name="vote_2" id="vote_2_1" value="accepted" class="decision-main-accepted" autocomplete="off" aria-invalid="false"> {{ __('contract.status.approve') }}
                        <div class="ripple-container"><div class="ripple-decorator ripple-on ripple-out" style="left: 55.1333px; top: 18.9334px; background-color: rgb(255, 255, 255); transform: scale(15.2041);"></div><div class="ripple-decorator ripple-on ripple-out" style="left: 55.1333px; top: 18.9334px; background-color: rgb(255, 255, 255); transform: scale(15.2041);"></div></div></label>
                    </div>
                </div>
                <div class="d-flex justify-content-end mt-4">
                    {!! $form->vote_cancel('mt-0') !!}
                </div>
                @endif
            @endif

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

            <input type="hidden" id="emptySignatureAlert" name="emptySignatureAlert" value="{{ __('contract.sign.alertEmptySignaturepad') }}">

            <input id="signaturePng" type="hidden" value="">
       
            <div class="signature-pad-main" style="@if( $contract['generated'] || $contract['title'] == 'free_body' || $contract['title'] == 'file_upload' ) @if(!$contract['createdByUser']) display: none; @endif @endif">
                <div class="my-4">
                    <h1 class="text-center">{{ __('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-5 m-0 p-0">
                            <button id="clear" class="btn btn-secondary btn_little_save w-100">{{ __('button.retake') }}</button>
                        </div>
                        <div class="col-lg-1 m-0 p-0"></div>
                        <div class="col-lg-6 m-0 p-0">
                            <button id="sendSignature" type="submit" class="btn btn-secondary btn_little_save w-100 contractPreview fly-to-top d-none"><i class="fas fa-pen mr-1"></i> {{ __('button.confirmSignature') }}</button>
                            
                            @if( $this_parties['status'] == 'slave' )
                                <button class="btn btn-primary w-100 fly-to-top" id="sendContract" data-redirect="{{ $signatory_only_invited == true ? route('contract.congrat', [$contractId ]) : route('dashboard.contracts') }}"><i class="fa fa-check content-text-success"></i> {{ __('button.sendContract') }}</button>
                            @else
                                <button class="btn btn-primary w-100 fly-to-top hide_contract_delete" id="sendContract" data-redirect="congrat"><i class="fa fa-check content-text-success"></i> {{ __('contract.blockchainInfo.button') }}</button>
                            <input id="userComeFromFlow" type="hidden" value="{{ __('modal.packages.header.descriptionFromFlow') }}">
                            @endif
                        </div>
                    </div>
                </div>
            </div>

            @if( $contract['generated'] || $contract['title'] == 'free_body' || $contract['title'] == 'file_upload' )
                <button class="btn btn-primary w-100 fly-to-top sendContract mt-4 sendContract_showPreview" id="sendContractRew" style="display: none;" data-redirect="{{ route('dashboard.contracts') }}"><i class="fa fa-check content-text-success"></i> {{ __('button.sendToReview') }}</button>
            @endif
        </div>
    </div>
</div>

@endsection

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

@if ( Session::has('signature_image') && Session::get('user')['contracts_count'] )
    <script>
        $( document ).ready(function() {
            $( '#signaturePng' ).val( $('#signature_image_session').val() );