{% extends "BASE.html" %}
{% load static %}     
{% block 'titre_page' %} Gestion des employés - Mon profil {% endblock %}
{% block 'contenu' %}  
<div class="d-flex justify-content-between">
    <h5 class="fw-bold">
        <i class="bi bi-pencil-square me-2"></i> Les informations de mon profil
    </h5> 
    <button type="button" class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#modalModifierProfil">
        <i class="bi bi-pencil-square me-1"></i> Modifier le mot de passe
    </button>
</div>
{% if messages %}
    {% for message in messages %}
        <div class="alert alert-{% if message.tags == 'error' %}danger{% else %}success{% endif %} alert-dismissible fade show" role="alert">
        {{ message }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    {% endfor %}
{% endif %}
{% if not expiration_contrat %} <div class="alert alert-danger fade show alert-dismissible mt-2"> <strong>Important :</strong>
Les informations sur votre contrat n'ont pas été renseignées,
veuillez contacter les ressources humaines. </div>

{% elif contrat_nb_jours_restant > 0 %} <div class="alert alert-danger fade show alert-dismissible mt-2"> <strong>Important :</strong>
Votre contrat de travail expire dans <strong>{{ contrat_nb_jours_restant }} jour{{ contrat_nb_jours_restant|pluralize }}</strong>,
veuillez contacter les ressources humaines. </div>

{% elif contrat_nb_jours_restant == 0 %} <div class="alert alert-danger fade show alert-dismissible mt-2"> <strong>Important :</strong>
Votre contrat de travail <strong>expire aujourd'hui</strong>.
Veuillez contacter les ressources humaines. </div>

{% elif contrat_nb_jours_restant < 0 %} <div class="alert alert-danger fade show alert-dismissible mt-2"> <strong>Important :</strong>
Votre contrat de travail est <strong>déjà expiré</strong>.
Veuillez contacter les ressources humaines. </div>
{% endif %}

<div class="accordion mt-2" id="accordionInformationEmploye">
    <div class="accordion-item">
        <h2 class="accordion-header" id="headingContrats">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseProfil" aria-expanded="false" aria-controls="collapseProfil">
                <i class="bi bi-file-earmark-text me-2"></i> Mon identité
            </button>
        </h2>
        <div id="collapseProfil" class="accordion-collapse" aria-labelledby="headingContrats" data-bs-parent="#accordionInformationEmploye">
            <div class="accordion-body">
                <form class="row" action = "{% url 'gestion_employe:modifier-employe' %}" method = "POST" enctype = "multipart/form-data" id="information-personnelles" data-url="{% url 'gestion_employe:modifier-employe' %}">
                    {% csrf_token %}
                    <div class="col">
                        <div class="form-group mb-2">
                            <label>Photo</label>
                            {% if employe.photo %}
                                <span>Fichier actuel : <a href="{{ employe.photo.url }}">{{employe.photo}}</a></span>
                            {% endif %}
                            <input type="file" id="photo" name="photo" class="form-control">
                        </div>
                        <div class="form-group mb-2">
                            <label>Matricule :</label>
                            <input type="text" class="form-control" id="matricule" name = 'matricule' value="{{ employe.matricule|default:'' }}" readonly>
                        </div>
                        <div class="form-group mb-2">
                            <label>Nom :</label>
                            <input type="text" class="form-control" id="nom" name = 'nom' value="{{ employe.user.last_name }}">
                        </div>
                        <div class="form-group mb-2">
                            <label>Prénom :</label>
                            <input type="text" class="form-control" id="prenom" name = 'prenom' value="{{ employe.user.first_name }}">                            
                        </div>
                        <div class="form-group mb-2">
                            <label>Sexe :</label>
                            <select id='sexe' name = 'sexe' class="form-select">
                                <option value='h' {% if employe.sexe == 'h' %}selected{% endif %}>Homme</option>
                                <option value='f' {% if employe.sexe == 'f' %}selected{% endif %}>Femme</option>
                            </select>
                        </div>
                        
                    </div>
                    <div class="col">
                        <div class="form-group mb-2">
                            <label>Date de naissance :</label>
                            <input type="date" class="form-control" id="date_naissance" name = 'date_naissance' value="{{ employe.date_naissance|date:'Y-m-d' }}">                            
                        </div>
                        <div class="form-group mb-2">
                            <label>Département :</label>
                            <input type="text" class="form-control" id="departement" name = 'departement' value="{{ employe.departement.nom|default:'' }}" readonly>
                        </div>
                        <div class="form-group mb-2">
                            <label>Email :</label>
                            <input type="email" class="form-control" id="email" name = 'email'  value="{{ employe.user.email|default:'' }}">
                        </div>
                        <div class="form-group mb-2">
                            <label>Téléphone :</label>
                            <input type="text" class="form-control" id="telephone" name = 'telephone'  value="{{ employe.telephone|default:'' }}">
                        </div>
                        <div class="form-group mb-2">
                            <label>Adresse :</label>
                            <input type="text" class="form-control" id="adresse" name = 'adresse'  value="{{ employe.adresse|default:'' }}">
                        </div>
                    </div>
                    <button type="submit" class="btn btn-success d-block m-auto" id="enregistrerProfil">Enregistrer</button>
                </form>
            </div>
        </div>
    </div>
    <div class="accordion-item">
        <h2 class="accordion-header" id="headingContrats">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseContrats" aria-expanded="false" aria-controls="collapseContrats">
                <i class="bi bi-file-earmark-text me-2"></i> Contrats
            </button>
        </h2>
        <div id="collapseContrats" class="accordion-collapse collapse" aria-labelledby="headingContrats" data-bs-parent="#accordionInformationEmploye">
            <div class="accordion-body">
                {% for contrat in contrats %}
                    <div class="mb-3 p-3 border rounded">
                        <div class="form-group mb-2">
                            <label>Numéro :</label>
                            <input type="text" class="form-control" value="{{ contrat.numero_contrat }}" id="numero_contrat" readonly>
                        </div><div class="form-group mb-2">
                            <label>Type de Contrat :</label>
                            <input type="text" class="form-control" value="{{ contrat.type_contrat }}" id="type_contrat" readonly>
                        </div><div class="form-group mb-2">
                            <label>Date début  :</label>
                            <input type="date" class="form-control" value="{{ contrat.date_debut|date:'Y-m-d' }}" id="date_debut" readonly>
                        </div>
                        <div class="form-group mb-2">
                            <label>Date fin :</label>
                            <input type="date" class="form-control" value="{{ contrat.date_fin|date:'Y-m-d' }}" id="date_fin" readonly>
                        </div>
                        <div class="form-group mb-2">
                            <label>Salaire :</label>
                            <input type="number" class="form-control" value="{{ contrat.salaire_mensuel }}" id="salaire" readonly>
                        </div>
                        <div class="form-group mb-2">
                            <label>Statut :</label>
                            <input type="text" class="form-control" value="{{ contrat.statut }}" id="statut" readonly>
                        </div>
                        <div class="form-group mb-2">
                            <label>fichier :</label>
                            <a href="{{ contrat.fichier_contrat }}" target="_blank" class="btn btn-outline-primary">Voir le contrat</a>
                        </div>
                    </div>
                    {% empty %}
                    <p class="text-danger">Aucun contrat trouvé.</p>
                {% endfor %}
            </div>
        </div>
    </div>
    <div class="accordion-item">
        <h2 class="accordion-header" id="headingProjets">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseProjets" aria-expanded="false" aria-controls="collapseProjets">
                <i class="bi bi-briefcase me-2"></i> Projets
            </button>
        </h2>
        <div id="collapseProjets" class="accordion-collapse collapse" aria-labelledby="headingProjets" data-bs-parent="#accordionInformationEmploye">
            <div class="accordion-body">
                <ul class="list-group">
                    {% for projet in projets %}
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            {{ projet.nom_projet }} ({{ projet.pourcentage_temps_affectation }}%) du <strong>{{ projet.date_debut|date:"d/m/Y" }}</strong> au 
                            <strong>{{ projet.date_fin|date:"d/m/Y" }}</strong> en tant que {{ projet.role }}.
                        </li>
                    {% empty %}
                            <li class="list-group-item text-muted text-center">Vous n'êtes affecté à aucun projet.</li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>
    <div class="accordion-item">
        <h2 class="accordion-header" id="headingDocs">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseDocs" aria-expanded="false" aria-controls="collapseDocs">
                <i class="bi bi-file-earmark-text me-2"></i> Documents
            </button>
        </h2>
        <div id="collapseDocs" class="accordion-collapse collapse" aria-labelledby="headingDocs" data-bs-parent="#accordionInformationEmploye">
            <div class="accordion-body">
                <form method="POST" action="{% url 'gestion_employe:enregistrement-document-rh' %}" enctype="multipart/form-data">
                    {% csrf_token %}
                    <div class="row">
                        <div class="col">
                            <div class="form-group mb-2">
                                <label>photo</label>
                                {% if employe.photo %}
                                    <span>Fichier actuel : <a href="{{ employe.photo.url }}">{{employe.photo}}</a></span>
                                {% endif %}
                                <input type="file" class="form-control" name="photo">
                            </div>
                            <div class="form-group mb-2">
                                <label>CV</label>
                                {% if employe.CV %}
                                    <span>Fichier actuel : <a href="{{ employe.CV.url }}">{{employe.CV}}</a></span>
                                {% endif %}
                                <input type="file" class="form-control" name="cv">
                            </div>
                            <div class="form-group mb-2">
                                <label>Diplôme</label>
                                {% if employe.diplome %}
                                    <span>Fichier actuel : <a href="{{ employe.diplome.url }}">{{employe.diplome}}</a></span>
                                {% endif %}
                                <input type="file" class="form-control" name="diplome">
                            </div>
                        </div>
                        <div class="col">
                            <div class="form-group mb-2">
                                <label>Casier judiciaire</label>
                                {% if employe.casier_judiciaire %}
                                    <span>Fichier actuel : <a href="{{ employe.casier_judiciaire.url }}">{{employe.casier_judiciaire}}</a></span>
                                {% endif %}
                                <input type="file" class="form-control" name="casier_judiciaire">
                            </div>
                            <div class="form-group mb-2">
                                <label>RIB</label>
                                {% if employe.rib %}
                                    <span>Fichier actuel : <a href="{{ employe.rib.url }}">{{employe.rib}}</a></span>
                                {% endif %}
                                <input type="file" class="form-control" name="rib">
                            </div>
                        </div>
                    </div>
                    <button type="submit" class="btn btn-success d-block m-auto">Enregistrer</button>
                </form>
            </div>
        </div>
    </div> 
    <div class="accordion-item">
        <h2 class="accordion-header" id="headingCertificat">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseCertificat" aria-expanded="false" aria-controls="collapseCertificat">
                <i class="bi bi-file-earmark-text me-2"></i> Certificats
            </button>
        </h2>
        <div id="collapseCertificat" class="accordion-collapse collapse" aria-labelledby="headingCertificat" data-bs-parent="#accordionInformationEmploye">
            <div class="accordion-body">
                <div id="tableau-certificat" data-url="{% url 'gestion_employe:liste-formation' %}"></div>
                <button class="btn btn-success d-block m-auto" data-bs-toggle="modal" data-bs-target="#modalAjouterFormation">Ajouter un certificat</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}
{% block 'modal' %}
    {% include "gestion_employe/parts/modificationMotPasse.html" %}
    {% include "gestion_employe/parts/modalAjoutFormation.html" %}
{% endblock %}
{% block 'js' %}

<script src="{% static 'gestion_employe/js/mon_profil.js' %}"></script>
{% endblock %}