<?php 
$title = 'Déclarer un incident'; 
// Forcer base URL locale pour le développement
$base = '';
if (($_SERVER['HTTP_HOST'] ?? '') === 'localhost:8000') {
    $base = '';
} else {
    $base = rtrim(dirname($_SERVER['SCRIPT_NAME'] ?? ''), '/'); 
    if ($base === '/') { $base = ''; }
}
?>
<div class="row justify-content-center<?= (isset($isModal) && $isModal) ? ' m-0' : '' ?>">
  <div class="col-12<?= (isset($isModal) && $isModal) ? '' : ' col-lg-8' ?>">
    <div class="card shadow-sm<?= (isset($isModal) && $isModal) ? ' border-0' : '' ?>">
      <?php if (!isset($isModal) || !$isModal): ?>
      <div class="card-header bg-white">
        <h5 class="mb-0">
          <?= (isset($mode) && $mode==='edit') ? 'Modification de l\'incident' : 'Déclaration d\'incident' ?>
        </h5>
      </div>
      <?php endif; ?>
      <div class="card-body<?= (isset($isModal) && $isModal) ? ' pt-2' : '' ?>">
        <?php if ((isset($isModal) && $isModal) === false && isset($_GET['error'])): ?>
          <div class="alert alert-danger">
            <?php if ($_GET['error'] === 'missing_fields'): ?>
              Veuillez remplir tous les champs obligatoires.
            <?php elseif ($_GET['error'] === 'creation_failed'): ?>
              Erreur lors de la création de l'incident. Veuillez réessayer.
              <?php
                $isLocalHost = in_array(($_SERVER['HTTP_HOST'] ?? ''), ['localhost', '127.0.0.1', 'localhost:8000'], true);
                $detail = isset($_GET['detail']) ? (string)$_GET['detail'] : '';
              ?>
              <?php if ($isLocalHost && $detail !== ''): ?>
                <div class="small text-muted mt-2">Détail: <?= htmlspecialchars($detail) ?></div>
              <?php endif; ?>
            <?php elseif ($_GET['error'] === 'incident_number_exists'): ?>
              Ce "Numéro Incident" existe déjà. Veuillez saisir une référence différente.
            <?php endif; ?>
          </div>
        <?php endif; ?>

  <form method="post" action="<?= htmlspecialchars($base) ?>/incidents/<?= (isset($mode) && $mode==='edit') ? 'update' : 'store' ?>" class="row g-3" <?= (isset($isModal) && $isModal) ? 'data-ajax="1"' : '' ?>>
          <?php if (isset($mode) && $mode==='edit'): ?>
            <input type="hidden" name="id" value="<?= (int)($incident['id'] ?? 0) ?>">
          <?php endif; ?>
          <?php if (isset($isModal) && $isModal): ?>
            <input type="hidden" name="ajax" value="1">
          <?php endif; ?>

          <!-- Section : informations générales -->
          <div class="col-12">
            <div class="d-flex align-items-center mb-2">
              <span class="badge bg-primary-subtle text-primary me-2"><i class="bi bi-clipboard-plus"></i></span>
              <h6 class="mb-0 text-uppercase small text-muted">Informations générales</h6>
            </div>
          </div>
          <div class="col-12 col-md-6">
            <label class="form-label">Client <span class="text-danger">*</span></label>
            <select class="form-select" name="client_id" required>
              <option value="">Sélectionner un client</option>
              <?php foreach ($clients as $client): ?>
                <option value="<?= (int)$client['id'] ?>" <?= (isset($incident['client_id']) && (int)$incident['client_id']==(int)$client['id'])?'selected':'' ?>><?= htmlspecialchars($client['name']) ?></option>
              <?php endforeach; ?>
            </select>
          </div>

          

          <div class="col-12 col-md-8">
            <label class="form-label">Titre de l'incident <span class="text-danger">*</span></label>
            <input type="text" class="form-control" name="title" required maxlength="200" 
                   placeholder="Résumé bref du problème" value="<?= htmlspecialchars($incident['title'] ?? '') ?>">
          </div>

          <div class="col-12 col-md-4">
            <label class="form-label">Numéro Incident (optionnel)</label>
            <input type="text" class="form-control" name="incident_number" maxlength="100" placeholder="Numéro interne client / référence" value="<?= htmlspecialchars($incident['incident_number'] ?? '') ?>">
          </div>

          <!-- Section : localisation & liaison -->
          <div class="col-12 mt-3">
            <div class="d-flex align-items-center mb-2">
              <span class="badge bg-info-subtle text-info me-2"><i class="bi bi-diagram-3"></i></span>
              <h6 class="mb-0 text-uppercase small text-muted">Liaison et sites</h6>
            </div>
          </div>

          <div class="col-12 col-lg-7">
            <label class="form-label">Description détaillée</label>
            <textarea class="form-control" name="description" rows="4" 
                      placeholder="Décrivez le problème en détail : symptômes observés, impact, conditions de reproduction..."><?= htmlspecialchars($incident['description'] ?? '') ?></textarea>
          </div>

          <div class="col-12 col-lg-5">
            <div class="row g-3">
              <div class="col-12">
                <label class="form-label">Liaison</label>
                <div class="position-relative">
                  <input type="text" class="form-control" id="liaison-search" placeholder="Rechercher une liaison..." autocomplete="off">
                  <input type="hidden" name="liaison_id" id="liaison-id-hidden" value="<?= isset($incident['liaison_id']) ? (int)$incident['liaison_id'] : '' ?>">
                  <div id="liaison-dropdown" class="dropdown-menu w-100 shadow-sm" style="max-height: 200px; overflow-y: auto; display: none;"></div>
                </div>
              </div>

              <div class="col-12">
                <div class="row g-2">
                  <div class="col-6">
                    <label class="form-label">Site A</label>
                    <input type="text" class="form-control bg-light" id="incident-site-a-display" placeholder="Site A" readonly>
                    <input type="hidden" name="site_a_label" id="incident-site-a-hidden">
                  </div>
                  <div class="col-6">
                    <label class="form-label">Site B</label>
                    <input type="text" class="form-control bg-light" id="incident-site-b-display" placeholder="Site B" readonly>
                    <input type="hidden" name="site_b_label" id="incident-site-b-hidden">
                  </div>
                  <div class="col-6">
                    <label class="form-label">Coordonnées Site A</label>
                    <input type="text" class="form-control bg-light" id="incident-site-a-coords-display" placeholder="Latitude, Longitude" readonly>
                  </div>
                  <div class="col-6">
                    <label class="form-label">Coordonnées Site B</label>
                    <input type="text" class="form-control bg-light" id="incident-site-b-coords-display" placeholder="Latitude, Longitude" readonly>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="col-12 col-md-6">
            <label class="form-label">Cause probable</label>
            <select class="form-select" name="cause_id">
              <option value="">Cause inconnue</option>
              <?php foreach ($causes as $cause): ?>
                <option value="<?= (int)$cause['id'] ?>" <?= (isset($incident['cause_id']) && (int)$incident['cause_id']==(int)$cause['id'])?'selected':'' ?>><?= htmlspecialchars($cause['name']) ?></option>
              <?php endforeach; ?>
            </select>
            <div class="form-text">
              <small><a href="<?= htmlspecialchars($base) ?>/referentials" target="_blank">Gérer les causes probables <i class="fas fa-external-link-alt"></i></a></small>
            </div>
          </div>

          <div class="col-12 col-md-6">
            <label class="form-label">Priorité <span class="text-danger">*</span></label>
            <?php $currentPriorityId = $incident['priority_id'] ?? null; ?>
            <select class="form-select" name="priority_id" required>
              <option value="">Sélectionner une priorité</option>
              <?php foreach ($priorities as $priority): ?>
                <?php $lvl = $priority['level'] ?? null; ?>
                <option value="<?= (int)$priority['id'] ?>" 
                        <?= ($currentPriorityId && (int)$currentPriorityId==(int)$priority['id']) ? 'selected' : '' ?>
                        style="<?= !empty($priority['color']) ? 'color: ' . htmlspecialchars($priority['color']) : '' ?>">
                  <?= $lvl !== null && $lvl !== '' ? ('Niveau ' . htmlspecialchars((string)$lvl) . ' - ') : '' ?><?= htmlspecialchars($priority['name'] ?? 'Priorité') ?>
                </option>
              <?php endforeach; ?>
            </select>
            <div class="form-text">
              <small><a href="<?= htmlspecialchars($base) ?>/referentials" target="_blank">Gérer les priorités <i class="fas fa-external-link-alt"></i></a></small>
            </div>
          </div>

          <!-- Section : impact technique -->
          <div class="col-12 mt-3">
            <div class="d-flex align-items-center mb-2">
              <span class="badge bg-danger-subtle text-danger me-2"><i class="bi bi-hdd-network"></i></span>
              <h6 class="mb-0 text-uppercase small text-muted">Impact technique</h6>
            </div>
          </div>

          <div class="col-12">
            <label class="form-label">Équipements impactés</label>
            <?php $selectedEquipments = isset($incident['equipment_ids']) ? explode(',', $incident['equipment_ids']) : []; ?>
            <?php if (!empty($equipments)): ?>
            <select class="form-select" name="equipment_ids[]" multiple size="5">
              <?php 
                $currentGroup = null;
                foreach ($equipments as $equipment): 
                  $grp = $equipment['type'] ?? $equipment['category'] ?? '';
                  if ($grp !== $currentGroup) {
                    if ($currentGroup !== null) echo '</optgroup>';
                    echo '<optgroup label="' . htmlspecialchars($grp !== '' ? $grp : 'Autres') . '">';
                    $currentGroup = $grp;
                  }
              ?>
                <option value="<?= (int)$equipment['id'] ?>" <?= in_array((string)$equipment['id'], $selectedEquipments) ? 'selected' : '' ?>>
                  <?= htmlspecialchars($equipment['name']) ?>
                </option>
              <?php endforeach; ?>
              <?php if ($currentGroup !== null) echo '</optgroup>'; ?>
            </select>
            <?php else: ?>
              <div class="alert alert-secondary mb-0">Aucun équipement disponible ou table absente.</div>
            <?php endif; ?>
            <div class="form-text">
              Maintenez Ctrl (Cmd sur Mac) pour sélectionner plusieurs équipements. 
              <a href="<?= htmlspecialchars($base) ?>/referentials" target="_blank">Gérer les équipements <i class="fas fa-external-link-alt"></i></a>
            </div>
          </div>

          <?php if (!(isset($mode) && $mode==='edit')): ?>
            <div class="col-12">
              <div class="alert alert-info">
                <i class="bi bi-info-circle"></i>
                <strong>Informations :</strong>
                <ul class="mb-0 mt-1">
                  <li>Un numéro de ticket sera automatiquement généré</li>
                  <li>Le champ "Numéro Incident" est optionnel et peut contenir une référence interne</li>
                  <li>Les SLA de réponse et résolution seront calculés selon la priorité</li>
                  <li>L'incident sera initialement au statut "Ouvert"</li>
                </ul>
              </div>
            </div>
          <?php endif; ?>

          <div class="col-12 text-end">
            <a href="<?= htmlspecialchars($base) ?>/incidents" class="btn btn-secondary">Annuler</a>
            <button type="submit" class="btn btn-primary"><?= (isset($mode) && $mode==='edit') ? 'Mettre à jour' : 'Déclarer l\'incident' ?></button>
          </div>
        </form>
        <?php if (isset($isModal) && $isModal): ?>
        <script>
          (function(){
            console.log('Modal script starting...');
            
            // Attendre que la modal soit complètement affichée et le DOM prêt
            function initializeSearch() {
              console.log('Initializing search...');
              
              // Utiliser un sélecteur plus robuste pour trouver le formulaire
              const modal = document.querySelector('#incidentModal');
              const form = document.querySelector('#incidentModal form') || document.querySelector('form[data-ajax="1"]') || document.querySelector('.modal-body form');
              
              if (!form) { 
                console.log('No form found in modal');
                // Réessayer dans 200ms
                setTimeout(initializeSearch, 200);
                return; 
              }
              
              console.log('Form found:', form);

              const liaisonSearch = form.querySelector('#liaison-search');
              const liaisonIdHidden = form.querySelector('#liaison-id-hidden');
              const liaisonDropdown = form.querySelector('#liaison-dropdown');
              const siteAInput = form.querySelector('#incident-site-a-display');
              const siteBInput = form.querySelector('#incident-site-b-display');
              const siteAHidden = form.querySelector('#incident-site-a-hidden');
              const siteBHidden = form.querySelector('#incident-site-b-hidden');
              const siteACoordsInput = form.querySelector('#incident-site-a-coords-display');
              const siteBCoordsInput = form.querySelector('#incident-site-b-coords-display');

              let locations;
              try {
                locations = <?= json_encode($locations ?? [], JSON_UNESCAPED_UNICODE) ?>;
              } catch (e) {
                locations = [];
              }

              function normalizeSiteName(name) {
                return String(name || '')
                  .toUpperCase()
                  .trim()
                  .replace(/[\u00A0\s]+/g, ' ')
                  .replace(/[_\-]+/g, ' ')
                  .replace(/\s+/g, ' ')
                  .replace(/[\.,;:!?()\[\]{}"'`]/g, '')
                  .trim();
              }

              function buildLocationsIndex(list) {
                const idx = Object.create(null);
                if (!Array.isArray(list)) return idx;
                for (const loc of list) {
                  if (!loc || !loc.name) continue;
                  const key = normalizeSiteName(loc.name);
                  if (!key) continue;
                  const lat = (loc.latitude ?? loc.lat ?? '').toString().trim();
                  const lng = (loc.longitude ?? loc.lng ?? '').toString().trim();
                  const hasCoords = lat !== '' && lng !== '';
                  if (!idx[key]) {
                    idx[key] = { lat, lng, hasCoords };
                  } else if (!idx[key].hasCoords && hasCoords) {
                    idx[key] = { lat, lng, hasCoords };
                  }
                }
                return idx;
              }

              const locationsIndex = buildLocationsIndex(locations);

              function setCoordsForSite(siteName, targetInput) {
                if (!targetInput) return;
                const key = normalizeSiteName(siteName);
                if (!key) { targetInput.value = ''; return; }
                const found = locationsIndex[key];
                if (found && found.hasCoords) {
                  targetInput.value = `${found.lat}, ${found.lng}`;
                } else {
                  targetInput.value = '—';
                }
              }

              function updateCoordsFromCurrentSites() {
                const a = (siteAHidden && siteAHidden.value) ? siteAHidden.value : (siteAInput ? siteAInput.value : '');
                const b = (siteBHidden && siteBHidden.value) ? siteBHidden.value : (siteBInput ? siteBInput.value : '');
                setCoordsForSite(a, siteACoordsInput);
                setCoordsForSite(b, siteBCoordsInput);
              }
              
              console.log('Elements found:', {
                liaisonSearch: !!liaisonSearch,
                liaisonIdHidden: !!liaisonIdHidden,
                liaisonDropdown: !!liaisonDropdown,
                siteAInput: !!siteAInput,
                siteBInput: !!siteBInput
              });

              if (!liaisonSearch) {
                console.log('liaison-search element not found!');
                return;
              }

              function updateSitesFromLiaison(liaisonText) {
                if (!siteAInput || !siteBInput || !liaisonText) {
                  if (siteAInput) siteAInput.value = '';
                  if (siteBInput) siteBInput.value = '';
                  if (siteAHidden) siteAHidden.value = '';
                  if (siteBHidden) siteBHidden.value = '';
                  if (siteACoordsInput) siteACoordsInput.value = '';
                  if (siteBCoordsInput) siteBCoordsInput.value = '';
                  return;
                }
                console.log('Parsing liaison text:', liaisonText);
                const match = liaisonText.match(/\[(.*?)\]/);
                if (!match) {
                  console.log('No brackets found in text');
                  if (siteAInput) siteAInput.value = '';
                  if (siteBInput) siteBInput.value = '';
                  if (siteAHidden) siteAHidden.value = '';
                  if (siteBHidden) siteBHidden.value = '';
                  if (siteACoordsInput) siteACoordsInput.value = '';
                  if (siteBCoordsInput) siteBCoordsInput.value = '';
                  return;
                }
                const inside = match[1];
                console.log('Content inside brackets:', inside);
                const parts = inside.split(/\s+(?:vers|to)\s+/i);
                console.log('Split parts:', parts);
                if (parts.length >= 2) {
                  const a = parts[0].trim();
                  const b = parts[1].trim();
                  console.log('Setting sites:', { a, b });
                  siteAInput.value = a;
                  siteBInput.value = b;
                  if (siteAHidden) siteAHidden.value = a;
                  if (siteBHidden) siteBHidden.value = b;
                  updateCoordsFromCurrentSites();
                } else {
                  console.log('Not enough parts after split');
                  if (siteAInput) siteAInput.value = '';
                  if (siteBInput) siteBInput.value = '';
                  if (siteAHidden) siteAHidden.value = '';
                  if (siteBHidden) siteBHidden.value = '';
                  if (siteACoordsInput) siteACoordsInput.value = '';
                  if (siteBCoordsInput) siteBCoordsInput.value = '';
                }
              }

              function searchLiaisons(query) {
                console.log('Search function called with query:', query);
                if (query.length < 2) {
                  if (liaisonDropdown) liaisonDropdown.style.display = 'none';
                  return;
                }
                
                // Utiliser les données déjà chargées côté PHP pour éviter les problèmes de routage
                let liaisons;
                try {
                  liaisons = <?= json_encode($liaisons ?? [], JSON_UNESCAPED_UNICODE) ?>;
                  console.log('Available liaisons:', liaisons);
                } catch (e) {
                  console.error('Error parsing liaisons data:', e);
                  liaisons = [];
                }
                
                if (!Array.isArray(liaisons) || liaisons.length === 0) {
                  console.log('No liaisons available');
                  if (liaisonDropdown) {
                    liaisonDropdown.innerHTML = '<div class="px-3 py-2 text-muted">Aucune liaison disponible</div>';
                    liaisonDropdown.style.display = 'block';
                  }
                  return;
                }
                
                const filtered = liaisons.filter(liaison => {
                  if (!liaison || !liaison.name) return false;
                  return liaison.name.toLowerCase().includes(query.toLowerCase()) ||
                         (liaison.description && liaison.description.toLowerCase().includes(query.toLowerCase()));
                });
                console.log('Filtered results:', filtered);
                
                if (!liaisonDropdown) {
                  console.log('Liaison dropdown not found');
                  return;
                }
                
                liaisonDropdown.innerHTML = '';
                if (filtered.length === 0) {
                  liaisonDropdown.innerHTML = '<div class="px-3 py-2 text-muted">Aucune liaison trouvée</div>';
                } else {
                  filtered.forEach(liaison => {
                    const item = document.createElement('a');
                    item.className = 'dropdown-item';
                    item.href = '#';
                    item.textContent = liaison.name || 'Liaison sans nom';
                    item.onclick = (e) => {
                      e.preventDefault();
                      if (liaisonSearch) liaisonSearch.value = liaison.name || '';
                      if (liaisonIdHidden) liaisonIdHidden.value = liaison.id || '';
                      if (liaisonDropdown) liaisonDropdown.style.display = 'none';
                      if (liaison && (liaison.site_a_name || liaison.site_b_name)) {
                        const a = (liaison.site_a_name || '').toString().trim();
                        const b = (liaison.site_b_name || '').toString().trim();
                        if (siteAInput) siteAInput.value = a;
                        if (siteBInput) siteBInput.value = b;
                        if (siteAHidden) siteAHidden.value = a;
                        if (siteBHidden) siteBHidden.value = b;
                        updateCoordsFromCurrentSites();
                      } else {
                        updateSitesFromLiaison(liaison.name || '');
                      }
                    };
                    liaisonDropdown.appendChild(item);
                  });
                }
                liaisonDropdown.style.display = 'block';
              }

              console.log('Adding event listeners to liaison search');
              
              liaisonSearch.addEventListener('input', (e) => {
                console.log('Input event triggered:', e.target.value);
                searchLiaisons(e.target.value);
              });
              
              liaisonSearch.addEventListener('focus', () => {
                console.log('Focus event triggered');
                if (liaisonSearch.value.length >= 2) {
                  searchLiaisons(liaisonSearch.value);
                }
              });
              
              // Event listener pour masquer le dropdown quand on clique ailleurs
              document.addEventListener('click', (e) => {
                if (liaisonDropdown && liaisonSearch && 
                    !liaisonSearch.contains(e.target) && 
                    !liaisonDropdown.contains(e.target)) {
                  liaisonDropdown.style.display = 'none';
                }
              });

              console.log('Liaison search initialized successfully');
              
              // Gestion du formulaire
              form.addEventListener('submit', async (e) => {
                if (!form.dataset.ajax) return; // fallback classique si non ajax
                e.preventDefault();
                const btn = form.querySelector('button[type="submit"]');
                if (btn) btn.disabled = true;
                try {
                  const fd = new FormData(form);
                  const res = await fetch(form.action, { method: 'POST', body: fd, credentials: 'same-origin', redirect: 'follow' });
                  if (res.redirected) { window.location.href = res.url; return; }
                  const ct = res.headers.get('content-type') || '';
                  if (ct.includes('application/json')) {
                    const data = await res.json();
                    if (data && data.status === 'ok' && data.redirect) { window.location.href = data.redirect; return; }
                    const alert = document.createElement('div');
                    alert.className = 'alert alert-danger';
                    alert.textContent = (data && data.message) ? data.message : 'Erreur lors de la création.';
                    form.prepend(alert);
                  } else {
                    window.location.reload();
                  }
                } catch (err) {
                  console.error('Submit error:', err);
                  const alert = document.createElement('div');
                  alert.className = 'alert alert-danger';
                  alert.textContent = 'Erreur réseau ou serveur.';
                  form.prepend(alert);
                } finally {
                  if (btn) btn.disabled = false;
                }
              });
            }

            // Attendre que le DOM et la modal soient prêts
            if (document.readyState === 'loading') {
              document.addEventListener('DOMContentLoaded', () => setTimeout(initializeSearch, 300));
            } else {
              setTimeout(initializeSearch, 300);
            }
          })();
        </script>
        <?php elseif (isset($mode) && $mode==='edit'): ?>
        <script>
          (function(){
            const cardBody = document.currentScript.closest('.card-body');
            if (!cardBody) return;
            const form = cardBody.querySelector('form');
            if (!form) return;

            const liaisonSearch = form.querySelector('#liaison-search');
            const liaisonIdHidden = form.querySelector('#liaison-id-hidden');
            const liaisonDropdown = form.querySelector('#liaison-dropdown');
            const siteAInput = form.querySelector('#incident-site-a-display');
            const siteBInput = form.querySelector('#incident-site-b-display');
            const siteAHidden = form.querySelector('#incident-site-a-hidden');
            const siteBHidden = form.querySelector('#incident-site-b-hidden');
            const siteACoordsInput = form.querySelector('#incident-site-a-coords-display');
            const siteBCoordsInput = form.querySelector('#incident-site-b-coords-display');
            let searchTimeout;
            let selectedLiaisonText = '';

            let locations;
            try {
              locations = <?= json_encode($locations ?? [], JSON_UNESCAPED_UNICODE) ?>;
            } catch (e) {
              locations = [];
            }

            function normalizeSiteName(name) {
              return String(name || '')
                .toUpperCase()
                .trim()
                .replace(/[\u00A0\s]+/g, ' ')
                .replace(/[_\-]+/g, ' ')
                .replace(/\s+/g, ' ')
                .replace(/[\.,;:!?()\[\]{}"'`]/g, '')
                .trim();
            }

            function buildLocationsIndex(list) {
              const idx = Object.create(null);
              if (!Array.isArray(list)) return idx;
              for (const loc of list) {
                if (!loc || !loc.name) continue;
                const key = normalizeSiteName(loc.name);
                if (!key) continue;
                const lat = (loc.latitude ?? loc.lat ?? '').toString().trim();
                const lng = (loc.longitude ?? loc.lng ?? '').toString().trim();
                const hasCoords = lat !== '' && lng !== '';
                if (!idx[key]) {
                  idx[key] = { lat, lng, hasCoords };
                } else if (!idx[key].hasCoords && hasCoords) {
                  idx[key] = { lat, lng, hasCoords };
                }
              }
              return idx;
            }

            const locationsIndex = buildLocationsIndex(locations);

            function setCoordsForSite(siteName, targetInput) {
              if (!targetInput) return;
              const key = normalizeSiteName(siteName);
              if (!key) { targetInput.value = ''; return; }
              const found = locationsIndex[key];
              if (found && found.hasCoords) {
                targetInput.value = `${found.lat}, ${found.lng}`;
              } else {
                targetInput.value = '—';
              }
            }

            function updateCoordsFromCurrentSites() {
              const a = (siteAHidden && siteAHidden.value) ? siteAHidden.value : (siteAInput ? siteAInput.value : '');
              const b = (siteBHidden && siteBHidden.value) ? siteBHidden.value : (siteBInput ? siteBInput.value : '');
              setCoordsForSite(a, siteACoordsInput);
              setCoordsForSite(b, siteBCoordsInput);
            }

            function updateSitesFromLiaison(liaisonText) {
              if (!siteAInput || !siteBInput || !liaisonText) {
                siteAInput.value = '';
                siteBInput.value = '';
                if (siteAHidden) siteAHidden.value = '';
                if (siteBHidden) siteBHidden.value = '';
                if (siteACoordsInput) siteACoordsInput.value = '';
                if (siteBCoordsInput) siteBCoordsInput.value = '';
                return;
              }
              console.log('Parsing liaison text:', liaisonText);
              const match = liaisonText.match(/\[(.*?)\]/);
              if (!match) {
                console.log('No brackets found in text');
                siteAInput.value = '';
                siteBInput.value = '';
                if (siteAHidden) siteAHidden.value = '';
                if (siteBHidden) siteBHidden.value = '';
                if (siteACoordsInput) siteACoordsInput.value = '';
                if (siteBCoordsInput) siteBCoordsInput.value = '';
                return;
              }
              const inside = match[1];
              console.log('Content inside brackets:', inside);
              const parts = inside.split(/\s+(?:vers|to)\s+/i);
              console.log('Split parts:', parts);
              if (parts.length >= 2) {
                const a = parts[0].trim();
                const b = parts[1].trim();
                console.log('Setting sites:', { a, b });
                siteAInput.value = a;
                siteBInput.value = b;
                if (siteAHidden) siteAHidden.value = a;
                if (siteBHidden) siteBHidden.value = b;
                updateCoordsFromCurrentSites();
              } else {
                console.log('Not enough parts after split');
                siteAInput.value = '';
                siteBInput.value = '';
                if (siteAHidden) siteAHidden.value = '';
                if (siteBHidden) siteBHidden.value = '';
                if (siteACoordsInput) siteACoordsInput.value = '';
                if (siteBCoordsInput) siteBCoordsInput.value = '';
              }
            }

            function searchLiaisons(query) {
              if (query.length < 2) {
                liaisonDropdown.style.display = 'none';
                return;
              }
              
              // Utiliser les données déjà chargées côté PHP pour éviter les problèmes de routage
              const liaisons = <?= json_encode($liaisons, JSON_UNESCAPED_UNICODE) ?>;
              const filtered = liaisons.filter(liaison => 
                liaison.name.toLowerCase().includes(query.toLowerCase()) ||
                (liaison.description && liaison.description.toLowerCase().includes(query.toLowerCase()))
              );
              
              liaisonDropdown.innerHTML = '';
              if (filtered.length === 0) {
                liaisonDropdown.innerHTML = '<div class="px-3 py-2 text-muted">Aucune liaison trouvée</div>';
              } else {
                filtered.forEach(liaison => {
                  const item = document.createElement('a');
                  item.className = 'dropdown-item';
                  item.href = '#';
                  item.textContent = liaison.name;
                  item.onclick = (e) => {
                    e.preventDefault();
                    liaisonSearch.value = liaison.name;
                    liaisonIdHidden.value = liaison.id;
                    selectedLiaisonText = liaison.name;
                    liaisonDropdown.style.display = 'none';
                    if (liaison && (liaison.site_a_name || liaison.site_b_name)) {
                      const a = (liaison.site_a_name || '').toString().trim();
                      const b = (liaison.site_b_name || '').toString().trim();
                      if (siteAInput) siteAInput.value = a;
                      if (siteBInput) siteBInput.value = b;
                      if (siteAHidden) siteAHidden.value = a;
                      if (siteBHidden) siteBHidden.value = b;
                      updateCoordsFromCurrentSites();
                    } else {
                      updateSitesFromLiaison(liaison.name);
                    }
                  };
                  liaisonDropdown.appendChild(item);
                });
              }
              liaisonDropdown.style.display = 'block';
            }

            if (liaisonSearch) {
              liaisonSearch.addEventListener('input', (e) => {
                searchLiaisons(e.target.value);
              });
              
              liaisonSearch.addEventListener('focus', () => {
                if (liaisonSearch.value.length >= 2) {
                  searchLiaisons(liaisonSearch.value);
                }
              });
              
              document.addEventListener('click', (e) => {
                if (!liaisonSearch.contains(e.target) && !liaisonDropdown.contains(e.target)) {
                  liaisonDropdown.style.display = 'none';
                }
              });
              
              // Pré-remplir le nom de la liaison si une ID est définie en mode édition
              if (liaisonIdHidden.value) {
                const liaisons = <?= json_encode($liaisons, JSON_UNESCAPED_UNICODE) ?>;
                const selectedLiaison = liaisons.find(l => l.id == liaisonIdHidden.value);
                if (selectedLiaison) {
                  liaisonSearch.value = selectedLiaison.name;
                  selectedLiaisonText = selectedLiaison.name;
                  if (selectedLiaison && (selectedLiaison.site_a_name || selectedLiaison.site_b_name)) {
                    const a = (selectedLiaison.site_a_name || '').toString().trim();
                    const b = (selectedLiaison.site_b_name || '').toString().trim();
                    if (siteAInput) siteAInput.value = a;
                    if (siteBInput) siteBInput.value = b;
                    if (siteAHidden) siteAHidden.value = a;
                    if (siteBHidden) siteBHidden.value = b;
                    updateCoordsFromCurrentSites();
                  } else {
                    updateSitesFromLiaison(selectedLiaison.name);
                  }
                }
              }
            }

            form.addEventListener('submit', async (e) => {
              e.preventDefault();
              const btn = form.querySelector('button[type="submit"]');
              btn.disabled = true;
              try {
                const fd = new FormData(form);
                fd.append('ajax', '1');
                const res = await fetch(form.action, { method: 'POST', body: fd, credentials: 'same-origin' });
                const data = await res.json().catch(()=>null);
                if (!data) throw new Error('Réponse serveur invalide');
                if (data.status === 'ok' && data.redirect) { window.location.href = data.redirect; return; }
                const alert = document.createElement('div');
                alert.className = 'alert alert-danger';
                alert.textContent = data.message || 'Erreur lors de la mise à jour.';
                form.prepend(alert);
              } catch (err) {
                const alert = document.createElement('div');
                alert.className = 'alert alert-danger';
                alert.textContent = 'Erreur réseau ou serveur.';
                form.prepend(alert);
              } finally {
                btn.disabled = false;
              }
            });
          })();
        </script>
        <?php endif; ?>
      </div>
    </div>
  </div>
</div>