<?php 
use App\Core\Auth; 
$ticketDisplay = $incident['ticket_id'] ?? '';
if (empty($ticketDisplay)) { $ticketDisplay = $incident['reference'] ?? ('INC-' . (int)($incident['id'] ?? 0)); }
$title = "Traitement de l'incident " . $ticketDisplay; 
// Base supprimée: on utilise désormais les helpers route_url() et upload_url() pour portabilité
// Lecture seule forcée si view=1, sinon lecture seule quand soumis
$readonly = !empty($_GET['view'] ?? null) ? true : !empty($report['submitted_at'] ?? null);
$isSupervisor = in_array((Auth::user()['role_key'] ?? ''), ['admin','manager','superviseur','supervisor'], true);
$isTechnician = in_array((Auth::user()['role_key'] ?? ''), ['technicien','technician','tech'], true);
$isSubmitted = !empty($report['submitted_at'] ?? null);
$isValidated = !empty($report['validated_at'] ?? null);
$disabledAttr = $readonly ? 'disabled' : '';
$equipSel = [];
if (!empty($report['impacted_equipment'])) {
  $dec = json_decode($report['impacted_equipment'], true);
  if (is_array($dec)) { $equipSel = array_map('strval', $dec); }
}

// Alignement liaison/sites avec la modal de déclaration d'incident
$liaisonDisplay = trim((string)($incident['liaison_name'] ?? ''));
$siteA = trim((string)($incident['site_a_label'] ?? ''));
$siteB = trim((string)($incident['site_b_label'] ?? ''));

// Fallback: parser "[Site A vers Site B]" depuis le nom de liaison (même logique que la modal)
if (($siteA === '' || $siteB === '') && $liaisonDisplay !== '') {
  if (preg_match('/\[(.*?)\]/', $liaisonDisplay, $m)) {
    $inside = $m[1] ?? '';
    $parts = preg_split('/\s+vers\s+/i', $inside);
    if (is_array($parts) && count($parts) >= 2) {
      $siteA = $siteA !== '' ? $siteA : trim((string)$parts[0]);
      $siteB = $siteB !== '' ? $siteB : trim((string)$parts[1]);
    }
  }
}

