{% load static %}
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Profil utilisateur</title>

  <!-- CSS -->
  <link rel="stylesheet" href="{% static 'bootstrap.min.css' %}">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
  <link rel="stylesheet" href="{% static 'styles.css' %}">

  <style>
    .bg-orange-dark {
  background: linear-gradient(90deg, #993d00, #b34700); /* oranges plus sombres */
  color: white;
}
    .card-body p { margin-bottom: 0.5rem; }

    .main {
  margin-left: 0px; 
}
  </style>
</head>
<body>

<div class="container-fluid">
  <div class="row flex-nowrap">
    <!-- Sidebar -->
      {% include 'menu_principal.html' %}

    <!-- Main -->
    <main class="col px-2 py-4" style="margin-left: 280px;">

      {% if messages %}
      <!-- Modal Message Django -->
      <div class="modal fade" id="messageModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header bg-orange-dark text-white">
              <h5 class="modal-title">
                {% if messages.0.tags == 'error' %}
                  Erreur
                {% elif messages.0.tags == 'success' %}
                  Succès
                {% else %}
                  Information
                {% endif %}
              </h5>
              <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
              {% for message in messages %}
                <p>{{ message }}</p>
              {% endfor %}
            </div>
          </div>
        </div>
      </div>
      {% endif %}




<!-- Icône Notification -->
<div class="notification-bell position-fixed top-0 end-0 m-3" data-bs-toggle="modal" data-bs-target="#modalNotifications" style="z-index:1050; cursor:pointer;">
  <i class="bi bi-bell-fill fs-4"></i>
  <span class="badge bg-danger">{{ notifications_contrats|length }}</span>
</div>

<!-- Modal Notifications Contrats -->
<div class="modal fade" id="modalNotifications" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header bg-orange-dark text-white">
        <h5 class="modal-title"><i class="bi bi-bell me-2"></i>Contrats proches de la fin</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
  {% if notifications_contrats %}
    <ul class="list-group">
      {% for notif in notifications_contrats %}
          <h5>Votre Contrat <strong>{{ notif.numero }}</strong> signé le <strong>{{ notif.date }}</strong>
           se termine dans 
          <span class="badge bg-danger rounded-pill">{{ notif.jours_restants }} jours</span>
        </h5> 
      {% endfor %}
    </ul>
  {% else %}
    <p class="text-muted">Aucun contrat proche de la fin.</p>
  {% endif %}
</div>

      <div class="modal-footer">
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Fermer</button>
      </div>
    </div>
  </div>
</div>

      
      <!-- Profil -->

      <div class="container py-4">
        <div class="row justify-content-center">
          <div class="col-12 col-md-10 col-lg-8">
            <div class="card border-0 shadow-sm">

              <div class="card-header bg-light d-flex justify-content-between align-items-center">
                <h4 class="mb-0 fw-bold">
                  <i class="bi bi-person-circle me-2"></i> Mon Profil
                </h4>
              </div>

              <div class="card-body p-3">
                <!-- Infos personnelles -->
                <div class="row mb-3">
                  <div class="col-md-6">
                    <p><strong>Nom :</strong> {{ employe.last_name|default:"Non renseigné" }}</p>
                    <p><strong>Prénom :</strong> {{ employe.first_name|default:"Non renseigné" }}</p>
                    <p><strong>Matricule :</strong> {{ employe.matricule|default:"Non renseigné" }}</p>
                  </div>
                  <div class="col-md-6">
                    <p><strong>Département :</strong> {{ employe.departement|default:"Non renseigné" }}</p>
                    <p><strong>Email :</strong> {{ employe.email|default:"Non renseigné" }}</p>
                    <p><strong>Téléphone :</strong> {{ employe.telephone|default:"Non renseigné" }}</p>
                  </div>
                </div>

                <!-- Contrats -->
                <h5 class="mt-3">Contrats</h5>
                {% for contrat in contrats %}
                <div class="mb-3 p-3 border rounded">
                  <div class="row">
                    <div class="col-md-6">
                      <p><strong>Numéro :</strong> {{ contrat.numero_contrat }}</p>
                      <p><strong>Type :</strong> {{ contrat.type_contrat }}</p>
                      <p><strong>Date début :</strong> {{ contrat.date_debut|date:"d/m/Y" }}</p>
                      <p><strong>Date fin :</strong> {{ contrat.date_fin|date:"d/m/Y"|default:"Non précisée" }}</p>
                    </div>
                    <div class="col-md-6">
                      <p><strong>Salaire mensuel :</strong>
                        {% if contrat.salaire_mensuel %}
                          {{ contrat.salaire_mensuel }} GNF
                        {% else %}
                          Non précisé
                        {% endif %}
                      </p>
                      <p><strong>Statut :</strong>
                        <span class="badge 
                          {% if contrat.statut_auto == 'Actif' %}bg-success
                          {% elif contrat.statut_auto == 'Terminé' %}bg-danger
                          {% elif contrat.statut_auto == 'Suspendu' %}bg-warning text-dark
                          {% else %}bg-secondary{% endif %}">
                          {{ contrat.statut_auto }}
                        </span>
                      </p>
                      <p><strong>Solde congé :</strong> {{ contrat.solde_conge|default:"Non précisé" }} jours</p>
                      <p><strong>Fichier :</strong>
                        {% if contrat.fichier_contrat %}
                          <a href="{{ contrat.fichier_contrat.url }}" target="_blank">
                            <i class="bi bi-file-earmark-pdf me-1"></i> Télécharger
                          </a>
                        {% else %}
                          <span class="text-muted">Aucun fichier</span>
                        {% endif %}
                      </p>
                    </div>
                  </div>
                </div>
                {% empty %}
                <p class="text-danger">Aucun contrat trouvé.</p>
                {% endfor %}

                <!-- Projets -->
                <h5 class="mt-3">Projets</h5>
                <ul class="list-group mb-3">
                  {% for a in affectations %}
                  <li class="list-group-item d-flex justify-content-between align-items-center">
                    <div>
                      {{ a.projet.nom_projet }} - {{ a.temps_affectation }}%
                      {% if a.projet.statut %}
                        - <span class="badge bg-info text-dark">{{ a.projet.statut }}</span>
                      {% endif %}
                    </div>

                    <div>
                     
                      <button type="button" class="btn bg-orange-dark btn-sm text-white"
                              data-bs-toggle="modal" data-bs-target="#modalFicheProjet{{ a.projet.id }}">
                        <i class="bi bi-info-circle"></i> Détails
                      </button>
                    </div>
                  </li>
                  {% empty %}
                    <li class="list-group-item text-muted text-center">Aucun projet assigné.</li>
                  {% endfor %}
                </ul>
              </div>

              <div class="card-footer bg-white d-flex justify-content-end">
                <button type="button" class="btn btn-outline-secondary me-2" onclick="window.history.back()">Fermer</button>
                <a href="{% url 'profil' %}" class="btn bg-orange-dark text-white">
                  <i class="bi bi-pencil-square me-1"></i> Renseigner les autres informations
                </a>
              </div>
 
            </div>
          </div>
        </div>
      </div>

      {% for a in affectations %}
      <!-- Modal Détails Projet -->
      <div class="modal fade" id="modalFicheProjet{{ a.projet.id }}" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
          <div class="modal-content">
            <div class="modal-header bg-orange-dark text-white">
              <h5 class="modal-title">
                <i class="bi bi-info-circle me-2"></i>Détails du projet {{ a.projet.nom_projet }}
              </h5>
              <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            
            <div class="modal-body">
              <p><strong>Nom :</strong> {{ a.projet.nom_projet }}</p>
              <p><strong>Numéro convention :</strong> {{ a.projet.numero_convention }}</p>
              <p><strong>Dates :</strong> {{ a.projet.date_debut|date:"d/m/Y" }} → {{ a.projet.date_fin|date:"d/m/Y" }}</p>
              <p><strong>Type :</strong> {{ a.projet.get_type_projet_display }}</p>
              <p><strong>Domaine :</strong> {{ a.projet.get_domaine_recherche_display }}</p>
              <p><strong>Budget :</strong> {{ a.projet.budget }} GNF</p>
              <p><strong>Budget RH :</strong> {{ a.projet.budget_RH }} GNF</p>
              <p><strong>Statut :</strong> <span class="badge bg-info">{{ a.projet.statut }}</span></p>
              <p><strong>Description :</strong> {{ a.projet.description }}</p>

              <h6 class="mt-4">Employés affectés :</h6>
              <ul class="list-group mb-3">
                {% for aff in a.projet.affectations.all %}
                <li class="list-group-item d-flex justify-content-between align-items-center">
                  {{ aff.employe }} <span class="badge bg-orange-dark">{{ aff.temps_affectation }}%</span>
                </li>
                {% empty %}
                <li class="list-group-item text-muted">Aucun employé affecté</li>
                {% endfor %}
              </ul>

              <h6>Bailleurs :</h6>
              <ul class="list-group mb-3">
                {% for f in a.projet.financements.all %}
                <li class="list-group-item d-flex justify-content-between align-items-center">
                  {{ f.bailleur.nom }} <span class="badge bg-success">{{ f.pourcentage }}%</span>
                </li>
                {% empty %}
                <li class="list-group-item text-muted">Aucun bailleur enregistré</li>
                {% endfor %}
              </ul>

              <h6 class="mt-4">Documents du projet :</h6>
<ul class="list-group">
  {% for doc in a.projet.documents.all %}
    <li class="list-group-item d-flex justify-content-between align-items-start">
      <div>
        <strong>{{ doc.get_nom_document_display }}</strong><br>
        pour le projet {{ a.projet.nom_projet }}<br>
        {% if doc.description %}
          <small class="text-muted">{{ doc.description }}</small><br>
        {% endif %}
        <small class="text-muted">
          {% if doc.numero %}
            {{ doc.numero }} 
          {% endif %}
        </small>
        <br> <small></small>
        document ajouter le  {{ doc.date_ajout|date:"d/m/Y" }}</small>
        {% if doc.date_validite %}
          <br><small class="text-muted"> et Valide jusqu'au {{ doc.date_validite|date:"d/m/Y" }}</small>
        {% endif %}

      </div>
      
      
    </li>
  {% empty %}
    <li class="list-group-item text-muted">Aucun document disponible</li>
  {% endfor %}
</ul>

            </div>
            <div class="modal-footer bg-light">
              <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                <i class="bi bi-x-circle me-1"></i> Fermer
              </button>
            </div>
          </div>
        </div>
      </div>

      {% endfor %}
      

    </main>
  </div>
</div>

<!-- JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<script>
document.addEventListener("DOMContentLoaded", function () {
  // Ferme les modales ouvertes avant d'en ouvrir une autre
  const modals = document.querySelectorAll('.modal');
  modals.forEach(modal => {
    modal.addEventListener('show.bs.modal', function () {
      document.querySelectorAll('.modal.show').forEach(openModal => {
        if (openModal !== modal) {
          const instance = bootstrap.Modal.getInstance(openModal);
          if (instance) instance.hide();
        }
      });
    });
  });

  // Répare le bug d'écran figé après fermeture
  document.addEventListener('hidden.bs.modal', function () {
    if (!document.querySelector('.modal.show')) {
      document.body.classList.remove('modal-open');
      document.body.style.removeProperty('padding-right');
    }
  });


  const forms = document.querySelectorAll('form[action*="ajouter-document"]');
forms.forEach(form => {
  form.addEventListener('submit', function (e) {
    const btn = form.querySelector('button[type="submit"]');
    const modalEl = form.closest('.modal');
    if (btn) {
      btn.disabled = true;
      btn.innerHTML = '<i class="bi bi-hourglass-split"></i> Enregistrement...';
    }
    if (modalEl) {
      const modalInstance = bootstrap.Modal.getInstance(modalEl);
      if (modalInstance) modalInstance.hide();
    }
  });
});

  const messageModalEl = document.getElementById('messageModal');
  if (messageModalEl) {
    const messageModal = new bootstrap.Modal(messageModalEl);
    messageModal.show();
  }
});
</script>



</body>
</html>
























