@extends('layouts.adminlte')

@section('title', 'Subkon & Kontrak')
@section('page_title', 'Subkon & Kontrak')

@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>
        .select2-container--bootstrap-5 .select2-selection { min-height: 38px; }
        .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
        tr.row-selected > td { background: #fff3cd !important; }
        .money { white-space: nowrap; }
    </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">Subkon & Kontrak</h3>
            <button class="btn btn-success btn-sm" id="btnAddContract">
                <i class="fas fa-plus me-1"></i>Tambah Kontrak
            </button>
        </div>
        <div class="card-body">
            <div class="row g-2 align-items-end mb-2">
                <div class="col-md-4">
                    <label class="form-label">Project</label>
                    <select class="form-select" id="filterProject"></select>
                </div>
                <div class="col-md-4">
                    <label class="form-label">Vendor/Subkon</label>
                    <select class="form-select" id="filterVendor"></select>
                </div>
                <div class="col-md-2">
                    <label class="form-label">Status</label>
                    <select class="form-select" id="filterStatus">
                        <option value="">Semua</option>
                        <option value="draft">draft</option>
                        <option value="approved">approved</option>
                        <option value="closed">closed</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <button class="btn btn-primary w-100" id="btnReload">Tampilkan</button>
                </div>
            </div>

            <div class="table-responsive">
                <table class="table table-striped table-hover align-middle w-100" id="tblContracts">
                    <thead>
                    <tr>
                        <th style="width:70px">ID</th>
                        <th>Project</th>
                        <th>Vendor</th>
                        <th>No Kontrak</th>
                        <th class="text-end">Nilai</th>
                        <th class="text-end">Ret %</th>
                        <th>Status</th>
                        <th style="width:190px">Aksi</th>
                    </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>

            <small class="text-muted d-block">
                Retensi dihitung otomatis saat membuat klaim (gross x retention %). Klaim approved akan membuat jurnal otomatis (Biaya Subkon vs Hutang Subkon).
            </small>
        </div>
    </div>

    <div class="card d-none" id="detailCard">
        <div class="card-header d-flex justify-content-between align-items-center">
            <div>
                <div class="fw-bold">Detail Kontrak</div>
                <div class="text-muted small" id="detailSubtitle">-</div>
            </div>
            <button class="btn btn-outline-secondary btn-sm" id="btnClearSelection">
                <i class="fas fa-times me-1"></i>Tutup
            </button>
        </div>
        <div class="card-body">
            <div class="row g-2">
                <div class="col-lg-6">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <div class="fw-bold">AP Subkon (Klaim)</div>
                        <button class="btn btn-success btn-sm" id="btnAddClaim"><i class="fas fa-plus me-1"></i>Tambah</button>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-sm table-striped table-hover align-middle w-100" id="tblClaims">
                            <thead>
                            <tr>
                                <th style="width:70px">ID</th>
                                <th>No</th>
                                <th>Tanggal</th>
                                <th class="text-end">Gross</th>
                                <th class="text-end">Ret</th>
                                <th class="text-end">Net</th>
                                <th>Status</th>
                                <th style="width:210px">Aksi</th>
                            </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <div class="fw-bold">Pembayaran</div>
                        <button class="btn btn-success btn-sm" id="btnAddPayment"><i class="fas fa-plus me-1"></i>Tambah</button>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-sm table-striped table-hover align-middle w-100" id="tblPayments">
                            <thead>
                            <tr>
                                <th style="width:70px">ID</th>
                                <th>Tanggal</th>
                                <th class="text-end">Amount</th>
                                <th>Status</th>
                                <th style="width:170px">Aksi</th>
                            </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Modal Contract --}}
    <div class="modal fade" id="modalContract" 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">Kontrak Subkon</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="formContract">
                    <div class="modal-body">
                        <input type="hidden" id="contractId" value="">
                        <div class="row g-2">
                            <div class="col-md-6">
                                <label class="form-label">Project</label>
                                <select class="form-select" id="contractProjectId" required></select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Vendor/Subkon</label>
                                <select class="form-select" id="contractVendorId" required></select>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">No Kontrak</label>
                                <input type="text" class="form-control" id="contractNo" maxlength="80">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Tanggal</label>
                                <input type="date" class="form-control" id="contractDate">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Retensi (%)</label>
                                <input type="number" min="0" max="100" step="0.01" class="form-control" id="retentionPercent" value="0">
                            </div>
                            <div class="col-md-8">
                                <label class="form-label">Judul</label>
                                <input type="text" class="form-control" id="contractTitle" maxlength="200">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Nilai Kontrak</label>
                                <input type="number" min="0" step="0.01" class="form-control" id="contractAmount" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Akun Hutang Subkon (AP)</label>
                                <select class="form-select" id="apAccountId"></select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Akun Biaya Subkon</label>
                                <select class="form-select" id="expenseAccountId"></select>
                            </div>
                            <div class="col-12">
                                <label class="form-label">Catatan</label>
                                <textarea class="form-control" id="contractNotes" rows="2"></textarea>
                            </div>
                        </div>
                        <small class="text-muted d-block mt-2">
                            Kontrak harus <b>approved</b> dulu sebelum bisa buat klaim/pembayaran. Approve kontrak butuh akun AP + akun Biaya untuk jurnal otomatis.
                        </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-success">Simpan</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- Modal Claim --}}
    <div class="modal fade" id="modalClaim" 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">Klaim (AP Subkon)</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="formClaim">
                    <div class="modal-body">
                        <div class="row g-2">
                            <div class="col-md-4">
                                <label class="form-label">No Klaim</label>
                                <input type="text" class="form-control" id="claimNo" maxlength="80">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Tanggal Klaim</label>
                                <input type="date" class="form-control" id="claimDate" required value="{{ now()->toDateString() }}">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Progress (%)</label>
                                <input type="number" min="0" max="100" step="0.01" class="form-control" id="claimProgress" value="0">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Gross Amount</label>
                                <input type="number" min="0" step="0.01" class="form-control" id="claimGross" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Deskripsi</label>
                                <textarea class="form-control" id="claimDesc" rows="2"></textarea>
                            </div>
                        </div>
                        <small class="text-muted d-block mt-2">
                            Setelah klaim dibuat: klik <b>Submit</b> lalu <b>Approve</b>. Approve klaim akan membentuk jurnal otomatis.
                        </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-success">Simpan Klaim</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- Modal Payment --}}
    <div class="modal fade" id="modalPayment" 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">Pembayaran Subkon</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="formPayment">
                    <div class="modal-body">
                        <div class="row g-2">
                            <div class="col-md-4">
                                <label class="form-label">Tanggal Bayar</label>
                                <input type="date" class="form-control" id="payDate" required value="{{ now()->toDateString() }}">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Amount (IDR)</label>
                                <input type="number" min="0" step="0.01" class="form-control" id="payAmount" required>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Metode</label>
                                <input type="text" class="form-control" id="payMethod" maxlength="40" placeholder="Transfer/Cash/Giro">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Akun Bank/Kas</label>
                                <select class="form-select" id="bankAccountId" required></select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Akun AP (Hutang Subkon)</label>
                                <select class="form-select" id="payApAccountId" required></select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Ref Number</label>
                                <input type="text" class="form-control" id="payRef" maxlength="120">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Kaitkan ke Klaim (opsional)</label>
                                <select class="form-select" id="payClaimId"></select>
                            </div>
                            <div class="col-12">
                                <label class="form-label">Catatan</label>
                                <textarea class="form-control" id="payNotes" rows="2"></textarea>
                            </div>
                        </div>
                        <small class="text-muted d-block mt-2">
                            Setelah draft dibuat: klik <b>Post</b> untuk membentuk jurnal otomatis (Debit AP Subkon, Credit Bank).
                        </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-success">Simpan Draft</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <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 fmtRp = (n) => Number(n || 0).toLocaleString('id-ID', { style: 'currency', currency: 'IDR', maximumFractionDigits: 2 });
            const safe = (s) => String(s ?? '').replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;');
            const badge = (s) => {
                const v = String(s || 'draft');
                const cls = v === 'approved' ? 'success'
                    : (v === 'closed' ? 'secondary'
                        : (v === 'submitted' ? 'primary'
                            : (v === 'rejected' ? 'danger' : 'warning')));
                return `<span class="badge text-bg-${cls}">${safe(v)}</span>`;
            };

            const toastError = (msg) => window.Swal ? Swal.fire('Error', msg || 'Terjadi kesalahan', 'error') : alert(msg || 'Terjadi kesalahan');
            const toastOk = (msg) => window.Swal ? Swal.fire({ icon: 'success', title: 'OK', text: msg || 'Berhasil', timer: 1200, showConfirmButton: false }) : null;
            const confirmDo = async (title, text) => {
                if (!window.Swal) return confirm(`${title}\n\n${text}`);
                const r = await Swal.fire({ icon: 'warning', title, text, showCancelButton: true, confirmButtonText: 'Ya', cancelButtonText: 'Batal' });
                return !!r.isConfirmed;
            };
            const promptText = async (title, label) => {
                if (!window.Swal) return (prompt(`${title}\n${label}`) || '').trim();
                const r = await Swal.fire({ title, input: 'text', inputLabel: label, inputPlaceholder: 'Tulis alasan...', showCancelButton: true });
                return r.isConfirmed ? String(r.value || '').trim() : '';
            };

            const initSelect2 = ($el, url, placeholder) => {
                if ($el.data('select2')) $el.select2('destroy');
                $el.select2({
                    theme: 'bootstrap-5',
                    width: '100%',
                    placeholder: placeholder || 'Cari...',
                    allowClear: true,
                    ajax: {
                        url,
                        dataType: 'json',
                        delay: 250,
                        data: (params) => ({ q: params.term || '' }),
                        processResults: (data) => data,
                    }
                });
            };

            initSelect2($('#filterProject'), `{{ route('subcontract.projects.search') }}`, 'Cari project...');
            initSelect2($('#filterVendor'), `{{ route('subcontract.vendors.search') }}`, 'Cari vendor...');
            initSelect2($('#contractProjectId'), `{{ route('subcontract.projects.search') }}`, 'Pilih project...');
            initSelect2($('#contractVendorId'), `{{ route('subcontract.vendors.search') }}`, 'Pilih vendor...');
            initSelect2($('#apAccountId'), `{{ route('subcontract.accounts.search') }}`, 'Akun AP...');
            initSelect2($('#expenseAccountId'), `{{ route('subcontract.accounts.search') }}`, 'Akun biaya...');
            initSelect2($('#bankAccountId'), `{{ route('subcontract.accounts.search') }}`, 'Akun bank/kas...');
            initSelect2($('#payApAccountId'), `{{ route('subcontract.accounts.search') }}`, 'Akun AP...');

            let selectedContract = null;
            let claimsCache = [];

            const contractsUrl = () => {
                const params = new URLSearchParams();
                const p = $('#filterProject').val();
                const v = $('#filterVendor').val();
                const s = $('#filterStatus').val();
                if (p) params.set('project_id', p);
                if (v) params.set('vendor_id', v);
                if (s) params.set('status', s);
                return `{{ route('subcontract.data') }}?${params.toString()}`;
            };

            const refreshClaimOptions = () => {
                const $sel = $('#payClaimId');
                $sel.empty();
                $sel.append('<option value=\"\">-</option>');
                (claimsCache || []).forEach((c) => {
                    const id = Number(c.id || 0);
                    const label = `${c.claim_no || ('#' + id)} | ${fmtRp(c.net_amount || 0)} | ${c.status || 'draft'}`;
                    $sel.append(`<option value=\"${id}\">${safe(label)}</option>`);
                });
            };

            const clearSelection = () => {
                selectedContract = null;
                claimsCache = [];
                $('#detailCard').addClass('d-none');
                $('#detailSubtitle').text('-');
                $('#tblClaims tbody').empty();
                $('#tblPayments tbody').empty();
                $('#tblContracts tbody tr').removeClass('row-selected');
            };

            const renderContracts = (rows) => {
                const $tb = $('#tblContracts tbody');
                $tb.empty();
                (rows || []).forEach((r) => {
                    const canApprove = String(r.status) !== 'approved' && String(r.status) !== 'closed';
                    const canClose = String(r.status) !== 'closed';
                    $tb.append(`
                        <tr data-id=\"${r.id}\">
                            <td class=\"mono\">${r.id}</td>
                            <td>${safe(r.project || '')}</td>
                            <td>${safe(r.vendor || '')}</td>
                            <td class=\"mono\">${safe(r.contract_no || '')}</td>
                            <td class=\"text-end money\">${fmtRp(r.contract_amount || 0)}</td>
                            <td class=\"text-end\">${Number(r.retention_percent || 0).toFixed(2)}%</td>
                            <td>${badge(r.status)}</td>
                            <td>
                                <button class=\"btn btn-outline-primary btn-sm me-1 btn-edit\"><i class=\"fas fa-pen\"></i></button>
                                <button class=\"btn btn-outline-success btn-sm me-1 btn-approve\" ${canApprove ? '' : 'disabled'}><i class=\"fas fa-check\"></i></button>
                                <button class=\"btn btn-outline-dark btn-sm me-1 btn-close\" ${canClose ? '' : 'disabled'}><i class=\"fas fa-lock\"></i></button>
                                <button class=\"btn btn-outline-secondary btn-sm btn-detail\"><i class=\"fas fa-list\"></i></button>
                            </td>
                        </tr>`);
                });
            };

            const renderClaims = (rows) => {
                const $tb = $('#tblClaims tbody');
                $tb.empty();
                (rows || []).forEach((r) => {
                    const s = String(r.status || 'draft');
                    const canSubmit = (s === 'draft' || s === 'rejected');
                    const canApprove = (s === 'submitted');
                    const canReject = (s === 'submitted');
                    $tb.append(`
                        <tr data-id=\"${r.id}\">
                            <td class=\"mono\">${r.id}</td>
                            <td class=\"mono\">${safe(r.claim_no || '')}</td>
                            <td>${safe(r.claim_date || '-')}</td>
                            <td class=\"text-end money\">${fmtRp(r.gross_amount || 0)}</td>
                            <td class=\"text-end money\">${fmtRp(r.retention_amount || 0)}</td>
                            <td class=\"text-end money\">${fmtRp(r.net_amount || 0)}</td>
                            <td>${badge(r.status)}</td>
                            <td>
                                <button class=\"btn btn-outline-primary btn-sm me-1 btn-claim-submit\" ${canSubmit ? '' : 'disabled'}>Submit</button>
                                <button class=\"btn btn-outline-success btn-sm me-1 btn-claim-approve\" ${canApprove ? '' : 'disabled'}>Approve</button>
                                <button class=\"btn btn-outline-danger btn-sm btn-claim-reject\" ${canReject ? '' : 'disabled'}>Reject</button>
                            </td>
                        </tr>`);
                });
            };

            const renderPayments = (rows) => {
                const $tb = $('#tblPayments tbody');
                $tb.empty();
                (rows || []).forEach((r) => {
                    const s = String(r.status || 'draft');
                    const canPost = (s === 'draft');
                    const canVoid = (s !== 'void');
                    $tb.append(`
                        <tr data-id=\"${r.id}\">
                            <td class=\"mono\">${r.id}</td>
                            <td>${safe(r.pay_date || '-')}</td>
                            <td class=\"text-end money\">${fmtRp(r.amount_idr || 0)}</td>
                            <td>${badge(r.status)}</td>
                            <td>
                                <button class=\"btn btn-outline-success btn-sm me-1 btn-pay-post\" ${canPost ? '' : 'disabled'}>Post</button>
                                <button class=\"btn btn-outline-danger btn-sm btn-pay-void\" ${canVoid ? '' : 'disabled'}>Void</button>
                            </td>
                        </tr>`);
                });
            };

            const loadContracts = () => {
                $.getJSON(contractsUrl())
                    .done((res) => { renderContracts(res.data || []); clearSelection(); })
                    .fail((xhr) => toastError(xhr.responseJSON?.message || 'Gagal load kontrak'));
            };
            const loadClaims = () => {
                if (!selectedContract) return;
                $.getJSON(`{{ url('/subcontracts') }}/${selectedContract.id}/claims/data`)
                    .done((res) => { claimsCache = res.data || []; renderClaims(claimsCache); refreshClaimOptions(); })
                    .fail((xhr) => toastError(xhr.responseJSON?.message || 'Gagal load klaim'));
            };
            const loadPayments = () => {
                if (!selectedContract) return;
                $.getJSON(`{{ url('/subcontracts') }}/${selectedContract.id}/payments/data`)
                    .done((res) => renderPayments(res.data || []))
                    .fail((xhr) => toastError(xhr.responseJSON?.message || 'Gagal load pembayaran'));
            };

            const setSelectValue = ($el, id, text) => {
                $el.empty();
                if (id) $el.append(new Option(text || String(id), String(id), true, true)).trigger('change');
                else $el.trigger('change');
            };

            const openContractModal = (row) => {
                $('#contractId').val(row?.id || '');
                $('#contractNo').val(row?.contract_no || '');
                $('#contractDate').val(row?.contract_date || '');
                $('#contractTitle').val(row?.title || '');
                $('#contractAmount').val(row?.contract_amount || 0);
                $('#retentionPercent').val(row?.retention_percent || 0);
                $('#contractNotes').val(row?.notes || '');
                setSelectValue($('#contractProjectId'), row?.project_id || '', row?.project || '');
                setSelectValue($('#contractVendorId'), row?.vendor_id || '', row?.vendor || '');
                setSelectValue($('#apAccountId'), row?.ap_account_id || '', row?.ap_account_id ? ('#' + row.ap_account_id) : '');
                setSelectValue($('#expenseAccountId'), row?.expense_account_id || '', row?.expense_account_id ? ('#' + row.expense_account_id) : '');
                new bootstrap.Modal(document.getElementById('modalContract')).show();
            };

            $('#btnReload').on('click', loadContracts);
            $('#btnClearSelection').on('click', clearSelection);
            $('#btnAddContract').on('click', () => openContractModal(null));

            $('#tblContracts').on('click', 'button.btn-edit', function () {
                const id = $(this).closest('tr').data('id');
                $.getJSON(contractsUrl()).done((res) => {
                    const found = (res.data || []).find((x) => Number(x.id) === Number(id));
                    if (!found) return toastError('Data kontrak tidak ditemukan.');
                    openContractModal(found);
                });
            });
            $('#tblContracts').on('click', 'button.btn-approve', async function () {
                const id = $(this).closest('tr').data('id');
                const ok = await confirmDo('Approve Kontrak?', 'Pastikan akun AP dan akun Biaya sudah diisi.');
                if (!ok) return;
                $.post(`{{ url('/subcontracts') }}/${id}/approve`)
                    .done((res) => { toastOk(res.message || 'Approved'); loadContracts(); })
                    .fail((xhr) => toastError(xhr.responseJSON?.message || 'Gagal approve'));
            });
            $('#tblContracts').on('click', 'button.btn-close', async function () {
                const id = $(this).closest('tr').data('id');
                const ok = await confirmDo('Close Kontrak?', 'Kontrak closed tidak bisa diubah.');
                if (!ok) return;
                $.post(`{{ url('/subcontracts') }}/${id}/close`)
                    .done((res) => { toastOk(res.message || 'Closed'); loadContracts(); })
                    .fail((xhr) => toastError(xhr.responseJSON?.message || 'Gagal close'));
            });
            $('#tblContracts').on('click', 'button.btn-detail', function () {
                const id = $(this).closest('tr').data('id');
                $.getJSON(contractsUrl()).done((res) => {
                    const found = (res.data || []).find((x) => Number(x.id) === Number(id));
                    if (!found) return toastError('Data kontrak tidak ditemukan.');
                    selectedContract = found;
                    $('#tblContracts tbody tr').removeClass('row-selected');
                    $(this).closest('tr').addClass('row-selected');
                    $('#detailSubtitle').text(`${found.project || ''} | ${found.vendor || ''} | ${found.contract_no || ''}`.trim());
                    $('#detailCard').removeClass('d-none');
                    loadClaims(); loadPayments();
                });
            });

            $('#formContract').on('submit', function (e) {
                e.preventDefault();
                const id = $('#contractId').val();
                const payload = {
                    project_id: $('#contractProjectId').val(),
                    vendor_id: $('#contractVendorId').val(),
                    contract_no: $('#contractNo').val(),
                    contract_date: $('#contractDate').val(),
                    title: $('#contractTitle').val(),
                    contract_amount: $('#contractAmount').val(),
                    retention_percent: $('#retentionPercent').val(),
                    ap_account_id: $('#apAccountId').val(),
                    expense_account_id: $('#expenseAccountId').val(),
                    notes: $('#contractNotes').val(),
                };
                const req = id
                    ? $.ajax({ url: `{{ url('/subcontracts') }}/${id}`, method: 'PUT', data: payload })
                    : $.post(`{{ route('subcontract.store') }}`, payload);
                req.done((res) => {
                    toastOk(res.message || 'Saved');
                    bootstrap.Modal.getInstance(document.getElementById('modalContract'))?.hide();
                    loadContracts();
                }).fail((xhr) => toastError(xhr.responseJSON?.message || 'Gagal simpan'));
            });

            $('#btnAddClaim').on('click', () => {
                if (!selectedContract) return toastError('Pilih kontrak dulu.');
                $('#claimNo').val('');
                $('#claimDate').val(`{{ now()->toDateString() }}`);
                $('#claimProgress').val(0);
                $('#claimGross').val('');
                $('#claimDesc').val('');
                new bootstrap.Modal(document.getElementById('modalClaim')).show();
            });
            $('#formClaim').on('submit', function (e) {
                e.preventDefault();
                if (!selectedContract) return toastError('Pilih kontrak dulu.');
                const payload = {
                    claim_no: $('#claimNo').val(),
                    claim_date: $('#claimDate').val(),
                    description: $('#claimDesc').val(),
                    progress_percent: $('#claimProgress').val(),
                    gross_amount: $('#claimGross').val(),
                };
                $.post(`{{ url('/subcontracts') }}/${selectedContract.id}/claims`, payload)
                    .done((res) => {
                        toastOk(res.message || 'Saved');
                        bootstrap.Modal.getInstance(document.getElementById('modalClaim'))?.hide();
                        loadClaims(); loadContracts();
                    })
                    .fail((xhr) => toastError(xhr.responseJSON?.message || 'Gagal simpan klaim'));
            });
            $('#tblClaims').on('click', 'button.btn-claim-submit', async function () {
                const id = $(this).closest('tr').data('id');
                const ok = await confirmDo('Submit Klaim?', 'Klaim submitted menunggu approve.');
                if (!ok) return;
                $.post(`{{ url('/subcontracts/claims') }}/${id}/submit`)
                    .done((res) => { toastOk(res.message || 'Submitted'); loadClaims(); loadContracts(); })
                    .fail((xhr) => toastError(xhr.responseJSON?.message || 'Gagal submit'));
            });
            $('#tblClaims').on('click', 'button.btn-claim-approve', async function () {
                const id = $(this).closest('tr').data('id');
                const ok = await confirmDo('Approve Klaim?', 'Approve akan membuat jurnal otomatis.');
                if (!ok) return;
                $.post(`{{ url('/subcontracts/claims') }}/${id}/approve`)
                    .done((res) => { toastOk(res.message || 'Approved'); loadClaims(); loadContracts(); })
                    .fail((xhr) => toastError(xhr.responseJSON?.message || 'Gagal approve'));
            });
            $('#tblClaims').on('click', 'button.btn-claim-reject', async function () {
                const id = $(this).closest('tr').data('id');
                const reason = await promptText('Reject Klaim', 'Alasan reject (wajib)');
                if (!reason) return;
                $.post(`{{ url('/subcontracts/claims') }}/${id}/reject`, { reason })
                    .done((res) => { toastOk(res.message || 'Rejected'); loadClaims(); loadContracts(); })
                    .fail((xhr) => toastError(xhr.responseJSON?.message || 'Gagal reject'));
            });

            $('#btnAddPayment').on('click', () => {
                if (!selectedContract) return toastError('Pilih kontrak dulu.');
                $('#payDate').val(`{{ now()->toDateString() }}`);
                $('#payAmount').val('');
                $('#payMethod').val('Transfer');
                $('#payRef').val('');
                $('#payNotes').val('');
                refreshClaimOptions();
                new bootstrap.Modal(document.getElementById('modalPayment')).show();
            });
            $('#formPayment').on('submit', function (e) {
                e.preventDefault();
                if (!selectedContract) return toastError('Pilih kontrak dulu.');
                const payload = {
                    pay_date: $('#payDate').val(),
                    amount_idr: $('#payAmount').val(),
                    method: $('#payMethod').val(),
                    reference_number: $('#payRef').val(),
                    notes: $('#payNotes').val(),
                    bank_account_id: $('#bankAccountId').val(),
                    ap_account_id: $('#payApAccountId').val(),
                    claim_id: $('#payClaimId').val(),
                };
                $.post(`{{ url('/subcontracts') }}/${selectedContract.id}/payments`, payload)
                    .done((res) => {
                        toastOk(res.message || 'Draft created');
                        bootstrap.Modal.getInstance(document.getElementById('modalPayment'))?.hide();
                        loadPayments(); loadContracts();
                    })
                    .fail((xhr) => toastError(xhr.responseJSON?.message || 'Gagal simpan pembayaran'));
            });
            $('#tblPayments').on('click', 'button.btn-pay-post', async function () {
                const id = $(this).closest('tr').data('id');
                const ok = await confirmDo('Post Pembayaran?', 'Post akan membuat jurnal otomatis.');
                if (!ok) return;
                $.post(`{{ url('/subcontracts/payments') }}/${id}/post`)
                    .done((res) => { toastOk(res.message || 'Posted'); loadPayments(); loadContracts(); })
                    .fail((xhr) => toastError(xhr.responseJSON?.message || 'Gagal post'));
            });
            $('#tblPayments').on('click', 'button.btn-pay-void', async function () {
                const id = $(this).closest('tr').data('id');
                const ok = await confirmDo('Void Pembayaran?', 'Payment akan ditandai void.');
                if (!ok) return;
                $.post(`{{ url('/subcontracts/payments') }}/${id}/void`)
                    .done((res) => { toastOk(res.message || 'Voided'); loadPayments(); loadContracts(); })
                    .fail((xhr) => toastError(xhr.responseJSON?.message || 'Gagal void'));
            });

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