@extends('layouts.adminlte')

@section('title', 'MASTER APPROVAL')
@section('page_title', 'MASTER APPROVAL')

@push('styles')
<link rel="stylesheet" href="{{ asset('vendor/datatables/css/dataTables.bootstrap5.min.css') }}" />
<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') }}" />
@endpush

@section('content')
<div class="row g-3">
    <div class="col-lg-6">
        <div class="card h-100">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h3 class="card-title m-0">Flow Approval</h3>
                <div class="d-flex gap-2">
                    <button class="btn btn-outline-warning btn-sm" id="btnReplaceApprover">Replace Approver</button>
                    <button class="btn btn-primary btn-sm" id="btnAddFlow">Tambah Flow</button>
                </div>
            </div>
            <div class="card-body">
                <table id="flowTable" class="table table-striped table-hover w-100">
                    <thead>
                        <tr>
                            <th>No.</th>
                            <th>Code</th>
                            <th>Flow</th>
                            <th>Modul</th>
                            <th>Step</th>
                            <th>Approver</th>
                            <th>Aksi</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="col-lg-6">
        <div class="card h-100">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h3 class="card-title m-0">User Approval (Step)</h3>
                <button class="btn btn-outline-primary btn-sm" id="btnAddStep" disabled>Tambah Step</button>
            </div>
            <div class="card-body">
                <div class="text-muted small mb-2" id="stepFlowLabel">Pilih flow dulu.</div>
                <table id="stepTable" class="table table-bordered table-hover w-100">
                    <thead>
                        <tr>
                            <th>Order</th>
                            <th>Step</th>
                            <th>Approver</th>
                            <th>Aksi</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="flowModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="flowModalTitle">Tambah Flow</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <form id="flowForm">
        <div class="modal-body">
            <input type="hidden" id="flowId" />
            <div class="mb-2"><label class="form-label">Code</label><input id="flowCode" class="form-control" required /></div>
            <div class="mb-2"><label class="form-label">Nama Flow</label><input id="flowName" class="form-control" required /></div>
            <div class="mb-2"><label class="form-label">Modul</label>
	                @php
                        $approvalModules = (array) config('approval_modules.modules', []);
                        $approvalGeneralLabel = (string) config('approval_modules.general_label', 'General');
                    @endphp
	                <select id="flowModule" class="form-select">
	                    <option value="">- {{ $approvalGeneralLabel }} -</option>
                        @foreach($approvalModules as $moduleKey => $moduleLabel)
                            <option value="{{ $moduleKey }}">{{ $moduleLabel }}</option>
                        @endforeach
	                </select>
	            </div>
            <div class="mb-2"><label class="form-label">Deskripsi</label><textarea id="flowDescription" class="form-control" rows="2"></textarea></div>
            <div class="form-check form-switch"><input class="form-check-input" type="checkbox" id="flowActive" checked><label class="form-check-label">Active</label></div>
        </div>
        <div class="modal-footer">
            <button class="btn btn-outline-secondary" type="button" data-bs-dismiss="modal">Close</button>
            <button class="btn btn-primary" type="submit">Save</button>
        </div>
      </form>
    </div>
  </div>
</div>

<div class="modal fade" id="stepModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="stepModalTitle">Tambah Step</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <form id="stepForm">
        <div class="modal-body">
            <input type="hidden" id="stepId" />
            <div class="mb-2"><label class="form-label">Urutan</label><input id="stepOrder" type="number" min="1" class="form-control" required /></div>
            <div class="mb-2"><label class="form-label">Nama Step</label><input id="stepName" class="form-control" /></div>
            <div class="mb-2">
                <label class="form-label">Mode Approver</label>
                <select id="stepApproverType" class="form-select" required>
                    <option value="personal">Personal</option>
                    <option value="department">Departemen</option>
                </select>
            </div>
            <div class="mb-2" id="stepApproverUserWrap">
                <label class="form-label">Approver Karyawan / User</label>
                <select id="stepApprover" class="form-select"></select>
                <div class="form-text">
                    Pilih dari Master Karyawan atau User Laravel. Untuk Android, karyawan bisa approve langsung memakai akun mobile/finger yang sama.
                </div>
            </div>
            <div class="mb-2 d-none" id="stepApproverDeptWrap">
                <label class="form-label">Approver Departemen</label>
                <select id="stepApproverDepartment" class="form-select"></select>
            </div>
            <div class="form-check form-switch"><input class="form-check-input" type="checkbox" id="stepActive" checked><label class="form-check-label">Active</label></div>
        </div>
        <div class="modal-footer">
            <button class="btn btn-outline-secondary" type="button" data-bs-dismiss="modal">Close</button>
            <button class="btn btn-primary" type="submit">Save</button>
        </div>
      </form>
    </div>
  </div>
