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

{% trans_default_domain "ShamraOcr" %}

{% block title %}
	{{ 'ocr.file_processor.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') }}?v=1"/>
	<link rel="stylesheet" href="{{ asset('bundles/syndexacademic/css/new-research.css') }}"/>
	<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"/>


{% endblock %}

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

	<div class="container">
		<div style="display:flex;flex-wrap: wrap-reverse;">
		
			<h3 style="flex-grow:1">
				{{ 'ocr.file_processor.description.title'|trans }}
			</h3>
			<div class="col-xs-12 col-md-2 col-md-offset-1">
				<a id="add-btn" style="min-width:200px;" class="new-button  btn" href="{{ path('promo_index') }}">
					{{'question'| trans({},'Promo')}}
				</a>
			</div> 
		</div> 
		<hr>
		<p>
			{{ 'ocr.file_processor.description.text'|trans }}
		</p>
		<p>
			{{ 'ocr.file_processor.description.cost'|trans }}
		</p>
		<div class="row ">
			<div class="col-md-3"></div>
			<div class="col-md-6 col-xs-12">
				<form method="POST" id="partner-content-form" enctype="multipart/form-data">
					{{form_row(form.shamraOcr_token)}}

					<div class="form-group ocr-form-group">
						<div style="width:100%;">
							{{form_errors(form.original_file_path)}}
							{{form_widget(form.original_file_path)}}
						</div>
						<button type="submit" id="form_send_button" class="btn submit-button" style="margin-inline-start:20px;margin-bottom:20px;">{{'ocr.file_processor.form.send'|trans}}</button>
					</div>
					{% if app.session.flashbag.peek('api_request_error') is not empty%}
						<div class="alert alert-warning">
							{% for massage in app.flashes('api_request_error') %}
								<div>
									{{massage}}
								</div>
							{% endfor %}
						</div>
					{% endif %}
					{% if app.session.flashbag.peek('add_credit') is not empty%}
						<div class="alert alert-info">
							{% for massage in app.flashes('add_credit') %}
								<div>
									{{massage}}
								</div>
							{% endfor %}
						</div>
					{% endif %}
					<p id="info_bar" style="color:gray; font-weight:bold;">
						{% if app.user %}
							{{ 'ocr.file_processor.info_bar'|trans({'%credits_amount%':app.user.shamraOcrCredit , '%pages_number%':app.user.shamraOcrCredit*50}) }}
						{% else %}
							{{ 'ocr.file_processor.info_bar_not_authenticated'|trans }}
						{% endif %}
					</p>
				</form>
			</div>
		</div>
		{% if old_content is defined and old_content %}
			<div class="alert alert-info"> {{'ocr.file_processor.files_list.user_notify' | trans}} </div>
		{% endif %}
	</div>
		<div id="seeimg" style="display: block">
			<div class="sh-spin">
				<div class="bon1"></div>
				<div class="bon2"></div>
				<div class="bon3"></div>
			</div>
		</div>
		<div id="ocr_old_content_container">
		</div>

{% endblock %}

{% block javascripts %}

	{{ parent() }}
	<script src="{{ asset('bundles/syndexacademic/js/bootstrap-filestyle.min.js') }}"></script>
	<script src="{{ asset('js/jquery-ui.min.js') }}"></script>
	<script src="{{ asset('bundles/user/js/shamra_ocr.js') }}"></script>


	<script>

		// Document upload processing...
        $(":file").filestyle({
            buttonText: "&nbsp; {{ 'ocr.file_processor.form.lable'|trans }}",
            size: "nr",
            iconName: "glyphicon glyphicon-inbox",
            buttonBefore: true,
            badge: true,
            placeholder: "{{ 'ocr.file_processor.form.placeholder'|trans }}"
        });
	</script>

		<script>
			function updateStatus(){
				$.ajax({
					url: "{{path('app_shamra_ocr_old_content')}}",
					// data: req_data,
					type: "GET",
					cache: false,
					beforeSend: function () {
						$("#seeimg").css("display" , "block");
					},
					success: function (data, status) {
						$("#seeimg").css("display" , "none");
						$('.username-truncate').html(data['user_name_change']);
						$("#info_bar").html(data['info_bar_change']);
						$("#ocr_old_content_container").html(data['old_content']);
						$("#update_status_btn").click(function (e) { 
							updateStatus();
						});
					},
					error: function (xhr, ajaxOptions, thrownError) {
						$("#seeimg").css("display" , "none");
					},
				});
			}
			updateStatus();
		</script>
	


{% endblock %}