<?php 
use App\Core\Auth;
$title = 'Dashboard Superviseur'; 
$user = Auth::user();
$stats = $stats ?? [];
$pendingReports = $pending_reports ?? [];
$recentIncidents = $recent_incidents ?? [];
?>

<style>
  .stat-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px;
    color: #fff;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 10px 40px rgba(102,126,234,.15);
    transition: transform 0.2s ease;
  }
  .stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 50px rgba(102,126,234,.25);
  }
  .stat-card.warning {
    background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
  }
  .stat-card.success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  }
  .stat-card.info {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  }
  .stat-value {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
  }
  .stat-label {
    font-size: 0.95rem;
    opacity: 0.9;
  }
  .action-card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,.06);
    transition: all 0.2s ease;
  }
  .action-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    transform: translateY(-2px);
  }
  .action-card .card-header {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: none;
    border-radius: 12px 12px 0 0;
    font-weight: 600;
  }
  .pending-item {
    padding: 1rem;
    border-left: 4px solid #fbbf24;
    background: #fffbeb;
    border-radius: 8px;
    margin-bottom: 0.75rem;
    transition: all 0.2s ease;
  }
  .pending-item:hover {
    background: #fef3c7;
    box-shadow: 0 2px 8px rgba(251,191,36,.2);
  }
  .incident-item {
    padding: 0.75rem;
    border-left: 3px solid #e5e7eb;
    background: #f9fafb;
    border-radius: 6px;
    margin-bottom: 0.5rem;
  }
  .badge-priority {
    padding: 0.35rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
  }
  .sup-layout-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
  }
  .sup-layout-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
  }
  .sup-sortable {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  .sup-section {
    position: relative;
  }
  .sup-section-handle {
    position: absolute;
    left: -26px;
    top: 0;
    width: 22px;
    height: 22px;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: rgba(255,255,255,.95);
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 10px rgba(15,23,42,.08);
    color: #64748b;
    cursor: grab;
    z-index: 5;
  }
  .sup-section-handle:active {
    cursor: grabbing;
  }
  .sup-layout-on .sup-section-handle,
  .sup-layout-on .sup-widget-handle,
  .sup-layout-on .sup-widget-toggle {
    display: inline-flex;
  }
  .sup-layout-panel {
    display: none;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 12px rgba(0,0,0,.06);
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
  }
  .sup-layout-panel.show {
    display: block;
  }
  .sup-layout-panel__head {
    margin-bottom: 0.85rem;
  }
  .sup-layout-panel__title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #0f172a;
  }
  .sup-layout-panel__hint {
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 0.2rem;
  }
  .sup-layout-panel__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
  }
  .sup-layout-group {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
    padding: 0.85rem;
  }
  .sup-layout-group__title {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #64748b;
    margin-bottom: 0.65rem;
  }
  .sup-layout-list {
    display: grid;
    gap: 0.45rem;
  }
  .sup-layout-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.45rem 0.6rem;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #fff;
  }
  .sup-layout-item__label {
    font-size: 0.78rem;
    font-weight: 600;
    color: #0f172a;
  }
  .sup-layout-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    color: #64748b;
    cursor: pointer;
  }
  .sup-widget {
    position: relative;
  }
  .sup-widget-handle,
  .sup-widget-toggle {
    position: absolute;
    top: 0.6rem;
    width: 28px;
    height: 28px;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid #dbe4f0;
    background: rgba(255,255,255,.96);
    box-shadow: 0 4px 10px rgba(15,23,42,.08);
    color: #64748b;
    z-index: 5;
  }
  .sup-widget-handle {
    left: 0.75rem;
    cursor: grab;
  }
  .sup-widget-handle:active {
    cursor: grabbing;
  }
  .sup-widget-toggle {
    left: 2.65rem;
    cursor: pointer;
  }
  .sup-layout-on .sup-widget {
    cursor: grab;
  }
  .sup-layout-on .sup-widget:active {
    cursor: grabbing;
  }
  .sup-layout-on .sup-widget .card {
    pointer-events: none;
    user-select: none;
  }
  .sup-layout-on .sup-widget .card * {
    user-select: none;
  }
  .sup-layout-on .sup-widget-toggle,
  .sup-layout-on .sup-section-handle {
    pointer-events: auto;
  }
  .sup-item-hidden {
    display: none !important;
  }
  .sortable-ghost {
    opacity: 0.35;
    outline: 2px dashed rgba(37,99,235,.45);
    outline-offset: -6px;
    background: linear-gradient(135deg, rgba(59,130,246,.06), rgba(37,99,235,.1));
    border-radius: 12px;
  }
  .sortable-drag {
    box-shadow: 0 12px 32px rgba(15,23,42,.16);
    transform: scale(.985);
  }
