@extends('layouts.app')

@section('content')

<script src="{{ asset('ex_plugins/jSignature/src/jSignature.js') }}"></script>
<script src="{{ asset('ex_plugins/jSignature/libs/flashcanvas.js') }}"></script>

<div class="row justify-content-center">
<div class="col-md-12">
	<div class="page page-md">
		<div class="header-box py-5">
		</div>
		<div class="steps"> <a class="step-item completed" href="javascript:void(0);"><span class="step-number"><i class="bx bx-check"></i></span><span class="hidden-xs">{{ __('message_lang.RECEIVER_INFORMATION') }}</span></a><a class="step-item completed" href="javascript:void(0);"><span class="step-number"><i class="bx bx-check"></i></span><span class="hidden-xs">{{ __('message_lang.DEPOSIT_ACCOUNT_DETAILS') }}</span></a><a class="step-item current" href="javascript:void(0);"><span class="step-number">3</span><span class="hidden-xs">{{ __('message_lang.CONFIRMATION') }}</span></a></div>
		<div class="content-box bg-white">
			<h3 class="section-title">{{ __('message_lang.LBL_SUMMARY') }}<a class="btn btn-sm btn-edit btn-outline-secondary" href="{{ route('deposit-account') }}">{{ __('message_lang.ACCOUNT_DETAILS') }}</a></h3>
			<table class="table table-sm table-borderless">
				<tr>
					<td>{{ __('message_lang.LBL_RECIEVER') }}:</td>
					<th>{{ @$transaction_info->beneficiary_name }}</th>
				</tr>
				<tr>
					<td>{{ __('message_lang.LBL_SENDING_COMPANY') }}:</td>
					<th>{{ @$transaction_info->sending_company_name }}</th>
				</tr>
				<tr>
					<td>{{ __('message_lang.LBL_AMOUNT_RECIEVED') }}:</td>
					<th>{{ number_format(@$transaction_info->receive_amount,2) }} {{ @$transaction_info->receive_currency }}</th>
                </tr>
                @if(@$transaction_info->exchange_currency_applied == 1)
                    <tr>
                        <td>{{ __('message_lang.LBL_EXCHANGE_RATE') }}:</td>
                        <th>{{ number_format(@$transaction_info->exchange_rate,2) }}</th>
                    </tr>
                    <tr>
                        <td>{{ __('message_lang.LBL_RECEIVER_AMOUNT') }}:</td>
                        <th>{{ number_format(@$transaction_info->payout_amount,2) }} {{ @$transaction_info->payout_currency }}</th>
                    </tr>
                @endif
				<tr>
					<td>{{ __('message_lang.DEPOSIT_ACCOUNT_DETAILS') }}:</td>
					<th>{{ @$user_deposit_account_info->deposit_company_name }}</th>
				</tr>
				<tr>
					<td>{{ __('message_lang.LBL_ACCOUNT_NUMBER') }}:</td>
					<th>{{ @$user_deposit_account_info->account_number }}</th>
				</tr>
			</table>
			<form method="post" id="confirmation_form" name="confirmation_form" action="{{ route('confirmation-post') }}">
				@csrf
				<div class="form-group">
					{{-- <label>{{ __('message_lang.LBL_SIGNATURE') }}:</label> --}}
					<input type="hidden" name="hdn_signature">
					<div class="signature-area">
						<div class="signature-legend text-legend">{{ __('message_lang.LBL_DRAW_SIGNATURE') }}</div>
						<a class="btn btn-link btn-sm text-muted btn-edit" href="javascript:void(0)" onclick="reset_signature_area();">{{ __('message_lang.BTN_CLEAR') }}</a>
					</div>
				</div>
				<div class="mt-5">
					<button type="submit" class="btn btn-primary btn-lg btn-block" id="confirmation_form_accept_money">{{ __('message_lang.BTN_ACCEPT_MONEY') }}</button>
					<br>
					<a class="btn btn-outline-secondary btn-lg btn-block" href="{{ route('cancel',['transaction_id'=>$transaction_info->id]) }}">{{ __('message_lang.BUTTON_CANCEL') }}</a>
				</div>
			</form>
		</div>
	</div>
</div>
</div>
<script type="text/javascript">
	$(document).ready(function ()
	{
		// Disable accept money form after one click
		$('#confirmation_form').submit(function(){
			$('#confirmation_form_accept_money').attr('disabled', 'disabled');
		});

		// Initialize jSignature
		var $sigdiv = $(".signature-area").jSignature(
		{
			'UndoButton': true
		});

		$('#confirmation_form').submit(function(e) {
	        e.preventDefault();

			if($sigdiv.jSignature('getData', 'native').length == 0)
			{
				e.preventDefault();
				$('#confirmation_form_accept_money').removeAttr('disabled');
				toastr.error('{{ __('message_lang.SIGNATURE_IS_REQUIRED') }}', 'Error');
				return false;
			}

			// Get response of type image
			var data = $sigdiv.jSignature('getData', 'image');

			if(data)
			{
				// Storing in textarea
				$('input:hidden[name=hdn_signature]').val(data);
				document.getElementById("confirmation_form").submit();
			}
			else
			{
				e.preventDefault();
				$('#confirmation_form_accept_money').removeAttr('disabled');
				toastr.error('{{ __('message_lang.SIGNATURE_IS_REQUIRED') }}', 'Error');
			}
	    });
	});

	function reset_signature_area()
    {
    	$(".signature-area").jSignature('reset');
    }

</script>
@endsection