{{ header }}
<section class="container-fluid gifts-list">
  {% if content_top %}
    {{ content_top }}
  {% endif %}
  {{breadcrumbs}}
  <div class="row">
    <div class="col-md-3 hidden-md-down">
      {{ account }}
    </div>
    <div class="col-xs">
      <div class="content-box">
        <div class="flex middle-xs">
          <a href="{{ continue }}" class="padding-small text-x-large text-dark hidden-md-up">
            <i class="fas fa-angle-left" aria-hidden="true"></i>
          </a>
          <span class="heading-1">{{ heading_title }}</span>
        </div>

        <form id="form-listapresente" action="{{ action }}" method="post" enctype="multipart/form-data" class="top-margin-medium js-address">
          <div class="row">
            <div class="col-xs-12">
              <div class="content-box paper padding-x-large">
                <div class="row">
                  <div class="col-xs-12 col-md-6">
                    <div class="content-box">
                      <span class="text-large bottom-border-gray visible-block bottom-margin-medium bottom-padding-medium">{{ tab_geral }}</span>

                      <label class="field field-medium bottom-margin-large">
                        <span class="field-label"><span class="required">* </span>{{ entry_nome }}</span>
                        <input type="text" class="field-entry" name="nome" value="{{ nome }}" maxlength="70" required />
                        {% if error_nome %}<span class="text-small text-error visible-block top-margin-x-small error">{{ error_nome }}</span>{% endif %}
                      </label>

                      <label class="field field-medium bottom-margin-large">
                        <span class="field-label">Categoria do evento</span>
                        <select name="categoria_id_cat_lista" class="field-entry">
                          {% for key, categoria in categorias %}
                            <option {% if categoria.selected %}selected{% endif %} value="{{ categoria.value }}">{{ categoria.name }}</option>
                          {% endfor %}
                        </select>
                      </label>

                      <div class="row small-space-xs">
                        <div class="col-xs-6">
                          <label class="field field-medium">
                            <span class="field-label"><span class="required">*</span>{{ entry_evento }}</span>
                            <input type="text" class="field-entry mask-date" name="data" id="data" value="{{ data }}" required />
                            {% if error_data %}<span class="text-small text-error visible-block top-margin-x-small error">{{ error_data }}</span>{% endif %}
                          </label>
                        </div>
                        <div class="col-xs-6">
                          <label class="field field-medium">
                            <span class="field-label">{{ entry_status }}</span>
                            <select name="status" class="field-entry">
                              <option {% if status == 1 %} selected {% endif %} value="1">Ativa</option>
                              <option {% if status == 0 %} selected {% endif %} value="0">Inativa</option>
                            </select>
                          </label>
                        </div>
                      </div>

                      <span class="text-small text-gray visible-block top-margin-x-small bottom-margin-large">A lista de presente ficará disponível até o dia <span class="js-unavailable">{{ validade }}</span></span>
                      <input type="hidden" name="validade" id="validade" value="{{ validade }}" />

                      <label class="field field-medium">
                        <span class="field-label">Deixe uma mensagem de agradecimento</span>
                        <textarea class="field-entry" maxlength="300" style="min-height:100px;" name="frase">{{ frase }}</textarea>
                      </label>

                      <input type="hidden" name="cadastro" value="{{ cadastro }}" />
                      <input type="hidden" name="cliente" value="{{ cliente }}" />

                    </div>
                  </div>
                  <div class="col-xs-12 col-md-6">
                    <div class="content-box">
                      <span class="text-large bottom-border-gray visible-block bottom-margin-medium bottom-padding-medium">{{ tab_local }}</span>

                      <label class="field field-medium bottom-margin-large">
                        <span class="field-label">
                          <span class="required">*</span>{{ entry_postcode }}
                          <span class="vertical-middle">
                            <img class="js-postcode-loading hidden" src="assets/img/loading-black.svg" width="14" height="14" />
                          </span>
                          <span class="text-primary text-small js-postcode-address cursor-pointer pull-right">Não sei meu cep</span>
                        </span>
                        <input type="text" class="field-entry mask-cep js-postcode-search" name="cep" value="{{ postcode }}" maxlength="32" required />
                        {% if error_cep %}<span class="text-small text-error visible-block top-margin-x-small error">{{ error_cep }}</span>{% endif %}
                      </label>

                      <div class="js-postcode-content {{ (postcode_visible == false) ? 'hidden' : '' }}">

                        <label class="field field-medium bottom-margin-large">
                            <span for="logradouro" class="field-label"><span class="required">* </span>{{ entry_logradouro }}</span>
                            <input type="text" class="field-entry address_1" name="logradouro" value="{{ logradouro }}" maxlength="70" required {{ (postcode_readonly) ? 'readonly' : '' }} />
                            {% if error_logradouro %}<span class="text-small text-error visible-block top-margin-x-small error">{{ error_logradouro }}</span>{% endif %}
                        </label>

                        <div class="row small-space-xs bottom-margin-medium">
                            <div class="col-xs-6">
                              <label class="field field-medium">
                                <span class="field-label"><span class="required">*</span>{{ entry_numero }}</span>
                                <input type="text" class="field-entry numeric" name="numero" value="{{ numero }}" maxlength="6" required />
                                {% if error_numero %}<span class="text-small text-error visible-block top-margin-x-small error">{{ error_numero }}</span>{% endif %}
                              </label>
                            </div>
                            <div class="col-xs-6">
                              <label class="field field-medium">
                                <span class="field-label">Complemento</span>
                                <input type="text" class="field-entry" name="complemento" value="{{ complemento }}" maxlength="60" />
                              </label>
                            </div>
                        </div>

                        <label class="field field-medium bottom-margin-large">
                            <span class="field-label"><span class="required">*</span>{{ entry_bairro }}</span>
                            <input type="text" class="field-entry address_2" name="bairro" value="{{ bairro }}" maxlength="50" required {{ (postcode_readonly) ? 'readonly' : '' }} />
                            {% if error_bairro %}<span class="text-small text-error visible-block top-margin-x-small error">{{ error_bairro }}</span>{% endif %}
                        </label>

                        <div class="row small-space-xs bottom-margin-medium">
                            <div class="col-xs-6">
                              <label class="field field-medium">
                                <span class="field-label"><span class="required">*</span>{{ entry_cidade }}</span>
                                <input type="text" class="field-entry city" data-name="city" name="cidade" value="{{ cidade }}" maxlength="50" required {{ (postcode_readonly) ? 'readonly' : '' }} />
                                {% if error_cidade %}<span class="text-small text-error visible-block top-margin-x-small error">{{ error_cidade }}</span>{% endif %}
                              </label>
                            </div>
                            <div class="col-xs-6">
                              <label class="field field-medium">
                                <span class="field-label">{{ entry_estado }}</span>
                                <select name="estado" class="field-entry zone_id" {{ (postcode_readonly) ? 'readonly' : '' }}>
                                  {% for key, zone in zones %}
                                      {% if zone.zone_id == estado%}
                                        <option value="{{ zone.zone_id }}" selected="true">{{ zone.name }}</option>
                                      {% else %}
                                        <option value="{{ zone.zone_id }}" {% if zone.zone_id == zone_selected %}selected="true"{% endif %} >{{ zone.name }}</option>
                                      {% endif %}
                                  {% endfor %}
                                </select>
                              </label>
                            </div>
                          </div>
                      </div>

                    </div>
                  </div>
                </div>

              </div>
            </div>
          </div>
          <div class="row">
            {% if mostrarprodutos %}
            <div class="col-xs-12">
                <div class="content-box">
                  <span class="text-large bottom-border-gray visible-block top-margin-medium bottom-padding-medium">{{ tab_produtos }}</span>
                  {% if produtos %}
                    {% for key, produto in produtos %}
                      <div class="row no-space-xs top-xs middle-md bottom-border-gray vertical-padding-medium">
                        <div class="col-xs-width-auto">
                          <div class="border-gray visible-inline-block right-margin-medium hidden-overflow">
                            <img src="{{ produto.imagem }}" alt="" width="68" height="68" class="visible-block">
                          </div>
                        </div>
                        <div class="col-xs">
                          <div class="row no-space-xs top-xs middle-md">
                            <div class="col-xs-12 col-md">
                              <a href="{{ produto.href }}" class="content-box" target="_blank">
                                <span class="text-medium visible-block right-margin-medium">{{ produto.nome }}</span>
                                {% if futuragrade_status %}
                                  <span class="text-small text-gray visible-block">
                                    {% if produto.color_description is defined %} • Cor: {{ produto.color_description }}{% endif %}
                                    {% if produto.size_description is defined %} • Tam.: {{ produto.size_description }}{% endif %}
                                    {% if produto.specification_description is defined %} • {{ text_specification_description }} {{ produto.specification_description }}{% endif %}
                                  </span>
                                {% endif %}
                              </a>
                              {% if produto.itens_kit %}
                                <div class="rel">
                                  <a href="#" class="visible-block text-small vertical-padding-small js-see-kit-products">Ver produtos do kit</a>
                                  <div class="abs background-white padding-medium border-gray auto-overflow hidden cart-kit-products-container">
                                    {% for itemKitKey, itemKit in produto.itens_kit %}
                                      <div class="text-ellipsis">
                                        <span class="text-dark text-bold">{{ itemKit.quantidade }}</span>
                                        <span class="text-small text-gray text-ellipsis"> - {{ itemKit.descricao }}</span>
                                      </div>
                                    {% endfor %}
                                  </div>
                                </div>
                              {% endif %}
                            </div>
                            <div class="col-xs-6 col-md-2">
                              <div class="content-box vertical-padding-small flex nowrap-xs">
                                <input type="hidden" class="js-quantity-buyers" value="{{ produto.qtdeComp }}"/>
                                <input type="text" class="field-entry js-quantity-quantity" value="{{ produto.qtde }}" class="numeric" style="max-width: 80px" />
                                <a href="#" class="padding-small js-quantity-refresh" data-item="{{ produto.item }}" data-list="{{ listaid }}">
                                  <i class="fas fa-sync-alt"></i>
                                </a>
                              </div>
                            </div>
                            <div class="col-xs-6 col-md-2">
                              <div class="content-box vertical-padding-small">
                                {% if produto.special %}
                                  <span class="text-small text-gray visible-block">De {{ produto.valor }}</span>
                                  <span class="text-medium text-dark visible-block">Por {{ produto.special }}</span>
                                {% else %}
                                  <span class="text-medium visible-block">{{ produto.valor }}</span>
                                {% endif %}
                              </div>
                            </div>
                            <div class="col-xs-6 col-md-2">
                              <div class="content-box vertical-padding-small">
                                <span class="text-medium text-dark visible-block">{{ produto.qtdeComp }} compradores</span>
                                {% if produto.qtdeComp != 0 %}
                                  <a href="javascript: void(0)" id="comproduto_{{ produto.item }}">Ver compradores</a>
                                {% endif %}
                              </div>
                            </div>
                            <div class="col-xs-width-auto">
                              <div class="content-box vertical-padding-small">
                                {% if (not produto.qtde and not produto.qtdeComp) or (produto.qtde and not produto.qtdeComp) or (produto.qtde and produto.qtdeComp) %}
                                  <a href="{{ produto.remove }}" class="text-small text-error">
                                    Remover
                                  </a>
                                {% else %}
                                  <img src="catalog/view/theme/default/image/success.png" alt="Sucesso" title="Sucesso">
                                {% endif %}
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    {% endfor %}
                  {% else %}
                    Nenhum produto adicionado a sua lista.
                  {% endif %}

                  {% if produtos %}
                    {% for key, produto in produtos %}
                      <div id="produto_{{ produto.item }}" title="Compradores deste Presente: {{ produto.nome }} | {{ produto.opcoes2 }}">
                        <table class="table table-action">
                          <thead>
                            <tr>
                              <th class="t-medium">Nome</th>
                              <th class="t-medium">Email</th>
                              <th class="t-medium">Fone</th>
                            </tr>
                          </thead>
                          <tbody>
                            {% if produto.compradores %}
                              {% for v in produto.compradores %}
                                <tr>
                                  <td class="fix"></td>
                                  <td class="info_responsive"><b>Nome</b></td>
                                  <td>{{ v.nome }} {{ v.sobrenome }}</td>
                                  <td class="info_responsive"><b>Email</b></td>
                                  <td>{{ v.email }}</td>
                                  <td class="info_responsive"><b>Fone</b></td>
                                  <td>{{ v.fone }}</td>
                                  <td class="fix-margin"></td>
                                </tr>
                              {% endfor %}
                            {% else %}
                              <tr>
                                <td colspan="3" style="text-align: center;">Ninguém comprou este presente ainda pra mim :( !</td>
                              </tr>
                            {% endif %}
                          </tbody>
                        </table>
                      </div>
                    {% endfor %}
                  {% endif %}
                </div>
              </div>
            {% endif %}
            <div class="col-xs-12 col-sm-6 col-sm-offset-6">
              <div class="content-box flex end-xs">
                <button type="submit" class="btn-default btn-large">
                  <span>{{ button_continue }}</span>
                </button>
              </div>
            </div>
          </div>
        </form>


      </div>
    </div>
    {% if column_right %}
      <div class="col-md-3 hidden-md-down">
        {{ column_right }}
      </div>
    {% endif %}
  </div>
  {% if content_bottom %}
    {{ content_bottom }}
  {% endif %}
</section>


<script type="text/javascript">
  window.waitEvent('scripts_window', function(){

    $('form').keydown(function(event){
      if(event.keyCode == 13) {
        event.preventDefault();
        return false;
      }
    });

    $("#data").datepicker({
      changeMonth: true,
      changeYear: true,
      closeText: 'Fechar',
      prevText: '&#x3c;Anterior',
      nextText: 'Pr&oacute;ximo&#x3e;',
      currentText: 'Hoje',
      monthNames: ['Janeiro','Fevereiro','Mar&ccedil;o','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],
      monthNamesShort: ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez'],
      dayNames: ['Domingo','Segunda-feira','Ter&ccedil;a-feira','Quarta-feira','Quinta-feira','Sexta-feira','Sabado'],
      dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','Sex','Sab'],
      dayNamesMin: ['Dom','Seg','Ter','Qua','Qui','Sex','Sab'],
      weekHeader: 'Sm',
      firstDay: 0,
      isRTL: false,
      showMonthAfterYear: false,
      yearSuffix: '',
      dateFormat: "dd/mm/yy",
      minDate:  0,
      onSelect: function(date) {
        $('#validade').datepicker({
          changeMonth: true,
          changeYear: true,
          dateFormat: "dd/mm/yy"
        });
        var date2 = $('#data').datepicker('getDate');
        date2.setDate(date2.getDate() - {{ futuralistapresente_Intervalo_Validade }} );
        $('#validade').datepicker('setDate', date2);
        $('.js-unavailable').text($('#validade').val());
        $("#data").focusout();
      }
    });

    $('.js-quantity-refresh').on('click', function(event) {
      event.preventDefault();
      var
      item = $(this).data('item'),
      list = $(this).data('list'),
      quantity = $(this).siblings('.js-quantity-quantity').val(),
      buyers = $(this).siblings('.js-quantity-buyers').val();

      if(quantity == 0 && buyers == 0) {
        notificationMsg('Atenção! Este produto ainda não teve vendas. Caso deseje excluir da lista, user o icone excluir do mesmo.','warning');
        return false;
      }

      $.ajax({
        url: 'index.php?route=listapresente/listapresente/updateprodlista',
        type: 'post',
        async: false,
        data: 'qtde=' + quantity + '&item=' + item + '&lista=' + list,
        dataType: 'json',
        error:function(xhr, ajaxOptions, thrownError) { alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText); },
        success: function(json) {
          if (json['erro']) {
            notificationMsg(""+json['erro']+"", 'warning');
          }
          if (json['sucesso']) {
            notificationMsg(""+json['sucesso']+"", 'success');
          }
        }
      });
    });

    $('#form-listapresente').validate({
      onfocusout: function(element) {
          $(element).valid();
      },
      onkeyup: function (element) {
        if ($(element).valid()) {
          $(element).removeClass('form-error');
          $(element).siblings('span.form-error').remove();
        }
      },
      onsubmit: true,
      errorElement: 'span',
      errorClass: 'form-error',
      validClass: 'form-success',
      rules: {
        postcode: {
          postalcodeBR: true
        }
      }
    });

  $(function() {
    {% if produtos %}
      {% for key, produto in produtos %}
        $( "#produto_{{ produto.item }}" ).dialog({
 					autoOpen: false,
					width: 'auto', // overcomes width:'auto' and maxWidth bug
					maxWidth: 600,
					height: 'auto',
					modal: true,
					fluid: true, //new option
					resizable: false,
          show: {
            effect: "fade",
            duration: 1000
          },
          hide: {
            effect: "explode",
            duration: 1000
          }
        });
        $( "#comproduto_{{ produto.item }}" ).click(function() {
          $( "#produto_{{ produto.item }}" ).dialog( "open" );
        });
      {% endfor %}
    {% endif %}
  });

  {% if success %}notificationMsg('{{ success }}','success');{% endif %}
  {% if error_warning %}notificationMsg('{{ error_warning }}','warning');{% endif %}
  {% if error_validate %}notificationMsg('{{ error_validate }}','warning');{% endif %}
});
</script>

{{ footer }}
