<?php
/**
 * @name		Page Builder CK
 * @package		com_pagebuilderck
 * @copyright	Copyright (C) 2015. All rights reserved.
 * @license		GNU General Public License version 2 or later; see LICENSE.txt
 * @author		Cedric Keiflin - https://www.template-creator.com - https://www.joomlack.fr
 */

defined('_JEXEC') or die;

?>
<div id="elementscontainer">
	<div class="menulink" tab="tab_blocstyles"><?php echo \Joomla\CMS\Language\Text::_('PLG_PAGEBUILDERCK_FAQ_EDITION'); ?></div>
	<div class="tab menustyles ckproperty tab_fullscreen" id="tab_blocstyles">
		<div class="ckoption">
			<span class="ckoption-label">
				<?php echo \Joomla\CMS\Language\Text::_('PLG_PAGEBUILDERCK_FAQ_DISPLAY'); ?>
			</span>
			<span class="ckoption-field">
				<select id="display" name="display" class="inputbox" style="width:195px;" type="list">
					<option value="flat"><?php echo \Joomla\CMS\Language\Text::_('PLG_PAGEBUILDERCK_FAQ_FLAT'); ?></option>
					<option value="accordion"><?php echo \Joomla\CMS\Language\Text::_('PLG_PAGEBUILDERCK_FAQ_ACCORDION'); ?></option>
				</select>
			</span>
			<div class="clr"></div>
		</div>
		<div id="items_edition_list">
		</div>
		<div onclick="ckAddNewListItem()" class="item_add btn btn-small btn-info"><?php echo \Joomla\CMS\Language\Text::_('CK_ADD_ITEM'); ?></div>
		<div class="clr"></div>
	</div>
	<div class="menulink" tab="tab_headingfaqstyles"><?php echo \Joomla\CMS\Language\Text::_('PLG_PAGEBUILDERCK_FAQ_HEADING_STYLE'); ?></div>
	<div class="tab menustyles ckproperty" id="tab_headingfaqstyles">
		<div class="menustylescustom" data-prefix="headingfaq" data-rule=".faqck-heading"><?php echo $this->menustyles->createBlocStyles('headingfaq', 'faqsck', false, false) ?></div>
	</div>
	<div class="menulink" tab="tab_contentfaqstyles"><?php echo \Joomla\CMS\Language\Text::_('PLG_PAGEBUILDERCK_FAQ_CONTENT_STYLE'); ?></div>
	<div class="tab menustyles ckproperty" id="tab_contentfaqstyles">
		<div class="menustylescustom" data-prefix="contentfaq" data-rule=".faqck-content"><?php echo $this->menustyles->createBlocStyles('contentfaq', 'faqsck', false, false) ?></div>
	</div>
	<div class="clr"></div>
</div>
<div class="clr"></div>
<script language="javascript" type="text/javascript">
function ckLoadEditionPopup() {
	var focus = $ck('.editfocus');
	var noactivetabscss = focus.find('.faqsck').attr('activetab') === 'false' ? ' btn-warning active' : '';
	$ck('.faqsck .itemtitleck', focus).each(function(i, el) {
		var itemedition = ckCreateEditItem(i, $ck('#items_edition_list'), $ck(el).text(), ckContentToEditor($ck('.faqsck .itemcontentck', focus).eq(i).html()), false, false, false);
		ckMakeEditItemFaq(itemedition);
		ckLoadEditorOnTheFly('item_content_' + i);
	});

	ckMakeEditItemsSortable();
	ckFillEditionPopup(focus.attr('id'));
	ckInlineEditor('.faqck.itemcontentck');
}

function ckMakeEditItemFaq(el) {
	$ck(el).accordionck({
		header: ".item_toggler",
		collapsible: true,
		active: false,
		heightStyle: "content"
	});
}

function ckAddNewListItem() {
	var focus = $ck('.editfocus');
	// add the element in the faq
	$ck('.faqsck', focus).append(ckGetNewFaqItem('Lorem Ipsum ...', '<p>Lorem Ipsum ...</p>'));
	ckInlineEditor('.faqck.itemcontentck');

	// add the element for edition
	var index = $ck('.faqsck > [itemprop="mainEntity"]', focus).length;
	var itemedition = ckCreateEditItem(index, $ck('#items_edition_list'), 'Lorem Ipsum ...', '<p>Lorem Ipsum ...</p>', false, false, false);
	ckMakeEditItemFaq(itemedition);
	ckLoadEditorOnTheFly('item_content_' + index);
}

function ckGetNewFaqItem(title, content) {
	var html = '<div itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">'
					+'<h3 class="faqck-heading"><span class="itemtitleck pbck_contenteditable" itemprop="name" contenteditable="true">'+title+'</span></h3>'
					+'<div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">'
						+'<div class="faqck itemcontentck faqck-content" itemprop="text">'
							+content
						+'</div>';
					+'</div>';
				+'</div>';

	return html;
}

function ckBeforeSaveEditionPopup() {
	var focus = $ck('.editfocus');

	$ck('.item_content_edition').each(function() {
		var textID = $ck(this).attr('id');
		ckSaveEditorOnTheFly(textID);
	});
	var focus = $ck('.editfocus');
	$ck('#items_edition_list .item_edition:not(.ui-sortable-helper)').each(function(i, el) {
		$ck('.itemtitleck', focus).eq(i).text($ck(el).find('.item_title_edition').val());
		$ck('.itemcontentck', focus).eq(i).html(ckEditorToContent($ck(el).find('.item_content_edition').val()));
	});

	var display = $ck('#display').val();
	focus.find('.faqsck').removeAttr('data-accordion');
	focus.find('.faqsck').attr('data-display', display);
}

function ckSaveInlineEditionPopup() {
	ckBeforeSaveEditionPopup();
}

function ckSetDefaultEditItem(item) {

}

function ckBeforeCloseEditionPopup() {
	$ck('.item_content_edition').each(function() {
		ckRemoveEditorOnTheFly($ck(this).attr('id'));
	});
}

function ckBeforeDeleteEditItem(item) {
	var focus = $ck('.editfocus');
	var index_item = item.index('.item_edition');
	ckRemoveEditorOnTheFly(item.find('.item_content_edition').attr('id'));
	$ck('.faqsck > [itemprop="mainEntity"]', focus).eq(index_item).remove();
}

function ckUpdatePreviewArea() {

}

function ckMakeEditItemsSortable() {
	$ck( "#items_edition_list" ).sortable({
		items: ".item_edition",
		helper: "clone",
		// axis: "y",
		handle: "> .item_move",
		forcePlaceholderSize: true,
		tolerance: "pointer",
		placeholder: "placeholderck",
		// zIndex: 9999,
		start: function(e, ui){
			$ck(this).find('.item_content_edition').each(function(){
				if (tinymce.get($ck(this).attr('id'))) {
					ckRemoveEditorOnTheFly($ck(this).attr('id'));
				}
			});
		},
		update: function(e, ui) {
			$ck(this).find('.item_content_edition:not(.ui-sortable-helper)').each(function(){
				ckLoadEditorOnTheFly($ck(this).attr('id'));
			});
			ckUpdatePreviewArea();
			$ck( "#<?php echo $id; ?>_preview_faq" ).accordionck("refresh");
		}
	});
}

</script>