@extends('layouts.'.((Session::get('user')->CurrentRole === 'Firm Admin')?'admin':'filer').'-dashboard')
@section('heading')
Add Payment Account
@stop
@section('content')
<div class="paymentForm fleft">

	{{ Form::open(array('class'=>'form addFormWrap paymentform','id'=>'createpaymentaccount')) }}
	<span class="notification" id="notification"></span>
    @if($errors->has('cardLast4'))<p class="error">{{$errors->first('cardLast4')}}</p>@endif
    @if($errors->has('expiryMonth')) <p class="error">{{$errors->first('expiryMonth')}}</p>@endif
    @if($errors->has('cardType')) <p class="error">{{$errors->first('cardType')}}</p>@endif
    @if($errors->has('accountToken')) <p class="error">{{$errors->first('accountToken')}}</p>@endif
	<p>
        <span class="mandatory">*</span>
		{{ Form::label('accountName', 'Payment Account Name') }}
		{{ Form::text('accountName', Input::old('accountName'),array('class'=>'inputStyle')) }}
		@if($errors->has('accountName')) <p class="error">{{$errors->first('accountName')}}</p>@endif
                @if(Auth::user()->is_super_admin)
                <span class="mandatory">&nbsp;&nbsp;</span>
                <input type="checkbox" name="global_account" />
                {{ Form::label('IsGlobalAccount', 'Make this payment account global',array('class'=>'v-align autoWidth')) }}@endif
</p>
<p>
	<span class="mandatory">&nbsp;&nbsp;</span>
	{{ Form::label('paymentAccountTypeCode', 'Payment Account Type') }}
    @if(Config::get('app.enable_e_checks'))
        {{ Form::select('paymentAccountTypeCode', array('CC'=>'Credit Card', 'WV' => 'Waiver', 'BankAccount' => 'E-Checks'),'CC',array('class'=>'inputStyle expireSelect')) }}
    @else
        {{ Form::select('paymentAccountTypeCode', array('CC'=>'Credit Card', 'WV' => 'Waiver', ),'CC',array('class'=>'inputStyle expireSelect')) }}
    @endif
@if($errors->has('paymentAccountTypeCode')) <p class="error">{{$errors->first('paymentAccountTypeCode')}}</p>@endif
</p>
<br>
<span class="infotext" style="font-weight: 300;">&nbsp;&nbsp;
    Note:
</span><br><br>
<span class="infotext" style="font-weight: 300;">&nbsp;&nbsp;
    <!--Please note any waiver fillings are billed the $6.50 fee in addition to sales tax and a small billing charge.-->
</span><br><br>
<!--<span class="infotext" style="font-weight: 300;">&nbsp;&nbsp;
    Echecks will be coming online soon, but are currently not available.
</span>-->
<p style='display: none;'>
	{{ Form::label('accountToken', 'Payment Account Token') }}
	{{ Form::hidden('accountToken') }}
</p>
<p style='display: none;'>
	{{ Form::label('cardType', 'Card Type') }}
	{{ Form::hidden('cardType') }}
</p>
<p style='display: none;'>
	{{ Form::label('cardLast4', 'Card Number(last 4)') }}
	{{ Form::hidden('cardLast4') }}
</p>
<p style='display: none;'>
	{{ Form::label('expiryMonth', 'Expiry Date') }}
	{{ Form::hidden('cardMonth') }}
	{{ Form::hidden('cardYear') }}
</p>
<p style='display: none;'>
	{{ Form::label('CardHolderName', 'CardHolder Name') }}
	{{ Form::hidden('CardHolderName') }}        
</p>
<p class="submitBtnWrap">
	<span class="mandatory">&nbsp;&nbsp;</span>
	<label></label>
	{{ Form::submit('Add Payment Account', array('class'=>'btn btn-padding btn-bluebg', 'id' => 'payAcSubmit', 'style' => 'display: none;')) }}

        <a href="#" id="editCardPG" class="btn btn-padding btn-bluebg">Add Card Details</a>
        <a style="display: none" href="#" id="waiver-button" class="btn btn-padding btn-bluebg">Add Payment Details</a>
        <a style="display: none" href="#" id="e-check-button" class="btn btn-padding btn-bluebg">Add E-Check Details</a>

</p>
{{ Form::close() }}
</div>

<form action="{{Config::get('app.PaymentGatewayURL')}}" method="POST" id='payReq' target='toga_pg'>
    <input type="hidden" name="RequestXML" value="<PaymentRequest><ClientKey>{{Config::get('app.TogaClientKey')}}</ClientKey><RedirectURL>{{Config::get('app.url')."handletoken"}}</RedirectURL><TransactionID>{{$transactionId}}</TransactionID><Amount>-1</Amount><GetToken>1</GetToken></PaymentRequest>"/>
</form>