</div>

<div class="modal fade" id="replaceApproverModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Replace Approver</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <form id="replaceApproverForm">
        <div class="modal-body">
            <div class="alert alert-warning py-2 small mb-3">
                Pakai fitur ini saat approver resign atau diganti. Sistem akan memindahkan approver lama ke approver baru pada flow master dan/atau pending request.
            </div>
            <div class="mb-3">
                <label class="form-label">Approver Lama</label>
                <select id="replaceSourceApprover" class="form-select"></select>
            </div>
            <div class="mb-3">
                <label class="form-label">Approver Baru</label>
                <select id="replaceTargetApprover" class="form-select"></select>
            </div>
            <div class="d-flex flex-column gap-2">
                <div class="form-check form-switch">
                    <input class="form-check-input" type="checkbox" id="replaceInFlows" checked>
                    <label class="form-check-label" for="replaceInFlows">Update Master Flow Approval</label>
                </div>
                <div class="form-check form-switch">
                    <input class="form-check-input" type="checkbox" id="replaceInPending" checked>
                    <label class="form-check-label" for="replaceInPending">Update Pending Request Approval</label>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn btn-outline-secondary" type="button" data-bs-dismiss="modal">Close</button>
            <button class="btn btn-warning" type="submit">Replace Sekarang</button>
        </div>
      </form>
    </div>
  </div>
</div>
@endsection

