@extends('layouts.adminlte')

@section('title', 'Timegrid Job (Berdasarkan Presensi)')
@section('content')
<div class="container-fluid">
  <div class="d-flex align-items-start justify-content-between mb-3">
    <div>
      <h3 class="mb-0">Timegrid Job (Berdasarkan Presensi)</h3>
      <div class="text-muted small">Bagi 1 hari kerja menjadi beberapa segmen No Job sesuai timeline. Contoh: 08:00-13:00 Job A, 14:00-17:00 Job B, lembur mengikuti SPL.</div>
    </div>
    <div class="d-flex flex-column align-items-end gap-2">
      @include('projectjobcosting::partials.nav', ['current' => 'timegrid'])
      <div class="d-flex flex-wrap gap-2">
        <a href="{{ route('project_job_timegrid.template') }}" class="btn btn-outline-success btn-sm">Template Excel</a>
        <button type="button" class="btn btn-outline-secondary btn-sm" id="btnExportExisting">Export Existing</button>
        <button type="button" class="btn btn-primary btn-sm" id="btnOpenImport">Import Excel</button>
        <a href="{{ route('project_job_work_logs.index') }}" class="btn btn-outline-secondary btn-sm">Work Log</a>
        <a href="{{ route('project_job_timeline.index') }}" class="btn btn-outline-secondary btn-sm">Timeline Job</a>
        <a href="{{ route('project_job_work_logs.summary_page') }}" class="btn btn-outline-secondary btn-sm">Summary Cost</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="workDate" class="form-control" value="{{ now()->format('Y-m-d') }}">
        </div>
        <div class="col-md-6">
          <label class="form-label">Karyawan</label>
          <select id="karyawanId" class="form-select"></select>
        </div>
        <div class="col-md-3 d-grid">
          <button class="btn btn-primary" id="btnLoad"><i class="fas fa-sync-alt me-1"></i>Muat Data</button>
        </div>
      </div>

      <div class="mt-3 d-flex flex-wrap gap-2 align-items-center">
        <span class="badge bg-light text-dark border">Presensi: <span id="attInfo">-</span></span>
        <span class="badge bg-light text-dark border">Shift Plan: <span id="planInfo">-</span></span>
        <span class="badge bg-light text-dark border">SPL Approved: <span id="splInfo">-</span></span>
        <span class="badge bg-light text-dark border">Server: <span id="serverNow">-</span></span>
      </div>

      <div class="alert alert-warning mt-3 d-none" id="gridBlockedAlert"></div>
    </div>
  </div>

  <div class="card mb-3">
    <div class="card-body">
      <div class="d-flex align-items-center justify-content-between mb-2">
        <div class="fw-semibold">Timegrid (00:00 - 24:00)</div>
        <div class="d-flex gap-2">
          <button class="btn btn-outline-secondary btn-sm" id="btnAutoFill" disabled>Auto Fill dari Presensi</button>
          <button class="btn btn-success btn-sm" id="btnSave" disabled><i class="fas fa-save me-1"></i>Simpan</button>
        </div>
      </div>

      <div class="timegrid-wrap">
        <div id="timegrid" class="timegrid">
          <div class="timegrid-axis" id="timeAxis"></div>
          <div class="timegrid-overlay" id="gridOverlay"></div>
          <div class="timegrid-blocks" id="gridBlocks"></div>
        </div>
      </div>
      <div class="small text-muted mt-2">Tip: segmen tidak boleh overlap. Jika presensi IN/OUT ada, usahakan segmen berada dalam window itu. Untuk overtime, lihat range SPL.</div>
    </div>
  </div>

  <div class="card">
    <div class="card-body">
      <div class="row g-2 align-items-end">
        <div class="col-md-4">
          <label class="form-label">No Job</label>
          <select id="jobId" class="form-select"></select>
        </div>
        <div class="col-md-2">
          <label class="form-label">Mulai</label>
          <input type="time" id="startTime" class="form-control" value="08:00">
        </div>
        <div class="col-md-2">
          <label class="form-label">Selesai</label>
          <input type="time" id="endTime" class="form-control" value="17:00">
        </div>
        <div class="col-md-3">
          <label class="form-label">Catatan (opsional)</label>
          <input type="text" id="notes" class="form-control" placeholder="mis: pindah job karena ...">
        </div>
        <div class="col-md-1 d-grid">
          <button class="btn btn-outline-primary" id="btnAddSeg" disabled>Tambah</button>
        </div>
      </div>

      <div class="table-responsive mt-3">
        <table class="table table-bordered table-striped" id="segTable">
          <thead>
            <tr>
              <th style="width:120px;">Jam</th>
              <th>No Job</th>
              <th>Catatan</th>
              <th style="width:90px;">Aksi</th>
            </tr>
          </thead>
          <tbody></tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="importTimegridModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Import Timegrid Excel</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <form id="importTimegridForm">
        <div class="modal-body">
          <div class="alert alert-light border">
            Format file Excel: <b>work_date</b>, <b>employee_code</b>, <b>job_code</b>, <b>start_time</b>, <b>end_time</b>, <b>notes</b>.<br>
            Import ini mengikuti rule strict Timegrid: wajib ada presensi IN/OUT, tidak boleh cuti, tidak boleh overlap, dan di luar shift plan wajib ada SPL approved.
          </div>
          <div class="mb-3">
            <label class="form-label">File Excel</label>
            <input type="file" class="form-control" id="importTimegridFile" accept=".xlsx,.xls" required>
          </div>
          <label class="d-flex align-items-center gap-2 m-0">
            <input type="checkbox" id="importTimegridReplaceExisting">
            <span>Ganti semua segmen existing pada hari yang sama</span>
          </label>
          <div class="alert alert-light border mt-3 d-none" id="timegridPreviewBox"></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-info" type="button" id="btnPreviewTimegridImport">Preview</button>
          <button class="btn btn-primary" type="submit">Import</button>
        </div>
      </form>
    </div>
  </div>
