<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>
<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' );
    
    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' );
    
    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' );
    
    var code_m_html = CodeMirror.fromTextArea( document.getElementById( "m_html" ),{
      lineWrapping: true,
      mode: "text/html"
    });
    code_m_html.on( 'change', function(cm) {
      $( '#m_html' ).val( cm.getValue() );
    });
    code_m_html.setOption( "theme", 'material' );
    
    var code_m_css = CodeMirror.fromTextArea( document.getElementById( "m_css" ),{
      lineWrapping: true,
      mode: "css"
    });
    code_m_css.on( 'change', function(cm) {
      $( '#m_css' ).val( cm.getValue() );
    });
    code_m_css.setOption( "theme", 'material' );
    
    var code_m_js = CodeMirror.fromTextArea( document.getElementById( "m_js" ),{
      lineWrapping: true,
      mode: "javascript"
    });
    code_m_js.on( 'change', function(cm) {
      $( '#m_js' ).val( cm.getValue() );
    });
    code_m_js.setOption( "theme", 'material' );
    
    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;
      }
		});

		$( '.disclose' ).on( 'click', function()
    {
			$( this ).closest( 'li' ).toggleClass( 'sort-collapsed' ).toggleClass( 'sort-expanded' );
		});
            
    $( '.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/ajax.php',
            data: {
              a: 'cookie_menus',
              menu_id:  menu_id
            }
          });
        }
        else
        {
          var page_id = $( this ).parent( 'div' ).parent( 'li' ).attr( 'id' );
    
          $.ajax(
          {
            type: 'POST',
            cache: false,
            url: '/admin/ajax.php',
            data: {
              a: 'cookie_pages',
              page_id:  page_id
            }
          });
        }
      }
    });
    
    <?php
      $array = unserialize( $_COOKIE[ 'cookie_pages' ] );
      if ( is_array( $array ) ): foreach ( $array as $key => $val ):
        if ( $val ):
          ?>$( '.<?= $key;?>' ).children( 'div' ).children( 'span.disclose' ).click();<?
        endif;
      endforeach; endif;
      
      $array = unserialize( $_COOKIE[ 'cookie_menus' ] );
      if ( is_array( $array ) ): foreach ( $array as $key => $val ):
        if ( $val ):
          ?>$( '.menu_<?= $key;?>' ).children( 'div' ).children( 'span.disclose' ).click();<?
        endif;
      endforeach; endif;
    ?>
    
  });
</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>
      <li><i class="fa fa-mobile"></i>HTML - mobile</li>
      <li><i class="fa fa-mobile"></i>CSS - mobile</li>
      <li><i class="fa fa-mobile"></i>JS - mobile</li>
    </ul>
    <div class="resp-tabs-container layout-tabs">
      <div>
        <?= \Html::input(
                    array(
                      'label'   => 'Nazwa',
                      'name'    => 'name',
                      'id'      => 'name',
                      'value'   => $this -> layout['name']
                    )
                );?>
        <?= \Html::input_switch(
                    array(
                      'label'   => 'Szablon domyślny',
                      'name'    => 'status',
                      'checked' => $this -> layout['status'] == 1 ? true : false
                    )
                );?>
        <div class="form-group">
          <label class="col-lg-3 control-label">Strony:</label>
          <div class="col-lg-9">
            <?
              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;"';?>>
                          <span class="disclose"><span></span></span>
                          Menu: <b><?= $menu['name'];?></b>
                        </div>
                        <?= \admin\view\Layouts::subpages_list( \admin\factory\Pages::menu_pages( $menu['id'] ), $this -> layout['pages'] );?>
                      </li>
                    </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>
        <textarea name="m_html" id="m_html" style="width: 100%; height: 500px; border: 0; padding: 10px; margin: -10px 0 -15px; font-size: 12px; box-sizing: border-box;"><?= htmlspecialchars( $this -> layout['m_html'] );?></textarea>
      </div>
      <div>
        <textarea name="m_css" id="m_css" style="width: 100%; height: 500px; border: 0; padding: 10px; margin: -10px 0 -15px; font-size: 12px; box-sizing: border-box;"><?= htmlspecialchars( $this -> layout['m_css'] );?></textarea>
      </div>
      <div>
        <textarea name="m_js" id="m_js" style="width: 100%; height: 500px; border: 0; padding: 10px; margin: -10px 0 -15px; font-size: 12px; box-sizing: border-box;"><?= htmlspecialchars( $this -> layout['m_js'] );?></textarea>
      </div>
  </div>
  <div class="clear"></div>
<?
$out = ob_get_clean();

$grid = new \gridEdit;
$grid -> id               = 'layout-edit';
$grid -> gdb_opt          = $gdb;
$grid -> include_plugins  = true;
$grid -> title            = 'Edycja szablonu';
$grid -> fields           = [
                              [
                                'db' => 'id',
                                'type' => 'hidden',
                                'value' => $this -> layout['id']
                              ]
                            ];
$grid -> actions          = [ 
                              'save' => [ 'url' => '/admin/layouts/layout_save/', 'back_url' => '/admin/layouts/view_list/' ], 
                              'cancel' => [ 'url' => '/admin/layouts/view_list/' ] 
                            ];
$grid -> external_code    = $out;
$grid -> persist_edit     = true;
$grid -> id_param         = 'id';

echo $grid -> draw();
?>