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

{% set route = app.request.attributes.get('_route') %}

{% trans_default_domain "PartnerContent" %}

{% block title %}
	{% if route == 'app_partner_content' %}
		{{ 'add_title'|trans }}	
	{% elseif route == 'app_partner_content_update' %}
		{{'addContent.update_form_title' | trans}}
	{% endif %}
{% endblock %}


{% block stylesheets %}
    {{ parent() }}
	<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"/>
    <link rel="stylesheet" type="text/css" href="{{ asset('bundles/syndexacademic/css/tagmanager.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ asset('bundles/syndexacademic/css/style.css?v.3.2 ') }}"/>
    <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"/>
    {# <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/academia.min.css') }}" /> #}

{% endblock %}
    

{% block body %}
	<style>
		.partner-content-form {
			display: flex;
			justify-content: center;
		}
		.price-fee{
			font-weight:1000;
			font-size:1.1rem;
			border: 1px solid #cccc;
			border-top:0;
			padding:10px;
			font-style: italic;
		}
		.wrong-price{
			color:#ff4040;
			border-color:#ff4040;
		}
		.new-file-header{
			font-size: 20px;
			margin-bottom: 1%;
			margin-top: 2%;
			border-bottom: 2px solid #ff8600;
			padding-bottom: 5px;
		}
		.form-control:focus{
			border: 1px solid;
			box-shadow: none;
		}
	</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>
					{% if route == 'app_partner_content' %}
						<i class="fa fa-plus"></i>&nbsp;{{ 'addContent.form_title'|trans }}
					{% elseif route == 'app_partner_content_update' %}
						<i class="fa fa-pencil-square-o"></i>&nbsp;{{ 'addContent.update_form_title'|trans }}
					{% endif %}
					</span>
				</div>
				<form method="POST" id="partner-content-form"  enctype="multipart/form-data">
					{{form_row(form.partner_token)}}

					<div class="form-group">
						<label class="control-label">{{ 'addContent.title'|trans }}</label>
						
						{{form_errors(form.title)}}
						{{form_widget(form.title)}}
					</div>

					<div class="form-group">
						<label class="control-label">{{ 'addContent.language.language'|trans }}</label>

						{{form_errors(form.language)}}
						{{form_widget(form.language)}}
					</div>

					<div class="form-group">
						<label class="control-label">{{ 'addContent.description'|trans }}</label>

						{{form_errors(form.description)}}
						{{form_widget(form.description)}}
					</div>

					<div class="form-group">
						<label class="control-label">{{ 'addContent.pages_number'|trans }}</label>

						{{form_errors(form.pages_number)}}
						{{form_widget(form.pages_number)}}
					</div>

					<div id="tags-div" class="form-group">
						<label class="control-label">{{ 'addContent.keywords.title'|trans }}</label>

						{{form_errors(form.keywords)}}
						{{form_widget(form.keywords)}}

						 <div class="row">
                            <div class="col-md-4">
                                <input id="tag-value" type="text" title="{{ 'addContent.keywords.placeholder'|trans }}" placeholder="{{ 'addContent.keywords.placeholder'|trans }}" name="keywords" size="35" class="tm-input form-control scroller" />
                            </div>
                            <div class="col-md-4">
                                <input id="push-tag" type="button" value="{{ 'addContent.addTag'|trans }}" class="btn"/>
                            </div>
                        </div>
						
					</div>

					<div class="form-group">
						<label class="control-label">{{ 'addContent.cover_image'|trans }}</label>

						{{form_errors(form.cover_image)}}
						{{form_widget(form.cover_image)}}
					</div>

					<div class="form-group">
						<label class="control-label">{{ 'addContent.samplePdf'|trans }}</label>

						{{form_errors(form.samplePdf)}}
						{{form_widget(form.samplePdf)}}
					</div>

					<div class="form-group">
						<label class="control-label">{{ 'addContent.contentPdf'|trans }}</label>

						{{form_errors(form.contentPdf)}}
						{{form_widget(form.contentPdf)}}
					</div>

					<div class="form-group">
						<label class="control-label">{{ 'addContent.price'|trans }}</label>

						{{form_errors(form.price)}}
						{{form_widget(form.price)}}
						<div id="price-fee"></div>
					</div>

					<div class="form-group">
						<label class="control-label">{{ 'addContent.category.title'|trans }}</label>

						{{form_errors(form.categroy_id)}}
						{{form_widget(form.categroy_id , {'attr':{'style':'height:40px !important'}})}}
					</div>

				{# {% if form.reCaptcha is defined %}
                    <div class="form-group">
                        {{ form_errors(form.reCaptcha) }}
                        {{ form_widget(form.reCaptcha,
                            {'attr': {'data-toggle':'reCaptcha',
                                'data-type':'checkbox',
                            }}) }}
                    </div>
                {% endif %} #}
					<div style="display: flex;justify-content: center;">
						<button type="submit" class="btn submit-button" >
							{% if route == 'app_partner_content' %}
								{{ 'addContent.submit'|trans }}
							{% elseif route == 'app_partner_content_update' %}
								{{ 'store.review.update'|trans }}
							{% endif %}
						</button>
					</div>
				</form>
			</div>
		</div>

	</div>
{% endblock %}

{% block javascripts %}
	{{parent()}}
	<script type="text/javascript" src="https://www.google.com/recaptcha/api.js?onload=onGoogleReCaptchaApiLoad&render=explicit&hl={{app.request.locale}}" async defer></script>
	<script src="{{ asset('js/jquery-ui.min.js') }}"></script>
    <script src="{{ asset('bundles/syndexacademic/js/bootstrap-filestyle.min.js') }}"></script>
    <script src="{{ asset('bundles/syndexacademic/js/tagmanager.js') }}" ></script>
    <script src="{{ asset('bundles/syndexacademic/js/jquery.are-you-sure.js') }}"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/qtip2/3.0.2/jquery.qtip.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.2.43/jquery.form-validator.min.js"></script>
	 <script>

		$(document).ready(function () {

            $('#partner_content_categroy_id').select2({
                placeholder: '{{"addContent.category.placeholder" | trans }}',
                width: '100% ',
                tags:true
            });

			$('#partner_content_language').select2({
                placeholder: '{{"addContent.language.select" | trans}}',
                width: '100% ',
                tags:true
            });
        });

	    jQuery(".tm-input").tagsManager();

        $("input[name=hiddenTagListA]").change(function () {
            $("#partner_content_keywords").val($("input[name=hiddenTagListA]").val());
        });
        // Applying jQuery plugin - Autocomplete
        function processTags(tags){
            var r=[];
            //var t = JSON.parse(tags)
            for(var i in tags){
                r.push(tags[i].context)
            }
            return r
        }
        $(".tm-input").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: Routing.generate('shamra_academia_get_tag_suggestions'),
                    data: {
                        term: request.term
                    },
                    success: function( data ) {
                        response( processTags(data) );
                    }
                });
            },
                //data :: JSON list defined
                //processTags(Routing.generate('shamra_academia_get_tag_suggestions')),
            minLength: 1
        });

        $('#push-tag').click(function () {
            jQuery(".tm-input").tagsManager('pushTag', $('#tag-value').val());
        });
        // Document upload processing...
        $(":file").filestyle({
            buttonText: "&nbsp;{{'addContent.filestyle.show'|trans}}",
            size: "nr",
            iconName: "glyphicon glyphicon-inbox",
            buttonBefore: true,
            badge: true,
            placeholder: "{{'addContent.filestyle.no_file'|trans}}"
        });

		$("#partner_content_price").bind('keyup mouseup', function(){
			partner_content_price_fees();
		});
		partner_content_price_fees();

		function partner_content_price_fees() {
			let val = $("#partner_content_price").val(); 
			if(val){
				if(Number(val) < 3){
					$("#price-fee").html(
					`{{'addContent.fees.validation'|trans}}`
					);    
					$("#price-fee").addClass("wrong-price");
					$("#price-fee").addClass("price-fee");
					return;
				}
				let profit = val - ({{card_fees}}/100)*val - ({{shamra_fees}}/100)*val;
				profit = profit.toFixed(2);
				$("#price-fee").html(
					`{{'addContent.fees.card'|trans}} : {{card_fees}}% <br>\
					{{'addContent.fees.shamra'|trans}} : {{shamra_fees}}% <br>\
					{{'addContent.fees.profit'|trans}} : ${profit}$ \
					`
				);           
				$("#price-fee").removeClass("wrong-price");
				$("#price-fee").addClass("price-fee");
			}else {
				$("#price-fee").html('');      
				$("#price-fee").removeClass("price-fee");
				$("#price-fee").removeClass("wrong-price");
			}
		}
    </script>

{% endblock %}