{% extends 'base.html.twig' %}

{% block title %}Data Entry Status — Rural Development{% endblock %}

{% block body %}
    <div class="row">
        <div class="col-md-3">
            <form id="ruralDevelopmentDataEntryStatus" class="form-horizontal full-width" method="post">
                <div class='form-group'>
                    <div class='col-sm-2'>
                        <label class="control-label required">{{ 'year'|trans }}</label>
                    </div>
                    <div class='col-sm-6'>
                        {{ getFinancialYearDropDown({'name': 'year'}, year) }}
                    </div>
                    <div class='col-sm-4'>
                        <button type="submit" class="btn btn-success btn-sm pull-left">{{ 'submit'|trans }}</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="panel panel-primary">
        <div class="panel-heading clearfix">
            <span style="font-size: 14px;"><i class="fa fa-database" aria-hidden="true"></i>&nbsp;&nbsp;{{ 'RuralDevelopmentDataEntryStatusFor'|trans }} <strong>{{ year }}</strong></span>
        </div>
        <div class="panel-body" id="DataEntryStatusContainer">
            <table class="table table-bordered table-striped" style="font-size: 12px;overflow: hidden;">
                <thead>
                    <tr>
                        <th></th>
                        {% for month in monthArray %}
                            <th colspan="2">{{ month|trans }}</th>
                        {%endfor%}
                    </tr>
                    <tr>
                        <th class="rotate"><span class="intact">{{ 'district'|trans }}</span></th>
                        {% for i in range(0, 11) %}
                            <th class="rotate"><span class="intact">{{ 'expected_count'|trans }}</span></th>
                            <th class="rotate"><span class="intact">{{ 'completed_entry_count'|trans }}</span></th>
                        {% endfor %}
                    </tr>
                </thead>
                <tbody>
                    {% if data and data|length > 0 %}
                        {% for key, district in data %}
                            <tr>
                                <td>{{ key }}</td>
                                {% for row in district %}
                                    <td class="text-center" style="vertical-align: middle;">{{ row['expectedCount'] }}</td>
                                    <td class="text-center {% if row['expectedCount'] %} {{ (row['expectedCount'] == row['completedEntryCount']) ? 'successDataEntry' : 'pendingDataEntry' }} {% endif %}" style="vertical-align: middle;">{{ row['completedEntryCount'] }}</td>
                                {% endfor %}
                            </tr>
                        {% endfor %}
                        {% else %}
                        <tr>
                            <td colspan="25" align="center">{{ 'NoRecordFound'|trans }}</td>
                        </tr>
                    {% endif %}
                </tbody>
            </table>
        </div>
    </div>
    <style type="text/css">
        .table>thead>tr>th {
            padding: 8px 6px;
        }
    </style>
    <script type="text/javascript">
    $(document).ready(function() {
        $("#ruralDevelopmentDataEntryStatus").validate({
            ignore: [],
            rules: {
                'year' : { required: true }
            },
            messages: {
                'year': { required: "Please Select Year." }
            }
        });
    });
    </script>
{% endblock %}