{extends "../window.tpl"}

{block css append}
   <style>
      .center-point-wrapper {
         position: relative;
         display: inline-block;
         cursor: crosshair;
         max-width: 400px;
      }

      .center-point {
         z-index: 100;
         position: absolute;
         width: 14px;
         height: 14px;
         border-radius: 15px;
         border: white 2px solid;
         background-color: rgba(0, 0, 0, 0.4);
         left: calc({$body.data.data.center_point.x|default:50}% - 7px);
         top: calc({$body.data.data.center_point.y|default:50}% - 7px);
      }
   </style>
{/block}

{block "js-onready" append}
   <script src="/admin/static/fineuploader/jquery.fine-uploader.min.js"></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>
            <div>
               <span></span>Přesuňte soubory sem
            </div>
         </div>
         <div class="qq-upload-button-selector">
            <p>
               <strong>Nahrát obrázek</strong>
               podporované formáty jsou .jpg, .jpeg a .png
            </p>
         </div>
         <span class="qq-drop-processing-selector qq-drop-processing">
         <span>Zpracovávám soubory...</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>
               <div class="qq-thumb-img">
                  <img class="qq-thumbnail-selector" qq-max-size="100" qq-server-scale>
               </div>
               <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="#">Zrušit</a>
               <a class="qq-upload-retry-selector qq-upload-retry" href="#">Opakovat</a>
               <a class="qq-upload-delete-selector qq-upload-delete" href="#">Smazat</a>
               <span class="qq-upload-status-text-selector qq-upload-status-text"></span>
            </li>
         </ul>
      </div>
   </script>
{/block}

{block tabs}
   {windowTab id='flapPhoto'}
   {windowTab id='flapResponsive'}
   {if $body.acn=="edit"}
      {windowTab id='2' label="Zařazení"}
   {/if}
{/block}

