@extends('layouts.adminlte')

@section('title', 'Timeline Job (vis-timeline)')
@section('content')
<div class="container-fluid">
  <div class="d-flex align-items-start justify-content-between mb-3">
    <div>
      <h3 class="mb-0">Timeline Job</h3>
      <div class="text-muted small">Kiri: Karyawan / No Job. Kanan: timegrid harian. Mode strict: harus ada IN/OUT, tidak boleh cuti, dan segmen di luar shift plan wajib SPL approved.</div>
    </div>
    <div class="d-flex flex-column align-items-end gap-2">
      @include('projectjobcosting::partials.nav', ['current' => 'timeline'])
      <div class="d-flex flex-wrap gap-2">
        <a href="{{ route('project_job_timegrid.index') }}" class="btn btn-outline-secondary btn-sm">Timegrid Single</a>
      </div>
    </div>
  </div>

  <div class="card mb-3">
    <div class="card-body">
      <div class="row g-2 align-items-end">
        <div class="col-md-3">
          <label class="form-label">Tanggal</label>
          <input type="date" id="date" class="form-control" value="{{ now()->format('Y-m-d') }}">
        </div>
        <div class="col-md-3">
          <label class="form-label">Mode View</label>
          <div class="btn-group w-100" role="group">
            <input type="radio" class="btn-check" name="groupBy" id="groupByEmployee" value="employee" checked>
            <label class="btn btn-outline-primary" for="groupByEmployee">Per Karyawan</label>
            <input type="radio" class="btn-check" name="groupBy" id="groupByJob" value="job">
            <label class="btn btn-outline-primary" for="groupByJob">Per No Job</label>
          </div>
        </div>
        <div class="col-md-4">
          <label class="form-label" id="qLabel">Filter Karyawan (opsional)</label>
          <input type="text" id="q" class="form-control" placeholder="kode / nama (live filter groups)">
        </div>
        <div class="col-md-2">
          <div class="form-check form-switch mb-2">
            <input class="form-check-input" type="checkbox" id="onlySpl">
            <label class="form-check-label" for="onlySpl">Hanya yang ada SPL</label>
          </div>
          <div class="form-check form-switch mb-2">
            <input class="form-check-input" type="checkbox" id="onlyMissing">
            <label class="form-check-label" for="onlyMissing">Hanya yang belum ada segmen</label>
          </div>
          <div class="d-grid">
            <button class="btn btn-primary" id="btnLoad"><i class="fas fa-sync-alt me-1"></i>Muat Timeline</button>
          </div>
        </div>
      </div>
      <div class="small text-muted mt-2" id="timelineHint">Klik item untuk edit. Drag / resize untuk ubah jam (akan divalidasi strict di server). Double click area kosong untuk tambah segmen (pilih job + jam).</div>
      <div class="d-flex flex-wrap gap-2 mt-3">
        <button type="button" class="btn btn-outline-secondary btn-sm" id="btnFitWorkday">Zoom 06:00 - 22:00</button>
        <button type="button" class="btn btn-outline-secondary btn-sm" id="btnFitFullDay">Zoom Full Day</button>
        <button type="button" class="btn btn-outline-success btn-sm" id="btnExportPng">Export PNG</button>
        <button type="button" class="btn btn-outline-danger btn-sm" id="btnPrintPdf">Preview PDF Server</button>
      </div>
    </div>
  </div>

  <div class="row g-3 mb-3">
    <div class="col-md-3">
      <div class="card h-100">
        <div class="card-body">
          <div class="text-muted small">Total Segmen</div>
          <div class="fw-bold fs-3" id="statSegments">0</div>
        </div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="card h-100">
        <div class="card-body">
          <div class="text-muted small">Total Karyawan</div>
          <div class="fw-bold fs-3" id="statEmployees">0</div>
        </div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="card h-100">
        <div class="card-body">
          <div class="text-muted small">Total No Job</div>
          <div class="fw-bold fs-3" id="statJobs">0</div>
        </div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="card h-100">
        <div class="card-body">
          <div class="text-muted small">Blocked (Cuti)</div>
          <div class="fw-bold fs-3" id="statBlocked">0</div>
          <div class="small text-muted mt-1">Missing segment: <span id="statMissing">0</span></div>
        </div>
      </div>
    </div>
  </div>

  <div class="card" id="timelineCapture">
    <div class="card-body">
      <div class="d-flex justify-content-between align-items-center mb-2">
        <div class="small text-muted">Server: <span id="serverNow">-</span></div>
        <div class="small text-muted">Blocked groups (cuti): <span id="blockedInfo">-</span></div>
      </div>
      <div class="timeline-legend mb-3">
        <div class="legend-row">
          <span class="legend-title">Marker:</span>
          <span class="legend-chip"><span class="legend-dot in"></span> Check In</span>
          <span class="legend-chip"><span class="legend-dot out"></span> Check Out</span>
          <span class="legend-chip"><span class="legend-band"></span> SPL Approved</span>
          <span class="legend-chip"><span class="legend-alert"></span> Hadir tanpa segmen</span>
        </div>
        <div class="legend-row" id="jobLegend"></div>
      </div>
      <div id="timeline" class="timeline-box"></div>
    </div>
  </div>
