{% 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">
	{% if entity.cssText|trim != '' %}
 	<style>
		{{ entity.cssText|raw }}
 	</style>
 	{% endif %}
{% 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 type="text/javascript" src="{{ asset('bundles/d2content/js/grid_bootstrap_admin.js') }}"></script>

 	{% if entity.jsText|trim != '' %}
 	<script>
		{{ entity.jsText|raw }}
 	</script>
 	{% endif %}

    <script>
        $(function() {
            // Initialize grid editor
            $('#myGrid').gridEditor({
                new_row_layouts: [[12], [6,6], [4,4,4], [3,3,3,3], [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') }}",
						  font_formats: "Noto Sans=Noto Sans;Open Sans=Open Sans;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",
						  document_base_url: '{{ site_base_url }}',
						  relative_urls: false,
					}
				},
				row_classes: [
						{
							label: 'Well', cssClass: 'well',
						}
				],
				col_classes: [
						{
							label: 'Well', cssClass: 'well',
						},
						{
							label: 'News', cssClass: 'bss-news',
						}
				],
				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: 'Add Button',
							iconClass: 'glyphicon-zoom-in',
							on: { 
								click: function() {
									content = $(this).parent().parent().find('.ge-content').html();
									$(this).parent().parent().find('.ge-content').html(content + '<a class="btn btn-default" href="">BUTTON</a>');
								}
							}
						},						{
							title: 'Clear Content',
							iconClass: 'glyphicon-erase',
							on: { 
								click: function() {
									$(this).parent().parent().find('.ge-content').html('Lorem ipsum dolor sit amet');
								}
							}
						},
						{
							title: 'Add Popup Modal',
							iconClass: 'glyphicon-list-alt',
							on: { 
								click: function() {
									if(tinyMCE.activeEditor != null) {
										var node = tinyMCE.activeEditor.selection.getContent();
										if(node == '')
											alert('Please select an element first');
										else
											AddPopupContent(node, $(this).parent().parent().find('.ge-content'));
									}
									else {
										alert('Please select an element first');
									}
								}
							}
						},
						{
							title: 'Add Nav',
							iconClass: 'glyphicon-th-list',
							on: { 
								click: function() {
									AddNavContent($(this).parent().parent().find('.ge-content'));
								}
							}
						},
						{
							title: 'Set Column Styling',
							iconClass: 'glyphicon-text-background',
							on: { 
								click: function() {
									styleDialog($(this).closest('.column'), 'col');
								}
							}
						},
						{
							title: 'Add Bootstrap Component',
							iconClass: 'glyphicon-briefcase',
							on: { 
								click: function() {
									AddComponent($(this).parent().parent().find('.ge-content'));
								}
							}
						},
					],
					row_tools: [{
						title: 'Set Row Styling',
						iconClass: 'glyphicon-text-background',
						on: { 
							click: function() {
								styleDialog($(this).closest('.row'), 'row');
							}
						}
					}],
                });
            
            // Get resulting html
             var html = $('#myGrid').gridEditor('getHtml');

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

		function AddPopupContent(node, element)
		{
			bootbox.prompt({
				title: "Add Popup",
				size: "small",
				inputType: 'select',
				inputOptions: [
				{% for popup in popups %}
					{text: '{{ popup.title }}',value: '{{ popup.id }}'},
				{% endfor %}	
				],
				callback: function (result) {
					if(result) {
						var content = element.html();
						content = content.replace(node, '<a href="" class="modal_pop_link" data-id="' + result + '">' + node + '</a>'); 
						element.html(content);
					}
				}
			});
		}

		function AddNavContent(element)
		{
			bootbox.prompt({
				title: "Add Nav",
				size: "small",
				inputType: 'select',
				inputOptions: [
				{% for nav in navs %}
					{text: '{{ nav.title }}',value: '{{ nav.id }}'},
				{% endfor %}	
				],
				callback: function (result) {
					if(result) {
						AddNavCell(element, result);
					}
				}
			});
		}
	
		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_bandb_active') == true %}
						{text: 'Add {% trans %}B&B Bookings{% endtrans %} to Cell',	value: '7'},
					{% 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)
					{
						addBandBBookingsCell('bandb_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:AddCSSJS({{ entity.id }}, 'css', 'home_page')" class="btn btn-sm btn-default">Styling</a>
			<a href="javascript:AddCSSJS({{ entity.id }}, 'js', 'home_page')" class="btn btn-sm btn-default">Scripting</a>
			<a href="javascript:SaveHomeGridEdit({{ entity.id }}, 0)" class="btn btn-sm btn-default">Save</a>
			<a href="javascript:SaveHomeGridEdit({{ entity.id }}, 1)" class="btn btn-sm btn-default">Save and Close</a>
			<a href="{{ path('admin_home_page_view') }}" class="btn btn-sm btn-default">Back</a>
		</div>
		<div>
			Update <code>Home Page</code>.
		</div>
	</div>
</div>
{% endblock page_header %}

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