{% extends 'layouts/administrator/master.html' %}
{% load static %}
{% load querystring_tags %}

{% block title %} Denuncias {% endblock title %}

{% block title_main %} Denuncias {% endblock title_main %}

{% block breadcrumb %}
    <li class="breadcrumb-item"><a href="{% url 'administrators:dashboard' %}">Dashboard</a></li>
    <li class="breadcrumb-item active">Denuncias</li>
{% endblock breadcrumb %}

{% block content %}
    {% comment %} <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <!-- Default box -->
                    <div class="card collapsed-card">
                        <a href="#" class="d-block" data-card-widget="collapse" data-toggle="tooltip" title="Collapse">
                        <div class="card-header">
                            <h3 class="card-title">Ver Estadísticas</h3>

                            <div class="card-tools">
                                <button type="button" class="btn btn-tool" data-card-widget="collapse" data-toggle="tooltip" title="Collapse">
                                    <i class="fas fa-plus"></i></button>
                            </div>
                        </div>
                        </a>
                        <div class="card-body" style="display: none;">
                            Start creating your amazing application!
                        </div>
                        <!-- /.card-body -->
                    </div>
                    <!-- /.card -->
                </div>
            </div>
        </div>
    </section> {% endcomment %}


    <div class="card">
        <div class="card-body">
            <form action="" method="get">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-auto py-2 py-md-0">
                            <label class="sr-only" for="search">Buscar</label>
                            <div class="input-group">
                                <input type="text" class="form-control" id="search" name="search" placeholder="Buscar" value="{{ search }}">
                                <div class="input-group-append">
                                    <button type="submit" class="input-group-text btn"><i class="fas fa-search"></i></button>
                                </div>
                            </div>
                        </div>
                        <div class="col-auto py-2 py-md-0">
                            <a class="btn btn-secondary" data-toggle="collapse" href="#collapseFilters" role="button" aria-expanded="false" aria-controls="collapseFilters">Ver Filtros</a>
                        </div>
                        <div class="col-auto py-2 py-md-0">
                            <a href="{% url 'administrators:complaints_list_adm' %}" class="btn btn-light">Limpiar Filtros</a>
                        </div>
                        {% if perms.complaints.can_export_complaint %}
                        <div class="col-auto py-2 py-md-0">
                            <a href="{% url 'administrators:export_complaints_adm' %}{% get_query_string filter='list' %}" class="btn btn-secondary">Exportar a Excel</a>
                        </div>
                        {% endif %}
                    </div>
                </div>
                <div class="collapse {% if open_filters %} show {% endif %}" id="collapseFilters">
                    <hr class="mt-4">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="park_id">Por Id</label>
                                    <div class="row">
                                        <div class="input-group" role="group">
                                            <input type="text" class="form-control" name="id__from" placeholder="desde" value="{{ id__from }}">
                                            <input type="text" class="form-control" name="id__to" placeholder="hasta" value="{{ id__to }}">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="park_id">Por fecha de presentación</label>
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text"> <i class="far fa-calendar-alt"></i> </span>
                                        </div>
                                        <input type="text" name="created_at__from" class="form-control" placeholder="desde" id="created_at__from" value="{{ created_at__from }}">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text"> <i class="far fa-calendar-alt"></i> </span>
                                        </div>
                                        <input type="text" name="created_at__to" class="form-control" placeholder="hasta" id="created_at__to" value="{{ created_at__to }}">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="park_id">Leidos</label>
                                    <select class="form-control select2" style="width: 100%;" name="checked">
                                        <option value=""></option>
                                        {% for key, value in reads.items %}
                                            {% if key == checked %}
                                                <option value="{{ key }}" selected>{{ value }}</option>
                                            {% else %}
                                                <option value="{{ key }}">{{ value }}</option>
                                            {% endif %}
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="park_id">Estatus</label>
                                    <select class="form-control select2" style="width: 100%;" name="status">
                                        <option value=""></option>
                                        {% for value in status_list %}
                                            {% if value.id == status %}
                                                <option value="{{ value.id }}" selected>{{ value.name }}</option>
                                            {% else %}
                                                <option value="{{ value.id }}">{{ value.name }}</option>
                                            {% endif %}
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4" style="display: flex; align-items: flex-end;">
                                <div class="form-group">
                                    <button type="submit" class="btn btn-primary">Filtrar</button>
                                </div>
                            </div>
                            <div class="col-md"></div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
	<!-- Default box -->
    <div class="card">
        <div class="card-body p-0">
            <table class="table table-striped projects">
                 <thead>
                    <tr>
                        <th style="width: 1%">ID</th>
                        <th style="width: 10%" class="text-center">Leído</th>
                        <th style="width: 30%">Folio</th>
                        <th style="width: 15%">Fecha de presentación</th>
                        <th style="width: 15%" class="text-center">Estatus</th>
                        <th style="width: 20%" class="text-center">Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    {% for complaint in object_list %}
                    <tr>
                        <td> {{ complaint.id }} </td>
                        <td class="text-center">
                            {% if complaint.checked %}
                                <i class="fa fa-check text-success"></i>
                            {% else %}
                                <i class="fa fa-times text-danger"></i>
                            {% endif %}
                        </td>
                        <td class="text-break"> {{ complaint.code }} </td>
                        <td class="project_progress">
                            <p class="m-0"><small> {{ complaint.created_at|date }} </small></p>
                            <p class="m-0"><small> {{ complaint.created_at|time:"H:i:s" }} </small></p>
                        </td>
                        <td class="project-state">
                            <span class="badge badge-secondary">{{ complaint.status }}</span>
                        </td>
                        <td class="project-actions text-center">
                            <a class="btn btn-primary btn-sm" href="{% url 'administrators:complaint_update_adm' complaint.id %}">
                                <i class="fas fa-pencil-alt"></i> Consultar
                            </a>
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="6">No hay información</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>

            {% if page_obj.has_other_pages %}
                <ul class="uk-pagination uk-flex-center fs-18" uk-margin>

                    {% if page_obj.has_previous %}
                        <li>
                            <a href="{% append_to_get page=page_obj.previous_page_number %}">
                                <span uk-pagination-previous></span>
                            </a>
                        </li>
                    {% endif %}
                    
                    {% for page in page_obj.paginator.page_range %}

                        {% if page_obj.number|add:-4 > 1 and page == 1 %}
                            <li><a href="{% append_to_get page=page %}">{{page}}</a></li>
                            <li class="uk-disabled"><span>...</span></li>
                        {% endif %}

                        {% if page <= page_obj.number|add:4 and page >= page_obj.number|add:-4 %}
                            {% if page_obj.number == page %}
                                <li class="uk-active"><a href="{% append_to_get page=page %}">{{page}}</a></li>
                            {% else %}
                                <li><a href="{% append_to_get page=page %}">{{page}}</a></li>
                            {% endif %}
                        {% endif %}

                        {% if page_obj.number|add:4 < page_obj.paginator.num_pages and page == page_obj.paginator.num_pages %}
                            <li class="uk-disabled"><span>...</span></li>
                            <li><a href="{% append_to_get page=page %}">{{page}}</a></li>
                        {% endif %}

                    {% endfor %}

                    {% if page_obj.has_next %}
                        <li>
                            <a href="{% append_to_get page=page_obj.next_page_number %}">
                                <span uk-pagination-next></span>
                            </a>
                        </li>
                    {% endif %}
                </ul>
            {% endif %}

        </div>
        <!-- /.card-body -->
    </div>
    <!-- /.card -->
{% endblock content %}

{% block css %}
{% endblock css %}

{% block js %}
    <script>
        $('.select2').select2();
        $('.select2').trigger('change');

        Pikaday_es( '#created_at__from' );
        Pikaday_es( '#created_at__to' );
    </script>
{% endblock js %}