<h1 class="h4 main-panel-title">Vytvoření nové objednávky</h1>
<p class="m-b-3">Zvolte si, zda chcete vytvořit objednávku pro již registrovaného zákazníka, pro neregistrovaného zákazníka,
   nebo rychlou maloobchodní objednávku bez nutnosti vyplnění uživatelských údajů.</p>

{ifmodule INVOICES}
<div>
   <div class="form-group form-group-flex m-b-0">
      <label class="col-md-2 control-label">Vybrat fakturační řadu</label>
      <div class="col-md-6 bottom-space">
         <select name="data[id_invoice]" class="selecter" data-autocomplete="invoice" data-autocomplete-empty="1"></select>
      </div>
   </div>
   <input id="tab_selected[registered]" type="radio" name="data[tab_selected]" value="registered" checked style="display: none;">
</div>
{/ifmodule}
<ul class="nav nav-tabs" role="tablist">
   <li class="active"><a href="#registered" role="tab" data-toggle="tab">{'inputChoiceRegistered'|translate}</a></li>
   <li><a href="#manual" role="tab" data-toggle="tab">{'inputChoiceManual'|translate}</a></li>
   <li><a href="#retail" role="tab" data-toggle="tab">{'retailSale'|translate}</a></li>
</ul>

<div class="tab-content" data-user-tabs>
   <div role="tabpanel" class="tab-pane active" id="registered">
      <div class="form-group form-group-flex m-b-0">
         <label class="col-md-2 control-label">Vyhledat zákazníka</label>
         <div class="col-md-6 bottom-space">
            <input class="form-control" type="hidden" name="data[id_user]" value="{$body.data.id_user}">
            <input class="form-control" id="user-id-input" autocomplete="off" data-preload="users" value="{$body.data.id_user}">
         </div>
      </div>
      <input id="tab_selected[registered]" type="radio" name="data[tab_selected]" value="registered" checked style="display: none;">
   </div>
   <div role="tabpanel" class="tab-pane" id="manual">
      {include 'window/orders.user.details.tpl'}
      <input id="tab_selected[manual]" type="radio" name="data[tab_selected]" value="manual" style="display: none;">
   </div>
   <div role="tabpanel" class="tab-pane" id="retail">
      <div class="row m-x-0">
         <div class="col-xs-12 bottom-space">Rychlé vytvoření objednávky se jménem „Maloobchodní prodej“</div>
      </div>
      <input id="tab_selected[retail]" type="radio" name="data[tab_selected]" value="retail" style="display: none;">
   </div>
</div>

<script>
   const $tabs = $('[data-user-tabs]')

   $('#user-id-input').userAutocomplete({
      onSelect: (e, $item, items) => {
         const selectedObj = items[parseInt($item.data('autocomplete-item'))]
         $('input[name="data[id_user]"]').val(selectedObj.id)
      }
   })


   $('a[data-toggle="tab"]').on('shown.bs.tab', function() {
      $tabs.find('.tab-pane.active [name="data[tab_selected]"]').prop('checked', true)
   })
</script>
