<!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>Work Log — 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:#f8fafc}.card{padding:12px;border-radius:10px}.log-row{display:flex;gap:8px}</style>
</head>
<body>
  <div class="container">
    <div class="card mb-3">
      <h5>Foto Kondisi Awal</h5>
      <form action="{{ route('admin.visits.before.photo', $visit) }}" method="POST" enctype="multipart/form-data">
        @csrf
        <div class="mb-2">
          <label class="form-label">Foto (kamera)</label>
          <input type="file" name="photo" accept="image/*" capture="environment" class="form-control" required>
        </div>
        <div class="mb-2">
          <label class="form-label">Deskripsi kondisi awal (min 30 karakter)</label>
          <textarea name="description" class="form-control" rows="3" required></textarea>
        </div>
        <button class="btn btn-primary">Simpan Kondisi Awal</button>
      </form>
    </div>

    <div class="card mb-3">
      <h5>Log Pengerjaan</h5>
      <div id="logs"></div>
      <div class="mt-2 log-row">
        <input id="activity" class="form-control" placeholder="Tambah aktivitas (singkat)">
        <button id="addLog" class="btn btn-outline-primary">Tambah</button>
      </div>
    </div>

    <div class="card mb-3">
      <h5>Foto Kondisi Sesudah</h5>
      <form action="{{ route('admin.visits.after.photo', $visit) }}" method="POST" enctype="multipart/form-data">
        @csrf
        <div class="mb-2">
          <label class="form-label">Foto (kamera)</label>
          <input type="file" name="photo" accept="image/*" capture="environment" class="form-control" required>
        </div>
        <button class="btn btn-success">Simpan Kondisi Sesudah</button>
      </form>
    </div>

    <div class="text-center mt-3">
      <a href="{{ route('admin.visits.show', $visit) }}" class="btn btn-link">Kembali ke Visit</a>
    </div>
  </div>

  <script>
    const visitId = {{ $visit->id }};
    document.getElementById('addLog').addEventListener('click', async ()=>{
      const act = document.getElementById('activity').value.trim();
      if (!act) return;
      const token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
      const res = await fetch(`/admin/visits/${visitId}/logs`,{method:'POST',headers:{'Content-Type':'application/json','X-CSRF-TOKEN':token},body:JSON.stringify({activity:act})});
      const j = await res.json();
      if (j.status=='ok'){
        const d = document.createElement('div'); d.className='small text-muted mb-1'; d.innerText = j.time + ' - ' + j.activity;
        document.getElementById('logs').prepend(d);
        document.getElementById('activity').value='';
      }
    });
  </script>
</body>
</html>