</div>

<div class="modal fade" id="segModal" 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="segModalTitle">Segmen Job</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <form id="segForm">
        <div class="modal-body">
          <input type="hidden" id="segId">
          <input type="hidden" id="segKaryawanId">
          <div class="mb-2">
            <label class="form-label">Karyawan</label>
            <input type="text" class="form-control" id="segKaryawanText" disabled>
          </div>
          <div class="mb-2">
            <label class="form-label">No Job</label>
            <select id="segJobId" class="form-select" required></select>
          </div>
          <div class="row g-2">
            <div class="col">
              <label class="form-label">Mulai</label>
              <input type="time" id="segStart" class="form-control" required>
            </div>
            <div class="col">
              <label class="form-label">Selesai</label>
              <input type="time" id="segEnd" class="form-control" required>
            </div>
          </div>
          <div class="mt-2">
            <label class="form-label">Catatan (opsional)</label>
            <input type="text" id="segNotes" class="form-control">
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-outline-secondary" type="button" data-bs-dismiss="modal">Close</button>
          <button class="btn btn-outline-danger" type="button" id="btnDeleteSeg" style="display:none;">Delete</button>
          <button class="btn btn-primary" type="submit">Save</button>
        </div>
      </form>
    </div>
  </div>
</div>
@endsection

