@extends('layouts.frontend')
@section('content')
<style>
input[type=number] {
    -moz-appearance:textfield;
}
</style>
<div class="confirm-section">
                <div class="container">
                  <h2 class="confirm-title">{!! Lang::get('core.add_credits') !!}</h2>
                   <div class="table-payment">
                    <div id="couponError"></div>
                <table border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
                <tr>
                <!-- <th width="10%">Sl No:</th> -->
                <th width="90%">{!! Lang::get('core.name_content') !!}</th>
                <th width="10%">{!! Lang::get('core.price')!!}</th>
                </tr>
                <tr>
                @if (defined('CNF_CURRENCY'))
                        @php $currency = SiteHelpers::getCurrentcurrency(CNF_CURRENCY) @endphp
                @else
                    @php $currency = 'USD'; @endphp
                @endif
                <!-- <td>1</td> -->
                <!-- <td>{!! Lang::get('core.add_credits_ccr') !!}</td>
                <td> <input type="number" id="amount_add" name="amount_add" value="{!! $price !!}" readonly="readonly" /></td> -->
                </tr>
                <tr>
                <td style="text-align:left;">{!! Lang::get('core.add_credits_ccr') !!}</td>
                <td>{!! $currency !!} <span id="you_pay"></span><span id="coupon_price">{!! $price !!}</span><input type="hidden" id="amount_add" name="amount_add" value="{!! $price !!}" readonly="readonly" /></td>
                </tr>
                </table>
                </div>
                <div class="payment-block clearfix">
                @if($errors->any())
                    <div class="alert alert-danger">
                       <a class="close" data-dismiss="alert">×</a>
                       {!! Lang::get('core.payment_error') !!}
                    </div>
                @endif

                <ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
                @if($stripe['TestMode'] == 'true'  && \Session::get('co') != 'US')
                <li @if(\Session::get('co') != 'US') class="active" @endif><a href="#stripe" data-toggle="tab">{!! Lang::get('core.strip_payment') !!} </a></li>
                @endif
                @if($paypal_standard['TestMode'] == 'true' && \Session::get('co') != 'US')
                <li ><a href="#paypal" data-toggle="tab">{!! Lang::get('core.paypal_standard') !!} </a></li>
                @endif
                @if($paypal_express_checkout['TestMode'] == 'true' && \Session::get('co') != 'US')
                <li><a href="#paypal_ex" data-toggle="tab">{!! Lang::get('core.paypal_express')!!} </a></li>
                @endif
                </ul>
                <div id="my-tab-content" class="tab-content">
                @if($paypal_express_checkout['TestMode'] == 'true' && \Session::get('co') != 'US')
                <div id="paypal_ex" class="tab-pane">
                <h3>Pay with PayPal Express Checkout (Log into your PayPal Account and Pay)</h3>
                {!! Form::open(array('url' => url('payment/creditspaypal'),'parsley-validate'=>'','novalidate'=>' ' )) !!}
                <input type="hidden" id="amount_ac_1" name="amount_ac" value="{!! $price !!}" />
                <input type="hidden" name="payment_method" value="paypal_express_checkout" />
                <input type="hidden" id="ccrid" name="ccrid" value="{!! $ccrid !!}">
                <input type="hidden" id="applid" name="appl_id" value="{!! $appl_id !!}">
                <div class="form-group clearfix">
                <div class="col-sm-4 submit_block"><label style="visibility:hidden;">{!! Lang::get('core.sb_submit') !!}</label></div>
                <div class="col-sm-8">
                <input type="submit" value="{!! Lang::get('core.payment_option') !!}" class="btn btn-color">
                </div>
                </div>
                {!! Form::close() !!}
                </div>
                @endif

                @if($paypal_standard['TestMode'] == 'true' && \Session::get('co') != 'US')
                <div id="paypal" class="tab-pane">
                <h3>Pay with PayPal Standard (No PayPal Account needed)</h3>
                {!! Form::open(array('url' => url('payment/creditspaypal'),'parsley-validate'=>'','novalidate'=>' ' )) !!}
                <input type="hidden" id="amount_ac_2" name="amount_ac" value="{!! $price !!}" />
                <input type="hidden" id="ccrid" name="ccrid" value="{!! $ccrid !!}">
                <input type="hidden" id="applid" name="appl_id" value="{!! $appl_id !!}">
                <input type="hidden" name="payment_method" value="paypal_standard" />

                <div class="form-group clearfix">
                <div class="col-sm-4 submit_block"><label style="visibility:hidden;">{!! Lang::get('core.sb_submit') !!}</label></div>
                <div class="col-sm-8">
                <input type="submit" value="{!! Lang::get('core.payment_option') !!}" class="btn btn-color">
                </div>
                </div>
                {!! Form::close() !!}
                </div>
                @endif

                @if($stripe['TestMode'] == 'true' && \Session::get('co') != 'US')
                <div id="stripe" class="tab-pane col-md-6    @if(\Session::get('co') != 'US') active @endif ">
                {!! Form::open(array('url' => url('payment/creditsstripe'),'id'=>'payment_credit_stripe' )) !!}
                
                <input name='stripeToken' id="stripeToken" type="hidden" />
                <input type="hidden" id="amount_ac_3" name="amount_ac" value="{!! $price !!}" />
                <input type="hidden" name="payment_method" value="stripe" />
                <input type="hidden" id="ccrid" name="ccrid" value="{!! $ccrid !!}">
                <input type="hidden" id="applid" name="appl_id" value="{!! $appl_id !!}">
                <div class="form-group clearfix">
                <label for="Card Number" class="control-label col-sm-4 text-left"> {!! Lang::get('core.card_number')!!} <span class="asterix"> * </span></label>
                <div class="col-sm-8">
                {!! Form::text('card-number', '' , array('class'=>'form-control','id'=>'card-number','placeholder'=>Lang::get('core.enter_card'),'autocomplete'=>'off')) !!}
                </div>
                </div>

                <div class="form-group clearfix">
                <label for="card-cvc" class="control-label col-sm-4 text-left"> {!! Lang::get('core.card_cvc') !!} <span class="asterix"> * </span></label>
                <div class="col-sm-8">
                {!! Form::text('card-cvc', '' , array('class'=>'form-control','maxlength'=>'3','id'=>'card-cvc','placeholder'=>Lang::get('core.enter_cvc'),'autocomplete'=>'off')) !!}
                </div>
                </div>
                <div class="form-group clearfix">
                <label for="expire" class="col-sm-4">{!! Lang::get('core.Expiration') !!} <span class="asterisk"> * </span></label>
                <div class="expiry-wrapper clearfix">
                <div class="col-xs-6 col-sm-4">
                <div class="select-style_block" id="month">
                <select class="stripe-sensitive required" id="card-expiry-month">
                <option value="" selected="selected">{!! Lang::get('core.mm') !!}</option>
                </select>
                </div>
                <script type="text/javascript">
                var select = $("#card-expiry-month"),
                month = new Date().getMonth() + 1;
                for (var i = 1; i <= 12; i++) {
                select.append($("<option value='"+i+"'>"+i+"</option>"))
                }
                </script>
                </div>
                <div class="col-xs-6 col-sm-4">
                <div class="select-style_block" id="year">
                <select class="stripe-sensitive required" id="card-expiry-year">
                <option value="" selected="selected">{!! Lang::get('core.year') !!}</option>
                </select>
                </div>
                <script type="text/javascript">
                var select = $("#card-expiry-year"),
                year = new Date().getFullYear();
                for (var i = 0; i < 30; i++) {
                select.append($("<option value='"+(i + year)+"'>"+(i + year)+"</option>"))
                }
                </script>
                </div>
                </div>
                </div>
                <span class="payment-errors"></span>
                <div class="form-group clearfix">
                <div class="col-sm-4 submit_block"><label style="visibility:hidden;">{!! Lang::get('core.sb_submit') !!}</label></div>
                <div class="col-sm-8">
                <input type="submit" id="submit_button" value="{!! Lang::get('core.add_credits') !!}" class="btn btn-color">
                <!-- <input type="button" value="Buy with Credit balance $ {{ \bsetecHelpers::getUserCredit()}}" id="BuyWithCredit" class="btn btn-primary btn_pay"> -->
                </div>
                </div>

                {!! Form::close() !!}
                </div>
                @endif

                @if($stripe['TestMode'] != 'true' && $paypal_standard['TestMode'] != 'true' && $paypal_express_checkout['TestMode'] != 'true')
                <h2>{!! Lang::get('core.no_payment')!!}</h2>                
                @endif
                </div>

                </div>
                </div>
                </div>