</style>

<div class="mb-4 sup-layout-toolbar">
  <div>
    <h2 class="mb-1"><i class="fas fa-user-tie me-2"></i>Tableau de bord Superviseur</h2>
    <p class="text-muted mb-0">Bienvenue <?= htmlspecialchars($user['name']) ?> - Gérez les validations et suivez les interventions</p>
  </div>
  <div class="sup-layout-actions">
    <button type="button" id="sup-layout-toggle" class="btn btn-outline-primary btn-sm">
      <i class="fas fa-grip me-1"></i>Layout
    </button>
    <button type="button" id="sup-layout-reset" class="btn btn-outline-secondary btn-sm">
      <i class="fas fa-rotate-left me-1"></i>Réinitialiser
    </button>
  </div>
</div>

<div id="sup-layout-panel" class="sup-layout-panel" hidden>
  <div class="sup-layout-panel__head">
    <div class="sup-layout-panel__title">Personnalisation du dashboard superviseur</div>
    <div class="sup-layout-panel__hint">Masquez les blocs secondaires et réorganisez les cartes. Les préférences restent enregistrées sur ce navigateur.</div>
  </div>
  <div class="sup-layout-panel__grid">
    <div class="sup-layout-group">
      <div class="sup-layout-group__title">Sections</div>
      <div id="sup-layout-sections" class="sup-layout-list"></div>
    </div>
    <div class="sup-layout-group">
      <div class="sup-layout-group__title">Blocs</div>
      <div id="sup-layout-widgets" class="sup-layout-list"></div>
    </div>
  </div>
</div>

<div id="sup-sortable" class="sup-sortable">

<!-- Statistiques clés -->
<div class="sup-section" data-section-id="supervisor-stats" data-layout-label="Statistiques clés">
  <span class="sup-section-handle" title="Déplacer la section"><i class="fas fa-grip-vertical"></i></span>
<div class="row g-3 mb-4" data-layout-row="supervisor-stats-row">
  <div class="col-md-3 sup-widget" data-widget-id="stat-pending-validations" data-layout-label="Rapports en attente de validation">
    <div class="stat-card warning">
      <div class="stat-value"><?= (int)($stats['pending_validations'] ?? 0) ?></div>
      <div class="stat-label"><i class="fas fa-clock me-1"></i>Rapports en attente de validation</div>
    </div>
  </div>
  <div class="col-md-3 sup-widget" data-widget-id="stat-active-incidents" data-layout-label="Incidents en cours">
    <div class="stat-card info">
      <div class="stat-value"><?= (int)($stats['active_incidents'] ?? 0) ?></div>
      <div class="stat-label"><i class="fas fa-tools me-1"></i>Incidents en cours</div>
    </div>
  </div>
  <div class="col-md-3 sup-widget" data-widget-id="stat-validated-today" data-layout-label="Validés aujourd'hui">
    <div class="stat-card success">
      <div class="stat-value"><?= (int)($stats['validated_today'] ?? 0) ?></div>
      <div class="stat-label"><i class="fas fa-check-circle me-1"></i>Validés aujourd'hui</div>
    </div>
  </div>
  <div class="col-md-3 sup-widget" data-widget-id="stat-technicians" data-layout-label="Techniciens actifs">
    <div class="stat-card">
      <div class="stat-value"><?= (int)($stats['total_technicians'] ?? 0) ?></div>
      <div class="stat-label"><i class="fas fa-users me-1"></i>Techniciens actifs</div>
    </div>
  </div>