@push('scripts')
<script src="{{ asset('vendor/datatables/js/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('vendor/datatables/js/dataTables.bootstrap5.min.js') }}"></script>
<script src="{{ asset('vendor/select2/js/select2.min.js') }}"></script>
<script>
$(function(){
    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
    if (csrfToken) $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': csrfToken } });

    const flowModal = new bootstrap.Modal(document.getElementById('flowModal'));
    const stepModal = new bootstrap.Modal(document.getElementById('stepModal'));
    const stepModalEl = document.getElementById('stepModal');
    const replaceApproverModal = new bootstrap.Modal(document.getElementById('replaceApproverModal'));
    const replaceApproverModalEl = document.getElementById('replaceApproverModal');

    let flowRows = []; let stepRows = []; let users = []; let departments = []; let selectedFlow = null;

    const approvalModuleLabels = @json((array) config('approval_modules.modules', []));
    const approvalGeneralLabel = @json((string) config('approval_modules.general_label', 'General'));
    const esc = (value) => $('<div>').text(value ?? '').html();

    const titleizeKey = (key) => {
        const s = (key || '').toString().trim().replace(/[_-]+/g, ' ');
        if (!s) return '';
        return s.replace(/\b\w/g, (c) => c.toUpperCase());
    };

    const moduleLabel = (key) => {
        const k = (key || '').toString().trim();
        if (!k) return `<span class="text-muted">${approvalGeneralLabel.toLowerCase()}</span>`;
        const label = approvalModuleLabels?.[k] || titleizeKey(k);
        return label || k;
    };

    const rebuildFlowModuleOptions = () => {
        // Baseline dari config, lalu merge dari flowRows (supaya otomatis muncul kalau ada module_key baru di DB).
        const merged = Object.assign({}, approvalModuleLabels || {});
        (flowRows || []).forEach((r) => {
            const k = (r?.module_key || '').toString().trim();
            if (!k) return;
            if (!merged[k]) merged[k] = titleizeKey(k) || k;
        });

        const opts = [`<option value="">- ${approvalGeneralLabel} -</option>`]
            .concat(
                Object.keys(merged)
                    .sort((a, b) => (merged[a] || a).localeCompare(merged[b] || b))
                    .map((k) => `<option value="${k}">${merged[k] || k}</option>`)
            );

        const current = ($('#flowModule').val() || '').toString();
        $('#flowModule').html(opts.join(''));
        $('#flowModule').val(current);
    };

    const flowTable = $('#flowTable').DataTable({
        data: [],
        columns: [
            {data:null, render:(d,t,r,m)=>m.row+1, orderable:false, searchable:false},
            {data:'code'},
            {data:'name'},
            {data:'module_key', render:v=>moduleLabel(v)},
            {data:'step_count'},
            {data:'approver_summary', orderable:false, render:(rows)=>{
                if (!Array.isArray(rows) || rows.length === 0) return '<span class="text-muted">-</span>';
                return rows.map(item => `<div class="small mb-1">${esc(item)}</div>`).join('');
            }},
            {data:null, orderable:false, render:(d,t,r)=>`
                <button class="btn btn-xs btn-outline-success btn-select" data-id="${r.id}">Pilih</button>
                <button class="btn btn-xs btn-outline-secondary btn-copy" data-id="${r.id}">Copy</button>
                <button class="btn btn-xs btn-outline-primary btn-edit" data-id="${r.id}">Edit</button>
                <button class="btn btn-xs btn-outline-danger btn-delete" data-id="${r.id}">Hapus</button>`}
        ]
    });

    const stepTable = $('#stepTable').DataTable({
        data: [],
        searching:false,
        paging:false,
        info:false,
        columns: [
            {data:'step_order'},
            {data:'step_name', render:v=>v||'-'},
            {data:null, render:r=>{
                if ((r.approver_type || 'personal') === 'department') {
                    return `<span class="badge bg-info text-dark">Departemen</span><br><strong>${r.approver_department || '-'}</strong>`;
                }
                const employee = r.approver_employee ? `<div class="small text-success fw-semibold">${esc(r.approver_employee)}</div>` : '';
                return `${employee}<strong>${esc(r.approver_name||'-')}</strong><br><small class="text-muted">${esc(r.approver_email||'')}</small>`;
            }},
            {data:null, orderable:false, render:(d,t,r)=>`
                <button class="btn btn-xs btn-outline-primary btn-step-edit" data-id="${r.id}">Edit</button>
                <button class="btn btn-xs btn-outline-danger btn-step-delete" data-id="${r.id}">Hapus</button>`}
        ]
    });

    function toggleApproverFields(){
        const mode = ($('#stepApproverType').val() || 'personal').toLowerCase();
        const isDept = mode === 'department';
        $('#stepApproverUserWrap').toggleClass('d-none', isDept);
        $('#stepApproverDeptWrap').toggleClass('d-none', !isDept);
    }

    function loadUsers(){
        return $.getJSON('{{ route('master_approval.users') }}').done(resp=>{
            users = resp.data || [];
            $('#stepApprover').html(users.map(u=>{
                const userId = u.id ? Number(u.id) : 0;
                const karyawanId = u.karyawan_id ? Number(u.karyawan_id) : 0;
                const value = karyawanId ? `karyawan:${karyawanId}` : (userId ? `user:${userId}` : '');
                const disabled = value ? '' : ' disabled';
                const badge = u.source === 'karyawan' ? 'Karyawan' : 'User';
                const suffix = u.hint || u.email || u.username || '-';
                const warning = u.mapped ? '' : ' | mobile only';
                return `<option value="${esc(value)}"${disabled} data-user-id="${userId || ''}" data-karyawan-id="${karyawanId || ''}" data-source="${esc(u.source || 'user')}" data-hint="${esc(suffix)}">${esc(u.label || u.name || '-') } [${esc(badge)}] - ${esc(suffix)}${esc(warning)}</option>`;
            }).join(''));
            if ($('#stepApprover').data('select2')) {
                $('#stepApprover').select2('destroy');
            }
            $('#stepApprover').select2({
                theme: 'bootstrap-5',
                width: '100%',
                dropdownParent: $(stepModalEl),
                placeholder: 'Cari karyawan / user approver...'
            });
        });
    }

    function loadDepartments(){
        return $.getJSON('{{ route('master_approval.departments') }}').done(resp=>{
            departments = resp.data || [];
            const options = (departments || []).map(d => `<option value="${d}">${d}</option>`);
            $('#stepApproverDepartment').html(options.join(''));
            if ($('#stepApproverDepartment').data('select2')) {
                $('#stepApproverDepartment').select2('destroy');
            }
            $('#stepApproverDepartment').select2({
                theme: 'bootstrap-5',
                width: '100%',
                dropdownParent: $(stepModalEl),
                placeholder: 'Pilih departemen approver...'
            });
        });
    }

    function loadFlows(){
        return $.getJSON('{{ route('master_approval.flows.data') }}').done(resp=>{
            flowRows = resp.data || [];
            flowTable.clear().rows.add(flowRows).draw();
            rebuildFlowModuleOptions();
        });
    }

    function loadSteps(flowId){
        return $.getJSON(`{{ url('/master-approval/flows') }}/${flowId}/steps`).done(resp=>{
            stepRows = resp.data || [];
            stepTable.clear().rows.add(stepRows).draw();
        });
    }

    function selectedApproverPayload(){
        const opt = $('#stepApprover option:selected');
        const rawValue = ($('#stepApprover').val() || '').toString();
        let userId = Number(opt.data('user-id') || 0);
        let karyawanId = Number(opt.data('karyawan-id') || 0);
        if (!userId && rawValue.startsWith('user:')) userId = Number(rawValue.substring(5) || 0);
        if (!karyawanId && rawValue.startsWith('karyawan:')) karyawanId = Number(rawValue.substring(9) || 0);
        return {
            approver_user_id: userId > 0 ? userId : null,
            approver_karyawan_id: karyawanId > 0 ? karyawanId : null,
        };
    }

    function selectedApproverPayloadBySelect(selector){
        const opt = $(`${selector} option:selected`);
        const rawValue = ($(`${selector}`).val() || '').toString();
        let userId = Number(opt.data('user-id') || 0);
        let karyawanId = Number(opt.data('karyawan-id') || 0);
        if (!userId && rawValue.startsWith('user:')) userId = Number(rawValue.substring(5) || 0);
        if (!karyawanId && rawValue.startsWith('karyawan:')) karyawanId = Number(rawValue.substring(9) || 0);
        return {
            user_id: userId > 0 ? userId : null,
            karyawan_id: karyawanId > 0 ? karyawanId : null,
        };
    }

    function approverSelectValue(row){
        if (row?.approver_karyawan_id) return `karyawan:${row.approver_karyawan_id}`;
        const mapped = users.find(u => Number(u.id || 0) === Number(row?.approver_user_id || 0) && Number(u.karyawan_id || 0) > 0);
        if (mapped) return `karyawan:${mapped.karyawan_id}`;
        if (row?.approver_user_id) return `user:${row.approver_user_id}`;
        return '';
    }

    $('#btnAddFlow').on('click', function(){
        $('#flowModalTitle').text('Tambah Flow');
        $('#flowId').val(''); $('#flowCode').val(''); $('#flowName').val(''); $('#flowModule').val(''); $('#flowDescription').val(''); $('#flowActive').prop('checked', true);
        flowModal.show();
    });

    $('#btnReplaceApprover').on('click', function(){
        const defaultSource = users.find(u => Number(u.id || 0) > 0 || Number(u.karyawan_id || 0) > 0);
        const defaultTarget = users.find(u => Number(u.id || 0) > 0 || Number(u.karyawan_id || 0) > 0);
        $('#replaceSourceApprover').val(defaultSource ? (defaultSource.karyawan_id ? `karyawan:${defaultSource.karyawan_id}` : `user:${defaultSource.id}`) : '').trigger('change');
        $('#replaceTargetApprover').val(defaultTarget ? (defaultTarget.karyawan_id ? `karyawan:${defaultTarget.karyawan_id}` : `user:${defaultTarget.id}`) : '').trigger('change');
        $('#replaceInFlows').prop('checked', true);
        $('#replaceInPending').prop('checked', true);
        replaceApproverModal.show();
    });

    $('#flowForm').on('submit', function(e){
        e.preventDefault();
        const id = $('#flowId').val();
        const payload = {
            code: ($('#flowCode').val()||'').trim(),
            name: ($('#flowName').val()||'').trim(),
            module_key: $('#flowModule').val()||'',
            description: $('#flowDescription').val()||'',
            is_active: $('#flowActive').is(':checked') ? 1 : 0,
        };
        $.ajax({ url: id ? `{{ url('/master-approval/flows') }}/${id}` : '{{ route('master_approval.flows.store') }}', type: id ? 'PUT' : 'POST', data: payload })
        .done(resp=>{ flowModal.hide(); loadFlows(); Swal.fire('Success', resp.message || 'Saved', 'success'); })
        .fail(xhr=>Swal.fire('Error', xhr.responseJSON?.message || 'Save failed', 'error'));
    });

    $('#flowTable').on('click', '.btn-select', function(){
        const id = Number($(this).data('id'));
        selectedFlow = flowRows.find(x=>Number(x.id)===id) || null;
        if (!selectedFlow) return;
        $('#stepFlowLabel').text(`Flow: ${selectedFlow.code} - ${selectedFlow.name}`);
        $('#btnAddStep').prop('disabled', false);
        loadSteps(selectedFlow.id);
    });

    $('#flowTable').on('click', '.btn-edit', function(){
        const id = Number($(this).data('id'));
        const row = flowRows.find(x=>Number(x.id)===id); if (!row) return;
        $('#flowModalTitle').text('Edit Flow');
        $('#flowId').val(row.id); $('#flowCode').val(row.code||''); $('#flowName').val(row.name||''); $('#flowModule').val(row.module_key||''); $('#flowDescription').val(row.description||''); $('#flowActive').prop('checked', !!row.is_active);
        flowModal.show();
    });

    $('#flowTable').on('click', '.btn-copy', function(){
        const id = Number($(this).data('id'));
        const row = flowRows.find(x=>Number(x.id)===id); if (!row) return;
        Swal.fire({
            title:'Copy flow ini?',
            text:`${row.code} - ${row.name} akan diduplikasi beserta semua step approver.`,
            icon:'question',
            showCancelButton:true,
            confirmButtonText:'Ya, Copy'
        }).then(res=>{
            if(!res.isConfirmed) return;
            $.post(`{{ url('/master-approval/flows') }}/${id}/copy`)
            .done(resp=>{
                loadFlows().done(()=>{
                    const newId = Number(resp?.data?.id || 0);
                    if (newId > 0) {
                        selectedFlow = flowRows.find(x=>Number(x.id)===newId) || null;
                        if (selectedFlow) {
                            $('#stepFlowLabel').text(`Flow: ${selectedFlow.code} - ${selectedFlow.name}`);
                            $('#btnAddStep').prop('disabled', false);
                            loadSteps(selectedFlow.id);
                        }
                    }
                });
                Swal.fire('Success', resp.message || 'Flow berhasil dicopy', 'success');
            })
            .fail(xhr=>Swal.fire('Error', xhr.responseJSON?.message || 'Copy failed', 'error'));
        });
    });

    $('#flowTable').on('click', '.btn-delete', function(){
        const id = Number($(this).data('id'));
        Swal.fire({title:'Hapus flow?', icon:'warning', showCancelButton:true}).then(res=>{
            if(!res.isConfirmed) return;
            $.ajax({url:`{{ url('/master-approval/flows') }}/${id}`, type:'DELETE'})
            .done(resp=>{ loadFlows(); if(selectedFlow && Number(selectedFlow.id)===id){ selectedFlow=null; stepRows=[]; stepTable.clear().draw(); $('#btnAddStep').prop('disabled', true); $('#stepFlowLabel').text('Pilih flow dulu.'); } Swal.fire('Deleted', resp.message || 'Deleted', 'success'); })
            .fail(xhr=>Swal.fire('Error', xhr.responseJSON?.message || 'Delete failed', 'error'));
        });
    });

    $('#btnAddStep').on('click', function(){
        if(!selectedFlow) return;
        $('#stepModalTitle').text('Tambah Step');
        $('#stepId').val('');
        $('#stepOrder').val('');
        $('#stepName').val('');
        $('#stepApproverType').val('personal');
        const firstUser = users.find(u => !!u.karyawan_id || !!u.id);
        $('#stepApprover').val(firstUser ? (firstUser.karyawan_id ? `karyawan:${firstUser.karyawan_id}` : `user:${firstUser.id}`) : '').trigger('change');
        $('#stepApproverDepartment').val(departments[0] || '').trigger('change');
        $('#stepActive').prop('checked', true);
        toggleApproverFields();
        stepModal.show();
    });

    $('#stepForm').on('submit', function(e){
        e.preventDefault();
        if(!selectedFlow){ Swal.fire('Warning', 'Pilih flow dulu', 'warning'); return; }
        const id = $('#stepId').val();
        const mode = ($('#stepApproverType').val() || 'personal');
        const approver = selectedApproverPayload();
        const payload = {
            step_order: Number($('#stepOrder').val()||0),
            step_name: ($('#stepName').val()||'').trim(),
            approver_type: mode,
            approver_user_id: mode === 'personal' ? approver.approver_user_id : null,
            approver_karyawan_id: mode === 'personal' ? approver.approver_karyawan_id : null,
            approver_department: mode === 'department' ? ($('#stepApproverDepartment').val() || '') : null,
            is_active: $('#stepActive').is(':checked') ? 1 : 0,
            is_required: 1,
        };
        $.ajax({
            url: id ? `{{ url('/master-approval/steps') }}/${id}` : `{{ url('/master-approval/flows') }}/${selectedFlow.id}/steps`,
            type: id ? 'PUT' : 'POST',
            data: payload,
        }).done(resp=>{ stepModal.hide(); loadSteps(selectedFlow.id); loadFlows(); Swal.fire('Success', resp.message || 'Saved', 'success'); })
        .fail(xhr=>Swal.fire('Error', xhr.responseJSON?.message || 'Save failed', 'error'));
    });

    $('#stepTable').on('click', '.btn-step-edit', function(){
        const id = Number($(this).data('id')); const row = stepRows.find(x=>Number(x.id)===id); if(!row) return;
        $('#stepModalTitle').text('Edit Step');
        $('#stepId').val(row.id);
        $('#stepOrder').val(row.step_order);
        $('#stepName').val(row.step_name||'');
        $('#stepApproverType').val((row.approver_type || 'personal')).trigger('change');
        $('#stepApprover').val(approverSelectValue(row)).trigger('change');
        $('#stepApproverDepartment').val(row.approver_department || '').trigger('change');
        $('#stepActive').prop('checked', !!row.is_active);
        toggleApproverFields();
        stepModal.show();
    });

    $('#stepTable').on('click', '.btn-step-delete', function(){
        const id = Number($(this).data('id'));
        Swal.fire({title:'Hapus step?', icon:'warning', showCancelButton:true}).then(res=>{
            if(!res.isConfirmed) return;
            $.ajax({url:`{{ url('/master-approval/steps') }}/${id}`, type:'DELETE'})
            .done(resp=>{ loadSteps(selectedFlow.id); loadFlows(); Swal.fire('Deleted', resp.message || 'Deleted', 'success'); })
            .fail(xhr=>Swal.fire('Error', xhr.responseJSON?.message || 'Delete failed', 'error'));
        });
    });

    $('#stepApproverType').on('change', toggleApproverFields);
    $('#replaceApproverForm').on('submit', function(e){
        e.preventDefault();
        const source = selectedApproverPayloadBySelect('#replaceSourceApprover');
        const target = selectedApproverPayloadBySelect('#replaceTargetApprover');
        const payload = {
            source_user_id: source.user_id,
            source_karyawan_id: source.karyawan_id,
            target_user_id: target.user_id,
            target_karyawan_id: target.karyawan_id,
            replace_in_flows: $('#replaceInFlows').is(':checked') ? 1 : 0,
            replace_in_pending: $('#replaceInPending').is(':checked') ? 1 : 0,
        };

        $.post('{{ route('master_approval.replace_approver') }}', payload)
            .done(resp => {
                replaceApproverModal.hide();
                $.when(loadFlows(), selectedFlow ? loadSteps(selectedFlow.id) : $.Deferred().resolve()).always(() => {
                    const stats = resp?.data || {};
                    Swal.fire(
                        'Success',
                        `Approver berhasil diganti. Flow: ${stats.updated_flow_rows || 0}, Pending: ${stats.updated_pending_rows || 0}`,
                        'success'
                    );
                });
            })
            .fail(xhr => Swal.fire('Error', xhr.responseJSON?.message || 'Replace approver failed', 'error'));
    });

    $.when(loadUsers(), loadDepartments(), loadFlows()).done(() => {
        const options = users.map(u => {
            const userId = u.id ? Number(u.id) : 0;
            const karyawanId = u.karyawan_id ? Number(u.karyawan_id) : 0;
            const value = karyawanId ? `karyawan:${karyawanId}` : (userId ? `user:${userId}` : '');
            const disabled = value ? '' : ' disabled';
            const badge = u.source === 'karyawan' ? 'Karyawan' : 'User';
            const suffix = u.hint || u.email || u.username || '-';
            return `<option value="${esc(value)}"${disabled} data-user-id="${userId || ''}" data-karyawan-id="${karyawanId || ''}" data-source="${esc(u.source || 'user')}" data-hint="${esc(suffix)}">${esc(u.label || u.name || '-') } [${esc(badge)}] - ${esc(suffix)}</option>`;
        }).join('');
        $('#replaceSourceApprover, #replaceTargetApprover').html(options);
        ['#replaceSourceApprover', '#replaceTargetApprover'].forEach((selector) => {
            const $el = $(selector);
            if ($el.data('select2')) {
                $el.select2('destroy');
            }
            $el.select2({
                theme: 'bootstrap-5',
                width: '100%',
                dropdownParent: $(replaceApproverModalEl),
                placeholder: selector === '#replaceSourceApprover' ? 'Pilih approver lama...' : 'Pilih approver baru...'
            });
        });
        toggleApproverFields();
    }).always(toggleApproverFields);
});
</script>
@endpush