// Dernier fallback (anciens incidents)
if ($liaisonDisplay === '') {
  $liaisonDisplay = trim((string)(($incident['client_name'] ?? '') . ' — ' . ($incident['location_name'] ?? '')));
}
if ($siteA === '') { $siteA = trim((string)($incident['client_name'] ?? '')); }
if ($siteB === '') { $siteB = trim((string)($incident['location_name'] ?? '')); }
?>
<style>
  .incident-hero {background: linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:16px;color:#fff;padding:1.25rem 1.5rem;margin-bottom:1.25rem;box-shadow:0 10px 40px rgba(102,126,234,.15)}
  .incident-hero .ticket-id {font-size:1.35rem;font-weight:700;margin-bottom:.25rem}
  .incident-hero .sub {opacity:.95}
  @keyframes fadeInUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
  .fade-in-up{animation:fadeInUp .4s ease}
  .section-card{border:none;border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.06)}
  .section-card .card-header{background:linear-gradient(135deg,#f8fafc 0%,#f1f5f9 100%);border:none;border-radius:12px 12px 0 0}
  .form-label{font-weight:600}
  .help-text{font-size:.875rem;color:#64748b}
  .nav-tabs-modern{border:none;gap:.5rem}
  .nav-tabs-modern .nav-link{border:none;border-radius:12px;padding:.625rem 1rem;font-weight:600;color:#64748b;transition:all .2s ease}
  .nav-tabs-modern .nav-link:hover{background:#f1f5f9;color:#475569}
  .nav-tabs-modern .nav-link.active{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;box-shadow:0 4px 12px rgba(102,126,234,.25)}
  .form-floating>textarea.form-control{height:120px;min-height:120px}
</style>

<div class="mb-3">
  <a href="<?= htmlspecialchars(route_url('/incidents/detail',['id'=>$incident['id']])) ?>" class="btn btn-outline-secondary">
    <i class="fas fa-arrow-left me-1"></i> Retour à la fiche incident
  </a>
  <a href="<?= htmlspecialchars(route_url('/incidents')) ?>" class="btn btn-outline-light ms-2" style="border-color:#ddd;">
    <i class="fas fa-list me-1"></i> Liste des incidents
  </a>
  <?php if (!empty($_GET['view'])): ?>
    <span class="badge bg-info ms-2">Lecture seule</span>
  <?php endif; ?>
  <?php if (!empty($report['submitted_at'])): ?>
    <span class="badge bg-secondary ms-2">Soumis</span>
  <?php endif; ?>
  <?php if (!empty($report['validated_at'])): ?>
    <span class="badge bg-success ms-2">Validé</span>
  <?php endif; ?>
  <?php if (!empty($report['rejected_at'])): ?>
    <span class="badge bg-danger ms-2">Refusé</span>
  <?php endif; ?>
</div>

<!-- En-tête moderne -->
<div class="incident-hero fade-in-up">
  <div class="d-flex justify-content-between align-items-start flex-wrap gap-2">
    <div>
      <div class="ticket-id"><i class="fas fa-ticket-alt me-2"></i><?= htmlspecialchars((string)$ticketDisplay) ?></div>
      <div class="sub">Formulaire de traitement terrain</div>
    </div>
    <div>
      <a href="<?= htmlspecialchars(route_url('/incidents/detail',['id'=>$incident['id']])) ?>" class="btn btn-light btn-sm"><i class="fas fa-arrow-left me-1"></i>Retour à la fiche</a>
    </div>
  </div>
</div>
<div class="row g-3">
  <div class="col-12 col-lg-8 fade-in-up" style="animation-delay:.05s">
  <form method="post" action="<?= htmlspecialchars(route_url('/incidents/treatment/save')) ?>" enctype="multipart/form-data" id="treatmentForm">
      <input type="hidden" name="incident_id" value="<?= (int)$incident['id'] ?>">
      <input type="hidden" name="action_type" id="action_type" value="draft">

      <?php if ($readonly): ?>
        <div class="alert alert-info"><i class="fas fa-check me-1"></i>
          <?php if (!empty($report['submitted_at'])): ?>
            Rapport soumis le <?= htmlspecialchars(date('d/m/Y H:i', strtotime($report['submitted_at']))) ?> — consultation en lecture seule.
          <?php else: ?>
            Consultation en lecture seule.
          <?php endif; ?>
        </div>
        <?php if ($isValidated && !empty($report['validated_at'])): ?>
          <div class="alert alert-success mt-2"><i class="fas fa-circle-check me-1"></i> Rapport validé le <?= htmlspecialchars(date('d/m/Y H:i', strtotime($report['validated_at']))) ?>.</div>
        <?php endif; ?>
      <?php elseif (!empty($report)): ?>
        <div class="alert alert-secondary"><i class="fas fa-file-pen me-1"></i> Brouillon chargé — vous pouvez continuer la saisie et enregistrer/soumettre.</div>
      <?php endif; ?>

      <!-- Onglets de sections -->
      <ul class="nav nav-tabs nav-tabs-modern mb-3" id="treatmentTabs" role="tablist">
        <li class="nav-item" role="presentation">
          <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab-general" type="button" role="tab"><i class="fas fa-circle-info me-1"></i>Général</button>
        </li>
        <li class="nav-item" role="presentation">
          <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-diagnostic" type="button" role="tab"><i class="fas fa-stethoscope me-1"></i>Diagnostic</button>
        </li>
        <li class="nav-item" role="presentation">
          <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-intervention" type="button" role="tab"><i class="fas fa-person-digging me-1"></i>Intervention</button>
        </li>
        <li class="nav-item" role="presentation">
          <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-suivi" type="button" role="tab"><i class="fas fa-clipboard-check me-1"></i>Suivi & Validation</button>
        </li>
      </ul>
      <div class="tab-content" id="treatmentTabsContent">
        <div class="tab-pane fade show active" id="tab-general" role="tabpanel">
          <div class="card mb-3 section-card">
            <div class="card-header bg-light"><strong>Section 1 — Informations Générales</strong></div>
            <div class="card-body">
              <div class="row g-3">
                <div class="col-12 col-md-6">
                  <div class="form-floating">
                    <input id="ticket_id_display" class="form-control" placeholder=" " value="<?= htmlspecialchars((string)$ticketDisplay) ?>" readonly>
                    <label for="ticket_id_display">N° Ticket / Incident</label>
                  </div>
                  <div class="form-text">Généré automatiquement.</div>
                </div>
                <div class="col-12 col-md-6">
                  <div class="form-floating">
                    <input id="team_name" class="form-control" name="team_name" placeholder="Nom de l'équipe / prestataire" value="<?= htmlspecialchars($report['team_name'] ?? (Auth::user()['name'] ?? '')) ?>" <?= $disabledAttr ?>>
                    <label for="team_name">Technicien / Équipe</label>
                  </div>
                </div>
                <div class="col-12 col-md-6">
                  <div class="form-floating">
                    <select id="type_of_incident" class="form-select" name="type_of_incident" <?= $disabledAttr ?>>
                      <option value="">—</option>
                      <?php $types=['Travaux tiers','Vandalisme','Détérioration','Phénomène naturel','Autre']; foreach ($types as $t): $sel=(($report['type_of_incident']??'')===$t)?'selected':''; ?>
                        <option <?= $sel ?>><?= htmlspecialchars($t) ?></option>
                      <?php endforeach; ?>
                    </select>
                    <label for="type_of_incident">Type d’incident</label>
                  </div>
                </div>
                <div class="col-12 col-md-6">
                  <label class="form-label">Date & Heure de prise en charge</label>
                  <div class="input-group">
                    <span class="input-group-text"><i class="far fa-clock"></i></span>
                    <input type="datetime-local" class="form-control" name="takeover_at" id="takeover_at" value="<?= !empty($report['takeover_at']) ? htmlspecialchars(date('Y-m-d\\TH:i', strtotime($report['takeover_at']))) : '' ?>" <?= $disabledAttr ?>>
                  </div>
                </div>
                <div class="col-12">
                  <label class="form-label">Liaison impactée</label>
                  <input class="form-control" value="<?= htmlspecialchars($liaisonDisplay) ?>" readonly>
                  <div class="form-text">Identique à la liaison choisie lors de la déclaration.</div>
                </div>
                <div class="col-12 col-md-6">
                  <label class="form-label">Site A</label>
                  <input class="form-control" value="<?= htmlspecialchars($siteA) ?>" readonly>
                </div>
                <div class="col-12 col-md-6">
                  <label class="form-label">Site B</label>
                  <input class="form-control" value="<?= htmlspecialchars($siteB) ?>" readonly>
                </div>
                <div class="col-12 col-md-6">
                  <label class="form-label">Chef d’Équipe (manager/superviseur)</label>
                  <select class="form-select" id="team_lead_select" <?= $disabledAttr ?>>
                    <option value="">— Sélectionner —</option>
                    <?php foreach (($teamLeads ?? []) as $tl): ?>
                      <option value="<?= (int)$tl['id'] ?>" data-name="<?= htmlspecialchars($tl['name']) ?>" data-email="<?= htmlspecialchars($tl['email']) ?>" data-phone="<?= htmlspecialchars($tl['phone'] ?? '') ?>">
                        <?= htmlspecialchars($tl['name']) ?> (<?= htmlspecialchars($tl['role_key']) ?>)
                      </option>
                    <?php endforeach; ?>
                  </select>
                </div>
                <div class="col-12 col-md-6">
                  <label class="form-label">Coordonnées du Chef d’Équipe</label>
                  <input class="form-control" name="team_contact" id="team_contact" placeholder="Nom, téléphone, e-mail" value="<?= htmlspecialchars($report['team_contact'] ?? '') ?>" <?= $disabledAttr ?>>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="tab-pane fade" id="tab-diagnostic" role="tabpanel">
          <div class="card mb-3 section-card">
            <div class="card-header bg-light"><strong>Section 2 — Diagnostic sur le Terrain</strong></div>
            <div class="card-body">
              <div class="row g-3">
                <div class="col-12 col-md-6">
                  <div class="form-floating">
                    <select id="detection_mode" class="form-select" name="detection_mode" <?= $disabledAttr ?>>
                      <option value="">—</option>
                      <?php $modes=['OTDR','Inspection physique','Appel','Autre']; foreach ($modes as $m): $sel=(($report['detection_mode']??'')===$m)?'selected':''; ?>
                        <option <?= $sel ?>><?= htmlspecialchars($m) ?></option>
                      <?php endforeach; ?>
                    </select>
                    <label for="detection_mode">Mode de détection</label>
                  </div>
                </div>
                <div class="col-12 col-md-6">
                  <div class="form-floating">
                    <input id="cut_distance_km" type="number" step="0.01" class="form-control" name="cut_distance_km" placeholder="0.00" value="<?= htmlspecialchars($report['cut_distance_km'] ?? '') ?>" <?= $disabledAttr ?>>
                    <label for="cut_distance_km">Distance de la coupure (km depuis site A)</label>
                  </div>
                </div>
                <div class="col-12 col-md-6">
                  <label class="form-label">Localisation GPS — Latitude</label>
                  <div class="input-group">
                    <input type="number" step="0.000001" class="form-control" name="gps_lat" id="gps_lat" value="<?= htmlspecialchars($report['gps_lat'] ?? '') ?>" <?= $disabledAttr ?>>
                    <button type="button" class="btn btn-outline-secondary" id="btnGeo" <?= $disabledAttr ?>><i class="fas fa-location-crosshairs"></i></button>
                  </div>
                  <div class="form-text">Bouton pour tenter une géolocalisation rapide.</div>
                </div>
                <div class="col-12 col-md-6">
                  <label class="form-label">Localisation GPS — Longitude</label>
                  <input type="number" step="0.000001" class="form-control" name="gps_lng" id="gps_lng" value="<?= htmlspecialchars($report['gps_lng'] ?? '') ?>" <?= $disabledAttr ?>>
                </div>
                <div class="col-12">
                  <div class="form-floating">
                    <textarea id="fault_nature" class="form-control" name="fault_nature" placeholder="Rupture complète, perte partielle, écrasement..." <?= $disabledAttr ?>><?= htmlspecialchars($report['fault_nature'] ?? '') ?></textarea>
                    <label for="fault_nature">Nature de la panne</label>
                  </div>
                </div>
                <div class="col-12">
                  <label class="form-label">Équipements impactés</label>
                  <select class="form-select" name="impacted_equipment[]" multiple <?= $disabledAttr ?>>
                    <?php $equipList=['ODF','Câble 96FO','Boîtier de jonction','Tiroir optique','Coupe-circuit']; foreach ($equipList as $e): $sel=in_array($e,$equipSel,true)?'selected':''; ?>
                      <option <?= $sel ?>><?= htmlspecialchars($e) ?></option>
                    <?php endforeach; ?>
                  </select>
                </div>
                <div class="col-12">
                  <label class="form-label">Photos du site / coupure (.jpg, .png, .pdf)</label>
                  <input type="file" class="form-control" name="photos[]" accept=".jpg,.jpeg,.png,.pdf" multiple <?= $disabledAttr ?>>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="tab-pane fade" id="tab-intervention" role="tabpanel">
          <div class="card mb-3 section-card">
            <div class="card-header bg-light"><strong>Section 3 — Intervention & Actions Correctives</strong></div>
            <div class="card-body">
              <div class="row g-3">
                <div class="col-12 col-md-6">
                  <label class="form-label">Date & Heure de début d’intervention</label>
                  <div class="input-group">
                    <span class="input-group-text"><i class="far fa-calendar"></i></span>
                    <input type="datetime-local" class="form-control" name="intervention_start" id="intervention_start" value="<?= !empty($report['intervention_start']) ? htmlspecialchars(date('Y-m-d\\TH:i', strtotime($report['intervention_start']))) : '' ?>" <?= $disabledAttr ?>>
                  </div>
                </div>
                <div class="col-12 col-md-6">
                  <label class="form-label">Date & Heure de fin d’intervention</label>
                  <div class="input-group">
                    <span class="input-group-text"><i class="far fa-calendar"></i></span>
                    <input type="datetime-local" class="form-control" name="intervention_end" id="intervention_end" value="<?= !empty($report['intervention_end']) ? htmlspecialchars(date('Y-m-d\\TH:i', strtotime($report['intervention_end']))) : '' ?>" <?= $disabledAttr ?>>
                  </div>
                </div>
                <div class="col-12 col-md-6">
                  <label class="form-label">Durée totale d’intervention (h)</label>
                  <input class="form-control" id="duration_hours_display" value="<?= htmlspecialchars($report['duration_hours'] ?? '') ?>" readonly>
                </div>
                <div class="col-12 col-md-6">
                  <div class="form-floating">
                    <select id="repair_type" class="form-select" name="repair_type" <?= $disabledAttr ?>>
                      <option value="">—</option>
                      <?php $repairs=['Soudure','Remplacement câble','Réalignement','Nettoyage','Autre']; foreach ($repairs as $r): $sel=(($report['repair_type']??'')===$r)?'selected':''; ?>
                        <option <?= $sel ?>><?= htmlspecialchars($r) ?></option>
                      <?php endforeach; ?>
                    </select>
                    <label for="repair_type">Type de réparation effectuée</label>
                  </div>
                </div>
                <div class="col-12">
                  <label class="form-label">Matériels utilisés</label>
                  <div class="table-responsive">
                    <table class="table table-sm align-middle" id="materialsTable">
                      <thead>
                        <tr>
                          <th>Désignation</th>
                          <th style="width:110px">Quantité</th>
                          <th>Référence</th>
                          <?php if (!$isTechnician): ?><th style="width:140px">Coût unitaire</th><?php endif; ?>
                          <th style="width:40px"></th>
                        </tr>
                      </thead>
                      <tbody>
                      <?php if (!empty($materials)): foreach ($materials as $m): ?>
                        <tr>
                          <td><input name="materials_designation[]" class="form-control form-control-sm" value="<?= htmlspecialchars($m['designation']) ?>" <?= $disabledAttr ?>></td>
                          <td><input name="materials_qty[]" type="number" step="0.01" class="form-control form-control-sm" value="<?= htmlspecialchars($m['qty']) ?>" <?= $disabledAttr ?>></td>
                          <td><input name="materials_reference[]" class="form-control form-control-sm" value="<?= htmlspecialchars($m['reference']) ?>" <?= $disabledAttr ?>></td>
                          <?php if (!$isTechnician): ?>
                            <td><input name="materials_unit_cost[]" type="number" step="0.01" class="form-control form-control-sm" value="<?= htmlspecialchars($m['unit_cost']) ?>" <?= $disabledAttr ?>></td>
                          <?php else: ?>
                            <td style="display:none;"><input type="hidden" name="materials_unit_cost[]" value="0"></td>
                          <?php endif; ?>
                          <td><?php if (!$readonly): ?><button type="button" class="btn btn-sm btn-outline-danger" onclick="this.closest('tr').remove()"><i class="fas fa-trash"></i></button><?php endif; ?></td>
                        </tr>
                      <?php endforeach; endif; ?>
                      </tbody>
                    </table>
                  </div>
                  <?php if (!$readonly): ?><button type="button" class="btn btn-outline-primary btn-sm" id="btnAddMaterial"><i class="fas fa-plus"></i> Ajouter</button><?php endif; ?>
                </div>
                <div class="col-12 col-md-6">
                  <label class="form-label">Test de réflectométrie (OTDR) — Fichier</label>
                  <input type="file" class="form-control" name="otdr_before" accept=".sor,.jpg,.jpeg,.png,.pdf" <?= $disabledAttr ?>>
                  <?php if (!empty($report['otdr_before_path'])): ?>
                    <div class="mt-1"><a href="#" class="js-open-file" data-file-url="<?= htmlspecialchars(upload_url('incidents/'.$incident['id'].'/'.basename($report['otdr_before_path']))) ?>">Fichier existant</a></div>
                  <?php endif; ?>
                </div>
                <div class="col-12 col-md-6">
                  <label class="form-label">Résultat OTDR après réparation</label>
                  <select class="form-select" name="otdr_result" id="otdr_result" <?= $disabledAttr ?>>
                    <option value="">—</option>
                    <?php $rs=['Conforme','Non conforme']; foreach ($rs as $r): $sel=(($report['otdr_result']??'')===$r)?'selected':''; ?>
                      <option <?= $sel ?>><?= htmlspecialchars($r) ?></option>
                    <?php endforeach; ?>
                  </select>
                  <div class="mt-2">
                    <label class="form-label">OTDR après réparation — Fichier</label>
                    <input type="file" class="form-control" name="otdr_after" accept=".sor,.jpg,.jpeg,.png,.pdf" <?= $disabledAttr ?>>
                    <?php if (!empty($report['otdr_after_path'])): ?>
                      <div class="mt-1"><a href="#" class="js-open-file" data-file-url="<?= htmlspecialchars(upload_url('incidents/'.$incident['id'].'/'.basename($report['otdr_after_path']))) ?>">Fichier existant</a></div>
                    <?php endif; ?>
                  </div>
                </div>
                <div class="col-12">
                  <div class="form-floating">
                    <textarea id="work_comments" class="form-control" name="work_comments" placeholder="Vos commentaires" <?= $disabledAttr ?>><?= htmlspecialchars($report['work_comments'] ?? '') ?></textarea>
                    <label for="work_comments">Commentaires sur les travaux</label>
                  </div>
                  
                  <?php if (!empty($historicalComments)): ?>
                  <div class="mt-3">
                    <h6 class="text-muted mb-2"><i class="fas fa-comments"></i> Historique des commentaires (<?= count($historicalComments) ?>)</h6>
                    <div class="list-group">
                      <?php foreach ($historicalComments as $comment): ?>
                      <div class="list-group-item">
                        <div class="d-flex w-100 justify-content-between">
                          <h6 class="mb-1"><?= htmlspecialchars($comment['author_name'] ?? 'Système') ?></h6>
                          <small class="text-muted"><?= date('d/m/Y H:i', strtotime($comment['created_at'])) ?></small>
                        </div>
                        <?php if (!empty($comment['description'])): ?>
                        <p class="mb-1"><?= nl2br(htmlspecialchars($comment['description'])) ?></p>
                        <?php endif; ?>
                        <?php if (!empty($comment['internal_notes'])): ?>
                        <p class="mb-0 small text-muted"><em>Notes internes: <?= nl2br(htmlspecialchars($comment['internal_notes'])) ?></em></p>
                        <?php endif; ?>
                      </div>
                      <?php endforeach; ?>
                    </div>
                  </div>
                  <?php endif; ?>
                </div>
                <div class="col-12">
                  <hr class="my-2">
                  <label class="form-label">Photos d'intervention (avec observation et géolocalisation)</label>
                  
                  <?php if (!empty($interventionPhotos)): ?>
                  <div class="mb-3">
                    <h6 class="text-muted mb-2"><i class="fas fa-images"></i> Photos existantes (<?= count($interventionPhotos) ?>)</h6>
                    <div class="row g-2">
                      <?php foreach ($interventionPhotos as $idx => $photo): ?>
                      <div class="col-md-4 col-lg-3">
                        <div class="card h-100">
                          <img src="<?= htmlspecialchars(route_url('/storage/uploads/' . $photo['path'])) ?>" 
                               class="card-img-top" 
                               style="height: 200px; object-fit: cover; cursor: pointer;"
                               onclick="showPhotoModal(<?= htmlspecialchars(json_encode([
                                 'src' => route_url('/storage/uploads/' . $photo['path']),
                                 'observation' => $photo['observation'] ?? '',
                                 'lat' => $photo['lat'] ?? null,
                                 'lng' => $photo['lng'] ?? null,
                                 'date' => date('d/m/Y H:i', strtotime($photo['taken_at'] ?? $photo['uploaded_at']))
                               ])) ?>)"
                               alt="Photo d'intervention">
                          <div class="card-body p-2">
                            <?php if (!empty($photo['observation'])): ?>
                            <p class="card-text small mb-1">
                              <strong>Observation:</strong><br>
                              <?= nl2br(htmlspecialchars($photo['observation'])) ?>
                            </p>
                            <?php endif; ?>
                            <?php if (!empty($photo['lat']) && !empty($photo['lng'])): ?>
                            <p class="card-text small text-muted mb-1">
                              <i class="fas fa-map-marker-alt"></i>
                              <?= number_format($photo['lat'], 6) ?>, <?= number_format($photo['lng'], 6) ?>
                            </p>
                            <?php endif; ?>
                            <p class="card-text small text-muted mb-0">
                              <i class="far fa-clock"></i>
                              <?= date('d/m/Y H:i', strtotime($photo['taken_at'] ?? $photo['uploaded_at'])) ?>
                            </p>
                          </div>
                        </div>
                      </div>
                      <?php endforeach; ?>
                    </div>
                  </div>
                  <?php endif; ?>
                  
                  <div id="interventionPhotosList" class="d-flex flex-column gap-2">
                    <?php if (!$readonly): ?>
                    <div class="card border-0 shadow-sm p-2" data-interv-item>
                      <div class="row g-2 align-items-start">
                        <div class="col-12 col-md-5">
                          <input type="file" class="form-control" name="interv_photo[]" accept=".jpg,.jpeg,.png" <?= $disabledAttr ?> data-file>
                        </div>
                        <div class="col-12 col-md-7">
                          <div class="form-floating">
                            <textarea class="form-control" placeholder="Observation" name="interv_obs[]" style="height: 80px"></textarea>
                            <label>Observation</label>
                          </div>
                          <div class="d-flex gap-2 align-items-center mt-2">
                            <input type="hidden" name="interv_lat[]" value="" data-lat>
                            <input type="hidden" name="interv_lng[]" value="" data-lng>
                            <input type="hidden" name="interv_taken_at[]" value="" data-taken-at>
                            <span class="badge bg-secondary" data-geo-badge>GPS: n/a</span>
                            <button type="button" class="btn btn-sm btn-outline-secondary" data-geo-btn><i class="fas fa-location-crosshairs"></i> Géolocaliser</button>
                            <span class="text-muted small ms-auto">Technicien: <?= htmlspecialchars(Auth::user()['name'] ?? '') ?></span>
                            <button type="button" class="btn btn-sm btn-outline-danger" title="Supprimer" data-remove-interv><i class="fas fa-trash"></i></button>
                          </div>
                        </div>
                      </div>
                    </div>
                    <?php endif; ?>
                  </div>
                  <?php if (!$readonly): ?>
                    <div class="mt-2 d-flex gap-2">
                      <button type="button" class="btn btn-sm btn-outline-primary" id="btnAddInterventionPhoto"><i class="fas fa-plus"></i> Ajouter une photo</button>
                      <a class="btn btn-sm btn-outline-success" href="<?= htmlspecialchars(route_url('/incidents/treatment/photos-map',['id'=>$incident['id']])) ?>" target="_blank"><i class="fas fa-map-location-dot"></i> Voir positions sur la carte</a>
                    </div>
                  <?php else: ?>
                    <a class="btn btn-sm btn-outline-success" href="<?= htmlspecialchars(route_url('/incidents/treatment/photos-map',['id'=>$incident['id']])) ?>" target="_blank"><i class="fas fa-map-location-dot"></i> Voir positions sur la carte</a>
                  <?php endif; ?>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="tab-pane fade" id="tab-suivi" role="tabpanel">
          <div class="card mb-3 section-card">
            <div class="card-header bg-light"><strong>Section 4 — Suivi et Validation</strong></div>
            <div class="card-body">
              <div class="row g-3">
                <div class="col-12 col-md-6">
                  <div class="form-floating">
                    <input class="form-control" id="conformity_status" placeholder=" " value="<?= htmlspecialchars($report['conformity_status'] ?? '') ?>" readonly>
                    <label for="conformity_status">Statut de conformité (auto)</label>
                  </div>
                </div>
                <div class="col-12 col-md-6">
                  <div class="form-floating">
                    <select id="resolution_status" class="form-select" name="resolution_status" <?= $disabledAttr ?>>
                      <option value="">—</option>
                      <?php $rst=['Provisoire','Définitive']; foreach ($rst as $r): $sel=(($report['resolution_status']??'')===$r)?'selected':''; ?>
                        <option <?= $sel ?>><?= htmlspecialchars($r) ?></option>
                      <?php endforeach; ?>
                    </select>
                    <label for="resolution_status">Statut de la résolution</label>
                  </div>
                </div>
                <div class="col-12 col-md-6">
                  <label class="form-label">Besoin d’intervention complémentaire ?</label>
                  <div class="d-flex gap-3">
                    <div class="form-check">
                      <input class="form-check-input" type="radio" name="need_additional" value="1" id="need_yes" <?= (!empty($report) && (int)($report['need_additional']??0)===1)?'checked':'' ?> <?= $disabledAttr ?>>
                      <label class="form-check-label" for="need_yes">Oui</label>
                    </div>
                    <div class="form-check">
                      <input class="form-check-input" type="radio" name="need_additional" value="0" id="need_no" <?= (empty($report) || (int)($report['need_additional']??0)===0)?'checked':'' ?> <?= $disabledAttr ?>>
                      <label class="form-check-label" for="need_no">Non</label>
                    </div>
                  </div>
                </div>
                <div class="col-12">
                  <label class="form-label">Devis complémentaire (si applicable)</label>
                  <input type="file" class="form-control" name="quote_file" accept=".pdf,.xls,.xlsx" <?= $disabledAttr ?>>
                  <?php if (!empty($report['quote_file_path'])): ?>
                    <div class="mt-1"><a href="#" class="js-open-file" data-file-url="<?= htmlspecialchars(upload_url('incidents/'.$incident['id'].'/'.basename($report['quote_file_path']))) ?>">Devis existant</a></div>
                  <?php endif; ?>
                </div>
                <div class="col-12">
                  <label class="form-label">Commentaires superviseur</label>
                  <textarea class="form-control" rows="2" placeholder="Rédigé par le superviseur" readonly><?= htmlspecialchars($report['supervisor_comments'] ?? '') ?></textarea>
                </div>
                <div class="col-12">
                  <label class="form-label">Signature technicien (électronique)</label>
                  <?php if (!empty($report['signature_path'])): ?>
                    <div class="alert alert-info mb-2">
                      <i class="fas fa-check-circle me-1"></i>
                      <a href="#" class="js-open-file" data-file-url="<?= htmlspecialchars(upload_url('incidents/'.$incident['id'].'/'.basename($report['signature_path']))) ?>">Signature existante</a>
                      <?php if (!$readonly): ?>
                        <button type="button" class="btn btn-sm btn-outline-primary ms-2" onclick="document.getElementById('signatureCanvas').style.display='block'; this.parentElement.style.display='none';">
                          <i class="fas fa-pen me-1"></i>Modifier
                        </button>
                      <?php endif; ?>
                    </div>
                  <?php endif; ?>
                  <?php if (!$readonly): ?>
                    <div id="signatureCanvas" style="<?= !empty($report['signature_path']) ? 'display:none;' : '' ?>">
                      <div class="border rounded p-2 bg-white">
                        <canvas id="signaturePad" width="600" height="200" style="border: 2px dashed #ddd; border-radius: 8px; cursor: crosshair; display: block; max-width: 100%;"></canvas>
                        <div class="mt-2 d-flex gap-2">
                          <button type="button" class="btn btn-sm btn-outline-secondary" id="clearSignature">
                            <i class="fas fa-eraser me-1"></i>Effacer
                          </button>
                          <button type="button" class="btn btn-sm btn-outline-danger" id="undoSignature">
                            <i class="fas fa-undo me-1"></i>Annuler
                          </button>
                          <small class="text-muted align-self-center ms-auto">Dessinez votre signature ci-dessus</small>
                        </div>
                      </div>
                      <input type="hidden" name="signature_data" id="signatureData">
                    </div>
                  <?php else: ?>
                    <?php if (empty($report['signature_path'])): ?>
                      <p class="text-muted small"><i class="fas fa-info-circle me-1"></i>Aucune signature fournie</p>
                    <?php endif; ?>
                  <?php endif; ?>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <?php if (!$readonly): ?>
        <div class="d-flex gap-2 flex-wrap">
          <button type="button" class="btn btn-secondary" onclick="document.getElementById('action_type').value='draft'; this.closest('form').submit();">Sauvegarder en brouillon</button>
          <button type="button" class="btn btn-primary" onclick="document.getElementById('action_type').value='submit'; this.closest('form').submit();">Soumettre au superviseur</button>
          <a href="<?= htmlspecialchars(route_url('/incidents/detail', ['id'=>$incident['id']])) ?>" class="btn btn-outline-secondary">Annuler</a>
          <?php if (!empty($report['gps_lat']) && !empty($report['gps_lng'])): ?>
            <?php 
              $latF = (float)str_replace(',', '.', (string)$report['gps_lat']);
              $lngF = (float)str_replace(',', '.', (string)$report['gps_lng']);
              $lat6 = number_format($latF, 6, '.', '');
              $lng6 = number_format($lngF, 6, '.', '');
              $pair = $lat6.','.$lng6;
              $gmaps = 'https://www.google.com/maps/dir/?api=1&destination='.rawurlencode($pair).'&travelmode=driving';
              $osm = 'https://www.openstreetmap.org/?mlat='.rawurlencode($lat6).'&mlon='.rawurlencode($lng6).'#map=16/'.rawurlencode($lat6).'/'.rawurlencode($lng6);
              $waze = 'https://www.waze.com/ul?ll='.rawurlencode($pair).'&navigate=yes';
              $apple = 'http://maps.apple.com/?daddr='.rawurlencode($pair).'&dirflg=d';
            ?>
            <div class="btn-group" role="group" aria-label="Carte & itinéraires">
              <a href="<?= htmlspecialchars(route_url('/interventions/live', ['incident_id'=>$incident['id']])) ?>" class="btn btn-outline-success" title="Ouvrir la vue cartographique (<?= htmlspecialchars($report['gps_lat']) ?>, <?= htmlspecialchars($report['gps_lng']) ?>)">
                <i class="fas fa-map-location-dot"></i> Carte
              </a>
              <button type="button" class="btn btn-outline-success dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" title="Choisir fournisseur d'itinéraire">
                <i class="fas fa-route"></i> Itinéraire
              </button>
              <ul class="dropdown-menu dropdown-menu-end">
                <li><a class="dropdown-item" href="<?= htmlspecialchars($gmaps) ?>" target="_blank">Google Maps</a></li>
                <li><a class="dropdown-item" href="<?= htmlspecialchars($osm) ?>" target="_blank">OpenStreetMap</a></li>
                <li><a class="dropdown-item" href="<?= htmlspecialchars($waze) ?>" target="_blank">Waze</a></li>
                <li><a class="dropdown-item" href="<?= htmlspecialchars($apple) ?>" target="_blank">Apple Maps</a></li>
                <li><button type="button" class="dropdown-item" onclick="navigator.clipboard?.writeText('<?= htmlspecialchars($pair) ?>')">Copier lat,lng</button></li>
              </ul>
            </div>
          <?php endif; ?>
        </div>
      <?php else: ?>
        <div class="d-flex gap-2 flex-wrap">
          <a href="<?= htmlspecialchars(route_url('/incidents/detail', ['id'=>$incident['id']])) ?>" class="btn btn-outline-secondary">Retour à la fiche</a>
          <a href="<?= htmlspecialchars(route_url('/incidents/treatment/pdf', ['id'=>$incident['id']])) ?>" class="btn btn-outline-primary"><i class="fas fa-file-pdf"></i> Télécharger PDF</a>
          <?php if (!empty($report['gps_lat']) && !empty($report['gps_lng'])): ?>
            <a href="<?= htmlspecialchars(route_url('/interventions/live', ['incident_id'=>$incident['id']])) ?>" class="btn btn-outline-success" title="Ouvrir la vue cartographique (<?= htmlspecialchars($report['gps_lat']) ?>, <?= htmlspecialchars($report['gps_lng']) ?>)">
              <i class="fas fa-map-location-dot"></i> Voir sur la carte
            </a>
          <?php endif; ?>
        </div>
      <?php endif; ?>
    </form>
  </div>

  <div class="col-12 col-lg-4 fade-in-up" style="animation-delay:.1s">
    <div class="card section-card">
      <div class="card-header bg-light"><strong>Rappels & Calculs</strong></div>
      <div class="card-body">
        <div class="mb-2"><strong>Date & Heure d’incident:</strong> <?php $dec=$incident['declared_at']??null; echo $dec?date('d/m/Y H:i', strtotime($dec)):'—'; ?></div>
        <div><strong>MTTR (estimé):</strong> <span id="mttr_display">—</span></div>
  <?php if (!$isTechnician): ?><div class="mt-2"><strong>Coût estimé:</strong> <span id="cost_display">0</span></div><?php endif; ?>
      </div>
    </div>
  </div>
</div>

<?php if ($isSupervisor && $isSubmitted && !$isValidated): ?>
  <div class="row mt-3">
    <div class="col-12 col-lg-8">
      <div class="card border-success shadow-sm">
        <div class="card-header bg-light"><strong>Validation du rapport</strong></div>
        <div class="card-body">
          <form method="post" action="<?= htmlspecialchars(route_url('/incidents/treatment/validate')) ?>">
            <input type="hidden" name="incident_id" value="<?= (int)$incident['id'] ?>">
            <div class="mb-3">
              <label class="form-label">Commentaires (optionnel)</label>
              <textarea name="supervisor_comments" class="form-control" rows="3" placeholder="Votre commentaire lors de la validation"></textarea>
            </div>
            <button type="submit" class="btn btn-success"><i class="fas fa-check"></i> Valider le traitement</button>
          </form>
          <hr>
          <form method="post" action="<?= htmlspecialchars(route_url('/incidents/treatment/invalidate')) ?>">
            <input type="hidden" name="incident_id" value="<?= (int)$incident['id'] ?>">
            <div class="mb-3">
              <label class="form-label">Motif du refus</label>
              <textarea name="rejection_reason" class="form-control" rows="2" placeholder="Expliquez le refus"></textarea>
            </div>
            <button type="submit" class="btn btn-outline-danger"><i class="fas fa-xmark"></i> Refuser le rapport</button>
          </form>
        </div>
      </div>
    </div>
  </div>
<?php endif; ?>

<!-- Modal de prévisualisation de fichier -->
<div class="modal fade" id="filePreviewModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-xl modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Aperçu du fichier</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" data-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body" style="height:75vh">
        <iframe id="filePreviewFrame" src="" style="width:100%;height:100%;border:0"></iframe>
      </div>
      <div class="modal-footer">
        <a id="fileDownloadLink" href="#" target="_blank" class="btn btn-primary"><i class="fas fa-download"></i> Ouvrir/Télécharger</a>
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" data-dismiss="modal">Fermer</button>
      </div>
    </div>
  </div>
</div>

<script>
  // Remplir coordonnées chef d'équipe selon la sélection
  (function(){
    const sel = document.getElementById('team_lead_select');
    const out = document.getElementById('team_contact');
    sel?.addEventListener('change', () => {
      const opt = sel.selectedOptions[0];
      if (!opt || !out) return;
      const name = opt.dataset.name || '';
      const phone = opt.dataset.phone || '';
      const email = opt.dataset.email || '';
      const parts = [name, phone, email].filter(Boolean);
      out.value = parts.join(', ');
    });
  })();

  // Géolocalisation rapide
  document.getElementById('btnGeo')?.addEventListener('click', () => {
    if (!navigator.geolocation) return alert('Géolocalisation non supportée');
    navigator.geolocation.getCurrentPosition(pos => {
      document.getElementById('gps_lat').value = pos.coords.latitude.toFixed(6);
      document.getElementById('gps_lng').value = pos.coords.longitude.toFixed(6);
    }, err => alert('Géo échouée: ' + (err.message||'Erreur')));
  });

  // Matériels dynamiques
  const tbody = document.querySelector('#materialsTable tbody');
  const addRow = (d='',q='',r='',c='') => {
    const tr = document.createElement('tr');
    tr.innerHTML = `
      <td><input name="materials_designation[]" class="form-control form-control-sm" value="${d}"></td>
      <td><input name="materials_qty[]" type="number" step="0.01" class="form-control form-control-sm" value="${q}"></td>
      <td><input name="materials_reference[]" class="form-control form-control-sm" value="${r}"></td>
      ${<?= $isTechnician ? '"<td style=\\"display:none;\\"><input type=\\"hidden\\" name=\\"materials_unit_cost[]\\" value=\\"0\\"></td>"' : '"<td><input name=\\"materials_unit_cost[]\\" type=\\"number\\" step=\\"0.01\\" class=\\"form-control form-control-sm\\" value=\\"" + c + "\\"></td>"' ?>}
      <td><button type="button" class="btn btn-sm btn-outline-danger" onclick="this.closest('tr').remove()"><i class="fas fa-trash"></i></button></td>
    `;
    tbody.appendChild(tr);
  };
  document.getElementById('btnAddMaterial')?.addEventListener('click', ()=> addRow());
  // N'ajouter une ligne vide que si aucune donnée existante
  if (!tbody || tbody.children.length === 0) { addRow(); }

  // Calculs: durée et coût
  function recalc() {
    const s = document.getElementById('intervention_start').value;
    const e = document.getElementById('intervention_end').value;
    if (s && e) {
      const sd = new Date(s), ed = new Date(e);
      const diff = (ed - sd) / 3600000;
      document.getElementById('duration_hours_display').value = diff > 0 ? diff.toFixed(2) : '';
      const inc = new Date('<?= date('Y-m-d H:i', strtotime($incident['declared_at'])) ?>'.replace(' ', 'T'));
      const mttr = (ed - inc) / 3600000;
      document.getElementById('mttr_display').innerText = mttr > 0 ? mttr.toFixed(2) + ' h' : '—';
    }
    <?php if (!$isTechnician): ?>
    // coût estimé = somme(qty * unit_cost)
    let cost = 0;
    document.querySelectorAll('input[name="materials_qty[]"]').forEach((el, i) => {
      const q = parseFloat(el.value||0), c = parseFloat(document.querySelectorAll('input[name="materials_unit_cost[]"]').item(i).value||0);
      cost += q*c;
    });
    const costEl = document.getElementById('cost_display');
    if (costEl) costEl.innerText = cost.toFixed(2) + ' FCFA';
    <?php endif; ?>
  }
  document.getElementById('intervention_start')?.addEventListener('change', recalc);
  document.getElementById('intervention_end')?.addEventListener('change', recalc);
  document.addEventListener('input', (e) => {
    if (e.target && (e.target.name === 'materials_qty[]' <?php if (!$isTechnician): ?>|| e.target.name === 'materials_unit_cost[]'<?php endif; ?>)) recalc();
  });

  // Préremplir la prise en charge à maintenant si vide
  (function(){
    const takeover = document.getElementById('takeover_at');
    if (takeover && !takeover.value && !<?= $readonly ? 'true' : 'false' ?>) {
      const now = new Date();
      const pad = n => (n<10?'0'+n:n);
      takeover.value = `${now.getFullYear()}-${pad(now.getMonth()+1)}-${pad(now.getDate())}T${pad(now.getHours())}:${pad(now.getMinutes())}`;
    }
  })();

  // Statut de conformité synchronisé avec le résultat OTDR
  (function(){
    const sel = document.getElementById('otdr_result');
    const out = document.getElementById('conformity_status');
    const sync = () => { if (out && sel && !<?= $readonly ? 'true':'false' ?>) out.value = sel ? sel.value : ''; };
    sel?.addEventListener('change', sync);
    // Ne pas écraser la valeur si consultation
    if (!<?= $readonly ? 'true':'false' ?>) { sync(); }
  })();

  // Ouverture modal pour fichiers (délégation uniforme)
  (function(){
    const modalEl = document.getElementById('filePreviewModal');
    const frame = document.getElementById('filePreviewFrame');
    const dl = document.getElementById('fileDownloadLink');
    let modal;
    
    // Initialiser Bootstrap Modal avec gestion d'erreur
    if (modalEl) {
      try {
        if (typeof bootstrap !== 'undefined' && bootstrap.Modal) {
          const inst = new bootstrap.Modal(modalEl);
          modal = {
            show: () => inst.show(),
            hide: () => inst.hide()
          };
        } else if (typeof window.bootstrap !== 'undefined' && window.bootstrap.Modal) {
          const inst = new window.bootstrap.Modal(modalEl);
          modal = {
            show: () => inst.show(),
            hide: () => inst.hide()
          };
        } else if (typeof $ !== 'undefined' && typeof $(modalEl).modal === 'function') {
          // Bootstrap 4 / jQuery
          modal = {
            show: () => $(modalEl).modal('show'),
            hide: () => $(modalEl).modal('hide')
          };
        } else {
          // Fallback minimal sans bootstrap
          modal = {
            show: function() {
              modalEl.classList.add('show');
              modalEl.style.display = 'block';
              document.body.classList.add('modal-open');
            },
            hide: function() {
              modalEl.classList.remove('show');
              modalEl.style.display = 'none';
              document.body.classList.remove('modal-open');
            }
          };
        }
      } catch (e) {
        console.warn('Bootstrap Modal non disponible, utilisation du fallback');
        modal = {
          show: function() {
            modalEl.classList.add('show');
            modalEl.style.display = 'block';
            document.body.classList.add('modal-open');
          },
          hide: function() {
            modalEl.classList.remove('show');
            modalEl.style.display = 'none';
            document.body.classList.remove('modal-open');
          }
        };
      }
    }

    function closeModal() {
      try { modal && modal.hide && modal.hide(); } catch (e) { /* ignore */ }
      // Nettoyer iframe pour stopper l'affichage/téléchargement
      if (frame) frame.src = '';
      if (dl) dl.href = '#';
    }

    // Fermer sur boutons (compat BS4/BS5)
    modalEl?.addEventListener('click', function(e) {
      const btn = e.target.closest && e.target.closest('[data-bs-dismiss="modal"],[data-dismiss="modal"]');
      if (!btn) return;
      e.preventDefault();
      closeModal();
    });

    // Fermer si clic backdrop (sur la zone .modal)
    modalEl?.addEventListener('click', function(e) {
      if (e.target === modalEl) {
        closeModal();
      }
    });

    // Fermer au clavier (ESC) en fallback
    document.addEventListener('keydown', function(e) {
      if (e.key !== 'Escape') return;
      if (!modalEl) return;
      const isOpen = modalEl.classList.contains('show') || modalEl.style.display === 'block';
      if (isOpen) closeModal();
    });
    
    document.addEventListener('click', function(e){
      const a = e.target.closest && e.target.closest('a.js-open-file');
      if (!a) return;
      e.preventDefault();
      const url = a.getAttribute('data-file-url') || a.getAttribute('href');
      if (!url || !frame) return;
      frame.src = url;
      if (dl) dl.href = url;
      modal && modal.show();
    });
  })();

  // Gestion de la signature électronique
  (function() {
    const canvas = document.getElementById('signaturePad');
    if (!canvas) return;
    
    const ctx = canvas.getContext('2d');
    const signatureDataInput = document.getElementById('signatureData');
    let isDrawing = false;
    let lastX = 0;
    let lastY = 0;
    let strokes = []; // Historique des traits pour l'annulation
    let currentStroke = [];

    // Configuration du style de dessin
    ctx.strokeStyle = '#000';
    ctx.lineWidth = 2;
    ctx.lineCap = 'round';
    ctx.lineJoin = 'round';

    // Fonction pour obtenir les coordonnées relatives au canvas
    function getCoordinates(e) {
      const rect = canvas.getBoundingClientRect();
      const scaleX = canvas.width / rect.width;
      const scaleY = canvas.height / rect.height;
      
      if (e.touches && e.touches[0]) {
        return {
          x: (e.touches[0].clientX - rect.left) * scaleX,
          y: (e.touches[0].clientY - rect.top) * scaleY
        };
      }
      return {
        x: (e.clientX - rect.left) * scaleX,
        y: (e.clientY - rect.top) * scaleY
      };
    }

    // Début du dessin
    function startDrawing(e) {
      isDrawing = true;
      const coords = getCoordinates(e);
      lastX = coords.x;
      lastY = coords.y;
      currentStroke = [{x: lastX, y: lastY}];
      e.preventDefault();
    }

    // Dessin en cours
    function draw(e) {
      if (!isDrawing) return;
      
      const coords = getCoordinates(e);
      ctx.beginPath();
      ctx.moveTo(lastX, lastY);
      ctx.lineTo(coords.x, coords.y);
      ctx.stroke();
      
      currentStroke.push({x: coords.x, y: coords.y});
      lastX = coords.x;
      lastY = coords.y;
      e.preventDefault();
    }

    // Fin du dessin
    function stopDrawing(e) {
      if (isDrawing && currentStroke.length > 0) {
        strokes.push([...currentStroke]);
        currentStroke = [];
        saveSignature();
      }
      isDrawing = false;
      e.preventDefault();
    }

    // Sauvegarder la signature en base64
    function saveSignature() {
      if (strokes.length > 0) {
        const dataURL = canvas.toDataURL('image/png');
        signatureDataInput.value = dataURL;
      } else {
        signatureDataInput.value = '';
      }
    }

    // Redessiner tous les traits
    function redrawCanvas() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      strokes.forEach(stroke => {
        if (stroke.length < 2) return;
        ctx.beginPath();
        ctx.moveTo(stroke[0].x, stroke[0].y);
        for (let i = 1; i < stroke.length; i++) {
          ctx.lineTo(stroke[i].x, stroke[i].y);
        }
        ctx.stroke();
      });
      saveSignature();
    }

    // Effacer la signature
    const clearBtn = document.getElementById('clearSignature');
    if (clearBtn) {
      clearBtn.addEventListener('click', function() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        strokes = [];
        currentStroke = [];
        signatureDataInput.value = '';
      });
    }

    // Annuler le dernier trait
    const undoBtn = document.getElementById('undoSignature');
    if (undoBtn) {
      undoBtn.addEventListener('click', function() {
        if (strokes.length > 0) {
          strokes.pop();
          redrawCanvas();
        }
      });
    }

    // Événements souris
    canvas.addEventListener('mousedown', startDrawing);
    canvas.addEventListener('mousemove', draw);
    canvas.addEventListener('mouseup', stopDrawing);
    canvas.addEventListener('mouseleave', stopDrawing);

    // Événements tactiles (mobile)
    canvas.addEventListener('touchstart', startDrawing);
    canvas.addEventListener('touchmove', draw);
    canvas.addEventListener('touchend', stopDrawing);
    canvas.addEventListener('touchcancel', stopDrawing);

    // Validation avant soumission
    const form = canvas.closest('form');
    if (form) {
      form.addEventListener('submit', function(e) {
        const actionType = document.getElementById('action_type');
        if (actionType && actionType.value === 'submit') {
          // Vérifier si une signature existe (canvas ou fichier existant)
          const hasExistingSignature = <?= !empty($report['signature_path']) ? 'true' : 'false' ?>;
          const hasNewSignature = signatureDataInput.value !== '';
          
          if (!hasExistingSignature && !hasNewSignature) {
            alert('Veuillez signer avant de soumettre le rapport');
            e.preventDefault();
            return false;
          }
        }
      });
    }
  })();
