{{-- records/mark — Admin bulk-marks attendance for a date --}}
{{-- No PHP data. All via API. --}}
<x-slot name="header"><h1 style="font-size:18px;font-weight:600;margin:0;">Mark Attendance</h1></x-slot>

<div id="mark-root"
  data-url="{{ url('admin/attendance/mark-data') }}"
  data-save-url="{{ url('admin/attendance/mark-store') }}">

  <div style="display:flex;align-items:center;gap:12px;margin-bottom:20px;">
    <input type="date" id="mk-date" value="{{ now()->toDateString() }}"
      style="padding:8px 12px;border:1px solid #d1d5db;border-radius:6px;font-size:14px;">
    <button onclick="mkLoad()"
      style="padding:8px 18px;background:#2563eb;color:#fff;border:none;border-radius:6px;font-size:14px;cursor:pointer;">
      Load
    </button>
    <button id="mk-save" onclick="mkSave()" style="display:none;padding:8px 18px;background:#10b981;color:#fff;border:none;border-radius:6px;font-size:14px;cursor:pointer;">
      Save All
    </button>
  </div>

  <div id="mk-msg" style="display:none;padding:12px;border-radius:6px;margin-bottom:16px;font-size:13px;"></div>

  <div style="background:#fff;border:1px solid #e5e7eb;border-radius:10px;overflow:hidden;">
    <table style="width:100%;border-collapse:collapse;">
      <thead>
        <tr style="background:#f9fafb;border-bottom:1px solid #e5e7eb;">
          <th style="padding:10px 16px;text-align:left;font-size:12px;font-weight:600;color:#6b7280;">Staff</th>
          <th style="padding:10px 16px;text-align:left;font-size:12px;font-weight:600;color:#6b7280;">Status</th>
          <th style="padding:10px 16px;text-align:left;font-size:12px;font-weight:600;color:#6b7280;">Check In</th>
          <th style="padding:10px 16px;text-align:left;font-size:12px;font-weight:600;color:#6b7280;">Check Out</th>
          <th style="padding:10px 16px;text-align:left;font-size:12px;font-weight:600;color:#6b7280;">Remarks</th>
        </tr>
      </thead>
      <tbody id="mk-tbody">
        <tr><td colspan="5" style="padding:40px;text-align:center;color:#9ca3af;">Select a date and click Load.</td></tr>
      </tbody>
    </table>
  </div>
</div>

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

function mkMsg(text, ok) {
  const el = document.getElementById('mk-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 mkLoad() {
  const date = document.getElementById('mk-date').value;
  document.getElementById('mk-tbody').innerHTML =
    '<tr><td colspan="5" style="padding:40px;text-align:center;color:#9ca3af;">Loading…</td></tr>';

  const res = await fetch(MK.url + '?date=' + date).then(r => r.json());
  if (!res.success || !res.data.staff.length) {
    document.getElementById('mk-tbody').innerHTML =
      '<tr><td colspan="5" style="padding:40px;text-align:center;color:#9ca3af;">No staff found.</td></tr>';
    return;
  }

  const statuses = res.data.statuses;
  document.getElementById('mk-tbody').innerHTML = res.data.staff.map(s => `
    <tr style="border-bottom:1px solid #f3f4f6;" data-staff-id="${s.id}">
      <td style="padding:10px 16px;">
        <div style="font-size:13px;font-weight:500;color:#111827;">${s.name}</div>
        <div style="font-size:11px;color:#6b7280;">${s.employee_code}</div>
      </td>
      <td style="padding:10px 16px;">
        <select class="mk-status" data-id="${s.id}" style="padding:6px 10px;border:1px solid #d1d5db;border-radius:5px;font-size:13px;background:#fff;">
          ${statuses.map(st => `<option value="${st.value}" ${st.value===s.current?'selected':''}>${st.label}</option>`).join('')}
        </select>
      </td>
      <td style="padding:10px 16px;"><input type="time" class="mk-in"  data-id="${s.id}" style="padding:6px 10px;border:1px solid #d1d5db;border-radius:5px;font-size:13px;"></td>
      <td style="padding:10px 16px;"><input type="time" class="mk-out" data-id="${s.id}" style="padding:6px 10px;border:1px solid #d1d5db;border-radius:5px;font-size:13px;"></td>
      <td style="padding:10px 16px;"><input type="text" class="mk-rem" data-id="${s.id}" placeholder="Optional" style="padding:6px 10px;border:1px solid #d1d5db;border-radius:5px;font-size:13px;width:100%;box-sizing:border-box;"></td>
    </tr>`).join('');

  document.getElementById('mk-save').style.display = 'inline-block';
}

async function mkSave() {
  const btn  = document.getElementById('mk-save');
  const date = document.getElementById('mk-date').value;
  const att  = {};
  document.querySelectorAll('#mk-tbody tr[data-staff-id]').forEach(row => {
    const id = row.dataset.staffId;
    att[id] = {
      status:    row.querySelector('.mk-status').value,
      check_in:  row.querySelector('.mk-in').value  || null,
      check_out: row.querySelector('.mk-out').value || null,
      remarks:   row.querySelector('.mk-rem').value || null,
    };
  });
  btn.disabled = true; btn.textContent = 'Saving…';
  try {
    const res = await fetch(MK.saveUrl, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': MK.CSRF, 'X-Requested-With': 'XMLHttpRequest' },
      body: JSON.stringify({ date, attendance: att }),
    }).then(r => r.json());
    mkMsg(res.success ? 'Attendance saved.' : (res.message || 'Failed.'), res.success);
  } catch(e) { mkMsg('Request failed.', false); }
  btn.disabled = false; btn.textContent = 'Save All';
}
</script>