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

{% load static %}

{% block title %} Dossier de {{ sun_child.first_name }} {{ sun_child.last_name }}  {% endblock %}

{% block content %}
    <!-- Page Title -->
    <div class="page-title">
        <h1> Dossier de {{ sun_child.first_name }} <strong>{{ sun_child.last_name }}</strong> </h1>
        <nav>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"> <a href="{% url 'home' %}">Accueil</a> / <a href="{% url 'list_sunchild_view' %}"> Liste des Enfants Soleil </a> / Dossier de <strong>{{ sun_child.first_name }} {{ sun_child.last_name }}</strong> </li>
            </ol>
        </nav>
    </div>
    <!-- End Page Title -->

    <!-- Left side columns -->
    <div class="col-lg-12">
        <div class="row">
            <!-- Sales Card -->
            <div class="col-xxl-6 col-md-6">
                <div class="card info-card sales-card">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <img src="{% static 'childrenSunTheme/assets/img/favicon.png' %}" alt="Profile" class="rounded-circle m-3" style="width: 15%;">
                            <h5 class="card-title text-center"> {{ sun_child.first_name }} <strong>{{ sun_child.last_name }}</strong> </h5>
                        </div>
                        <p class="m-1"> <strong> Dernière mis à jour : </strong> </p>
                        <span class="principal-color">
                            <i class="bi bi-person-fill-check m-2"> {{ sun_child.updated_by }} </i>
                            <i class="bi bi-calendar2-week-fill m-2"> {{ sun_child.updated_date }} </i>
                        </span>
                        <div class="card mt-4">
                            <div class="card-body p-4">
                                <p class=""> <strong> Région : </strong> {{ sun_child.region }} </p>
                                <p class=""> <strong> Adresse : </strong> {{ sun_child.address }} </p>
                                <p class=""> <strong> Date de naissance : </strong> {{ sun_child.birth_date }} </p>
                                <p class=""> <strong> Nom complet du père : </strong> {{ sun_child.father_full_name }} </p>
                                <p class=""> <strong> Nom complet de la mère : </strong> {{ sun_child.mother_full_name }} </p>
                                <p class=""> <strong> Hôpital du jour : </strong> {{ sun_child.day_hospital }} </p>
                                <p class=""> <strong> Ambulatoire : </strong> {{ sun_child.outpatient }} </p>
                                <p class=""> <strong> École : </strong> {{ sun_child.school }} </p>
                                <p class="">
                                    <strong> Cas : </strong>
                                    {% for case in  sun_child.cases.all %}
                                        <i class="bi bi-file-medical principal-color"></i> <span>{{ case }}</span>
                                    {% endfor %}
                                </p>
                                <p class="">
                                    <strong> Loisirs : </strong>
                                    {% for leisure_object in  sun_child.leisure.all %}
                                        <i class="bi bi-file-medical principal-color"></i> <span>{{ leisure_object }}</span>
                                    {% endfor %}
                                </p>
                                <p class=""> <strong> Commentaires : </strong> </p>
                                <p class="bg-light rounded mt-2 mb-0 p-4"> {{ sun_child.comment }} </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div><!-- End Sales Card -->

            <!-- Revenue Card -->
            <div class="col-xxl-6 col-md-6">
                <div class="card info-card revenue-card">
                    <div class="card-body">
                        <h5 class="card-title">Infos générales de l'enfant</h5>
                        {% for history in medical_histories %}
                            <div class="card mb-4">
                                <div class="card-body">
                                    <h3 class="card-title">{{ history.name }}</h3>
                                    <p>{{ history.description }}</p>
                                    <h4>Pathologies Identifiées</h4>
                                    <ul>
                                        {% for pathology in history.identified_pathologies.all %}
                                            <li>{{ pathology.name }}</li>
                                        {% empty %}
                                            <li>No identified pathologies.</li>
                                        {% endfor %}
                                    </ul>
                                    <h4>Historique Médical de Base</h4>
                                    <ul>
                                        {% for base in history.base_medical_histories.all %}
                                            <li>{{ base.name }}</li>
                                        {% empty %}
                                            <li>No base medical histories.</li>
                                        {% endfor %}
                                    </ul>
                                    <h4>Historique Médical Chirurgical</h4>
                                    <ul>
                                        {% for surgery in history.surgical_medical_histories.all %}
                                            <li>{{ surgery.name }}</li>
                                        {% empty %}
                                            <li>No surgical medical histories.</li>
                                        {% endfor %}
                                    </ul>
                                    <h4>Historique Médical Familial</h4>
                                    <ul>
                                        {% for family in history.family_medical_histories.all %}
                                            <li>{{ family.name }}</li>
                                        {% empty %}
                                            <li>No family medical histories.</li>
                                        {% endfor %}
                                    </ul>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div><!-- End Revenue Card -->
        </div><!-- End Customers Card -->

        <!-- Left side columns -->
        <div class="col-lg-12">
            <div class="row">
            <!-- Revenue Card -->
            <div class="col-xxl-6 col-md-6">
                <div class="card info-card revenue-card">
                    <div class="card-body">
                        <h3 class="card-title">Bilans de l'enfant</h3>
                        {% for report in specialist_reports %}
                            <div class="card mb-4">
                                <div class="card-body">
                                    <h6 class="card-title">{{ report.name }}</h6>
                                    <p>Spécialiste : <strong>{{ report.made_by }}</strong> </p>
                                    <p>Spécialité : <span class="principal-color">{{ report.speciality }}</span> </p>
                                    <p>Enfant : <strong>{{ report.sun_child }}</strong> </p>
                                    <p class=""> <strong> Commentaires : </strong> </p>
                                    <p class="bg-light rounded mt-2 mb-0 p-4"> {{ report.comment }} </p>
                                    <p class=""> <strong> Poinst d'attentions : </strong> </p>
                                    <p class="bg-light rounded mt-2 mb-0 p-4"> {{ report.point_of_attention }} </p>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div><!-- End Revenue Card -->

            <!-- Revenue Card -->
{#            <div class="col-xxl-6 col-md-6">#}
{#                <div class="card info-card revenue-card">#}
{#                    <div class="card-body">#}
{#                        <h5 class="card-title">Infos générales de l'enfant</h5>#}
{#                        {% for history in medical_histories %}#}
{#                            <div class="card mb-4">#}
{#                                <div class="card-body">#}
{#                                    <h3 class="card-title">{{ history.name }}</h3>#}
{#                                    <p>{{ history.description }}</p>#}
{#                                    <h4>Pathologies Identifiées</h4>#}
{#                                    <ul>#}
{#                                        {% for pathology in history.identified_pathologies.all %}#}
{#                                            <li>{{ pathology.name }}</li>#}
{#                                        {% empty %}#}
{#                                            <li>No identified pathologies.</li>#}
{#                                        {% endfor %}#}
{#                                    </ul>#}
{#                                    <h4>Historique Médical de Base</h4>#}
{#                                    <ul>#}
{#                                        {% for base in history.base_medical_histories.all %}#}
{#                                            <li>{{ base.name }}</li>#}
{#                                        {% empty %}#}
{#                                            <li>No base medical histories.</li>#}
{#                                        {% endfor %}#}
{#                                    </ul>#}
{#                                    <h4>Historique Médical Chirurgical</h4>#}
{#                                    <ul>#}
{#                                        {% for surgery in history.surgical_medical_histories.all %}#}
{#                                            <li>{{ surgery.name }}</li>#}
{#                                        {% empty %}#}
{#                                            <li>No surgical medical histories.</li>#}
{#                                        {% endfor %}#}
{#                                    </ul>#}
{#                                    <h4>Historique Médical Familial</h4>#}
{#                                    <ul>#}
{#                                        {% for family in history.family_medical_histories.all %}#}
{#                                            <li>{{ family.name }}</li>#}
{#                                        {% empty %}#}
{#                                            <li>No family medical histories.</li>#}
{#                                        {% endfor %}#}
{#                                    </ul>#}
{#                                </div>#}
{#                            </div>#}
{#                        {% endfor %}#}
{#                    </div>#}
{#                </div>#}
{#            </div>#}
            <!-- End Revenue Card -->
            </div><!-- End Customers Card -->
        </div>

    {% if messages %}
        <!-- Toast Container code -->
        <div class="toast-container position-fixed top-0 mt-5 end-0 p-3">
            <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
                <div class="toast-header">
                    <img src="{% static 'childrenSunTheme/assets/img/enfants-soleil-monde-logo.svg' %}" class="img-fluid rounded me-2 h-2" alt="Icon image" style="height: 1.2rem;">
                    <strong class="me-auto">Different Make Me Amazing!</strong>
                    <small>{% now "Y-m-d G:i:s" %}</small>
                    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                </div>
                <div class="toast-body">
                    {% for message in messages %}
                        {% if message.tags == "success" %}
                            <div class="alert alert-success alert-dismissible fade show" role="alert">
                                {{ message }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                            </div>
                        {% elif message.tags == "info" %}
                            <div class="alert alert-info alert-dismissible fade show" role="alert">
                                {{ message }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                            </div>
                        {% elif message.tags == "warning" %}
                            <div class="alert alert-warning alert-dismissible fade show" role="alert">
                                {{ message }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                            </div>
                        {% elif message.tags == "error" %}
                            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                {{ message }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                            </div>
                        {% endif %}
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
    {% endif %}
{% endblock %}