{{-- leaves/edit — Edit an existing leave application --}}
{{-- Data: all via JS fetch. Only $leaveId passed from controller. --}}
<x-slot name="header"><h1 style="font-size:18px;font-weight:600;margin:0;">Edit Leave</h1></x-slot>

<div style="max-width:640px;"
  data-leave-id="{{ $leaveId }}"
  data-fetch-url="{{ url('admin/attendance/leave/' . $leaveId) }}"
  data-types-url="{{ url('admin/attendance/lookup/leave-types') }}"
  data-req-url="{{ url('admin/attendance/lookup/req-types') }}"
  id="leave-edit-root">

  <div id="le-msg" style="display:none;padding:12px 16px;border-radius:6px;margin-bottom:16px;font-size:13px;"></div>
  <div id="le-loading" style="padding:40px;text-align:center;color:#9ca3af;font-size:14px;">Loading…</div>

  <div id="le-form" style="display:none;background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:24px;">

    <div style="margin-bottom:16px;">
      <label style="display:block;font-size:12px;font-weight:500;color:#6b7280;margin-bottom:6px;">Staff Member</label>
      <input id="le-staff-name" type="text" disabled
        style="width:100%;padding:8px 10px;border:1px solid #d1d5db;border-radius:6px;font-size:14px;background:#f9fafb;box-sizing:border-box;">
    </div>

    <div style="margin-bottom:16px;">
      <label style="display:block;font-size:12px;font-weight:500;color:#6b7280;margin-bottom:6px;">Subject</label>
      <input id="le-subject" type="text"
        style="width:100%;padding:8px 10px;border:1px solid #d1d5db;border-radius:6px;font-size:14px;box-sizing:border-box;">
    </div>

    <div style="margin-bottom:16px;">
      <label style="display:block;font-size:12px;font-weight:500;color:#6b7280;margin-bottom:6px;">Request Type</label>
      <select id="le-req-type" style="width:100%;padding:8px 10px;border:1px solid #d1d5db;border-radius:6px;font-size:14px;background:#fff;"></select>
    </div>

    <div style="margin-bottom:16px;">
      <label style="display:block;font-size:12px;font-weight:500;color:#6b7280;margin-bottom:6px;">Leave Type</label>
      <select id="le-leave-type" style="width:100%;padding:8px 10px;border:1px solid #d1d5db;border-radius:6px;font-size:14px;background:#fff;"></select>
    </div>

    <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;">
      <div>
        <label style="display:block;font-size:12px;font-weight:500;color:#6b7280;margin-bottom:6px;">From</label>
        <input type="date" id="le-from" style="width:100%;padding:8px 10px;border:1px solid #d1d5db;border-radius:6px;font-size:14px;box-sizing:border-box;">
      </div>
      <div>
        <label style="display:block;font-size:12px;font-weight:500;color:#6b7280;margin-bottom:6px;">To</label>
        <input type="date" id="le-to" 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="display:block;font-size:12px;font-weight:500;color:#6b7280;margin-bottom:6px;">Reason</label>
      <textarea id="le-reason" 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="le-submit" onclick="leSubmit()"
        style="padding:9px 24px;background:#2563eb;color:#fff;border:none;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;">
        Save Changes
      </button>
      <a href="{{ url('admin/attendance/leave') }}"
        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 LE = {
  CSRF: document.querySelector('meta[name="csrf-token"]')?.content || '',
  root: document.getElementById('leave-edit-root'),
};
LE.leaveId   = LE.root.dataset.leaveId;
LE.fetchUrl  = LE.root.dataset.fetchUrl;
LE.typesUrl  = LE.root.dataset.typesUrl;
LE.reqUrl    = LE.root.dataset.reqUrl;
LE.updateUrl = LE.fetchUrl; // PUT to same URL

function leMsg(text, ok) {
  const el = document.getElementById('le-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 leLoad() {
  const [leaveRes, typesRes, reqRes] = await Promise.all([
    fetch(LE.fetchUrl).then(r => r.json()),
    fetch(LE.typesUrl).then(r => r.json()),
    fetch(LE.reqUrl).then(r => r.json()),
  ]);
  if (!leaveRes.success) { leMsg(leaveRes.message || 'Failed to load.', false); return; }

  const d = leaveRes.data;
  document.getElementById('le-staff-name').value = d.staff_name;
  document.getElementById('le-subject').value     = d.subject || '';
  document.getElementById('le-from').value        = d.from_date || '';
  document.getElementById('le-to').value          = d.to_date   || '';
  document.getElementById('le-reason').value      = d.reason    || '';

  // Request types
  const rsel = document.getElementById('le-req-type');
  rsel.innerHTML = '<option value="">— None —</option>' +
    (reqRes.data || []).map(r =>
      `<option value="${r.id}" ${r.id == d.request_type_id ? 'selected' : ''}>${r.name}</option>`
    ).join('');

  // Leave types
  const lsel = document.getElementById('le-leave-type');
  lsel.innerHTML = '<option value="">— None —</option>' +
    (typesRes.data || []).map(t =>
      `<option value="${t.id}" ${t.id == d.leave_type_id ? 'selected' : ''}>${t.name}</option>`
    ).join('');

  document.getElementById('le-loading').style.display = 'none';
  document.getElementById('le-form').style.display    = 'block';
}

async function leSubmit() {
  const btn = document.getElementById('le-submit');
  btn.disabled = true; btn.textContent = 'Saving…';
  try {
    const res = await fetch(LE.updateUrl, {
      method: 'PUT',
      headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': LE.CSRF, 'X-Requested-With': 'XMLHttpRequest' },
      body: JSON.stringify({
        subject:         document.getElementById('le-subject').value,
        leave_type_id:   document.getElementById('le-leave-type').value || null,
        request_type_id: document.getElementById('le-req-type').value   || null,
        from_date:       document.getElementById('le-from').value,
        to_date:         document.getElementById('le-to').value,
        reason:          document.getElementById('le-reason').value,
      }),
    }).then(r => r.json());
    if (res.success) { window.location.href = '{{ url("admin/attendance/leave") }}'; return; }
    leMsg(res.message || 'Save failed.', false);
  } catch (e) { leMsg('Request failed.', false); }
  btn.disabled = false; btn.textContent = 'Save Changes';
}

leLoad();
</script>