
{% extends "djmicrosip_cotizacion_puertas/base.html" %}

{% block title %}Cotizacion{% endblock %}

<!-- CSS Code -->
{% block style_css %}
<style type="text/css"> 
.delete-row {
    font-size: 2rem;
    text-align: center;
    position: relative;
    float: right;
}
.add-row{
    font-size: 4rem;
    padding-left: 20px;
    float: right;
    font-weight: bold;
}
.form-control {
    display: block;
    width: 100%;
    height: 34px;
    padding: 1px 3px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border-radius: 0px;
}
.lbl{
	display: none;
}
.fila{
	 margin: 5px;
	 padding: 5px;
	 border-bottom:  1px solid #ccc;
}
.hardware ul{
    list-style: none;
    padding: 0;
}
textarea{
   width:auto;
   height: auto;
}
@media screen and (max-width: 770px) {
  a{
    font-size: 20px;
  }
  body{
    font-size: 20px;
  }
  input{
    font-size: 20px;
  }
  .btn{
    font-size: 20px;
  }
  .steps {
    width: 100%;
    margin-right: -15px;
    margin-left: -15px;
    display: table;
  }
  .lbl{
  	display: block;
  }
  .fila{
  	border:  1px solid #ccc;
  }
  .header{
  	display: none;
  }
  .form-control{
  	padding: 3px 6px;
    font-size: 20px;
  }
  .col-md-8{
    padding-right: 5px;
    padding-left: 5px;
  }
  .mobile{
    display: none;
  }
  .inf_cliente{
    display: none;
  }
  #detalles_extra{
    display: none;
  }
  .si_llamada{
    display: none;
  }
}
</style>
{% endblock %}
{% block modulestyle_css %}

{% endblock %}
<!-- JavaScript Code -->
{% block js_code %}
{% include 'autocomplete_light/static.html' %}
<script src='{{STATIC_URL}}js/jquery.formset.js'></script>
<script src='{{STATIC_URL}}djmicrosip_cotizacion_puertas/js/cotizacion.js?v=1.0.8'></script>
<script type="text/javascript">

	$(function() {
		$('.formset_row-{{ formset.prefix }}').formset({
			addText: 'Agregar',
			deleteText: 'Borrar',
			addCssClass:'btn btn-success',
			prefix: '{{ formset.prefix }}',

		});
	});

  $("[id*='empaquechk']").change(function() {
      var id=this.id
      var comp=id.replace('empaquechk', '')
      console.log(comp)
      var nombre=''
        
      if (comp == "")
      {
        nombre='id_detallecotizacion_set-0-empaque'
      }
      else
      {
        nombre=comp+'id_detallecotizacion_set-0-empaque'
      }
      if (this.checked) {
            $('#'+nombre).val('S')
            console.log('S')
        }else{
             $('#'+nombre).val('N')
             console.log('N')
        }


});
  $("[name*='cepillochk']").change(function() {
      var id=this.id
      var comp=id.replace('cepillochk', '')
      console.log(comp)
      var nombre=''
        
      if (comp == "")
      {
        nombre='id_detallecotizacion_set-0-cepillo'
      }
      else
      {
        nombre=comp+'id_detallecotizacion_set-0-cepillo'
      }
if (this.checked) {
            $('#'+nombre).val('S')
        }else{
            $('#'+nombre).val('N')
        }


});
      $('#cliente_predeterminado').click(function(){
        debugger
      var cli_id=$('.div.hilight').attr('data-value');
        $.ajax({
          url: '/djmicrosip_cotizacion_puertas/cliente_save/',
          type: 'get',
          data: {
            'cliente_id':cli_id,
          },
          success: function (data) {

          }
        });
    });
    $( "input[name*='-empaque']" ).each(function() {

        var name=$(this).attr('name');
        if(name.indexOf("costo")>0)
        {}
        else
        {console.log($(this).val())
          if($(this).val() == "S")
          {debugger
            if(name=="detallecotizacion_set-0-cepillo")
            {
              $("#empaquechk").checked(true);
            }
            else
            {

            }
          }
        }


      });
</script>
{% endblock %} 
{% block selected_module %} Microsip {% endblock %}

{% block content %}
<div class="container">
<div class="row">
  <div class="col-lg-12">
    <div class="col-lg-3">                  
      <a id="cliente_pred" href="#" class="btn btn-default cliente" data-toggle="modal" data-target=".bs-cliente-modal-sm">
                    Cliente
                  </a>  
                </div>
    <div class="col-lg-3"></div>
    <div class="col-lg-3"></div>
    <div class="col-lg-3">
           

    </div>
  </div>
<form method="post" class="form" action=""  enctype='multipart/form-data'>
  {% csrf_token %}    
  <div class="hidden">{{form.folio_microsip}}</div>
  <div class="hidden">{{form.estatus}}</div>

