{{-- records/edit — Edit an attendance record --}}
{{-- Only $attId passed. All data via API. --}}
<x-slot name="header"><h1 style="font-size:18px;font-weight:600;margin:0;">Edit Attendance</h1></x-slot>

<div style="max-width:560px;" id="re-root"
  data-id="{{ $attId }}"
  data-url="{{ url('admin/attendance/record/' . $attId) }}">
  <div id="re-loading" style="padding:60px;text-align:center;color:#9ca3af;font-size:14px;">Loading…</div>
  <div id="re-msg"  style="display:none;padding:12px 16px;border-radius:6px;margin-bottom:16px;font-size:13px;"></div>
  <div id="re-form" style="display:none;background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:24px;">

    <div id="re-header" style="margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid #f3f4f6;font-size:14px;color:#374151;"></div>

    <div style="margin-bottom:14px;">
      <label style="font-size:12px;font-weight:500;color:#6b7280;display:block;margin-bottom:6px;">Status</label>
      <select id="re-status" style="width:100%;padding:8px 10px;border:1px solid #d1d5db;border-radius:6px;font-size:14px;background:#fff;">
        @foreach(config('attendance.statuses', []) as $val => $meta)
          <option value="{{ $val }}">{{ $meta['label'] }}</option>
        @endforeach
      </select>
    </div>
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:14px;">
      <div>
        <label style="font-size:12px;font-weight:500;color:#6b7280;display:block;margin-bottom:6px;">Check In</label>
        <input type="time" id="re-check-in" style="width:100%;padding:8px 10px;border:1px solid #d1d5db;border-radius:6px;font-size:14px;box-sizing:border-box;">
      </div>
      <div>
        <label style="font-size:12px;font-weight:500;color:#6b7280;display:block;margin-bottom:6px;">Check Out</label>
        <input type="time" id="re-check-out" style="width:100%;padding:8px 10px;border:1px solid #d1d5db;border-radius:6px;font-size:14px;box-sizing:border-box;">
      </div>
    </div>
    <div style="margin-bottom:20px;">
      <label style="font-size:12px;font-weight:500;color:#6b7280;display:block;margin-bottom:6px;">Remarks</label>
      <textarea id="re-remarks" rows="3" style="width:100%;padding:8px 10px;border:1px solid #d1d5db;border-radius:6px;font-size:14px;box-sizing:border-box;resize:vertical;"></textarea>
    </div>
    <div style="display:flex;gap:10px;">
      <button id="re-submit" onclick="reSubmit()"
        style="padding:9px 24px;background:#2563eb;color:#fff;border:none;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;">
        Save
      </button>
      <a id="re-back" href="{{ url('admin/attendance/logs') }}"
        style="padding:9px 16px;border:1px solid #d1d5db;border-radius:6px;font-size:14px;color:#374151;text-decoration:none;background:#f9fafb;">
        Cancel
      </a>
    </div>
  </div>
</div>

<script>
const RE = { CSRF: document.querySelector('meta[name="csrf-token"]')?.content || '' };
RE.root = document.getElementById('re-root');
RE.url  = RE.root.dataset.url;

function reMsg(text, ok) {
  const el = document.getElementById('re-msg');
  el.textContent = text; el.style.display = 'block';
  el.style.background = ok ? '#f0fdf4' : '#fef2f2';
  el.style.border = '1px solid ' + (ok ? '#bbf7d0' : '#fecaca');
  el.style.color  = ok ? '#166534' : '#991b1b';
}

async function reLoad() {
  const res = await fetch(RE.url).then(r => r.json());
  if (!res.success) { document.getElementById('re-loading').textContent = 'Failed to load.'; return; }
  const d = res.data;
  document.getElementById('re-header').textContent   = d.person_name + ' — ' + d.attendance_date_fmt;
  document.getElementById('re-status').value         = d.status;
  document.getElementById('re-check-in').value       = d.check_in  || '';
  document.getElementById('re-check-out').value      = d.check_out || '';
  document.getElementById('re-remarks').value        = d.remarks   || '';
  document.getElementById('re-back').href            = d.show_url;
  document.getElementById('re-loading').style.display = 'none';
  document.getElementById('re-form').style.display    = 'block';
}

async function reSubmit() {
  const btn = document.getElementById('re-submit');
  btn.disabled = true; btn.textContent = 'Saving…';
  try {
    const res = await fetch(RE.url, {
      method: 'PUT',
      headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': RE.CSRF, 'X-Requested-With': 'XMLHttpRequest' },
      body: JSON.stringify({
        status:    document.getElementById('re-status').value,
        check_in:  document.getElementById('re-check-in').value  || null,
        check_out: document.getElementById('re-check-out').value || null,
        remarks:   document.getElementById('re-remarks').value,
      }),
    }).then(r => r.json());
    if (res.success) { window.location.href = document.getElementById('re-back').href; return; }
    reMsg(res.message || 'Save failed.', false);
  } catch(e) { reMsg('Request failed.', false); }
  btn.disabled = false; btn.textContent = 'Save';
}
reLoad();
</script>