{block tabsContent}
   <div id="flapPhoto" class="tab-pane fade active in boxStatic box">
      <h1 class="h4 main-panel-title">{'sectionPhotoData'|translate}</h1>
      <div class="form-group">
         <div class="col-md-2 control-label"><label>{'description'|translate}</label>{insert_llm_button type='image_description' target="data[descr]"}</div>
         <div class="col-md-10">
            <input name="data[descr]" class="form-control input-sm" value="{$body.data.descr}">
         </div>
      </div>
      {if $body.acn=="add"}
         <h1 class="h4 main-panel-title">{'sectionNewPhoto'|translate}</h1>
         <div class="form-group">
            <div class="col-md-2 control-label">
               <label>{'photoInput'|translate:"producers"}</label>
            </div>
            <div class="col-md-4">
               <input type="file" class="filestyle" name="picture" data-iconName="glyphicon-folder-open" data-buttonText="Nahrát obrázek">
            </div>
            <div class="col-md-2">
               <input type="submit" class="btn btn-block btn-primary btn-sm" value="{'submitNewPhoto'|translate:"producers"}" name="Submit">
            </div>
         </div>
      {else}
         <div class="form-group">
            <div class="col-md-2 control-label"><label>{'dateAdded'|translate}</label></div>
            <div class="col-md-3">
               <input type="text" class="form-control input-sm" name="data[date]" id="date_reg" value="{$body.data.date}"
                      readonly="readonly">
            </div>
            <div class="col-md-2 col-md-offset-1 control-label"><label>{'dateUpdated'|translate}</label></div>
            <div class="col-md-3">
               <input type="text" class="form-control input-sm" name="data[date_update]" id="date_reg" value="{$body.data.date_update}"
                      readonly="readonly">
            </div>
         </div>
         <div class="form-group">
            <div class="col-md-2 control-label">
               <label>{'changePhoto'|translate}</label>
            </div>
            <div class="col-md-4">
               <input type="file" class="filestyle" name="picture" data-iconName="glyphicon-folder-open" data-buttonText="Nahrát obrázek">
            </div>
            <div class="col-md-3">
               <input type="submit" class="btn btn-block btn-primary btn-sm" value="{'submitNewPhoto'|translate:"producers"}" name="Submit">
            </div>
         </div>
         <div class="form-group">
            <div class="col-md-2 control-label">
               <label>{'bigPhoto'|translate}</label>
            </div>
            <div class="col-md-4">
                {if $body.data.id_video}
                   <div><a href="launch.php?s=photos.php&acn=refreshVideoThumbnail&ID={$body.data.id}"><span
                            class="glyphicon glyphicon-film"></span></a></div>
                {/if}
               <div class="center-point-wrapper">
               <div class="center-point"></div>
               <img src="{get_photo photo=$body.data.photo size='product_large'}" alt="{$body.data.name}" class="img-rounded img-responsive center-point-img">
               </div>
               <input type="number" name="data[data][center_point][x]" hidden="">
               <input type="number" name="data[data][center_point][y]" hidden="">
            </div>
            <div class="col-md-3">
               <a href="/{$cfg.Path.photos}{$body.data.source}{$body.data.image_2}?{$body.data.date_update|date_format:"%s"}"
                  class="btn btn-sm btn-block">{'originalPhoto'|translate}</a>
            </div>
            <div class="col-md-2">
               <a href="javascript:nw('imageEditor', '{$smarty.get.ID}', 'language=admin&refresh=true');" class="btn btn-sm"><span
                          class="fc icons_paintbrush m-r-1"></span> Upravit</a>
            </div>
         </div>
      {/if}
   </div>
   <div id="flapResponsive" class="tab-pane fade active in boxStatic box">
      <h1 class="h4 main-panel-title">{'responsiveTablet'|translate}</h1>
      <div class="form-group row-flex">
         {if $body.data.image_tablet}
            <div class="col-md-2">
               <a href="{get_photo photo=$body.data.photo version='tablet' size=0}" data-rel="bigphoto">
                  <img src="{get_photo photo=$body.data.photo version='tablet' size=4}" alt="{$body.data.name}" class="img-rounded">
               </a>
            </div>
            <div class="col-md-4">
               <a href="/{$cfg.Path.photos}{$body.data.source}{$body.data.image_tablet}?{$body.data.date_update|date_format:"%s"}"
                  class="btn btn-sm m-r-2">{'originalPhoto'|translate}</a>
               <a href="javascript:nw('imageEditor', '{$smarty.get.ID}', 'version=tablet&refresh=true');" class="btn btn-sm"><span
                          class="fc icons_paintbrush m-r-1"></span> Upravit</a>
            </div>
         {/if}
         <label class="col-md-2 control-label">{'changePhoto'|translate}</label>
         <div class="col-md-3">
            <input type="file" class="filestyle" name="pictureTablet" data-iconName="glyphicon-folder-open"
                   data-buttonText="Nahrát obrázek">
         </div>
         {if $body.data.image_tablet}
            <div class="col-md-1">
               <a href="launch.php?s=photos.php&acn=deleteVersion&version=tablet&ID={$body.data.id}" class="btn btn-danger btn-sm">
                  <span class="glyphicon glyphicon-trash" title="Smazat"></span>
               </a>
            </div>
         {/if}
      </div>

      <h1 class="h4 main-panel-title">{'responsiveMobile'|translate}</h1>
      <div class="form-group row-flex">
         {if $body.data.image_mobile}
            <div class="col-md-2">
               <a href="{get_photo photo=$body.data.photo version='mobile' size=0}" data-rel="bigphoto">
                  <img src="{get_photo photo=$body.data.photo version='mobile' size=4}" alt="{$body.data.name}"
                       class="img-rounded img-responsive">
               </a>
            </div>
            <div class="col-md-4">
               <a href="/{$cfg.Path.photos}{$body.data.source}{$body.data.image_mobile}?{$body.data.date_update|date_format:"%s"}"
                  class="btn btn-sm m-r-2">{'originalPhoto'|translate}</a>
               <a href="javascript:nw('imageEditor', '{$smarty.get.ID}', 'version=mobile&refresh=true');" class="btn btn-sm"><span
                          class="fc icons_paintbrush m-r-1"></span> Upravit</a>
            </div>
         {/if}
         <label class="col-md-2 control-label">{'changePhoto'|translate}</label>
         <div class="col-md-3">
            <input type="file" class="filestyle" name="pictureMobile" data-iconName="glyphicon-folder-open"
                   data-buttonText="Nahrát obrázek">
         </div>
         {if $body.data.image_mobile}
            <div class="col-md-1">
               <a href="launch.php?s=photos.php&acn=deleteVersion&version=mobile&ID={$body.data.id}" class="btn btn-danger btn-sm">
                  <span class="glyphicon glyphicon-trash" title="Smazat"></span>
               </a>
            </div>
         {/if}
      </div>
   </div>
   {if $body.acn=="edit"}
      <div id="2" class="tab-pane fade active in boxStatic box">
         {ifmodule PRODUCTS}
            <h1 class="h4 main-panel-title">{'productTitle'|translate}</h1>
            {foreach $body.photos_products as $prod}
               <div class="row">
                  <div class="col-md-8"><a href="javascript:nw('product', '{$prod.id}');">{$prod.title}</a></div>
                  <div class="col-md-2">
                     <a class="btn btn-danger confirm btn-sm" title="Smazat"
                        href="launch.php?s=photos.php&amp;acn=deletePhotoRelation&amp;relationType=products&amp;ID={$body.data.id}&amp;IDpr={$prod.id}">
                        <span class="glyphicon glyphicon-remove"></span>
                     </a>
                  </div>
               </div>
            {/foreach}
            {foreach $body.photos_products_blocks as $prod}
               <div class="row">
                  <div class="col-md-8"><a href="javascript:nw('product', '{$prod.id}');">{$prod.title}</a></div>
                  <div class="col-md-2">
                     <a class="btn btn-danger confirm btn-sm" title="Smazat"
                        href="launch.php?s=photos.php&amp;acn=deletePhotoRelation&amp;relationType=products&amp;ID={$body.data.id}&amp;IDpr={$prod.id}">
                        <span class="glyphicon glyphicon-remove"></span>
                     </a>
                  </div>
               </div>
            {/foreach}
            {if !$body.photos_products}
               <p>{'usageNowhereProduct'|translate}</p>
            {/if}
            {/ifmodule}

            {ifmodule ARTICLES}
               <h1 class="h4 main-panel-title">{'articleTitle'|translate}</h1>
               {foreach $body.photos_articles as $art}
                  <div class="form-group">
                     <div class="col-md-8"><a href="javascript:nw('article', '{$art.id}');">{$art.title}</a></div>
                     <div class="col-md-2">
                        <a class="btn btn-danger confirm btn-sm" title="Smazat"
                           href="launch.php?s=photos.php&amp;acn=deletePhotoRelation&&amp;relationType=articles&amp;ID={$body.data.id}&amp;IDpr={$art.id}">
                           <span class="glyphicon glyphicon-remove"></span>
                        </a>
                     </div>
                  </div>
               {/foreach}
               {if !$body.photos_articles}
                  <p>{'usageNowhereArticle'|translate}</p>
               {/if}
            {/ifmodule}

            {ifmodule PAGES}
               <h1 class="h4 main-panel-title">{'pageTitle'|translate}</h1>
               {foreach $body.photos_pages as $page}
                  <div class="form-group">
                     <div class="col-md-8"><a href="javascript:nw('page', '{$page.id}');">{$page.name}</a></div>
                     <div class="col-md-2">
                        <a class="btn btn-danger confirm btn-sm" title="Smazat"
                           href="launch.php?s=photos.php&amp;acn=deletePhotoRelation&amp;relationType=pages&amp;ID={$body.data.id}&amp;IDpr={$page.id}">
                           <span class="glyphicon glyphicon-remove"></span>
                        </a>
                     </div>
                  </div>
               {/foreach}
               {if !$body.photos_pages}
                  <p>{'usageNowherePage'|translate}</p>
               {/if}
            {/ifmodule}
            {ifmodule PRODUCERS}
               <h1 class="h4 main-panel-title">{'producers'|translate}</h1>
               {foreach $body.photos_producers as $producers}
                  <div class="form-group">
                     <div class="col-md-8"><a href="javascript:nw('producers', '{$producers.id}');">{$producers.name}</a></div>
                     <div class="col-md-2">
                        <a class="btn btn-danger confirm btn-sm" title="Smazat"
                           href="launch.php?s=photos.php&amp;acn=deletePhotoRelation&&amp;relationType=producers&amp;ID={$body.data.id}&amp;IDpr={$producers.id}">
                           <span class="glyphicon glyphicon-remove"></span>
                        </a>
                     </div>
                  </div>
               {/foreach}
               {if !$body.photos_producers}
                  <p>{'usageNowhereProducer'|translate}</p>
               {/if}
            {/ifmodule}
          {ifmodule SLIDERS}
                 <h1 class="h4 main-panel-title">{'sliders'|translate}</h1>
                 {foreach $body.photos_sliders as $sliders}
                     <div class="form-group">
                        <div class="col-md-8"><a href="javascript:nw('sliders', '{$sliders.id_slider}');">{$sliders.name}</a></div>
                        <div class="col-md-2">
                           <a class="btn btn-danger confirm btn-sm" title="Smazat"
                           href="launch.php?s=photos.php&amp;acn=deletePhotoRelation&&amp;relationType=sliders&amp;ID={$body.data.id}&amp;IDpr={$sliders.id}">
                              <span class="glyphicon glyphicon-remove"></span>
                           </a>
                        </div>
                     </div>
               {/foreach}
               {if !$body.photos_sliders}
                   <p>{'usageNowhereSlider'|translate}</p>
             {/if}
          {/ifmodule}

            {ifmodule PRODUCTS_SECTIONS}
                 <h1 class="h4 main-panel-title">{'sections'|translate}</h1>
                 {foreach $body.photos_sections as $sections}
                     <div class="form-group">
                        <div class="col-md-8"><a href="javascript:nw('sections', '{$sections.id_section}');">{$sections.name}</a></div>

                        <div class="col-md-2">
                           <a class="btn btn-danger confirm btn-sm" title="Smazat"
                           href="launch.php?s=photos.php&amp;acn=deletePhotoRelation&&amp;relationType=sections&amp;ID={$body.data.id}&amp;IDpr={$sections.id}">
                              <span class="glyphicon glyphicon-remove"></span>
                           </a>
                        </div>
                     </div>
               {/foreach}
               {if !$body.photos_sections}
                   <p>{'usageNowhereSection'|translate}</p>
             {/if}
          {/ifmodule}
      </div>
      {/if}
   <script>

      $('.center-point-img').on('click', (event) => {
         const position = event.target.getBoundingClientRect();
         const rx = Math.round(100 * (event.clientX - position.left) / position.width);
         const ry = Math.round(100 * (event.clientY - position.top) / position.height);
         $('.center-point').css("left", "calc(" + rx + "% - 7px)").css("top", "calc(" + ry + "% - 7px)");

         $("[name='data[data][center_point][x]']").val(rx);
         $("[name='data[data][center_point][y]']").val(ry);
      });

   </script>

{/block}