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

{% load static %}

{% block title %} Cases Paginator {% endblock %}

{% block content %}

<div class="container">
    <!-- Use 'd-flex flex-wrap justify-content-center align-items-center vh-100' to center and wrap cards -->
    <div class="row d-flex flex-wrap justify-content-center align-items-center">
        {% for case in cases %}
        <div class="col-md-3 d-flex justify-content-center">
            <div class="card" style="width: 15rem;">
                <div class="card-header bg-light">
                        <h6 class="text-black fs-6">
                            <i class="bi bi-person-fill principal-color"></i> {{ case.first_name }} <span class="fw-bold"> {{ case.last_name }} </span>
                        </h6>
                </div>
                <div class="card-body mt-2">
                    <div>
                        <span class="font-size-12"> <img src="{% static 'bootstrap-icons-1-11-3/cake2-fill.svg' %}" alt="Person Standing Icon" class="custom-icon"> </span>
                        <span href="#" class="font-size-12 px-2 second-color fw-bold"> {{ case.birth_date }} </span>
                    </div>
                    <div>
                        <span class="font-size-12"> <i class="bi bi-telephone-outbound-fill text-black"> </i> </span>
                        <a href="tel:{{ case.phone_number }}" class="font-size-12 px-2"> {{ case.phone_number }} </a>
                    </div>
                    <div>
                        <span class="font-size-12"> <img src="{% static 'bootstrap-icons-1-11-3/person-standing.svg' %}" alt="Person Standing Icon" class="custom-icon"> </span>
                        <span href="#" class="font-size-12 px-2"> Père </span>
                    </div>
                    <div>
                        <span href="#" class="font-size-12 px-2"> {{ case.father_full_name }}</span>
                    </div>
                    <div>
                        <span class="font-size-12"> <img src="{% static 'bootstrap-icons-1-11-3/person-standing-dress.svg' %}" alt="Person Standing Icon" class="custom-icon"> </span>
                        <span href="#" class="font-size-12 px-2"> Mère </span>
                    </div>
                    <div>
                        <span href="#" class="font-size-12 px-2"> {{ case.mother_full_name }} </span>
                    </div>
                </div>

                <div class="card-footer bg-light d-flex justify-content-center">
                    <button type="button" class="btn btn-outline-dark" data-bs-toggle="modal" data-bs-target="#verticalycentered">
                        <i class="bi bi-eye-fill"> </i>
                    </button>
                    <div class="px-3 d-flex align-items-center">
                        <a class="btn btn-danger" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Supprimer"> <i class="bi bi-trash3-fill"></i> </a>
                    </div>
<!--                <div class="px-3 d-flex align-items-center">
                        <a class="btn btn-link btn-sm text-danger" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Supprimer"> 
                            <i class="bi bi-trash3-fill"></i> 
                        </a>
                    </div>