<div class="popupWrapper customPopWidth" id="cardDetailsPopup">
    <div class="popupContent" style='overflow-y: scroll;'>
        <img src="/images/modal_close.png"  class="closePopup" alt="close">
		<div class="popupBody">
			<iframe id='toga_pg' name='toga_pg' width="100%" height="915" marginwidth="0" marginheight="0" frameborder="no" scrolling='no'></iframe>
		</div>
    </div>
</div>
<div class="popupWrapper customPopWidth" id="responsePopup">
    <div class="popupContent">
        <img src="/images/modal_close.png"  class="closePopup" alt="close">
		<div class="popupBody">
			<p id="payment_popup_response_text" class="mb35 c-align">Enter Card Details first.</p>
			<p class="c-align">
				<a href="#" class="btn btn-medium btn-bluebg" id="response_msg" style="margin-left:15px">OK</a>&nbsp;&nbsp;
			</p>
		</div>
    </div>
</div>
@stop
@section('scripts_bottom')
<script src="/js/jquery.validate.min.js"></script>
<script type="text/javascript" src="/js/dashboard.js?@assetsVersion()"></script>
<script>
	$(function() {
		var payAcForm = $("#createpaymentaccount");
		window.MFR = window.MFR || {};
		MFR.handlePG = function() {
			$("#cardDetailsPopup").hide();
			$(".overlay").hide();
			payAcForm.submit();
			// $("#notification").html("<span class='success'>Credit card information is saved. You may now add payment account.</span>");
		};
		var showInvalidPopup = function() {
			if (creditCardCheck()) {
				$("#payment_popup_response_text").html('Enter Card Details first.');
				$("#responsePopup").show();
				$('.loader').hide();
				$('.overlay').hide();
			}
		};
        // do the  same thing when either credit card button is clicked or e-check button is clicked
        $("#editCardPG, #e-check-button").on('click', function () {
            if (!$("#accountName").valid()) {
                // showInvalidPopup();
                return;
            }
            $("#cardDetailsPopup").show(); // show the popup
            $(".overlay").show();
            $("#payReq").submit();
        });

        // only submit the form when waiver option is selected.
        $("#content").on('click', "#waiver-button", function () {
            $('#waiver-button').hide();
            $("#payAcSubmit").submit();
        });

        $("#paymentAccountTypeCode").change(function () {
            var $type = $("#paymentAccountTypeCode").val();
            //  $("#editCardPG").toggle();
            //  $("#payAcSubmit").toggle();

            if ($type === 'WV') {
                // show only  waiver button
                $('#e-check-button').hide();
                $('#editCardPG').hide();
                $('#waiver-button').show();
            }
            else if ($type === "CC") {
                // show only  Credit card button
                $('#waiver-button').hide();
                $('#e-check-button').hide();
                $('#editCardPG').show();
            }
            else if ($type === "BankAccount" ){
                //show only E-check button
                $('#e-check-button').show();
                $("#editCardPG").hide();
                $('#waiver-button').hide();
            }
        });
        $(".closePopup").click(function () {
            $("#cardDetailsPopup").hide();
            $(".overlay").hide();
            $("#responsePopup").hide();
        });

        var creditCardCheck = function() {
			return $("#paymentAccountTypeCode").val() === 'CC';
		};
		payAcForm.validate({
			rules: {
				accountName: {
					required: true
				},
				accountToken: {
					required: {
						depends: creditCardCheck
					}
				},
				paymentAccountTypeCode: {
					required: true
				},
				cardType: {
					required: {
						depends: creditCardCheck
					}
				},
				cardLast4: {
					required: {
						depends: creditCardCheck
					}
				},
				cardMonth: {
					required: {
						depends: creditCardCheck
					}
				},
				cardYear: {
					required: {
						depends: creditCardCheck
					}
				},
				CardHolderName: {
					required: {
						depends: creditCardCheck
					}
				}
			},
			messages: {
				accountName: "Payment Account Name is required"
			},
			onfocusout: function(element, event) {
				this.element(element);
			},
			ignore: '',
			submitHandler: function(form) {
				$(form).find(':input').removeAttr('disabled');
				var sdata = $(form).serialize();
				var $inputs = $(form).find("input, select, button, textarea");
				$inputs.prop("disabled", true);
				request = $.ajax({
					url: "{{route('paymentaccount.index')}}",
					type: "post",
					beforeSend: function(request) {
						$('.loader').show();
						$('.overlay').show();
					},
					data: sdata
				});
				request.done(function(msg) {
					if (msg.error) {
						$("#notification").html(msg.errors);
					} else {
                                                //$('waiver-button').disable()
                                                // $('#e-check-button').hide();
                                                // $('#editCardPG').hide();
                                                $('#waiver-button').hide();
						$("#payment_popup_response_text").html('Payment details added successfully');
						$("#responsePopup").show();
						$("#response_msg, .closePopup").click(function() {
							window.location = "{{route('paymentaccount.index')}}";
						});
					}
				});
				request.always(function() {
					$inputs.prop("disabled", false);
				});
				return false;
			},
			invalidHandler: showInvalidPopup
		});

	});

</script>
@stop