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

{block tabs}
    {windowTab id='flapMain'}

    {if $body.data.id}
        {windowTab id='flapPreordersCreated'}
        {windowTab id='flapProducts'}
    {/if}
{/block}

{block tabsContent}
   <div id="flapMain" class="tab-pane fade active in boxStatic box">
      <div class="row wpj-form-group-flex">
         <div class="col-xs-1">
            <div class="wpj-form-group">
               <label for="id_preorder_date">Číslo</label>
               <input id="id_preorder_date" disabled value="{$body.data.id}" class="form-control text-center" style="max-width: 3em;">
            </div>
         </div>
         <div class="col-sm-5"></div>

         <div class="col-xs-4">
            <div class="wpj-form-group">
               <label>
                  <a href="javascript:void showPreorder();">{'preorder'|translate}</a>
               </label>

               <script>
                  function showPreorder() {
                     var preorderId = $('select[name="data[id_preorder]"] option:selected').attr('value');
                     nw('preorders', preorderId);
                  }
               </script>

               <select
                  name="data[id_preorder]"
                  class="selecter"
                  data-preload="preorders"
                  data-autocomplete="preorders"
                  data-autocomplete-params="entity_type=preorders"
               >
                  {if $body.data.id_preorder}
                     <option selected value="{$body.data.id_preorder}">{$body.data.id_preorder}</option>
                  {/if}
               </select>
            </div>
         </div>
         <div class="col-xs-2">
            <div class="wpj-form-group">
               <a href="javascript:nw('preorders');" class="btn btn-block btn-success"><span class="bi bi-plus-lg m-r-1"></span>{'preorderCreateBtn'|translate}</a>
            </div>
         </div>
      </div>

      <div class="row">
         <div class="col-xs-6">
            <div class="wpj-form-group">
               <label>
                  {'dateStart'|translate}
                  <a class="help-tip"
                     data-toggle="tooltip"
                     title="{'dateStartTooltip'|translate}"
                  >
                     <i class="bi bi-question-circle"></i>
                  </a>
               </label>
               <div class="input-group">
                  <input type="text" name="data[date_start]" id="date_start" class="form-control input-sm"
                         value="{$body.data.date_start|format_date:'d.m.Y'}">
                   {insert_calendar selector='#date_start' format='date'}
                  <label for="date_start" class="input-group-addon">
                     <span class="bi bi-calendar-week"></span>
                  </label>
               </div>
            </div>
         </div>

         <div class="col-xs-6">
            <div class="wpj-form-group">
               <label>
                  {'dateEnd'|translate}
                  <a class="help-tip"
                     data-toggle="tooltip"
                     title="{'dateEndTooltip'|translate}"
                  >
                     <i class="bi bi-question-circle"></i>
                  </a>
               </label>
               <div class="input-group">
                  <input type="text" name="data[date_end]" id="date_end" class="form-control input-sm"
                         value="{$body.data.date_end|format_date:'d.m.Y'}">
                   {insert_calendar selector='#date_end' format='date'}
                  <label for="date_end" class="input-group-addon">
                     <span class="bi bi-calendar-week"></span>
                  </label>
               </div>
            </div>
         </div>
      </div>

      <div class="row">
         <div class="col-xs-6">
            <div class="wpj-form-group">
               <label>
                  {'dateShipment'|translate}
                  <a class="help-tip"
                     data-toggle="tooltip"
                     title="{'dateShipmentTooltip'|translate}"
                  >
                     <i class="bi bi-question-circle"></i>
                  </a>
               </label>
                  <input type="text" name="data[date_shipment]" id="date_shipment" class="form-control input-sm"
                         value="{$body.data.date_shipment}">
            </div>
         </div>
      </div>

      <div class="row">
         <div class="col-xs-6">
            <div class="wpj-form-group">
               <label for="description">{'description'|translate}</label>
               <textarea
                  id="description"
                  name="data[description]"
                  rows="3"
                  class="form-control input-sm"
               >{$body.data.description}</textarea>
            </div>
         </div>
      </div>

   </div>
   <div id="flapPreordersCreated" class="tab-pane fade active in boxStatic box">
      <iframe data-src="launch.php?s=list.php&type=preordersUsers&id_preorder_date[]={$body.data.id}" height="520" class="on-demand"></iframe>
   </div>
   <div id="flapProducts" class="tab-pane fade active in boxStatic box">
      <iframe data-src="launch.php?s=list.php&type=preordersItems&id_preorder_date[]={$body.data.id}" height="520" class="on-demand"></iframe>
   </div>

    <script type="text/javascript">
       $(function () {
          $('[data-shipment-clear]').on('click', function () {
             var selector = $(this).data('shipment-clear');
             $(selector).val('');
          });
       });
    </script>
{/block}
