@extends('frontend.master')
@section('content')
	<div class="content">
		<div class="container">
			<div id="stripePaymentGeo">
			   <div>
					<div class="row" id="pay-stripe" >
						<div class="col-lg-6 offset-lg-3">

							@if (Session::has('success'))
								<script>
									localStorage.clear();
									Swal.fire({
										type: 'success',
										text: "{{ __('messages.subscription_purchase') }}.",
                                        confirmButtonText: "{{ __('messages.confirm_text_ok') }}",
									}).then( result => {
										document.location.href = '/api-key';
									})
								</script>
							@endif

							@if (Session::has('false'))
								<script>;
									Swal.fire({
										type: 'warning',
										text: "{{ __('messages.the_CVC_field_is_required') }}!",
                                        confirmButtonText: "{{ __('messages.confirm_text_ok') }}",
									}).then( result => {
										$("input[name=card_name]").val(localStorage.getItem("name"));
										$("input[name=card_number]").val(localStorage.getItem("number"));
										$("input[name=card_expiry_month]").val(localStorage.getItem("month"));
										$("input[name=card_expiry_year]").val(localStorage.getItem("year"));
										$("input[name=limit_price]").val(localStorage.getItem("price"));
									})
								</script>
							@endif
							<form role="form" action="{{ $url_link . '/payment' }}" method="post" class="require-validation"
															 data-cc-on-file="false"
															data-stripe-publishable-key="{{ $STRIPE_KEY }}"
															id="payment-form">
								@csrf
								<div class='form-row row'>
									<div class='col-lg-12 form-group'>
										<label class='control-label'>{{ __('messages.card_name') }}:</label>
										<input class='form-control col-lg-12' name='card_name' size='4' type='text'>
									</div>
								</div>
								<div class='form-row row'>
									<div class='col-lg-12 form-group'>
										<label class='control-label'>{{ __('messages.card_number') }}:</label>
										<input autocomplete='off' name='card_number' class='col-lg-12 form-control card-number' size='20'>
									</div>
								</div>

								<div class='form-row row'>
									<div class='col-lg-4 col-md-4 form-group cvc required'>
										<label class='control-label'>CVC:</label>
										<input autocomplete='off' name='card_cvc' class='form-control card-cvc' placeholder='ex. 311' size='4'
											type='text'>
									</div>
									<div class='col-lg-4 col-md-4 form-group expiration required'>
										<label class='control-label'>{{ __('messages.expiry_month') }}:</label>
										<input class='form-control card-expiry-month' placeholder='MM' size='2'
											name='card_expiry_month' type='text'>
									</div>
									<div class='col-lg-4 col-md-4 form-group expiration required'>
										<label class='control-label'>{{ __('messages.expiry_year') }}:</label>
										<input class='form-control card-expiry-year' placeholder='YYYY' size='4'
											name='card_expiry_year' type='text'>
									</div>
								</div>
								<div class='form-row row'>
									<div class='col-lg-12 form-group'>
										<label class='control-label'>{{ __('messages.maximum_amount_in_1_month') }} (USD):</label>
										<input autocomplete='off' name='limit_price' class='col-lg-12 form-control card-maximum' size='20' id="limitPrice">
										<p class="alert-limit-price alert-errors"></p>
									</div>
								</div>
								<div class="row">
									<div class="col-lg-12">
										<button class="col-lg-6 offset-lg-3 btn btn-primary btn-lg btn-block" type="submit" id="stripeSubmit">{{ __('messages.subscription') }}</button>
									</div>
								</div>
								<br>
								<!-- <div class="blockform-check"> -->
									<!-- <input class="form-check-input" type="checkbox" value="1" name="default_check"> -->
									<!-- <label class="form-check-label" for="defaultCheck1" >Lưu và bảo mật cho lần thanh toán sau</label> -->
								<!-- </div> -->
							</form>
						</div>

					</div>
				</div>
			</div>
		</div>
	</div>
    <script type="text/javascript" src="https://js.stripe.com/v2/"></script>
    <script>
        document.getElementById('limitPrice').onkeydown = function(e) {
            if(isNaN(e.key) && e.keyCode != 8 &&  e.keyCode != 13){
				return false;
			}
        }

        $(function() {

            var $form         = $(".require-validation");
            $('form.require-validation').bind('submit', function(e) {
                var limitPrice = $('#limitPrice').val();
                $('.alert-errors').html('');
                if(/^[a-zA-Z0-9- ]*$/.test(limitPrice) == false) {
                    $('.alert-limit-price').text('{{ __('messages.not_contain_special_characters') }}.');
                    return false;
                }
                if (limitPrice != ''){
                    if(limitPrice < 1){
                        $('.alert-limit-price').text('{{ __('messages.price_must_be_greater_than_0') }}.');
                        return false;
                    }
                }
                var $form         = $(".require-validation"),
                    inputSelector = ['input[type=email]', 'input[type=password]',
                                    'input[type=text]', 'input[type=file]',
                                    'textarea'].join(', '),
                    $inputs       = $form.find('.required').find(inputSelector),
                    $errorMessage = $form.find('div.error'),
                    valid         = true;
                    $errorMessage.addClass('hide');

                    $('.has-error').removeClass('has-error');
                $inputs.each(function(i, el) {
                var $input = $(el);
                if ($input.val() === '') {
                    $input.parent().addClass('has-error');
                    $errorMessage.removeClass('hide');
                    e.preventDefault();
                }
                });

                if (!$form.data('cc-on-file')) {
                    e.preventDefault();
                    Stripe.setPublishableKey($form.data('stripe-publishable-key'));
                    Stripe.createToken({
                        number: $('.card-number').val(),
                        cvc: $('.card-cvc').val(),
                        exp_month: $('.card-expiry-month').val(),
                        exp_year: $('.card-expiry-year').val(),
                    }, stripeResponseHandler);
                    $(".ajax_waiting").addClass("loading");
                }
                localStorage.setItem("name", $("input[name=card_name]").val());
                localStorage.setItem("number", $("input[name=card_number]").val());
                localStorage.setItem("month", $("input[name=card_expiry_month]").val());
                localStorage.setItem("year", $("input[name=card_expiry_year]").val());
                localStorage.setItem("price", $("input[name=limit_price]").val());
            });

            function stripeResponseHandler(status, response) {
                if (response.error) {
                    $('.error')
                        // .removeClass('hide')
                        // .find('.alert')
                        // .text(response.error.message);
                        if(status == 400 && response.error.code == "missing_payment_information"){
                        Swal.fire({
                        type:"warning",
                        text:"{{ __('messages.unable_to_find_payment_information') }}!",
                        confirmButtonText: "{{ __('messages.confirm_text_ok') }}",
                        }).then((result) => {
                            $('button[type=submit]').removeAttr('disabled');
                        });
                    }

                    if(response.error.code == "incorrect_number" || response.error.code == "invalid_number"){
                        Swal.fire({
                        type:"warning",
                        text:"{{ __('messages.the_account_number_is_incorrect') }}!",
                        confirmButtonText: "{{ __('messages.confirm_text_ok') }}",
                        }).then((result) => {
                            $('button[type=submit]').removeAttr('disabled');
                        });
                    }

                    if(status == 402 && response.error.code == "invalid_expiry_year"){
                        Swal.fire({
                        type:"warning",
                        text:"{{ __('messages.the_expiry_year_of_your_card_is_invalid') }}!",
                        confirmButtonText: "{{ __('messages.confirm_text_ok') }}",
                        }).then((result) => {
                            $('button[type=submit]').removeAttr('disabled');
                        });
                    }

                    if(status == 402 && response.error.code == "invalid_expiry_month"){
                        Swal.fire({
                        type:"warning",
                        text:"{{ __('messages.your_card_expiry_month_is_invalid') }}!",
                        confirmButtonText: "{{ __('messages.confirm_text_ok') }}",
                        }).then((result) => {
                            $('button[type=submit]').removeAttr('disabled');
                        });
                    }
                    if( response.error.code == "invalid_cvc"){
                        Swal.fire({
                        type:"warning",
                        text:"{{ __('messages.the_security_code_of_your_card_is_not_valid') }}!",
                        confirmButtonText: "{{ __('messages.confirm_text_ok') }}",
                        }).then((result) => {
                            $('button[type=submit]').removeAttr('disabled');
                        });
                    }


                    $(".ajax_waiting").removeClass("loading");
                } else {
                    // token contains id, last4, and card type
                    var token = response['id'];
                    // insert the token into the form so it gets submitted to the server
                    $form.find('input[type=text]').empty();
                    $form.append("<input type='hidden' name='stripeToken' value='" + token + "'/>");
                    $form.get(0).submit();
                }
            }

        });
    </script>
@endsection