{% block scripts %}
    <script type="text/javascript" src="{{ asset('bundles/shedule/js/schedule_Appointment_SearchSpace.js') }}"></script>
    <script type="text/javascript" >
        var UrlSearchSpaceSchedule = '{{ path("schedule_appointment_SearchSpaceSchedule") }}';
        var UrlSearchLocks= '{{ path("search_locks") }}';
        var UrlSearchSpacesLocks= '{{ path("search_locks_spaces") }}';
        var diaFestivo='{{ 'room.dayHoliday'|trans([], 'LocalizationBundle') }}';
        var diaBloqueado='{{ 'room.dayblocked'|trans([], 'LocalizationBundle') }}';
    </script>
    <style>
        .horasagenda{
            color:#080808;
        }
        .selectedHo{
            color:#6b6b6b;
            padding-left: 13px;
        }
    </style>
{% endblock %}
{% block content %}
    <div class="container-fluid">

        <div class="col-md-6"><!-- Datepicker -->
            <div class="form-group">
                <label class="col-md-6">{{ 'schedule.select_schedule'|trans([], 'LocalizationBundle') }}</label>
                <div class="col-md-6">
                    <select class="form-control" id="rules_schedule_room"><option>{{ 'receive.select'|trans([], 'LocalizationBundle') }}</option></select>
                    <div id="Hidden">

                    </div>
                </div>
            </div>

            <div class="form-group">
                <label class="col-md-6">{{ 'schedule.date_find_schedule'|trans([], 'LocalizationBundle') }}</label>
                <div class="col-md-6">
                    <input name="dateSearchSpace" id="dateSearchSpace" class="form-control field_receive" type="text" required="required" />
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-6">{{ 'schedule.Reservation_form'|trans([], 'LocalizationBundle') }}</label>
                <div class="col-md-6">
                    <select id="reservation_form" class="form-control">
                        <option value="">{{ 'receive.select'|trans([], 'LocalizationBundle') }}</option>
                        <option value="0">{{ 'schedule.reservationForm.presential'|trans([], 'LocalizationBundle') }}</option>
                        <option value="1">{{ 'schedule.reservationForm.telephone'|trans([], 'LocalizationBundle') }}</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-6">{{ 'schedule.availability'|trans([], 'LocalizationBundle') }}</label>
                <div class="col-md-6">
                    <select id="availability" class="form-control">
                        <option value="">{{ 'receive.select'|trans([], 'LocalizationBundle') }}</option>
                        <option value="0">{{ 'schedule.availabilityForm.entity'|trans([], 'LocalizationBundle') }}</option>
                        <option value="1">{{ 'schedule.availabilityForm.patient'|trans([], 'LocalizationBundle') }}</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-6">Seleccione una Notificación SMS</label>
                <div class="col-sm-6">
                    <select id="select_schedule_sms" class="form-control">
                        <option value="">{{ 'receive.select'|trans([], 'LocalizationBundle') }}</option>
                        {% for Schedulesms in scheduleList %}
                        <option value="{{ Schedulesms.id }}">{{ Schedulesms.name }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>
        </div>


        <div class="col-md-6">
            <div class="form-group">
                <div class="col-md-12">
                    <textarea id="commentsAppointment" class="form-control" rows="3" placeholder="{{ 'schedule.comments'|trans([], 'LocalizationBundle') }}"></textarea>
                </div>
            </div>
        </div>

        <div class="clearfix"></div>
        {# Btn Buscar Espacios #}
        <div class="col-md-6">
            <div class="col-sm-3">
                <input type="button" class="form-control btn btn-primary" id="buttonSearchSpace" value="{{ 'utilities.search.button'|trans([], 'LocalizationBundle') }}"/>
            </div>
        </div>

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

        <div class="clearfix"></div>

       <div class="col-md-6" >

           <div class="panel panel-primary">
               <div class="panel-heading">Seleccione la hora de la cita</div>
               <div class="panel-body horasagenda">
                   <!-- Contenido del panel -->
                   <!-- columna 1 -->

                   <div class="col-md-4" id="horasAgenda1"  >
                   </div>

                   <!-- columna 2 -->
                  <div class="col-md-4" id="horasAgenda2">
                   </div>

                   <!-- columna 3 -->
                   <div class="col-md-4"id="horasAgenda3">
                   </div>

               </div>
           </div>

       {# <div class="col-sm-6" id="horasAgenda1">

            </div>

            <div class="col-sm-6" style="border-left: solid; border-color: white" id="horasAgenda2" >
            </div>
            #}
        </div>
       
        {# Fin Btn Buscar Espacios #}
        <div class="clearfix"></div>
        <div>
            <div id="spinner2" style="display: none;">
                <img style="width: 40px; border: none;" src="{{ asset('bundles/utilities/images/spinner.gif') }}" />
            </div>
        </div>
        <!-- </div> table data-->
        <!--Muestra un mensaje cuando se debe mostrar al usuario algún mensaje que no sea de error-->
        <div>
            <div id="confirm2" class="ui-widget">
                <div class="ui-state-highlight ui-corner-all" style="margin-top: 20px; padding: 0 .7em;">
                    <p>
                        <span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>
                    <div id="mensajeConfirm2"></div>
                    </p>
                </div>
            </div>
            <!--Muestra un mensaje cuando se presenta algún error-->
            <div id="error2" class="ui-widget" style="margin-top: 10px;">
                <div class="ui-state-error ui-corner-all" style="padding: 0 .7em;">
                    <p>
                        <span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span>

                    <div id="mensajeError2"></div>
                    </p>
                </div>
            </div>
        </div>
        <div id="alertError">
            <div class="alert alert-danger" id="alertDanger" role="alert"></div>
        </div>
    </div>
{% endblock %}