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

{% load static %}

{% block title %} Ajouter un enfant {% endblock %}

{% block content %}
    <!-- Page Title -->
    <div class="page-title">
        <h1> Ajouter un enfant </h1>
        <nav>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"> <a href="{% url 'home' %}">Accueil</a> / <a href="{% url 'list_sunchild_view' %}"> Liste des enfants </a> / Création <strong>{{ child.first_name }} {{ child.last_name }}</strong> </li>
            </ol>
        </nav>
    </div>
    <!-- End Page Title -->

    <!-- Main Content -->
    <div class="col-lg-12">
        <div class="row">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-body pt-4">
                                <form method="post">
                                    {% csrf_token %}
                                    <div class="form-group">
                                        {{ form.non_field_errors }}
                                        <label for="first_name">Prénom :</label>
                                        <input type="text" name="first_name" id="first_name" class="form-control" placeholder="Entrez le prénom" required>
                                        {{ form.first_name.errors }}

                                        <label for="last_name" class="mt-4">Nom :</label>
                                        <input type="text" name="last_name" id="last_name" class="form-control" placeholder="Entrez le nom" required>
                                        {{ form.last_name.errors }}

                                        <label for="address" class="mt-4">Adresse :</label>
                                        <input type="text" name="address" id="address" class="form-control" placeholder="Entrez l'adresse" required>
                                        {{ form.address.errors }}

                                        <label for="birth_date" class="mt-4">Date de naissance :</label>
                                        <input type="date" name="birth_date" id="birth_date" class="form-control" required>
                                        {{ form.birth_date.errors }}

                                        <label for="phone_number" class="mt-4">Numéro de téléphone :</label>
                                        <input type="tel" name="phone_number" id="phone_number" class="form-control" placeholder="Entrez le numéro de téléphone">
                                        {{ form.phone_number.errors }}

                                        <label for="father_full_name" class="mt-4">Nom complet du père :</label>
                                        <input type="text" name="father_full_name" id="father_full_name" class="form-control" placeholder="Entrez le nom complet du père">
                                        {{ form.father_full_name.errors }}

                                        <label for="mother_full_name" class="mt-4">Nom complet de la mère :</label>
                                        <input type="text" name="mother_full_name" id="mother_full_name" class="form-control" placeholder="Entrez le nom complet de la mère">
                                        {{ form.mother_full_name.errors }}

                                        <label for="comment" class="mt-4">Commentaire : <i class="char-count principal-color">3000 caractères restant</i></label>
                                        <textarea name="comment" id="comment" class="form-control min-height-150" maxlength="3000" oninput="updateCharCount(this)"></textarea>
                                        {{ form.comment.errors }}

                                        <label for="region" class="mt-4">Région :</label>
                                        <select name="region" id="region" class="form-control">
                                            {% for reg in regions %}
                                                <option value="{{ reg.id }}">{{ reg.name }}</option>
                                            {% endfor %}
                                        </select>
                                        {{ form.region.errors }}

                                        <label for="cases" class="mt-4">Cas :</label>
                                        <select name="cases" id="cases" class="form-control chosen-select" multiple >
                                            {% for case in cases %}
                                                <option value="{{ case.id }}">{{ case.name }}</option>
                                            {% endfor %}
                                        </select>
                                        {{ form.cases.errors }}

                                        <label for="day_hospital" class="mt-4">Hôpital du jour :</label>
                                        <select name="day_hospital" id="day_hospital" class="form-control">
                                            {% for hospital in day_hospitals %}
                                                <option value="{{ hospital.id }}">{{ hospital.name }}</option>
                                            {% endfor %}
                                        </select>
                                        {{ form.day_hospital.errors }}

                                        <label for="outpatient" class="mt-4">Outpatient :</label>
                                        <select name="outpatient" id="outpatient" class="form-control">
                                            {% for outp in outpatients %}
                                                <option value="{{ outp.id }}">{{ outp.name }}</option>
                                            {% endfor %}
                                        </select>
                                        {{ form.outpatient.errors }}

                                        <label for="school" class="mt-4">École :</label>
                                        <select name="school" id="school" class="form-control">
                                            {% for sch in schools %}
                                                <option value="{{ sch.id }}">{{ sch.name }}</option>
                                            {% endfor %}
                                        </select>
                                        {{ form.school.errors }}

                                <label for="leisure" class="mt-4">Loisirs :</label>
                                <select name="leisure" id="leisure" class="form-control chosen-select1" multiple="multiple">
                                    {% for lei in leisures %}
                                        <option value="{{ lei.id }}">{{ lei.name }}</option>
                                    {% endfor %}
                                </select>

                                        {{ form.leisure.errors }}
                                    </div>

                                    <div class="d-flex justify-content-start mt-4">
                                        <button type="submit" class="btn btn-primary btn-custom">Envoyer</button>
                                        <a href="{% url 'list_sunchild_view' %}" class="btn btn-danger ms-2">Annuler</a>
                                    </div>
                                </form>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End Main Content -->

    <!-- Toast Messages -->
    {% if messages %}
        <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" alt="Icon image" style="height: 1.2rem;">
                    <strong class="me-auto">Notification</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 %}
                        <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
                            {{ message }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    {% endif %}

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.rawgit.com/harvesthq/chosen/gh-pages/chosen.jquery.min.js"></script>
    <link href="https://cdn.rawgit.com/harvesthq/chosen/gh-pages/chosen.min.css" rel="stylesheet"/>

    <script>
        function updateCharCount(textarea) {
            const charCount = document.querySelector('.char-count');
            const maxLength = textarea.getAttribute('maxlength');
            const currentLength = textarea.value.length;
            charCount.textContent = `${maxLength - currentLength} caractères restant`;
        }
        $(".chosen-select").chosen({
    no_results_text: "Oops, nothing found!"
}),
            $(".chosen-select1").chosen({
    no_results_text: "Oops, nothing found!"
})
    </script>
{% endblock %}