@if($stripe['TestMode'] == 'true' && \Session::get('co') != 'US' ) 
<!-- payment plugins -->
<script type="text/javascript" src="https://js.stripe.com/v1/"></script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.min.js"></script>
<script type="text/javascript">
// payment options script start
Stripe.setPublishableKey("{{ $stripe['publishable_key'] }}");
var payment_error = $('.payment-errors');
$(document).ready(function() {
    function submit(form) {
        // given a valid form, submit the payment details to stripe
        $(form['submit-button']).attr("disabled", "disabled")
        Stripe.createToken({
            number: $('#card-number').val(),
            cvc: $('#card-cvc').val(),
            exp_month: $('#card-expiry-month').val(),
            exp_year: $('#card-expiry-year').val()
        },function(status, response) {
            if (response.error) {
                // re-enable the submit button
                $(form['submit-button']).removeAttr("disabled")
                // show the error
               payment_error.html(response.error.message);
            } else {
                // token contains id, last4, and card type
                var token = response['id'];
                // insert the stripe token
                $('#stripeToken').val(token);
                // and submit
                form.submit();
            }
        });

        return false;
    }
    jQuery.validator.addMethod("cardNumber", Stripe.validateCardNumber, "Please enter a valid card number");
    jQuery.validator.addMethod("cardCVC", Stripe.validateCVC, "Please enter a valid security code");
    jQuery.validator.addMethod("cardExpiry", function() {
        return Stripe.validateExpiry($("#card-expiry-month").val(), 
                                     $("#card-expiry-year").val())
    }, "Please enter a valid expiration");
     $("#payment_credit_stripe").validate({
        submitHandler: submit,
        rules: {
            "card-cvc" : {
                cardCVC: true,
                required:true,
            },
            "card-number" : {
                cardNumber: true,
                required: true,
            },
            "card-expiry-year" : "cardExpiry"
        },        
        errorPlacement: function(error, element) {
        if (element.attr("name") == "card-cvc"  ) {
          error.insertAfter("#card-cvc");
        }
        else if (element.attr("name") == "card-number"  ) {
          error.insertAfter("#card-number");
        } 
         else if (element.attr("id") == "card-expiry-year"  ) {
          error.insertAfter("#year");
        }
         else if (element.attr("id") == "card-expiry-month"  ) {
          error.insertAfter("#month");
        } 
   
  }
    });
    
    
});

</script>
<style>
.payment-errors{
    color:red;
}
div#stripe .form-group label.error{
    color:red;
}
</style>
@endif
<script type="text/javascript">

$(document).ready(function() {
    // $(document).on('keyup','#amount_add',function(){
    //     var elem = $(this);
    //     $('#you_pay').text(elem.val());
    //     $('#amount_ac_1').val(elem.val());
    //     $('#amount_ac_2').val(elem.val());
    //     $('#amount_ac_3').val(elem.val());
    // });
});

</script>
@stop