{* @compiler:inline-only *}
<form name="login" method="post" action="" data-form="user" class="form-user form-user-seller">
   {get_contexts country=1 assign='contexts'}

   {include "block.messages.tpl"}

   {get_sellers assign='sellers'}

   <div class="form-group required">
      <label for="seller">{t}Prodejna{/t}</label>
      <select name="seller" id="seller" class="custom-select form-control">
         {foreach $sellers as $seller}
            <option value="{$seller.id}" {if $body.sellerId == $seller.id}selected{/if}>{$seller.title}</option>
         {/foreach}
      </select>
   </div>

   <div class="form-group required">
      <label for="email">{t}E-mail{/t}</label>
      <input type="email" name="invoice[email]" id="email" class="form-control" value="{$body.invoice.email}"
             data-bv-notempty="true">
   </div>

   <div class="form-group">
      <label for="customer_card[type]">{t}Typ karty{/t}</label>
      <select name="customer_card[type]" class="custom-select form-control" id="customer_card[type]" data-customer-card="type">
         <option value="paper">{t}Papírová{/t}</option>
         <option value="electronic">{t}Elektronická{/t}</option>
      </select>
   </div>

   <div data-customer-card="inputs">
      <div class="form-group required seller-card-number" data-customer-card-input="paper">
         <label for="customer_card[number]" id="card-number">{t}Číslo karty{/t}</label>
         <span id="js-span"></span>
         <input type="number" pattern="99\d{ldelim}11{rdelim}"  oninvalid="return false;"
                data-bv-notempty="true" minlength="13" maxlength="13" name="customer_card[number]" id="customer_card[number]" class="form-control" value="{$body.card_number}">
      </div>

      <div class="form-group required" data-customer-card-input="electronic" style="display: none">
         <label for="customer_card[generate]">{t}Typ slevy pro kartu{/t}</label>
         <select name="customer_card[generate]" class="custom-select form-control" id="customer_card[generate]">
            <option value="992,991">{t}Zóna{/t}</option>
            <option value="999">{t}Lezec{/t}</option>
         </select>
      </div>
   </div>

   <div class="row">
      <div class="col-xxs-12 col-sm-12">
         <div class="form-group form-group-legend form-group-gender">
            <label for="gender">{t}Pohlaví{/t}</label>
            <select name="invoice[gender]" class="custom-select form-control" id="gender">
               <option selected disabled hidden>
                  {t}Neuvedeno{/t}
               </option>
               <option value="M" {if $body.invoice.gender == 'M'}selected{/if}>
                  {t}Muž{/t}
               </option>
               <option value="F" {if $body.invoice.gender == 'F'}selected{/if}>
                  {t}Žena{/t}
               </option>
               <option value="">
                  {t}Nechci uvést{/t}
               </option>
            </select>
            <span class="legend">{t}Nepovinné{/t}</span>
         </div>
      </div>
   </div>

   {block "personal-data"}
      <h3>{t}Kontaktní údaje{/t}</h3>
      <div class="row">
         <div class="col-xxs-12 col-sm-6">
            <div class="form-group required">
               <label for="name">{t}Jméno{/t}</label>
               <input type="text" name="invoice[name]" id="name" class="form-control" value="{$body.invoice.name}"
                      data-bv-notempty="true" data-bv-stringlength="true" data-bv-stringlength-min="2">
            </div>
         </div>

         <div class="col-xxs-12 col-sm-6">
            <div class="form-group required">
               <label for="surname">{t}Příjmení{/t}</label>
               <input type="text" name="invoice[surname]" id="surname" class="form-control"
                      value="{$body.invoice.surname}"
                      data-bv-notempty="true" data-bv-stringlength="true" data-bv-stringlength-min="2">
            </div>
         </div>

      <div class="col-xxs-12 col-sm-6">
         <div class="form-group">
            <label for="phone">{t}Telefon{/t}</label>
            <input type="text" name="invoice[phone]" id="phone" class="form-control" value="{$body.invoice.phone}"
                   data-bv-phone="true" data-bv-phone-country="invoice[country]">
         </div>
      </div>

      <div class="col-xxs-12 col-sm-6">
         {block "invoice-street"}
            <div class="form-group required">
               <label for="street">{t}Ulice a č.p.{/t}</label>
               <input type="text" name="invoice[street]" id="street" class="form-control" value="{$body.invoice.street}"
                      data-bv-notempty="true" data-bv-regexp="true" pattern=".*\S+\s+[0-9]+.*" data-bv-regexp-message="{t}Doplňte prosím číslo popisné{/t}">
            </div>
         {/block}
      </div>

         <div class="col-xxs-12 col-sm-6">
            <div class="form-group required">
               <label for="city">{t}Město{/t}</label>
               <input type="text" name="invoice[city]" id="city" class="form-control" value="{$body.invoice.city}"
                      data-bv-notempty="true" data-bv-stringlength="true" data-bv-stringlength-min="2">
            </div>
         </div>
         <div class="col-xxs-12 col-sm-6">
            <div class="form-group required">
               <label for="zip">{t}PSČ{/t}</label>
               <input type="text" name="invoice[zip]" id="zip" class="form-control" value="{$body.invoice.zip}"
                      data-bv-notempty="true" data-bv-zipcode="true" data-bv-zipcode-country="invoice[country]">
            </div>
         </div>

      <div class="col-xxs-12 col-sm-12">
         {block "invoice-country"}
            <div class="form-group required">
               <label for="country">{t}Stát{/t}</label>

                  {$activeCountry = $body.invoice.country|default:$ctrl.active_country}

                  <select name="invoice[country]" class="custom-select form-control" id="country">
                     {foreach $contexts.country->getAll() as $country}
                        <option value="{$country->getId()}" {if $activeCountry == $country->getId()}selected{/if}>
                           {$country->getName()}
                        </option>
                     {/foreach}
                  </select>
               </div>
            {/block}
         </div>

         <div class="col-xxs-12">
            <div class="form-group form-group-legend">
               <label for="custom_address">{t}Upřesnění adresy (firma, areál,...){/t}</label>
               <span class="legend">{t}Nepovinné{/t}</span>
               <input type="text" name="invoice[custom_address]" id="custom_address" class="form-control" value="{$body.invoice.custom_address}">
            </div>
         </div>
      </div>
   {/block}

   {block "different-address-opener"}
      <div class="form-group">
         <label for="different-address" class="custom-control custom-checkbox">
            <input type="checkbox" name="different-address" id="different-address" class="custom-control-input"
                   data-opener="[data-different-address]" {$body.delivery.name|checked}>

            <span class="custom-control-indicator"></span>
            {t}Dodání na jinou adresu nebo do zaměstnání{/t}
            <span class="clear-alt-address" style="display: none;">{t}smazat{/t}</span>
         </label>
      </div>
   {/block}

   {block "different-address-content"}
      <div class="opener-content" style="display: {if $body.input.dname.value}block{else}none{/if};" data-different-address>
         <h3>{t}Dodací adresa{/t}</h3>
         <div class="row">
            <div class="col-xxs-12 col-sm-6">
               <div class="form-group required">
                  <label for="name">{t}Jméno{/t}</label>
                  <input type="text" name="delivery[name]" id="dname" class="form-control"
                         value="{$body.delivery.name}"
                         autocomplete="off" data-bv-notempty="true" data-bv-stringlength="true"
                         data-bv-stringlength-min="2">
               </div>
            </div>
            <div class="col-xxs-12 col-sm-6">
               <div class="form-group required">
                  <label for="dsurname">{t}Příjmení{/t}</label>
                  <input type="text" name="delivery[surname]" id="dsurname" class="form-control"
                         value="{$body.delivery.surname}"
                         autocomplete="off" data-bv-notempty="true" data-bv-stringlength="true"
                         data-bv-stringlength-min="2">
               </div>
            </div>
            <div class="col-xxs-12 col-sm-6">
               <div class="form-group">
                  <label for="dfirm">{t}Firma{/t}</label>
                  <input type="text" name="delivery[firm]" id="dfirm" class="form-control"
                         value="{$body.delivery.firm}"
                         autocomplete="off" data-bv-stringlength="true" data-bv-stringlength-min="3">
               </div>
            </div>
            <div class="col-xxs-12 col-sm-6">
               {block "delivery-street"}
                  <div class="form-group required">
                     <label for="dstreet">{t}Ulice a č.p.{/t}</label>
                     <input type="text" name="delivery[street]" id="dstreet" class="form-control"
                            value="{$body.delivery.street}" autocomplete="off"
                            data-bv-notempty="true" data-bv-regexp="true" pattern=".*\S+\s+[0-9]+.*"
                            data-bv-regexp-message="{t}Doplňte prosím číslo popisné{/t}">
                  </div>
               {/block}
            </div>
            <div class="col-xxs-12 col-sm-6">
               <div class="zip-group">
                  <div class="form-group required">
                     <label for="dcity">{t}Město{/t}</label>
                     <input type="text" name="delivery[city]" id="dcity" class="form-control" value="{$body.delivery.city}"
                            autocomplete="off" data-bv-notempty="true" data-bv-stringlength="true"
                            data-bv-stringlength-min="2">
                  </div>
                  <div class="form-group required">
                     <label for="dzip">{t}PSČ{/t}</label>
                     <input type="text" name="delivery[zip]" id="dzip" class="form-control" value="{$body.delivery.zip}"
                            autocomplete="off" data-bv-notempty="true" data-bv-zipcode="true"
                            data-bv-zipcode-country="delivery[country]">
                  </div>
               </div>
            </div>
            <div class="col-xxs-12 col-sm-6">
               {block "delivery-country"}
                  <div class="form-group required">
                     <label for="dcountry">{t}Stát{/t}</label>
                     {$activeCountry = $body.delivery.country.value|default:$ctrl.active_country}

                     <select name="delivery[country]" id="dcountry" class="custom-select form-control" autocomplete="off">
                        {foreach $contexts.country->getAll() as $country}
                           <option value="{$country->getId()}"
                                   {if $activeCountry == $country->getId()}selected{/if}>
                              {$country->getName()}
                           </option>
                        {/foreach}
                     </select>
                  </div>
               {/block}
            </div>
         </div>
      </div>
   {/block}

   {block "company"}
      <div class="form-group">
         <label for="firm-address" class="custom-control custom-checkbox">
            <input type="hidden" name="firm_address" value="0">
            <input type="checkbox" name="firm_address" id="firm-address" class="custom-control-input"
                   data-opener="[data-firm-address]" {$body.invoice.firm|checked}>
            <span class="custom-control-indicator"></span>
            {t}Nakupuji na firmu (IČ, DIČ){/t}
            <span class="clear-alt-address" style="display: none;">{t}smazat{/t}</span>
         </label>
      </div>
      <div class="opener-content" style="display: {if $body.input.firm.value}block{else}none{/if};"
           data-firm-address>

         <h3>{t}Firemní údaje{/t}</h3>
         <div class="row">
            <div class="col-xxs-12">
               <div class="form-group">
                  <label for="firm">{t}Firma{/t}</label>
                  <input type="text" name="invoice[firm]" value="{$body.invoice.firm}" id="firm" class="form-control"
                         autocomplete="off" data-bv-stringlength="true" data-bv-stringlength-min="3">
               </div>
            </div>
            <div class="col-xxs-12 col-sm-6">
               <div class="form-group">
                  <label for="ico">{t}IČO{/t}</label>
                  <input type="text" name="invoice[ico]" id="ico" value="{$body.invoice.ico}" class="form-control"
                         autocomplete="off" data-bv-stringlength="true" data-bv-stringlength-min="8"
                         data-bv-stringlength-max="10">
               </div>
            </div>
            <div class="col-xxs-12 col-sm-6">
               <div class="form-group">
                  <label for="dic">{t}DIČ{/t}</label>
                  <input type="text" name="invoice[dic]" value="{$body.invoice.dic}" id="dic" class="form-control"
                         autocomplete="off" data-bv-vat="true" data-bv-vat-country="country">
               </div>
            </div>
         </div>
      </div>
   {/block}

   <div class="registration-submit">
      <input class="btn btn-primary" type="submit" name="Submit" value="{t}Vytvořit uživatele{/t}">
   </div>
</form>

<script>
   wpj.onReady.push(function () {
      var toggleCustomerCardInputs = function (type) {
         $('[data-customer-card-input]').css('display', 'none');
         $('[data-customer-card-input="'+ type +'"]').css('display', 'block');
      };

      $('[data-customer-card="type"]').on('change', function () {
         toggleCustomerCardInputs($(this).val());
      });
   });
</script>
