<link rel="stylesheet" href="/libraries/codemirror/lib/codemirror.css" />
<link rel="stylesheet" href="/libraries/codemirror/theme/material.css" />
<script type="text/javascript" src="/libraries/jquery-nested-sortable/jquery.mjs.nestedSortable.js"></script>
<script type="text/javascript" src="/libraries/codemirror/lib/codemirror.js"></script>
<script type="text/javascript" src="/libraries/codemirror/mode/css/css.js"></script>
<script type="text/javascript" src="/libraries/codemirror/mode/xml/xml.js"></script>
<script type="text/javascript" src="/libraries/codemirror/mode/javascript/javascript.js"></script>
<script type="text/javascript" src="/libraries/codemirror/mode/htmlmixed/htmlmixed.js"></script>
<script type="text/javascript" src="/libraries/codemirror/addon/mode/multiplex.js"></script>
<style type="text/css">
  .layout-tree-toggle {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    padding: 0;
    margin-right: 4px;
    color: #666;
    cursor: pointer;
  }

  .layout-tree-toggle:focus,
  .layout-tree-toggle:active,
  .layout-tree-toggle:focus-visible {
    outline: none;
    box-shadow: none;
  }

  li.sort-expanded > div .layout-tree-toggle i {
    transform: rotate(90deg);
  }

  #fg-layout-edit input[type=checkbox].g-checkbox {
    -webkit-appearance: checkbox;
    appearance: auto;
    position: static;
    width: 14px;
    height: 14px;
    background: initial;
    border-radius: 0;
    box-shadow: none;
    vertical-align: middle;
  }

  #fg-layout-edit input[type=checkbox].g-checkbox:before {
    content: none;
  }
