{extends "index.tpl"}

{block "meta-robots"}
   <meta name="robots" content="noindex, follow">
{/block}

{block "head" append}
   {if {findModule('recaptcha','registration')} and {findModule('recaptcha','site_invisible')} and $body.newUser}
      {include "block.recaptcha.invisible.tpl"}
      {captchaScript}
   {/if}
{/block}

{block content}
   {block "user-h1"}
      <h1 class="text-center heading-center">{if $body.newUser}{t}Registrace{/t}{else}{t}Úprava osobních údajů{/t}{/if}</h1>
   {/block}

   {if $body.error != ''}
      <div class="alert alert-info" role="alert">
         {$body.error nofilter}
      </div>
   {/if}

   {include 'block.messages.tpl'}

   {if $body.newUser}
      {insert_page type="REGISTRATION" exists='exists'}
      {ifmodule USER_OAUTH}
         <div class="oauth-box">
            <h4>{t}Rychlá registrace přes sociální sítě{/t}</h4>
            <p>{t}Díky registraci přes sociální sítě se nebudete muset při každé návštěvě přihlašovat.{/t}<br>
               {t}Propojení je naprosto bezpečné a můžete ho kdykoliv zrušit.{/t} </p>

            <div class="oauth-login">
               {if $dbcfg.oauth.facebook.client_id}
                  <a href="/login-bind/facebook" class="btn fb"><span class="fc fc-facebook-square"></span> Facebook</a>
               {/if}
               {if $dbcfg.oauth.google.client_id}
                  <a href="/login-bind/google" class="btn gp"><span class="fc fc-google-plus"></span> Google</a>
               {/if}
            </div>
         </div>
      {/ifmodule}
   {/if}

   {get_contexts country=1 assign='contexts'}
   <form name="login" method="post" action="" role="form" class="form-registration registration" data-form="user">

      {block "form-content"}
         {block "user-data"}
            <div class="row">
               {block 'user-pass'}
                  <div class="col-xl-4 col-sm-6 col-xs-12">
                     <div class="form-group required">
                        <label for="email">{t}E-mail{/t}</label>
                        <input type="email" name="email" id="email" class="form-control smartform-instance-invoice smartform-email" value="{$body.input.email.value}"
                               data-bv-notempty="true" data-bv-emailaddress-message="{t}Zadejte platnou e-mailovou adresu{/t}">
                     </div>
                  </div>
               {/block}
               {if $body.newUser}
                  <div class="col-xl-2 col-sm-6 col-xs-12">
                     <div class="form-group required">
                        <label for="password">{t}Heslo{/t}</label>
                        <input type="password" name="password" id="password" class="form-control" value=""
                               data-bv-notempty="true" data-bv-stringlength="true" data-bv-stringlength-min="6">
                     </div>
                  </div>
                  <div class="col-xl-2 col-sm-6 col-xs-12">
                     <div class="form-group required">
                        <label for="passwordAgain">{t}Heslo znovu{/t}</label>
                        <input type="password" name="passwordAgain" id="passwordAgain" class="form-control" value=""
                               data-bv-notempty="true" data-bv-stringlength="true" data-bv-identical="true"
                               data-bv-identical-message="{t}Hesla se neshodují{/t}" data-bv-identical-field="password">
                     </div>
                  </div>
               {else}
                  <div class="col-xl-3 col-sm-6 col-xs-12">
                     <div class="form-group required">
                        <label for="password">{t}Nové heslo{/t}</label>
                        <input type="password" name="password" id="password" class="form-control" value="">
                     </div>
                  </div>
               {/if}
            </div>
            <div class="row">
               <div class="col-xl-3 col-md-4 col-sm-6 col-xs-12">
                  <div class="form-group required">
                     <label for="name">{t}Jméno{/t}</label>
                     <input type="text" name="name" id="name" class="form-control" value="{$body.input.name.value}"
                            data-bv-notempty="true" data-bv-stringlength="true" data-bv-stringlength-min="2">
                  </div>
               </div>
               <div class="col-xl-3 col-md-4 col-sm-6 col-xs-12">
                  <div class="form-group required">
                     <label for="surname">{t}Příjmení{/t}</label>
                     <input type="text" name="surname" id="surname" class="form-control" value="{$body.input.surname.value}"
                            data-bv-notempty="true" data-bv-stringlength="true" data-bv-stringlength-min="2">
                  </div>
               </div>
               <div class="col-xl-3 col-md-4 col-sm-6 col-xs-12">
                  <div class="form-group required">
                     <label for="phone">{t}Telefon{/t}</label>
                     <input type="text" name="phone" id="phone" class="form-control smartform-instance-invoice smartform-phone-number" value="{$body.input.phone.value}"
                            data-bv-notempty="true" data-bv-phone="true" data-bv-phone-country="country"
                            data-bv-phone-message="{t}Zadejte platné telefoní číslo{/t}">
                  </div>
               </div>
            </div>
         {/block}
         <hr>
         <h2>{t}Adresa{/t}</h2>
         <div class="row">
            <div class="col-lg-3 col-sm-6 col-xs-12">
               <div class="form-group required">
                  <label for="street">{t}Ulice a č.p.{/t}</label>
                  <input type="text" name="street" id="street" class="form-control smartform-instance-invoice smartform-address-street-and-number" value="{$body.input.street.value}"
                         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>
            </div>
            <div class="col-lg-3 col-sm-6 col-xs-12">
               <div class="form-group required">
                  <label for="city">{t}Město{/t}</label>
                  <input type="text" name="city" id="city" class="form-control smartform-instance-invoice smartform-address-city" value="{$body.input.city.value}"
                         data-bv-notempty="true" data-bv-stringlength="true" data-bv-stringlength-min="2">
               </div>
            </div>
            <div class="col-xl-2 col-lg-3 col-sm-6 col-xs-12">
               <div class="form-group required">
                  <label for="zip">{t}PSČ{/t}</label>
                  <input type="text" name="zip" id="zip" class="form-control smartform-instance-invoice smartform-address-zip" value="{$body.input.zip.value}"
                         data-bv-notempty="true" data-bv-zipcode="true" data-bv-zipcode-country="country"
                         data-bv-zipcode-message="{t}Zadejte platné PSČ{/t}">
               </div>
            </div>
            <div class="col-lg-3 col-sm-6 col-xs-12">
               <div class="form-group required">
                  <label for="country">{t}Stát{/t}</label>
                  {$activeCountry = $body.input.country.value|default:$ctrl.active_country}
                  <select name="country" class="custom-select c-select form-control" id="country">
                     {foreach $contexts.country->getAll() as $country}
                        <option value="{$country->getId()}"
                                {if $activeCountry == $country->getId()}selected="selected"{/if}>{$country->getName()}</option>
                     {/foreach}
                  </select>
               </div>
            </div>
         </div>
         <hr>
         <div class="row">
            <div class="col-xs-12">
               <div class="form-group m-b-0" id="different-address-opener">
                  <label for="different-address" class="custom-control custom-checkbox c-input c-checkbox">
                     <input class="custom-control-input" type="checkbox" data-opener="#different-address-content" name="different-address"
                            id="different-address" {if $body.input.dname.value}checked{/if}>
                     <span class="c-indicator 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>
            </div>
         </div>
         <div id="different-address-content" style="display:{if $body.input.dname.value}block{else}none{/if}" class="opener-content">
            <h3>{t}Dodací adresa{/t}</h3>

            <div class="row">
               <div class="col-lg-3 col-sm-6 col-xs-12">
                  <div class="form-group required">
                     <label for="dname">{t}Jméno{/t}</label>
                     <input type="text" name="dname" id="dname" class="form-control" value="{$body.input.dname.value}" autocomplete="off"
                            data-bv-notempty="true" data-bv-stringlength="true" data-bv-stringlength-min="3">
                  </div>
               </div>
               <div class="col-lg-3 col-sm-6 col-xs-12">
                  <div class="form-group required">
                     <label for="dsurname">{t}Příjmení{/t}</label>
                     <input type="text" name="dsurname" id="dsurname" class="form-control" value="{$body.input.dsurname.value}"
                            autocomplete="off"
                            data-bv-notempty="true" data-bv-stringlength="true" data-bv-stringlength-min="3">
                  </div>
               </div>
               <div class="col-lg-3 col-sm-6 col-xs-12">
                  <div class="form-group">
                     <label for="dfirm">{t}Firma{/t}</label>
                     <input type="text" name="dfirm" id="dfirm" class="form-control" value="{$body.input.dfirm.value}" autocomplete="off"
                            data-bv-stringlength="true" data-bv-stringlength-min="3">
                  </div>
               </div>
               <div class="col-lg-3 col-sm-6 col-xs-12">
                  <div class="form-group required">
                     <label for="dstreet">{t}Ulice a č.p.{/t}</label>
                     <input type="text" name="dstreet" id="dstreet" class="form-control smartform-instance-delivery smartform-address-street-and-number" value="{$body.input.dstreet.value}"
                            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>
               </div>
               <div class="col-lg-3 col-sm-6 col-xs-12">
                  <div class="form-group required">
                     <label for="dcity">{t}Město{/t}</label>
                     <input type="text" name="dcity" id="dcity" class="form-control smartform-instance-delivery smartform-address-city" value="{$body.input.dcity.value}" autocomplete="off"
                            data-bv-notempty="true" data-bv-stringlength="true" data-bv-stringlength-min="2">
                  </div>
               </div>
               <div class="col-xl-2 col-lg-3 col-sm-6 col-xs-12">
                  <div class="form-group required">
                     <label for="dzip">{t}PSČ{/t}</label>
                     <input type="text" name="dzip" id="dzip" class="form-control smartform-instance-delivery smartform-address-zip" value="{$body.input.dzip.value}" autocomplete="off"
                            data-bv-notempty="true" data-bv-zipcode="true" data-bv-zipcode-country="dcountry">
                  </div>
               </div>
               <div class="col-lg-3 col-sm-6 col-xs-12">
                  <div class="form-group required">
                     <label for="dcountry">{t}Stát{/t}</label>
                     {$activeCountry = $body.input.dcountry.value|default:$ctrl.active_country}
                     <select name="dcountry" class="custom-select c-select form-control" id="dcountry" autocomplete="off">
                        {foreach $contexts.country->getAll() as $country}
                           <option value="{$country->getId()}"
                                   {if $activeCountry == $country->getId()}selected="selected"{/if}>{$country->getName()}</option>
                        {/foreach}
                     </select>
                  </div>
               </div>
            </div>
         </div>
         <hr>
         <div class="row">
            <div class="col-xs-12">
               <div class="form-group m-b-0">
                  <label for="firm-address" class="custom-control custom-checkbox c-input c-checkbox">
                     <input type="hidden" name="firm_address" value="0">
                     <input class="custom-control-input" type="checkbox" name="firm_address" data-opener="#firm-address-content"
                            id="firm-address"
                            {if $body.input.firm.value}checked{/if}>
                     <span class="c-indicator 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>
         </div>
         <div id="firm-address-content" style="display:{if $body.input.firm.value}block{else}none{/if}" class="opener-content">
            <h3>{t}Firemní údaje{/t}</h3>
            <div class="row">
               <div class="col-xl-3 col-lg-4 col-sm-6 col-xs-12">
                  <div class="form-group">
                     <label for="firm">{t}Firma{/t}</label>
                     <input type="text" name="firm" id="firm" class="form-control smartform-company-name" value="{$body.input.firm.value}" autocomplete="off"
                            data-bv-stringlength="true" data-bv-stringlength-min="3">
                  </div>
               </div>
               {if $showCopyEmail}
                  <div class="col-xl-3 col-lg-4 col-sm-6 col-xs-12">
                     <div class="form-group">
                        <label for="copy_email">{t}E-mail pro fakturaci{/t}</label>
                        <input type="text" name="copy_email" id="copy_email" class="form-control smartform-instance-invoice smartform-email"
                               value="{$body.input.copy_email.value}" autocomplete="off">
                     </div>
                  </div>
               {/if}
               <div class="col-xl-3 col-lg-4 col-sm-6 col-xs-12">
                  <div class="form-group">
                     <label for="ico">{t}IČO{/t}</label>
                     <input type="text" name="ico" id="ico" class="form-control smartform-company-registration-number" value="{$body.input.ico.value}" autocomplete="off"
                            data-bv-stringlength="true" data-bv-stringlength-min="8" data-bv-stringlength-max="10">
                  </div>
               </div>
               <div class="col-xl-3 col-lg-4 col-sm-6 col-xs-12">
                  <div class="form-group">
                     <label for="dic">{t}DIČ{/t}</label>
                     <input type="text" name="dic" id="dic" class="form-control smartform-company-vat-number" value="{$body.input.dic.value}" autocomplete="off"
                            data-bv-stringlength="true" data-bv-stringlength-min="10" data-bv-stringlength-max="15">
                  </div>
               </div>
            </div>
         </div>
         <hr>
         <h2>{t}Ostatní údaje{/t}</h2>
         <div class="row">
            <div class="col-md-6 col-xs-12">
               <div class="form-group">
                  <label for="news" class="custom-control custom-checkbox c-input c-checkbox">
                     <input class="custom-control-input" type="checkbox" name="news" id="news" value="Y" {$body.input.news|checked:'Y'}>
                     <span class="c-indicator custom-control-indicator"></span>
                     {t}Dostávat novinky{/t}
                     {if $dbcfg.gdpr.enable == 'Y'}
                        <br>
                        <small>
                        ({if ($body.input.news == 'Y') && $body.input.date_subscribe.value}{t date=$body.input.date_subscribe.value|date_format:"%d. %m. %Y"}Souhlas udělen dne {date}{/t}{else}
                        <a href="{url s=page label=consent}" target="_blank">{t}Souhlasím se zpracováním osobních údajů{/t}</a>{/if})
                        </small>{/if}
                  </label>
               </div>
            </div>
         </div>
      {/block}
      {block "submit"}
         <div class="row">
            <div class="col-xs-12 text-lg-right text-xs-center p-t-1">
               {if $body.newUser}
                  {if $dbcfg.gdpr.enable == 'Y'}
                     {* @formatter:off *}
                     <p class="registration-consent">{t consent={url s=page label=consent} privacyPolicy={url s=page label=privacy_policy}
                        escape=false}Odesláním registrace souhlasím se <a href="{consent}" target="_blank">zpracováním osobních údajů za účelem registrace</a>
                           a beru na vědomí <a href="{privacyPolicy}" target="_blank">Zásady zpracování osobních údajů</a>.{/t}
                     </p>
                     {* @formatter:on *}
                  {/if}
                  {if {findModule('recaptcha','registration')} and {findModule('recaptcha','site_invisible')} }
                     {captchaBtn text="{t}Odeslat registraci{/t}"}
                  {else}
                     <input class="btn btn-primary" type="submit" name="Submit" value="{t}Odeslat registraci{/t}">
                  {/if}
               {else}
                  <input class="btn btn-primary" type="submit" name="Submit" value="{t}Uložit{/t}">
               {/if}
            </div>
         </div>
      {/block}
   </form>
   {if !$body.newUser}
      {ifmodule USER_OAUTH}
         {include "user.oauth.tpl"}
      {/ifmodule}
   {/if}
{/block}