<div id="listas_detalle"  class="row">


     <div class="row fila header">
     	<div class="mobile">	
     	<div class="col-lg-1 col-md-1 col-xs-4 col-sm-1"> 
     		<label class="">Cantidad</label>
     	</div>
     	<div class="col-lg-1 col-md-1 col-xs-4 col-sm-1"> 
     		<label>Ancho</label>
     	</div>
		</div>
		<div class="mobile">

     	<div class="col-lg-1 col-md-1 col-xs-4 col-sm-1"> 
     		<label>Altura</label>
     	</div>
     	<div class="col-lg-1 col-md-1 col-xs-3 col-sm-1"> 
     		<label>Tipo</label>
     	</div>
     	<div class="col-lg-1 col-md-1 col-xs-3 col-sm-1">  
     		<label>Color</label>
     	</div>
     	<div class="col-lg-3 col-md-3 col-xs-12 col-sm-12">
     		<label>Descripcion</label>
     	</div>
     	<div class="col-lg-1 col-md-1 col-xs-3 col-sm-1">
     		<label>GA</label>
     	</div>
     	<div class="col-lg-1 col-md-1 col-xs-3 col-sm-1"> 
     		<label>Precio Unit</label>
     	</div>
     	<div class="col-lg-1 col-md-1 col-xs-3 col-sm-1">
     		<label>Total</label>
     	</div>
     	</div>

     </div>

	{{ formset.management_form }}
	{% for form in formset.forms %}
     <div class="row formset_row-{{ formset.prefix }} fila">
    <div class="col-lg-12">
  <div class="col-lg-2">
    <input type="checkbox" id="empaquechk" name="empaquechk" >Empaque
  </div>
  <div class="col-lg-1">
    <input type="checkbox" id="cepillochk" name="cepillochk" >Cepillo
  </div>
  <div class="col-lg-9"></div>  
  
</div>     	
           {{ form.errors }}
     	<div class="steps">	
        <div class="col-lg-1 col-md-1 col-xs-4 col-sm-1"> 
        	<label class="lbl">Cantidad</label>
                      {{form.id}}  {{ form.cantidad }}
        </div>
     	<div class="col-lg-1 col-md-1 col-xs-4 col-sm-1"> 
     		<label class="lbl">Ancho</label>
     		     		{{ form.ancho }}
     	</div>
     	<div class="col-lg-1 col-md-1 col-xs-4 col-sm-1"> 
     		<label class="lbl">Altura</label>
     		     		{{ form.altura }}
     	</div>


     	<div class="col-lg-1 col-md-1 col-xs-3 col-sm-1"> 
     		<label class="lbl">Tipo</label>
     		     		{{ form.tipo }}
     	</div>
     	<div class="col-lg-1 col-md-1 col-xs-3 col-sm-1"> 
     		<label class="lbl">Color</label>
     		     		{{ form.color }}
     	</div>
		<div class="col-lg-3 col-md-3 col-xs-12 col-sm-12"> 
			<label class="lbl">Descripcion</label>		
			
			{{ form.descripcion }}
			</div>
     	</div>
     	<div class="col-lg-1 col-md-1 col-xs-3 col-sm-1"> 
     		<label class="lbl">GA</label>
     		     		{{ form.ga }}
     	</div>
     	<div class="col-lg-1 col-md-1 col-xs-3 col-sm-1"> 
     		<label class="lbl">Precio unitario</label>
     		     		{{ form.precio_unitario }}
     	</div>
     	<div class="col-lg-1 col-md-1 col-xs-3 col-sm-1"> 
     		<label class="lbl">Total</label>
     		     		{{ form.precio_total }}
     	</div>

      <div class="col-lg-1 col-md-1 col-xs-3 col-sm-1 hidden"> 
                {{ form.empaque }}
      </div>
      <div class="col-lg-1 col-md-1 col-xs-3 col-sm-1 hidden"> 
                {{ form.cepillo }}
      </div>
      <div class="col-lg-1 col-md-1 col-xs-3 col-sm-1 hidden"> 
                {{ form.empaque_costo }}
      </div>
      <div class="col-lg-1 col-md-1 col-xs-3 col-sm-1 hidden"> 
                {{ form.cepillo_costo }}
      </div>

     	</div>		

     	<div>{% if form.instance.pk %}{{ form.DELETE }}{% endif %}</div>
     <br>
     {% endfor %}
     </div>
</div>
<div id="" class="row " >
  <div class="col-md-2 ">
{%if folio == 'L0'%}
<div class="row"><label class="">Instalacion</label>{{form.instalacion}}</div>  
{% endif%}
        
  </div>  
    <div class="col-md-6">
    </div>
  <div class="col-md-2">

    
  </div> 
  <div class="col-md-2">
       <strong>TOTAL 
          <input type="text" id="totalgeneral" readonly style="    text-align: right;">  
        </strong>
  </div>


</div>
<br>
<br>

<div id="" class="row " >
	<div class="col-md-2 ">

	</div>	
    <div class="col-md-6">
        
    </div>
	<div class="col-md-2">
    {%if folio == 'L0'%}
		<input  type="submit" class="btn btn-primary" value="Guardar"  id="guardar" />
    {% endif%}
		
	</div> 
	<div class="col-md-2">
		{%if id != '0'%}
      {%if folio == 'L0'%}
        <a tabindex="-1" href="/djmicrosip_cotizacion_puertas/cotizar/{{id}}/"><i class=""></i>&nbsp;Cotizar</a>
      {% endif%}
		{%endif%}
	</div>


</div>


</form>

</div>
</div>
<!-- MODAL CLIENTE -->
    <div class="modal fade bs-cliente-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-sm">
        <div class="modal-content">
          <div class="modal-header mat">
              <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
              <h4 class="modal-title" id="mySmallModalLabel">Cliente</h4>
              <input type="text" class="hidden" id="cliente_id">
              
                {{form_cliente.cliente}} 
              
            </div>
            <div class="modal-body">
              <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
              <button class="btn btn-guardar" id="cliente_predeterminado">Guardar</button>
            </div>
        </div>
      </div>
    </div>
<!-- MODAL INSTALACION --> 
    <div class="modal fade bs-instalacion-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-sm">
        <div class="modal-content ">
          <div class="modal-header matart">
              <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
              <h4 class="modal-title" id="mySmallModalLabel">Instalacion</h4>
              <input type="text" class="hidden" id="instalacion">
              
            </div>
            <div class="modal-body">
              <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
        <button type="button" class=" btn btn-default instalacion">Guardar</button>
            </div>
        </div>
      </div>
    </div>
{% endblock %}