</style>
<script type="text/javascript">
  $( function()
  {
    var code_html = CodeMirror.fromTextArea( document.getElementById( "html" ),{
      lineWrapping: true,
      mode: "text/html"
    });
    code_html.on( 'change', function(cm) {
      $( '#html' ).val( cm.getValue() );
    });
    code_html.setOption( "theme", 'material' );
    code_html.setSize( null, 700 );

    var code_css = CodeMirror.fromTextArea( document.getElementById( "css" ),{
      lineWrapping: true,
      mode: "css"
    });
    code_css.on( 'change', function(cm) {
      $( '#css' ).val( cm.getValue() );
    });
    code_css.setOption( "theme", 'material' );
    code_css.setSize( null, 700 );

    var code_js = CodeMirror.fromTextArea( document.getElementById( "js" ),{
      lineWrapping: true,
      mode: "javascript"
    });
    code_js.on( 'change', function(cm) {
      $( '#js' ).val( cm.getValue() );
    });
    code_js.setOption( "theme", 'material' );
    code_js.setSize( null, 700 );

    disable_menu();

    $( '#layout-tabs' ).easyResponsiveTabs(
    {
      width: 'auto',
      fit: true,
      tabidentify: 'layout-tabs',
      type: 'vertical'
    });

    $( 'body' ).on( 'click', '.select-page', function()
    {
      $( this ).parent( 'div' ).children( 'div.icheckbox_minimal-blue' ).children( 'input' ).iCheck( 'toggle' );
    });

    $('ol.sortable').nestedSortable(
    {
			forcePlaceholderSize: true,
			handle: 'div',
			helper:	'clone',
			items: 'li',
			opacity: .6,
			placeholder: 'placeholder',
			revert: 250,
			tabSize: 25,
			tolerance: 'pointer',
			toleranceElement: '> div',
			maxLevels: 3,
			isTree: true,
			expandOnHover: 700,
      isAllowed: function()
      {
        return false;
      }
		});

    function refreshTreeDisclosureState()
    {
      $( 'ol.sortable li' ).each( function()
      {
        var $li = $( this );
        var hasChildren = $li.children( 'ol' ).children( 'li' ).length > 0;
        var $disclose = $li.children( 'div' ).children( '.disclose' );

        if ( hasChildren )
        {
          $li.removeClass( 'sort-leaf' );
          if ( !$li.hasClass( 'sort-collapsed' ) && !$li.hasClass( 'sort-expanded' ) )
            $li.addClass( 'sort-collapsed' );
          $li.addClass( 'sort-branch' );
          $disclose.attr( 'aria-expanded', $li.hasClass( 'sort-expanded' ) ? 'true' : 'false' );
          $disclose.show();
        }
        else
        {
          $li.removeClass( 'sort-branch sort-collapsed sort-expanded' ).addClass( 'sort-leaf' );
          $disclose.attr( 'aria-expanded', 'false' );
          $disclose.hide();
        }
      });
    }

    refreshTreeDisclosureState();

		$( '.disclose' ).on( 'click', function()
    {
      var $li = $( this ).closest( 'li' );
      if ( !$li.hasClass( 'sort-branch' ) )
        return;

			$li.toggleClass( 'sort-collapsed' ).toggleClass( 'sort-expanded' );
      $( this ).attr( 'aria-expanded', $li.hasClass( 'sort-expanded' ) ? 'true' : 'false' );
      this.blur();
		});

    $( '.disclose' ).mousedown( function(e)
    {
      if ( e.which === 1 ) {
        if ( $( this ).parent( 'div' ).hasClass( 'content_menu' ) )
        {
          var menu_id = $( this ).parent( 'div' ).parent( 'li' ).attr( 'menu' );

          $.ajax(
          {
            type: 'POST',
            cache: false,
            url: '/admin/pages/cookieMenus/',
            data: {
              menu_id:  menu_id
            }
          });
        }
        else
        {
          var page_id = $( this ).parent( 'div' ).parent( 'li' ).attr( 'id' );

          $.ajax(
          {
            type: 'POST',
            cache: false,
            url: '/admin/pages/cookiePages/',
            data: {
              page_id:  page_id.replace( 'list_', '' )
            }
          });
        }
      }
    });

    <?php
      $cookiePages = [];
      $cookieMenus = [];

      if ( !empty( $_COOKIE['cookie_pages'] ) )
      {
        $decoded = @unserialize( (string)$_COOKIE['cookie_pages'], [ 'allowed_classes' => false ] );
        if ( is_array( $decoded ) )
          $cookiePages = $decoded;
      }

      if ( !empty( $_COOKIE['cookie_menus'] ) )
      {
        $decoded = @unserialize( (string)$_COOKIE['cookie_menus'], [ 'allowed_classes' => false ] );
        if ( is_array( $decoded ) )
          $cookieMenus = $decoded;
      }
    ?>

    var cookiePages = <?= json_encode( $cookiePages, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES );?>;
    var cookieMenus = <?= json_encode( $cookieMenus, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES );?>;

    Object.keys( cookiePages || {} ).forEach( function( key )
    {
      if ( String( cookiePages[key] ) === '1' && /^\d+$/.test( String( key ) ) )
        $( '.list_' + key ).children( 'div' ).children( '.disclose' ).click();
    });

    Object.keys( cookieMenus || {} ).forEach( function( key )
    {
      if ( String( cookieMenus[key] ) === '1' && /^\d+$/.test( String( key ) ) )
        $( '.menu_' + key ).children( 'div' ).children( '.disclose' ).click();
    });

  });
</script>
<?
global $db;

