{% extends 'base.html' %}


{% block content %}

<style>
 .containerbtns{
    margin: 0% 10% 0% 10% !important;
    width:auto !important ;

}
.containercard{
     padding:0% 5% 0% 5% !important;
}
@media screen and (max-width: 640px){
    .containerbtns{
        margin:0 !important;
        width 100% !important;
    }

}
.tabstyle{
        min-height:100vh !important;
    }
    .tabs{
        z-index: 1;
    }
</style>


<ul id="tabs-catalogos" class="tabs tabs-fixed-width  z-depth-1 ">
    <li class="tab col s3"><a class="active"  href="#Etapass">Etapas</a></li>
    <li class="tab col s3"><a  href="#Razas">Razas</a></li>
    <li class="tab col s3"><a  href="#Vacunas">Vacunas</a></li>
    <li class="tab col s3"><a  href="#TipoAlimentos">Alimentos</a></li>
</ul>
<br/>


<div class="row">

    <div id="Etapass" class="col s12  tabstyle">
        <div class="card containercard" >
         <br/>
            <center><h5>Etapas</h5></center>
            <table id="etapastable" class="highlight hover cell-border"  data-page-length='10' width="100%">
                <thead>
                    <tr>
                        <th>Acciones</th>
                        <th>Etapa</th>
                    </tr>
                </thead>
                <tbody>
                    {% for etapa in Etapas %}
                    <tr>
                        <td><center><a class="waves-effect waves-light edit_etapa" data-c="{{etapa.pk}}"><i class="material-icons">edit</i></a></center></td>
                        <td>{{etapa.nombre}}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <div class="fixed-action-btn">
            <a class="btn-floating btn-large btn_new_aladm waves-effect waves-light add_etapa" style="background-color:#0066ff">
                <i class="large material-icons">add</i>
            </a>
        </div>
    </div>
    <div id="Razas" class="col s12  tabstyle">
        <div class="card containercard" >
         <br/>
            <center><h5>Razas</h5></center>
            <table id="razastable" class="highlight hover cell-border"  data-page-length='10' width="100%">
                <thead>
                    <tr>
                        <th>Acciones</th>
                        <th>Raza</th>
                    </tr>
                </thead>
                <tbody>
                    {% for raza in Razas %}
                    <tr>
                        <td><center><a class="waves-effect waves-light edit_raza" data-c="{{raza.pk}}"><i class="material-icons">edit</i></a></center></td>
                        <td>{{raza.nombre}}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <div class="fixed-action-btn">
            <a class="btn-floating btn-large btn_new_aladm waves-effect waves-light add_raza" style="background-color:#0066ff">
                <i class="large material-icons">add</i>
            </a>
        </div>

    </div>

    <div id="Vacunas" class="col s12  tabstyle">
        <div class="card containercard" >
         <br/>
            <center><h5>Vacunas</h5></center>
            <table id="vacunastable" class="highlight hover cell-border"  data-page-length='10' width="100%">
                <thead>
                    <tr>
                        <th>Acciones</th>
                        <th>Vacuna</th>
                        <th>Descripcion</th>
                        <th>Reacciones</th>
                    </tr>
                </thead>
                <tbody>
                    {% for vacuna in Vacunas %}
                    <tr>
                        <td><center><a class="waves-effect waves-light edit_vacuna" data-c="{{vacuna.pk}}"><i class="material-icons">edit</i></a></center></td>
                        <td>{{vacuna.nombre}}</td>
                        <td>{{vacuna.descripcion}}</td>
                        <td>{{vacuna.reacciones}}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <div class="fixed-action-btn">
            <a class="btn-floating btn-large btn_new_aladm waves-effect waves-light add_vacuna" style="background-color:#0066ff">
                <i class="large material-icons">add</i>
            </a>
        </div>

    </div>

     <div id="TipoAlimentos" class="col s12  tabstyle">
        <div class="card containercard" >
         <br/>
            <center><h5>Vacunas</h5></center>
            <table id="tipoalimentostable" class="highlight hover cell-border"  data-page-length='10' width="100%">
                <thead>
                    <tr>
                        <th>Acciones</th>
                        <th>Alimento</th>
                    </tr>
                </thead>
                <tbody>
                    {% for tipoalimento in TipoAlimento %}
                    <tr>
                        <td><center><a class="waves-effect waves-light edit_tipoalimento" data-c="{{tipoalimento.pk}}"><i class="material-icons">edit</i></a></center></td>
                        <td>{{tipoalimento.nombre}}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <div class="fixed-action-btn">
            <a class="btn-floating btn-large btn_new_aladm waves-effect waves-light add_tipoalimento" style="background-color:#0066ff">
                <i class="large material-icons">add</i>
            </a>
        </div>

    </div>