</div>
</div>

<!-- Actions rapides -->
<div class="sup-section" data-section-id="supervisor-actions" data-layout-label="Actions rapides">
  <span class="sup-section-handle" title="Déplacer la section"><i class="fas fa-grip-vertical"></i></span>
<div class="row g-3 mb-4" data-layout-row="supervisor-actions-row">
  <div class="col-md-6 col-lg-3 sup-widget" data-widget-id="action-cartography" data-layout-label="Cartographie Live">
    <a href="<?= htmlspecialchars(route_url('/cartographie')) ?>" class="btn btn-lg btn-primary w-100 d-flex align-items-center justify-content-center" style="height: 80px;">
      <div class="text-center">
        <i class="fas fa-map-marked-alt d-block mb-2" style="font-size: 1.5rem;"></i>
        <span>Cartographie Live</span>
      </div>
    </a>
  </div>
  <div class="col-md-6 col-lg-3 sup-widget" data-widget-id="action-incidents" data-layout-label="Tous les incidents">
    <a href="<?= htmlspecialchars(route_url('/incidents')) ?>" class="btn btn-lg btn-outline-primary w-100 d-flex align-items-center justify-content-center" style="height: 80px;">
      <div class="text-center">
        <i class="fas fa-list-check d-block mb-2" style="font-size: 1.5rem;"></i>
        <span>Tous les incidents</span>
      </div>
    </a>
  </div>
  <div class="col-md-6 col-lg-3 sup-widget" data-widget-id="action-planning" data-layout-label="Planning">
    <a href="<?= htmlspecialchars(route_url('/planning')) ?>" class="btn btn-lg btn-outline-success w-100 d-flex align-items-center justify-content-center" style="height: 80px;">
      <div class="text-center">
        <i class="fas fa-calendar-alt d-block mb-2" style="font-size: 1.5rem;"></i>
        <span>Planning</span>
      </div>
    </a>
  </div>
  <div class="col-md-6 col-lg-3 sup-widget" data-widget-id="action-users" data-layout-label="Gestion Utilisateurs">
    <a href="<?= htmlspecialchars(route_url('/settings/users')) ?>" class="btn btn-lg btn-outline-secondary w-100 d-flex align-items-center justify-content-center" style="height: 80px;">
      <div class="text-center">
        <i class="fas fa-users-cog d-block mb-2" style="font-size: 1.5rem;"></i>
        <span>Gestion Utilisateurs</span>
      </div>
    </a>
  </div>
</div>
</div>

<div class="sup-section" data-section-id="supervisor-panels" data-layout-label="Panneaux principaux">
  <span class="sup-section-handle" title="Déplacer la section"><i class="fas fa-grip-vertical"></i></span>