-->
                    <!-- START Sun Child Appointment | Vertically centered Modal -->
                    <div class="modal fade modal-xl modal-dialog-scrollable" id="verticalycentered" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title fw-bold"> <i class="bi bi-calendar-plus"></i> Nouveau rendez-vous</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    <div class="row mb-3">
                                        <label for="name" class="col-sm-2 col-form-label">Titre : </label>
                                        <div class="col-sm-10">
                                            <input type="text" name="name" id="name" class="form-control">
                                        </div>
                                    </div>
                                    <div class="row mb-3">
                                        <label for="specialist" class="col-sm-2 col-form-label">Spécialiste : </label>
                                        <div class="col-sm-10">
                                            <select id="specialist" class="form-select" aria-label="Specialist">
                                                {% for specialist in specialists %}
                                                    <option value="{{ specialist.id }}"> {{ specialist.first_name }} | {{ specialist.last_name }}  </option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                    </div>
                                    <div class="row mb-3">
                                        <label for="sunChild" class="col-sm-2 col-form-label">Enfant : </label>
                                        <div class="col-sm-10">
                                            <select id="sunChild" class="form-select" aria-label="Enfant Soleil">
                                                {% for sun_child in children_sun %}
                                                    <option value="{{ sun_child.id }}"> {{ sun_child.first_name }} {{ sun_child.last_name }}  </option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                    </div>
                                    <div class="row mb-3">
                                        <label for="site" class="col-sm-2 col-form-label">Region : </label>
                                        <div class="col-sm-10">
                                            <select id="region" class="form-select" aria-label="Site">
                                                {% for region in regions %}
                                                    <option value="{{ region.id }}"> {{ region.name }} </option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                    </div>
                                    <div class="row mb-3">
                                        <label for="site" class="col-sm-2 col-form-label">Site : </label>
                                        <div class="col-sm-10">
                                            <select id="site" class="form-select" aria-label="Site">
                                                {% for site in sites %}
                                                    <option value="{{ site.id }}"> {{ site.name }} </option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                    </div>
                                    <div class="row mb-3">
                                        <label for="start" class="col-sm-2 col-form-label">Début : </label>
                                        <div class="col-sm-10">
                                            <input type="datetime-local" class="form-control" id="start">
                                        </div>
                                    </div>
                                    <div class="row mb-3">
                                        <label for="end" class="col-sm-2 col-form-label">Fin : </label>
                                        <div class="col-sm-10">
                                            <input type="datetime-local" class="form-control" id="end">
                                        </div>
                                    </div>
                                    <div class="row mb-3">
                                        <label for="status" class="col-sm-2 col-form-label">Statut : </label>
                                        <div class="col-sm-10">
                                            <select id="status" class="form-select" aria-label="Status">
                                                {% for status in all_status %}
                                                    <option value="{{ status.id }}"> {{ status.status }} </option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                    </div>
                                    <label for="description" class="col-sm-12 col-form-label">Commentaire : <i class="char-count principal-color">3000 caractères restant</i> </label>
                                    <textarea name="description" id="description" class="form-control" maxlength="3000" placeholder="Votre commentaire" style="height: 150px;" oninput="updateCharCount(this)"></textarea>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-primary btn-custom" data-bs-dismiss="modal">Retour</button>
                                    <button type="button" class="btn btn-warning" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Enregistrer" onclick="saveEvent()">
                                        <i class="bi bi-save2-fill"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div><!-- END Sun Child | Vertically centered Modal-->
                </div>

            </div>
        </div>
        {% endfor %}
    </div>
</div>

    <hr>

    <!-- Pagination Template -->
    <nav aria-label="Pagination">
        <ul class="pagination justify-content-center">
            {% if cases.has_previous %}
                <!-- Link to the first page -->
                <li class="page-item">
                    <a href="?page=1" class="page-link px-2"> 
                        <i class="bi bi-arrow-left-circle-fill"> DEBUT </i> 
                    </a>
                </li>
                <!-- Link to the previous page -->
                <li class="page-item">
                    <a class="page-link" href="?page={{ cases.previous_page_number }}">
                        <i class="bi bi-arrow-left-circle"></i>
                    </a>
                </li>
            {% else %}
                <!-- Disable the first and previous page links if on the first page -->
                <li class="page-item disabled">
                    <a href="#" class="page-link px-2" aria-disabled="true">
                        <i class="bi bi-arrow-left-circle-fill"> DEBUT </i> 
                    </a>
                </li>
            {% endif %}

            <!-- Loop through page numbers to create pagination links -->
            {% for i in page_numbers %}
                {% if i <= 3 or i > last_page_minus_two or i == cases.number %}
                    <li class="page-item {% if cases.number == i %}active{% endif %}">
                        <a class="page-link" href="?page={{ i }}">{{ i }}</a>
                    </li>
                {% elif i == 4 and cases.number > 4 %}
                    <li class="page-item disabled">
                        <a class="page-link">...</a>
                    </li>
                {% elif i == last_page_minus_two and cases.number < last_page_minus_three %}
                    <li class="page-item disabled">
                        <a class="page-link">...</a>
                    </li>
                {% endif %}
            {% endfor %}

            {% if cases.has_next %}
                <!-- Link to the next page -->
                <li class="page-item">
                    <a class="page-link" href="?page={{ cases.next_page_number }}">
                        <i class="bi bi-arrow-right-circle"></i>
                    </a>
                </li>
                <!-- Link to the last page -->
                <li class="page-item">
                    <a href="?page={{ cases.paginator.num_pages }}" class="page-link px-2">
                        FIN <i class="bi bi-arrow-right-circle-fill"> </i>
                    </a>
                </li>
            {% else %}
                <!-- Disable the next and last page links if on the last page -->
                <li class="page-item disabled">
                    <a href="#" class="page-link px-2" aria-disabled="true">
                        FIN <i class="bi bi-arrow-right-circle-fill"> </i>
                    </a>
                </li>
            {% endif %}

            <!-- Display the current page number out of total pages -->
            <li class="page-item disabled">
                <a href="#" class="page-link px-2" aria-disabled="true"> 
                    Page {{ cases.number }} sur {{ cases.paginator.num_pages }}
                </a>
            </li>
        </ul>
    </nav>

{% endblock %}