{{-- leaves/my-leaves — Staff member views their own leave balance + history + applies --}}
{{-- Data: all via JS fetch. No PHP data passed. --}}
<x-slot name="header"><h1 style="font-size:18px;font-weight:600;margin:0;">My Leaves</h1></x-slot>

<div id="my-leaves-root"
  data-balance-url="{{ url('admin/attendance/leave/balance') }}"
  data-types-url="{{ url('admin/attendance/lookup/leave-types') }}"
  data-req-url="{{ url('admin/attendance/lookup/req-types') }}"
  data-store-url="{{ url('admin/attendance/leave') }}"
  data-cancel-url="{{ url('admin/attendance/leave') }}"
  data-list-url="{{ url('admin/attendance/leave/data') }}">

  {{-- Balance cards --}}
  <div id="ml-balances" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-bottom:24px;">
    <div style="background:#f3f4f6;border-radius:10px;padding:16px;text-align:center;color:#9ca3af;font-size:13px;">Loading balances…</div>
  </div>

  <div style="display:grid;grid-template-columns:1fr 1fr;gap:24px;">

    {{-- Apply form --}}
    <div style="background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:20px;">
      <h3 style="font-size:15px;font-weight:600;margin:0 0 16px;">Apply for Leave</h3>
      <div id="ml-form-msg" style="display:none;padding:10px 14px;border-radius:6px;margin-bottom:14px;font-size:13px;"></div>

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

      <div style="margin-bottom:14px;">
        <label style="font-size:12px;font-weight:500;color:#6b7280;display:block;margin-bottom:6px;">Leave Type</label>
        <div id="ml-types" style="display:flex;flex-wrap:wrap;gap:8px;"></div>
        <input type="hidden" id="ml-leave-type-id">
      </div>

      <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px;">
        <div>
          <label style="font-size:12px;font-weight:500;color:#6b7280;display:block;margin-bottom:6px;">From</label>
          <input type="date" id="ml-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="font-size:12px;font-weight:500;color:#6b7280;display:block;margin-bottom:6px;">To</label>
          <input type="date" id="ml-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:14px;display:flex;align-items:center;gap:8px;">
        <input type="checkbox" id="ml-half" style="width:14px;height:14px;">
        <label for="ml-half" style="font-size:13px;color:#374151;">Half Day</label>
      </div>

      <div style="margin-bottom:16px;">
        <label style="font-size:12px;font-weight:500;color:#6b7280;display:block;margin-bottom:6px;">Reason</label>
        <textarea id="ml-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>

      <button id="ml-submit" onclick="mlSubmit()"
        style="padding:9px 24px;background:#2563eb;color:#fff;border:none;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;width:100%;">
        Submit Leave Request
      </button>
    </div>

    {{-- Leave history --}}
    <div style="background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:20px;">
      <h3 style="font-size:15px;font-weight:600;margin:0 0 16px;">Leave History</h3>
      <div id="ml-history" style="font-size:13px;color:#9ca3af;">Loading…</div>
    </div>
  </div>
</div>

<script>
const ML = {
  CSRF:       document.querySelector('meta[name="csrf-token"]')?.content || '',
  root:       document.getElementById('my-leaves-root'),
};
ML.balanceUrl = ML.root.dataset.balanceUrl;
ML.typesUrl   = ML.root.dataset.typesUrl;
ML.reqUrl     = ML.root.dataset.reqUrl;
ML.storeUrl   = ML.root.dataset.storeUrl;
ML.listUrl    = ML.root.dataset.listUrl;