</script>

<script>
  // Synchronisation onglet actif <-> hash URL
  document.addEventListener('DOMContentLoaded', function(){
    // Gestion dynamique des photos d'intervention (géoloc + multiples)
    (function(){
      const list = document.getElementById('interventionPhotosList');
      const addBtn = document.getElementById('btnAddInterventionPhoto');
      if (list) {
        const first = list.querySelector('[data-interv-item]');
        function attachHandlers(card){
          const geoBtn = card.querySelector('[data-geo-btn]');
          const badge = card.querySelector('[data-geo-badge]');
          const latInput = card.querySelector('[data-lat]');
          const lngInput = card.querySelector('[data-lng]');
          const takenAt = card.querySelector('[data-taken-at]');
          const fileInput = card.querySelector('[data-file]');
          const removeBtn = card.querySelector('[data-remove-interv]');
          function setNowIfEmpty(){ if (takenAt && !takenAt.value) { const d=new Date(); takenAt.value = d.toISOString().slice(0,16); } }
          function geoCapture(){
            if (!navigator.geolocation) { if (badge) badge.textContent = 'GPS: non disponible'; return; }
            navigator.geolocation.getCurrentPosition(function(pos){
              const lat = pos.coords.latitude.toFixed(6);
              const lng = pos.coords.longitude.toFixed(6);
              if (latInput) latInput.value = lat;
              if (lngInput) lngInput.value = lng;
              if (badge) badge.textContent = 'GPS: ' + lat + ', ' + lng;
              setNowIfEmpty();
            }, function(){ if (badge) badge.textContent = 'GPS: échec'; });
          }
          if (geoBtn) geoBtn.addEventListener('click', geoCapture);
          if (fileInput) fileInput.addEventListener('change', function(){ if (this.files && this.files.length>0) { geoCapture(); setNowIfEmpty(); } });
          if (removeBtn) removeBtn.addEventListener('click', function(){
            const obsInput = card.querySelector('textarea[name="interv_obs[]"]');
            const hasFile = !!(fileInput && fileInput.files && fileInput.files.length>0);
            const hasObs = !!(obsInput && obsInput.value.trim() !== '');
            if (!hasFile && !hasObs) {
              card.remove();
            } else if (confirm('Ce bloc contient des données. Supprimer quand même ?')) {
              card.remove();
            }
          });
        }
        if (first) attachHandlers(first);
        if (addBtn && first) {
          addBtn.addEventListener('click', function(){
            const tpl = first.cloneNode(true);
            tpl.querySelectorAll('input,textarea').forEach(el=>{ if (el.type==='file') { el.value = ''; } else { el.value=''; } });
            const badge = tpl.querySelector('[data-geo-badge]'); if (badge) badge.textContent = 'GPS: n/a';
            list.appendChild(tpl);
            attachHandlers(tpl);
          });
        }
      }
    })();
    const activateFromHash = () => {
      const hash = window.location.hash;
      if (!hash) return;
      const trigger = document.querySelector('#treatmentTabs [data-bs-target="'+hash+'"]');
      if (trigger && (window.bootstrap?.Tab || (typeof bootstrap !== 'undefined' && bootstrap.Tab))) {
        const Tab = window.bootstrap?.Tab || bootstrap.Tab;
        Tab.getOrCreateInstance(trigger).show();
      }
    };
    document.querySelectorAll('#treatmentTabs [data-bs-toggle="tab"]').forEach(el => {
      el.addEventListener('shown.bs.tab', (e) => {
        const target = e.target.getAttribute('data-bs-target');
        if (target) history.replaceState(null, '', target);
      });
    });
    activateFromHash();
  });
