@extends('layouts.adminlte')

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

@push('styles')
    <link rel="stylesheet" href="{{ asset('vendor/datatables/css/dataTables.bootstrap5.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('vendor/datatables/css/responsive.bootstrap5.min.css') }}" />
    <style>
        #projectTable .col-nojob,
        #projectTable .col-quotation,
        #projectTable .col-nowo {
            white-space: nowrap;
        }
        
        #projectTable td.actions-cell {
            white-space: nowrap;
        }

        #projectTable .hierarchy-wrap {
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        #projectTable .hierarchy-indent {
            display: inline-block;
        }

        #projectTable .action-group .btn {
            color: #495057;
            background: #f8f9fa;
            border-color: #d7dde3;
            font-weight: 500;
        }

        #projectTable .action-group .btn:hover {
            background: #eef2f6;
            color: #212529;
            border-color: #c8d0d8;
        }

        #projectTable .action-group .btn.btn-danger-soft {
            color: #842029;
            background: #f8d7da;
            border-color: #f1aeb5;
        }

        #projectTable .action-group .btn.btn-danger-soft:hover {
            background: #f1c2c7;
            border-color: #ea9ca5;
        }

        #projectTable .action-group .btn.btn-qtn {
            color: #0c5460;
            background: #d1ecf1;
            border-color: #a6dbe4;
        }

        #projectTable .action-group .btn.btn-qtn:hover {
            background: #bee5eb;
            border-color: #8fd2de;
        }

        #projectTable .action-group .btn.btn-add {
            color: #4a2d82;
            background: #e9ddff;
            border-color: #d4c0ff;
        }

        #projectTable .action-group .btn.btn-add:hover {
            background: #dfceff;
            border-color: #c5a9ff;
        }

        #projectTable .action-group .btn.btn-wo {
            color: #155724;
            background: #d4edda;
            border-color: #b6dfc0;
        }

        #projectTable .action-group .btn.btn-wo:hover {
            background: #c3e6cb;
            border-color: #9fd2ad;
        }

        #projectTable .action-group .btn.btn-edit-soft {
            color: #1f4e79;
            background: #dbeafe;
            border-color: #bdd6fb;
        }

        #projectTable .action-group .btn.btn-edit-soft:hover {
            background: #cfe2ff;
            border-color: #a8c6fb;
        }
    </style>
@endpush

