{% extends 'base.html.twig' %}
{% block titulo %}Trabajos y bloques horarios{% endblock %}
{% block subtitulo %}
{% endblock %}

{% block body %}
    <div class="row">
        <div class="col-md-6">

            <div class="box box-info">
                <div class="box-header with-border">
                    <h3 class="box-title">
                        {% if action == 'crear' %}Creación{% endif %}
                        {% if action == 'editar' %}Edición{% endif %}
                        {% if action == 'asignar' %}Asignación{% endif %}
                    </h3>
                </div>
                <div class="box-body">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="callout callout-info">
                                {{ bloque.dia }}
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="callout callout-info">
                                {{ bloque.horaMinutosComienzo }} - {{ bloque.horaMinutosFin }}
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="callout callout-info">
                                {{ bloque.lugar }}
                            </div>
                        </div>

                    </div>
                    {{ form_start(form) }}
                    {{ form_widget(form) }}
                    <h5>Filtro por modalidad</h5>
                    <div class="btn-group">
                        {% for mod in modalidades %}
                            {% if mod.id == modalidad %}
                                {% set boton = 'success' %}
                                {% else %}
                                {% set boton = 'default' %}
                            {% endif %}
                            <a class="btn btn-{{ boton }} btn-flat" href="{{ path('editar_trabajo_bloque', {'id': bloque.id | nzo_encrypt, 'modalidad': mod.id | nzo_encrypt }) }}">{{ mod.nombre }}</a>
                        {% endfor %}
                        <a class="btn btn-default btn-flat" href="{{ path('editar_trabajo_bloque', {'id': bloque.id | nzo_encrypt, 'modalidad': 0 | nzo_encrypt }) }}">Todos</a>
                    </div>
                </div>
                <div class="box-footer">


                    <a class="btn btn-default btn-flat pull-left" href="{{ path('secretaria_listado_horarios') }}">Calendario</a>

                    <input class="btn btn-primary btn-flat pull-right" type="submit" value="Guardar"/>
                    <a class="btn btn-danger btn-flat pull-right" href="{{ path('borrar_trabajo_bloque', {'id': bloque.id | nzo_encrypt}) }}">Borrar esta asignación</a>

                    {{ form_end(form) }}
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="box box-success" id="caja_trabajo">
                <div class="box-header">
                    <h3 class="box-title" id="titulo"></h3>
                </div>
                <div class="box-body">
                    <span id="autores"></span>
                    <hr>
                    <span id="modalidad"></span>
                    <hr>
                    <span id="tema"></span>
                    <hr>
                    <span id="nivel"></span>
                    <hr>
                    <h4 class="text-blue text-center" id="estatus"></h4>
                    <hr>
                    <h4 class="text-blue text-center" id="conflicto"></h4>
                </div>
                <div class="overlay" id="cargando"><i class="fa fa-refresh fa-spin"></i></div>
            </div>

        </div>
    </div>


{% endblock %}
{% block javascripts %}
    <script>
        $("#appbundle_bloque_horario_trabajo").change(function () {
            $.ajax({
                url: '{{ path('trabajo_datos_ajax') }}',
                dataType: 'json',
                type: 'post',
                data: {
                    'trabajo': $('#appbundle_bloque_horario_trabajo option:selected').val(),
                    'bloque': {{ bloque.id }}
                },
                beforeSend: function () {
                    $("#cargando").show();
                },
                success: function (respuesta) {
                    $("#titulo").html($('#appbundle_bloque_horario_trabajo option:selected').text());
                    $("#autores").html(respuesta.autores);
                    $("#modalidad").html(respuesta.modalidad);
                    $("#tema").html(respuesta.tema);
                    $("#nivel").html(respuesta.nivel);
                    $("#estatus").html(respuesta.estatus);
                    $("#cargando").hide();
                }
            });
            $.ajax({
                url: '{{ path('chequear-conflicto-ajax') }}',
                dataType: 'json',
                type: 'post',
                data: {
                    'bloque': {{ bloque.id }},
                    'trabajo': $('#appbundle_bloque_horario_trabajo option:selected').val()
                },
                beforeSend: function () {
                    $("#conflicto").html("Buscando conflictos...");
                },
                success: function (respuesta) {
                    $("#conflicto").html(respuesta.output);
                }
            });
        });

        $("#appbundle_bloque_horario_trabajo").trigger("change");
    </script>
{% endblock %}