{% extends app.request.get('project_setting').instance_theme_path~":AdminTheme:base.html.twig" %}
{% block breadcrumb %}  
	<li>{{ 'Blog.module_title' |trans }} /</li>
	<li>{{ 'Add Blog' |trans }}</li>
{% endblock breadcrumb %}
{% block main_page_title %}
	{% block form_title %}
		<i class="fa fa-image"></i> {{ 'Add Blog' |trans }}
	{% endblock form_title %}
{% endblock main_page_title %}
{% block main_content %}
	<div class="ui-table-block col-lg-12 col-md-12 col-xs-12 add-banner-block">
		<div class="ui-content-block">
			{{ form_start(form, {'action': path('officebrain_blog_blogadmin_create'), 'attr': {'class': 'js-add-edit-form', 'id':'create_blog', 'method':'post', novalidate: 'novalidate'}}) }}
				<div class="row">
					<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="myTabContent">
						 <div class=" col-xs-12">
							<div class="row">
								<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
									<div class="form-group">
										{{ form_label(form.postName, 'Blog.label_title'|trans({},'validators'), {'label_attr': {'class': 'form-title'}}) }}
										{{ form_widget(form.postName,{'attr':{'class':'form-control'}}) }}
										{{ form_errors(form.postName) }}
									</div>
								</div>

								<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
									<div class="form-group">
										{{ form_label(form.publishedDate, 'Published Date'|trans({},'validators'), {'label_attr': {'class': 'form-title'}}) }}
										<div class="input-append date input-group date-block" id="datetimepicker_to">
										{{ form_widget(form.publishedDate,{'attr':{'class':'form-control','data-format': 'yyyy-MM-dd hh:mm:ss'}}) }}
										<span class="add-on input-group-addon datepicker-color"> <i class="fa-calendar fa"></i></span>
										</div>
										{{ form_errors(form.publishedDate) }}
									</div>
								</div>

								<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
									<div class="form-group">
										{{ form_label(form.postStatus, 'Blog.label_status'|trans({},'validators'), {'label_attr': {'class': 'form-title'}}) }}
										{{ form_widget(form.postStatus,{'attr':{'class':'form-control'}}) }}
										{{ form_errors(form.postStatus) }}
									</div>
								</div>

								<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
									<div class="form-group">
										{{ form_label(form.postContent, 'Blog.label_content'|trans({},'validators'), {'label_attr': {'class': 'form-title'}}) }}
										{{ form_widget(form.postContent,{'attr':{'class': 'form-control form-control-tool-tip content tinymce', 'style':'height:20em;', 'data-theme':'advanced', 'rows':'25', 'data-placement':'right'} }) }}
										{{ form_errors(form.postContent) }}
									</div>
								</div>
								<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
									<div class="form-group">
										{{ form_label(form.postCategoryId, 'Blog.label_category'|trans({},'validators'), {'label_attr': {'class': 'form-title'}}) }}
										{{ form_widget(form.postCategoryId.postCategoryId,{'attr':{'class':'form-control'}}) }}
										{{ form_errors(form.postCategoryId) }}
									</div>
								</div>
								<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
									<div class="form-group">
										{{ form_label(form.postTagId, 'Blog.label_tag'|trans({},'validators'), {'label_attr': {'class': 'form-title'}}) }}
										{{ form_widget(form.postTagId.postTagId,{'attr':{'class':'form-control'}}) }}
										{{ form_errors(form.postTagId) }}
									</div>
								</div>	
								<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
									<div class="form-group">
										<label class="form-title required">Feature Image</label>
										<div style="text-align: center;border: 1px solid #e6e6e6;">
											<image src="{{asset('images/browse-image.jpg')}}" alt="upload image" id="js_upload_post_file" style="cursor:pointer;max-width:275px;"/>

											{{ form_widget(form.featureImage,{'attr':{'class':'form-control hide'}}) }}
											{{ form_errors(form.featureImage) }}
										</div>
									</div>
								</div>
								<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
									<div class="form-group">
										{{ form_label(form.metaTitle, 'Meta Title'|trans({},'validators'), {'label_attr': {'class': 'form-title'}}) }}
										{{ form_widget(form.metaTitle,{'attr':{'class':'form-control'}}) }}
										{{ form_errors(form.metaTitle) }}
									</div>
								
									<div class="form-group">
										{{ form_label(form.metaDesc, 'Meta Description'|trans({},'validators'), {'label_attr': {'class': 'form-title'}}) }}
										{{ form_widget(form.metaDesc,{'attr':{'class':'form-control'}}) }}
										{{ form_errors(form.metaDesc) }}
									</div>
								
									<div class="btn-block">
										<input type="hidden" name="timezone" id="timezone" />
										{{ form_rest(form, {'display': 'hidden'})  }}
										
										<button type="button" class="customize-btn js-submit-post-data" data-last="Finish ">{{ 'Blog.button_save' |trans }}</button>
										<button type="reset" class="customize-btn js-banner-reset">{{ 'Blog.button_reset' |trans }}</button>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			{{ form_end(form) }}
		</div>
	</div>
{% endblock main_content %}
{% block footer_js %}
	{% if(app.request.xmlHttpRequest) %}
		{% if (app.request.get('instance_id') == 0) or app.request.query.get('js_load_status') == 'true' %}
			{{ parent() }}
			{% javascripts '@OfficeBrainCmsBundle/Resources/public/js/cms_page_master.js' %}
				<script src="{{ asset_url }}" type='text/javascript'></script>
					{{ tinymce_init() }}
			{% endjavascripts %}
		{% else %}
			<script type="text/javascript">
				tinyMCE.editors=[];
				tinymce.init({
					selector: '.tinymce',
					theme: "modern",
					plugins: [
						"advlist autolink lists link image charmap print preview hr anchor pagebreak",
						"searchreplace wordcount visualblocks visualchars code fullscreen",
						"insertdatetime media nonbreaking save table contextmenu directionality",
						"emoticons template paste textcolor colorpicker textpattern imagetools fullpage"
					],
					toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | image forecolor backcolor emoticons",
					image_advtab: true,
					relative_urls : false,
					remove_script_host : false,
					convert_urls : true,
				});
			</script>
		{% endif %}
	{% else %}
		{% if (app.request.get('instance_id') == 0) or app.request.query.get('js_load_status') == 'true' or app.request.get('iframe') == 1 %}
			{{ parent() }}
		{% endif %}
		<script src="{{ asset('bundles/officebrainpage/js/tinymce/tinymce.min.js') }}" type='text/javascript'></script>
		{% javascripts '@OfficeBrainPageBundle/Resources/public/js/customtinymce.js'
        			
        %}
        <script src="{{ asset_url }}" type='text/javascript'></script>
        {% endjavascripts %}
	{% endif %}

	<script>
		$(document).ready(function(){
			document.getElementById('timezone').value = Intl.DateTimeFormat().resolvedOptions().timeZone;
			//$('#post_featureImage').parent().find('ul').remove();

			$(document).on('click','.js-submit-post-data',function(){
				$('#post_featureImage').parent().find('ul').remove();
				var error = "<ul><li>This field is required.</li></ul>";
				if($('#post_featureImage').val()==""){
					$('#post_featureImage').parent().append(error);
				}else{
					$("#create_blog").submit();
					/*$("#create_blog").submit(function(e){
					    fillcontents(); // ← JS can't find this function
					});*/
				}
			});

			$(document).on('click','#js_upload_post_file',function(){
				$('#post_featureImage').parent().find('ul').remove();
				$("#post_featureImage").click();
			});

			$(document).on('change','#post_featureImage',function(e){
			    var reader = new FileReader();

			    reader.onload = function(e){
			        $('#js_upload_post_file').attr('src', e.target.result);
			    }

			    reader.readAsDataURL(this.files[0]);
			});

			$('#datetimepicker_to').datetimepicker({
		        pickTime: true,
		        todayHighlight:false,
		        autoclose: 1,
		    });
		     var today = new Date();
		    var formatted = today.getFullYear() + '-' +
		        ('0' + (today.getMonth()+1)).slice(-2) + '-' +
		        ('0' + today.getDate()).slice(-2) + ' ' +
		        ('0' + today.getHours()).slice(-2) + ':' +
		        ('0' + today.getMinutes()).slice(-2) + ':' +
		        ('0' + today.getSeconds()).slice(-2);	
		    $('#post_publishedDate').val(formatted);

		});
	</script>
{% endblock footer_js %}