<?php
// Base URL pour sous-dossier
$base = rtrim(dirname($_SERVER['SCRIPT_NAME'] ?? ''), '/');
if ($base === '/') { $base = ''; }
?>

<div class="d-flex align-items-center justify-content-between mb-3">
  <h2 class="mb-0">Planning</h2>
  <div>
    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#eventModal">Ajouter</button>
  </div>
  
</div>

<div id="calendar"></div>

<!-- Modal création/édition -->
<div class="modal fade" id="eventModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Nouvelle tâche</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form id="eventForm">
          <input type="hidden" name="id" id="eventId">
          <div class="mb-3">
            <label class="form-label">Titre</label>
            <input type="text" class="form-control" name="title" id="eventTitle" required>
          </div>
          <div class="row g-2">
            <div class="col-md-6">
              <label class="form-label">Type</label>
              <select class="form-select" name="type" id="eventType">
                <option value="préventive">Préventive</option>
                <option value="corrective">Corrective</option>
              </select>
            </div>
            <div class="col-md-6">
              <label class="form-label">Technicien</label>
              <select class="form-select" name="technician_id" id="eventTech">
                <option value="">-- Non assigné --</option>
                <?php foreach (($techs ?? []) as $t): ?>
                  <option value="<?= (int)$t['id'] ?>"><?= htmlspecialchars($t['name']) ?></option>
                <?php endforeach; ?>
              </select>
            </div>
          </div>
          <div class="row g-2 mt-1">
            <div class="col-md-6">
              <label class="form-label">Début</label>
              <input type="datetime-local" class="form-control" name="start" id="eventStart" required>
            </div>
            <div class="col-md-6">
              <label class="form-label">Fin</label>
              <input type="datetime-local" class="form-control" name="end" id="eventEnd">
            </div>
          </div>
          <div class="row g-2 mt-1">
            <div class="col-md-6">
              <label class="form-label">Incident lié</label>
              <select class="form-select" name="incident_id" id="eventIncident">
                <option value="">-- Aucun --</option>
                <?php foreach (($incidents ?? []) as $i): ?>
                  <option value="<?= (int)$i['id'] ?>"><?= htmlspecialchars($i['ticket_id'].' - '.$i['title']) ?></option>
                <?php endforeach; ?>
              </select>
            </div>
            <div class="col-md-6">
              <label class="form-label">Site</label>
              <select class="form-select" name="location_id" id="eventLocation">
                <option value="">-- Non défini --</option>
                <?php foreach (($locations ?? []) as $l): ?>
                  <option value="<?= (int)$l['id'] ?>"><?= htmlspecialchars($l['name']) ?></option>
                <?php endforeach; ?>
              </select>
            </div>
          </div>
          <div class="mt-2">
            <label class="form-label">Couleur</label>
            <input type="color" class="form-control form-control-color" name="color" id="eventColor" value="#0d6efd">
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Annuler</button>
        <button type="button" class="btn btn-primary" id="saveEventBtn">Enregistrer</button>
      </div>
    </div>
  </div>
  
</div>

