{% extends 'base.html.twig' %}

{% trans_default_domain "ShamraOcr" %}

{% block title %}{{ 'ocr.add_credit.title'|trans }}{% endblock %}

{% block stylesheets %}

    {{parent()}}
    <link rel="stylesheet" type="text/css" href="{{ asset('bundles/syndexacademic/css/style.css') }}"/>
    <link rel="stylesheet" type="text/css" href="{{ asset('bundles/user/css/shamra_ocr.css') }}"/>
	<link rel="stylesheet" href="{{ asset('bundles/syndexacademic/css/new-research.css') }}"/>
    

{% endblock %}

{% block body %}
<style>
    
</style>

<div class="container">
	<div class="row ">
		<div class="col-md-3"></div>
		<div class="col-md-6 col-xs-12">
				<div id="page-header" class="new-file-header">
					<span>
                            <i class="fa fa-plus"></i>&nbsp;{{ 'ocr.add_credit.title'|trans }}
					</span>
				</div>
            <form class="form-group" id="add_credit_from" method="POST">
				<div class="form-group">
						<label id="add_credit_from_label" class="control-label">
							{{ 'ocr.add_credit.credits_number'|trans }}
							<span style="color:grey;font-size:11px">
								{{ 'ocr.add_credit.credits_info'|trans({'%credit_price%' : credit_price}) }}
							</span>
						</label>

						<input id="credit_input" class="form-control" type="number" min="5" name="quantity"  />
						<div id="credits_info"></div>
				</div>
				{% if app.session.flashbag.peek('not_enough_credit') is not empty%}
					<div class="alert alert-warning">
						{% for massage in app.flashes('not_enough_credit') %}
							<div>
								{{massage}}
							</div>
						{% endfor %}
					</div>
				{% endif %}

                <button type="button" id="checkout-button" class="btn submit-button" style="margin-top:20px;margin-bottom:20px;">{{'ocr.add_credit.add'|trans}}</button>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
	<script>
		document.querySelector("#credit_input").addEventListener("keypress", function (evt) {
			if (evt.which < 48 || evt.which > 57)
				{
					evt.preventDefault();
				}
			});
	</script>
    {{parent()}}
    <script src="https://js.stripe.com/v3/"></script>
	{% if app.user  %}
		<script type="text/javascript">
				// Create an instance of the Stripe object with your publishable API key
				$(document).ready(function () {
					var stripe = Stripe("{{ pk_key }}");
					var checkoutButton = document.getElementById('checkout-button');
					                    
					checkoutButton.addEventListener('click', function(e) {

						var credit_input_value = document.getElementById('credit_input').value;

						if(Number(credit_input_value) >= 5){

							$(".wrong-input-div").remove();
							
							$('#checkout-button').text("{{'ocr.add_credit.validation.payment.wait'| trans}}");

							fetch(`{{ path("app_add_credit_peyment") }}`, {
									method: 'POST' ,
								headers: {
								"Content-Type": "application/json"
								},
								body: JSON.stringify({
									credits_number: credit_input_value
								})
							})
							.then(function(response) {
								if(response.status != 404 ){
									return response.json();
								}
								throw new Error();
							})
							.then(function(session) {
								return stripe.redirectToCheckout({ sessionId: session.id });
							})
							.catch((error)=>{
								$('#checkout-button').text("{{'ocr.add_credit.validation.payment.error'| trans}}");
							})
						}else{
							var wrong_input_div = 	
							`<span class="wrong-input-div invalid-feedback d-block"><span class="d-block">
								<span class="form-error-icon badge badge-danger text-uppercase">{{'ocr.add_credit.validation.error'| trans}}</span> <span class="form-error-message">{{'ocr.add_credit.validation.invalid_input'| trans}}</span>
							</span></span>`
							
							if($(".wrong-input-div").length == 0){
									$('#add_credit_from_label').after(wrong_input_div);
									$(".wrong-input-div").fadeOut(5000 , ()=>{
										$(".wrong-input-div").remove();
									});
							}else{
								$('.wrong-input-div').stop();
								$('.wrong-input-div').css("opacity", '1');
								$(".wrong-input-div").fadeOut(5000 , ()=>{
										$(".wrong-input-div").remove();
									});
							}
						}
					});
				});
			
			</script>
	{% endif %}

	<script>
		$(document).ready(function () {

			$("#credit_input").bind('keyup mouseup', function(){
				credit_info();
			});
			credit_info();

			function credit_info() {
				let val = $("#credit_input").val(); 
				if(val &&  Number(val) < 5){
					$("#credits_info").html(
					`{{'ocr.add_credit.validation.price_validation'|trans}}`
					);    
					$("#credits_info").addClass("wrong-credit");
					$("#credits_info").addClass("credits-info");
				}else {
					$("#credits_info").html('');      
					$("#credits_info").removeClass("credits-info");
					$("#credits_info").removeClass("wrong-credit");
				}
			}
		})
	</script>
{% endblock %}