<!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>Check-in — JPN Helpdesk</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css">
  <style>body{padding:16px;background:#f7fafc}.card{padding:12px;border-radius:10px}</style>
</head>
<body>
  <div class="container">
    <div class="card">
      <h5>Check-in Kedatangan — Visit #{{ $visit->id }}</h5>
      <p class="small text-muted">GPS dan foto wajib. Foto harus diambil dari kamera.</p>
      <form id="checkinForm" action="{{ route('admin.visits.checkin', $visit) }}" method="POST" enctype="multipart/form-data">
        @csrf
        <input type="hidden" name="lat" id="lat">
        <input type="hidden" name="lng" id="lng">
        <input type="hidden" name="accuracy" id="accuracy">

        <div class="mb-3">
          <label class="form-label">Foto Kedatangan (kamera)</label>
          <input type="file" name="photo" accept="image/*" capture="environment" class="form-control" required>
        </div>

        <div class="mb-3">
          <label class="form-label">Bertemu dengan</label>
          <input type="text" name="met_person" class="form-control" placeholder="Nama PIC (opsional)">
        </div>

        <div class="mb-3">
          <label class="form-label">Kondisi umum lokasi</label>
          <select name="condition" class="form-select">
            <option value="normal">Normal, sesuai ekspektasi</option>
            <option value="different">Ada perbedaan dari info sebelumnya</option>
          </select>
        </div>
        <div class="mb-3">
          <label class="form-label">Catatan kondisi (jika ada)</label>
          <textarea name="condition_note" class="form-control" rows="2"></textarea>
        </div>

        <button class="btn btn-primary w-100" type="submit">Saya Sudah Tiba</button>
      </form>
      <div id="msg" class="mt-2"></div>
    </div>
  </div>

  <script>
    // get gps
    function setPosition(pos){
      document.getElementById('lat').value = pos.coords.latitude;
      document.getElementById('lng').value = pos.coords.longitude;
      document.getElementById('accuracy').value = Math.round(pos.coords.accuracy);
    }
    function err(e){ console.warn(e); document.getElementById('msg').innerText='Tidak bisa mendapatkan GPS. Aktifkan lokasi.' }
    if (navigator.geolocation){
      navigator.geolocation.getCurrentPosition(setPosition, err, {enableHighAccuracy:true,timeout:10000});
    } else { err('no geo') }

    document.getElementById('checkinForm').addEventListener('submit', function(ev){
      if (!document.getElementById('lat').value) {
        ev.preventDefault(); document.getElementById('msg').innerText='Aktifkan GPS lalu coba lagi.';
      }
    });
  </script>
</body>
</html>
