<?php
if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly.
}
class Fox_Elementor_Library_Manager {
	/**
	 * Object constructor. Init basic things.
	 */
	public function __construct() {
		$this->hooks();
		$this->register_templates_source();
	}
	/**
	 * Initialize Hooks
	 */
	public function hooks() {
		add_action( 'elementor/editor/after_enqueue_scripts', array( $this, 'editor_scripts' ) );
		add_action( 'elementor/editor/footer', array( $this, 'html_templates' ) );
	}

	/**
	 * Register source.
	 *
	 * @since 1.0.0
	 */
	public function register_templates_source() {
        
        require_once 'templates-source.php';
		Elementor\Plugin::instance()->templates_manager->register_source(
            'Fox_Elementor_Templates_Source' 
        );
        
	}

	/**
	 * Load Editor JS
	 *
	 * @since 1.0.0
	 */
	public function editor_scripts() {
        wp_enqueue_style( 'fox-elementor-library', FOX_FRAMEWORK_URL . 'css/elementor-library.css', null, '1.1' );
		wp_enqueue_script( 'fox-elementor-library', FOX_FRAMEWORK_URL . 'js/elementor-library.js', array( 'jquery' ), FOX_FRAMEWORK_VERSION, true );
		wp_localize_script( 'fox-elementor-library', 'FOX_ELEMENTOR_LIB', array(
			'list_url' => 'https://thefox.withemes.com/wp-json/fox-templates/v1/library/?version=12',
            // 'list_url' => 'http://localhost/fox/wp-json/fox-templates/v1/library/'
		) );
	}
	/**
	 * Templates Modal Markup
	 *
	 * @since 1.0.0
	 */
	public function html_templates() { ?>
		<script type="text/html" id="tmpl-elementor-fox-library-modal-header">
			<div class="elementor-templates-modal__header fox-studio-header">
				<div class="elementor-templates-modal__header__logo-area">
					<div class="elementor-templates-modal__header__logo">
                        <span class="elementor-templates-modal__header__logo__title">The Fox Studio</span>
					</div>
				</div>
				<div class="elementor-templates-modal__header__menu-area">
					<div id="elementor-template-library-header-menu" class="tab-title-container"></div>
				</div>
				<div class="elementor-templates-modal__header__items-area">
					<div class="elementor-templates-modal__header__close elementor-templates-modal__header__close--normal elementor-templates-modal__header__item">
						<i class="eicon-close" aria-hidden="true" title="Close"></i>
						<span class="elementor-screen-only">Close</span>
					</div>
				</div>
			</div>
		</script>

		<script type="text/html" id="tmpl-elementor-fox-library-tab-title-item"><#
			_.each( data, function( item, i ) { #>
				<div class="elementor-component-tab elementor-template-library-menu-item" data-tab="elementor-template-library-{{ item.slug }}">{{{ item.name }}}</div><#
			} ); #>
		</script>

		<script type="text/html" id="tmpl-elementor-fox-library-modal-order">
			<div class="elementor-template-library-filter">
            
                <form>
                    <label class="elementor-template-library-filter-item">
                        <input type="radio" value="all" name="fox-block-cat" checked />
                        <span>All ({{{ data.count }}})</span>
                    </label>
                    <#
                    _.each( data.tags, function( item, i ) { #>
                        <label class="elementor-template-library-filter-item">
                            <input type="radio" value="{{{ item.slug }}}" name="fox-block-cat" />
                            <span>{{{ item.title }}} ({{{ item.count }}})</span>
                        </label>
                    <# } ); #>
                    
                </form>
               
			</div>
		</script>

		<script type="text/html" id="tmpl-elementor-fox-library-modal">
			<div id="elementor-template-library-templates" data-template-source="remote"></div>
			<div class="elementor-loader-wrapper" style="display: none">
				<div class="elementor-loader">
					<div class="elementor-loader-boxes">
						<div class="elementor-loader-box"></div>
						<div class="elementor-loader-box"></div>
						<div class="elementor-loader-box"></div>
						<div class="elementor-loader-box"></div>
					</div>
				</div>
				<div class="elementor-loading-title">Loading</div>
			</div>
		</script>

		<script type="text/html" id="tmpl-elementor-fox-library-tab-content"><#
            _.each( data, function( item, i ) { #>
				<div class="elementor-template-library-tab-content elementor-template-library-{{ item.slug }}">
					<div class="elementor-template-library-toolbar">
						<div class="elementor-template-library-filter-toolbar-remote elementor-template-library-filter-toolbar"></div>
						<div class="elementor-template-library-filter-text-wrapper">
							<label class="elementor-screen-only">Search Templates:</label>
							<input placeholder="Search" class="fox-studio-search-form">
							<i class="eicon-search"></i>
						</div>
					</div>
					<div class="elementor-template-library-templates-container fox-studio-templates-container"></div>
				</div><#
			} ); #>
		</script>

		<script type="text/html" id="tmpl-elementor-fox-library-modal-item"><#
            _.each( data.elements, function( item, i ) { #>
			<div class="elementor-template-library-template elementor-template-library-template-remote elementor-template-library-template-block" data-title="{{{ item.image }}}" data-slug="{{{ item.slug }}}" data-tag="{{{ item.class }}}">
				<div class="elementor-template-library-template-body">
					<img src="{{{ item.image }}}" alt="{{{ item.title }}}" />

					<a class="elementor-template-library-template-preview" href="{{{ item.url }}}" target="_blank">
						<i class="eicon-zoom-in-bold" aria-hidden="true"></i>
					</a>
				</div>

				<div class="elementor-template-library-template-footer">
					<a class="elementor-template-library-template-action elementor-template-library-template-insert elementor-button" data-id="{{{ item.id }}}">
						<i class="eicon-file-download" aria-hidden="true"></i>
						<span class="elementor-button-title">Insert</span>
					</a>
					<div class="xts-elementor-template-library-template-name">{{{ item.title }}}</div>
				</div>
			</div><#
            } ); #>
		</script>
		<?php
	}
}

new Fox_Elementor_Library_Manager();