@extends('layouts.adminlte')

@section('title', 'DETAIL RAB PROJECT')
@section('page_title', 'DETAIL RAB PROJECT')

@section('content')
    <style>
        #detailBody tr.rab-item-requested td {
            color: #0b5ed7;
            text-shadow: 0 0 0.4px rgba(11, 94, 215, 0.9), 0 0 6px rgba(11, 94, 215, 0.18);
        }
        #detailBody tr.rab-item-complete td {
            color: #157347;
            text-shadow: 0 0 0.4px rgba(21, 115, 71, 0.95), 0 0 6px rgba(21, 115, 71, 0.2);
        }
        #detailBody tr.rab-item-partial td {
            color: #b76e00;
            text-shadow: 0 0 0.4px rgba(183, 110, 0, 0.95), 0 0 6px rgba(183, 110, 0, 0.2);
        }
    </style>
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h3 class="card-title m-0">
                {{ $projectCode }} - {{ $projectName }}
            </h3>
            <div class="d-flex gap-2">
                <button type="button" class="btn btn-primary btn-sm" id="btnSendSelectedToPo" disabled>
                    <i class="fas fa-paper-plane me-1"></i>Send to Permintaan Barang (<span id="selectedItemCount">0</span>)
                </button>
                <a href="{{ route('pengajuan') }}" class="btn btn-outline-dark btn-sm">
                    <i class="fas fa-link me-1"></i>Referensi Pengajuan
                </a>
                <a href="{{ route('master_project.rab.page') }}" class="btn btn-outline-secondary btn-sm">
                    <i class="fas fa-arrow-left me-1"></i>Kembali
                </a>
            </div>
        </div>
        <div class="card-body" id="detailBody">
            <div class="text-muted">Memuat rincian...</div>
        </div>
    </div>

    <div class="modal fade" id="rabReviseModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Revisi Item RAB</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="rabReviseForm">
                    <div class="modal-body">
                        <input type="hidden" id="revRabId" />
                        <div class="mb-2 small text-muted" id="revItemInfo">-</div>
                        <div class="mb-3">
                            <label class="form-label">Qty</label>
                            <input type="number" class="form-control" id="revQty" min="0" step="0.001" required />
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Satuan</label>
                            <select class="form-select" id="revSatuanId"></select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Harga Satuan</label>
                            <input type="number" class="form-control" id="revUnitPrice" min="0" step="0.01" required />
                        </div>
                        <div class="small text-muted">Revisi ke: <span id="revCountText">0</span></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">Simpan Revisi</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        $(function () {
            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
            if (csrfToken) {
                $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': csrfToken } });
            }

            const projectId = Number(@json($projectId));
            const canForceReviseRequestedRab = Boolean(@json($canForceReviseRequestedRab ?? false));
            const detailBody = $('#detailBody');
            const btnSendSelectedToPo = $('#btnSendSelectedToPo');
            const selectedItemCount = $('#selectedItemCount');
            const reviseModal = new bootstrap.Modal(document.getElementById('rabReviseModal'));
            let rabRowsCache = [];
            let satuans = [];

            const formatNumber = (value) => Number(value || 0).toLocaleString('id-ID');
            const escapeHtml = (val) => (val || '').toString()
                .replace(/&/g, '&amp;')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;')
                .replace(/"/g, '&quot;')
                .replace(/'/g, '&#039;');
            const updateSelectedState = () => {
                const count = detailBody.find('.rab-item-check:checked').length;
                selectedItemCount.text(String(count));
                btnSendSelectedToPo.prop('disabled', count === 0);
            };

            $.when(
                $.getJSON('{{ route('master_project.rab_scopes.data') }}', { project_id: projectId }),
                $.getJSON('{{ route('master_project.rab.data') }}', { project_id: projectId }),
                $.getJSON('{{ route('master_satuan.data') }}')
            ).done((scopeResp, rabResp, satuanResp) => {
                const scopes = (scopeResp[0]?.data || []).sort((a, b) => Number(a.sort_order || 0) - Number(b.sort_order || 0));
                const rows = rabResp[0]?.data || [];
                rabRowsCache = rows;
                satuans = satuanResp[0]?.data || [];

                if (!scopes.length) {
                    detailBody.html('<div class="alert alert-warning mb-0">Scope belum tersedia untuk project ini.</div>');
                    return;
                }

                const summaryRows = scopes.map((scope) => {
                    const items = rows.filter((r) => Number(r.scope_id || 0) === Number(scope.id));
                    const total = items.reduce((acc, r) => acc + Number(r.total_price || 0), 0);
                    const scopeId = `scope-detail-${scope.id}`;
                    const requestedCount = items.filter((r) => !!r.has_material_request).length;
                    const completedCount = items.filter((r) => (r.fulfillment_status || '') === 'complete').length;
                    const pendingCount = Math.max(0, items.length - requestedCount);

                    const scopeTags = items.length
                        ? `
                            <span class="badge text-bg-info me-1">Diajukan ${requestedCount}/${items.length}</span>
                            <span class="badge text-bg-success me-1">Terpenuhi ${completedCount}</span>
                            <span class="badge text-bg-secondary">Belum Diajukan ${pendingCount}</span>
                        `
                        : `<span class="badge text-bg-secondary">Belum Ada Item</span>`;

                    const itemRows = items.map((item, idx) => {
                        const itemId = `item-detail-${scope.id}-${item.id || idx}`;
                        const fullRincian = escapeHtml(item.rincian || '-');
                        const isRequested = !!item.has_material_request;
                        const rowClass = item.fulfillment_status === 'complete'
                            ? 'rab-item-complete'
                            : item.fulfillment_status === 'partial'
                                ? 'rab-item-partial'
                                : isRequested
                                    ? 'rab-item-requested'
                                    : '';
                        const shortRincian = escapeHtml(
                            (item.rincian || '').toString().length > 48
                                ? `${(item.rincian || '').toString().slice(0, 48)}...`
                                : (item.rincian || '-')
                        );

                        return `
                            <tr class="${rowClass}">
                                <td class="text-center"><input type="checkbox" class="form-check-input rab-item-check" value="${Number(item.id || 0)}" ${isRequested ? 'disabled' : ''} /></td>
                                <td>${idx + 1}</td>
                                <td>${escapeHtml(item.barang_code || item.item_code || '-')}</td>
                                <td>${escapeHtml(item.barang_name || item.item_name || '-')}</td>
                                <td>${escapeHtml(item.merk || '-')}</td>
                                <td class="text-end">${formatNumber(item.qty)}</td>
                                <td>${escapeHtml(item.satuan_code || item.unit || '-')}</td>
                                <td class="text-end">${formatNumber(item.unit_price)}</td>
                                <td class="text-end">${formatNumber(item.total_price)}</td>
                                <td class="text-end">${formatNumber(item.qty_request_total || 0)}</td>
                                <td class="text-end">${formatNumber(item.qty_po_total || 0)}</td>
                                <td class="text-end">${formatNumber(item.qty_pending_total || 0)}</td>
                                <td class="text-end">${Number(item.revision_count || 0)}</td>
                                <td>
                                    ${
                                        item.fulfillment_status === 'complete'
                                            ? '<span class="badge text-bg-success">Terpenuhi</span>'
                                            : item.fulfillment_status === 'partial'
                                                ? '<span class="badge text-bg-warning">PO Parsial</span>'
                                                : item.fulfillment_status === 'requested'
                                                    ? '<span class="badge text-bg-info">Sudah Diminta</span>'
                                                    : '<span class="badge text-bg-secondary">Belum Diminta</span>'
                                    }
                                </td>
                                <td>${shortRincian}</td>
                                <td class="text-end">
                                    ${
                                        ((!canForceReviseRequestedRab && item.has_material_request) || !item.work_order_id)
                                            ? ''
                                            : `<button class="btn btn-xs btn-outline-primary btn-rab-revise me-1" data-id="${Number(item.id || 0)}">Revisi</button>`
                                    }
                                    <button class="btn btn-xs btn-outline-secondary" data-bs-toggle="collapse" data-bs-target="#${itemId}" aria-expanded="false">Detail</button>
                                </td>
                            </tr>
                            <tr class="collapse" id="${itemId}">
                                <td colspan="15" class="bg-light"><strong>Rincian Lengkap:</strong><br>${fullRincian}</td>
                            </tr>
                        `;
                    }).join('');

                    return `
                        <tr>
                            <td>
                                <strong>${escapeHtml(scope.scope_code)}</strong> - ${escapeHtml(scope.scope_name)}
                                <div class="mt-1">${scopeTags}</div>
                            </td>
                            <td class="text-end">${items.length}</td>
                            <td class="text-end">${formatNumber(total)}</td>
                            <td class="text-end">
                                <button class="btn btn-sm btn-outline-primary" data-bs-toggle="collapse" data-bs-target="#${scopeId}" aria-expanded="false">Expand/Collapse Item</button>
                            </td>
                        </tr>
                        <tr class="collapse" id="${scopeId}">
                            <td colspan="4" class="p-0">
                                ${
                                    items.length
                                        ? `
                                        <div class="table-responsive">
                                            <table class="table table-sm table-bordered align-middle mb-0">
                                                <thead>
                                                    <tr>
                                                        <th>Pilih</th>
                                                        <th>#</th>
                                                        <th>Kode</th>
                                                        <th>Nama Barang</th>
                                                        <th>Merk</th>
                                                        <th class="text-end">Qty</th>
                                                        <th>Satuan</th>
                                                        <th class="text-end">Harga Satuan</th>
                                                        <th class="text-end">Total</th>
                                                        <th class="text-end">Permintaan</th>
                                                        <th class="text-end">PO</th>
                                                        <th class="text-end">Sisa</th>
                                                        <th class="text-end">Revisi</th>
                                                        <th>Status Progres</th>
                                                        <th>Rincian Singkat</th>
                                                        <th class="text-end">Detail</th>
                                                    </tr>
                                                </thead>
                                                <tbody>${itemRows}</tbody>
                                            </table>
                                        </div>
                                    `
                                        : `<div class="p-2 text-muted">Belum ada item RAB.</div>`
                                }
                            </td>
                        </tr>
                    `;
                }).join('');

                detailBody.html(`
                    <div class="table-responsive">
                        <table class="table table-bordered align-middle mb-0">
                            <thead>
                                <tr>
                                    <th>Scope</th>
                                    <th class="text-end">Jumlah Item</th>
                                    <th class="text-end">Total Scope</th>
                                    <th class="text-end">Aksi</th>
                                </tr>
                            </thead>
                            <tbody>${summaryRows}</tbody>
                        </table>
                    </div>
                `);
                updateSelectedState();
            }).fail((xhr) => {
                detailBody.html(`<div class="alert alert-danger mb-0">${xhr.responseJSON?.message || 'Gagal memuat data detail RAB.'}</div>`);
            });

            detailBody.on('change', '.rab-item-check', updateSelectedState);

            detailBody.on('click', '.btn-rab-revise', function () {
                const id = Number($(this).data('id') || 0);
                const row = rabRowsCache.find((x) => Number(x.id) === id);
                if (!row) return;
                if (row.has_material_request && !canForceReviseRequestedRab) {
                    Swal.fire('Warning', 'Item sudah diajukan. Tidak bisa direvisi.', 'warning');
                    return;
                }
                $('#revRabId').val(String(row.id));
                $('#revItemInfo').text(`${row.item_code || row.barang_code || '-'} - ${row.item_name || row.barang_name || '-'}`);
                $('#revQty').val(Number(row.qty || 0));
                $('#revUnitPrice').val(Number(row.unit_price || 0));
                $('#revCountText').text(String(Number(row.revision_count || 0) + 1));
                const opt = satuans.map((s) => `<option value="${s.id}">${s.code} - ${s.name}</option>`).join('');
                $('#revSatuanId').html(opt);
                $('#revSatuanId').val(String(row.satuan_id || ''));
                reviseModal.show();
            });

            $('#rabReviseForm').on('submit', function (e) {
                e.preventDefault();
                const id = Number($('#revRabId').val() || 0);
                const row = rabRowsCache.find((x) => Number(x.id) === id);
                if (!row) return;
                const payload = {
                    _token: csrfToken || '',
                    project_id: row.project_id,
                    work_order_id: row.work_order_id,
                    scope_id: row.scope_id,
                    barang_id: row.barang_id,
                    merk: row.merk || '',
                    rincian: row.rincian || '',
                    qty: ($('#revQty').val() || '0').toString(),
                    satuan_id: ($('#revSatuanId').val() || '').toString(),
                    unit_price: ($('#revUnitPrice').val() || '0').toString(),
                    is_active: row.is_active ? 1 : 0
                };
                if (!payload.work_order_id) {
                    Swal.fire('Warning', 'Item tanpa WO tidak bisa direvisi dari halaman ini.', 'warning');
                    return;
                }
                $.ajax({
                    url: `{{ url('/master-project/rab') }}/${id}`,
                    type: 'PUT',
                    data: payload
                }).done((resp) => {
                    reviseModal.hide();
                    Swal.fire('Success', resp?.message || 'Revisi tersimpan', 'success').then(() => window.location.reload());
                }).fail((xhr) => {
                    Swal.fire('Error', xhr.responseJSON?.message || 'Gagal revisi', 'error');
                });
            });

            btnSendSelectedToPo.on('click', function () {
                const ids = detailBody.find('.rab-item-check:checked')
                    .map(function () { return Number($(this).val() || 0); })
                    .get()
                    .filter((id) => id > 0);
                if (!ids.length) {
                    return;
                }
                const url = `{{ route('master_project.material_requests.page') }}?project_id=${projectId}&rab_item_ids=${ids.join(',')}`;
                window.location.href = url;
            });
        });
    </script>
@endpush