{% extends 'base.html.twig' %}
{% import 'navigation/switch_months.html.twig' as navigation %}
{% block body %}
    {{ navigation.month_menu('app_base',months,currentMonth) }}
    <div class="
        row
        d-flex
        row-cols-sm-1
        row-cols-lg-3
        justify-content-center
        reports-all"
    >
        {% for id,reports in reportsGroup %}
            <div class="status-row" style="{% if isOverdue and id == 3 %}display:none{% endif %}">
                <div class="card border-{{ reports.status.backgroundColor }} ">
                    <h3 class="card-header">{{ reports.status.takeLang }}</h3>
                    <div class="card-body">
                        {% for report in reports.reports %}
                            <div class="card text-{{ reports.status.textColor }} border-dark report-one">
                                <div class="report-number">
                                    <div class="badge bg-{{ reports.status.takeBadgeBg }} text-dark" data-toggle="tooltip" data-placement="bottom" title="Numer sprawozdania">{{ report.number }}</div>
                                </div>
                                <div class="card-header">
                                    <h5 class="card-title">
                                        {% if is_granted('clientView') %}
                                            <a href="{{ path('app_client',{id: report.client.id}) }}" class="link-{{ reports.status.linkColor }}">{{ report.client.strName }}</a>
                                        {% else %}
                                            {{ report.client.strName }}
                                        {% endif %}
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <p class="card-text">
                                            <form action="{{ path('app_set_status_todo') }}" method="post">
                                                <input type="hidden" name="reportId" value="{{ report.id }}">
                                                <input type="hidden" name="token" value="{{ csrf_token('report-status') }}">
                                                <div class="btn-group" role="group" aria-label="Todos">
                                                    {% for todo in reportToDoList %}
                                                        <input onchange="this.form.submit()"
                                                               name="{{ todo.value }}"
                                                               type="checkbox"
                                                               class="btn-check"
                                                               id="checkboxToDo{{ todo.value }}Id{{ report.id }}"
                                                                {% if report.isReportsTodo(todo) %}
                                                                    checked="checked"
                                                                {% endif %}
                                                                {% if not is_granted('reportEdit') %}
                                                                    disabled
                                                                {% endif %}
                                                               autocomplete="off"
                                                        >
                                                        <label class="btn btn-outline-{{ reports.status.checkboxColor }}  d-flex align-items-center"
                                                               for="checkboxToDo{{ todo.value }}Id{{ report.id }}"
                                                               data-toggle="tooltip" data-placement="bottom" title="{{ todo.takeLang }}">
                                                            <i class="fa fa-solid fa-{{ todo.takeIcon }}"> </i>
                                                        </label>
                                                    {% endfor %}
                                                </div>
                                            </form>
                                    </p>
                                </div>
                                <div class="card-footer bg-transparent">
                                    <div class="progress">
                                        {% set percentageProgress = report.isDone ? 100 : report.countTodoReports / reportToDoList|length * 100 %}
                                        <div class="progress-bar progress-bar-striped bg-info"
                                             role="progressbar"
                                             aria-valuenow="{{ report.countTodoReports }}"
                                             aria-valuemin="0"
                                             aria-valuemax="{{ reportToDoList|length }}"
                                             style="width: {{ percentageProgress }}%"
                                        >
                                            <strong>{{ percentageProgress }}%</strong>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
{% endblock %}