{extends "windowFrame.tpl"}

{block body_class}class="panel_frame"{/block}

{block css append}
   <link href="./static/fancybox2/jquery.fancybox.css" rel="stylesheet" media="screen">
   {*<link href="static/fineuploader/fine-uploader.css" rel="stylesheet">*}
{/block}

{block js}
   {$smarty.block.parent}
   <script src="./static/fancybox2/jquery.fancybox.pack.js"></script>
   <script src="static/fineuploader/jquery.fine-uploader.min.js"></script>
   <script>
      // Keep in sync with engine/admin/templates/list/photos.tpl !!
      $(document).ready(function() {
         var extensions = ['jpeg', 'jpg', 'gif', 'png', 'svg', 'webp', 'avif', 'gif'];
         {ifModule VIDEOS}
            extensions.push('mp4', 'mkv', 'm4a', 'm4v', 'mov');
         {/ifModule}

         $('#thumbnail-fine-uploader').fineUploader({
            template: 'qq-simple-thumbnails-template',
            thumbnails: {
               placeholders: {
                  waitingPath: 'static/fineuploader/placeholders/waiting-generic.png',
                  notAvailablePath: 'static/fineuploader/placeholders/not_available-generic.png',
               },
            },
            request: {
               endpoint: '{$ctrl.currUrl.Rel nofilter}',
            },
            blobProperties: {
               name: 'filename',
            },
            validation: {
               allowedExtensions: extensions,
            },
            maxConnections: 1,
         }).on('allComplete', function(event, success, failed) {
            $('[data-type="save"]').trigger('click');
         });
      });
   </script>
   <script type="text/template" id="qq-simple-thumbnails-template">
      <div class="qq-uploader-selector qq-uploader">
         <div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
            <span>{'move'|translate:'photos'}</span>
         </div>
         <div class="qq-upload-button-selector button inputFullWidth">
            <a class="btn btn-success btn-block"><span class="glyphicon glyphicon-plus"></span>&nbsp;&nbsp;{'upload'|translate:'photos'}</a>
         </div>
         <span class="qq-drop-processing-selector qq-drop-processing">
      <span>{'working'|translate:'photos'}</span>
      <span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
    </span>
         <ul class="qq-upload-list-selector qq-upload-list">
            <li>
               <div class="qq-progress-bar-container-selector">
                  <div class="qq-progress-bar-selector qq-progress-bar"></div>
               </div>
               <span class="qq-upload-spinner-selector qq-upload-spinner"></span>
               <img class="qq-thumbnail-selector" qq-max-size="100" qq-server-scale>
               <span class="qq-edit-filename-icon-selector qq-edit-filename-icon"></span>
               <span class="qq-upload-file-selector qq-upload-file"></span>
               <input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
               <span class="qq-upload-size-selector qq-upload-size"></span>
               <a class="qq-upload-cancel-selector qq-upload-cancel" href="#">{'cancel'|translate:'photos'}</a>
               <a class="qq-upload-retry-selector qq-upload-retry" href="#">{'repeat'|translate:'photos'}</a>
               <a class="qq-upload-delete-selector qq-upload-delete" href="#">{'delete'|translate:'photos'}</a>
               <span class="qq-upload-status-text-selector qq-upload-status-text"></span>
            </li>
         </ul>
      </div>
   </script>
{/block}

{block content}