{block "js-dynamic-load" append}
   {asset_compile}
      <script src="/common/static/bootstrapvalidator/js/bootstrapValidator.js"></script>
      <script src="/common/static/bootstrapvalidator/js/language/{$ctrl.active_language_code}.js"></script>
   {/asset_compile}
{/block}

<script>
   {block onready append}
   wpj.domUtils.initOpeners();

   var $form = $('form[role=form]');

   {block "user-validation"}
   $form.bootstrapValidator({
      feedbackIcons: {
         valid: 'fc fc-check',
         invalid: 'fc fc-remove',
         validating: 'fc fc-refresh'
      }
   }).on('submit', function() {

      {* delete all inputs in unchecked openers *}
      $form.find('[data-opener]').not(':checked').each(function() {
         $($(this).attr('data-opener')).find('input').val('');
      });

      err = $('.has-error').first();

      if (err.length && !wpj.domUtils.isInView(err)) {
         wpj.domUtils.scrollTo(err);
      }

      return true;
   });
   {/block}

   {* Reset validace u poli ktera jsou skrtyta.
      Defaultne validuji jen viditelne polozky, reset poli
      je hlavne kvuli enablovani submit buttonu. *}
   $form.on('change', '[data-opener]', function() {
      var $this = $(this);

      if ($this.prop('checked') === false) {
         var target = $this.attr('data-opener');

         $(target).find('input').each(function() {
            $form.data('bootstrapValidator').resetField($(this).attr('name'));
         });
      }
   });

   {if $body.error_id}
   wpj.domUtils.scrollTo($('.alert'));
   {/if}


   {* tlacitko 'smazat' u doruc. adresy a firmy *}
   $form.on('click', '.clear-alt-address', function() {
      var target = $(this).siblings('input[type=checkbox]').attr('data-opener');
      $(target).find('input').val('');
   });

   {/block}
</script>

{block analytics append}
    {include "components/block.smartForm.tpl"}
{/block}