@extends('layouts.adminlte')

@section('title', 'EVENT WORKFORCE')
@section('page_title', 'EVENT WORKFORCE MONITORING')

@push('styles')
    <link rel="stylesheet" href="{{ asset('vendor/select2/css/select2.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('vendor/select2/css/select2-bootstrap-5-theme.min.css') }}" />
    <style>
        .ew-card, .ew-panel { border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; box-shadow: 0 8px 24px rgba(15, 23, 42, .04); }
        .ew-panel .card-header { background: #fff; border-bottom: 1px solid #eef2f7; padding: .75rem 1rem; }
        .ew-table { font-size: .82rem; }
        .ew-table td, .ew-table th { white-space: nowrap; vertical-align: middle; padding: .55rem .65rem; }
        .ew-table thead th { color: #475569; font-size: .72rem; text-transform: uppercase; letter-spacing: .02em; background: #f8fafc; }
        .ew-selected { outline: 2px solid #2563eb; outline-offset: -2px; background: #eff6ff !important; }
        .ew-stat { min-width: 120px; border-radius: 8px !important; background: #f8fafc; }
        .ew-tree { max-height: 360px; overflow: auto; }
        .ew-tree ul { margin: 0; padding-left: 1.25rem; border-left: 1px solid #d1d5db; }
        .ew-tree li { margin: .35rem 0; }
        .ew-modal-modern .modal-content { border: 0; border-radius: 12px; overflow: hidden; box-shadow: 0 24px 70px rgba(15, 23, 42, .22); }
        .ew-modal-modern .modal-header { background: #0f172a; color: #fff; border: 0; padding: 14px 18px; }
        .ew-modal-modern .btn-close { filter: invert(1); opacity: .85; }
        .ew-member-panel { border: 1px solid #e5e7eb; border-radius: 10px; background: #f8fafc; padding: 14px; height: 100%; }
        .ew-member-main { border: 1px solid #e5e7eb; border-radius: 10px; padding: 14px; }
        .ew-kpi { border: 1px solid #dbeafe; background: #eff6ff; border-radius: 8px; padding: 10px; }
        .ew-kpi .value { font-size: 1.05rem; font-weight: 700; color: #1d4ed8; }
        .ew-form-label { font-size: .72rem; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: .02em; }
        .ew-member-picked { min-height: 54px; border-radius: 8px; background: #fff; border: 1px dashed #cbd5e1; padding: 10px; }
        .btn-xs { --bs-btn-padding-y: .12rem; --bs-btn-padding-x: .35rem; --bs-btn-font-size: .72rem; }
        .ew-actions { display: flex; gap: .35rem; justify-content: flex-end; }
        .ew-title-link { font-weight: 700; text-decoration: none; }
    </style>
@endpush

@section('content')
    <div class="row g-3">
        <div class="col-12">
            <div class="ew-card p-3 d-flex justify-content-between align-items-center flex-wrap gap-2">
                <div>
                    <div class="fw-semibold">Event Shutdown / Workforce</div>
                    <div class="small text-muted">Monitoring group per area, leader, member bertahap, status progress.</div>
                </div>
                <button class="btn btn-primary btn-sm" id="btnEventAdd"><i class="fas fa-plus me-1"></i>Event</button>
            </div>
        </div>
        <div class="col-12">
            <div class="ew-card p-3">
                <div class="d-flex flex-wrap gap-2 mb-3" id="summaryCards"></div>
                <div class="fw-semibold mb-2">Drilldown</div>
                <div class="ew-tree small" id="hierarchyPanel">Pilih event.</div>
            </div>
        </div>
        <div class="col-lg-5">
            <div class="card ew-panel">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h3 class="card-title m-0">Event</h3>
                    <span class="badge text-bg-secondary" id="eventCount">0</span>
                </div>
                <div class="table-responsive">
                    <table class="table table-sm table-hover ew-table mb-0">
                        <thead><tr><th>Event</th><th>Client</th><th>Periode</th><th>Progress</th><th>Aksi</th></tr></thead>
                        <tbody id="eventRows"></tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="col-lg-7">
            <div class="card mb-3 ew-panel">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h3 class="card-title m-0">Group Area</h3>
                    <button class="btn btn-outline-primary btn-sm" id="btnGroupAdd"><i class="fas fa-plus me-1"></i>Group</button>
                </div>
                <div class="table-responsive">
                    <table class="table table-sm table-hover ew-table mb-0">
                        <thead><tr><th>Scope</th><th>Area</th><th>Leader</th><th>Backup</th><th>Periode</th><th>Member/Quota</th><th>Cost</th><th>Aksi</th></tr></thead>
                        <tbody id="groupRows"><tr><td colspan="8" class="text-center text-muted">Pilih event.</td></tr></tbody>
                    </table>
                </div>
            </div>
            <div class="card ew-panel">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h3 class="card-title m-0">Member Group</h3>
                    <button class="btn btn-outline-primary btn-sm" id="btnMemberAdd"><i class="fas fa-plus me-1"></i>Member</button>
                </div>
                <div class="table-responsive">
                    <table class="table table-sm table-hover ew-table mb-0">
                        <thead><tr><th>Karyawan</th><th>Jabatan</th><th>Start-End</th><th>Rate/Day</th><th>Cost Est.</th><th>Status</th><th>Aksi</th></tr></thead>
                        <tbody id="memberRows"><tr><td colspan="7" class="text-center text-muted">Pilih group.</td></tr></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="eventModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered"><div class="modal-content">
            <div class="modal-header"><h5 class="modal-title">Event</h5><button class="btn-close" data-bs-dismiss="modal"></button></div>
            <form id="eventForm"><div class="modal-body row g-3">
                <input type="hidden" id="eventId">
                <div class="col-md-4"><label class="form-label">Code</label><input class="form-control" id="eventCode" required></div>
                <div class="col-md-8"><label class="form-label">Nama Event</label><input class="form-control" id="eventName" required></div>
                <div class="col-md-6"><label class="form-label">Client</label><select class="form-select" id="eventClientId" required></select></div>
                <div class="col-md-6"><label class="form-label">Sub Client</label><select class="form-select" id="eventSubClientId"></select></div>
                <div class="col-md-3"><label class="form-label">Type</label><input class="form-control" id="eventType" value="shutdown"></div>
                <div class="col-md-3"><label class="form-label">Start</label><input type="date" class="form-control" id="eventStart" required></div>
                <div class="col-md-3"><label class="form-label">End</label><input type="date" class="form-control" id="eventEnd" required></div>
                <div class="col-md-3"><label class="form-label">Status</label><select class="form-select" id="eventStatus"><option>draft</option><option>progress</option><option>done</option><option>cancelled</option></select></div>
                <div class="col-12"><label class="form-label">Notes</label><textarea class="form-control" id="eventNotes" rows="2"></textarea></div>
            </div><div class="modal-footer"><button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button><button class="btn btn-primary">Save</button></div></form>
        </div></div>
    </div>

    <div class="modal fade" id="groupModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered"><div class="modal-content">
            <div class="modal-header"><h5 class="modal-title">Group Area</h5><button class="btn-close" data-bs-dismiss="modal"></button></div>
            <form id="groupForm"><div class="modal-body row g-3">
                <input type="hidden" id="groupId">
                <div class="col-md-5"><label class="form-label">Scope Name</label><input class="form-control" id="groupScopeName" required></div>
                <div class="col-md-5"><label class="form-label">Area</label><select class="form-select" id="groupAreaId"></select></div>
                <div class="col-md-2"><label class="form-label">Quota</label><input type="number" min="0" class="form-control" id="groupQuota" value="0"></div>
                <div class="col-md-4"><label class="form-label">Leader Karyawan</label><select class="form-select" id="groupLeaderId"></select></div>
                <div class="col-md-4"><label class="form-label">Leader Manual</label><input class="form-control" id="groupLeaderName"></div>
                <div class="col-md-4"><label class="form-label">Leader Contact</label><input class="form-control" id="groupLeaderPhone"></div>
                <div class="col-md-4"><label class="form-label">Backup Karyawan</label><select class="form-select" id="groupBackupId"></select></div>
                <div class="col-md-4"><label class="form-label">Backup Contact</label><input class="form-control" id="groupBackupPhone"></div>
                <div class="col-md-4"><label class="form-label">Leader Jabatan</label><input class="form-control" id="groupLeaderJabatan"></div>
                <div class="col-md-3"><label class="form-label">Start</label><input type="date" class="form-control" id="groupStart" required></div>
                <div class="col-md-3"><label class="form-label">End</label><input type="date" class="form-control" id="groupEnd" required></div>
                <div class="col-md-2"><label class="form-label">Status</label><select class="form-select" id="groupStatus"><option>planned</option><option>progress</option><option>done</option></select></div>
                <div class="col-12"><label class="form-label">Scope Description</label><textarea class="form-control" id="groupScopeDescription" rows="2"></textarea></div>
            </div><div class="modal-footer"><button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button><button class="btn btn-primary">Save</button></div></form>
        </div></div>
    </div>

    <div class="modal fade ew-modal-modern" id="memberModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered"><div class="modal-content">
            <div class="modal-header"><h5 class="modal-title">Workforce Member</h5><button class="btn-close" data-bs-dismiss="modal"></button></div>
            <form id="memberForm"><div class="modal-body">
                <input type="hidden" id="memberId">
                <div class="row g-3">
                    <div class="col-lg-4">
                        <div class="ew-member-panel">
                            <label class="ew-form-label">Karyawan</label>
                            <select class="form-select mb-3" id="memberKaryawanId" required></select>
                            <div class="ew-member-picked" id="memberPickedInfo">Pilih karyawan.</div>
                            <div class="row g-2 mt-2">
                                <div class="col-6"><div class="ew-kpi"><div class="small text-muted">Rate/Day</div><div class="value" id="memberRatePreview">0</div></div></div>
                                <div class="col-6"><div class="ew-kpi"><div class="small text-muted">Est. Cost</div><div class="value" id="memberCostPreview">0</div></div></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-8">
                        <div class="ew-member-main row g-3">
                            <div class="col-md-6"><label class="ew-form-label">Jabatan Snapshot</label><select class="form-select" id="memberJabatanId"></select></div>
                            <div class="col-md-6"><label class="ew-form-label">Rate/Day</label><input type="number" min="0" class="form-control" id="memberRate" value="0"></div>
                            <div class="col-md-4"><label class="ew-form-label">Start Work</label><input type="date" class="form-control" id="memberStart" required></div>
                            <div class="col-md-4"><label class="ew-form-label">End Work</label><input type="date" class="form-control" id="memberEnd"></div>
                            <div class="col-md-4"><label class="ew-form-label">Status</label><select class="form-select" id="memberStatus"><option>scheduled</option><option>active</option><option>done</option><option>removed</option></select></div>
                            <div class="col-md-4"><label class="ew-form-label">Progress %</label><input type="number" min="0" max="100" class="form-control" id="memberProgress" value="0"></div>
                            <div class="col-md-8"><label class="ew-form-label">Notes</label><textarea class="form-control" id="memberNotes" rows="2"></textarea></div>
                        </div>
                    </div>
                </div>
            </div><div class="modal-footer"><button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button><button class="btn btn-primary">Save</button></div></form>
        </div></div>
    </div>
@endsection

@push('scripts')
<script src="{{ asset('vendor/select2/js/select2.min.js') }}"></script>
<script>
$(function () {
    const csrf = document.querySelector('meta[name="csrf-token"]')?.content;
    if (csrf) $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': csrf } });
    const eventModal = new bootstrap.Modal('#eventModal');
    const groupModal = new bootstrap.Modal('#groupModal');
    const memberModal = new bootstrap.Modal('#memberModal');
    let refs = { clients: [], areas: [], employees: [], jabatans: [] };
    let events = [], groups = [], members = [], selectedEventId = 0, selectedGroupId = 0;
    const e = (v) => String(v ?? '').replace(/[&<>"']/g, (c) => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
    const opts = (rows, text, empty = '-', disabledIds = []) => '<option value="">' + empty + '</option>' + rows.map((r) => `<option value="${r.id}" ${disabledIds.includes(Number(r.id)) ? 'disabled' : ''}>${e(text(r))}</option>`).join('');
    const post = (url, data, method = 'POST') => $.ajax({ url, type: method, data });
    const selectedEvent = () => events.find((row) => Number(row.id) === Number(selectedEventId)) || null;
    const selectedGroup = () => groups.find((row) => Number(row.id) === Number(selectedGroupId)) || null;
    const areaOwnerClientId = () => selectedEvent()?.sub_client_id || selectedEvent()?.client_id || 0;

    function fillRefs() {
        $('#eventClientId').html(opts(refs.clients.filter((r) => !r.parent_client_id), (r) => `${r.code || '-'} - ${r.name || '-'}`, '- Pilih Client -'));
        fillSubClientOptions();
        fillAreaOptions();
        $('#groupLeaderId,#groupBackupId').html(opts(refs.employees, (r) => `${r.employee_code || '-'} - ${r.full_name || '-'}`, '- Karyawan -'));
        fillMemberEmployeeOptions();
        $('#memberJabatanId').html(opts(refs.jabatans, (r) => `${r.code || '-'} - ${r.name || '-'}`, '- Jabatan -'));
        $('#eventClientId,#eventSubClientId').select2({ theme: 'bootstrap-5', width: '100%', dropdownParent: $('#eventModal') });
        $('#groupAreaId,#groupLeaderId,#groupBackupId').select2({ theme: 'bootstrap-5', width: '100%', dropdownParent: $('#groupModal') });
        $('#memberKaryawanId,#memberJabatanId').select2({ theme: 'bootstrap-5', width: '100%', dropdownParent: $('#memberModal') });
    }
    function fillSubClientOptions(selectedId = '') {
        const parentId = $('#eventClientId').val() || '';
        $('#eventSubClientId').html(opts(refs.clients.filter((r) => String(r.parent_client_id || '') === String(parentId)), (r) => `${r.code || '-'} - ${r.name || '-'}`, '- Sub Client -')).val(selectedId || '').trigger('change.select2');
    }
    function fillAreaOptions(selectedId = '') {
        const ownerId = areaOwnerClientId();
        const areaRows = ownerId ? refs.areas.filter((r) => Number(r.client_id || 0) === Number(ownerId)) : refs.areas;
        $('#groupAreaId').html(opts(areaRows, (r) => r.label || `${r.code || '-'} - ${r.name || '-'}`, '- Area -')).val(selectedId || '').trigger('change.select2');
    }
    function fillMemberEmployeeOptions(selectedId = '') {
        const disabledIds = members.filter((m) => Number(m.karyawan_id) !== Number(selectedId || 0)).map((m) => Number(m.karyawan_id));
        $('#memberKaryawanId').html(opts(refs.employees, (r) => `${r.employee_code || '-'} - ${r.full_name || '-'}`, '- Karyawan -', disabledIds)).val(selectedId || '').trigger('change.select2');
    }
    function memberDays() {
        const start = $('#memberStart').val();
        if (!start) return 1;
        const end = $('#memberEnd').val() || new Date().toISOString().slice(0, 10);
        return Math.max(1, Math.floor((new Date(end) - new Date(start)) / 86400000) + 1 || 1);
    }
    function refreshMemberPreview() {
        const row = refs.employees.find((r) => Number(r.id) === Number($('#memberKaryawanId').val()));
        $('#memberPickedInfo').html(row ? `<strong>${e(row.full_name || '-')}</strong><div class="small text-muted">${e(row.employee_code || '-')} | ${e(row.phone || '-')}</div>` : 'Pilih karyawan.');
        const rate = Number($('#memberRate').val() || 0);
        $('#memberRatePreview').text(rate.toLocaleString('id-ID'));
        $('#memberCostPreview').text((rate * memberDays()).toLocaleString('id-ID'));
    }

    function renderSummary() {
        const ev = selectedEvent();
        const allMembers = selectedGroupId ? members : [];
        const base = [
            ['Registered Worker', ev?.member_count || 0, 'secondary'],
            ['Active', ev?.active_count || 0, 'primary'],
            ['Belum Mulai', allMembers.filter((m) => m.status === 'scheduled').length, 'warning'],
            ['Done', ev?.done_count || 0, 'success'],
            ['Removed', allMembers.filter((m) => m.status === 'removed').length, 'danger'],
        ];
        $('#summaryCards').html(base.map(([label, value, color]) => `<div class="ew-stat border rounded p-2"><div class="small text-muted">${e(label)}</div><div class="fs-5 fw-semibold text-${color}">${e(value)}</div></div>`).join(''));
    }

    function renderHierarchy() {
        const ev = selectedEvent();
        if (!ev) { $('#hierarchyPanel').text('Pilih event.'); renderSummary(); return; }
        const groupItems = groups.map((g) => {
            const workerItems = (Number(g.id) === Number(selectedGroupId) ? members : []).map((m) => `<li>${e(m.employee_label)} <span class="badge text-bg-light">${e(m.status)}</span></li>`).join('');
            return `<li><span class="badge text-bg-info">AREA</span> ${e(g.area_label)}<ul><li><span class="badge text-bg-dark">GROUP</span> ${e(g.scope_name)}<ul>${workerItems || '<li class="text-muted">Klik group untuk lihat workforce.</li>'}</ul></li></ul></li>`;
        }).join('');
        $('#hierarchyPanel').html(`<ul><li><span class="badge text-bg-primary">CLIENT</span> ${e(ev.client_label)}<ul><li><span class="badge text-bg-secondary">SCOPE</span> ${e(ev.sub_client_label)}<ul>${groupItems || '<li class="text-muted">Belum ada area/group.</li>'}</ul></li></ul></li></ul>`);
        renderSummary();
    }

    function loadEvents() {
        $.getJSON('{{ route('event_workforce.data') }}').done((r) => {
            events = r.data || [];
            $('#eventCount').text(events.length);
            $('#eventRows').html(events.map((row) => `
                <tr class="${row.id === selectedEventId ? 'ew-selected' : ''}">
                    <td><button class="btn btn-link btn-sm p-0 ew-event-pick" data-id="${row.id}">${e(row.code)} - ${e(row.name)}</button><div><span class="badge text-bg-info">${e(row.status)}</span></div></td>
                    <td>${e(row.client_label)}<div class="small text-muted">${e(row.sub_client_label)}</div></td>
                    <td>${e(row.start_date)} s/d ${e(row.end_date)}</td>
                    <td>${row.active_count}/${row.member_count} aktif<br>${row.done_count} selesai</td>
                    <td><div class="ew-actions"><button class="btn btn-xs btn-outline-primary ew-event-edit" data-id="${row.id}">Edit</button><button class="btn btn-xs btn-outline-danger ew-event-del" data-id="${row.id}">Del</button></div></td>
                </tr>`).join('') || '<tr><td colspan="5" class="text-center text-muted">Belum ada event.</td></tr>');
            renderHierarchy();
        });
    }

    function loadGroups() {
        if (!selectedEventId) return;
        $.getJSON('{{ route('event_workforce.groups.data') }}', { event_id: selectedEventId }).done((r) => {
            groups = r.data || [];
            $('#groupRows').html(groups.map((row) => `
                <tr class="${row.id === selectedGroupId ? 'ew-selected' : ''}">
                    <td><button class="btn btn-link btn-sm p-0 ew-group-pick" data-id="${row.id}">${e(row.scope_name)}</button><div><span class="badge text-bg-secondary">${e(row.status)}</span></div></td>
                    <td>${e(row.area_label)}</td><td>${e(row.leader_label)}<div class="small text-muted">${e(row.leader_phone || '')}</div></td>
                    <td>${e(row.backup_label)}<div class="small text-muted">${e(row.backup_phone || '')}</div></td>
                    <td>${e(row.start_date)} s/d ${e(row.end_date)}</td><td>${row.member_count}/${row.quota || 0}</td><td>${Number(row.pay_cost || 0).toLocaleString('id-ID')}</td>
                    <td><div class="ew-actions"><button class="btn btn-xs btn-outline-primary ew-group-edit" data-id="${row.id}">Edit</button><button class="btn btn-xs btn-outline-danger ew-group-del" data-id="${row.id}">Del</button></div></td>
                </tr>`).join('') || '<tr><td colspan="8" class="text-center text-muted">Belum ada group.</td></tr>');
            renderHierarchy();
        });
    }

    function loadMembers() {
        if (!selectedGroupId) return;
        $.getJSON('{{ route('event_workforce.members.data') }}', { group_id: selectedGroupId }).done((r) => {
            members = r.data || [];
            fillMemberEmployeeOptions();
            $('#memberRows').html(members.map((row) => `
                <tr><td>${e(row.employee_label)}</td><td>${e(row.jabatan_label)}</td><td>${e(row.start_work)} s/d ${e(row.end_work || '-')}</td>
                <td>${Number(row.rate_amount || 0).toLocaleString('id-ID')}</td><td>${Number(row.pay_cost || 0).toLocaleString('id-ID')}</td>
                <td><span class="badge text-bg-${row.status === 'done' ? 'success' : (row.status === 'active' ? 'primary' : 'secondary')}">${e(row.status)}</span></td>
                <td><div class="ew-actions"><button class="btn btn-xs btn-outline-primary ew-member-edit" data-id="${row.id}">Edit</button><button class="btn btn-xs btn-outline-danger ew-member-del" data-id="${row.id}">Del</button></div></td></tr>`).join('') || '<tr><td colspan="7" class="text-center text-muted">Belum ada member.</td></tr>');
            renderHierarchy();
        });
    }

    $('#btnEventAdd').on('click', () => { $('#eventForm')[0].reset(); $('#eventId').val(''); $('#eventType').val('shutdown'); $('#eventClientId,#eventSubClientId').val('').trigger('change'); eventModal.show(); });
    $('#btnGroupAdd').on('click', () => { if (!selectedEventId) return Swal.fire('Warning', 'Pilih event dulu', 'warning'); $('#groupForm')[0].reset(); $('#groupId').val(''); $('#groupQuota').val(0); fillAreaOptions(); $('#groupLeaderId,#groupBackupId').val('').trigger('change'); groupModal.show(); });
    $('#btnMemberAdd').on('click', () => { if (!selectedGroupId) return Swal.fire('Warning', 'Pilih group dulu', 'warning'); const group = selectedGroup(); $('#memberForm')[0].reset(); $('#memberId').val(''); fillMemberEmployeeOptions(); $('#memberJabatanId').val('').trigger('change'); $('#memberRate,#memberProgress').val(0); $('#memberStart').val(group?.start_date || ''); $('#memberEnd').val(''); refreshMemberPreview(); memberModal.show(); });

    $(document).on('click', '.ew-event-pick', function () { selectedEventId = Number(this.dataset.id); selectedGroupId = 0; members = []; fillAreaOptions(); loadEvents(); loadGroups(); $('#memberRows').html('<tr><td colspan="7" class="text-center text-muted">Pilih group.</td></tr>'); renderHierarchy(); });
    $(document).on('click', '.ew-group-pick', function () { selectedGroupId = Number(this.dataset.id); loadGroups(); loadMembers(); });
    $('#eventClientId').on('change', () => fillSubClientOptions());
    $('#groupLeaderId').on('change', function () {
        const row = refs.employees.find((r) => Number(r.id) === Number(this.value));
        if (row?.phone) $('#groupLeaderPhone').val(row.phone);
    });
    $('#groupBackupId').on('change', function () {
        const row = refs.employees.find((r) => Number(r.id) === Number(this.value));
        if (row?.phone) $('#groupBackupPhone').val(row.phone);
    });
    $('#memberKaryawanId').on('change', function () {
        const row = refs.employees.find((r) => Number(r.id) === Number(this.value));
        if (row?.jabatan_id) $('#memberJabatanId').val(row.jabatan_id).trigger('change');
        $('#memberRate').val(Number(row?.base_salary || 0));
        refreshMemberPreview();
    });
    $('#memberRate,#memberStart,#memberEnd').on('input change', refreshMemberPreview);

    $(document).on('click', '.ew-event-edit', function () {
        const r = events.find((x) => x.id === Number(this.dataset.id)); if (!r) return;
        $('#eventId').val(r.id); $('#eventCode').val(r.code); $('#eventName').val(r.name); $('#eventClientId').val(r.client_id).trigger('change'); fillSubClientOptions(r.sub_client_id || ''); $('#eventType').val(r.event_type); $('#eventStart').val(r.start_date); $('#eventEnd').val(r.end_date); $('#eventStatus').val(r.status); $('#eventNotes').val(r.notes || ''); eventModal.show();
    });
    $(document).on('click', '.ew-group-edit', function () {
        const r = groups.find((x) => x.id === Number(this.dataset.id)); if (!r) return;
        $('#groupId').val(r.id); $('#groupScopeName').val(r.scope_name); $('#groupQuota').val(r.quota || 0); fillAreaOptions(r.area_id || ''); $('#groupLeaderId').val(r.leader_karyawan_id || '').trigger('change'); $('#groupBackupId').val(r.backup_karyawan_id || '').trigger('change'); $('#groupLeaderName').val(r.leader_name || ''); $('#groupLeaderPhone').val(r.leader_phone || ''); $('#groupBackupPhone').val(r.backup_phone || ''); $('#groupLeaderJabatan').val(r.leader_jabatan || ''); $('#groupStart').val(r.start_date); $('#groupEnd').val(r.end_date); $('#groupStatus').val(r.status); $('#groupScopeDescription').val(r.scope_description || ''); groupModal.show();
    });
    $(document).on('click', '.ew-member-edit', function () {
        const r = members.find((x) => x.id === Number(this.dataset.id)); if (!r) return;
        $('#memberId').val(r.id); fillMemberEmployeeOptions(r.karyawan_id); $('#memberJabatanId').val(r.jabatan_id || '').trigger('change'); $('#memberRate').val(r.rate_amount || 0); $('#memberStart').val(r.start_work); $('#memberEnd').val(r.end_work || ''); $('#memberStatus').val(r.status); $('#memberProgress').val(r.progress_percent); $('#memberNotes').val(r.notes || ''); refreshMemberPreview(); memberModal.show();
    });

    $('#eventForm').on('submit', function (ev) {
        ev.preventDefault(); const id = $('#eventId').val();
        post(id ? `{{ url('/event-workforce') }}/${id}` : '{{ route('event_workforce.store') }}', {
            client_id: $('#eventClientId').val(), sub_client_id: $('#eventSubClientId').val(), code: $('#eventCode').val(), name: $('#eventName').val(), event_type: $('#eventType').val(), start_date: $('#eventStart').val(), end_date: $('#eventEnd').val(), status: $('#eventStatus').val(), notes: $('#eventNotes').val(), is_active: 1
        }, id ? 'PUT' : 'POST').done(() => { eventModal.hide(); loadEvents(); }).fail((x) => Swal.fire('Error', x.responseJSON?.message || 'Gagal save event', 'error'));
    });
    $('#groupForm').on('submit', function (ev) {
        ev.preventDefault(); const id = $('#groupId').val();
        post(id ? `{{ url('/event-workforce/groups') }}/${id}` : '{{ route('event_workforce.groups.store') }}', {
            event_id: selectedEventId, area_id: $('#groupAreaId').val(), quota: $('#groupQuota').val(), leader_karyawan_id: $('#groupLeaderId').val(), backup_karyawan_id: $('#groupBackupId').val(), scope_name: $('#groupScopeName').val(), scope_description: $('#groupScopeDescription').val(), leader_name: $('#groupLeaderName').val(), leader_phone: $('#groupLeaderPhone').val(), backup_phone: $('#groupBackupPhone').val(), leader_jabatan: $('#groupLeaderJabatan').val(), start_date: $('#groupStart').val(), end_date: $('#groupEnd').val(), status: $('#groupStatus').val()
        }, id ? 'PUT' : 'POST').done(() => { groupModal.hide(); loadGroups(); loadEvents(); }).fail((x) => Swal.fire('Error', x.responseJSON?.message || 'Gagal save group', 'error'));
    });
    $('#memberForm').on('submit', function (ev) {
        ev.preventDefault(); const id = $('#memberId').val();
        post(id ? `{{ url('/event-workforce/members') }}/${id}` : '{{ route('event_workforce.members.store') }}', {
            group_id: selectedGroupId, karyawan_id: $('#memberKaryawanId').val(), jabatan_id: $('#memberJabatanId').val(), rate_amount: $('#memberRate').val(), start_work: $('#memberStart').val(), end_work: $('#memberEnd').val(), status: $('#memberStatus').val(), progress_percent: $('#memberProgress').val(), notes: $('#memberNotes').val()
        }, id ? 'PUT' : 'POST').done(() => { memberModal.hide(); loadMembers(); loadGroups(); loadEvents(); }).fail((x) => Swal.fire('Error', x.responseJSON?.message || 'Gagal save member', 'error'));
    });

    $(document).on('click', '.ew-event-del,.ew-group-del,.ew-member-del', function () {
        const cls = this.className, id = this.dataset.id;
        const url = cls.includes('event') ? `{{ url('/event-workforce') }}/${id}` : (cls.includes('group') ? `{{ url('/event-workforce/groups') }}/${id}` : `{{ url('/event-workforce/members') }}/${id}`);
        Swal.fire({ title: 'Hapus data?', icon: 'warning', showCancelButton: true }).then((r) => { if (!r.isConfirmed) return; $.ajax({ url, type: 'DELETE' }).done(() => { loadEvents(); if (selectedEventId) loadGroups(); if (selectedGroupId) loadMembers(); }); });
    });

    $.getJSON('{{ route('event_workforce.refs') }}').done((r) => { refs = r.data || refs; fillRefs(); loadEvents(); });
});
</script>
@endpush