{% extends 'MainBundle:Master:template.html.twig' %}
{% block scripts %}
    {#Bootstrap#}
    <link rel="stylesheet" href="{{ asset('bundles/main/css/bootstrap.css') }}"/>
    <link rel="stylesheet" href="{{ asset('bundles/indicator/css/bootstrap-select.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') }}"/>
    
    <script type="text/javascript" src="{{ asset('bundles/shedule/js/confirmListSMS.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/shedule/bootstrap/js/bootstrap.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/indicator/js/bootstrap-select.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_txt.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/shedule/js/blockUI.js') }}"></script>
    {# <script type="text/javascript" src="{{ asset('bundles/shedule/js/sheduleEvents.js') }}"></script> #}
    
    {# Exportar tabla a txt u otro formato mediante js - No borrar este comentario ni librerias
    <script type="text/javascript" src="{{ asset('bundles/shedule/js/tableExport.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/shedule/js/jquery.base64.js') }}"></script> #}

    <script>
        var selRoom;
        $(document).ready( function () {
            var UrlSalas = '{{ path("search_sala") }}';
            $('#selSede').change( function () {
                $.blockUI({ css: {
                    border: 'none',
                    padding: '15px',
                    '-webkit-border-radius': '10px',
                    '-moz-border-radius': '10px',
                    'border-radius': '10px',
                    color: '#fff'
                },message:'<h3><img style="width: 40px;" src="'+SrcGif+'" style="border: none;"/> ...Por favor Espere', baseZ: 99999 });
                var sede = $(this).val();

                $.ajax({
                    url: UrlSalas,
                    type: 'POST',
                    data: {'sede':sede },
                    success: function (data) {
                        var selSala;
                        var resp = JSON.parse(data);

                        selSala = '<select class="form-control" multiple id="selSala" data-style="btn-primary" data-id="selSala" data-actions-box="true" data-live-search="true" title="Sala">';
                        selSala = selSala + resp.salas;
                        selSala = selSala + '</select>';

                        $.unblockUI();
                        $('#divSelRoom').html(selSala);
                        $("#selSala").addClass('selectpicker2').selectpicker();

                        $('select.selectpicker2').on('change', function(){
                            selRoom = $('.selectpicker2 option:selected').val();
                        });

                        $('#divSelRoom').fadeIn('slow');
                    }
                });
                return false;
            });
        });
    </script>

    <script>
        var UrlSwf = '{{ asset('bundles/shedule/datatable/swf/copy_csv_xls_pdf.swf') }}';
        var SrcGif = '{{ asset('bundles/utilities/images/anim_gif.gif') }}';
        var UrlSearchTxt = ' {{ path('shedule_confirmar_txt') }}';
    </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:34px;
            }
            .glyphicon-ok:before {
                content: "\e013";
            }
            .check-mark {
                color:#888;
            }
    </style>        

{% endblock %}
{% block content %}
    <div class="container-fluid">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">Generaci&oacute;n archivo plano confirmaci&oacute;n</h3>
            </div>
            <div class="panel-body">
                {# Formulario de búsqueda #}
                <div class="row">
                    <form id="formClear" >
                        <div class="form-group">
                            <label class="sr-only">Icono FechaIn</label>
                            <div class="col-md-2">
                                <div class="input-group">
                                    <div class="input-group-addon"><span class="glyphicon glyphicon-calendar" aria-hidden="true"></span></div>
                                    <input name="dateInit" id="dateInit" class="form-control datepicker required" placeholder="Fecha inicial">
                                </div>
                            </div>                            
                        </div>
                        <div class="form-group">
                            <label class="sr-only">Icono FechaFin</label>
                            <div class="col-md-2">
                                <div class="input-group">
                                    <div class="input-group-addon"><span class="glyphicon glyphicon-calendar" aria-hidden="true"></span></div>
                                    <input name="dateEnd" id="dateEnd" class="form-control datepicker required" placeholder="Fecha final">
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="sr-only">Estado de la cita</label>
                            <div class="col-md-2">
                                <select class="form-control selectpicker" id="selEstado" data-style="btn-primary" data-id="selEstado" data-actions-box="true" data-live-search="true" title='Estado'>
                                    <option value="A">Asignada</option>
                                    <option value="C">Cancelada</option>
                                    <option value="CF">Confirmada</option>
                                </select>
                                <input type="hidden" name="selEstado" id="txtselEstado" />
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="sr-only">Sede</label>
                            <div class="col-md-2">
                                <select class="form-control selectpicker" id="selSede" data-style="btn-primary" data-id="selSede" data-actions-box="true" data-live-search="true" title='Sede'>
                                        {% for sede in sedeList %}
                                            <option>{{ sede.varHead }} </option>
                                        {% endfor %}
                                    </select>
                                    <input type="hidden" name="selSede" id="txtselSede" />
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="sr-only">Sala de la cita</label>
                            <div id="divSelRoom" class="col-md-2" style="display: none">

                            </div>
                        </div>

                    </form>
                    <div class="col-md-2">
                        <button class="btn btn-info form-control" id="search" ><span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> Crear tabla</button>
                    </div>
                    <div class="col-md-2">
                        <button class="btn btn-danger form-control" id="clear" ><span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span> Borrar</button>
                    </div>
                    <div class="clearfix"></div>
                    <div class="col-md-12"><hr></div>
                </div>
                {# Fin Formulario de búsqueda #}
                
                {# Tabla de resultados 
                <button  class="btn btn-success pull-right" onClick ="$('.creacion_txt').tableExport({type:'txt',escape:'false'});" >Guardar txt</button>
                <div class="row"><div class="col-md-12"><hr></div></div>#}
                {# La tabla se debe construir en uppercase #}
                <div class="col-md-12" id="divListaSMS" ></div>
                
                {# Fin tabla de resultados #}
            </div>
        </div>
    </div>
{% endblock %}