<!-- Modal détail évènement -->
<div class="modal fade" id="eventDetailModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="detailTitle">Détail</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
      </div>
      <div class="modal-body">
        <div class="row g-2">
          <div class="col-6 small"><strong>Type:</strong> <span id="detailType">—</span></div>
          <div class="col-6 small"><strong>Statut:</strong> <span id="detailStatus">—</span></div>
          <div class="col-6 small"><strong>Technicien:</strong> <span id="detailTechnician">—</span></div>
          <div class="col-6 small"><strong>Incident:</strong> <span id="detailIncident">—</span></div>
          <div class="col-6 small"><strong>Site:</strong> <span id="detailLocation">—</span></div>
          <div class="col-6 small"><strong>Début:</strong> <span id="detailStart">—</span></div>
          <div class="col-6 small"><strong>Fin:</strong> <span id="detailEnd">—</span></div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Fermer</button>
        <button type="button" class="btn btn-danger" id="detailDeleteBtn">Supprimer</button>
        <button type="button" class="btn btn-primary" id="detailEditBtn">Modifier</button>
        <button type="button" class="btn btn-info" id="detailLinkBtn">Détails</button>
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.js"></script>
<script>
  const BASE = '<?= $base ?>';
  document.addEventListener('DOMContentLoaded', function() {
    const calendarEl = document.getElementById('calendar');
    const calendar = new FullCalendar.Calendar(calendarEl, {
      initialView: 'dayGridMonth',
      locale: 'fr',
      height: 'auto',
      selectable: true,
      editable: true,
      headerToolbar: { left: 'prev,next today', center: 'title', right: 'dayGridMonth,timeGridWeek,timeGridDay' },
      events: BASE + '/planning/events',
      select: function(info) {
        const start = info.startStr.substring(0,16);
        const end = info.endStr ? info.endStr.substring(0,16) : '';
        document.getElementById('eventId').value = '';
        document.getElementById('eventTitle').value = '';
        document.getElementById('eventType').value = 'corrective';
        document.getElementById('eventTech').value = '';
        document.getElementById('eventIncident').value = '';
        document.getElementById('eventLocation').value = '';
        document.getElementById('eventColor').value = '#0d6efd';
        document.getElementById('eventStart').value = start;
        document.getElementById('eventEnd').value = end;
        const modal = bootstrap.Modal.getOrCreateInstance(document.getElementById('eventModal'));
        modal.show();
      },
      eventDrop: function(info) { saveMoveResize(info); },
      eventResize: function(info) { saveMoveResize(info); },
      eventClick: function(info) {
        const ev = info.event;
        showEventDetailModal(ev);
      }
    });
    calendar.render();

    function saveMoveResize(info) {
      const ev = info.event;
      const data = new URLSearchParams();
      data.set('id', ev.id);
      data.set('title', ev.title);
      data.set('type', (ev.extendedProps && ev.extendedProps.type) || 'corrective');
      data.set('start', ev.start.toISOString().slice(0,19).replace('T',' '));
      data.set('end', ev.end ? ev.end.toISOString().slice(0,19).replace('T',' ') : '');
      fetch(BASE + '/planning/save', { method:'POST', headers: {'Content-Type':'application/x-www-form-urlencoded'}, body: data.toString() })
        .then(()=> calendar.refetchEvents());
    }

    function showEventDetailModal(ev) {
      const m = document.getElementById('eventDetailModal');
      m.dataset.id = ev.id;
      document.getElementById('detailTitle').textContent = ev.title;
      document.getElementById('detailType').textContent = ev.extendedProps.type || '—';
      document.getElementById('detailStatus').textContent = ev.extendedProps.status || '—';
      document.getElementById('detailTechnician').textContent = ev.extendedProps.technician || '—';
      document.getElementById('detailIncident').textContent = ev.extendedProps.incident || '—';
      document.getElementById('detailLocation').textContent = ev.extendedProps.location || '—';
      document.getElementById('detailStart').textContent = formatDt(ev.start);
      document.getElementById('detailEnd').textContent = ev.end ? formatDt(ev.end) : '—';
      // Boutons
      const linkBtn = document.getElementById('detailLinkBtn');
      linkBtn.onclick = () => { window.location.href = BASE + '/planning/detail?id=' + encodeURIComponent(ev.id); };
      const editBtn = document.getElementById('detailEditBtn');
      editBtn.onclick = () => {
        document.getElementById('eventId').value = ev.id;
        document.getElementById('eventTitle').value = ev.title;
        document.getElementById('eventType').value = ev.extendedProps.type || 'corrective';
        document.getElementById('eventTech').value = '';
        document.getElementById('eventIncident').value = '';
        document.getElementById('eventLocation').value = '';
        document.getElementById('eventColor').value = ev.backgroundColor || '#0d6efd';
        document.getElementById('eventStart').value = ev.start.toISOString().slice(0,16);
        document.getElementById('eventEnd').value = ev.end ? ev.end.toISOString().slice(0,16) : '';
        bootstrap.Modal.getOrCreateInstance(document.getElementById('eventDetailModal')).hide();
        bootstrap.Modal.getOrCreateInstance(document.getElementById('eventModal')).show();
      };
      const delBtn = document.getElementById('detailDeleteBtn');
      delBtn.onclick = () => {
        if (!confirm('Confirmer la suppression ?')) return;
        fetch(BASE + '/planning/delete', { method:'POST', headers: {'Content-Type':'application/x-www-form-urlencoded'}, body: 'id=' + encodeURIComponent(ev.id) })
          .then(()=> { bootstrap.Modal.getOrCreateInstance(document.getElementById('eventDetailModal')).hide(); calendar.refetchEvents(); });
      };
      bootstrap.Modal.getOrCreateInstance(m).show();
    }

    function formatDt(d) {
      return d.toISOString().slice(0,19).replace('T',' ');
    }

    function escapeHtml(str) {
      return (str || '').replace(/[&<>"']/g, function(ch){
        return ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;','\'':'&#39;'})[ch];
      });
    }

    document.getElementById('saveEventBtn').addEventListener('click', function() {
      const form = document.getElementById('eventForm');
      const data = new URLSearchParams(new FormData(form));
      fetch(BASE + '/planning/save', { method:'POST', body: data })
        .then(r => {
          if (!r.ok) { alert('Erreur de sauvegarde'); }
          const modal = bootstrap.Modal.getOrCreateInstance(document.getElementById('eventModal'));
          modal.hide();
          calendar.refetchEvents();
        });
    });
  });
</script>

<style>
  #calendar { background:#fff; border:1px solid #e5e7eb; border-radius:.5rem; padding: .5rem; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
</style>