@push('styles')
  <link rel="stylesheet" href="{{ asset('vendor/vis/vis-timeline-graph2d.min.css') }}">
  <link rel="stylesheet" href="{{ asset('vendor/select2/css/select2.min.css') }}" />
  <link rel="stylesheet" href="{{ asset('vendor/select2/css/select2-bootstrap-5-theme.min.css') }}" />
  <style>
    .timeline-box { height: 640px; border: 1px solid #d9deeb; border-radius: 10px; overflow: hidden; }
    .vis-item.job-item { border-width: 1.5px; }
    .vis-item.vis-selected.job-item { border-color: rgba(99,102,241,.9); background: rgba(99,102,241,.26); }
    .vis-label .blocked { color: #b45309; font-style: italic; }
    .select2-container--bootstrap-5 .select2-selection { min-height: 38px; }
    .vis-item.marker-item {
      border: 0;
      width: 0 !important;
      min-width: 0 !important;
      background: transparent !important;
    }
    .vis-item.marker-item .vis-item-content {
      width: 2px;
      height: 100%;
      padding: 0;
      border-radius: 999px;
      transform: translateX(-1px);
    }
    .vis-item.in-marker .vis-item-content { background: #10b981; }
    .vis-item.out-marker .vis-item-content { background: #ef4444; }
    .vis-item.spl-background {
      background: rgba(250, 204, 21, 0.22) !important;
      border-color: rgba(217, 119, 6, 0.35) !important;
    }
    .timeline-legend {
      border: 1px solid #e5e7eb;
      border-radius: 12px;
      padding: 12px;
      background: #f8fafc;
    }
    .legend-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
    }
    .legend-row + .legend-row { margin-top: 10px; }
    .legend-title {
      font-size: 12px;
      font-weight: 700;
      color: #475569;
      margin-right: 4px;
    }
    .legend-chip {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 10px;
      border-radius: 999px;
      background: #fff;
      border: 1px solid #e2e8f0;
      font-size: 12px;
      color: #334155;
    }
    .legend-dot {
      width: 10px;
      height: 10px;
      border-radius: 999px;
      display: inline-block;
    }
    .legend-dot.in { background: #10b981; }
    .legend-dot.out { background: #ef4444; }
    .legend-band {
      width: 18px;
      height: 10px;
      border-radius: 999px;
      background: rgba(250, 204, 21, 0.45);
      border: 1px solid rgba(217, 119, 6, 0.35);
      display: inline-block;
    }
    .legend-alert {
      width: 18px;
      height: 10px;
      border-radius: 999px;
      background: rgba(239, 68, 68, 0.16);
      border: 1px solid rgba(220, 38, 38, 0.55);
      display: inline-block;
    }
    .legend-swatch {
      width: 12px;
      height: 12px;
      border-radius: 4px;
      display: inline-block;
      border: 2px solid transparent;
    }
    .vis-label .missing-segment {
      color: #b91c1c;
      font-weight: 700;
    }
    .group-badge {
      display: inline-block;
      padding: 1px 6px;
      margin-left: 6px;
      border-radius: 999px;
      font-size: 10px;
      line-height: 1.5;
      border: 1px solid #cbd5e1;
      background: #f8fafc;
      color: #334155;
    }
    .group-badge.spl {
      background: #fef3c7;
      border-color: #f59e0b;
      color: #92400e;
    }
    .group-badge.missing {
      background: #fee2e2;
      border-color: #ef4444;
      color: #991b1b;
    }
    @media print {
      body * {
        visibility: hidden !important;
      }
      #timelineCapture,
      #timelineCapture * {
        visibility: visible !important;
      }
      #timelineCapture {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        margin: 0;
      }
      #btnLoad,
      #btnFitWorkday,
      #btnFitFullDay,
      #btnExportPng,
      #btnPrintPdf {
        display: none !important;
      }
    }
  </style>
@endpush

@push('scripts')
  <script src="{{ asset('vendor/vis/vis-data.min.js') }}"></script>
  <script src="{{ asset('vendor/vis/vis-timeline-graph2d.min.js') }}"></script>
  <script src="{{ asset('vendor/select2/js/select2.min.js') }}"></script>
  <script src="{{ asset('vendor/html2canvas/html2canvas.min.js') }}"></script>
  <script>
    (function(){
      const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
      if (csrfToken) $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': csrfToken } });

      const modal = new bootstrap.Modal(document.getElementById('segModal'));
      const timelineEl = document.getElementById('timeline');
      const serverNowEl = document.getElementById('serverNow');
      const blockedInfoEl = document.getElementById('blockedInfo');
      const captureEl = document.getElementById('timelineCapture');

      let timeline = null;
      let groupsDS = new vis.DataSet([]);
      let itemsDS = new vis.DataSet([]);
      let blockedGroups = {};
      let missingSegmentGroups = {};
      let groupBadges = {};
      let currentGroupBy = 'employee';

      function dateStr(){ return String(document.getElementById('date').value || ''); }
      function qStr(){ return String(document.getElementById('q').value || '').trim(); }
      function groupBy(){ return String(document.querySelector('input[name="groupBy"]:checked')?.value || 'employee'); }

      function syncLabels(){
        currentGroupBy = groupBy();
        document.getElementById('qLabel').textContent = currentGroupBy === 'job' ? 'Filter No Job (opsional)' : 'Filter Karyawan (opsional)';
        document.getElementById('q').placeholder = currentGroupBy === 'job' ? 'kode / nama no job' : 'kode / nama karyawan';
        document.getElementById('onlyMissing').disabled = currentGroupBy === 'job';
        if (currentGroupBy === 'job') {
          document.getElementById('onlyMissing').checked = false;
        }
        document.getElementById('timelineHint').textContent = currentGroupBy === 'job'
          ? 'Mode Per No Job fokus untuk audit visual/costing. Klik item untuk edit masih bisa, tetapi tambah segmen kosong tetap disarankan dari mode Per Karyawan.'
          : 'Klik item untuk edit. Drag / resize untuk ubah jam (akan divalidasi strict di server). Double click area kosong untuk tambah segmen (pilih job + jam).';
      }

      function hmFromDate(d){
        const x = new Date(d);
        const hh = String(x.getHours()).padStart(2,'0');
        const mm = String(x.getMinutes()).padStart(2,'0');
        return `${hh}:${mm}`;
      }

      function buildTimeline(){
        if (timeline) {
          timeline.destroy();
          timeline = null;
        }
        groupsDS = new vis.DataSet([]);
        itemsDS = new vis.DataSet([]);

        const d = dateStr();
        const start = new Date(d + 'T00:00:00');
        const end = new Date(d + 'T23:59:59');

        timeline = new vis.Timeline(timelineEl, itemsDS, groupsDS, {
          stack: false,
          groupHeightMode: 'fixed',
          orientation: { axis: 'top' },
          start,
          end,
          min: start,
          max: end,
          zoomMin: 1000 * 60 * 60 * 4,
          zoomMax: 1000 * 60 * 60 * 24,
          editable: { add: true, updateTime: true, updateGroup: false, remove: false },
          margin: { item: 8, axis: 12 },
        });

        timeline.on('doubleClick', function(props){
          // create new item
          if (!props.group || !props.time) return;
          if (currentGroupBy === 'job') {
            Swal.fire('Info', 'Tambah segmen kosong lebih aman dari mode Per Karyawan.', 'info');
            return;
          }
          const kid = Number(props.group);
          if (blockedGroups && blockedGroups[kid]) {
            Swal.fire('Blocked', `Karyawan ini cuti (approved) pada tanggal ${d}.`, 'info');
            return;
          }
          openModal({
            id: null,
            karyawan_id: kid,
            karyawan_text: groupsDS.get(kid)?.content || String(kid),
            job_id: null,
            start_time: hmFromDate(props.time),
            end_time: hmFromDate(new Date(props.time.getTime() + 60*60*1000)),
            notes: ''
          });
        });

        timeline.on('select', function(props){
          const id = props.items && props.items.length ? props.items[0] : null;
          if (!id) return;
          const item = itemsDS.get(id);
          if (!item) return;
          openModal({
            id: Number(item.id),
            karyawan_id: Number(item.meta?.karyawan_id || item.group),
            karyawan_text: item.meta?.karyawan_text || groupsDS.get(Number(item.group))?.content || String(item.group),
            job_id: item.meta?.job_id || null,
            start_time: item.meta?.start_time || hmFromDate(item.start),
            end_time: item.meta?.end_time || hmFromDate(item.end),
            notes: item.meta?.notes || ''
          });
        });

        timeline.on('move', async function (item, callback) {
          // Update start/end time by drag/resize
          try {
            const id = Number(item.id);
            const row = itemsDS.get(id);
            const payload = {
              job_id: row.meta?.job_id,
              start_time: hmFromDate(item.start),
              end_time: hmFromDate(item.end),
              notes: row.meta?.notes || null
            };
            const resp = await fetch(`{{ url('/project-job-timeline') }}/${id}`, {
              method: 'PUT',
              headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken || '' },
              body: JSON.stringify(payload)
            });
            const json = await resp.json();
            if (!resp.ok) throw new Error(json.message || 'Update gagal');
            // keep meta in sync
            itemsDS.update({ id, start: item.start, end: item.end, meta: { ...row.meta, start_time: payload.start_time, end_time: payload.end_time }});
            callback(item);
          } catch (e) {
            Swal.fire('Error', e.message || 'Update gagal', 'error');
            callback(null);
          }
        });
      }

      function renderLegend(legendJobs){
        const host = document.getElementById('jobLegend');
        if (!Array.isArray(legendJobs) || !legendJobs.length) {
          host.innerHTML = '<span class="text-muted small">Belum ada item No Job pada tanggal ini.</span>';
          return;
        }
        host.innerHTML = `<span class="legend-title">No Job:</span>` + legendJobs.map((job) => `
          <span class="legend-chip">
            <span class="legend-swatch" style="background:${job.bg}; border-color:${job.border};"></span>
            ${job.label || '-'}
          </span>
        `).join('');
      }

      function renderStats(stats, blockedCount){
        document.getElementById('statSegments').textContent = Number(stats?.segments || 0);
        document.getElementById('statEmployees').textContent = Number(stats?.employees || 0);
        document.getElementById('statJobs').textContent = Number(stats?.jobs || 0);
        document.getElementById('statBlocked').textContent = Number(blockedCount || 0);
        document.getElementById('statMissing').textContent = Number(stats?.missing_segments || 0);
      }

      async function exportPng(){
        const canvas = await html2canvas(captureEl, {
          backgroundColor: '#ffffff',
          scale: 2,
          useCORS: true,
          logging: false
        });
        const link = document.createElement('a');
        link.download = `timeline-job-${dateStr() || 'export'}.png`;
        link.href = canvas.toDataURL('image/png');
        link.click();
      }

      function initJobSelect2(){
        $('#segJobId').select2({
          theme: 'bootstrap-5',
          dropdownParent: $('#segModal'),
          placeholder: 'Cari no job...',
          ajax: {
            url: '{{ route('project_job_refs.jobs') }}',
            dataType: 'json',
            delay: 250,
            data: (params) => ({ q: params.term || '', work_date: dateStr() || '' }),
            processResults: (data) => data,
            cache: true
          }
        });
      }

      function fillSelect2($el, id, text){
        if(!id) return;
        const opt = new Option(text || id, id, true, true);
        $el.append(opt).trigger('change');
      }

      function openModal(data){
        document.getElementById('segId').value = data.id ? String(data.id) : '';
        document.getElementById('segKaryawanId').value = String(data.karyawan_id || '');
        document.getElementById('segKaryawanText').value = data.karyawan_text || '-';
        document.getElementById('segStart').value = data.start_time || '08:00';
        document.getElementById('segEnd').value = data.end_time || '17:00';
        document.getElementById('segNotes').value = data.notes || '';
        document.getElementById('btnDeleteSeg').style.display = data.id ? '' : 'none';
        $('#segJobId').val(null).trigger('change');
        if (data.job_id) {
          // best-effort: if item had content, use it as select2 text
          const item = data.id ? itemsDS.get(Number(data.id)) : null;
          const txt = item ? item.content : null;
          fillSelect2($('#segJobId'), data.job_id, txt);
        }
        modal.show();
      }

      async function loadData(){
        const d = dateStr();
        buildTimeline();
        const url = `{{ route('project_job_timeline.data') }}?date=${encodeURIComponent(d)}&q=${encodeURIComponent(qStr())}&group_by=${encodeURIComponent(groupBy())}&only_spl=${document.getElementById('onlySpl').checked ? 1 : 0}&only_missing=${document.getElementById('onlyMissing').checked ? 1 : 0}`;
        const resp = await fetch(url);
        const json = await resp.json();
        if (!resp.ok) {
          Swal.fire('Error', json.message || 'Gagal load timeline', 'error');
          return;
        }
        serverNowEl.textContent = json.data.server_now || '-';
        blockedGroups = json.data.blocked_groups || {};
        missingSegmentGroups = json.data.missing_segment_groups || {};
        groupBadges = json.data.group_badges || {};
        currentGroupBy = json.data.group_by || groupBy();
        const blockedCount = Object.keys(blockedGroups || {}).length;
        blockedInfoEl.textContent = blockedCount ? String(blockedCount) : '-';
        renderStats(json.data.stats || {}, blockedCount);
        renderLegend(json.data.legend_jobs || []);

        const groups = (json.data.groups || []).map(g => {
          const isBlocked = currentGroupBy === 'employee' && !!blockedGroups[g.id];
          const isMissingSegment = currentGroupBy === 'employee' && !!missingSegmentGroups[g.id];
          const badges = groupBadges[g.id] || {};
          const badgeHtml = [
            `<span class="group-badge">Seg: ${Number(badges.segments || 0)}</span>`,
            Number(badges.spl || 0) > 0 ? `<span class="group-badge spl">SPL: ${Number(badges.spl || 0)}</span>` : '',
            isMissingSegment ? `<span class="group-badge missing">Missing</span>` : ''
          ].filter(Boolean).join('');
          let content = g.content;
          if (isBlocked) {
            content = `<span class="blocked">${content} (CUTI)</span>`;
          } else if (isMissingSegment) {
            content = `<span class="missing-segment">${content} (HADIR, BELUM ADA SEGMEN)</span>`;
          }
          return {
            ...g,
            content: `${content}${badgeHtml ? ' ' + badgeHtml : ''}`
          };
        });

        groupsDS.add(groups);
        itemsDS.add(json.data.spl_backgrounds || []);
        itemsDS.add(json.data.attendance_markers || []);
        itemsDS.add(json.data.items || []);
      }

      async function saveModal(){
        const id = String(document.getElementById('segId').value || '').trim();
        const kid = Number(document.getElementById('segKaryawanId').value || 0);
        const workDate = dateStr();
        const jobId = Number($('#segJobId').val() || 0);
        const start = String(document.getElementById('segStart').value || '');
        const end = String(document.getElementById('segEnd').value || '');
        const notes = String(document.getElementById('segNotes').value || '');

        if (!kid || !jobId || !start || !end) {
          Swal.fire('Info', 'Lengkapi karyawan/job/jam.', 'info');
          return;
        }
        const payload = { job_id: jobId, start_time: start, end_time: end, notes: notes || null };

        if (!id) {
          const resp = await fetch(`{{ route('project_job_timeline.store') }}`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken || '' },
            body: JSON.stringify({ ...payload, karyawan_id: kid, work_date: workDate })
          });
          const json = await resp.json();
          if (!resp.ok) {
            Swal.fire('Error', json.message || 'Gagal', 'error');
            return;
          }
          const created = json.data;
          itemsDS.add({
            id: created.id,
            group: created.group,
            start: created.start,
            end: created.end,
            content: created.content,
            className: 'job-item',
            style: created.style || '',
            meta: { job_id: jobId, notes: notes || '', start_time: start, end_time: end }
          });
          modal.hide();
          return;
        }

        const resp = await fetch(`{{ url('/project-job-timeline') }}/${id}`, {
          method: 'PUT',
          headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken || '' },
          body: JSON.stringify(payload)
        });
        const json = await resp.json();
        if (!resp.ok) {
          Swal.fire('Error', json.message || 'Gagal', 'error');
          return;
        }
        const item = itemsDS.get(Number(id));
        const jobText = $('#segJobId').find(':selected').text();
        itemsDS.update({
          id: Number(id),
          start: workDate + ' ' + start + ':00',
          end: workDate + ' ' + end + ':00',
          content: json.data?.content || jobText || item.content,
          style: json.data?.style || item.style || '',
          meta: { ...(item.meta||{}), job_id: jobId, notes: notes || '', start_time: start, end_time: end }
        });
        modal.hide();
      }

      async function deleteModal(){
        const id = String(document.getElementById('segId').value || '').trim();
        if(!id) return;
        const x = await Swal.fire({ title:'Hapus segmen ini?', icon:'warning', showCancelButton:true, confirmButtonText:'Ya, hapus' });
        if(!x.isConfirmed) return;
        const resp = await fetch(`{{ url('/project-job-timeline') }}/${id}`, { method:'DELETE', headers: { 'X-CSRF-TOKEN': csrfToken || '' } });
        const json = await resp.json();
        if(!resp.ok){
          Swal.fire('Error', json.message || 'Gagal', 'error');
          return;
        }
        itemsDS.remove(Number(id));
        modal.hide();
      }

      document.getElementById('btnLoad').addEventListener('click', loadData);
      document.getElementById('btnFitWorkday').addEventListener('click', function(){
        if (!timeline) return;
        const d = dateStr();
        timeline.setWindow(new Date(d + 'T06:00:00'), new Date(d + 'T22:00:00'), { animation: true });
      });
      document.getElementById('btnFitFullDay').addEventListener('click', function(){
        if (!timeline) return;
        const d = dateStr();
        timeline.setWindow(new Date(d + 'T00:00:00'), new Date(d + 'T23:59:59'), { animation: true });
      });
      document.getElementById('btnExportPng').addEventListener('click', async function(){
        try {
          await exportPng();
        } catch (e) {
          Swal.fire('Error', e.message || 'Export PNG gagal', 'error');
        }
      });
      document.getElementById('btnPrintPdf').addEventListener('click', function(){
        const pdfUrl = `{{ route('project_job_timeline.pdf') }}?date=${encodeURIComponent(dateStr())}&q=${encodeURIComponent(qStr())}&group_by=${encodeURIComponent(groupBy())}&only_spl=${document.getElementById('onlySpl').checked ? 1 : 0}&only_missing=${document.getElementById('onlyMissing').checked ? 1 : 0}`;
        window.open(pdfUrl, '_blank');
      });
      document.getElementById('segForm').addEventListener('submit', function(e){ e.preventDefault(); saveModal(); });
      document.getElementById('btnDeleteSeg').addEventListener('click', deleteModal);
      document.querySelectorAll('input[name="groupBy"]').forEach((el) => el.addEventListener('change', function(){
        syncLabels();
        loadData();
      }));
      document.getElementById('onlySpl').addEventListener('change', loadData);
      document.getElementById('onlyMissing').addEventListener('change', loadData);

      initJobSelect2();
      syncLabels();
      buildTimeline();
      loadData();
    })();
  </script>
@endpush