{% extends 'MainBundle:Master:template.html.twig' %}
{% block scripts %}

    {# CSS #}
    <link rel="stylesheet" href="{{ asset('bundles/main/css/bootstrap.css') }}"/>
    <link rel="stylesheet" href="{{ asset('bundles/shedule/datatable/css/dataTables.bootstrap.css') }}" >
    <link rel="stylesheet" href="{{ asset('bundles/shedule/datatable/css/dataTables.responsive.css') }}" >
    <link rel="stylesheet" href="{{ asset('bundles/shedule/datatable/css/dataTables.tableTools.css') }}" >
    <link rel="stylesheet" href="{{ asset('bundles/shedule/'~ hrk_skin ~'/dataTableCustom.css') }}"/>

    {# Scripts #}
    <script type="text/javascript" src="{{ asset('bundles/shedule/bootstrap/js/bootstrap.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/shedule/datatable/js/jquery.dataTables.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/shedule/datatable/js/dataTables.tableTools.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/shedule/datatable/js/dataTables.responsive.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/shedule/datatable/js/dataTables.bootstrap.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/hirukointegrationhis/js/gridHis.js') }}"></script>
    <script>var url_busqueda = '{{ path("hiruko_integration_his_homepage") }}';</script>
    <script type="text/javascript" src="{{ asset('bundles/shedule/js/blockUI.js') }}"></script>
    <script>
        var UrlSwf = '{{ asset('bundles/shedule/datatable/swf/copy_csv_xls_pdf.swf') }}';
        var SrcGif = '{{ asset('bundles/utilities/images/anim_gif.gif') }}';
        $(function() {
            $( ".datepicker" ).datepicker({
                dateFormat: 'yy-mm-dd'
            });
        });
    </script>

    <style>
        div.DTTT {
            margin-bottom: 0.5em; float: right;
        }
        div.dataTables_wrapper {
            clear: both;
        }
        .input-group input{
            height:34px;
            border-radius: 4px;
        }
        .btn {height:30px;}
    </style>
{% endblock %}
{% block content %}
    <div class="container-fluid">
        <div class="panel panel-primary">
            <div class="panel-heading">
              <h3 class="panel-title">Solicitudes HIS</h3>
            </div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-md-12">
                        {# Formulario busqueda #}
                        <form>
                            <div class="form-group">
                                <div class="col-md-3">
                                    <div class="input-group">
                                        <div class="input-group-addon"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></div>
                                        <input id="nombre" name="nombre" class="form-control" placeholder="Nombre" value="">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-md-3">
                                    <div class="input-group">
                                        <div class="input-group-addon"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></div>
                                        <input id="documento" name="documento" class="form-control" placeholder="Documento" value="">
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-12"></div>

                            <div class="form-group">
                                <div class="col-md-3">
                                    <div class="input-group">
                                        <div class="input-group-addon"><span class="glyphicon glyphicon-calendar" aria-hidden="true"></span></div>
                                        <input id="fechaIni" name="fechaIni" class="form-control datepicker" placeholder="Fecha inicial">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-md-3">
                                    <div class="input-group">
                                        <div class="input-group-addon"><span class="glyphicon glyphicon-calendar" aria-hidden="true"></span></div>
                                        <input id="fechaFin" name="fechaFin" class="form-control datepicker" placeholder="Fecha final">
                                    </div>
                                </div>
                            </div>
                        </form>
                        {# Botones busqueda #}
                        <div class="col-md-3">
                            <button id="buscar" class="btn btn-info form-control"><span class="glyphicon glyphicon-search" aria-hidden="true"></span> Buscar</button>
                        </div>
                        <div class="col-md-3">
                            <button id="borrar" class="btn btn-danger form-control"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Borrar</button>
                        </div>
                        {# Fin Botones busqueda #}

                    </div>
                </div>
                {# Fin Formulario busqueda #}
                <div class="clearfix"></div>
                <div class="col-md-12"><hr></div>

                {# Tabla de resultados #}

                <div class="col-md-12" id="divhis">


                            {{ resultado|raw }}


                </div>
                {# Fin Tabla de resultados #}
            </div>{# Fin body #}
        </div>{# Fin panel #}
    </div> {# Fin Container - fluid #}

    {# Scripts tabla #}
    <script>
        $(document).ready(function() {

            // Input de busqueda por columna
                $('#consultahis tfoot th').each( function () {
                    var title = $('#consultahis thead th').eq( $(this).index() ).text();
                    $(this).html( '<input type="text" />' );
                } );
             // DataTable
            var table = $('#consultahis').DataTable({
                    dom: 'T<"clear">lfrtip',
                    tableTools: {
                            "sSwfPath": UrlSwf,
                            "aButtons": [
                            "xls",
                                {
                                "sExtends": "pdf",
                                "sPdfOrientation": "landscape",
                                "sPdfMessage": "Your custom message would go here."
                                }
                            ]
                    },
                    language: {
                        search:         "Buscar:",
                        lengthMenu:     "Mostrando _MENU_ registros por p\xe1gina",
                        info:           "P\xe1gina _PAGE_ de _PAGES_",
                        infoFiltered:   "(filtr&eacute; de _MAX_ &eacute;l&eacute;ments au total)",
                        loadingRecords: "Cargando",
                        zeroRecords:    "B\xfasqueda sin resultados",
                        emptyTable:     "Tabla sin informaci\xf3n",
                        paginate: {
                        first:      "Primera",
                        previous:   "Anterior",
                        next:       "Siguiente",
                        last:       "\xdaltimo"
                        }
                    }
            });
            // Aplicar busqueda por input
                table.columns().every( function () {
                    var that = this;
                    $( 'input', this.footer() ).on( 'keyup change', function () {
                        that
                            .search( this.value )
                            .draw();
                } );
            } );
        } );
    </script>

{% endblock %}