<div class="row g-3" data-layout-row="supervisor-main-row">
  <!-- Rapports en attente de validation -->
  <div class="col-lg-8 sup-widget" data-widget-id="panel-pending-reports" data-layout-label="Rapports à valider">
    <div class="card action-card">
      <div class="card-header d-flex align-items-center justify-content-between">
        <h5 class="mb-0"><i class="fas fa-clipboard-check me-2"></i>Rapports à valider</h5>
        <span class="badge bg-warning"><?= count($pendingReports) ?></span>
      </div>
      <div class="card-body">
        <?php if (empty($pendingReports)): ?>
          <div class="alert alert-success mb-0">
            <i class="fas fa-check-circle me-2"></i>Aucun rapport en attente de validation
          </div>
        <?php else: ?>
          <?php foreach ($pendingReports as $report): ?>
            <div class="pending-item">
              <div class="d-flex align-items-center justify-content-between mb-2">
                <h6 class="mb-0">
                  <a href="<?= htmlspecialchars(route_url('/incidents/detail', ['id' => $report['incident_id']])) ?>" class="text-decoration-none">
                    <i class="fas fa-ticket-alt me-1"></i><?= htmlspecialchars($report['ticket_id']) ?>
                  </a>
                </h6>
                <span class="badge badge-priority bg-<?= htmlspecialchars($report['priority_color'] ?? 'secondary') ?>">
                  <?= htmlspecialchars($report['priority'] ?? 'Normal') ?>
                </span>
              </div>
              <p class="mb-2 small text-muted"><?= htmlspecialchars($report['title']) ?></p>
              <div class="d-flex align-items-center justify-content-between">
                <div class="small text-muted">
                  <i class="fas fa-user me-1"></i><?= htmlspecialchars($report['technician_name'] ?? 'Technicien') ?>
                  <span class="ms-2"><i class="far fa-clock me-1"></i><?= date('d/m H:i', strtotime($report['submitted_at'])) ?></span>
                </div>
                <div class="btn-group btn-group-sm">
                  <a href="<?= htmlspecialchars(route_url('/incidents/treatment', ['id' => $report['incident_id'], 'view' => 1])) ?>" class="btn btn-outline-primary">
                    <i class="fas fa-eye"></i> Voir
                  </a>
                  <button type="button" class="btn btn-success" onclick="validateReport(<?= (int)$report['incident_id'] ?>)">
                    <i class="fas fa-check"></i> Valider
                  </button>
                  <button type="button" class="btn btn-danger" onclick="rejectReport(<?= (int)$report['incident_id'] ?>)">
                    <i class="fas fa-times"></i> Refuser
                  </button>
                </div>
              </div>
            </div>
          <?php endforeach; ?>
        <?php endif; ?>
      </div>
    </div>
  </div>

  <!-- Incidents récents -->
  <div class="col-lg-4 sup-widget" data-widget-id="panel-recent-incidents" data-layout-label="Incidents récents">
    <div class="card action-card">
      <div class="card-header">
        <h5 class="mb-0"><i class="fas fa-history me-2"></i>Incidents récents</h5>
      </div>
      <div class="card-body" style="max-height: 500px; overflow-y: auto;">
        <?php if (empty($recentIncidents)): ?>
          <p class="text-muted mb-0">Aucun incident récent</p>
        <?php else: ?>
          <?php foreach ($recentIncidents as $incident): ?>
            <div class="incident-item">
              <a href="<?= htmlspecialchars(route_url('/incidents/detail', ['id' => $incident['id']])) ?>" class="text-decoration-none">
                <div class="d-flex align-items-center justify-content-between mb-1">
                  <strong class="small"><?= htmlspecialchars($incident['ticket_id']) ?></strong>
                  <?php $statusColor = incident_status_color($incident); ?>
                  <span class="badge small" style="background-color: <?= htmlspecialchars($statusColor) ?>;">
                    <?= htmlspecialchars($incident['status_label'] ?? 'N/A') ?>
                  </span>
                </div>
                <p class="mb-1 small"><?= htmlspecialchars(mb_substr($incident['title'], 0, 60)) ?><?= mb_strlen($incident['title']) > 60 ? '...' : '' ?></p>
                <div class="small text-muted">
                  <i class="far fa-clock me-1"></i><?= date('d/m H:i', strtotime($incident['created_at'])) ?>
                </div>
              </a>
            </div>
          <?php endforeach; ?>
        <?php endif; ?>
      </div>
    </div>
  </div>
</div>
</div>

</div>

<!-- Modales pour validation/rejet -->
<div class="modal fade" id="validateModal" tabindex="-1" aria-labelledby="validateModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <form method="post" id="validateForm" action="<?= htmlspecialchars(route_url('/incidents/treatment/validate')) ?>">
        <div class="modal-header">
          <h5 class="modal-title" id="validateModalLabel"><i class="fas fa-check-circle me-2"></i>Valider le rapport</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
        </div>
        <div class="modal-body">
          <input type="hidden" name="incident_id" id="validate_incident_id">
          <div class="mb-3">
            <label for="supervisor_comments" class="form-label">Commentaires de validation (optionnel)</label>
            <textarea class="form-control" name="supervisor_comments" id="supervisor_comments" rows="4" placeholder="Ajoutez vos commentaires..."></textarea>
          </div>
          <div class="alert alert-info mb-0">
            <i class="fas fa-info-circle me-2"></i>La validation fera passer l'incident en statut "Traité"
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
          <button type="submit" class="btn btn-success"><i class="fas fa-check me-1"></i>Valider</button>
        </div>
      </form>
    </div>
  </div>
