{% extends "base.html.twig" %}
{% block main %}
    <div class="row">
        <div class="col-md-12 col-xs-12">
            <div class="x_panel">
                <div class="x_title">
                    <h2>Inventario: <small></small></h2>
                    <select title="tecnicos">
                        <option value ="">-</option>
                        {% for tecnico in tecnicos %}
                            <option value ="{{ tecnico.id }}">{{ tecnico.nombre ~ " " ~ tecnico.apellidos }}</option>
                        {% endfor %}
                    </select>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content">
                    <table class="table table-striped DataTable">
                        <thead>
                        <tr>
                            <th>Material</th>
                            <th>Cantidad</th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
{% endblock main %}

{% block javascripts %}

    <script>
        function llenarTabla(jsonData){
            var table = $.fn.dataTable.tables({ visible: true, api: true });
            table.clear().draw();
            var data = {};
            jQuery.each(jsonData, function(i, val){
                crearLinea(table, val);
            });
        }

        function crearLinea(tabla, datos){
            var cantidad = datos.cantidad.toString();
            if(datos.alerta) cantidad = cantidad + '<i class="fa fa-exclamation-circle"></i>';
            data = {
                0 : datos.nombre,
                1 : cantidad,
            };
            tabla.row.add(data).draw();
        }

        $(document).ready(function (){
            $("select[title='tecnicos']").change(function(){
                if(! $(this).val()){ return null}
                var url = '{{ path("gestion_movimientos_tecnico", {'id':"changeMe"}) }}';
                url = url.replace("changeMe", $(this).val());
                $.ajax({
                    method: "GET",
                    url: url,
                })
                    .done(function( msg ) {
                        llenarTabla(msg);
                    });
            });
        });
    </script>

{% endblock javascripts %}