{strip}
{$has_mask = !empty($settings.field.phone.enabled) && !empty($settings.field.phone.mask)}
<form action="{$wa->getUrl('shop/frontend/callback', ['plugin' => 'callback'])}" method="post" class="callback-form" id="callback-form">
    <div class="callback-modal__close"></div>

    <div class="callback-form__headline">{$settings.headline|escape}</div>


    {foreach $settings.field as $name => $data}
    {if empty($data.enabled)}{continue}{/if}
    {if ($name == 'name') || ($name == 'email')}
    <div class="callback-form-row">
        <label class="callback-form-label{if !empty($errors[$name])} error{/if}" for="callback-form-{$name}">{$data.name}{if !empty($data.required)} <span class="callback-form__required">*</span>{/if}</label>
        <input type="text" name="{$name}" value="{$values[$name]|escape|default:''}" class="callback-form__field  callback-form__{$name}" id="callback-form-{$name}" />
        {if !empty($errors[$name])}<div class="callback-form__alert">{$errors[$name]}</div>{/if}
    </div>
    {elseif $name == 'phone'}
    <div class="callback-form-row">
        <label class="callback-form-label{if !empty($errors[$name])} error{/if}" for="callback-form-{$name}">{$data.name}{if !empty($data.required)} <span class="callback-form__required">*</span>{/if}</label>
        <input type="text" name="{$name}" value="{$values[$name]|escape|default:''}" class="callback-form__field  callback-form__{$name}" id="callback-form-{$name}"{if !empty($settings.field.phone.mask_val)} data-mask_val="{$settings.field.phone.mask_val}"{/if} />
        {if !empty($errors[$name])}<div class="callback-form__alert">{$errors[$name]}</div>{/if}
    </div>
    {elseif $name == 'message'}
    <div class="callback-form-row">
        <label class="callback-form-label{if !empty($errors[$name])} error{/if}" for="callback-form-{$name}">{$data.name}{if !empty($data.required)} <span class="callback-form__required">*</span>{/if}</label>
        <textarea name="{$name}" class="callback-form__field  callback-form__comment" id="callback-form-{$name}">{$values.message|escape}</textarea>
        {if !empty($errors[$name])}<div class="callback-form__alert">{$errors[$name]}</div>{/if}
    </div>

    {elseif $name == 'recipient'}

    <div class="callback-form-select-row">
        <label class="callback-form-label{if !empty($errors[$name])} error{/if}">{$data.name}{if !empty($data.required)} <span class="callback-form__required">*</span>{/if}</label>
        <select name="recipient">

            {for $i = 0 to count($data.options.title)-1}
            {if empty($data.options.title[$i]) && empty($data.options.email[$i])}{continue}{/if}
            <option value="{$i}"{if $i == $values.recipient} selected{/if}>{if !empty($data.options.title[$i])}{$data.options.title[$i]}{else}{$data.options.email[$i]}{/if}</option>
            {/for}
        </select>
        {if !empty($errors[$name])}<div class="callback-form__alert">{$errors[$name]}</div>{/if}
    </div>

    {elseif $name == 'time'}
    <div class="callback-form-time-range">
        {$h = intval(date('H'))}
        {$tomorrow = intval($data.to) <= $h}
        {if $tomorrow}{$day ='[`tomorrow`]'}{else}{$day ='[`today`]'}{/if}
        {if empty($values.time.to)}{$values.time.to = $data.to}{/if}
        <label class="callback-form-label{if !empty($errors[$name])} error{/if}">{sprintf($data.name, $day)}{if !empty($data.required)} <span class="callback-form__required">*</span>{/if}</label>
        <div class="callback-time-range">
            [`from`]
            <select name="time[from]">
                {for $i = $data.from to ($data.to-1)}
                {if !$tomorrow && ($i < $h)}{continue}{/if}
                <option value="{$i}"{if $values.time.from == $i} selected{/if}>{$i|string_format:"%02d"}:00</option>
                {/for}
            </select>
            [`to`]
            <select name="time[to]">
                {for $i = ($data.from+1) to $data.to}
                {if !$tomorrow && ($i < $h+1)}{continue}{/if}
                <option value="{$i}"{if $values.time.to == $i} selected{/if}>{$i|string_format:"%02d"}:00</option>
                {/for}
            </select>
        </div>
        {if !empty($errors[$name])}<div class="callback-form__alert">{$errors[$name]}</div>{/if}
    </div>
    {elseif $name == 'privacy'}
        <div class="callback-form-row">
            {* can't use label because of nested "a" tags *}
            <div class="callback-form-label__privacy{if !empty($errors[$name])} error{/if}">
                <input type="checkbox" name="{$name}" value="1" class="callback-form__checkbox callback-form__{$name}" id="callback-form-{$name}"{if !empty($values[$name])} checked{/if} />
                {ifempty($data.text)}
                {if !empty($data.required)} <span class="callback-form__required">*</span>{/if}
            </d>
            {if !empty($errors[$name])}<div class="callback-form__alert">{$errors[$name]}</div>{/if}
        </div>
    {/if}
    {/foreach}

    {if !empty($errors.all)}<p class="error">{$errors.all}</p>{/if}

    <input type="hidden" name="page" value="{$values.page|default:''|escape}">
    <input type="hidden" name="usertime" value="{$values.usertime|default:''|escape}">
    <input type="submit" value="{$settings.button|escape}" class="callback-form__button" />
</form>




<script type="text/javascript">
(function ($) {
$(function(){
    var callbackForm = $('#callback-form');

    var h = $(window).height();
    if ( h > callbackForm.outerHeight() ) {
        callbackForm.css({ top: ( h - callbackForm.outerHeight() ) / 2 + 'px' });
    }

    $('.callback-form__field',callbackForm).focus(function() {
        var row = $(this).closest('div.callback-form-row');
        row.find('label').removeClass('error').hide();
        row.find('.callback-form__alert').remove();
    }).blur(function() {
        if ( $(this).val() == '' ) $(this).closest('div.callback-form-row').find('label').show();
    }).each(function(i,v){
        if($(v).val()) $(v).closest('div.callback-form-row').find('label').hide();
    });

    callbackForm.submit(function(e){
        var f = $(this);
        $('.callback-form__button', f).prop('disabled', true);
        $.post(f.prop('action'), f.serialize(), function(resp){
            $('.callback-modal').html(resp);
        });
        e.preventDefault();
    });

    $('select,:checkbox',callbackForm).styler({
        selectSearch: false
    });

    {if $has_mask}
    var maskCallback = function () {
        var $p = $('#callback-form-phone'),
            mask = $p.data('mask_val');

        $p.mask(mask, { });
    };

    if(typeof(window.jQuery.mask) === 'undefined') {
        $.getScript("{$wa_url}wa-apps/shop/plugins/callback/js/jquery.mask.min.js", function () {
            maskCallback();
        })
    } else {
        maskCallback();
    }
    {/if}

});
})(jQuery);
</script>
{/strip}