@extends('layouts.app')
@section('title', 'RAB ' . ucfirst($type) . ' — ' . $project->nama_proyek)

@section('page-style')
<style>
.rab-table th { background-color: #f8f9fa; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; }
.rab-category-header td { background-color: #e9f5ee; font-weight: 700; color: #15803d; font-size: 0.85rem; }
.rab-subtotal td { background-color: #f0fdf4; font-weight: 600; color: #166534; }
.rab-grandtotal td { background-color: #16a34a; color: #fff; font-weight: 700; font-size: 1rem; }
.input-rupiah { text-align: right; }
.no-print { }
.btn-attach { font-size: 0.7rem; padding: 1px 5px; }
@media print {
    .no-print { display: none !important; }
    .sidebar-wrapper, aside, nav, footer { display: none !important; }
    .layout-page { margin-left: 0 !important; }
}
</style>
@endsection

@section('content')

@include('admin.projects.tabs', ['activeTab' => 'rab_'.$type])

{{-- Flash messages for Import --}}
@if(session('import_success'))
    <div class="alert alert-success alert-dismissible py-2 mb-3 no-print" role="alert">
        <i class="bx bx-check-circle me-1"></i>{{ session('import_success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
@endif
@if(session('import_error'))
    <div class="alert alert-danger alert-dismissible py-2 mb-3 no-print" role="alert">
        <i class="bx bx-x-circle me-1"></i>{{ session('import_error') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
@endif

<div class="d-flex justify-content-end gap-2 mb-3 no-print">
    <button type="button" class="btn btn-sm btn-outline-success" data-bs-toggle="modal" data-bs-target="#modalImportRab">
        <i class="bx bx-file me-1"></i>Import Excel RAP
    </button>
    <button onclick="window.print()" class="btn btn-sm btn-outline-secondary">
        <i class="bx bx-printer me-1"></i>Cetak RAB
    </button>
</div>

{{-- Budget Summary Bar --}}
<div class="card mb-4" style="border-left: 4px solid @if($type==='material') #16a34a @else #2563EB @endif;">
    <div class="card-body py-3">
        <div class="row align-items-center">
            <div class="col-md-4">
                <p class="mb-0 text-muted" style="font-size:0.75rem;">TOTAL ANGGARAN RAB {{ strtoupper($type) }}</p>
                <h4 class="mb-0 fw-bold @if($type==='material') text-success @else text-primary @endif">
                    Rp {{ number_format($grandTotal, 0, ',', '.') }}
                </h4>
            </div>
            <div class="col-md-4">
                <p class="mb-0 text-muted" style="font-size:0.75rem;">JUMLAH ITEM {{ $type === 'material' ? 'MATERIAL' : 'PEKERJAAN' }}</p>
                <h5 class="mb-0 fw-semibold">{{ $details->flatten()->count() }} item</h5>
            </div>
            <div class="col-md-4">
                <p class="mb-0 text-muted" style="font-size:0.75rem;">JUMLAH KATEGORI</p>
                <h5 class="mb-0 fw-semibold">{{ $details->count() }} kategori</h5>
            </div>
        </div>
    </div>
</div>

{{-- Form Tambah Item RAB (Multi-Row Input) --}}
<div class="card mb-4 no-print">
    <div class="card-header py-3 d-flex justify-content-between align-items-center flex-wrap gap-2">
        <h6 class="mb-0 fw-bold"><i class="bx bx-plus-circle me-2 text-primary"></i>Tambah {{ $type === 'material' ? 'Material' : 'Item Pekerjaan' }}</h6>
        <span class="badge bg-label-info" style="font-size:0.75rem;">
            <i class="bx bx-info-circle me-1"></i>Anda dapat menambahkan 1 atau beberapa {{ $type === 'material' ? 'material' : 'uraian pekerjaan' }} sekaligus dalam satu kategori
        </span>
    </div>
    <div class="card-body">
        <form action="{{ route('admin.rab.storeDetail', [$project, $type]) }}" method="POST" id="formAddRab">
            @csrf
            
            {{-- Category Header Selection --}}
            <div class="row mb-3 pb-3 border-bottom">
                <div class="col-md-6">
                    <label class="form-label fw-semibold" style="font-size:0.85rem;">Kategori Pekerjaan <span class="text-danger">*</span></label>
                    <select name="kategori_nama" id="kategori_nama" class="form-select select2-cat @error('kategori_nama') is-invalid @enderror" required>
                        <option value="">-- Pilih / Ketik Kategori (cth: PEKERJAAN TANAH) --</option>
                        @foreach($categorySuggestions as $suggestion)
                            <option value="{{ $suggestion }}" {{ old('kategori_nama') == $suggestion ? 'selected' : '' }}>{{ $suggestion }}</option>
                        @endforeach
                    </select>
                    @error('kategori_nama') <div class="invalid-feedback">{{ $message }}</div> @enderror
                </div>
            </div>

            {{-- Container Baris Item RAB --}}
            <div class="mb-3">
                <label class="form-label fw-semibold mb-2" style="font-size:0.85rem;">
                    Daftar {{ $type === 'material' ? 'Material' : 'Uraian Pekerjaan' }} <span class="text-danger">*</span>
                </label>
                <div id="rabItemContainer">
                    {{-- Row-row item akan dirender secara dinamis oleh JavaScript --}}
                </div>
            </div>

            {{-- Controls & Submission Footer --}}
            <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 pt-2">
                <button type="button" class="btn btn-outline-primary btn-sm" id="btnAddRabRow">
                    <i class="bx bx-plus me-1"></i>Tambah Baris {{ $type === 'material' ? 'Material' : 'Pekerjaan' }}
                </button>
                <div class="d-flex align-items-center gap-3">
                    <div class="text-end">
                        <span class="text-muted" style="font-size:0.8rem;">Total Tambahan:</span>
                        <strong class="text-success ms-1 fs-6" id="rabSubmissionGrandTotal">Rp 0</strong>
                    </div>
                    <button type="submit" class="btn btn-primary btn-sm px-4">
                        <i class="bx bx-save me-1"></i>Simpan {{ $type === 'material' ? 'Material' : 'Item Pekerjaan' }}
                    </button>
                    <button type="button" class="btn btn-outline-secondary btn-sm" id="btnResetRabForm">Reset</button>
                </div>
            </div>
        </form>
    </div>
</div>

{{-- Template Baris Item RAB (Hidden) --}}
<template id="rabRowTemplate">
    <div class="rab-item-row bg-light p-2 border rounded mb-2" data-index="__IDX__">
        <div class="row g-2 align-items-end">
            <div class="col-md-4">
                <label class="form-label fw-semibold mb-1" style="font-size:0.78rem;">
                    {{ $type === 'material' ? 'Nama Material' : 'Uraian Pekerjaan' }} <span class="text-danger">*</span>
                </label>
                <select name="items[__IDX__][uraian_pekerjaan]" class="form-select select2-uraian-row" required>
                    <option value="">-- Pilih / Ketik {{ $type === 'material' ? 'Material' : 'Uraian' }} --</option>
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label fw-semibold mb-1" style="font-size:0.78rem;">Satuan <span class="text-danger">*</span></label>
                <select name="items[__IDX__][satuan]" class="form-select select2-unit-row" required>
                    <option value="">-- Satuan --</option>
                    @foreach($units as $u)
                        <option value="{{ $u->nama_satuan }}">{{ $u->nama_satuan }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label fw-semibold mb-1" style="font-size:0.78rem;">Volume <span class="text-danger">*</span></label>
                <input type="number" name="items[__IDX__][volume]" class="form-control text-end rab-volume-input" step="0.01" min="0" placeholder="0" required>
            </div>
            <div class="col-md-2">
                <label class="form-label fw-semibold mb-1" style="font-size:0.78rem;">Harga Satuan (Rp) <span class="text-danger">*</span></label>
                <input type="number" name="items[__IDX__][harga_satuan]" class="form-control text-end rab-harga-input" step="1" min="0" placeholder="0" required>
            </div>
            <div class="col-md-2 d-flex align-items-center gap-1">
                <div class="flex-grow-1">
                    <label class="form-label fw-semibold mb-1" style="font-size:0.78rem;">Subtotal</label>
                    <div class="form-control bg-white text-end fw-bold text-success rab-subtotal-display" style="font-size:0.82rem;">Rp 0</div>
                </div>
                <div class="pt-3">
                    <button type="button" class="btn btn-sm btn-outline-danger rab-remove-row" style="padding: 2px 7px;" title="Hapus Baris">
                        <i class="bx bx-trash" style="font-size:0.9rem;"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
</template>

{{-- Tabel RAB Detail (Hierarkis per Kategori) --}}
<div class="card">
    <div class="card-header py-3">
        <h6 class="mb-0 fw-bold"><i class="bx bx-table me-2"></i>Rincian RAB {{ ucfirst($type) }}</h6>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-bordered rab-table mb-0">
                <thead>
                    <tr>
                        <th style="width:40px;">No</th>
                        <th>{{ $type === 'material' ? 'Material' : 'Uraian Pekerjaan' }}</th>
                        <th style="width:70px;">Sat.</th>
                        <th style="width:90px;" class="text-end">Volume</th>
                        <th style="width:140px;" class="text-end">Harga Satuan</th>
                        <th style="width:150px;" class="text-end">Jumlah (Rp)</th>
                        <th style="width:110px;" class="text-center no-print">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @php $rowNum = 1; @endphp

                    @forelse($details as $catName => $items)
                        {{-- Category Header Row --}}
                        <tr class="rab-category-header">
                            <td colspan="7">{{ $catName }}</td>
                        </tr>
                        {{-- Detail Rows for this category --}}
                        @foreach($items as $d)
                        @php
                            $catDisplay = $d->kategori_nama ?: ($d->rabCategory->nama_kategori ?? '');
                            $rowFiles   = $rabDetailFiles->get($d->id, collect());
                        @endphp
                        <tr>
                            <td class="text-center text-muted">{{ $rowNum++ }}</td>
                            <td>
                                {{ $d->uraian_pekerjaan }}
                                {{-- [REV-4] Indikator file per baris (dapat diklik untuk melihat list file saja) --}}
                                @if($rowFiles->isNotEmpty())
                                    <span class="badge bg-label-info ms-1 btn-attach-row"
                                          data-id="{{ $d->id }}"
                                          data-uraian="{{ $d->uraian_pekerjaan }}"
                                          data-mode="view-only"
                                          style="cursor: pointer;"
                                          title="Klik untuk lihat {{ $rowFiles->count() }} file terlampir">
                                        <i class="bx bx-paperclip"></i> {{ $rowFiles->count() }}
                                    </span>
                                @endif
                            </td>
                            <td>{{ $d->satuan }}</td>
                            <td class="text-end">{{ number_format($d->volume, 2, ',', '.') }}</td>
                            <td class="text-end">{{ number_format($d->harga_satuan, 0, ',', '.') }}</td>
                            <td class="text-end fw-semibold">{{ number_format($d->total_harga, 0, ',', '.') }}</td>
                            <td class="text-center no-print">
                                <button type="button" class="btn btn-xs btn-outline-warning me-1 btn-edit-rab"
                                    data-id="{{ $d->id }}"
                                    data-cat="{{ $catDisplay }}"
                                    data-uraian="{{ $d->uraian_pekerjaan }}"
                                    data-satuan="{{ $d->satuan }}"
                                    data-volume="{{ $d->volume }}"
                                    data-harga="{{ $d->harga_satuan }}"
                                    style="font-size:0.72rem; padding:2px 6px;"
                                    title="Edit">
                                    <i class="bx bx-edit-alt"></i>
                                </button>
                                {{-- [REV-4] Tombol lampiran per baris --}}
                                <button type="button" class="btn btn-xs btn-outline-secondary me-1 btn-attach-row"
                                    data-id="{{ $d->id }}"
                                    data-uraian="{{ $d->uraian_pekerjaan }}"
                                    style="font-size:0.72rem; padding:2px 6px;"
                                    title="Lampiran File">
                                    <i class="bx bx-paperclip"></i>
                                </button>
                                <form action="{{ route('admin.rab.destroyDetail', [$project, $type, $d]) }}" method="POST" class="d-inline"
                                      onsubmit="return confirm('Hapus item ini?')">
                                    @csrf @method('DELETE')
                                    <button type="submit" class="btn btn-xs btn-outline-danger" style="font-size:0.72rem; padding:2px 6px;" title="Hapus">
                                        <i class="bx bx-trash"></i>
                                    </button>
                                </form>
                            </td>
                        </tr>
                        @endforeach
                        {{-- Sub-total Row --}}
                        <tr class="rab-subtotal">
                            <td colspan="5" class="text-end pe-3" style="font-size:0.8rem;">Sub Total {{ $catName }}</td>
                            <td class="text-end">{{ number_format($subTotals[$catName] ?? 0, 0, ',', '.') }}</td>
                            <td class="no-print"></td>
                        </tr>
                    @empty
                    @endforelse

                    @if($details->isEmpty())
                    <tr>
                        <td colspan="7" class="text-center text-muted py-5">
                            <i class="bx bx-spreadsheet" style="font-size:2.5rem; color:#d1d5db;"></i>
                            <p class="mt-2 mb-0">Belum ada item RAB. Gunakan form di atas untuk menambahkan.</p>
                        </td>
                    </tr>
                    @endif
                </tbody>
                <tfoot>
                    <tr class="rab-grandtotal">
                        <td colspan="5" class="text-end pe-3">GRAND TOTAL RAB {{ strtoupper($type) }}</td>
                        <td class="text-end">Rp {{ number_format($grandTotal, 0, ',', '.') }}</td>
                        <td class="no-print"></td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
</div>

{{-- [REV-4] Section File Lampiran Level Modul --}}
@include('admin.partials.project_files_section', [
    'project'      => $project,
    'files'        => $files,
    'modul'        => 'rab_' . $type,
    'sectionTitle' => 'File Lampiran RAB ' . ucfirst($type),
])

{{-- Modal Edit Item RAB --}}
<div class="modal fade" id="modalEditRab" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title fw-bold"><i class="bx bx-edit me-2"></i>Edit Item RAB</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="formEditRab" method="POST">
                @csrf @method('PUT')
                <div class="modal-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Kategori</label>
                            <select name="kategori_nama" id="edit_kategori_nama" class="form-select select2-modal-cat" required>
                                <option value="">-- Pilih / Ketik Kategori --</option>
                                @foreach($categorySuggestions as $suggestion)
                                    <option value="{{ $suggestion }}">{{ $suggestion }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-semibold">{{ $type === 'material' ? 'Material' : 'Uraian Pekerjaan' }}</label>
                            {{-- [REV-1 & REV-2] Modal edit juga pakai Select2 + auto-suggest --}}
                            <select name="uraian_pekerjaan" id="edit_uraian" class="form-select select2-modal-uraian" required>
                                <option value="">-- Pilih / Ketik {{ $type === 'material' ? 'Material' : 'Uraian' }} --</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label fw-semibold">Satuan</label>
                            <select name="satuan" id="edit_satuan" class="form-select select2-modal-unit" required>
                                <option value="">-- Pilih / Ketik Satuan --</option>
                                @foreach($units as $u)
                                    <option value="{{ $u->nama_satuan }}">{{ $u->nama_satuan }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label fw-semibold">Volume</label>
                            <input type="number" name="volume" id="edit_volume" class="form-control text-end" step="0.01" min="0" required oninput="hitungEditPreview()">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label fw-semibold">Harga Satuan (Rp)</label>
                            <input type="number" name="harga_satuan" id="edit_harga_satuan" class="form-control text-end" step="1" min="0" required oninput="hitungEditPreview()">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label fw-semibold">Total (Preview)</label>
                            <div class="form-control bg-light text-end fw-bold text-success" id="editPreviewTotal">Rp 0</div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary"><i class="bx bx-save me-1"></i>Simpan Perubahan</button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- [REV-4] Modal Lampiran per Baris RAB --}}
<div class="modal fade" id="modalAttachRow" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title fw-bold"><i class="bx bx-paperclip me-2"></i>File Lampiran Baris RAB</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="attachRowModalBody">
                <p class="text-muted mb-3" id="attachRowTitle" style="font-size:0.85rem;"></p>
                {{-- Form Upload --}}
                <form id="formAttachRow" action="{{ route('admin.files.store', $project) }}" method="POST" enctype="multipart/form-data" class="mb-3">
                    @csrf
                    <input type="hidden" name="fileable_type" value="App\Models\RabDetail">
                    <input type="hidden" name="fileable_id"   id="attachRowFileableId" value="">
                    <div class="row g-2 align-items-end">
                        <div class="col-md-8">
                            <label class="form-label fw-semibold" style="font-size:0.82rem;">
                                Pilih File <span class="text-muted fw-normal">(PDF, JPG, PNG — maks. 10MB)</span>
                            </label>
                            <input type="file" name="file" id="attachRowFileInput" class="form-control" accept=".pdf,.jpg,.jpeg,.png" required>
                        </div>
                        <div class="col-md-4">
                            <button type="submit" id="attachRowSubmitBtn" class="btn btn-outline-primary btn-sm w-100" disabled>
                                <i class="bx bx-upload me-1"></i>Upload
                            </button>
                        </div>
                    </div>
                </form>
                {{-- Daftar file per baris —- dirender via JS dari data $rabDetailFiles --}}
                <div id="attachRowFileList"></div>
            </div>
        </div>
    </div>
</div>

{{-- Modal Import Excel RAP --}}
<div class="modal fade" id="modalImportRab" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title fw-bold"><i class="bx bx-file me-2 text-success"></i>Import Excel RAP {{ ucfirst($type) }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form action="{{ route('admin.rab.importExcel', [$project, $type]) }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="modal-body">
                    <div class="alert alert-info py-2 mb-3" style="font-size:0.82rem;">
                        <i class="bx bx-info-circle me-1"></i>
                        Format file harus sesuai dengan RAP standar perusahaan (kolom: NO, URAIAN PEKERJAAN, SAT, VOL, HARSAT).
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-semibold">Pilih File Excel <span class="text-danger">*</span></label>
                        <input type="file" name="file_excel" class="form-control" accept=".xlsx,.xls,.csv" required>
                        <div class="form-text">Format yang didukung: .xlsx, .xls, .csv (Maks 10MB)</div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-semibold">Mode Impor <span class="text-danger">*</span></label>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="import_mode" id="modeOverwrite" value="overwrite" checked>
                            <label class="form-check-label" for="modeOverwrite">
                                <strong>Timpa (Overwrite)</strong> — Hapus data RAB {{ $type }} lama, ganti dengan data Excel baru.
                            </label>
                        </div>
                        <div class="form-check mt-1">
                            <input class="form-check-input" type="radio" name="import_mode" id="modeAppend" value="append">
                            <label class="form-check-label" for="modeAppend">
                                <strong>Tambah (Append)</strong> — Gabungkan item Excel ke data RAB {{ $type }} yang sudah ada.
                            </label>
                        </div>
                    </div>

                    <div class="border-top pt-3 text-center">
                        <a href="{{ route('admin.rab.downloadTemplate', [$project, $type]) }}" class="btn btn-sm btn-outline-secondary">
                            <i class="bx bx-download me-1"></i>Download Template Excel RAP Standar
                        </a>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-success"><i class="bx bx-upload me-1"></i>Mulai Impor</button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

@section('page-script')
<script>
// Data file per baris (dari PHP ke JS)
const rabDetailFilesData = @json($rabDetailFilesData);

const suggestionsUrl = '{{ url("admin/projects/" . $project->id . "/rab/" . $type . "/suggestions") }}';
const uiraianLabel   = '{{ $type === "material" ? "Material" : "Uraian Pekerjaan" }}';

let rabRowIndex = 0;

function formatRupiahRAB(val) {
    return 'Rp ' + Math.round(val).toLocaleString('id-ID');
}

function recalcRabSubmissionGrandTotal() {
    let grand = 0;
    document.querySelectorAll('.rab-subtotal-display').forEach(function(el) {
        const raw = parseFloat(el.dataset.raw || 0);
        grand += raw;
    });
    const grandEl = document.getElementById('rabSubmissionGrandTotal');
    if (grandEl) grandEl.textContent = formatRupiahRAB(grand);
}

function bindRabRowEvents(row) {
    const volInput   = row.querySelector('.rab-volume-input');
    const hargaInput = row.querySelector('.rab-harga-input');
    const subtotal   = row.querySelector('.rab-subtotal-display');

    function updateRowSubtotal() {
        const vol   = parseFloat(volInput.value) || 0;
        const harga = parseFloat(hargaInput.value) || 0;
        const total = vol * harga;
        subtotal.textContent = formatRupiahRAB(total);
        subtotal.dataset.raw = total;
        recalcRabSubmissionGrandTotal();
    }

    if (volInput)   volInput.addEventListener('input', updateRowSubtotal);
    if (hargaInput) hargaInput.addEventListener('input', updateRowSubtotal);

    const removeBtn = row.querySelector('.rab-remove-row');
    if (removeBtn) {
        removeBtn.addEventListener('click', function() {
            if (document.querySelectorAll('.rab-item-row').length > 1) {
                row.remove();
                recalcRabSubmissionGrandTotal();
            } else {
                alert('Minimal harus ada 1 baris item.');
            }
        });
    }
}

function loadUraianSuggestions(kategori, targetSelect, currentValue) {
    const $select = $(targetSelect);
    $select.empty().append(new Option('-- Pilih / Ketik ' + uiraianLabel + ' --', ''));
    if (!kategori) {
        $select.trigger('change');
        return;
    }

    $.getJSON(suggestionsUrl, { kategori: kategori }, function(data) {
        if (Array.isArray(data)) {
            data.forEach(function(uraian) {
                const escaped = uraian.replace(/'/g, "\\'");
                if (!$select.find("option[value='" + escaped + "']").length) {
                    $select.append(new Option(uraian, uraian, false, false));
                }
            });
        }
        if (currentValue) {
            const escapedVal = currentValue.replace(/'/g, "\\'");
            if (!$select.find("option[value='" + escapedVal + "']").length) {
                $select.append(new Option(currentValue, currentValue, true, true));
            } else {
                $select.val(currentValue);
            }
        }
        $select.trigger('change');
    });
}

function addRabRow(data = null) {
    const tmpl = document.getElementById('rabRowTemplate').innerHTML
        .replace(/__IDX__/g, rabRowIndex++);

    const container = document.getElementById('rabItemContainer');
    const div = document.createElement('div');
    div.innerHTML = tmpl;
    const row = div.firstElementChild;
    container.appendChild(row);

    const $uraianSelect = $(row).find('.select2-uraian-row');
    $uraianSelect.select2({
        theme: 'bootstrap-5',
        width: '100%',
        tags: true,
        placeholder: '-- Pilih / Ketik ' + uiraianLabel + ' --'
    });

    const $unitSelect = $(row).find('.select2-unit-row');
    $unitSelect.select2({
        theme: 'bootstrap-5',
        width: '100%',
        tags: true,
        placeholder: '-- Satuan --'
    });

    const selectedCategory = $('#kategori_nama').val();
    if (selectedCategory) {
        loadUraianSuggestions(selectedCategory, $uraianSelect, data ? data.uraian_pekerjaan : null);
    }

    bindRabRowEvents(row);

    if (data) {
        if (data.uraian_pekerjaan) {
            if (!$uraianSelect.find("option[value='" + data.uraian_pekerjaan + "']").length) {
                $uraianSelect.append(new Option(data.uraian_pekerjaan, data.uraian_pekerjaan, true, true));
            }
            $uraianSelect.val(data.uraian_pekerjaan).trigger('change');
        }
        if (data.satuan) {
            if (!$unitSelect.find("option[value='" + data.satuan + "']").length) {
                $unitSelect.append(new Option(data.satuan, data.satuan, true, true));
            }
            $unitSelect.val(data.satuan).trigger('change');
        }
        if (data.volume) {
            row.querySelector('.rab-volume-input').value = data.volume;
        }
        if (data.harga_satuan) {
            row.querySelector('.rab-harga-input').value = data.harga_satuan;
            $(row.querySelector('.rab-harga-input')).trigger('input');
        }
    }
}

$(document).ready(function() {

    function initKategoriSelect2(selector, dropdownParent) {
        const opts = {
            theme: 'bootstrap-5',
            width: '100%',
            tags: true,
            placeholder: '-- Pilih / Ketik Kategori --'
        };
        if (dropdownParent) opts.dropdownParent = dropdownParent;
        return $(selector).select2(opts);
    }

    function initUraianSelect2(selector, dropdownParent) {
        const opts = {
            theme: 'bootstrap-5',
            width: '100%',
            tags: true,
            placeholder: '-- Pilih / Ketik ' + uiraianLabel + ' --'
        };
        if (dropdownParent) opts.dropdownParent = dropdownParent;
        return $(selector).select2(opts);
    }

    // Init Category Select2
    initKategoriSelect2('#kategori_nama');

    // Modal edit Select2
    initKategoriSelect2('#edit_kategori_nama', $('#modalEditRab'));
    initUraianSelect2('#edit_uraian', $('#modalEditRab'));
    $('.select2-modal-unit').select2({ theme:'bootstrap-5', dropdownParent:$('#modalEditRab'), width:'100%', tags:true, placeholder:'-- Pilih / Ketik Satuan --' });

    // Category change handler for main form: update all rows
    $('#kategori_nama').on('change select2:select select2:clear', function() {
        const kat = $(this).val() || '';
        document.querySelectorAll('.select2-uraian-row').forEach(function(selectEl) {
            const curVal = $(selectEl).val();
            loadUraianSuggestions(kat, selectEl, curVal);
        });
    });

    $('#edit_kategori_nama').on('change select2:select select2:clear', function() {
        const kat = $(this).val() || '';
        const currentUraian = $('#edit_uraian').data('current-uraian') || '';
        loadUraianSuggestions(kat, '#edit_uraian', currentUraian);
    });

    $('#btnAddRabRow').on('click', function() {
        addRabRow();
    });

    $('#btnResetRabForm').on('click', function() {
        document.getElementById('formAddRab').reset();
        $('#kategori_nama').val('').trigger('change');
        document.getElementById('rabItemContainer').innerHTML = '';
        rabRowIndex = 0;
        addRabRow();
        recalcRabSubmissionGrandTotal();
    });

    // Populate initial rows (old input or 1 empty row)
    @if(old('items'))
        const oldRabItems = @json(old('items'));
        Object.values(oldRabItems).forEach(function(itemData) {
            addRabRow(itemData);
        });
    @else
        addRabRow();
    @endif

});

// ===== Preview perhitungan di form tambah =====
function hitungPreview() {
    const vol   = parseFloat(document.getElementById('volume').value) || 0;
    const harga = parseFloat(document.getElementById('harga_satuan').value) || 0;
    const total = vol * harga;
    const el    = document.getElementById('previewTotal');
    if (el) el.textContent = 'Rp ' + total.toLocaleString('id-ID', {minimumFractionDigits: 0});
}
document.getElementById('volume').addEventListener('input', hitungPreview);

// ===== Preview edit modal =====
function hitungEditPreview() {
    const vol   = parseFloat(document.getElementById('edit_volume').value) || 0;
    const harga = parseFloat(document.getElementById('edit_harga_satuan').value) || 0;
    const total = vol * harga;
    document.getElementById('editPreviewTotal').textContent = 'Rp ' + total.toLocaleString('id-ID', {minimumFractionDigits: 0});
}

// ===== Trigger Edit Modal =====
document.querySelectorAll('.btn-edit-rab').forEach(function(btn) {
    btn.addEventListener('click', function() {
        const id      = this.dataset.id;
        const cat     = this.dataset.cat;
        const uraian  = this.dataset.uraian;
        const satuan  = this.dataset.satuan;
        const volume  = this.dataset.volume;
        const harga   = this.dataset.harga;

        // Set form action URL
        const baseUrl = '{{ url("admin/projects/" . $project->id . "/rab/" . $type . "/details") }}';
        document.getElementById('formEditRab').action = baseUrl + '/' + id;

        // Set current uraian data attribute (untuk di-load setelah AJAX)
        $('#edit_uraian').data('current-uraian', uraian);

        // Populate kategori
        var catSelect = $('#edit_kategori_nama');
        if (cat && !catSelect.find("option[value='" + cat + "']").length) {
            catSelect.append(new Option(cat, cat, true, true));
        }
        catSelect.val(cat).trigger('change'); // ini akan trigger loadUraianSuggestions + set uraian

        // Satuan
        var satuanSelect = $('#edit_satuan');
        if (satuan && !satuanSelect.find("option[value='" + satuan + "']").length) {
            satuanSelect.append(new Option(satuan, satuan, true, true));
        }
        satuanSelect.val(satuan).trigger('change');

        document.getElementById('edit_volume').value       = volume;
        document.getElementById('edit_harga_satuan').value = harga;
        hitungEditPreview();

        new bootstrap.Modal(document.getElementById('modalEditRab')).show();
    });
});

// ===== [REV-4] Trigger Modal Lampiran per Baris =====
const attachFileInput = document.getElementById('attachRowFileInput');
const attachSubmitBtn = document.getElementById('attachRowSubmitBtn');

if (attachFileInput && attachSubmitBtn) {
    attachFileInput.addEventListener('change', function() {
        attachSubmitBtn.disabled = !this.files || this.files.length === 0;
    });
}

document.querySelectorAll('.btn-attach-row').forEach(function(btn) {
    btn.addEventListener('click', function() {
        const detailId   = this.dataset.id;
        const uraian     = this.dataset.uraian;
        const isViewOnly = this.dataset.mode === 'view-only';

        document.getElementById('attachRowFileableId').value = detailId;
        document.getElementById('attachRowTitle').textContent = uiraianLabel + ': ' + uraian;

        // Toggle form upload (Sembunyikan form jika diklik dari tombol/badge file sebelah uraian pekerjaan)
        const formAttachRow = document.getElementById('formAttachRow');
        if (formAttachRow) {
            formAttachRow.style.display = isViewOnly ? 'none' : 'block';
        }

        // Reset input file & state tombol upload
        if (attachFileInput) attachFileInput.value = '';
        if (attachSubmitBtn) attachSubmitBtn.disabled = true;

        // Render daftar file untuk baris ini
        const fileList = document.getElementById('attachRowFileList');
        const files    = rabDetailFilesData[detailId] || [];

        if (files.length === 0) {
            fileList.innerHTML = '<p class="text-muted text-center" style="font-size:0.85rem;">Belum ada file terlampir untuk item ini.</p>';
        } else {
            let html = '<table class="table table-sm table-hover mb-0"><thead class="table-light"><tr><th></th><th>Nama File</th><th class="text-end">Ukuran</th><th>Tanggal</th><th class="text-center">Aksi</th></tr></thead><tbody>';
            files.forEach(function(f) {
                const csrf = document.querySelector('meta[name="csrf-token"]') ? document.querySelector('meta[name="csrf-token"]').content : '';
                html += `<tr>
                    <td><i class="bx ${f.icon} ${f.color}" style="font-size:1.2rem;"></i></td>
                    <td style="font-size:0.85rem;">
                        <a href="${f.preview}" onclick="openFilePreviewModal('${f.nama_asli.replace(/'/g, "\\'")}', '${f.preview}', '${f.download}', ''); return false;" class="fw-semibold text-primary text-decoration-none" title="Klik untuk lihat preview">
                            ${f.nama_asli} <i class="bx bx-show-alt text-muted" style="font-size:0.8rem;"></i>
                        </a>
                    </td>
                    <td class="text-end text-muted" style="font-size:0.82rem;">${f.ukuran}</td>
                    <td style="font-size:0.82rem;">${f.tanggal}</td>
                    <td class="text-center">
                        <button type="button" onclick="openFilePreviewModal('${f.nama_asli.replace(/'/g, "\\'")}', '${f.preview}', '${f.download}', '')" class="btn btn-xs btn-outline-info me-1" style="font-size:0.72rem; padding:2px 6px;" title="Lihat / Preview"><i class="bx bx-show"></i></button>
                        <a href="${f.download}" class="btn btn-xs btn-outline-success me-1" style="font-size:0.72rem; padding:2px 6px;" title="Download"><i class="bx bx-download"></i></a>
                        <form action="${f.destroy}" method="POST" class="d-inline" onsubmit="return confirm('Hapus file ini?')">
                            <input type="hidden" name="_token" value="${document.querySelector('meta[name=csrf-token]')?.content || ''}">
                            <input type="hidden" name="_method" value="DELETE">
                            <button type="submit" class="btn btn-xs btn-outline-danger" style="font-size:0.72rem; padding:2px 6px;" title="Hapus"><i class="bx bx-trash"></i></button>
                        </form>
                    </td>
                </tr>`;
            });
            html += '</tbody></table>';
            fileList.innerHTML = html;
        }

        new bootstrap.Modal(document.getElementById('modalAttachRow')).show();
    });
});
</script>
@endsection