function mlFmMsg(text, ok) {
  const el = document.getElementById('ml-form-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';
}

function mlSelectType(id, el) {
  document.getElementById('ml-leave-type-id').value = id;
  document.querySelectorAll('#ml-types label').forEach(l => l.style.borderColor = '#e5e7eb');
  el.style.borderColor = '#2563eb';
}

async function mlLoad() {
  const [balRes, typesRes, reqRes] = await Promise.all([
    fetch(ML.balanceUrl).then(r => r.json()),
    fetch(ML.typesUrl).then(r => r.json()),
    fetch(ML.reqUrl).then(r => r.json()),
  ]);

  // Balance cards
  const balBox = document.getElementById('ml-balances');
  if (balRes.success && balRes.data?.length) {
    balBox.innerHTML = balRes.data.map(b => {
      const pct = b.annual > 0 ? Math.min(100, Math.round((b.remaining / b.annual) * 100)) : 0;
      return `<div style="background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:16px;cursor:pointer;"
                onclick="mlSelectTypeById(${b.id})">
        <div style="display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px;">
          <div>
            <div style="font-size:12px;font-weight:600;color:#6b7280;text-transform:uppercase;">${b.code || b.name}</div>
            <div style="font-size:11px;color:#9ca3af;">${b.name}</div>
          </div>
          <span style="background:${b.color}20;color:${b.color};font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px;">${b.remaining}d left</span>
        </div>
        <div style="font-size:11px;color:#6b7280;display:flex;gap:12px;margin-bottom:8px;">
          <span>Used: <strong style="color:#111827;">${b.used}</strong></span>
          <span>Total: <strong style="color:#111827;">${b.annual}</strong></span>
        </div>
        <div style="height:5px;background:#f3f4f6;border-radius:4px;">
          <div style="height:5px;border-radius:4px;width:${pct}%;background:${b.color};"></div>
        </div>
      </div>`;
    }).join('');
  } else {
    balBox.innerHTML = '<div style="color:#9ca3af;font-size:13px;">No leave balance data.</div>';
  }

  // Leave type pills
  const typBox = document.getElementById('ml-types');
  typBox.innerHTML = (typesRes.data || []).map(t => `
    <label id="ml-lt-${t.id}" style="display:flex;align-items:center;gap:6px;padding:7px 12px;border:2px solid #e5e7eb;border-radius:8px;cursor:pointer;font-size:13px;"
      onclick="mlSelectType(${t.id}, this)">
      <span style="width:9px;height:9px;border-radius:50%;background:${t.color};flex-shrink:0;"></span>${t.name}
    </label>`).join('');

  // Request types
  const rsel = document.getElementById('ml-req-type');
  rsel.innerHTML = '<option value="">— Select Request Type —</option>' +
    (reqRes.data || []).map(r => `<option value="${r.id}">${r.name}</option>`).join('');

  mlLoadHistory();
}

function mlSelectTypeById(id) {
  const el = document.getElementById('ml-lt-' + id);
  if (el) mlSelectType(id, el);
}

async function mlLoadHistory() {
  const box = document.getElementById('ml-history');
  try {
    const res = await fetch(ML.listUrl + '?my=1').then(r => r.json());
    const rows = res.data?.data || res.data || [];
    if (!rows.length) { box.innerHTML = '<div style="color:#9ca3af;">No leave applications found.</div>'; return; }
    box.innerHTML = '<div style="overflow-y:auto;max-height:360px;">' +
      rows.map(l => `
        <div style="padding:10px 0;border-bottom:1px solid #f3f4f6;">
          <div style="display:flex;justify-content:space-between;align-items:center;">
            <span style="font-size:13px;font-weight:500;color:#111827;">${l.subject || l.leave_type || '—'}</span>
            <span style="font-size:11px;padding:2px 8px;border-radius:12px;background:${l.status==='approved'?'#dcfce7':l.status==='rejected'?'#fee2e2':'#fef9c3'};
              color:${l.status==='approved'?'#166534':l.status==='rejected'?'#991b1b':'#854d0e'};">${l.status}</span>
          </div>
          <div style="font-size:11px;color:#6b7280;margin-top:3px;">${l.from_date||''} → ${l.to_date||''} · ${l.number_of_days||''}d</div>
        </div>`).join('') + '</div>';
  } catch(e) { box.innerHTML = '<div style="color:#9ca3af;">Failed to load history.</div>'; }
}

async function mlSubmit() {
  const btn = document.getElementById('ml-submit');
  btn.disabled = true; btn.textContent = 'Submitting…';
  try {
    const res = await fetch(ML.storeUrl, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': ML.CSRF, 'X-Requested-With': 'XMLHttpRequest' },
      body: JSON.stringify({
        leave_type_id:   document.getElementById('ml-leave-type-id').value || null,
        request_type_id: document.getElementById('ml-req-type').value || null,
        from_date:       document.getElementById('ml-from').value,
        to_date:         document.getElementById('ml-to').value,
        half_day:        document.getElementById('ml-half').checked ? '1' : null,
        reason:          document.getElementById('ml-reason').value,
        self: 1,
      }),
    }).then(r => r.json());
    if (res.success) { mlFmMsg('Leave submitted successfully.', true); mlLoad(); return; }
    mlFmMsg(res.message || 'Failed.', false);
  } catch(e) { mlFmMsg('Request failed.', false); }
  btn.disabled = false; btn.textContent = 'Submit Leave Request';
}

mlLoad();
</script>