{% autoescape false %}

<script>
    function datetime_by_attendance(attendance_id, thematic_advance_id) {
        $.ajax({
            contentType: "application/x-www-form-urlencoded",
            beforeSend: function(myObject) {},
            type: "GET",
            url: "{{ url('legacy_main', {'name' : 'inc/ajax/thematic.ajax.php'}) ~ '?' ~ course_url_params ~ '&a=get_datetime_by_attendance' }}",
            data: "attendance_id="+attendance_id+"&thematic_advance_id="+thematic_advance_id,
            success: function(data) {
                $("#div_datetime_attendance").html(data);
                if (thematic_advance_id == 0) {
                    $("#start_date_select_calendar").val($("#start_date_select_calendar option:first").val());
                }
            }
        });
    }

    function updateDoneThematicAdvance(advanceId) {
        $.ajax({
            contentType: "application/x-www-form-urlencoded",
            beforeSend: function(myObject) {},
            type: "GET",
            url: "{{ url('legacy_main', {'name' : 'inc/ajax/thematic.ajax.php'}) ~ '?' ~ course_url_params ~ '&a=update_done_thematic_advance' }}",
            data: "thematic_advance_id="+advanceId,
            success: function(data) {
                $("#div_result").html(data);
            }
        });

        // clean all radios
        for (var i=0; i< $(".done_thematic").length;i++) {
            var id_radio_thematic = $(".done_thematic").get(i).id;
            $("#td_"+id_radio_thematic).css({"background-color":"#FFF"});
        }

        // set background to previous radios
        for (var i=0; i < $(".done_thematic").length;i++) {
            var id_radio_thematic = $(".done_thematic").get(i).id;
            $("#td_"+id_radio_thematic).css({"background-color":"#E5EDF9"});
            if ($(".done_thematic").get(i).value == advanceId) {
                break;
            }
        }
    }
</script>

{% if data is not empty %}
{% set tutor = is_granted('ROLE_TEACHER') %}
<div id="course-progress" class="thematic">
    <div class="row">
        <div class="col-md-12">
            <div class="bar-progress">
                <div class="float-right">
                    <div class="score-progress">
                        <h3>{{ 'Progress' | trans }}: <span id="div_result">{{ score_progress }}</span> %</h3>
                    </div>
                </div>
            </div>
            <div class="table-responsive">
                <table width="100%" class="table">
                    <thead>
                        <tr>
                            <th scope="col" style="width: 35%">{{ 'Thematic' | trans }}</th>
                            <th scope="col" style="width: 40%">{{ 'Thematic plan' | trans }}</th>
                            <th scope="col" style="width: 25%">{{ 'Thematic advance' | trans }}</th>
                        </tr>
                    </thead>
                    <tbody>
                    {% for item in data %}
                        <tr>
                            <td id="id-thematic-{{ item.iid }}">
                                {% if session_star is not defined %}
                                    <h5>{{ item.title }}</h5>
                                {% else %}
                                    <h5>{{ item.title }} {{ session_star }}</h5>
                                {% endif %}
                                {{ item.content }}
                                <div class="btn-group btn-group-sm">
                                    {{ extra[item.iid]['toolbar'] }}
                                </div>
                            </td>
                            <td>
                                <div class="thematic_plan_{{ item.iid }}">
                                    {% if tutor %}
                                        <div class="btn-group">
                                            <a title="{{ 'Edit thematic section' | trans }}"
                                               href="index.php?{{ course_url_params }}&origin=thematic_details&action=thematic_plan_list&thematic_id={{ item.iid }}&width=700&height=500"
                                               class="btn btn-outline-secondary btn-sm">
                                                {{ 'pencil' | mdi_icon }}
                                            </a>
                                        </div>
                                    {% endif %}

                                    {% if item.plans is empty %}
                                        <div class="alert-thematic">
                                            <div class="alert alert-info" role="alert">{{ 'There is no thematic plan for now' | trans }}</div>
                                        </div>
                                    {% else %}
                                        {% for plan in item.plans %}
                                            <h5>{{ plan.title }}</h5>
                                            {{ plan.description }}
                                        {% endfor %}
                                    {% endif %}
                                </div>
                            </td>
                            <td>
                                <div class="thematic-advance">
                                {% if tutor %}
                                    <div class="btn-group">
                                        <a title="{{ 'New thematic advance' | trans }}"
                                           href="index.php?{{ course_url_params }}&action=thematic_advance_add&thematic_id={{ item.iid }}"
                                           class="btn btn-outline-secondary btn-sm">
                                            {{ 'plus-circle' | mdi_icon }}
                                        </a>
                                    </div>
                                {% endif %}
                                <table width="100%" class="table">
                                {% if item.advances is not empty %}
                                    {% for advance in item.advances %}
                                        <tr>
                                            <td style="width: 90%"
                                                class="thematic_advance_content"
                                                id="thematic_advance_content_id_{{ advance.iid }}">
                                                <div id="thematic_advance_{{ advance.iid }}">
                                                <strong>{{ advance.startDate | format_date }}</strong>
                                                {{ advance.content }}
                                                </div>
                                                {% if tutor %}
                                                    <div class="toolbar-actions">
                                                        <div id="thematic_advance_tools_{{ advance.iid }}" class="thematic_advance_actions">
                                                            <div class="btn-group btn-group-sm">
                                                                <a class="btn btn-default btn-sm"
                                                                   href="index.php?{{ course_url_params }}&action=thematic_advance_edit&thematic_id={{ item.iid }}&thematic_advance_id={{ advance.iid }}"
                                                                   title="{{ 'Edit' |trans }}">
                                                                    {{ 'pencil' | mdi_icon }}
                                                                </a>
                                                                <a class="btn btn-default btn-sm"
                                                                   onclick="javascript:if(!confirm('{{ 'Are you sure to delete' | trans }}')) return false;"
                                                                   href="index.php?{{ course_url_params }}&action=thematic_advance_delete&thematic_id={{ item.iid }}&thematic_advance_id={{ advance.iid }}"
                                                                   title="{{ 'Delete' |trans }}">
                                                                    {{ 'delete' | mdi_icon }}
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                {% endif %}
                                                </div>
                                            </td>
                                            {% if advance.doneAdvance == 1 %}
                                                {% set color = "background-color:#E5EDF9;" %}
                                            {% else %}
                                                {% set color = "background-color:#FFFFFF;" %}
                                            {% endif %}
                                            {% if tutor %}
                                                <td
                                                    style="width: 10%; {{ color }}"
                                                    id="td_done_thematic_{{ advance.iid }}">
                                                    {% set check = ""  %}
                                                    {% if extra[item.iid]['last_done'] == advance.iid %}
                                                        {% set check = "checked"  %}
                                                    {% endif %}
                                                    <input
                                                        type="radio"
                                                        class="done_thematic"
                                                       id="done_thematic_{{ advance.iid }}"
                                                       name="done_thematic"
                                                       value="{{ advance.iid }}" {{ check }}
                                                       onclick="updateDoneThematicAdvance(this.value);"
                                                    />
                                            {% else %}
                                                </td>
                                            {% endif %}
                                        </tr>
                                    {% endfor %}
                                {% else %}
                                    <div class="alert alert-info" role="alert">
                                        {{ 'There is no thematic advance' | trans }}
                                    </div>
                                {% endif %}
                                </table>
                                </div>
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
{% else %}
    {% if is_allowed_to_edit %}
        {{ no_data }}
    {% else %}
        <div class="alert alert-info" role="alert">{{ 'There is no thematic section' | trans }}</div>
    {% endif %}
{% endif %}
{% endautoescape %}