{% extends 'D2ContentBundle::base_admin.html.twig' %}

{% block head_style_extra %}
 	<link href="{{ asset('bundles/d2core/css/olay.css') }}" rel="stylesheet">
 	<link href="{{ asset('bundles/d2core/css/select_add.css') }}" rel="stylesheet">
 	<link href="{{ asset('bundles/d2core/css/video_add.css') }}" rel="stylesheet">
 	<link href="{{ asset('bundles/d2core/grid_editor/grideditor.css') }}" rel="stylesheet">
{% endblock head_style_extra %}

{% block head_script_extra %}
    <script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.7.9/tinymce.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.7.9/jquery.tinymce.min.js"></script>
	<script type="text/javascript" src="{{ asset('bundles/d2core/grid_editor/jquery.grideditor.min.js') }}"></script>
	<script type="text/javascript" src="{{ asset('bundles/d2content/js/grid_content_admin.js') }}"></script>

    <script>
        $(function() {
            // Initialize grid editor
            $('#myGrid').gridEditor({
                new_row_layouts: [[12], [6,6], [1,10,1], [2,8,2], [9,3]],
                content_types: ['tinymce'],
				tinymce: {
					config: {
						menubar: false,
						  plugins: [
							"advlist code autolink lists link image charmap print preview hr anchor pagebreak",
							"searchreplace wordcount visualblocks visualchars code fullscreen",
							"insertdatetime media nonbreaking save table contextmenu directionality",
							"template paste textcolor"
						  ],
						  toolbar1: "undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | preview | code",
						  toolbar2: "bullist outdent indent | sizeselect fontselect fontsizeselect forecolor backcolor| image",
						  setup : function(ed)
						  {
							ed.on('init', function (ed) {
								ed.target.editorCommands.execCommand("fontName", false, "{{ d2_sys_config('sys_site_font') }}");
								ed.target.editorCommands.execCommand("fontSize", false, "{{ d2_sys_config('sys_site_font_size') }}");
							});
						  },
            			  image_list: "{{ path('admin_content_get_images') }}",
						  link_list: "{{ path('admin_content_get_links') }}",
						  document_base_url: '{{ site_base_url }}',
						  font_formats: "Aleo=Aleo;Aleo-Regular=Aleo-Regular;Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Univers=Univers,helvetica,sans-serif;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats",
						  relative_urls: false,
					}
				},
				col_tools: [
						{
							title: 'Add Text Banner',
							iconClass: 'glyphicon-pencil',
							on: { 
								click: function() {
									AddTextContent($(this).parent().parent().find('.ge-content'));
								}
							}
						},
						{
							title: 'Add Content Automatically',
							iconClass: 'glyphicon-paperclip',
							on: { 
								click: function() {
									AddLinkedContent($(this).parent().parent().find('.ge-content'));
								}
							}
						},
						{
							title: 'Clear Content',
							iconClass: 'glyphicon-erase',
							on: { 
								click: function() {
									$(this).parent().parent().find('.ge-content').html('Lorem ipsum dolor sit amet');
								}
							}
						},
					],
                });
            
            // Get resulting html
             var html = $('#myGrid').gridEditor('getHtml');

			// show all the hidden banners	
			$( ".olay-text" ).each(function( index ) {
				$(this).show();
			});
        });

		function AddTextContent(element)
		{
			var content = element.html();
			content = '<div class="img_container"><div class="eventContainer" style="cursor: pointer;">' + content;
			content = content + '<div class="olay-text hidden-xs" style="display: none;"><span class="title">TITLE</span><br /> <span class="subtitle">SUB_TITLE</span>{% if d2_sys_config("sys_text_show_desc") %}<br/>Title Info{% endif %}</div></div></div>';
			element.html(content);

			$( ".olay-text" ).each(function( index ) {
				$(this).show();
			});
		}

		function AddLinkedContent(element)
		{
			bootbox.prompt({
				title: "Content Manager",
				size: "small",
				inputType: 'checkbox',
				inputOptions: [
					{% if d2_sys_config('sys_case_study_active') == true %}
						{text: 'Add a {% trans %}Case Study{% endtrans %} to Cell',	value: '1'},
					{% endif %}
					{% if d2_sys_config('sys_collection_active') == true %}
						{text: 'Add a {% trans %}Collection{% endtrans %} to Cell',	value: '2'},
					{% endif %}
					{% if d2_sys_config('sys_collection_active') == true %}
						{text: 'Add a {% trans %}Resource{% endtrans %} to Cell',	value: '3'},
					{% endif %}
					{% if d2_sys_config('sys_expert_active') == true %}
						{text: 'Add a {% trans %}Expert{% endtrans %} to Cell',	value: '4'},
					{% endif %}
					{% if d2_sys_config('sys_news_active') == true %}
						{text: 'Add {% trans %}News{% endtrans %} to Cell',	value: '5'},
					{% endif %}
					{% if d2_sys_config('sys_smalls_active') == true %}
						{text: 'Add {% trans %}Advert{% endtrans %} to Cell',	value: '6'},
					{% endif %}
					{% if d2_sys_config('sys_borrowed_asset_active') == true %}
						{text: 'Add {% trans %}Borrowed Asset{% endtrans %} to Cell',	value: '7'},
					{% endif %}
					{% if d2_sys_config('sys_quorum_active') == true %}
						{text: 'Add {% trans %}PHSDSBC Calendar{% endtrans %} to Cell',	value: '8'},
					{% endif %}
				],
				callback: function (result) {
					if(result == 1)
					{
						addCaseStudy('case_study', element);
					}
					else if(result == 2)
					{
						addCollection('collection', element);
					}
					else if(result == 3)
					{
						addResource('resource', element);
					}
					else if(result == 4)
					{
						addExpert('expert', element);
					}
					else if(result == 5)
					{
						addNews('news', element);
					}
					else if(result == 6)
					{
						addAdvert('advert', element);
					}
					else if(result == 7)
					{
						addBorrowedAssetCell('borrowed_asset_widget', element);
					}
					else if(result == 8)
					{
						addPhsdsbcCalendarCell('phsdsbc_calendar_widget', element);
					}
				}
			});
		}

		function addCaseStudy(type, element)
		{
			bootbox.prompt({
				title: "Add {% trans %}Case Study{% endtrans %}",
				size: "small",
				inputType: 'select',
				inputOptions: [
				{% for case_study in case_studies %}
					{text: '{{ case_study.title }}',value: '{{ case_study.id }}'},
				{% endfor %}	
				],
				callback: function (result) {
					if(result)
						AddGridCell(type, element, result);
				}
			});
		}

		function addCollection(type, element)
		{
			bootbox.prompt({
				title: "Add {% trans %}Collection{% endtrans %}",
				size: "small",
				inputType: 'select',
				inputOptions: [
				{% for collection in collections %}
					{text: '{{ collection.title }}',value: '{{ collection.id }}'},
				{% endfor %}	
				],
				callback: function (result) {
					if(result)
						AddGridCell(type, element, result);
				}
			});
		}

		function addExpert(type, element)
		{
			bootbox.prompt({
				title: "Add {% trans %}Expert{% endtrans %}",
				size: "small",
				inputType: 'select',
				inputOptions: [
				{% for expert in experts %}
					{text: '{{ expert.title }}',value: '{{ expert.id }}'},
				{% endfor %}	
				],
				callback: function (result) {
					if(result)
						AddGridCell(type, element, result);
				}
			});
		}

		function addResource(type, element)
		{
			bootbox.prompt({
				title: "Add {% trans %}Resource{% endtrans %}",
				size: "small",
				inputType: 'select',
				inputOptions: [
				{% for resource in resources %}
					{text: '{{ resource.title }}',value: '{{ resource.id }}'},
				{% endfor %}	
				],
				callback: function (result) {
					if(result)
						AddGridCell(type, element, result);
				}
			});
		}

		function addNews(type, element)
		{
			bootbox.prompt({
				title: "Add {% trans %}News{% endtrans %}",
				size: "small",
				inputType: 'select',
				inputOptions: [
				{% for news_item in news %}
					{text: '{{ news_item.title }}',value: '{{ news_item.id }}'},
				{% endfor %}	
				],
				callback: function (result) {
					if(result)
						AddGridCell(type, element, result);
				}
			});
		}

		function addAdvert(type, element)
		{
			bootbox.prompt({
				title: "Add {% trans %}Advert{% endtrans %}",
				size: "small",
				inputType: 'select',
				inputOptions: [
				{% for advert in adverts %}
					{text: '{{ advert.title }}',value: '{{ advert.id }}'},
				{% endfor %}	
				],
				callback: function (result) {
					if(result)
						AddGridCell(type, element, result);
				}
			});
		}

    </script>
{% endblock head_script_extra %}

{% block page_header %}
<div class="row">
	<div class="col-md-12">
		<div class="pull-right">
			<a href="javascript:SaveGridEdit({{ entity.id }}, 0)" class="btn btn-sm btn-default">Save</a>
			<a href="javascript:SaveGridEdit({{ entity.id }}, 1)" class="btn btn-sm btn-default">Save and Close</a>
			<a href="{{ path('admin_content_view') }}" class="btn btn-sm btn-default">Back</a>
		</div>
		<div>
			Update <code>Content</code>.
		</div>
	</div>
</div>
{% endblock page_header %}

{% block content %}
	<div id="myGrid">
		{{ entity.text|raw }}
	</div>
{% endblock content %}