{% extends "base.html" %}

{% load static %}

{% load crispy_forms_tags %}

{% block content %}


      <!-- End Navbar -->
      <div class="content">
        <div class="container-fluid">
          <div class="row">


            <div class="col-md-12">
              <div class="card">
                <div class="card-header card-header-primary">
                  <h4 class="card-title ">Ingreso</h4>
                  <p class="card-category"> Tipo de refaccion</p>
                  <button onclick="abrir_modal_crearequipo('{% url 'crear_equipo' %}')" class="btn btn-info">Crear Equipo</button>
                  <button onclick="abrir_modal_crearmarca('{% url 'crear_marca' %}')" class="btn btn-info">Crear Marca</button>
                  <button onclick="abrir_modal_crearubicacion('{% url 'crear_ubicacion' %}')" class="btn btn-info">Crear Ubicacion</button>
                </div>

                <div class="card-body">
                  <form method="POST" action="" class="mt-3" autocomplete="off" >
                    {% csrf_token %}
                    <div class="row">
                    <div class="col-md-6 ">
                      <select name="equipo" class="form-control">
                        <option selected>Selecciona un Equipo</option>
                        {% for datoequipo in datosequipo %}
                        <option value="{{ datoequipo.id }}">{{ datoequipo.nombre }}</option>
                        {% endfor %}
                      </select>
                    </div>
                   


                    <div class="col-md-6 ">
                      <select name="marca" class="form-control">
                        <option selected>Selecciona una Marca</option>
                        {% for datomarca in datosmarca %}
                        <option value="{{ datomarca.id }}">{{ datomarca.nombre }}</option>
                        {% endfor %}
                      </select>
                    </div>
                    

                    <div class="col-md-6 ">
                      <select name="ubicacion" class="form-control">
                        <option selected>Selecciona una Ubicacion</option>
                        {% for datoubicacion in datosubicacion %}
                        <option value="{{ datoubicacion.id }}">{{ datoubicacion.nombre }}</option>
                        {% endfor %}
                      </select>
                    </div>
                    

                    <div class="col-md-6 ">
                      <select name="estatus" class="form-control">
                        <option selected>Selecciona un Estatus</option>
                        <option value="Nuevo">Nuevo</option>
                        <option value="Usado">Usado</option>
                      </select><br>
                    </div>
                    <div class="col-md-6 ">
                      <p>Referencia</p>
                      <input name="referencia" type="text" placeholder="" class="form-control" value="" required pattern="[A-Za-z0-9\-]+"
                      title="Solo Letras, números y guion '-'." > 
                    </div>
                    <div class="col-md-6 ">
                      <p>Descripción de Etiqueta</p>
                      <input name="descripcion_etiqueta" type="text" placeholder="" class="form-control" value="" ><br>
                    </div>
                    <div class="col-md-6 ">
                      <p>Descripción de la Pieza</p>
                      <input name="descripcion_pieza" type="text" placeholder="" class="form-control" value="" > 
                    </div>
                    
                    </div>
                    <button type="submit" class="btn btn-success">Guardar</button>
                  </form>
                </div>


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


      <div class="modal fade" id="crearequipo" role="dialog">    
      </div>
      <div class="modal fade" id="crearmarca" role="dialog">    
      </div>
      <div class="modal fade" id="crearubicacion" role="dialog">    
      </div>

      {% endblock content %}


    {% block javascript %}

      <script type="text/javascript">
        var $ = jQuery.noConflict();
        function abrir_modal_crearequipo(url){
          $('#crearequipo').load(url, function (){
            $(this).modal('show');
          });
        }
      </script>
      <script type="text/javascript">
        var $ = jQuery.noConflict();
        function abrir_modal_crearmarca(url){
          $('#crearmarca').load(url, function (){
            $(this).modal('show');
          });
        }
      </script>
      <script type="text/javascript">
        var $ = jQuery.noConflict();
        function abrir_modal_crearubicacion(url){
          $('#crearubicacion').load(url, function (){
            $(this).modal('show');
          });
        }
      </script>

      

    {% endblock javascript %}