</div>
@endsection

@push('styles')
  <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>
    .select2-container--bootstrap-5 .select2-selection { min-height: 38px; }
    .timegrid-wrap { overflow-x: auto; }
    .timegrid { position: relative; width: 100%; min-width: 760px; height: 120px; border: 1px solid #d9deeb; border-radius: 10px; background: linear-gradient(180deg, #f8fafc, #ffffff); }
    .timegrid-axis { position: absolute; inset: 0; pointer-events: none; }
    .timegrid-axis .tick { position:absolute; top:0; bottom:0; width:1px; background: rgba(2, 6, 23, 0.06); }
    .timegrid-axis .label { position:absolute; top: 4px; transform: translateX(-50%); font-size: 11px; color: rgba(2,6,23,0.55); }
    .timegrid-overlay { position:absolute; inset: 0; pointer-events:none; }
    .marker { position:absolute; top: 26px; bottom: 10px; width: 2px; background: #0ea5e9; border-radius: 2px; opacity: 0.85; }
    .marker.out { background: #f97316; }
    .marker.plan { background: #64748b; opacity: 0.6; }
    .spl-band { position:absolute; top: 30px; height: 12px; background: rgba(250, 204, 21, 0.45); border-radius: 999px; border: 1px solid rgba(250, 204, 21, 0.65); }
    .timegrid-blocks { position:absolute; inset: 0; padding-top: 46px; }
    .block { position:absolute; height: 44px; border-radius: 10px; padding: 6px 10px; color: #0b1220; background: rgba(99,102,241,0.18); border: 1px solid rgba(99,102,241,0.35); overflow:hidden; }
    .block .t { font-size: 11px; opacity: 0.75; }
    .block .j { font-weight: 700; font-size: 13px; line-height: 1.1; }
    .block .n { font-size: 11px; opacity: 0.7; white-space: nowrap; text-overflow: ellipsis; overflow:hidden; }
  </style>
@endpush

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

      const state = {
        karyawan_id: null,
        work_date: null,
        attendance: null,
        overtimes: [],
        segments: [], // {id, job_id, job_code, job_name, start_time, end_time, notes}
      };

      function hmToMin(hm){
        if(!hm) return null;
        const [h,m] = String(hm).split(':').map(x=>parseInt(x,10));
        if(Number.isNaN(h) || Number.isNaN(m)) return null;
        return h*60 + m;
      }
      function minToPct(min){ return (min/1440)*100; }

      function renderAxis(){
        const axis = document.getElementById('timeAxis');
        axis.innerHTML = '';
        for(let h=0; h<=24; h++){
          const x = minToPct(Math.min(h*60, 1440));
          const tick = document.createElement('div');
          tick.className = 'tick';
          tick.style.left = `${x}%`;
          axis.appendChild(tick);
          if(h<24){
            const lbl = document.createElement('div');
            lbl.className = 'label';
            lbl.style.left = `${x}%`;
            lbl.textContent = String(h).padStart(2,'0') + ':00';
            axis.appendChild(lbl);
          }
        }
      }

      function setBadge(elId, text){
        document.getElementById(elId).textContent = text || '-';
      }

      function renderOverlay(){
        const ov = document.getElementById('gridOverlay');
        ov.innerHTML = '';

        const att = state.attendance || null;
        if(att){
          const inMin = hmToMin(att.checkin_at);
          const outMin = hmToMin(att.checkout_at);
          const pIn = hmToMin(att.planned_shift_start);
          const pOut = hmToMin(att.planned_shift_end);
          if(inMin != null){
            const m = document.createElement('div');
            m.className = 'marker in';
            m.style.left = `${minToPct(inMin)}%`;
            ov.appendChild(m);
          }
          if(outMin != null){
            const m = document.createElement('div');
            m.className = 'marker out';
            m.style.left = `${minToPct(outMin)}%`;
            ov.appendChild(m);
          }
          if(pIn != null){
            const m = document.createElement('div');
            m.className = 'marker plan';
            m.style.left = `${minToPct(pIn)}%`;
            ov.appendChild(m);
          }
          if(pOut != null){
            const m = document.createElement('div');
            m.className = 'marker plan';
            m.style.left = `${minToPct(pOut)}%`;
            ov.appendChild(m);
          }
        }

        (state.overtimes||[]).forEach(spl => {
          const s = hmToMin(spl.start_time);
          const e = hmToMin(spl.end_time);
          if(s==null || e==null) return;
          const band = document.createElement('div');
          band.className = 'spl-band';
          const left = minToPct(s);
          const width = minToPct(Math.max(0, e - s));
          band.style.left = `${left}%`;
          band.style.width = `${width}%`;
          ov.appendChild(band);
        });
      }

      function renderBlocks(){
        const wrap = document.getElementById('gridBlocks');
        wrap.innerHTML = '';
        (state.segments||[]).forEach(seg => {
          const s = hmToMin(seg.start_time);
          const e = hmToMin(seg.end_time);
          if(s==null || e==null) return;
          const el = document.createElement('div');
          el.className = 'block';
          el.dataset.id = String(seg._tmpId || seg.id || '');
          el.style.left = `${minToPct(s)}%`;
          el.style.width = `${minToPct(Math.max(0, e - s))}%`;
          el.innerHTML = `
            <div class="t">${seg.start_time} - ${seg.end_time}</div>
            <div class="j">${(seg.job_code||'') || 'JOB'}</div>
            <div class="n">${(seg.notes||'') ? String(seg.notes) : ''}</div>
          `;
          wrap.appendChild(el);
        });
      }

      function renderTable(){
        const tbody = document.querySelector('#segTable tbody');
        tbody.innerHTML = '';
        (state.segments||[]).forEach((seg, idx) => {
          const tr = document.createElement('tr');
          tr.innerHTML = `
            <td>${seg.start_time} - ${seg.end_time}</td>
            <td>${(seg.job_code||'') ? `${seg.job_code} - ${seg.job_name||''}` : (seg.job_name||'-')}</td>
            <td>${seg.notes ? String(seg.notes) : '-'}</td>
            <td><button class="btn btn-sm btn-outline-danger btn-del" data-idx="${idx}">Hapus</button></td>
          `;
          tbody.appendChild(tr);
        });
      }

      function sortAndValidate(){
        state.segments = (state.segments||[]).slice().sort((a,b)=> hmToMin(a.start_time) - hmToMin(b.start_time));
        for(let i=0;i<state.segments.length-1;i++){
          const a = state.segments[i], b = state.segments[i+1];
          if(hmToMin(a.end_time) > hmToMin(b.start_time)){
            return { ok:false, message:'Segmen job tidak boleh overlap.' };
          }
        }
        return { ok:true };
      }

      function setEnabled(enabled){
        document.getElementById('btnAutoFill').disabled = !enabled;
        document.getElementById('btnSave').disabled = !enabled;
        document.getElementById('btnAddSeg').disabled = !enabled;
      }

      function initSelect2(){
        const karyawanAjax = {
          url: '{{ route('project_job_refs.karyawans') }}',
          dataType: 'json',
          delay: 250,
          data: (params)=>({q: params.term || ''}),
          processResults: (data)=>data,
          cache: true
        };
        const jobAjax = {
          url: '{{ route('project_job_refs.jobs') }}',
          dataType: 'json',
          delay: 250,
          data: (params)=>({q: params.term || '', work_date: $('#workDate').val() || ''}),
          processResults: (data)=>data,
          cache: true
        };
        $('#karyawanId').select2({ theme:'bootstrap-5', placeholder:'Cari karyawan...', ajax: karyawanAjax });
        $('#jobId').select2({ theme:'bootstrap-5', placeholder:'Cari no job...', ajax: jobAjax });
      }

      async function loadContext(){
        const karyawanId = $('#karyawanId').val();
        const workDate = $('#workDate').val();
        if(!karyawanId || !workDate){
          Swal.fire('Info', 'Pilih tanggal dan karyawan dulu.', 'info');
          return;
        }
        setEnabled(false);
        const resp = await fetch(`{{ route('project_job_timegrid.context') }}?karyawan_id=${encodeURIComponent(karyawanId)}&work_date=${encodeURIComponent(workDate)}`);
        const json = await resp.json();
        if(!resp.ok){
          Swal.fire('Error', json.message || 'Gagal load', 'error');
          return;
        }
        state.karyawan_id = Number(karyawanId);
        state.work_date = workDate;
        const meta = (json.data && json.data.meta) ? json.data.meta : {};
        const blockedEl = document.getElementById('gridBlockedAlert');

        if (meta && meta.is_leave) {
          const leave = meta.leave || {};
          blockedEl.classList.remove('d-none');
          const leaveRange = (leave.start_date && leave.end_date) ? `${leave.start_date} s/d ${leave.end_date}` : '';
          blockedEl.textContent = `Tanggal ini cuti (approved). Timegrid tidak dapat diisi. ${leave.leave_type ? 'Type: ' + leave.leave_type + '. ' : ''}${leaveRange ? 'Range: ' + leaveRange + '.' : ''}`;
          state.attendance = json.data.attendance || null;
          state.overtimes = json.data.overtimes || [];
          state.segments = (json.data.logs || []).map(x => ({...x}));
          renderOverlay();
          renderBlocks();
          renderTable();
          setEnabled(false);
          return;
        } else {
          blockedEl.classList.add('d-none');
          blockedEl.textContent = '';
        }

        state.attendance = json.data.attendance || null;
        state.overtimes = json.data.overtimes || [];
        state.segments = (json.data.logs || []).map(x => ({...x}));

        setBadge('serverNow', json.data.server_now || '-');
        if(state.attendance){
          setBadge('attInfo', `${state.attendance.checkin_at || '-'} - ${state.attendance.checkout_at || '-'}`);
          setBadge('planInfo', `${state.attendance.planned_shift_start || '-'} - ${state.attendance.planned_shift_end || '-'}`);
        } else {
          setBadge('attInfo', '-');
          setBadge('planInfo', '-');
        }
        setBadge('splInfo', state.overtimes.length ? `${state.overtimes.length} SPL` : '-');

        renderOverlay();
        renderBlocks();
        renderTable();

        // Strict: require actual IN/OUT to input timegrid.
        const attOk = state.attendance && state.attendance.checkin_at && state.attendance.checkout_at;
        if (!attOk) {
          blockedEl.classList.remove('d-none');
          blockedEl.textContent = 'Tidak ada presensi IN/OUT pada tanggal ini. Timegrid tidak dapat diisi (mode strict).';
          setEnabled(false);
        } else {
          setEnabled(true);
        }
      }

      function autoFill(){
        const att = state.attendance || null;
        if(!att || !att.checkin_at || !att.checkout_at){
          Swal.fire('Info', 'Tidak ada data presensi IN/OUT.', 'info');
          return;
        }
        const jobId = $('#jobId').val();
        const jobText = $('#jobId').find(':selected').text();
        if(!jobId){
          Swal.fire('Info', 'Pilih No Job untuk auto fill.', 'info');
          return;
        }
        const [code, ...rest] = String(jobText||'').split('-').map(x=>x.trim());
        state.segments = [{
          id: null,
          _tmpId: 'tmp-' + String(Date.now()),
          job_id: Number(jobId),
          job_code: code || null,
          job_name: rest.join(' - ') || jobText,
          start_time: att.checkin_at,
          end_time: att.checkout_at,
          notes: 'AutoFill dari presensi',
          source: 'timegrid'
        }];
        const v = sortAndValidate();
        if(!v.ok){
          Swal.fire('Error', v.message, 'error');
          return;
        }
        renderBlocks();
        renderTable();
      }

      function addSegment(){
        const jobId = $('#jobId').val();
        const jobText = $('#jobId').find(':selected').text();
        const start = $('#startTime').val();
        const end = $('#endTime').val();
        if(!jobId || !start || !end){
          Swal.fire('Info', 'Lengkapi No Job, Mulai, Selesai.', 'info');
          return;
        }
        const [code, ...rest] = String(jobText||'').split('-').map(x=>x.trim());
        state.segments = (state.segments||[]).concat([{
          id: null,
          _tmpId: 'tmp-' + String(Date.now()) + '-' + String(Math.random()).slice(2,7),
          job_id: Number(jobId),
          job_code: code || null,
          job_name: rest.join(' - ') || jobText,
          start_time: start,
          end_time: end,
          notes: $('#notes').val() || null,
          source: 'timegrid'
        }]);
        const v = sortAndValidate();
        if(!v.ok){
          // rollback last add
          state.segments.pop();
          Swal.fire('Error', v.message, 'error');
          return;
        }
        $('#notes').val('');
        renderBlocks();
        renderTable();
      }

      async function saveAll(){
        const v = sortAndValidate();
        if(!v.ok){
          Swal.fire('Error', v.message, 'error');
          return;
        }
        if(!state.karyawan_id || !state.work_date){
          Swal.fire('Info', 'Muat data dulu.', 'info');
          return;
        }
        const payload = {
          karyawan_id: state.karyawan_id,
          work_date: state.work_date,
          segments: (state.segments||[]).map(s => ({
            id: s.id || null,
            job_id: s.job_id,
            start_time: s.start_time,
            end_time: s.end_time,
            notes: s.notes || null,
          }))
        };
        const resp = await fetch(`{{ route('project_job_timegrid.save') }}`, {
          method: 'POST',
          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 simpan', 'error');
          return;
        }
        Swal.fire('OK', json.message || 'Saved', 'success');
        await loadContext();
      }

      document.addEventListener('click', function(e){
        const btn = e.target.closest('.btn-del');
        if(!btn) return;
        const idx = Number(btn.dataset.idx);
        if(Number.isNaN(idx)) return;
        state.segments.splice(idx, 1);
        renderBlocks();
        renderTable();
      });

      document.getElementById('btnLoad').addEventListener('click', loadContext);
      document.getElementById('btnExportExisting').addEventListener('click', function(){
        const params = new URLSearchParams({
          work_date: document.getElementById('workDate').value || '',
          karyawan_id: $('#karyawanId').val() || ''
        });
        window.location.href = `{{ route('project_job_timegrid.export_existing') }}?${params.toString()}`;
      });
      document.getElementById('btnOpenImport').addEventListener('click', function(){
        document.getElementById('importTimegridForm').reset();
        document.getElementById('timegridPreviewBox').classList.add('d-none');
        document.getElementById('timegridPreviewBox').innerHTML = '';
        importModal.show();
      });
      function renderImportPreview(boxId, resp){
        const rows = Array.isArray(resp.rows) ? resp.rows : [];
        const html = `
          <div class="fw-semibold mb-2">Preview Import</div>
          <div class="small mb-2">Siap create: <b>${resp.created || 0}</b> | Existing diganti: <b>${resp.updated || 0}</b> | Skip: <b>${resp.skipped_count || 0}</b></div>
          ${rows.length ? `<div class="small" style="max-height:220px;overflow:auto;">${rows.map((row) => `
            <div class="py-1 border-top">
              <b>Baris ${row.row || '-'}</b> [${row.status || '-'}] ${row.message || '-'}
            </div>`).join('')}</div>` : ''}
        `;
        const box = document.getElementById(boxId);
        box.classList.remove('d-none');
        box.innerHTML = html;
      }
      document.getElementById('btnPreviewTimegridImport').addEventListener('click', function(){
        const fileInput = document.getElementById('importTimegridFile');
        if (!fileInput.files || !fileInput.files.length) {
          Swal.fire('Info', 'Pilih file Excel dulu.', 'info');
          return;
        }
        const fd = new FormData();
        fd.append('file', fileInput.files[0]);
        fd.append('replace_existing', document.getElementById('importTimegridReplaceExisting').checked ? '1' : '0');
        fd.append('preview_only', '1');

        $.ajax({
          url: '{{ route('project_job_timegrid.import') }}',
          method: 'POST',
          data: fd,
          processData: false,
          contentType: false
        }).done((resp) => {
          renderImportPreview('timegridPreviewBox', resp);
        }).fail((xhr) => {
          Swal.fire('Error', xhr.responseJSON?.message || 'Preview import timegrid gagal', 'error');
        });
      });
      document.getElementById('btnAutoFill').addEventListener('click', autoFill);
      document.getElementById('btnAddSeg').addEventListener('click', addSegment);
      document.getElementById('btnSave').addEventListener('click', saveAll);
      document.getElementById('workDate').addEventListener('change', function(){
        $('#jobId').val(null).trigger('change');
      });
      document.getElementById('importTimegridForm').addEventListener('submit', async function(e){
        e.preventDefault();
        const fileInput = document.getElementById('importTimegridFile');
        if (!fileInput.files || !fileInput.files.length) {
          Swal.fire('Info', 'Pilih file Excel dulu.', 'info');
          return;
        }
        const fd = new FormData();
        fd.append('file', fileInput.files[0]);
        fd.append('replace_existing', document.getElementById('importTimegridReplaceExisting').checked ? '1' : '0');

        $.ajax({
          url: '{{ route('project_job_timegrid.import') }}',
          method: 'POST',
          data: fd,
          processData: false,
          contentType: false
        }).done((resp) => {
          importModal.hide();
          const skipped = Array.isArray(resp.skipped) && resp.skipped.length
            ? `\n\nSkip (${resp.skipped_count}):\n- ${resp.skipped.join('\n- ')}`
            : '';
          Swal.fire('OK', `Import selesai.\nBaru: ${resp.created || 0} | Existing diganti: ${resp.updated || 0}${skipped}`, 'success');
          loadContext();
        }).fail((xhr) => {
          Swal.fire('Error', xhr.responseJSON?.message || 'Import timegrid gagal', 'error');
        });
      });

      initSelect2();
      renderAxis();
    })();
  </script>
@endpush