ob_start();
?>
  <div id="layout-tabs">
    <ul class="resp-tabs-list layout-tabs">
      <li><i class="fa fa-wrench"></i>Ustawienia</li>
      <li><i class="fa fa-html5"></i>HTML</li>
      <li><i class="fa fa-html5"></i>CSS</li>
      <li><i class="fa fa-html5"></i>JS</li>
    </ul>
    <div class="resp-tabs-container layout-tabs">
      <div>
        <?= \Shared\Html\Html::input(
                    array(
                      'label'   => 'Nazwa',
                      'name'    => 'name',
                      'id'      => 'name',
                      'value'   => $this -> layout['name']
                    )
                );?>
        <?= \Shared\Html\Html::input_switch(
                    array(
                      'label'   => 'Szablon domy&#347;lny',
                      'name'    => 'status',
                      'checked' => $this -> layout['status'] == 1 ? true : false
                    )
                );?>
        <?= \Shared\Html\Html::input_switch(
                    array(
                      'label'   => 'Szablon domy&#347;lny (kategorie)',
                      'name'    => 'categories_default',
                      'checked' => $this -> layout['categories_default'] == 1 ? true : false
                    )
                );?>
        <div class="form-group">
          <label class="col-lg-4 control-label">Strony:</label>
          <div class="col-lg-8">
            <? if ( is_array( $this -> menus ) ): foreach ( $this -> menus as $menu ):?>
              <div class="menu_sortable">
                <ol class="sortable" id="sortable_<?= $menu['id'];?>">
                  <li id="list_<?= $menu['id'];?>" class="menu_<?= $menu['id'];?>" menu="<?= $menu['id'];?>">
                    <div class="context_0 content content_menu" <? if ( !$menu['status'] ) echo 'style="color: #cc0000;"';?>>
                      <button type="button" class="disclose layout-tree-toggle" aria-expanded="false" title="Rozwin / zwin">
                        <i class="fa fa-caret-right"></i>
                      </button>
                      Menu: <b><?= $menu['name'];?></b>
                    </div>
                    <?= \Shared\Tpl\Tpl::view( 'layouts/subpages-list', [
                          'pages' => $menu['pages'],
                          'layout_pages' => $this -> layout['pages'],
                          'step' => 1
                        ] );?>
                  </li>
                </ol>
              </div>
            <? endforeach; endif;?>
          </div>
        </div>
        <div class="form-group">
          <label class="col-lg-4 control-label">Kategorie:</label>
          <div class="col-lg-8">
            <div class="menu_sortable">
              <ol class="sortable" id="sortable">
                <? if ( is_array( $this -> categories ) ): foreach ( $this -> categories as $category ):?>
                  <li id="list_<?= $category['id'];?>" class="category_<?= $category['id'];?>" category="<?= $category['id'];?>">
                    <div class="context_0 content content_menu">
                      <button type="button" class="disclose layout-tree-toggle" aria-expanded="false" title="Rozwin / zwin">
                        <i class="fa fa-caret-right"></i>
                      </button>
                      <? if ( !$category['status'] ) echo '<i class="fa fa-ban fa-lg text-danger" title="Kategoria nieaktywna"></i>';?>
                      <input type="checkbox" class="g-checkbox" name="categories[]" value="<?= $category['id'];?>" <? if ( is_array( $this -> layout['categories'] ) and in_array( $category['id'], $this -> layout['categories'] ) ):?>checked="checked"<? endif;?> />
                      <b><?= $category['languages'][$this -> dlang]['title'];?></b>
                    </div>
                    <?= \Shared\Tpl\Tpl::view( 'layouts/subcategories-list', [
                            'categories' => $category['subcategories'],
                            'product_categories' => $this -> layout['categories'],
                            'dlang' => $this -> dlang
                          ] );?>
                  </li>
                <? endforeach; endif;?>
              </ol>
            </div>
          </div>
        </div>
      </div>
      <div>
        <textarea name="html" id="html" style="width: 100%; height: 500px; border: 0; padding: 10px; margin: -10px 0 -15px; font-size: 12px; box-sizing: border-box;"><?= htmlspecialchars( $this -> layout['html'] );?></textarea>
      </div>
      <div>
        <textarea name="css" id="css" style="width: 100%; height: 500px; border: 0; padding: 10px; margin: -10px 0 -15px; font-size: 12px; box-sizing: border-box;"><?= htmlspecialchars( $this -> layout['css'] );?></textarea>
      </div>
      <div>
        <textarea name="js" id="js" style="width: 100%; height: 500px; border: 0; padding: 10px; margin: -10px 0 -15px; font-size: 12px; box-sizing: border-box;"><?= htmlspecialchars( $this -> layout['js'] );?></textarea>
      </div>
  </div>
  <div class="clear"></div>
</div>
<?
$out = ob_get_clean();

$gridId = 'layout-edit';
$gridTitle = 'Edycja szablonu';
$gridSaveUrl = '/admin/layouts/save/';
$gridBackUrl = '/admin/layouts/list/';
$gridHidden = [['name' => 'id', 'value' => $this->layout['id']]];
$gridContent = $out;
$gridPersist = true;
include __DIR__ . '/../components/grid-edit-replacement.php';
?>

