{% extends "base.html.twig" %}
{% block titulo %} Inscripción a talleres {% endblock %}
{% block body %}
    <div class="box box-info">
        <div class="box-header">
            <h3 class="box-title">{{ app.user.nombre }} {{ app.user.primerApellido }}</h3>
        </div>
        <div class="box-body">
            <div class="row">
                <div class="col-md-4">
                    <h3>Sábado, 14:30</h3>
                    <table class="table table-responsive table-bordered">
                        <tr>
                            <td id="v" class="alternar">
                                <span class="pull-right label bg-red" style="display: none;" id="v_completo"> COMPLETO </span>
                                <strong>Verónica Molfino:</strong><br>
                                Enseñanza de la Matemática para la Justicia Social...
                            </td>
                        </tr>
                        <tr>
                            <td id="o">Comunicaciones</strong><br>
                                A cargo de autores varios. No requiere inscripción.
                            </td>
                        </tr>
                    </table>

                </div>
                <div class="col-md-4">
                    <h3>Sábado, 16:30</h3>
                    <table class="table table-responsive table-bordered">
                        <tr>
                            <td id="l1" class="alternar">
                                <span class="pull-right label bg-red" style="display: none;" id="l1_completo"> COMPLETO </span>
                                <strong>Luis Radford:</strong><br>
                                El pensamiento algebraico
                            </td>
                        </tr>
                        <tr>
                            <td id="a1" class="alternar">
                                <span class="pull-right label bg-red" style="display: none;" id="a1_completo"> COMPLETO </span>
                                <strong>Abraham Arcavi:</strong><br>
                                Decíamos ayer...
                            </td>
                        </tr>
                    </table>

                </div>
                <div class="col-md-4">
                    <h3>Domingo, 11:00</h3>
                    <table class="table table-responsive table-bordered">
                        <tr>
                            <td id="l2" class="alternar">
                                <span class="pull-right label bg-red" style="display: none;" id="l2_completo"> COMPLETO </span>
                                <strong>Luis Radford:</strong><br>
                                El pensamiento algebraico
                            </td>
                        </tr>
                        <tr>
                            <td id="a2" class="alternar">
                                <span class="pull-right label bg-red" style="display: none;" id="a2_completo"> COMPLETO </span>
                                <strong>Abraham Arcavi:</strong><br>
                                Decíamos ayer...
                            </td>
                        </tr>
                    </table>

                </div>
            </div>
        </div>
        <div class="box-footer">
            <div class="pull-right">
                <a class="btn btn-primary btn-flat" href="javascript:void(0)" onclick="guardar()" >Guardar</a>

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



{% endblock %}
{% block javascripts %}

    <script>

        //v=70 -> 39
        //a1=63 -> 7
        //a2=68 -> 8
        //l1=65 -> 49
        //l2=69 -> 9

        function arreglarColores() {
            if (a1) {
                $('#a1').addClass('bg-primary');
            } else {
                $('#a1').removeClass('bg-primary');
            }
            if (a2) {
                $('#a2').addClass('bg-primary');
            } else {
                $('#a2').removeClass('bg-primary');
            }
            if (l1) {
                $('#l1').addClass('bg-primary');
            } else {
                $('#l1').removeClass('bg-primary');
            }
            if (l2) {
                $('#l2').addClass('bg-primary');
            } else {
                $('#l2').removeClass('bg-primary');
            }
            if (v) {
                $('#v').addClass('bg-primary');
            } else {
                $('#v').removeClass('bg-primary');
            }
        }

        $(function () {

            v_lleno = false;
            a1_lleno = false;
            a2_lleno = false;
            l1_lleno = false;
            l2_lleno = false;

            v = false;
            a1 = false;
            a2 = false;
            l1 = false;
            l2 = false;

            arreglarColores();

            if(v_lleno){
                $('#v_completo').show();
            }
            if(l1_lleno){
                $('#l1_completo').show();
            }
            if(l2_lleno){
                $('#l2_completo').show();
            }
            if(a1_lleno){
                $('#a1_completo').show();
            }
            if(a2_lleno){
                $('#a2_completo').show();
            }


            $('#v').click(function () {
                if (!v_lleno || v) {
                    v = !v;
                    arreglarColores();
                }
            });
            $('#o').click(function () {
                v = false;
                arreglarColores();
            });
            $('#l1').click(function () {
                if (!l1_lleno || l1) {
                    l1 = !l1;
                    if (l1) {
                        l2 = false;
                        a1 = false;
                    }
                    arreglarColores();
                }
            });
            $('#l2').click(function () {
                if (!l2_lleno || l2) {
                    l2 = !l2;
                    if (l2) {
                        l1 = false;
                        a2 = false;
                    }
                    arreglarColores();
                }
            });
            $('#a1').click(function () {
                if (!a1_lleno || a1) {
                    a1 = !a1;
                    if (a1) {
                        a2 = false;
                        l1 = false;
                    }
                    arreglarColores();
                }
            });
            $('#a2').click(function () {
                if (!a2_lleno || a2) {
                    a2 = !a2;
                    if (a2) {
                        a1 = false;
                        l2 = false;
                    }
                    arreglarColores();
                }
            });
        });

        //v=70 -> 39
        //a1=63 -> 7
        //a2=68 -> 8
        //l1=65 -> 49
        //l2=69 -> 9
        function guardar(){
            var bloques = [];
            if(v) bloques.push('39');
            if(a1) bloques.push('7');
            if(a2) bloques.push('8');
            if(l1) bloques.push('49');
            if(l2) bloques.push('9');
            alert(bloques);
        }
    </script>

{% endblock %}