{% extends extend %}
{% load punto_de_venta_tags %}
{% block title %}Cliente{% endblock %}

<!-- CSS Code -->
{% block style_css %}{% endblock %}

<!-- JavaScript Code -->
{% block js_code %}
{% include 'autocomplete_light/static.html' %}
<script>


$(function() {
  $("input[id*='fecha']").datepicker({dateFormat:'dd/mm/yy',});
  if ($('#id_hereda_valorpuntos').is(':checked'))
    $('#id_valor_puntos').hide();
  else
  {
    $('#id_valor_puntos').show();
    if ($('#id_valor_puntos').val() == '') 
      $('#id_valor_puntos').val(0);
  }


  $('#id_hereda_valorpuntos').click(function() {
    if ($('#id_hereda_valorpuntos').is(':checked'))
      $('#id_valor_puntos').hide();
    else
    {
      $('#id_valor_puntos').show();
      if ($('#id_valor_puntos').val() == '') 
        $('#id_valor_puntos').val(0);
    }
  });

  if ($('#id_tipo_tarjeta').val()=='N')
    $('#div_aplicar_descuentos').show();
  else
    $('#div_aplicar_descuentos').hide();

  if ($('#id_tipo_tarjeta').val()=='P')
    $('#div_valor_puntos').show();
  else
    $('#div_valor_puntos').hide();

  $('#id_tipo_tarjeta').change(function(event){
    if ($('#id_tipo_tarjeta').val()=='P')
      $('#div_valor_puntos').show();
    else
      $('#div_valor_puntos').hide(); 

    if ($('#id_tipo_tarjeta').val()=='N')
      $('#div_aplicar_descuentos').show();
    else
      $('#div_aplicar_descuentos').hide();
  });

});
</script>

{% endblock %}