<div class="container-fluid">

   {if $body.photos == 0}
      <div class="row">
         <div class="alert alert-info alert-dismissable">{'noPhotos'|translate:"products"}</div>
      </div>
   {/if}

   {block top_buttons}
      <div class="row bottom-space">
         <div class="col-md-4">
            <div id="thumbnail-fine-uploader" class="admin-photos"></div>
         </div>
         <div class="col-md-4">
            <input type="button" class="btn btn-block" value="{'titleAddExisting'|translate:'photos'}" onclick="searchWnd('photo', onImageSelected,'','multiSelect=1');display('divPhotosInsert');">
         </div>
         <div class="col-md-4">
            <input type="button" class="btn btn-block" value="{'copyImg'|translate:'photos'} {$body.copy_from}" onclick="display('divPhotosCopy');"> {* todo trans *}
         </div>
      </div>
   {/block}

   <script type="application/javascript">
      function onImageSelected(id) {
         $('#photoID').val(id).closest('form').submit();
      }

      function onSelected(id) {
         $('#{$body.tablefield}2').val(id).closest('form').submit();
      }
   </script>

   <div id="divPhotosCopy" style="display:none" class="well">
      <div class="row">
         <form name="copy" method="post" action="launch.php?s={$body.s}&amp;ID={$body.ID}&amp;acn=copyPhotos" class="form-horizontal">
            <div class="col-md-3 control-label"><label>{'copyImg'|translate:'photos'} {$body.copy_from}</label></div>
            <div class="col-md-4">
               <div class="input-group">
                  <input type="text" class="form-control input-sm" name="data[{$body.tablefield}]" id="{$body.tablefield}2">
                  <script type="text/javascript">
                     new $.wpjAutoComplete({
                        input: $.dataField('{$body.tablefield}'),
                        type: '{if $body.search_field == 'section'}categories{else}{$body.search_field}{/if}',
                     });
                  </script>
                  <div class="input-group-btn">
                  {* Sekce nemaji list z ktereho by slo selectovat *}
                  {if $body.search_field != 'section'}
                     <a href="javascript:searchWnd('{lcfirst($body.photo_nametype)}', onSelected)"
                        class="btn btn-sm">{"find{$body.photo_nametype}"|translate:"{lcfirst($body.photo_nametype)}s"}</a>
                     {/if}
                  </div>
               </div>
            </div>
            <div class="col-md-2">
               <input type="submit" name="submitCopy" class="btn btn-primary btn-block btn-sm" value="{'copy'|translate:'photos'}">
            </div>
         </form>
      </div>
   </div>

   <div id="divPhotosInsert" style="display:none" class="well">
      <div class="row">
         <form name="insert" method="post" action="launch.php?s={$body.s}&amp;ID={$body.ID}&amp;acn=insertPhoto" class="form-horizontal">
            <div class="col-md-3 control-label"><label>{'addId'|translate:'photos'}</label></div>
            <div class="col-md-3">
               <div class="input-group">
                  <input type="text" class="form-control input-sm" name="data[id_photo]" id="photoID" onchange="">
                  <div class="input-group-btn">
                     <a  href="javascript:searchWnd('photo', onImageSelected,'','multiSelect=1')" class="btn btn-sm">{'find'|translate:'photos'}</a>
                  </div>
               </div>
            </div>
            <div class="col-md-2">
               <input type="submit" name="submitInsert" class="btn btn-primary btn-block btn-sm" value="{'add'|translate:'photos'}">
            </div>
         </form>
      </div>
   </div>

   <h1 class="h4 main-panel-title">{'sectionPhotos'|translate:'products'} </h1>
   <form name="editform" action="launch.php?s={$smarty.get.s}&acn=edit&ID={$body.ID}" method="POST" class="form-horizontal" id="main">
      <div id="photo" class="panel-group panel-group-lists ui-sortable">
         <input type="hidden" id="{$body.tablefield}" name="ID" value="{$body.ID}">
         {foreach $body.photos as $photo}
            <div class="panel" data-form-item>
               <div class="row m-x-0 bottom-space">
                  <div class="col-md-2">
                     <div class="row">
                        <div class="col-md-5 text-center">
                           <input type="hidden" data-sort="{$photo.id}" name="data[{$photo.id}][position]" value="{$photo.position}">
                           <span class="drag-drop-mover pull-right" style="margin-top: 20px;">
                                        <i class="bi bi-arrows-move handle"></i>
                                   </span>
                        </div>
                        {block 'photo-row'}
                           <div class="col-md-7">
                              <a rel="bigphoto" href="{static_url url=$photo.img.src_big}">
                                 <div class="thumbnail" style="margin: 0"><img class="img-rounded" src="{static_url url=$photo.img.source}" alt="Obrázek"></div>
                              </a>
                           </div>
                        {/block}
                     </div>
                  </div>
                  <div class="col-md-{if $body.variations|count <= 1}10{else}6{/if}">
                     <div class="row">
                        {block 'info-row'}
                           <div class="col-md-6" style="padding-top: 7px;">
                              <div class="row">
                                 <div class="col-md-2">
                                    <div >
                                    <a href="javascript:nw('photos', '{$photo.id}');">
                                       <span class=" glyphicon glyphicon-cog"></span>
                                        {'settings'|translate:'photos'}
                                    </a>
                                       </div>
                                 </div>
                                 {if $photo.show_in_lead == "Y"}
                                    <div class="col-md-10">
                                       <span class="label label-primary">
                                           <span class="glyphicon glyphicon-picture" title="{'main'|translate:'photos'}"></span>
                                           </span>
                                    </div>
                                 {/if}

                              </div>
                           </div>
                           <div class="col-md-2">
                              <span class="help-block">{'added'|translate:'photos'}: {$photo.date|date_format:"%d. %m. %Y"}</span>
                           </div>
                           <div class="col-md-2">
                              <span class="pull-right">
                              {insert_llm_button type='image_description' target="data[{$photo.id}][descr]" entityType='photos' entityId=$photo.id}
                           </div>
                           <div class="col-md-2">
                              <span class="pull-right">
                                  <a class="btn-sm btn btn-danger" data-form-delete>
                                      <input class="hidden" type="checkbox" name="data[{$photo.id}][delete]">
                                      <span class="glyphicon glyphicon-remove"></span>
                                  </a>
                              </span>
                           </div>
                        {/block}
                     </div>
                     <div class="row">
                        <div class="col-md-12 control-label">
                           <input type="text" class="form-control input-sm" name="data[{$photo.id}][descr]" id="descr" value="{$photo.descr}"
                                  placeholder="{'description'|translate:'photos'}">
                        </div>
                     </div>

                     <div style="padding-top: 7px;">
                        <span class="help-block m-t-0">
                           <strong>ID:</strong> {$photo.IDph}
                        </span>
                     </div>
                     {block "photos-custom-row"}{/block}
                  </div>
                  {if $body.variations|count > 1}
                     <div class="col-md-4">
                        <input type="hidden" name="id_variation[{$photo.id}][]" value="-1">
                        {if {find_module name="products_variations_photos"}}
                           <select name="id_variation[{$photo.id}][]" multiple="multiple" class="selecter small">
                              {foreach $body.variations as $variation_id => $variation}
                                 <option value="{$variation_id}" {$variation_id|selected:$photo.varSel}>{$variation}</option>
                              {/foreach}
                           </select>
                        {/if}
                     </div>
                  {/if}
               </div>
            </div>
         {/foreach}
      </div>
      <div class="row bottom-space">
         <div class="col-md-4">
            <input type="submit" class="btn btn-primary btn-block" name="submit" data-type="save" value="{'save'|translate:'photos'}">
         </div>
      </div>

   </form>
   <script type="text/javascript">
      $('.ui-sortable').sortable({
         helper: function(e, row) {
            UnsavedOff();
            var $row = $(row);
            var $helper = $row.clone().addClass('drag-drop');
            return $helper[0];
         },
         stop: function(event, ui) {
            var $instead = $(ui.item).prev().find('input').val();
            if($instead == null){
               $instead = 0;
            } else{
               $instead++;
            }
            savePositions(ui.item, $instead);
            UnsavedOn();
         },
         handle: '.handle',
      });

      function savePositions(item, position) {
        var data = {
            {$body.tablefield} : $('#{$body.tablefield}').val(),
            id_photo : item.find('input').data('sort'),
            position : position,
        };
        $.get('launch.php?s={$smarty.get.s}&acn=movePhoto&ID={$body.ID}', { moved_item : data }, function(response, status) {
            if (status == "success"){
                $('.panel').remove();
                $(response).find('.panel').each(function() {
                    $('#photo').append($(this));
                });
               styleFormInputs($('#photo'), true);

               showInfoMessage('Uloženo', 'success');
            }

            if (status == 'error') {
               showInfoMessage('Chyba', 'danger');
            }
         });
      }
   </script>


   <script type="text/javascript">
      $('a[rel=bigphoto]').fancybox({
         openEffect: 'none',
         closeEffect: 'none',
      });

      initForm({
         selector: '#photo',
      });

   </script>
   {/block}