{{-- records/my — Staff member views own attendance history --}}
{{-- No PHP data passed. All via API. --}}
<x-slot name="header"><h1 style="font-size:18px;font-weight:600;margin:0;">My Attendance</h1></x-slot>

<div id="my-rec-root"
  data-url="{{ url('admin/attendance/my-records') }}">

  {{-- Month picker --}}
  <div style="display:flex;align-items:center;gap:12px;margin-bottom:20px;">
    <input type="month" id="mr-month" value="{{ now()->format('Y-m') }}"
      style="padding:8px 12px;border:1px solid #d1d5db;border-radius:6px;font-size:14px;">
    <button onclick="mrLoad()"
      style="padding:8px 18px;background:#2563eb;color:#fff;border:none;border-radius:6px;font-size:14px;cursor:pointer;">
      Go
    </button>
  </div>

  {{-- Stat cards --}}
  <div id="mr-stats" style="display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px;"></div>

  {{-- Records table --}}
  <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;">Date</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;">Worked</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;">Remarks</th>
        </tr>
      </thead>
      <tbody id="mr-tbody">
        <tr><td colspan="6" style="padding:40px;text-align:center;color:#9ca3af;font-size:14px;">Loading…</td></tr>
      </tbody>
    </table>
  </div>
</div>

<script>
const MR = { root: document.getElementById('my-rec-root') };
MR.url = MR.root.dataset.url;

async function mrLoad() {
  const month = document.getElementById('mr-month').value;
  document.getElementById('mr-tbody').innerHTML =
    '<tr><td colspan="6" style="padding:40px;text-align:center;color:#9ca3af;">Loading…</td></tr>';

  const res = await fetch(MR.url + '?month=' + month).then(r => r.json());
  if (!res.success) {
    document.getElementById('mr-tbody').innerHTML =
      '<tr><td colspan="6" style="padding:40px;text-align:center;color:#991b1b;">' + (res.message||'Failed.') + '</td></tr>';
    return;
  }

  const { stats, records } = res.data;
  const sc = [['Present',stats.present,'#dcfce7','#166534'],['Absent',stats.absent,'#fee2e2','#991b1b'],['On Leave',stats.on_leave,'#f3e8ff','#7e22ce'],['Total Hrs',stats.total_hrs+'h','#eff6ff','#1e40af']];
  document.getElementById('mr-stats').innerHTML = sc.map(s =>
    `<div style="background:${s[2]};border-radius:8px;padding:14px;text-align:center;">
       <div style="font-size:22px;font-weight:700;color:${s[3]};">${s[1]}</div>
       <div style="font-size:12px;color:${s[3]};font-weight:500;">${s[0]}</div>
     </div>`).join('');

  if (!records.length) {
    document.getElementById('mr-tbody').innerHTML =
      '<tr><td colspan="6" style="padding:40px;text-align:center;color:#9ca3af;">No records for this month.</td></tr>';
    return;
  }

  document.getElementById('mr-tbody').innerHTML = records.map(r => `
    <tr style="border-bottom:1px solid #f3f4f6;">
      <td style="padding:10px 16px;font-size:13px;font-weight:500;color:#111827;">
        ${r.date} <span style="font-size:11px;color:#6b7280;">${r.day}</span>
      </td>
      <td style="padding:10px 16px;font-size:13px;">${r.check_in}</td>
      <td style="padding:10px 16px;font-size:13px;">${r.check_out}</td>
      <td style="padding:10px 16px;font-size:13px;font-weight:600;">${r.worked}</td>
      <td style="padding:10px 16px;">
        <span style="background:${r.status_bg};color:${r.status_color};padding:2px 10px;border-radius:4px;font-size:12px;font-weight:600;">${r.status_label}</span>
      </td>
      <td style="padding:10px 16px;font-size:12px;color:#6b7280;">${r.remarks}</td>
    </tr>`).join('');
}
mrLoad();
</script>