{% load static %}
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Paramètres RH</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <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' %}">
</head>
<body>

<style>
.bg-orange-dark {
  background: linear-gradient(90deg, #993d00, #b34700);
  color: white;
}
</style>

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

  <script>
    document.addEventListener("DOMContentLoaded", function() {
      var messageModal = new bootstrap.Modal(document.getElementById('messageModal'));
      messageModal.show();
    });
  </script>
      {% endif %}

      <h2 class="mb-4"><i class="bi bi-gear-fill"></i> Paramètres Administration</h2>

      <div class="row">
        <!-- Colonne Départements -->
        <div class="col-md-6">
          <div class="d-flex justify-content-between align-items-center mb-2">
            <h5><i class="bi bi-building"></i> Départements</h5>
            <button class="btn bg-orange-dark btn-sm" data-bs-toggle="modal" data-bs-target="#modalAjouterDepartement">
              <i class="bi bi-plus-circle"></i> Ajouter
            </button>
          </div>

          <!-- Modal Ajout -->
          <div class="modal fade" id="modalAjouterDepartement" tabindex="-1">
            <div class="modal-dialog">
              <form method="POST">
                {% csrf_token %}
                <input type="hidden" name="ajouter_departement" value="1">
                <div class="modal-content">
                  <div class="modal-header bg-orange-dark text-white">
                    <h5 class="modal-title">Ajouter un département</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                  </div>
                  <div class="modal-body">
                    {{ form_departement.as_p }}
                  </div>
                  <div class="modal-footer">
                    <button type="submit" class="btn bg-orange-dark">Enregistrer</button>
                  </div>
                </div>
              </form>
            </div>
          </div>

          <!-- Liste des départements -->
          <ul class="list-group">
            {% for d in departements %}
            <li class="list-group-item d-flex justify-content-between align-items-center">
              {{ d.nom }}
                <div>
      <!-- Bouton détails -->
      <button class="btn btn-sm btn-outline-info" data-bs-toggle="modal" data-bs-target="#modalDetailDepartement{{ d.id }}">
        <i class="bi bi-eye"></i> Détails
      </button>

      <!-- Bouton modification -->
      <button class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#modalModifierDepartement{{ d.id }}">
        <i class="bi bi-pencil-square"></i>
      </button>


      <form method="POST" style="display:inline;">
        {% csrf_token %}
        <input type="hidden" name="supprimer_departement" value="1">
        <input type="hidden" name="departement_id" value="{{ d.id }}">
        <button type="submit" class="btn btn-sm btn-outline-danger" onclick="return confirm('Voulez-vous vraiment supprimer ce département ?');">
          <i class="bi bi-trash"></i> 
        </button>
      </form>
    </div>
  </li><!-- Modal détails -->
<div class="modal fade" id="modalDetailDepartement{{ d.id }}" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header bg-orange-dark text-white">
        <h5 class="modal-title">Détails du département</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <p><strong>Nom :</strong> {{ d.nom }}</p>
        <p><strong>Chef :</strong> {% if d.chef %}{{ d.chef.first_name }} {{ d.chef.last_name }}{% else %}Non défini{% endif %}</p>

        <!-- Liste des employés du département -->
        {% for emp in d.employe_set.all %}
          <p>- {{ emp.username }}</p>
        {% empty %}
          <p>Aucun employé associé</p>
        {% endfor %}
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
      </div>
    </div>
  </div>
</div>


<div class="modal fade" id="modalModifierDepartement{{ d.id }}" tabindex="-1">
  <div class="modal-dialog">
    <form method="POST">
      {% csrf_token %}
      <input type="hidden" name="modifier_departement" value="1">
      <input type="hidden" name="departement_id" value="{{ d.id }}">
      <div class="modal-content">
        <div class="modal-header bg-orange-dark text-white">
          <h5 class="modal-title">Modifier le département</h5>
          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
        </div>

        <div class="modal-body">
          <!-- Nom du département -->
          <div class="mb-3">
            <label for="nom_{{ d.id }}" class="form-label">Nom du département</label>
            <input type="text" class="form-control" id="nom_{{ d.id }}" name="nom" value="{{ d.nom }}" required>
          </div>

          <!-- Sélection du chef -->
          <div class="mb-3">
            <label for="chef_{{ d.id }}" class="form-label">Chef du département</label>
            <select class="form-select" id="chef_{{ d.id }}" name="chef">
              <option value="">-- Aucun chef --</option>
              {% for emp in employes %}
                <option value="{{ emp.id }}" {% if d.chef and emp.id == d.chef.id %}selected{% endif %}>
                  {{ emp.first_name }} {{ emp.last_name }}
                </option>
              {% endfor %}
            </select>
          </div>
        </div>

        <div class="modal-footer">
          <button type="submit" class="btn bg-orange-dark">Modifier</button>
        </div>
      </div>
    </form>
  </div>
</div>


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


        <!-- Colonne Groupes -->
        <div class="col-md-6">
          <div class="d-flex justify-content-between align-items-center mb-2">
            <h5><i class="bi bi-person-badge-fill"></i> Groupes et rôles</h5>
            <button class="btn bg-orange-dark btn-sm">Ajouter</button>
          </div>

          <ul class="list-group">
            {% for g in groupes %}
            <li class="list-group-item d-flex justify-content-between align-items-center">
              {{ g.name }}
              <a href="{% url 'admin:auth_group_change' g.id %}" class="btn btn-sm btn-outline-secondary">
                <i class="bi bi-pencil"></i>
              </a>
            </li>
            {% endfor %}
          </ul>
        </div>
      </div>

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

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