</script>

<!-- Modal pour affichage photo d'intervention en grand -->
<div class="modal fade" id="photoModal" tabindex="-1" aria-labelledby="photoModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="photoModalLabel"><i class="fas fa-image me-2"></i>Photo d'intervention</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
      </div>
      <div class="modal-body text-center">
        <img id="photoModalImage" src="" alt="Photo d'intervention" class="img-fluid mb-3" style="max-height: 60vh; width: auto;">
        <div id="photoModalDetails" class="text-start">
          <div class="card">
            <div class="card-body">
              <h6 class="card-subtitle mb-2 text-muted"><i class="fas fa-comment-dots"></i> Observation</h6>
              <p id="photoModalObservation" class="card-text mb-3"></p>
              <div class="row g-2">
                <div class="col-md-6" id="photoModalGpsContainer" style="display: none;">
                  <p class="mb-0"><strong><i class="fas fa-map-marker-alt"></i> Géolocalisation:</strong></p>
                  <p id="photoModalGps" class="text-muted mb-0"></p>
                </div>
                <div class="col-md-6">
                  <p class="mb-0"><strong><i class="far fa-clock"></i> Date:</strong></p>
                  <p id="photoModalDate" class="text-muted mb-0"></p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"><i class="fas fa-times me-1"></i>Fermer</button>
        <a id="photoModalDownload" href="" download class="btn btn-primary" target="_blank"><i class="fas fa-download me-1"></i>Télécharger</a>
      </div>
    </div>
  </div>
</div>

<script>
function showPhotoModal(data) {
  const modal = new bootstrap.Modal(document.getElementById('photoModal'));
  
  // Définir l'image
  document.getElementById('photoModalImage').src = data.src;
  document.getElementById('photoModalDownload').href = data.src;
  
  // Définir l'observation
  const observation = data.observation || 'Aucune observation';
  document.getElementById('photoModalObservation').innerHTML = observation.replace(/\n/g, '<br>');
  
  // Définir les coordonnées GPS si disponibles
  const gpsContainer = document.getElementById('photoModalGpsContainer');
  if (data.lat && data.lng) {
    gpsContainer.style.display = 'block';
    document.getElementById('photoModalGps').textContent = `${parseFloat(data.lat).toFixed(6)}, ${parseFloat(data.lng).toFixed(6)}`;
  } else {
    gpsContainer.style.display = 'none';
  }
  
  // Définir la date
  document.getElementById('photoModalDate').textContent = data.date;
  
  // Afficher la modal
  modal.show();
}
</script>
