{extends "base.tpl"}

{block sentry}
   {include "utils/sentry.tpl"}
{/block}

{block title}
   {$body.title}
{/block}

{block body}
   <div id="body-content">
      <nav class="navbar navbar-default">
         <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
               <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="javascript:nf('blank', 'launch.php?s=board.php')">
               <img class="logo" src="/admin/static/images/logo.svg?v1" width="100" height="28" alt="wpjshop">
            </a>
         </div>
         <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav" role="menu">
               {function menu}
                  {foreach $menu as $item}
                     {if $item.visible}
                        {if $item['submenu']}
                           <li class="{if $item.level != 0}dropdown-submenu{else}dropdown{/if} menuitem-{$item.name|strip_accent}">
                              <a class="dropdown-toggle" data-toggle="dropdown"
                                      {if $item.right}
                                         href="launch.php?s=main.php&l={$view->encodeUrl($item.left)}&r={$view->encodeUrl($item.right)}" data-left="{$item.left}" data-right="{$item.right}"
                                      {else}
                                         href="#"
                                      {/if}
                              >
                                 {if $item.title}{$item.title}{else}{$item.name|translate:"navigation"} {/if}{if $item.level == 0}
                                    <b class="caret"></b>
                                 {/if}
                              </a>
                              <ul class="dropdown-menu" role="menu">
                                 {menu menu=$item.submenu}
                              </ul>
                           </li>
                        {else}
                           <li class="menuitem-{$item.name|strip_accent}">
                              <a
                                      {if $item.script}
                                         href="javascript:{$item.script}"
                                      {elseif $item.href}
                                         href="{$item.href}" target="{$item.target}"
                                      {else}
                                         href="launch.php?s=main.php&l={$view->encodeUrl($item.left)}&r={$view->encodeUrl($item.right)}" data-left="{$item.left}"
                                         data-right="{$item.right}"
                                      {/if}
                              >{if $item.title}{$item.title}{else}{$item.name|translate:"navigation"}{/if}
                                 {if $item.superadmin}
                                    <span class="glyphicon glyphicon-flash" style="color:#AAB2BD;" title="Vidí pouze superadmin"></span>
                                 {/if}</a>
                           </li>
                        {/if}
                     {/if}
                  {/foreach}
               {/function}

               {menu menu=$body.menu}
            </ul>

            <ul class="nav navbar-nav navbar-right">
               {get_contexts domain=1 assign='domain_contexts'}
                {$domains = $domain_contexts.domain->getSupportedWithScheme()}
               {if $domains|count > 1}
                   <li class="dropdown">
                      <a class="dropdown-toggle" data-toggle="dro pdown" href="{$cfg.Addr.rel}" target="_blank">
                         {ifmodule COMPONENTS}
                            <img src="/favicon.ico" class="shop-logo" width="16" alt="{$dbcfg.shop_title}">
                         {elsemodule}
                            <img src="/templates/images/favicon.ico" class="shop-logo" width="16" alt="{$dbcfg.shop_title}">
                         {/ifmodule}
                         <span class="shop-name">{$cfg.Addr.print|replace:'/':''|replace:'www.':''}</span>
                         <b class="caret"></b>
                      </a>
                      <ul class="dropdown-menu" role="menu">
                          {foreach $domains as $domain => $address}
                             {if $domain|strstr:'kupshop.local'}{continue}{/if}
                              <li>
                                 <a href="{$address}" target="_blank">{$domain|replace:'/':''|replace:'www.':''}</a>
                              </li>
                          {/foreach}
                      </ul>
                   </li>
               {else}
                  <li>
                     <a href="{$cfg.Addr.rel}" target="_blank" class="link-to-shop">
                        {ifmodule COMPONENTS}
                           <img src="/favicon.ico" class="shop-logo" width="16" alt="{$dbcfg.shop_title}">
                        {elsemodule}
                           <img src="/templates/images/favicon.ico" class="shop-logo" width="16" alt="{$dbcfg.shop_title}">
                        {/ifmodule}
                        <span class="shop-name">{$cfg.Addr.print|replace:'/':''|replace:'www.':''}</span>
                        <span class="glyphicon glyphicon-new-window-alt"></span>
                     </a>
                  </li>
               {/if}
               <li>
                  <a href="https://napoveda.wpjshop.cz/" class="help-link" data-beacon>
                     <span class="bi bi-question-circle m-r-1"></span>
                     <span>Nápověda</span>
                  </a>
               </li>
               <li class="dropdown" id="quick-access">
                  <a href="#" data-toggle="dropdown"><i class="glyphicon glyphicon-heart-empty"></i></a>
                  <ul class="dropdown-menu" id="search">
                     <li class="container-fluid">
                        <div class="row">

                           <div class="col-md-12">
                              <form data-search="product">
                                 <input type="submit" name="default" class="hidden">
                                 <div class="form-search search-only">
                                    <i class="search-icon glyphicon glyphicon-search"></i>
                                    <input type="text" class="form-control search-query" name="search-product" id="search-product"
                                           style="width: 100%;" placeholder="Najít produkt">

                                    <script>
                                       $('#search-product').adminAutoComplete({
                                          select: function(e, data) {
                                             var item = data.data.items[data.item.data('autocomplete-item')];
                                             nw('product', item.id, '&quick-access=1');
                                             setTimeout(cleanup, 1);
                                             return false;
                                          },
                                       });
                                    </script>
                                 </div>
                              </form>
                           </div>
                           <div class="col-md-12">
                              <form data-search="order">
                                 <input type="submit" name="default" class="hidden">
                                 <div class="form-search search-only">
                                    <i class="search-icon glyphicon glyphicon-search"></i>
                                    <input type="text" class="form-control search-query" name="search-order" id="search-order"
                                           style="width: 100%;" placeholder="Najít objednávku">

                                    <script>
                                       $('#search-order').adminOrderAutoComplete({
                                          select: function(e, data) {
                                             var item = data.data.items[data.item.data('autocomplete-item')];
                                             nw('order', item.id, '&quick-access=1');
                                             setTimeout(cleanup, 1);
                                             return false;
                                          },
                                       });
                                    </script>
                                 </div>
                              </form>
                           </div>
                          <div class="col-md-12">
                              <form data-search="user">
                                 <input type="submit" name="default" class="hidden">
                                 <div class="form-search search-only">
                                    <i class="search-icon glyphicon glyphicon-search"></i>
                                    <input type="text" class="form-control search-query" name="search-user" id="search-user"
                                           style="width: 100%;" placeholder="Najít uživatele">

                                    <script>
                                       $('#search-user').userAutocomplete({
                                             onSelect: (e, $item, items) => {
                                             const selectedObj = items[parseInt($item.data('autocomplete-item'))]
                                             nw('user', selectedObj.id, '&quick-access=1');
                                             setTimeout(cleanup, 1);
                                             return false;
                                          }
                                       });
                                    </script>
                                 </div>
                              </form>
                           </div>
                           <div class="col-md-12">
                              <form data-search="reclamation">
                                 <input type="submit" name="default" class="hidden">
                                 <div class="form-search search-only">
                                    <i class="search-icon glyphicon glyphicon-search"></i>
                                    <input type="text" class="form-control search-query" name="search-reclamation" id="search-reclamation"
                                           style="width: 100%;" placeholder="Najít reklamaci">
                                    <script>
                                       $('#search-reclamation').adminAutoComplete({
                                           type: 'Reclamations',
                                           {literal}
                                            subtemplates: {
                                             menuItem: '<div tabindex="-1" data-autocomplete-item="{{=index}}">' +
                                                '<p>Reklamace č. <strong>{{!item.code}}</strong><br><small>{{? item.invoice_firm}}{{!item.invoice_firm}}, {{?}}{{!item.customer_name}} </small></p>' +
                                                '{{#def.buttons}}' +
                                                '</div>' +
                                                '{{#def.bottom}}',
                                          },
                                            {/literal}
                                          select: function(e, data) {
                                             var item = data.data.items[data.item.data('autocomplete-item')];
                                             nw('Reclamations', item.id, '&quick-access=1');
                                             setTimeout(cleanup, 1);
                                             return false;
                                          },
                                       });
                                    </script>
                                 </div>
                              </form>
                           </div>
                           <div class="col-md-12">
                              <form data-search="return">
                                 <input type="submit" name="default" class="hidden">
                                 <div class="form-search search-only">
                                    <i class="search-icon glyphicon glyphicon-search"></i>
                                    <input type="text" class="form-control search-query" name="search-return" id="search-return"
                                           style="width: 100%;" placeholder="Najít vratku">

                                    <script>
                                       $('#search-return').adminAutoComplete({
                                           type: 'returns',
                                           {literal}
                                            subtemplates: {
                                             menuItem: '<div tabindex="-1" data-autocomplete-item="{{=index}}">' +
                                                '<p>Vratka č. <strong>{{!item.code}}</strong><br><small>{{? item.customer_name}}{{!item.customer_name}}, {{?}}{{!item.customer_name}} </small></p>' +
                                                '{{#def.buttons}}' +
                                                '</div>' +
                                                '{{#def.bottom}}',
                                          },
                                            {/literal}
                                          select: function(e, data) {
                                             var item = data.data.items[data.item.data('autocomplete-item')];
                                             nw('Returns', item.id, '&quick-access=1');
                                             setTimeout(cleanup, 1);
                                             return false;
                                          },
                                       });
                                    </script>
                                 </div>
                              </form>
                           </div>


                           <div id="favourites-filters" class="col-md-12 quick-access-filters">
                              {foreach $body.filters.storage as $filter}
                                 <a href="javascript:nf('launch.php?s=menu.php&type={$filter.type}','launch.php?s=list.php&type={$filter.type}&filter={$filter.id}')"
                                    class="btn btn-sm"
                                    style="background-color: {$filter.color};border-color: {$filter.color}"
                                    title="{$filter.description}">{$filter.name}
                                 </a>
                              {/foreach}
                           </div>
                        </div>
                     </li>
                  </ul>
               </li>
            </ul>
         </div>
      </nav>

      <!-- OBSAH HLAVNIHO OKNA -->
      <div id="main_content">
         <div id="left_content" style="display:none">
            <iframe name="leftFrame" src="{if $body.left !== 'blank'}{$body.left}{/if}"></iframe>
            <a class="btn side-hide" id="left-content-hider"><span class="glyphicon glyphicon-chevron-left"></span></a>
         </div>
         <div id="right_content">
            <iframe name="mainFrame" src="{$body.right}"></iframe>
         </div>
      </div>

   </div>

   <script type="text/javascript">
      // History Management
      History.init();

      var hash = History.getHash();
      if (hash && hash.substr(0, 10) == 'launch.php')
         document.location.replace(hash);
      else
         History.replaceState({
            left: $('iframe[name=leftFrame]').attr('src'),
            right: $('iframe[name=mainFrame]').attr('src')
         }, "{$body.title}", null);

      History.Adapter.bind(window, 'statechange', function() { // Note: We are using statechange instead of popstate
         var state = History.getState(); // Note: We are using History.getState() instead of event.state
         History.log(state.data, state.title, state.url);
         nf(state.data.left, state.data.right);
      });

      //  Menu links
      $('.navbar-default').on('click', 'a[data-right]', function(e) {
         var $this = $(this);
         nf('launch.php?' + $this.data('left'), 'launch.php?' + $this.data('right'), undefined, $this.text());
         return false;
      });

      // Quick access
      function cleanup() {
         $('#search input[type=text]').val('');
      }

      function refreshFavouritesFilters() {
         $('#favourites-filters').load(window.location + ' #favourites-filters');
      }

      $('#quick-access').on('click', 'input[type=text]', function(e) {
         var $menuItem = $(e.delegateTarget);
         if (!$menuItem.is('.open'))
            $menuItem.find('a[data-toggle]').click();
         $(e.target).focus();
      });

      $('#quick-access [data-search]').on('keydown', 'input[type=text]', function(e) {
         if (e.key == "Enter") {
            var type = $(this.form).data("search") + "s";
            nf("launch.php?s=menu.php&type=" + type, "launch.php?s=list.php&type=" + type + "&idCode=" + encodeURIComponent($(this).val()));
            return false;
         }
      });

      function handleShortcut(e) {
         if (e.key == 'F1') {
            window.focus();
            $('#quick-access > a').click();
            return false;
         }

         if (e.key == 'F2') {
            window.focus();
            $('#search-product').click().focus();
            return false;
         }

         if (e.key == 'F3') {
            window.focus();
            $('#search-order').click().focus();
            return false;
         }
          if (e.key == 'F4') {
            window.focus();
            $('#search-user').click().focus();
            return false;
         }
          if (e.key == 'F6') {
            window.focus();
            $('#search-reclamation').click().focus();
            return false;
         }
         if (e.key == 'F7') {
            window.focus();
            $('#search-return').click().focus();
            return false;
         }

         return true;
      }

      var $body = $('body');
      $body.keydown(handleShortcut);

      {if isDevelopment()}
      // Loading indicator
      (function($) {
         var $mainIframe = $('iframe[name=mainFrame]');

         function load_start() {
            $body.addClass('loading');
         }

         function load_stop() {
            $body.removeClass('loading');

            this.contentWindow.onbeforeunload = load_start;
         }

         load_start();
         $mainIframe.on('load', load_stop);
      })($);
      {/if}
   </script>
   {literal}
      <script>!function(e, t, n) {
            function a() {
               var e = t.getElementsByTagName("script")[0], n = t.createElement("script");
               n.type = "text/javascript", n.async = !0, n.src = "https://beacon-v2.helpscout.net", e.parentNode.insertBefore(n, e)
            }

            if (e.Beacon = n = function(t, n, a) {
               e.Beacon.readyQueue.push({method: t, options: n, data: a})
            }, n.readyQueue = [], "complete" === t.readyState) return a();
            e.attachEvent ? e.attachEvent("onload", a) : e.addEventListener("load", a, !1)
         }(window, document, window.Beacon || function() {
         });
      </script>
      <script type="text/javascript">
         window.Beacon('init', 'e8d8d426-0404-43e8-b43c-bd14c673ba3a');
         window.Beacon('identify', {/literal}{helpscout_beacon_identity}{literal});
      </script>
      <script>
         $('[data-beacon]').on('click', function() {
            Beacon('open');
            return false;
         });
      </script>
   {/literal}
{/block}

<script type="text/javascript">
   {block onready append}

   //prejmenovani hlavniho okna
   this.window.name = 'EshopMainFrame';

   function showLeftPane(show) {
      $('#left_content').toggle(show);
   }

   this.window.leftFrame = $('iframe[name=leftFrame]')[0].contentWindow;

   if (localStorage.getItem('IsLeftContentCollapsed') == 'yes') {
      $('#left_content').toggleClass('collapsed');
      $('#left-content-hider').toggleClass('collapsed');
   }
   $('#left-content-hider').click(function() {
      $('#left_content').toggleClass('collapsed');
      $(this).toggleClass('collapsed');
      localStorage.setItem('IsLeftContentCollapsed', $(this).is('.collapsed') ? 'yes' : 'no');
   });

   var bodyLeft = '{$body.left}';
   if (bodyLeft === 'blank' || !bodyLeft) {
      window.top.showLeftPane(false);
   }

   window.FavicoInit();

   {/block}
</script>