</div>

<div class="modal fade" id="rejectModal" tabindex="-1" aria-labelledby="rejectModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <form method="post" id="rejectForm" action="<?= htmlspecialchars(route_url('/incidents/treatment/invalidate')) ?>">
        <div class="modal-header bg-danger text-white">
          <h5 class="modal-title" id="rejectModalLabel"><i class="fas fa-times-circle me-2"></i>Refuser le rapport</h5>
          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Fermer"></button>
        </div>
        <div class="modal-body">
          <input type="hidden" name="incident_id" id="reject_incident_id">
          <div class="mb-3">
            <label for="rejection_reason" class="form-label">Raison du refus <span class="text-danger">*</span></label>
            <textarea class="form-control" name="rejection_reason" id="rejection_reason" rows="4" placeholder="Expliquez pourquoi ce rapport est refusé..." required></textarea>
            <div class="form-text">Ce commentaire sera visible par le technicien</div>
          </div>
          <div class="alert alert-warning mb-0">
            <i class="fas fa-exclamation-triangle me-2"></i>Le technicien devra soumettre un nouveau rapport
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
          <button type="submit" class="btn btn-danger"><i class="fas fa-times me-1"></i>Refuser</button>
        </div>
      </form>
    </div>
  </div>
</div>

<script>
(function(){
  'use strict';

  var LS_SECTION_ORDER = 'sup_dashboard_section_order_v1';
  var LS_WIDGET_ORDER = 'sup_dashboard_widget_order_v1';
  var LS_HIDDEN = 'sup_dashboard_hidden_v1';
  var sortableEl = document.getElementById('sup-sortable');
  var layoutBtn = document.getElementById('sup-layout-toggle');
  var resetBtn = document.getElementById('sup-layout-reset');
  var layoutPanel = document.getElementById('sup-layout-panel');
  var sectionList = document.getElementById('sup-layout-sections');
  var widgetList = document.getElementById('sup-layout-widgets');
  var hiddenState = readJson(LS_HIDDEN, { sections: {}, widgets: {} });
  var widgetOrderMap = readJson(LS_WIDGET_ORDER, {});
  var layoutMode = false;
  var sortInstances = [];

  if (!sortableEl) {
    return;
  }

  function readJson(key, fallback) {
    try {
      var parsed = JSON.parse(localStorage.getItem(key));
      return parsed && typeof parsed === 'object' ? parsed : fallback;
    } catch (error) {
      return fallback;
    }
  }

  function saveJson(key, value) {
    try {
      localStorage.setItem(key, JSON.stringify(value));
    } catch (error) {}
  }

  function collectSections() {
    return Array.from(sortableEl.querySelectorAll('[data-section-id]')).map(function(section) {
      return {
        id: section.getAttribute('data-section-id'),
        label: section.getAttribute('data-layout-label') || section.getAttribute('data-section-id')
      };
    });
  }

  function collectWidgets() {
    return Array.from(document.querySelectorAll('[data-widget-id]')).map(function(widget) {
      return {
        id: widget.getAttribute('data-widget-id'),
        label: widget.getAttribute('data-layout-label') || widget.getAttribute('data-widget-id'),
        row: widget.parentElement ? widget.parentElement.getAttribute('data-layout-row') || 'widgets' : 'widgets'
      };
    });
  }

  function restoreSectionOrder() {
    var saved = readJson(LS_SECTION_ORDER, []);
    if (!Array.isArray(saved) || saved.length < 2) {
      return;
    }
    saved.forEach(function(id) {
      var section = sortableEl.querySelector('[data-section-id="' + id + '"]');
      if (section) {
        sortableEl.appendChild(section);
      }
    });
  }

  function persistSectionOrder() {
    saveJson(LS_SECTION_ORDER, collectSections().map(function(section) { return section.id; }));
  }

  function restoreWidgetOrder() {
    document.querySelectorAll('[data-layout-row]').forEach(function(row) {
      var rowId = row.getAttribute('data-layout-row');
      var saved = widgetOrderMap[rowId];
      if (!Array.isArray(saved) || saved.length < 2) {
        return;
      }
      saved.forEach(function(id) {
        var widget = row.querySelector('[data-widget-id="' + id + '"]');
        if (widget) {
          row.appendChild(widget);
        }
      });
    });
  }

  function persistWidgetOrder(row) {
    var rowId = row.getAttribute('data-layout-row');
    if (!rowId) {
      return;
    }
    widgetOrderMap[rowId] = Array.from(row.querySelectorAll('[data-widget-id]')).map(function(widget) {
      return widget.getAttribute('data-widget-id');
    });
    saveJson(LS_WIDGET_ORDER, widgetOrderMap);
  }

  function persistAllWidgetOrders() {
    document.querySelectorAll('[data-layout-row]').forEach(function(row) {
      persistWidgetOrder(row);
    });
  }

  function ensureWidgetControls() {
    document.querySelectorAll('[data-widget-id]').forEach(function(widget) {
      if (!widget.querySelector('.sup-widget-handle')) {
        var handle = document.createElement('button');
        handle.type = 'button';
        handle.className = 'sup-widget-handle';
        handle.title = 'Déplacer le bloc';
        handle.innerHTML = '<i class="fas fa-grip"></i>';
        widget.insertBefore(handle, widget.firstChild);
      }
      if (!widget.querySelector('.sup-widget-toggle')) {
        var toggle = document.createElement('button');
        toggle.type = 'button';
        toggle.className = 'sup-widget-toggle';
        toggle.title = 'Masquer le bloc';
        toggle.setAttribute('data-widget-toggle', widget.getAttribute('data-widget-id'));
        toggle.innerHTML = '<i class="fas fa-eye-slash"></i>';
        widget.insertBefore(toggle, widget.firstChild);
      }
    });
  }

  function syncInlineControls() {
    document.querySelectorAll('[data-widget-toggle]').forEach(function(button) {
      var widgetId = button.getAttribute('data-widget-toggle');
      var hidden = !!(hiddenState.widgets && hiddenState.widgets[widgetId]);
      button.title = hidden ? 'Afficher le bloc' : 'Masquer le bloc';
      button.innerHTML = hidden ? '<i class="fas fa-eye"></i>' : '<i class="fas fa-eye-slash"></i>';
    });
  }

  function setHidden(type, id, hidden) {
    var selector = type === 'section' ? '[data-section-id="' + id + '"]' : '[data-widget-id="' + id + '"]';
    var target = document.querySelector(selector);
    if (!target) {
      return;
    }
    target.classList.toggle('sup-item-hidden', hidden);
    if (type === 'section') {
      hiddenState.sections[id] = hidden;
    } else {
      hiddenState.widgets[id] = hidden;
    }
    saveJson(LS_HIDDEN, hiddenState);
    syncInlineControls();
    buildLayoutPanel();
  }

  function applyHiddenState() {
    Object.keys(hiddenState.sections || {}).forEach(function(id) {
      var section = document.querySelector('[data-section-id="' + id + '"]');
      if (section) {
        section.classList.toggle('sup-item-hidden', !!hiddenState.sections[id]);
      }
    });
    Object.keys(hiddenState.widgets || {}).forEach(function(id) {
      var widget = document.querySelector('[data-widget-id="' + id + '"]');
      if (widget) {
        widget.classList.toggle('sup-item-hidden', !!hiddenState.widgets[id]);
      }
    });
  }

  function buildLayoutPanel() {
    if (!sectionList || !widgetList) {
      return;
    }
    sectionList.innerHTML = collectSections().map(function(section) {
      var checked = !(hiddenState.sections && hiddenState.sections[section.id]);
      return '<label class="sup-layout-item">'
        + '<span class="sup-layout-item__label">' + section.label + '</span>'
        + '<span class="sup-layout-switch"><input type="checkbox" data-layout-type="section" data-layout-id="' + section.id + '" ' + (checked ? 'checked' : '') + '>Visible</span>'
        + '</label>';
    }).join('');
    widgetList.innerHTML = collectWidgets().map(function(widget) {
      var checked = !(hiddenState.widgets && hiddenState.widgets[widget.id]);
      return '<label class="sup-layout-item">'
        + '<span class="sup-layout-item__label">' + widget.label + '</span>'
        + '<span class="sup-layout-switch"><input type="checkbox" data-layout-type="widget" data-layout-id="' + widget.id + '" ' + (checked ? 'checked' : '') + '>Visible</span>'
        + '</label>';
    }).join('');
  }

  function destroySortables() {
    sortInstances.forEach(function(instance) {
      instance.destroy();
    });
    sortInstances = [];
  }

  function initSortables() {
    destroySortables();
    if (typeof Sortable === 'undefined') {
      window.setTimeout(function() {
        if (layoutMode) {
          initSortables();
        }
      }, 250);
      return;
    }

    sortInstances.push(Sortable.create(sortableEl, {
      handle: '.sup-section-handle',
      animation: 180,
      forceFallback: true,
      fallbackTolerance: 4,
      ghostClass: 'sortable-ghost',
      chosenClass: 'sortable-chosen',
      dragClass: 'sortable-drag',
      onEnd: function() {
        persistSectionOrder();
        buildLayoutPanel();
      }
    }));

    document.querySelectorAll('[data-layout-row]').forEach(function(row) {
      sortInstances.push(Sortable.create(row, {
        group: 'supervisor-dashboard-widgets',
        draggable: '[data-widget-id]',
        animation: 180,
        forceFallback: true,
        fallbackTolerance: 4,
        ghostClass: 'sortable-ghost',
        chosenClass: 'sortable-chosen',
        dragClass: 'sortable-drag',
        filter: '.sup-widget-toggle, input, textarea, select, label, a, button, .btn-group, .btn-group *',
        preventOnFilter: false,
        onEnd: function() {
          persistAllWidgetOrders();
          buildLayoutPanel();
        }
      }));
    });
  }

  function setLayoutMode(on) {
    layoutMode = on;
    sortableEl.classList.toggle('sup-layout-on', on);
    if (layoutBtn) {
      layoutBtn.classList.toggle('active', on);
    }
    if (layoutPanel) {
      layoutPanel.hidden = !on;
      layoutPanel.classList.toggle('show', on);
    }
    if (on) {
      initSortables();
    } else {
      destroySortables();
    }
  }

  function resetLayout() {
    [LS_SECTION_ORDER, LS_WIDGET_ORDER, LS_HIDDEN].forEach(function(key) {
      try {
        localStorage.removeItem(key);
      } catch (error) {}
    });
    window.location.reload();
  }

  restoreSectionOrder();
  restoreWidgetOrder();
  ensureWidgetControls();
  applyHiddenState();
  buildLayoutPanel();
  syncInlineControls();

  if (layoutBtn) {
    layoutBtn.addEventListener('click', function() {
      setLayoutMode(!layoutMode);
    });
  }

  if (resetBtn) {
    resetBtn.addEventListener('click', resetLayout);
  }

  document.addEventListener('click', function(event) {
    var widgetToggle = event.target.closest('[data-widget-toggle]');
    if (!widgetToggle) {
      return;
    }
    var widgetId = widgetToggle.getAttribute('data-widget-toggle');
    setHidden('widget', widgetId, !(hiddenState.widgets && hiddenState.widgets[widgetId]));
  });

  document.addEventListener('change', function(event) {
    var control = event.target.closest('[data-layout-type][data-layout-id]');
    if (!control) {
      return;
    }
    setHidden(control.getAttribute('data-layout-type'), control.getAttribute('data-layout-id'), !control.checked);
  });

  setLayoutMode(false);
})();

function validateReport(incidentId) {
  document.getElementById('validate_incident_id').value = incidentId;
  const modal = new bootstrap.Modal(document.getElementById('validateModal'));
  modal.show();
}

function rejectReport(incidentId) {
  document.getElementById('reject_incident_id').value = incidentId;
  document.getElementById('rejection_reason').value = '';
  const modal = new bootstrap.Modal(document.getElementById('rejectModal'));
  modal.show();
}
</script>
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.6/Sortable.min.js"></script>