@section('content')
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h3 class="card-title m-0">Master Project CRUD</h3>
            <div class="d-flex gap-2">
                <a href="{{ route('master_project.projects.template') }}" class="btn btn-outline-secondary btn-sm">
                    <i class="fas fa-file-arrow-down me-1"></i>Template
                </a>
                <a href="{{ route('master_project.projects.export') }}" class="btn btn-outline-success btn-sm">
                    <i class="fas fa-file-excel me-1"></i>Export
                </a>
                <button class="btn btn-outline-primary btn-sm" id="btnImportProject">
                    <i class="fas fa-file-import me-1"></i>Import
                </button>
                <button class="btn btn-outline-info btn-sm" id="btnSyncJobNumber">
                    <i class="fas fa-database me-1"></i>Sync No Job
                </button>
                <a href="{{ route('rab_project.page') }}" class="btn btn-outline-dark btn-sm">
                    <i class="fas fa-list-check me-1"></i>Halaman RAB
                </a>
                <a href="{{ route('purchase_order.page') }}" class="btn btn-outline-dark btn-sm">
                    <i class="fas fa-file-invoice-dollar me-1"></i>Purchase Order
                </a>
                <a href="{{ route('material_request.page') }}" class="btn btn-outline-dark btn-sm">
                    <i class="fas fa-clipboard-list me-1"></i>Permintaan Barang
                </a>
                <a href="{{ route('invoice_progress.page') }}" class="btn btn-outline-dark btn-sm">
                    <i class="fas fa-money-check-dollar me-1"></i>Invoice Progress
                </a>
                <button class="btn btn-primary btn-sm" id="btnAddProject">
                    <i class="fas fa-plus me-1"></i>Tambah Project
                </button>
            </div>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table id="projectTable" class="table table-striped table-hover align-middle w-100">
                    <thead>
                        <tr>
                            <th>No.</th>
                            <th>Nama Customer</th>
                            <th>No. Job</th>
                            <th>Nama Project</th>
                            <th>Lokasi Project</th>
                            <th>Nomor Quotation</th>
                            <th>Nomor WO</th>
                            <th>Tgl. WO</th>
                            <th>Amount WO</th>
                            <th>Bukti WO</th>
                            <th>Jenis Job</th>
                            <th>Status Project</th>
                            <th>Progress Payment</th>
                            <th>Tgl. Close</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="modal fade" id="projectModal" 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" id="projectModalTitle">Tambah Project</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="projectForm">
                    <div class="modal-body">
                        <input type="hidden" id="projectId" />
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label">No WO</label>
                                <input type="text" class="form-control" id="projectNoWo" maxlength="80" />
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Nominal WO</label>
                                <input type="number" class="form-control" id="projectWoAmount" min="0" step="0.01" placeholder="0" />
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Code Project</label>
                                <input type="text" class="form-control" id="projectCodeProject" maxlength="80" required />
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Bukti WO Client</label>
                                <input type="file" class="form-control" id="projectWoClientFile" accept=".pdf,.jpg,.jpeg,.png" />
                                <small class="text-muted d-block mt-1" id="projectWoClientFileCurrent">Belum ada file.</small>
                            </div>
                            <div class="col-md-12">
                                <label class="form-label">Nama Project</label>
                                <input type="text" class="form-control" id="projectName" maxlength="180" required />
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Area</label>
                                <select class="form-select" id="projectAreaId">
                                    <option value="">- Pilih Area -</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">ID Customers</label>
                                <select class="form-select" id="projectCustomerId">
                                    <option value="">- Pilih Customer -</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Start Work</label>
                                <input type="date" class="form-control" id="projectStartWork" />
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">End Work</label>
                                <input type="date" class="form-control" id="projectEndWork" />
                            </div>
                            <div class="col-md-12">
                                <label class="form-label">Description</label>
                                <textarea class="form-control" id="projectDescription" rows="3"></textarea>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Status Penawaran</label>
                                <select class="form-select" id="projectStatus" required>
                                    <option value="draft_penawaran">Draft Penawaran</option>
                                    <option value="approved_client">Disetujui Client</option>
                                    <option value="rejected_client">Ditolak Client</option>
                                    <option value="on_going">On Going</option>
                                    <option value="closed">Closed</option>
                                </select>
                            </div>
                            <div class="col-12">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" role="switch" id="projectActive" checked />
                                    <label class="form-check-label" for="projectActive">Active</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="importProjectModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Import Master Project (XLSX)</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="importProjectForm">
                    <div class="modal-body">
                        <input type="file" class="form-control" id="projectImportFile" accept=".xlsx,.xls" required />
                        <small class="text-muted">Gunakan file template agar kolom sesuai.</small>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Upload</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/datatables/js/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('vendor/datatables/js/responsive.bootstrap5.min.js') }}"></script>
    <script>
        $(function () {
            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
            if (csrfToken) $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': csrfToken } });

            const modal = new bootstrap.Modal(document.getElementById('projectModal'));
            const importModal = new bootstrap.Modal(document.getElementById('importProjectModal'));

            const ajaxErrorMessage = (xhr, fallback = 'Server Error') => {
                const json = xhr?.responseJSON || {};
                const chunks = [
                    json.message || fallback,
                    json.detail,
                    json.error_id ? `Error ID: ${json.error_id}` : '',
                ].filter(Boolean);

                if (chunks.length > 0) {
                    return chunks.join('\n');
                }

                return xhr?.responseText || fallback;
            };

            const showAjaxError = (xhr, title = 'Error', fallback = 'Server Error') => {
                Swal.fire({
                    title,
                    icon: 'error',
                    width: 820,
                    html: `<pre class="text-start bg-light border rounded p-2" style="white-space:pre-wrap;max-height:360px;overflow:auto;">${escapeHtml(ajaxErrorMessage(xhr, fallback))}</pre>`,
                });
            };

            const renderHierarchyText = (text, depth, showArrow = true) => {
                const level = Math.max(0, Number(depth || 0));
                const indentPx = level * 22;
                const arrow = (showArrow && level > 0) ? '<span class="text-muted">&#8627;</span>' : '';
                return `
                    <span class="hierarchy-wrap">
                        <span class="hierarchy-indent" style="width:${indentPx}px;"></span>
                        ${arrow}
                        <span>${text || '-'}</span>
                    </span>
                `;
            };

            $.fn.dataTable.ext.errMode = 'none';

            let rowsCache = [];
            let areaRows = [];
            let customerRows = [];

            const table = $('#projectTable').DataTable({
                responsive: true,
                processing: true,
                serverSide: true,
                searchDelay: 350,
                order: [],
                pageLength: 25,
                lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]],
                ajax: {
                    url: '{{ route('master_project.projects.data') }}',
                    dataSrc: (resp) => {
                        rowsCache = resp?.data || [];
                        return rowsCache;
                    },
                    error: (xhr) => {
                        rowsCache = [];
                        showAjaxError(xhr, 'Gagal Load Master Project', 'Failed load data');
                    }
                },
                columns: [
                    {
                        data: 'hierarchy_no',
                        orderable: false,
                        searchable: false,
                        render: (v, t, r) => renderHierarchyText(v || '-', r.hierarchy_depth, false)
                    },
                    { data: null, render: (r) => r.customer_name ? `${r.customer_code || '-'} - ${r.customer_name}` : '-' },
                    {
                        data: null,
                        render: (r) => {
                            const noJob = `<span class="col-nojob">${renderHierarchyText(r.no_job || '-', r.hierarchy_depth, true)}</span>`;
                            const sub = Array.isArray(r.sub_project_codes) && r.sub_project_codes.length
                                ? `<div class="small text-muted mt-1">Sub Project: ${r.sub_project_codes.join(', ')}</div>`
                                : '';
                            return `${noJob}${sub}`;
                        }
                    },
                    {
                        data: null,
                        render: (r) => renderHierarchyText(r.project_name || '-', r.hierarchy_depth, true)
                    },
                    { data: null, render: (r) => r.area_code ? `${r.area_code} - ${r.area_name || ''}` : (r.lokasi_project || '-') },
                    { data: 'nomor_quotation', render: (v) => `<span class="col-quotation">${v || '-'}</span>` },
                    { data: 'nomor_wo', render: (v) => `<span class="col-nowo">${v || '-'}</span>` },
                    { data: 'tgl_wo', render: (v) => v || '-' },
                    { data: 'amount_wo', render: (v) => `Rp ${Number(v || 0).toLocaleString('id-ID')}` },
                    {
                        data: null,
                        render: (r) => r.wo_client_file_url
                            ? `<a href="${r.wo_client_file_url}" target="_blank" class="btn btn-sm btn-outline-secondary">Lihat</a>`
                            : '-'
                    },
                    { data: 'jenis_job', render: (v) => v || '-' },
                    {
                        data: 'status_project',
                        render: (v) => {
                            const map = {
                                draft_penawaran: ['Draft Penawaran', 'secondary'],
                                approved_client: ['Disetujui Client', 'success'],
                                rejected_client: ['Ditolak Client', 'danger'],
                                on_going: ['On Going', 'primary'],
                                closed: ['Closed', 'dark']
                            };
                            const row = map[v] || [v || '-', 'secondary'];
                            return `<span class="badge text-bg-${row[1]}">${row[0]}</span>`;
                        }
                    },
                    {
                        data: 'progress_payment',
                        render: (v) => `${Number(v || 0).toLocaleString('id-ID')}%`
                    },
                    { data: 'tgl_close', render: (v) => v || '-' },
                    {
                        data: null,
                        orderable: false,
                        createdCell: (td) => $(td).addClass('actions-cell'),
                        render: (d, t, r) => {
                            const hasRab = Number(r.rab_items_count || 0) > 0;
                            const rabHref = hasRab
                                ? `{{ url('/master-project/rab-project') }}/${r.id}/detail`
                                : `{{ url('/master-project/rab-page') }}?project_id=${r.id}&open_add=1`;
                            const rabTitle = hasRab ? 'RAB Project Detail' : 'Tambah RAB Project';
                            return `
                                <div class="btn-group btn-group-sm action-group" role="group" aria-label="Project Actions">
                                    <a class="btn btn-qtn" href="{{ url('/master-project/penawaran') }}/${r.id}" title="Penawaran">QTN</a>
                                    <a class="btn btn-edit-soft" href="${rabHref}" title="${rabTitle}">RAB</a>
                                    <button class="btn btn-add btn-additional-project" data-id="${r.id}" title="Additional Project">Add</button>
                                    <button class="btn btn-wo btn-generate-wo" data-id="${r.id}" title="Turunkan Work Order" ${((r.project_status === 'approved_client' || r.project_status === 'on_going') ? '' : 'disabled')}>Buat WO</button>
                                    <button class="btn btn-edit-soft btn-edit" data-id="${r.id}" title="Edit">Edit</button>
                                    <button class="btn btn-danger-soft btn-delete" data-id="${r.id}" title="Delete">Del</button>
                                </div>
                            `;
                        }
                    }
                ]
            });

            const loadRefs = () => {
                return $.when(
                    $.getJSON('{{ route('master_area.data') }}'),
                    $.getJSON('{{ route('master_client.data') }}')
                ).done((aResp, cResp) => {
                    areaRows = aResp[0]?.data || [];
                    customerRows = cResp[0]?.data || [];
                });
            };

            const fillAreaOptions = (selectedId = '', selectedClientId = '') => {
                const currentClientId = (selectedClientId || '').toString();
                const options = ['<option value="">- Pilih Area -</option>'];
                areaRows
                    .filter((row) => {
                        if (!currentClientId) return true;
                        return String(row.client_id || '') === currentClientId || !row.client_id;
                    })
                    .forEach((r) => options.push(`<option value="${r.id}">${r.label || `${r.code} - ${r.name}`}</option>`));
                $('#projectAreaId').html(options.join(''));
                $('#projectAreaId').val(selectedId || '');
            };

            const fillCustomerOptions = (selectedId = '') => {
                const options = ['<option value="">- Pilih Customer -</option>'];
                customerRows.forEach((r) => options.push(`<option value="${r.id}">${r.id} - ${r.code} - ${r.name}</option>`));
                $('#projectCustomerId').html(options.join(''));
                $('#projectCustomerId').val(selectedId || '');
            };

            const loadData = (resetPaging = false) => {
                table.ajax.reload(null, resetPaging);
            };

            $('#btnAddProject').on('click', function () {
                $('#projectModalTitle').text('Tambah Project');
                $('#projectId').val('');
                $('#projectNoWo').val('');
                $('#projectWoAmount').val('');
                $('#projectCodeProject').val('');
                $('#projectName').val('');
                $('#projectWoClientFile').val('');
                $('#projectWoClientFileCurrent').text('Belum ada file.');
                fillCustomerOptions('');
                fillAreaOptions('', $('#projectCustomerId').val() || '');
                $('#projectStartWork').val('');
                $('#projectEndWork').val('');
                $('#projectDescription').val('');
                $('#projectStatus').val('draft_penawaran');
                $('#projectActive').prop('checked', true);
                modal.show();
            });

            $('#btnImportProject').on('click', function () {
                $('#projectImportFile').val('');
                importModal.show();
            });

            const escapeHtml = (value) => $('<div>').text(value ?? '').html();
            const syncJobNumberStart = (apply = false) => {
                return $.ajax({
                    url: '{{ route('master_project.projects.sync_job_number.start') }}',
                    type: 'POST',
                    timeout: 180000,
                    data: {
                        apply: apply ? 1 : 0,
                        connection: 'third_party',
                        source_table: 'master_project',
                        update_existing: 1,
                        no_create: 0,
                        limit: 0
                    }
                });
            };
            const syncJobNumberStatusUrl = '{{ route('master_project.projects.sync_job_number.status', ['jobId' => '__JOB_ID__']) }}';
            const syncJobNumberStatus = (jobId) => {
                return $.ajax({
                    url: syncJobNumberStatusUrl.replace('__JOB_ID__', encodeURIComponent(jobId)),
                    type: 'GET',
                    cache: false
                });
            };

            const pollSyncJobNumber = (jobId, title, detail, onDone) => {
                if (window.AhspBackgroundSync?.trackAndOpen) {
                    window.AhspBackgroundSync.trackAndOpen({
                        job_id: jobId,
                        title,
                        detail,
                        status: 'queued',
                        onDone
                    }, { title, detail });
                    return;
                }

                const startedAt = Date.now();
                let timer = null;
                let poller = null;

                Swal.fire({
                    title,
                    width: 760,
                    html: `
                        <div class="text-start">
                            <div class="mb-2">${detail}</div>
                            <div class="progress mb-2" style="height:10px;">
                                <div id="syncJobProgressBar" class="progress-bar progress-bar-striped progress-bar-animated" style="width:3%;"></div>
                            </div>
                            <div class="d-flex justify-content-between small mb-2">
                                <span id="syncJobMessage">Menyiapkan worker...</span>
                                <strong id="syncJobPercent">0%</strong>
                            </div>
                            <div class="row g-2 small">
                                <div class="col-4"><div class="border rounded p-2">Fetch<br><strong id="syncJobProcessed">0 / 0</strong></div></div>
                                <div class="col-4"><div class="border rounded p-2">Insert/Update<br><strong id="syncJobWrite">0 / 0</strong></div></div>
                                <div class="col-4"><div class="border rounded p-2">Gagal<br><strong id="syncJobFailed">0</strong></div></div>
                            </div>
                            <div class="small text-muted mt-2">Berjalan <span id="syncJobElapsed">0</span> detik. Proses jalan di server, halaman ini hanya membaca status realtime.</div>
                        </div>
                    `,
                    allowOutsideClick: false,
                    allowEscapeKey: false,
                    showConfirmButton: false,
                    didOpen: () => {
                        Swal.showLoading();
                        timer = setInterval(() => {
                            $('#syncJobElapsed').text(Math.floor((Date.now() - startedAt) / 1000));
                        }, 1000);
                        poller = setInterval(() => {
                            syncJobNumberStatus(jobId)
                                .done((status) => {
                                    const percent = Math.max(0, Math.min(100, Number(status.percent || 0)));
                                    const stats = status.stats || {};
                                    $('#syncJobProgressBar').css('width', `${Math.max(percent, 3)}%`);
                                    $('#syncJobPercent').text(`${percent.toFixed(percent % 1 ? 1 : 0)}%`);
                                    $('#syncJobMessage').text(status.message || 'Memproses...');
                                    $('#syncJobProcessed').text(`${Number(status.processed || 0)} / ${Number(status.total || 0)}`);
                                    $('#syncJobWrite').text(`${Number(stats.created || 0)} / ${Number(stats.updated || 0)}`);
                                    $('#syncJobFailed').text(Number(stats.failed || 0));

                                    if (['done', 'failed'].includes(status.status)) {
                                        clearInterval(poller);
                                        clearInterval(timer);
                                        Swal.close();
                                        onDone(status);
                                    }
                                })
                                .fail(() => {
                                    $('#syncJobMessage').text('Menunggu status worker...');
                                });
                        }, 1000);
                    },
                    willClose: () => {
                        if (timer) clearInterval(timer);
                        if (poller) clearInterval(poller);
                    }
                });
            };

            $('#btnSyncJobNumber').on('click', function () {
                const btn = $(this);
                btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin me-1"></i>Cek...');

                syncJobNumberStart(false)
                    .done((resp) => {
                        pollSyncJobNumber(resp.job_id, 'Preview Sync No Job', 'Sedang mengambil data 3rd party dan simulasi perubahan.', (status) => {
                            if (status.status === 'failed') {
                                Swal.fire({
                                    title: 'Sync Preview Gagal',
                                    icon: 'error',
                                    width: 820,
                                    html: `<pre class="text-start bg-light border rounded p-2" style="white-space:pre-wrap;max-height:360px;overflow:auto;">${escapeHtml(status.output || status.message || 'Sync gagal')}</pre>`
                                });
                                btn.prop('disabled', false).html('<i class="fas fa-database me-1"></i>Sync No Job');
                                return;
                            }

                            Swal.fire({
                                title: 'Preview Sync No Job',
                                icon: 'info',
                                width: 820,
                                html: `
                                    <div class="text-start">
                                        <div class="alert alert-info py-2 px-3">
                                            Ini masih dry-run. Data belum disimpan ke Master Project.
                                        </div>
                                        <pre class="bg-light border rounded p-2" style="white-space:pre-wrap;max-height:360px;overflow:auto;">${escapeHtml(status.output || '-')}</pre>
                                    </div>
                                `,
                                showCancelButton: true,
                                confirmButtonText: 'Apply Sync',
                                cancelButtonText: 'Batal'
                            }).then((result) => {
                                if (!result.isConfirmed) {
                                    btn.prop('disabled', false).html('<i class="fas fa-database me-1"></i>Sync No Job');
                                    return;
                                }

                                btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin me-1"></i>Sync...');
                                syncJobNumberStart(true)
                                    .done((applyResp) => {
                                        pollSyncJobNumber(applyResp.job_id, 'Apply Sync No Job', 'Sedang menyimpan/update nomor job ke Master Project AHSP.', (applyStatus) => {
                                            if (applyStatus.status === 'failed') {
                                                Swal.fire({
                                                    title: 'Apply Sync Gagal',
                                                    icon: 'error',
                                                    width: 820,
                                                    html: `<pre class="text-start bg-light border rounded p-2" style="white-space:pre-wrap;max-height:360px;overflow:auto;">${escapeHtml(applyStatus.output || applyStatus.message || 'Apply sync gagal')}</pre>`
                                                });
                                                btn.prop('disabled', false).html('<i class="fas fa-database me-1"></i>Sync No Job');
                                                return;
                                            }

                                            loadData();
                                            Swal.fire({
                                                title: 'Sync Selesai',
                                                icon: Number(applyStatus?.stats?.failed || 0) > 0 ? 'warning' : 'success',
                                                width: 820,
                                                html: `<pre class="text-start bg-light border rounded p-2" style="white-space:pre-wrap;max-height:360px;overflow:auto;">${escapeHtml(applyStatus.output || '-')}</pre>`
                                            });
                                            btn.prop('disabled', false).html('<i class="fas fa-database me-1"></i>Sync No Job');
                                        });
                                    })
                                    .fail((xhr) => {
                                        showAjaxError(xhr, 'Apply Sync Gagal', 'Apply sync gagal');
                                        btn.prop('disabled', false).html('<i class="fas fa-database me-1"></i>Sync No Job');
                                    });
                            });
                        });
                    })
                    .fail((xhr) => {
                        showAjaxError(xhr, 'Sync Preview Gagal', 'Sync gagal');
                        btn.prop('disabled', false).html('<i class="fas fa-database me-1"></i>Sync No Job');
                    });
            });

            $('#projectTable').on('click', '.btn-edit', function () {
                const id = Number($(this).data('id'));
                const row = rowsCache.find((x) => Number(x.id) === id);
                if (!row) return;

                Swal.fire({
                    title: 'Edit project ini?',
                    text: `${row.code_project || row.no_job || '-'} - ${row.project_name || '-'}`,
                    icon: 'info',
                    showCancelButton: true,
                    confirmButtonText: 'Lanjut Edit'
                }).then((result) => {
                    if (!result.isConfirmed) return;
                    $('#projectModalTitle').text('Edit Project');
                    $('#projectId').val(row.id);
                    $('#projectNoWo').val(row.no_wo || '');
                    $('#projectWoAmount').val(row.wo_amount ?? '');
                    $('#projectCodeProject').val(row.code_project || '');
                    $('#projectName').val(row.project_name || '');
                    $('#projectWoClientFile').val('');
                    if (row.wo_client_file_url) {
                        $('#projectWoClientFileCurrent').html(`<a href="${row.wo_client_file_url}" target="_blank">File saat ini</a>`);
                    } else {
                        $('#projectWoClientFileCurrent').text('Belum ada file.');
                    }
                    fillCustomerOptions(row.id_customers || '');
                    fillAreaOptions(row.area_id || '', row.id_customers || '');
                    $('#projectStartWork').val(row.start_work || '');
                    $('#projectEndWork').val(row.end_work || '');
                    $('#projectDescription').val(row.description || '');
                    $('#projectStatus').val(row.project_status || 'draft_penawaran');
                    $('#projectActive').prop('checked', !!row.is_active);
                    modal.show();
                });
            });

            $('#projectForm').on('submit', function (e) {
                e.preventDefault();
                const id = $('#projectId').val();
                const payload = {
                    no_wo: ($('#projectNoWo').val() || '').toString().trim(),
                    wo_amount: ($('#projectWoAmount').val() || '').toString().trim(),
                    code_project: ($('#projectCodeProject').val() || '').toString().trim(),
                    project_name: ($('#projectName').val() || '').toString().trim(),
                    area_id: $('#projectAreaId').val(),
                    id_customers: $('#projectCustomerId').val(),
                    start_work: $('#projectStartWork').val(),
                    end_work: $('#projectEndWork').val(),
                    project_status: $('#projectStatus').val(),
                    description: ($('#projectDescription').val() || '').toString().trim(),
                    is_active: $('#projectActive').is(':checked') ? 1 : 0
                };
                const fileInput = $('#projectWoClientFile')[0];

                if (!payload.code_project || !payload.project_name) {
                    Swal.fire('Warning', 'Code Project dan Nama Project wajib diisi', 'warning');
                    return;
                }

                const formData = new FormData();
                Object.entries(payload).forEach(([k, v]) => formData.append(k, v ?? ''));
                if (fileInput && fileInput.files && fileInput.files.length > 0) {
                    formData.append('wo_client_file', fileInput.files[0]);
                }
                if (id) formData.append('_method', 'PUT');

                $.ajax({
                    url: id ? `{{ url('/master-project/projects') }}/${id}` : '{{ route('master_project.projects.store') }}',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false
                }).done((resp) => {
                    modal.hide();
                    loadData();
                    Swal.fire('Success', resp?.message || 'Saved', 'success');
                }).fail((xhr) => {
                    showAjaxError(xhr, 'Save failed', 'Save failed');
                });
            });

            $('#projectCustomerId').on('change', function () {
                const selectedAreaId = $('#projectAreaId').val() || '';
                fillAreaOptions(selectedAreaId, $(this).val() || '');
            });

            $('#projectTable').on('click', '.btn-generate-wo', function () {
                const id = Number($(this).data('id'));
                const row = rowsCache.find((x) => Number(x.id) === id);
                Swal.fire({
                    title: 'Turunkan WO?',
                    text: `${row?.code_project || row?.no_job || '-'} - ${row?.project_name || '-'}`,
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: 'Ya, Turunkan WO'
                }).then((result) => {
                    if (!result.isConfirmed) return;
                    $.ajax({
                        url: `{{ url('/master-project/projects') }}/${id}/generate-wo`,
                        type: 'POST'
                    }).done((resp) => {
                        loadData();
                        Swal.fire('Success', resp?.message || 'WO generated', 'success');
                    }).fail((xhr) => {
                        showAjaxError(xhr, 'Generate WO failed', 'Generate WO failed');
                    });
                });
            });

            $('#projectTable').on('click', '.btn-additional-project', function () {
                const id = Number($(this).data('id'));
                const row = rowsCache.find((x) => Number(x.id) === id);
                Swal.fire({
                    title: 'Buat Additional Project?',
                    text: `${row?.code_project || row?.no_job || '-'} - ${row?.project_name || '-'}`,
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: 'Ya, Buat'
                }).then((result) => {
                    if (!result.isConfirmed) return;
                    $.ajax({
                        url: `{{ url('/master-project/projects') }}/${id}/additional`,
                        type: 'POST'
                    }).done((resp) => {
                        loadData();
                        const note = resp?.data?.notification || '';
                        Swal.fire({
                            title: 'Success',
                            html: `${resp?.message || 'Additional project created'}${note ? '<br><small class="text-muted">' + note + '</small>' : ''}`,
                            icon: note ? 'warning' : 'success'
                        });
                    }).fail((xhr) => {
                        showAjaxError(xhr, 'Create additional project failed', 'Create additional project failed');
                    });
                });
            });

            $('#projectTable').on('click', '.btn-delete', function () {
                const id = Number($(this).data('id'));
                Swal.fire({
                    title: 'Delete project?',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Yes, delete'
                }).then((result) => {
                    if (!result.isConfirmed) return;
                    $.ajax({
                        url: `{{ url('/master-project/projects') }}/${id}`,
                        type: 'DELETE'
                    }).done((resp) => {
                        loadData();
                        Swal.fire('Deleted', resp?.message || 'Deleted', 'success');
                    }).fail((xhr) => {
                        showAjaxError(xhr, 'Delete failed', 'Delete failed');
                    });
                });
            });

            $('#importProjectForm').on('submit', function (e) {
                e.preventDefault();
                const file = $('#projectImportFile')[0].files[0];
                if (!file) return;

                const formData = new FormData();
                formData.append('file', file);

                $.ajax({
                    url: '{{ route('master_project.projects.import') }}',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false
                }).done((resp) => {
                    importModal.hide();
                    loadData();
                    Swal.fire('Success', resp?.message || 'Import completed', 'success');
                }).fail((xhr) => {
                    showAjaxError(xhr, 'Import failed', 'Import failed');
                });
            });

            loadRefs();
        });
    </script>
@endpush