{% block breadcrumb %}{{ block.super }} <a href="/{{ modulo }}/clientes/">Clientes</a> <i class=" icon-play"></i> Cliente{% endblock %}
{% block content %}
{{ formset }}
<form method="post" class="form-horizontal" action="" width="300px"  enctype='multipart/form-data'>{% csrf_token %}
  {{ articulo_form.errors }}
  {{ direccion_form.errors }}
  {% if message %}
  <div class="alert alert-block alert-error fade in">
    <button type="button" class="close" data-dismiss="alert">×</button>
    <h4 class="alert-heading">Oh NO! Ocurio un error!</h4>
    <p>{{ message }}</p>
  </div>
  {% endif %}
  
  <div class="row-fluid">
    <div class="span3"><h3 style="margin:0;"> Cliente </h3> </div>
    <button type="submit" class="btn"><i class="icon-download-alt"></i> Guardar</button> 
  </div>
  {{ form.errors }}
  <ul id="myTab" class="nav nav-tabs " style="margin-bottom: 0;">
    <li class="active"><a href="#general" data-toggle="tab">General</a></li>
    {% puntos_tab %}
    <li><a href="#direcciones" data-toggle="tab">Direccion</a></li>
    {% articulos_tab %}
  </ul>
  <div id="myTabContent" class="tab-content">
    <div class="tab-pane fade active in" id="general" style="padding-bottom: 0;">
      <div class="row-fluid">
        <div class="span2" >
          <label>Nombre</label>
          <div class="input-prepend input-append">
            {{ form.nombre }}
          </div>
        </div>
        <div class="span2">
          <label>RFC</label>
          <div class="input-prepend input-append">
            {{ direccion_form.rfc_curp }}
          </div>
        </div>
      </div>
      <hr>
      <div class="row-fluid"> 
        <div class="span2">
          <label>moneda</label>
          <div class="input-prepend input-append">
            {{ form.moneda }}
          </div>
        </div>
        <div class="span2">
          <label>Condicion de pago</label>
          <div class="input-prepend input-append">
            {{ form.condicion_de_pago }}
          </div>
        </div>
      </div>
      <hr>
      <div class="row-fluid">
        <div class="span2">
          <label>Cobrar impuestos</label>
          <div class="input-prepend input-append">
            {{ form.cobrar_impuestos }}
          </div>
        </div>
        <div class="span2">
          <label>Cargar moratorios</label>
          <div class="input-prepend input-append">
            {{ form.generar_interereses }}
          </div>
        </div>
        <div class="span2">
          <label>Emitir estado de cuenta</label>
          <div class="input-prepend input-append">
            {{ form.emir_estado_cuenta}}
          </div>
        </div>
      </div>
      <br>
      <br>
    </div>
    <div class="tab-pane fade in" id="puntos" style="padding-bottom: 0;">
      <div class="row-fluid">
        <div class="span4" style='clear:both;'>
          <label>Cobrar y Abonar con</label>
          <div class="input-prepend input-append">
            {{ form.tipo_tarjeta }}
          </div>
        </div>
        <div class="span4" id="div_aplicar_descuentos">
          <label>Permitir aplicar descuentos</label>
          <div class="input-prepend input-append">
            {{ form.aplicar_descuento_sin_tarjeta }}
          </div>
        </div>
        
        <div  id='div_valor_puntos'>
          <label>valor de cada punto ($) - Heredar {{ form.hereda_valorpuntos }}</label>
          <div class="input-prepend input-append" style='clear:both;' >
            {{ form.valor_puntos }}
          </div>
        </div>
      </div>
      <div class="row-fluid">
        <hr>
        <div class="span3">
          <label >Fecha de corte</label>
          <div class="input-prepend input-append" style='clear:both;' >
              <span class="add-on"><i class="icon-calendar"></i> </span>
              {{ form.fecha_corte }}
              
          </div>
        </div>
        <div class="span4">
          <label>Dar puntos a</label>
          <div class="input-prepend input-append" >
            {{ form.hereda_puntos_a }}
          </div>
        </div>
        <br style="clear:both;">
        <br>
      </div>
    </div>
    <div class="tab-pane fade in" id="direcciones" style="padding-bottom: 0;">
      <div class="row-fluid">
        <div class="span2">
          <label>ciudad</label>
          <div class="input-prepend input-append">
            {{ direccion_form.ciudad }}
          </div>
        </div>
        <div class="span2">
          <label>Colonia</label>
          <div class="input-prepend input-append">
            {{ direccion_form.colonia }}
          </div>
        </div>
        <div class="span2">
          <label>Codigo postal</label>
          <div class="input-prepend input-append">
            {{ direccion_form.codigo_postal }}
          </div>
        </div>
      </div>
      <hr>
      <div class="row-fluid">
        <div class="span2">
          <label>Calle</label>
          <div class="input-prepend input-append">
            {{ direccion_form.calle_nombre }}
          </div>
        </div>
        <div class="span2">
          <label>Numero exterior</label>
          <div class="input-prepend input-append">
            {{ direccion_form.numero_exterior }}
          </div>
        </div>
        <div class="span2">
          <label>Numero interior</label>
          <div class="input-prepend input-append">
            {{ direccion_form.numero_interior }}
          </div>
        </div>
        <div class="span2">
          <label>E-mail</label>
          <div class="input-prepend input-append">
            {{ direccion_form.email }}
          </div>
        </div>
      </div>
      <br>
    </div>
    <div class="tab-pane fade in" id="articulos" style="padding-bottom: 0;">
      <div class="row-fluid">
        <div class="span4">
          <label class="span2">Articulos</label><a href="#"><i class="icon-plus-sign"></i></a>
        </div>
      </div>
      <div class="row-fluid">
        <div class="span4">
          <table class="table tableCell table-hover" style="background-color: white;margin-top: 1em;" >
            <tr>
              <th>Clave</th>
              <th>Descripcion</th>
            </tr>
            {% for cliente_articulo in cliente_articulos %}
            <tr>
              <td>{{ cliente_articulo.clave }}</td>
              <td>{{ cliente_articulo.descripccion }}</td>
            </tr>
            {% endfor %}
          </table>
        </div>
      <br>
    </div>
  </div>
</form>
{% endblock %}