{% extends 'MainBundle:Master:template.html.twig' %}
{% block scripts %}
    {# CSS #}
  <link rel="stylesheet" href="{{ asset('bundles/utilities/bootstrap-3.3.7/css/bootstrap.min.css') }}"/>
    <link rel="stylesheet" href="{{ asset('bundles/shedule/datatable/css/dataTables.bootstrap.css') }}" >
    <link rel="stylesheet" href="{{ asset('bundles/shedule/'~ hrk_skin ~'/dataTableCustom.css') }}"/>
     
    <script>
        {# Mensajes JS #}
        const messageField = "{{ 'messages.searchData'|trans([], 'LocalizationBundle')}}";
        const processError = "{{ 'messages.ajax.errorProcess'|trans([], 'LocalizationBundle')}}" ;
        
        {# Rutas #}
        const urlSearchPatient = "{{ path('list_patients') }}";
        const urlReportPatient = "{{ path('list_reports') }}";
        
        {# Labels DataTable #}
        const search         = "{{ 'labels.dataTable.search'|trans([], 'LocalizationBundle')}}";
        const lengthMenu     = "{{ 'labels.dataTable.lengthMenu'|trans([], 'LocalizationBundle')}}";
        const info           = "{{ 'labels.dataTable.info'|trans([], 'LocalizationBundle')}}";
        const infoFiltered   = "{{ 'labels.dataTable.infoFiltered'|trans([], 'LocalizationBundle')}}";
        const InfoEmpty      = "{{ 'labels.dataTable.InfoEmpty'|trans([], 'LocalizationBundle')}}";
        const loadingRecords = "{{ 'labels.dataTable.loadingRecords'|trans([], 'LocalizationBundle')}}";
        const zeroRecords    = "{{ 'labels.dataTable.zeroRecords'|trans([], 'LocalizationBundle')}}";
        const emptyTable     = "{{ 'labels.dataTable.emptyTable'|trans([], 'LocalizationBundle')}}";
        const first          = "{{ 'labels.dataTable.paginate.first'|trans([], 'LocalizationBundle')}}";
        const previous       = "{{ 'labels.dataTable.paginate.previous'|trans([], 'LocalizationBundle')}}";
        const next           = "{{ 'labels.dataTable.paginate.next'|trans([], 'LocalizationBundle')}}";
        const last           = "{{ 'labels.dataTable.paginate.last'|trans([], 'LocalizationBundle')}}";
    </script>
    {# Scripts #}
    <script type="text/javascript" src="{{ asset('bundles/shedule/datatable/js/jquery.dataTables.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/reportpatients/js/searchPatient.js') }}"></script>
{% endblock %}
{% block content %}
    <div class="container-fluid">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">
                    {{ 'reportPatient.title.searchPatient'|trans([],'LocalizationBundle') }}
                </h3>
            </div>
            <div class="panel-body">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <div class="form-group">
                            <div class="col-md-4">
                                <div class="input-group">
                                    <div class="input-group-addon">
                                        <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
                                    </div>
                                    <input 
                                        id    ="search" 
                                        name  ="search" 
                                        class ="form-control" 
                                        placeholder = "{{ 'button.search'|trans([], 'LocalizationBundle') }}" autofocus
                                    />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="clearfix"></div>
                
                {# Cargando #} 
                <div class="col-md-12 text-center hidden" id="loading">
                    <img src="{{ asset('bundles/utilities/images/spinner.gif') }}"/>
                </div>
                
                {# Lista pacientes #} 
                <div class="col-md-12" id="dataPatient"></div>
                
                {# Visualizar Informacion del paciente #} 
                <div class="col-md-12" id="reportsPatient"></div>
            </div>
        </div>
    </div>
                            
    {# Visualizar Mensaje #} 
    <div id="message"><h4 class="panel-title text-center"></h4></div>
    
{% endblock %}