{extends file="[shared]/window.tpl"}

{block title}
   {'searchPhotos'|translate:'search_photos'}
{/block}

{block tabs}
   {windowTab id="all" label={'all'|translate:'search_photos'}}
   {windowTab id="products" label={'products'|translate:'search_photos'}}
   {windowTab id="pages" label={'pages'|translate:'search_photos'}}
   {windowTab id="articles" label={'articles'|translate:'search_photos'}}
   {windowTab id="producers" label={'producers'|translate:'search_photos'}}
   {ifmodule VIDEOS}
      {windowTab id="videos" label={'videos'|translate:'search_photos'}}
   {/ifmodule}
{/block}

{block tabsContent}
   <input data-photos-type type="hidden" name="photosType" value="all">

   <div style="margin-bottom: 25px">
      <div class="row">
         <div class="col-md-3">
            <label>{'filename'|translate:'search_photos'}</label>
         </div>
         <div class="col-md-3">
            <label>{'descr'|translate:'search_photos'}</label>
         </div>
         <div class="col-md-2"></div>
         <div class="col-md-4">
            <label>
               <span data-display-type="products">Obrázky použité u produktu</span>
               <span data-display-type="pages">Obrázky použité u stránky</span>
               <span data-display-type="articles">Obrázky použité u článku</span>
               <span data-display-type="producers">Obrázky použité u výrobce</span>
            </label>
         </div>
      </div>
      <div class="row">
         <div class="col-md-3">
            <input name="filename" type="text" class="form-control input-sm">
         </div>
         <div class="col-md-3">
            <input name="descr" type="text" class="form-control input-sm">
         </div>
         <div class="col-md-2">
            <button data-submit-search type="button" class="btn btn-sm btn-primary">Hledat</button>
         </div>
         <div class="col-md-4">
            <span data-display-type="products">
               <input data-object-search="products" type="text" autocomplete="off" class="form-control input-sm">
            </span>
            <span data-display-type="pages">
               <input data-object-search="pages" type="text" autocomplete="off" class="form-control input-sm">
            </span>
            <span data-display-type="articles">
               <input data-object-search="articles" type="text" autocomplete="off" class="form-control input-sm">
            </span>
            <span data-display-type="producers">
               <input data-object-search="producers" type="text" autocomplete="off" class="form-control input-sm">
            </span>
         </div>
      </div>
   </div>

   <div class="boxFlex box iframe-box">
      <iframe class="boxFlex" name="photosFrame" src="{$body.iframe_url nofilter}"></iframe>
   </div>
{/block}

{block windowButtons}{/block}

<script type="text/javascript">
{block onready append}
resizePopup(window, 1300, 1000);

function transferValues(val, data)
{
   if(val == null)
      return;

   var selector = "{$body.selector}",
      homeWin = window.opener;

   if(homeWin != null)
   {
      {if $body.function}
      var callback = homeWin.searchWndCallbacks[selector];
      if (callback)
      {
         if (data)
            data = JSON.parse(atob(data));

         callback(val, data);

         delete homeWin.searchWndCallbacks[selector];
      }
      {elseif $smarty.get.postMessage}
      homeWin.postMessage({ val, data, type: 'searchPhotos' }, '*');
      {else}
      var $input = homeWin.$(selector);
      $input.val(val);
      {/if}

      window.somethingChanged = false;
      homeWin.focus();
      this.window.close();
   }
}

var PhotosSearch = {
   iframeSrc: '{$body.iframe_url nofilter}',
   initializeTab: function () {
      $('[data-display-type]').hide();
      $('[data-display-type="' + this.getPhotosType() + '"]').show();

      this.resetSearchFields();
      this.updateIframe();
   },
   updateIframe: function (data = { }) {
      this.getIframe().attr('src', this.iframeSrc + '&photos_type=' + this.getPhotosType() + '&' + $.param(data));
   },
   getIframe: function () {
      return $('iframe[name="photosFrame"]');
   },
   getPhotosType: function () {
      return $('[data-photos-type]').val();
   },
   collectSearchData: function () {
      return {
         filename: $('input[name="filename"]').val(),
         descr: $('input[name="descr"]').val(),
      };
   },
   resetSearchFields: function () {
      $('input[name="filename"]').val('');
      $('input[name="descr"]').val('');
   }
};

{literal}
$('[data-object-search="products"]').adminAutoComplete({
   select: function(e, data) {
      var item = data.data.items[data.item.data('autocomplete-item')];
      PhotosSearch.updateIframe({
         id_object: item.id
      });
      return false;
   },
});

$('[data-object-search="pages"]').adminAutoComplete({
   type: 'page',
   subtemplates: {
      menuItem: '<div tabindex="-1" data-autocomplete-item="{{=index}}">' +
         '<p>{{=item.label}}</p>' +
         '</div>',
   },
   select: function(e, data) {
      var item = data.data.items[data.item.data('autocomplete-item')];
      PhotosSearch.updateIframe({
         id_object: item.value
      });
      return false;
   },
});

$('[data-object-search="articles"]').adminAutoComplete({
   type: 'article',
   subtemplates: {
      menuItem: '<div tabindex="-1" data-autocomplete-item="{{=index}}">' +
         '<p>{{=item.label}}</p>' +
         '</div>',
   },
   select: function(e, data) {
      var item = data.data.items[data.item.data('autocomplete-item')];
      PhotosSearch.updateIframe({
         id_object: item.value
      });
      return false;
   },
});

$('[data-object-search="producers"]').adminAutoComplete({
   type: 'producers',
   subtemplates: {
      menuItem: '<div tabindex="-1" data-autocomplete-item="{{=index}}">' +
         '<p>{{=item.text}}</p>' +
         '</div>',
   },
   select: function(e, data) {
      var item = data.data.items[data.item.data('autocomplete-item')];
      PhotosSearch.updateIframe({
         id_object: item.value
      });
      return false;
   },
});
{/literal}

PhotosSearch.initializeTab();

$('[data-tab]').on('click', function () {
   $('[data-photos-type]').val($(this).data('tab'));
   PhotosSearch.initializeTab();
});

$('[data-submit-search]').on('click', function () {
   PhotosSearch.updateIframe(
      PhotosSearch.collectSearchData()
   );
});

{/block}
</script>
