{{-- leaves/index — Leave Applications list --}}
{{-- No PHP data passed. Stats + filter dropdowns loaded via API. --}}
<div style="max-width:1100px;padding:0 4px;"
  id="li-root"
  data-stats-url="{{ url('admin/attendance/leave/stats') }}"
  data-types-url="{{ url('admin/attendance/lookup/leave-types') }}"
  data-staff-url="{{ url('admin/attendance/lookup/staff') }}">

    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;">
        <div>
            <h4 style="margin:0 0 4px;font-size:20px;font-weight:600;">Leave Applications</h4>
            <p style="margin:0;font-size:13px;color:#6b7280;">Manage and approve leave requests</p>
        </div>
        <a href="{{ route('admin.attendance.leave.create') }}"
           style="padding:9px 20px;background:#3b82f6;color:#fff;border:none;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;text-decoration:none;display:inline-block;">
           + New Leave
        </a>
    </div>

    {{-- Stat cards — rendered by JS --}}
    <div id="li-stats" style="display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:20px;">
        <div style="background:#f3f4f6;border-radius:8px;padding:14px;text-align:center;color:#9ca3af;font-size:13px;grid-column:span 3;">Loading…</div>
    </div>

    {{-- Filters — dropdowns populated by JS --}}
    <div style="display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px;">
        <select data-dt-filter="status" data-dt-table="leaves-table"
            style="padding:7px 10px;border:1px solid #d1d5db;border-radius:6px;font-size:13px;background:#fff;color:#111827;min-width:160px;">
            <option value="">All Status</option>
            <option value="new">Pending</option>
            <option value="approved">Approved</option>
            <option value="rejected">Rejected</option>
        </select>

        <select id="li-type-filter" data-dt-filter="leave_type_id" data-dt-table="leaves-table"
            style="padding:7px 10px;border:1px solid #d1d5db;border-radius:6px;font-size:13px;background:#fff;color:#111827;min-width:160px;">
            <option value="">All Leave Types</option>
        </select>

        <select id="li-staff-filter" data-dt-filter="staff_id" data-dt-table="leaves-table"
            style="padding:7px 10px;border:1px solid #d1d5db;border-radius:6px;font-size:13px;background:#fff;color:#111827;min-width:160px;">
            <option value="">All Staff</option>
        </select>
    </div>

    <div style="background:#fff;border:1px solid #e5e7eb;border-radius:8px;overflow:hidden;">
        <table id="leaves-table"
               class="table dt-table dt-search dt-perpage dt-checkbox"
               data-route="{{ route('admin.attendance.leave.data') }}"
               data-bulk-route="{{ route('admin.attendance.leave.bulk-action') }}">
            <thead>
                <tr>
                    <th class="dt-sort" data-col="staff_name">Staff</th>
                    <th data-col="subject">Subject</th>
                    <th data-col="leave_type">Type</th>
                    <th data-col="start_date">From</th>
                    <th data-col="end_date">To</th>
                    <th data-col="days">Days</th>
                    <th data-col="status" data-render="leaveStatus">Status</th>
                    <th data-render="leaveActions">Actions</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</div>

<script>
var ATT_LEAVE_ROUTES = {
    'approve-base': '{{ url("admin/attendance/leave") }}',
    'reject-base':  '{{ url("admin/attendance/leave") }}',
};

(function () {
    var root = document.getElementById('li-root');

    // Load stat cards
    fetch(root.dataset.statsUrl)
        .then(function(r){ return r.json(); })
        .then(function(res) {
            if (!res.success) return;
            var d = res.data;
            var cards = [
                ['Pending',  d.new,      '#fef9c3','#854d0e'],
                ['Approved', d.approved, '#dcfce7','#166534'],
                ['Rejected', d.rejected, '#fee2e2','#991b1b'],
            ];
            document.getElementById('li-stats').innerHTML = cards.map(function(s) {
                return '<div style="background:'+s[2]+';border-radius:8px;padding:14px;text-align:center;">'
                    + '<div style="font-size:24px;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('');
        });

    // Load leave type filter options
    fetch(root.dataset.typesUrl)
        .then(function(r){ return r.json(); })
        .then(function(res) {
            var sel = document.getElementById('li-type-filter');
            (res.data || []).forEach(function(t) {
                var o = document.createElement('option');
                o.value = t.id; o.textContent = t.name;
                sel.appendChild(o);
            });
        });

    // Load staff filter options
    fetch(root.dataset.staffUrl)
        .then(function(r){ return r.json(); })
        .then(function(res) {
            var sel = document.getElementById('li-staff-filter');
            (res.data || []).forEach(function(s) {
                var o = document.createElement('option');
                o.value = s.id; o.textContent = s.name;
                sel.appendChild(o);
            });
        });
})();

@verbatim
var attApi = (function () {
    var CSRF = document.querySelector('meta[name="csrf-token"]')?.content || '';
    function post(url, body) {
        return fetch(url, {
            method:  'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF },
            body:    JSON.stringify(body || {}),
        }).then(function (r) { return r; });
    }
    return { post: post };
})();

window.dtRenders = window.dtRenders || {};

window.dtRenders['leaveStatus'] = function(val) {
    var m = {new:['#fef9c3','#854d0e','Pending'],approved:['#dcfce7','#166534','Approved'],rejected:['#fee2e2','#991b1b','Rejected']};
    var c = m[val] || ['#f1f5f9','#475569',val];
    return '<span style="background:'+c[0]+';color:'+c[1]+';padding:2px 10px;border-radius:4px;font-size:12px;font-weight:600;">'+c[2]+'</span>';
};

window.dtRenders['leaveActions'] = function(val, row) {
    var h = '<div style="display:flex;gap:6px;">';
    if (row._edit_url) {
        h += '<a href="' + row._edit_url + '" style="color:#f59e0b;font-size:12px;text-decoration:none;padding:3px 8px;border:1px solid #fde68a;border-radius:4px;">Edit</a>';
    }
    if (row.status === 'new') {
        h += '<button onclick="approveLeave(' + row.id + ')" style="color:#10b981;font-size:12px;padding:3px 8px;border:1px solid #6ee7b7;border-radius:4px;background:none;cursor:pointer;">Approve</button>';
        h += '<button onclick="rejectLeave(' + row.id + ')" style="color:#ef4444;font-size:12px;padding:3px 8px;border:1px solid #fca5a5;border-radius:4px;background:none;cursor:pointer;">Reject</button>';
    }
    if (row._delete_url) {
        h += '<button onclick="dtDelete(\'' + row._delete_url + '\')" style="color:#6b7280;font-size:12px;padding:3px 8px;border:1px solid #e5e7eb;border-radius:4px;background:none;cursor:pointer;">Del</button>';
    }
    h += '</div>';
    return h;
};

function approveLeave(id) {
    if (!confirm('Approve this leave application?')) return;
    attApi.post(ATT_LEAVE_ROUTES['approve-base'] + '/' + id + '/approve')
        .then(function () { location.reload(); });
}

function rejectLeave(id) {
    var reason = prompt('Rejection reason (optional):');
    if (reason === null) return;
    attApi.post(ATT_LEAVE_ROUTES['reject-base'] + '/' + id + '/reject', { reject_reason: reason })
        .then(function () { location.reload(); });
}
@endverbatim
</script>
@include('components.datatable')