</div>




{% include 'modalesCatalogos/modal_editar_alimento_catalogo.html' %}
{% include 'modalesCatalogos/modal_editar_etapa_catalogo.html'  %}
{% include 'modalesCatalogos/modal_editar_raza_catalogo.html'  %}
{% include 'modalesCatalogos/modal_editar_tipoalimento_catalogo.html' %}
{% include 'modalesCatalogos/modal_editar_vacuna_catalogo.html'  %}

{% include 'modalesCatalogos/modal_nuevo_tipoalimento_catalogo.html'  %}
{% include 'modalesCatalogos/modal_nueva_vacuna_catalogo.html'  %}
{% include 'modalesCatalogos/modal_nueva_etapa_catalogo.html'  %}
{% include 'modalesCatalogos/modal_nueva_raza_catalogo.html'  %}


{% endblock content %}



{% block js%}

{% if messages %}
    {% for message in messages %}
     <script>
      $(document).ready(function() {
        M.toast({html: '{{ message }}'});
      });
    </script>
    {% endfor %}
{% endif %}

<script>

     // Definicion de las tablas

    var opcionesTablas={
        "responsive": true,
        "language": {
            "sProcessing":     "Procesando...",
            "sLengthMenu":     "Mostrar_MENU_ ",
            "sZeroRecords":    "No se encontraron resultados",
            "sEmptyTable":     "Ningún dato disponible en esta tabla",
            "sInfo":           "Registros del _START_ al _END_.",
            "sInfoEmpty":      "",
            "sInfoFiltered":   "(filtrado de un total de _MAX_ registros)",
            "sInfoPostFix":    "",
            "sSearch":         "Buscar",
            "sUrl":            "",
            "sInfoThousands":  ",",
            "sLoadingRecords": "Cargando...",
            "oPaginate": {
                "sFirst":    "Primero",
                "sLast":     "Último",
                "sNext":     "<i class='material-icons '>keyboard_arrow_right</i>",
                "sPrevious": "<i class='material-icons '>keyboard_arrow_left</i>"
            },
            "oAria": {
                "sSortAscending":  ": Activar para ordenar la columna de manera ascendente",
                "sSortDescending": ": Activar para ordenar la columna de manera descendente"
            }
        },
        "columnDefs": [
                {
                    width: "10px",
                    targets: 0
                }
            ]

    }


    $(document).ready(function() {
        $('#etapastable').DataTable(opcionesTablas);
        $('#razastable').DataTable(opcionesTablas);
        $('#vacunastable').DataTable(opcionesTablas);
        $('#tipoalimentostable').DataTable(opcionesTablas);

     });

    $('#tabs-catalogos').tabs({
        // swipeable:true,

    });

    selectab();
    function selectab(){
        var activeTab = localStorage.getItem('activeTabVac');
        if (activeTab) {
            activeTab = activeTab.substring(1);
            $('.tabs').tabs('select', activeTab);
            console.log(activeTab);
        }
    }

    $(document).on("click",".tab",function(e){
        localStorage.setItem('activeTabVac', $(this).find("a").attr("href"));
         var activeTab = localStorage.getItem('activeTab');
         console.log(activeTab);
         $.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust();
    });


    // Definicion de Modales

     $(document).ready(function(){


        $('#modal_editar_etapa').modal({
            dismissible: true,
            onOpenStart: function() {
                 $('.edit_form_etapa #id_nombre').next().addClass("active");
            },
        });

        $('#modal_nueva_etapa').modal({
            dismissible: true,
            onOpenStart: function() {
                $('.new_form_etapa #id_nombre').next().addClass("active");
                $('.new_form_etapa #id_nombre').focus();
            },
            onCloseStart: function() {
                $('.new_form_etapa').trigger("reset");
            },
        });



        $('#modal_editar_raza').modal({
            dismissible: true,
            onOpenStart: function() {
                 $('.edit_form_raza #id_nombre').next().addClass("active");
            },
        });
        $('#modal_nueva_raza').modal({
            dismissible: true,
            onOpenStart: function() {
                $('.new_form_raza #id_nombre').next().addClass("active");
                $('.new_form_raza #id_nombre').focus();
            },
            onCloseStart: function() {
                $('.new_form_raza').trigger("reset");
            },
        });



        $('#modal_editar_vacuna').modal({
            dismissible: true,
            onOpenStart: function() {
                $('.edit_form_vacuna #id_nombre').next().addClass("active");
                $('.edit_form_vacuna #id_nombre').focus();
            },
            onCloseStart: function() {
                 $('.edit_form_vacuna').trigger("reset");
            },
        });
        $('#modal_nueva_vacuna').modal({
            dismissible: true,
            onOpenStart: function() {
                $('.nueva_form_vacuna #id_nombre').next().addClass("active");
                $('.nueva_form_vacuna #id_nombre').focus();
            },
            onCloseStart: function() {
                 $('.nueva_form_vacuna').trigger("reset");
            },
        });

        $('#modal_editar_altipo').modal({
            dismissible: true,
            onOpenStart: function() {
                 $('.tooltipped').tooltip("close");
            },
        });
        $('#modal_nuevo_altipo').modal({
            dismissible: true,
            onOpenStart: function() {
                 $('.new_form_altipo #id_nombre').next().addClass("active");
            },
            onCloseStart: function() {
                 $('.new_form_altipo').trigger("reset");
            },
        });

    });


    // Obtener click en editar

    $(document).on("click",".edit_etapa",function(){
        var idetapa=$(this).attr("data-c");
        $.ajax({
            url:"/api/getetapasid/"+idetapa,
            method: "GET",
            beforeSend: function(data){
                // console.log("Obteniendo los tipos de alimento");
            },
            success: function(data){
                // console.log(data);
                var tipo = JSON.parse(data);
                $('.edit_form_etapa #id_nombre').val(tipo.fields.nombre)
                $('.edit_form_etapa #id_etapa').val(tipo.pk)
                M.updateTextFields();
                $('#modal_editar_etapa').modal('open');

            },
            error: function(data){
                console.log("error");
            }
        });
    });
     $(document).on("click",".edit_raza",function(){
        var idraza=$(this).attr("data-c");
        $.ajax({
            url:"/api/getrazasid/"+idraza,
            method: "GET",
            beforeSend: function(data){
                // console.log("Obteniendo los tipos de alimento");
            },
            success: function(data){
                // console.log(data);
                var tipo = JSON.parse(data);
                $('.edit_form_raza #id_nombre').val(tipo.fields.nombre)
                $('.edit_form_raza #id_raza').val(tipo.pk)
                M.updateTextFields();
                $('#modal_editar_raza').modal('open');

            },
            error: function(data){
                console.log("error");
            }
        });
    });
     $(document).on("click",".edit_vacuna",function(){
        var idvacuna=$(this).attr("data-c");
        $.ajax({
            url:"/api/getvacunasid/"+idvacuna,
            method: "GET",
            beforeSend: function(data){
                // console.log("Obteniendo los tipos de alimento");
            },
            success: function(data){
                // console.log(data);
                var tipo = JSON.parse(data);
                $('.edit_form_vacuna #id_nombre').val(tipo.fields.nombre)
                $('.edit_form_vacuna #id_descripcion').val(tipo.fields.descripcion)
                $('.edit_form_vacuna #id_reacciones').val(tipo.fields.reacciones)
                M.textareaAutoResize($('.edit_form_vacuna #id_descripcion'));
                M.textareaAutoResize($('.edit_form_vacuna #id_reacciones'));
                $('.edit_form_vacuna #id_vacuna').val(tipo.pk)
                M.updateTextFields();
                $('#modal_editar_vacuna').modal('open');

            },
            error: function(data){
                console.log("error");
            }
        });
    });
     $(document).on("click",".edit_tipoalimento",function(){
        var idtipo=$(this).attr("data-c");
        $.ajax({
            url:"/api/gettipoid/"+idtipo,
            method: "GET",
            beforeSend: function(data){
                // console.log("Obteniendo los tipos de alimento");
            },
            success: function(data){
                // console.log(data);
                var tipo = JSON.parse(data);
                $('.edit_form_altipo #id_nombre').val(tipo.fields.nombre)
                $('.edit_form_altipo #id_tipo').val(tipo.pk)
                M.updateTextFields();
                $('#modal_editar_altipo').modal('open');

            },
            error: function(data){
                console.log("error");
            }
        });
    });



    // Agregar elemento al catalogo

     $(document).on("click",".add_etapa",function(){
        $('#modal_nueva_etapa').modal('open');
    });
     $(document).on("click",".add_raza",function(){

        $('#modal_nueva_raza').modal('open');
    });
     $(document).on("click",".add_vacuna",function(){
        $('#modal_nueva_vacuna').modal('open');
    });
     $(document).on("click",".add_tipoalimento",function(){
       $('#modal_nuevo_altipo').modal('open');
    });

</script>
{% endblock js%}