<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta name="csrf-token" content="{{ csrf_token() }}">
  <title>Pre-Pulang Checklist — JPN Helpdesk</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css">
  <style>body{padding:12px;background:#fff}.card{padding:12px;border-radius:10px}</style>
</head>
<body>
  <div class="container">
        <div class="mb-3">
          <label class="form-label">Konfirmasi klien/PIC</label>
          <select name="client_confirmed" class="form-select" required>
            <option value="1">Klien puas</option>
            <option value="0">Belum/Butuh tindak lanjut</option>
          </select>
        </div>

        <div class="mb-2">
          <label class="form-label">Nama PIC (pilih atau tulis manual)</label>
          <input name="client_name" class="form-control" placeholder="Nama PIC (opsional)">
        </div>

        <div class="mb-3">
          <label class="form-label">Tanda tangan klien/PIC (gunakan jari atau stylus)</label>
          <div id="signature-pad" style="border:1px solid #ddd;background:#fff;padding:6px">
            <canvas id="sig-canvas" width="400" height="160" style="touch-action: none; width:100%; height:160px"></canvas>
          </div>
          <input type="hidden" name="signature" id="signature-input">
          <div class="mt-2 d-flex gap-2">
            <button type="button" id="sig-clear" class="btn btn-sm btn-outline-secondary">Clear</button>
            <small class="text-muted align-self-center">Tanda tangan wajib jika klien konfirmasi 'Klien puas'.</small>
          </div>
        </div>
        @csrf
        <div class="mb-3">
          <label class="form-label">Masalah utama sudah teratasi?</label>
          <select name="issue_resolved" class="form-select" required>
            <option value="1">Ya</option>
            <option value="0">Belum</option>
          </select>
        </div>

        <div class="mb-3">
          <label class="form-label">Sudah dites bersama klien/PIC?</label>
          <select name="tested_with_client" class="form-select" required>
            <option value="1">Sudah dan OK</option>
            <option value="0">Belum</option>
          </select>
        </div>

        <div class="mb-3">
          <label class="form-label">Jika belum 100%, isi alasan dan langkah selanjutnya</label>
          <textarea name="not_complete_reason" class="form-control" rows="3"></textarea>
        </div>

        <hr>
        <h6>Alat & Barang</h6>
        <div class="mb-2">
          <label class="form-label">Semua toolkit sudah dikumpulkan kembali?</label>
          <select name="tools_collected" class="form-select" required>
            <option value="1">Ya</option>
            <option value="0">Tidak</option>
          </select>
        </div>
        <div class="mb-2">
          <label class="form-label">Tidak ada kabel/alat tertinggal di lokasi?</label>
          <select name="no_left_items" class="form-select" required>
            <option value="1">Ya</option>
            <option value="0">Tidak</option>
          </select>
        </div>

        <div class="mb-2">
          <label class="form-label">Sparepart sisa sudah dibawa kembali?</label>
          <select name="spareparts_returned" class="form-select" required>
            <option value="1">Ya</option>
            <option value="0">Tidak</option>
          </select>
        </div>

        <div class="mb-2">
          <label class="form-label">Tidak ada sampah/kemasan bekas yang ditinggal?</label>
          <select name="no_trash_left" class="form-select" required>
            <option value="1">Ya</option>
            <option value="0">Tidak</option>
          </select>
        </div>

        <div class="mb-2">
          <label class="form-label">Akses/password yang dibuka sudah ditutup kembali?</label>
          <select name="access_closed" class="form-select" required>
            <option value="1">Ya</option>
            <option value="0">Tidak</option>
          </select>
        </div>

        <hr>
        <h6>Dokumentasi & Konfirmasi</h6>
        <div class="mb-2">
          <label class="form-label">Foto sesudah sudah diupload?</label>
          <select name="documentation_done" class="form-select" required>
            <option value="1">Ya</option>
            <option value="0">Belum</option>
          </select>
        </div>

        <div class="mb-2">
          <label class="form-label">Konfirmasi klien/PIC</label>
          <select name="client_confirmed" class="form-select" required>
            <option value="1">Klien puas</option>
            <option value="0">Belum/Butuh tindak lanjut</option>
          </select>
        </div>

        <div class="mb-2">
          <label class="form-label">Nama PIC (pilih atau tulis manual)</label>
          <input name="client_name" class="form-control" placeholder="Nama PIC (opsional)">
        </div>

        <div class="mb-3">
          <label class="form-label">Kondisi penutup</label>
          <select name="closing_condition" class="form-select" required>
            <option value="satisfied">Klien puas, semua beres</option>
            <option value="satisfied_note">Klien puas, ada catatan tambahan</option>
            <option value="new_issue">Ada masalah lain ditemukan</option>
            <option value="not_complete">Masalah belum selesai</option>
          </select>
        </div>

        <button class="btn btn-success w-100" type="submit">Selesai & Pulang</button>
      </form>
    </div>
  </div>
  <script>
    // signature pad handling + client-side guards
    const canvas = document.getElementById('sig-canvas');
    const signatureInput = document.getElementById('signature-input');
    const clearBtn = document.getElementById('sig-clear');
    const ctx = canvas.getContext('2d');
    let drawing = false; let lastPos = null;
    function resizeCanvas() {
      const ratio = Math.max(window.devicePixelRatio || 1, 1);
      const w = canvas.offsetWidth; const h = canvas.offsetHeight;
      canvas.width = w * ratio; canvas.height = h * ratio;
      canvas.style.height = h + 'px'; canvas.style.width = w + 'px';
      ctx.scale(ratio, ratio);
      ctx.lineWidth = 2; ctx.lineCap = 'round'; ctx.strokeStyle = '#000';
    }
    function getPos(e){
      if (e.touches && e.touches.length) e = e.touches[0];
      const rect = canvas.getBoundingClientRect(); return {x: e.clientX-rect.left, y: e.clientY-rect.top};
    }
    canvas.addEventListener('pointerdown', (e)=>{ drawing=true; lastPos=getPos(e); });
    canvas.addEventListener('pointermove', (e)=>{ if(!drawing) return; const p=getPos(e); ctx.beginPath(); ctx.moveTo(lastPos.x,lastPos.y); ctx.lineTo(p.x,p.y); ctx.stroke(); lastPos=p; });
    canvas.addEventListener('pointerup', ()=>{ drawing=false; lastPos=null; });
    clearBtn.addEventListener('click', ()=>{ ctx.clearRect(0,0,canvas.width,canvas.height); signatureInput.value=''; });
    window.addEventListener('resize', resizeCanvas); resizeCanvas();

    document.querySelector('form').addEventListener('submit', function(e){
      const doc = document.querySelector('select[name="documentation_done"]').value;
      const afterPhotos = doc==='1';
      if (!afterPhotos) {
        if (!confirm('Foto sesudah belum terupload. Lanjutkan?')) { e.preventDefault(); return; }
      }
      const clientConfirmed = document.querySelector('select[name="client_confirmed"]').value === '1';
      if (clientConfirmed) {
        const data = canvas.toDataURL('image/png');
        // check if blank (very small data length)
        if (!data || data.length < 2000) {
          alert('Tanda tangan klien diperlukan saat klien konfirmasi.'); e.preventDefault(); return;
        }
        signatureInput.value = data;
      }
    });
  </script>
</body>
</html>
