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

{% block scripts %}
{# CSS #}
{#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') }}"/>


{# JS #}

<script type="text/javascript" src="{{ asset('bundles/indicator/highcharts/highcharts.js') }}"></script>
<script type="text/javascript" src="{{ asset('bundles/indicator/highcharts/data.js') }}"></script>
<script type="text/javascript" src="{{ asset('bundles/indicator/highcharts/drilldown.js') }}"></script>
<script type="text/javascript" src="{{ asset('bundles/indicator/highcharts/exporting.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.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/indicator/js/jquery-numerator.js') }}"></script>
<script type="text/javascript" src="{{ asset('bundles/shedule/js/blockUI.js') }}"></script>
<script type="text/javascript" src="{{ asset('bundles/indicator/js/export-csv.js') }}"></script>
<script>
    var SrcSwf = '{{ asset('bundles/indicator/datatable/swf/copy_csv_xls_pdf.swf') }}';
    var SrcGif = '{{ asset('bundles/utilities/images/anim_gif.gif') }}';
</script>
<style>
    table th {
        text-transform: uppercase;
        text-align: center;
    }
    table td a{
        color:#69a5d7;
        text-transform: uppercase;
    }
     table td a:hover{
        color:#0388f6;
        text-decoration: none;
    }
    table td {
        color:#8896a0;
    }
    tfoot input {
        width: 100%;
        padding: 3px;
        box-sizing: border-box;
    }
    tfoot {
        display: table-header-group;
    }
    tr.group,
    tr.group:hover {
        background-color: #ddd !important;
    }
    div.DTTT { margin-bottom: 0.5em; float: right; }
    div.dataTables_wrapper { clear: both; }
   .cor{
        height:34px;
        border-radius: 4px;
    }
    .btn{
        height:34px;
    }
    .well {
        margin-top:0;
        margin-bottom:0;
        color:#ffffff;
    }
    .well h4 {
        color:#ffffff;
    }
    .mainwell{
        padding-top:0;
        padding-bottom:0;
        background: -webkit-linear-gradient(left, #5c9bd1 , #88d4f4);
        background: -o-linear-gradient(right, #5c9bd1, #88d4f4); 
        background: -moz-linear-gradient(right, #5c9bd1, #88d4f4); 
        background: linear-gradient(to right, #5c9bd1 , #88d4f4); 
        color:#fff;
    }
    .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">Indicador de cancelaciones</h3>
            </div>

            <div class="panel-body">
                {# Formulario de búsqueda #}
                <div class="row">
                    <div class="col-md-12">
                        <form>
                            <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" class="form-control datepicker cor" 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" class="form-control datepicker cor" placeholder="Fecha final">
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="sr-only">Sede</label>
                                <div class="col-md-3">
                                    <select class="form-control selectpicker" data-style="btn-primary" data-actions-box="true" data-live-search="true" multiple title='Sede'>
                                            <option>Centro</option>
                                            <option>Sur</option>
                                    </select>
                                </div>
                            </div>
                        </form>
                        <div class="col-md-5">
                            <button class="btn btn-info"><span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> Buscar</button>
                            <button class="btn btn-danger"><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>
                </div>
                {# Fin Formulario de búsqueda #}
                 <div class="col-md-12" style="margin-bottom:10px">
                    <div class="well mainwell">
                        <h4>500 Cancelaciones -- 1 de Septiembre - 4 de Septiembre <span class="glyphicon glyphicon-stats pull-right" aria-hidden="true" style="font-size:20px;"></span></h4>
                    </div>
                </div>

                <div class="clearfix"></div>
                <div class="col-md-12" style="margin-top:15px"></div>
                {# Graficos #}
                <div class="col-md-6">
                    <div class="panel panel-default">
                        <div class="panel-body">
                            <div id="cancel_mod" style="min-width: 310px; min-height: 400px; margin: 0 auto"></div>
                        </div>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="panel panel-default">
                        <div class="panel-body">
                            <div id="cancel_est" style="min-width: 310px; min-height: 400px; margin: 0 auto"></div>
                        </div>
                    </div>
                </div>
                {# Fin graficos #}

                <div class="col-md-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title">Detalle de cancelaciones</h3>
                        </div>
                        <div class="panel-body">
                            <!-- Tabla de resultados --> 
                            <table id="cancelaciones" class="table table-condensed table-hover table-striped table-bordered dt-responsive" cellspacing="0" width="100%">
                                <thead>
                                    <tr>
                                       <th>Fecha cancelaci&oacute;n</th>
                                       <th>Paciente</th>
                                       <th>Documento</th>
                                       <th>Tel&eacute;fono</th>
                                       <th>Email</th>
                                       <th>Estudio</th>
                                       <th>Modalidad</th>
                                       <th>Estado</th>
                                       <th>Profesional</th>
                                       <th>Motivos</th>
                                    </tr>
                                </thead>
                                <tfoot>
                                    <tr>
                                        <th>Fecha cancelaci&oacute;n</th>
                                       <th>Paciente</th>
                                       <th>Documento</th>
                                       <th>Tel&eacute;fono</th>
                                       <th>Email</th>
                                       <th>Estudio</th>
                                       <th>Modalidad</th>
                                       <th>Estado</th>
                                       <th>Profesional</th>
                                       <th>Motivos</th>
                                    </tr>
                                </tfoot>
                                <tbody>
                                    <tr>
                                        <td>25-08-2015</td>
                                       <td>Reinaldo Valencia Aristizabal</td>
                                       <td>81566543</td>
                                       <td>3001234578</td>
                                       <td>reinaldo.valencia@imexhs.com</td>
                                       <td>Senos costofrénicos</td>
                                       <td>US</td>
                                       <td>Pendiente Lectura</td>
                                       <td>Admin Sede</td>
                                       <td>El paciente se encuentra repetido</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    {# Tablas creacion graficos #}
    {# Tabla creacion del grafico 1 #}
    <table id="mod" class="hidden">
        <thead>
            <tr>
                <th></th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>MG</td>
                <td>50</td>
            </tr>
            <tr>
                <td>CT</td>
                <td>150</td>
            </tr>
            <tr>
                <td>MR</td>
                <td>75</td>
            </tr>
            <tr>
                <td>PT</td>
                <td>5</td>
            </tr>
            <tr>
                <td>OT</td>
                <td>95</td>
            </tr>
            <tr>
                <td>CR</td>
                <td>68</td>
            </tr>


        </tbody>
    </table>
    {# Tabla creacion del grafico 2 estados #}
    <table id="estados" class="hidden">
        <thead>
            <tr>
                <th></th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Pendiente recepci&oacute;n</td>
                <td>150</td>
            </tr>
            <tr>
                <td>Pendiente asistencial</td>
                <td>150</td>
            </tr>
            <tr>
                <td>Pendiente lectura</td>
                <td>75</td>
            </tr>
            <tr>
                <td>Pentiente transcripci&oacute;n</td>
                <td>5</td>
            </tr>
            <tr>
                <td>Pendiente validaci&oacute;n</td>
                <td>95</td>
            </tr>
        </tbody>
    </table>
    
    {# Scripts #}
    {# Grafico  Modalidades #}
        <script>
            $(function () {
                $('#cancel_mod').highcharts({
                    data: {
                        table: 'mod'
                    },
                    chart: {
                        type: 'column'
                    },
                    title: {
                        text: 'Total cancelaciones'
                    },
                    subtitle: {
                        text: 'Total estudios cancelados por modalidad'
                    },
                    yAxis: {
                        allowDecimals: false,
                        title: {
                            text: 'N\xfamero de estudios cancelados'
                        }
                    },
                    colors: ['#337AB7'],
                    plotOptions: {
                        series: {
                            borderWidth: 0,
                            dataLabels: {
                                enabled: true,
                                format: '{point.y:.1f}'
                            }
                        }
                    },
                    legend: {
                        enabled: false
                    },
                    credits: {
                        enabled:false
                    },
                     tooltip: {
                       pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.1f}</b><br/>'
                    }
                });
            });
        </script>
    {# Grafico Estados  #}
        <script>
            $(function () {
                $('#cancel_est').highcharts({
                    data: {
                        table: 'estados'
                    },
                    chart: {
                        type: 'column'
                    },
                    title: {
                        text: 'Total cancelaciones'
                    },
                    subtitle: {
                        text: 'Total estudios cancelados por estados <br> (Estado en el cual fue cancelado el estudio)'
                    },
                    yAxis: {
                        allowDecimals: false,
                        title: {
                            text: 'N\xfamero de estudios cancelados'
                        }
                    },
                    colors: ['#D9534F'],
                    plotOptions: {
                        series: {
                            borderWidth: 0,
                            dataLabels: {
                                enabled: true,
                                format: '{point.y:.1f}'
                            }
                        }
                    },
                    legend: {
                        enabled: false
                    },
                    credits: {
                        enabled:false
                    },
                     tooltip: {
                       pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.1f}</b><br/>'
                    }
                });
            });
        </script>
        
    {# Tabla busqueda #}
    <script>
    $(document).ready(function() {
         $('#cancelaciones tfoot th').each( function () {
            var title = $('#cancelaciones thead th').eq( $(this).index() ).text();
            $(this).html( '<input type="text" />' );
        } );

         // DataTable
        var table = $('#cancelaciones').DataTable({
                dom: 'T<"clear">lfrtip',
                tableTools: {
                        "sSwfPath": SrcSwf,
                        "aButtons": [
                        "xls",
                            {
                            "sExtends": "pdf",
                            "sPdfOrientation": "landscape",
                            "sPdfMessage": "Cancelaciones."
                            }							
                        ]
                },
                language: {
                    search:         "Buscar:",
                    lengthMenu:     "Mostrando _MENU_ registros por p\xe1gina",
                    info:           "P\xe1gina _PAGE_ de _PAGES_",
                    infoFiltered:   "(filtrados de un total de _MAX_ registros)",
                    loadingRecords: "Cargando",
                    zeroRecords:    "B\xfasqueda sin resultados",
                    emptyTable:     "Tabla sin informaci\xf3n",
                    paginate: {
                    first:      "Primera",
                    previous:   "Anterior",
                    next:       "Siguiente",
                    last:       "\xdaltimo"
                    }
                }
        });
           table.columns().every( function () {
            var that = this;

            $( 'input', this.footer() ).on( 'keyup change', function () {
                that
                    .search( this.value )
                    .draw();
            } );
        } );
    } );
    </script>
{% endblock %}