{% extends 'navbar.html.twig' %}

{% block title %}Tableau de Bord{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <!-- ✅ Bootstrap DataTables CSS -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.8/css/dataTables.bootstrap5.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.5.0/css/responsive.bootstrap5.min.css">
{% endblock %}

{% block body %}
<div class="container-fluid">

    <h4 class="mb-4 fw-semibold">Tableau de Bord</h4>

    <div class="row g-4">
        <!-- SECTION 1 -->
        <div class="col-12 col-md-6 col-xl-3">
            <div class="card shadow-sm border-0 rounded-3 h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center mb-2">
                        <div class="bg-primary bg-opacity-10 text-primary p-3 rounded-circle me-3">
                            <i class="bi bi-people fs-4"></i>
                        </div>
                        <h6 class="card-title mb-0 fw-bold">Utilisateurs</h6>
                    </div>
                    <h3 class="fw-bold">128</h3>
                    <p class="text-muted small mb-0">+12 ce mois</p>
                </div>
            </div>
        </div>

        <!-- SECTION 2 -->
        <div class="col-12 col-md-6 col-xl-3">
            <div class="card shadow-sm border-0 rounded-3 h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center mb-2">
                        <div class="bg-success bg-opacity-10 text-success p-3 rounded-circle me-3">
                            <i class="bi bi-folder2-open fs-4"></i>
                        </div>
                        <h6 class="card-title mb-0 fw-bold">Documents</h6>
                    </div>
                    <h3 class="fw-bold">452</h3>
                    <p class="text-muted small mb-0">+32 ajoutés</p>
                </div>
            </div>
        </div>

        <!-- SECTION 3 -->
        <div class="col-12 col-md-6 col-xl-3">
            <div class="card shadow-sm border-0 rounded-3 h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center mb-2">
                        <div class="bg-warning bg-opacity-10 text-warning p-3 rounded-circle me-3">
                            <i class="bi bi-bar-chart fs-4"></i>
                        </div>
                        <h6 class="card-title mb-0 fw-bold">Statistiques</h6>
                    </div>
                    <h3 class="fw-bold">75%</h3>
                    <p class="text-muted small mb-0">Taux de progression</p>
                </div>
            </div>
        </div>

        <!-- SECTION 4 -->
        <div class="col-12 col-md-6 col-xl-3">
            <div class="card shadow-sm border-0 rounded-3 h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center mb-2">
                        <div class="bg-danger bg-opacity-10 text-danger p-3 rounded-circle me-3">
                            <i class="bi bi-gear fs-4"></i>
                        </div>
                        <h6 class="card-title mb-0 fw-bold">Paramètres</h6>
                    </div>
                    <h3 class="fw-bold">5</h3>
                    <p class="text-muted small mb-0">Configurations actives</p>
                </div>
            </div>
        </div>
    </div>

</div>

<div class="container-fluid">

    <div class="row g-4">

        <!-- ✅ SECTION 1 : DataTable responsive -->
        <div class="col-12">
            <div class="card shadow-sm border-0 rounded-3">
                <div class="card-header bg-white d-flex justify-content-between align-items-center">
                    <h6 class="fw-bold mb-0">Liste des utilisateurs</h6>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="usersTable" class="table table-striped table-bordered nowrap" style="width:100%">
                            <thead class="table-light">
                                <tr>
                                    <th>#</th>
                                    <th>Nom</th>
                                    <th>Email</th>
                                    <th>Rôle</th>
                                    <th>Date d'inscription</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>Jean Dupont</td>
                                    <td>jean.dupont@example.com</td>
                                    <td>Admin</td>
                                    <td>2025-03-15</td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td>Marie Claire</td>
                                    <td>marie.claire@example.com</td>
                                    <td>Utilisateur</td>
                                    <td>2025-05-02</td>
                                </tr>
                                <tr>
                                    <td>3</td>
                                    <td>Ali Ben Salah</td>
                                    <td>ali.ben@example.com</td>
                                    <td>Éditeur</td>
                                    <td>2025-06-22</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

       

    </div>
</div>
<div class="container-fluid mt-3">
    <h4 class="fw-semibold mb-4">Liste des Projets</h4>

    <div class="card shadow-sm border-0 rounded-3">
        <div class="card-header bg-white d-flex justify-content-between align-items-center">
            <h6 class="fw-bold mb-0">Projets en cours</h6>
            <button class="btn btn-primary btn-sm">
                <i class="bi bi-plus-lg"></i> Nouveau Projet
            </button>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table id="projectsTable" class="table table-striped table-bordered nowrap" style="width:100%">
                    <thead class="table-light">
                        <tr>
                            <th>#</th>
                            <th>Nom du projet</th>
                            <th>Client</th>
                            <th>Responsable</th>
                            <th>Budget (€)</th>
                            <th>Date de début</th>
                            <th>Date de fin</th>
                            <th>Statut</th>
                            <th>Avancement</th>
                            <th>Ville</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>Rénovation Bureau HQ</td>
                            <td>TechCorp</td>
                            <td>Jean Dupont</td>
                            <td>125 000</td>
                            <td>2025-01-12</td>
                            <td>2025-06-30</td>
                            <td><span class="badge bg-success">En cours</span></td>
                            <td>65%</td>
                            <td>Paris</td>
                            <td>
                                <button class="btn btn-sm btn-outline-primary"><i class="bi bi-eye"></i></button>
                                <button class="btn btn-sm btn-outline-warning"><i class="bi bi-pencil"></i></button>
                                <button class="btn btn-sm btn-outline-danger"><i class="bi bi-trash"></i></button>
                            </td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>Construction entrepôt logistique</td>
                            <td>Translog SA</td>
                            <td>Marie Claire</td>
                            <td>480 000</td>
                            <td>2025-02-01</td>
                            <td>2025-12-15</td>
                            <td><span class="badge bg-warning text-dark">Planifié</span></td>
                            <td>10%</td>
                            <td>Lyon</td>
                            <td>
                                <button class="btn btn-sm btn-outline-primary"><i class="bi bi-eye"></i></button>
                                <button class="btn btn-sm btn-outline-warning"><i class="bi bi-pencil"></i></button>
                                <button class="btn btn-sm btn-outline-danger"><i class="bi bi-trash"></i></button>
                            </td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>Aménagement open space</td>
                            <td>Design&Co</td>
                            <td>Ali Ben Salah</td>
                            <td>65 000</td>
                            <td>2025-03-10</td>
                            <td>2025-08-20</td>
                            <td><span class="badge bg-info text-dark">Étude</span></td>
                            <td>35%</td>
                            <td>Tunis</td>
                            <td>
                                <button class="btn btn-sm btn-outline-primary"><i class="bi bi-eye"></i></button>
                                <button class="btn btn-sm btn-outline-warning"><i class="bi bi-pencil"></i></button>
                                <button class="btn btn-sm btn-outline-danger"><i class="bi bi-trash"></i></button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<div class="container mt-4">
  <div class="row justify-content-center">
    <div class="col-12 col-md-8 col-lg-6">
      <div class="card shadow-sm">
        <div class="card-header bg-white">
          <h5 class="mb-0">Formulaire personnel</h5>
        </div>

        <form method="POST" action="" class="needs-validation" novalidate>
          <input type="hidden" name="_csrf_token" value="{{ csrf_token('') }}">

          <div class="card-body">
            <div class="row g-3">
              <!-- Nom -->
              <div class="col-12 col-md-6">
                <label for="lastname" class="form-label">Nom</label>
                <input type="text" class="form-control" id="lastname" name="lastname"
                       placeholder="Dupont" required>
                <div class="invalid-feedback">
                  Merci d'indiquer le nom.
                </div>
              </div>

              <!-- Prénom -->
              <div class="col-12 col-md-6">
                <label for="firstname" class="form-label">Prénom</label>
                <input type="text" class="form-control" id="firstname" name="firstname"
                       placeholder="Jean" required>
                <div class="invalid-feedback">
                  Merci d'indiquer le prénom.
                </div>
              </div>

              <!-- Téléphone -->
              <div class="col-12 col-md-6">
                <label for="phone" class="form-label">Téléphone</label>
                <input type="tel" class="form-control" id="phone" name="phone"
                       placeholder="+216 00 000 000" pattern="^\+?\d{6,15}$" required>
                <div class="form-text">Format accepté : chiffres (optionnel +), 6–15 chiffres.</div>
                <div class="invalid-feedback">
                  Téléphone invalide (ex: +21650000000).
                </div>
              </div>

              <!-- Solde -->
              <div class="col-12 col-md-6">
                <label for="balance" class="form-label">Solde (€)</label>
                <input type="number" step="0.01" min="0" class="form-control" id="balance" name="balance"
                       placeholder="0.00" required>
                <div class="invalid-feedback">
                  Indiquez un solde valide (>= 0).
                </div>
              </div>
            </div>
          </div>

          <div class="card-footer bg-white text-end">
            <button type="submit" class="btn btn-primary" id="submitBtn">
              <i class="bi bi-check-lg me-1"></i> Valider
            </button>
          </div>
        </form>

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

{# Validation bootstrap JS (ne pas dupliquer si déjà présent globalement) #}
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <!-- ✅ jQuery & DataTables JS -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.8/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.8/js/dataTables.bootstrap5.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.5.0/js/dataTables.responsive.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.5.0/js/responsive.bootstrap5.min.js"></script>

    <script>
        $(document).ready(function() {
            $('#usersTable').DataTable({
                responsive: true,
                language: {
                    url: "https://cdn.datatables.net/plug-ins/1.13.8/i18n/fr-FR.json"
                }
            });
        });
         $(document).ready(function() {
            $('#projectsTable').DataTable({
                responsive: true,
                pageLength: 5,
                order: [[0, 'asc']],
                language: {
                    url: "https://cdn.datatables.net/plug-ins/1.13.8/i18n/fr-FR.json"
                },
                columnDefs: [
                    { orderable: false, targets: -1 } // désactiver le tri sur la colonne "Actions"
                ]
            });
        });
        (function () {
    'use strict'
    // fetch all forms we want to apply validation to
    const forms = document.querySelectorAll('.needs-validation')
    Array.from(forms).forEach(function (form) {
      form.addEventListener('submit', function (event) {
        if (!form.checkValidity()) {
          event.preventDefault()
          event.stopPropagation()
        } else {
          // désactiver le bouton submit pour éviter doubles envois
          const btn = document.getElementById('submitBtn')
          if (btn) {
            btn.disabled = true
            btn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Envoi...'
          }
        }
        form.classList.add('was-validated')
      }, false)
    })
  })()
    </script>
{% endblock %}