@extends('layouts.app')
@php
    $isUpah     = ($type === 'upah');
    $titleLabel = $isUpah ? 'RAB Upah' : 'RAB Material';
    $harsatLabel = $isUpah ? 'Harsat Upah (Rp)' : 'Harga Satuan (Rp)';
    $itemColHeader = $isUpah ? 'Uraian Pekerjaan' : 'Nama Material';
@endphp

@section('title', $titleLabel . ' — ' . $project->nama_proyek)

@section('page-style')
<style>
.rab-table th { background-color: #f8f9fa; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; }
.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: 0.95rem; }
.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' => $isUpah ? 'rab_upah' : 'rab_material'])

{{-- Flash messages --}}
@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 {{ $titleLabel }}
    </button>
    @if($isUpah)
        <button type="button" onclick="printDocumentInIframe('{{ route('admin.rab.printUpah', $project) }}')" class="btn btn-sm btn-outline-secondary">
            <i class="bx bx-printer me-1"></i>Cetak RAP Upah
        </button>
        <a href="{{ route('admin.rab.printUpah', [$project, 'pdf' => 1]) }}" class="btn btn-sm btn-outline-danger">
            <i class="bx bx-file-pdf me-1"></i>Ekspor PDF
        </a>
    @else
        <button type="button" onclick="printDocumentInIframe('{{ route('admin.rab.printMaterial', $project) }}')" class="btn btn-sm btn-outline-secondary">
            <i class="bx bx-printer me-1"></i>Cetak RAB Material
        </button>
        <a href="{{ route('admin.rab.printMaterial', [$project, 'pdf' => 1]) }}" class="btn btn-sm btn-outline-danger">
            <i class="bx bx-file-pdf me-1"></i>Ekspor PDF
        </a>
    @endif
</div>

{{-- Budget Summary Bar --}}
<div class="card mb-4" style="border-left: 4px solid #16a34a;">
    <div class="card-body py-3">
        <div class="row align-items-center g-3">
            <div class="col-md-6">
                <p class="mb-0 text-muted" style="font-size:0.75rem;">TOTAL ANGGARAN {{ strtoupper($titleLabel) }} PROYEK</p>
                <h4 class="mb-0 fw-bold text-success">
                    Rp {{ number_format($grandTotal, 0, ',', '.') }}
                </h4>
            </div>
            <div class="col-md-6 text-md-end">
                <p class="mb-0 text-muted" style="font-size:0.75rem;">RINGKASAN ITEM & {{ $isUpah ? 'KATEGORI' : 'BLOK' }}</p>
                <h5 class="mb-0 fw-semibold">{{ $details->flatten()->count() }} item | {{ $details->count() }} {{ $isUpah ? 'kategori' : 'blok' }}</h5>
            </div>
        </div>
    </div>
</div>

@if($isUpah)
{{-- ==================== FORM TAMBAH ITEM RAB UPAH ==================== --}}
<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 Item Pekerjaan (RAB Upah)</h6>
        <span class="badge bg-label-info" style="font-size:0.75rem;">
            <i class="bx bx-info-circle me-1"></i>Pilih kategori untuk memuat Uraian Pekerjaan & Satuan otomatis
        </span>
    </div>
    <div class="card-body">
        <form action="{{ route('admin.rab.storeDetail', [$project, 'upah']) }}" method="POST" id="formAddRabUpah">
            @csrf
            <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" required>
                        <option value="">-- Pilih / Ketik Kategori (cth: PEKERJAAN PERSIAPAN / PEKERJAAN TANAH) --</option>
                        @foreach($categorySuggestions as $suggestion)
                            <option value="{{ $suggestion }}">{{ $suggestion }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <div id="rabUpahSection" style="display: none;">
                <div class="mb-3">
                    <label class="form-label fw-semibold mb-2" style="font-size:0.85rem;">Daftar Uraian Pekerjaan <span class="text-danger">*</span></label>
                    <div id="rabUpahContainer"></div>
                </div>

                <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 pt-2 border-top mt-3">
                    <button type="button" class="btn btn-outline-primary btn-sm" id="btnAddRabUpahRow">
                        <i class="bx bx-plus me-1"></i>Tambah Baris 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="rabUpahGrandTotal">Rp 0</strong>
                        </div>
                        <button type="submit" class="btn btn-primary btn-sm px-4">
                            <i class="bx bx-save me-1"></i>Simpan RAB Upah
                        </button>
                        <button type="button" class="btn btn-outline-secondary btn-sm" id="btnResetRabUpah">Reset Form</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<template id="rabUpahRowTemplate">
    <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;">Uraian Pekerjaan <span class="text-danger">*</span></label>
                <input type="text" name="items[__IDX__][uraian_pekerjaan]" class="form-control rab-uraian-input" placeholder="Ketik Uraian Pekerjaan" required>
            </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="">-- Sat. --</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;">Harsat Upah (Rp)</label>
                <input type="number" name="items[__IDX__][harga_satuan]" class="form-control text-end rab-harga-input" step="1" min="0" placeholder="0">
            </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 d-flex gap-1">
                    <button type="button" class="btn btn-sm btn-outline-secondary rab-reset-row" style="padding: 2px 6px;" title="Reset Baris ini">
                        <i class="bx bx-refresh" style="font-size:0.9rem;"></i>
                    </button>
                    <button type="button" class="btn btn-sm btn-outline-danger rab-remove-row" style="padding: 2px 6px;" title="Hapus Baris">
                        <i class="bx bx-trash" style="font-size:0.9rem;"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
</template>

@else
{{-- ==================== FORM TAMBAH ITEM RAB MATERIAL (BERBASIS BLOK) ==================== --}}
<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 Item Material (RAB Material)</h6>
        <span class="badge bg-label-success" style="font-size:0.75rem;">
            <i class="bx bx-building-house me-1"></i>Input Per Blok (Kode, Kategori, Nama Material, Spesifikasi, Satuan, Vol, Harsat)
        </span>
    </div>
    <div class="card-body">
        <form action="{{ route('admin.rab.storeDetail', [$project, 'material']) }}" method="POST" id="formAddRabMaterial">
            @csrf

            {{-- Blok 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;">Pilih / Ketik Blok <span class="text-danger">*</span></label>
                    <select name="blok" id="material_blok" class="form-select select2-block" required>
                        <option value="">-- Pilih / Ketik Blok (cth: Blok A / Blok B) --</option>
                        @foreach($presetBlocks as $pb)
                            <option value="{{ $pb }}">{{ $pb }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <div class="mb-3">
                <label class="form-label fw-semibold mb-2" style="font-size:0.85rem;">Daftar Material Per Blok <span class="text-danger">*</span></label>
                <div id="rabMaterialContainer"></div>
            </div>

            <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 pt-2 border-top mt-3">
                <button type="button" class="btn btn-outline-primary btn-sm" id="btnAddRabMaterialRow">
                    <i class="bx bx-plus me-1"></i>Tambah Baris Material
                </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="rabMaterialGrandTotal">Rp 0</strong>
                    </div>
                    <button type="submit" class="btn btn-primary btn-sm px-4">
                        <i class="bx bx-save me-1"></i>Simpan RAB Material
                    </button>
                    <button type="button" class="btn btn-outline-secondary btn-sm" id="btnResetRabMaterial">Reset Form</button>
                </div>
            </div>
        </form>
    </div>
</div>

<template id="rabMaterialRowTemplate">
    <div class="rab-material-row bg-white p-3 border rounded mb-3 shadow-sm" data-index="__IDX__">
        {{-- Row Header: Master Item Selection inside each row --}}
        <div class="row g-2 align-items-center mb-2 pb-2 border-bottom">
            <div class="col-md-6">
                <label class="form-label fw-semibold mb-1" style="font-size:0.75rem; color:#374151;">
                    <i class="bx bx-list-check me-1 text-primary"></i>Pilih dari Master Material (Opsional)
                </label>
                <select class="form-select form-select-sm mat-master-picker">
                    <option value="">-- Input Manual atau Pilih dari Master Material --</option>
                    @foreach($masterItems as $mi)
                        <option value="{{ $mi->id }}"
                                data-kode="{{ $mi->kode_barang }}"
                                data-kategori="{{ $mi->category->name ?? 'Material Bangunan' }}"
                                data-nama="{{ $mi->nama_barang }}"
                                data-satuan="{{ $mi->satuan }}">
                            [{{ $mi->kode_barang }}] {{ $mi->nama_barang }} ({{ $mi->category->name ?? 'Material' }})
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-6 text-md-end">
                <span class="text-muted" style="font-size:0.72rem;">Bisa pilih dari Master di atas atau isi/edit bidang manual di bawah:</span>
            </div>
        </div>

        {{-- Row Body: Material Fields --}}
        <div class="row g-2 align-items-end">
            <div class="col-md-2">
                <label class="form-label fw-semibold mb-1" style="font-size:0.75rem;">Kode Material</label>
                <input type="text" name="items[__IDX__][kode_material]" class="form-control mat-kode-input" placeholder="00-1">
            </div>
            <div class="col-md-2">
                <label class="form-label fw-semibold mb-1" style="font-size:0.75rem;">Kategori Material</label>
                <input type="text" name="items[__IDX__][kategori_material]" class="form-control mat-kat-input" placeholder="Semen / Agregat">
            </div>
            <div class="col-md-3">
                <label class="form-label fw-semibold mb-1" style="font-size:0.75rem;">Nama Material <span class="text-danger">*</span></label>
                <input type="text" name="items[__IDX__][uraian_pekerjaan]" class="form-control mat-nama-input" placeholder="Nama Material (cth: Semen Conch)" required>
            </div>
            <div class="col-md-2">
                <label class="form-label fw-semibold mb-1" style="font-size:0.75rem;">Spesifikasi</label>
                <input type="text" name="items[__IDX__][spesifikasi]" class="form-control mat-spek-input" placeholder="50 Kg / SNI / Cor">
            </div>
            <div class="col-md-1">
                <label class="form-label fw-semibold mb-1" style="font-size:0.75rem;">Satuan <span class="text-danger">*</span></label>
                <input type="text" name="items[__IDX__][satuan]" class="form-control mat-satuan-input" placeholder="Zak" required>
            </div>
            <div class="col-md-1">
                <label class="form-label fw-semibold mb-1" style="font-size:0.75rem;">Volume <span class="text-danger">*</span></label>
                <input type="number" name="items[__IDX__][volume]" class="form-control text-end mat-volume-input" step="0.01" min="0" placeholder="0" required>
            </div>
            <div class="col-md-1">
                <label class="form-label fw-semibold mb-1" style="font-size:0.75rem;">Harsat (Rp)</label>
                <input type="number" name="items[__IDX__][harga_satuan]" class="form-control text-end mat-harga-input" step="1" min="0" placeholder="0">
            </div>
            <div class="col-md-12 d-flex justify-content-between align-items-center mt-2 pt-2 border-top">
                <span class="text-muted" style="font-size:0.75rem;">Subtotal Baris: <strong class="text-success mat-subtotal-display">Rp 0</strong></span>
                <div class="d-flex gap-1">
                    <button type="button" class="btn btn-xs btn-outline-secondary rab-reset-mat-row" style="padding: 2px 8px;" title="Reset Baris Ini">
                        <i class="bx bx-refresh me-1"></i>Reset Baris
                    </button>
                    <button type="button" class="btn btn-xs btn-outline-danger rab-remove-mat-row" style="padding: 2px 8px;" title="Hapus Baris">
                        <i class="bx bx-trash me-1"></i>Hapus Baris
                    </button>
                </div>
            </div>
        </div>
    </div>
</template>
@endif

{{-- TABEL DETAIL RAB (UPAH ATAU MATERIAL) --}}
<div class="card mb-4">
    <div class="card-header py-3 d-flex justify-content-between align-items-center">
        <h6 class="mb-0 fw-bold"><i class="bx bx-table me-2"></i>Rincian {{ $titleLabel }}</h6>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            @if($isUpah)
            {{-- TABEL RAB UPAH (7 KOLOM) --}}
            <table class="table table-bordered rab-table mb-0">
                <thead>
                    <tr>
                        <th style="width:40px;" class="align-middle text-center">No</th>
                        <th class="align-middle">Uraian Pekerjaan</th>
                        <th style="width:70px;" class="align-middle text-center">Sat.</th>
                        <th style="width:90px;" class="align-middle text-end">Volume</th>
                        <th style="width:140px;" class="align-middle text-end">Harsat Upah (Rp)</th>
                        <th style="width:150px;" class="align-middle text-end">Jumlah Upah (Rp)</th>
                        <th style="width:100px;" class="align-middle text-center no-print">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @php $rowNum = 1; @endphp
                    @forelse($details as $catName => $items)
                        <tr class="rab-category-header">
                            <td colspan="7">{{ $catName }}</td>
                        </tr>
                        @foreach($items as $d)
                        @php
                            $rowFiles = $rabDetailFiles->get($d->id, collect());
                            $harsatVal = $d->harga_satuan_upah ?: $d->harga_satuan;
                            $totalVal  = $d->total_harga_upah ?: $d->total_harga;
                        @endphp
                        <tr>
                            <td class="text-center text-muted">{{ $rowNum++ }}</td>
                            <td>
                                {{ $d->uraian_pekerjaan }}
                                @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 class="text-center">{{ $d->satuan }}</td>
                            <td class="text-end">{{ ((float)$d->volume == (int)(float)$d->volume) ? number_format((float)$d->volume, 0, ',', '.') : rtrim(rtrim(number_format((float)$d->volume, 2, ',', '.'), '0'), ',') }}</td>
                            <td class="text-end">{{ number_format($harsatVal, 0, ',', '.') }}</td>
                            <td class="text-end fw-bold text-success">{{ number_format($totalVal, 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="{{ $catName }}"
                                    data-uraian="{{ $d->uraian_pekerjaan }}"
                                    data-satuan="{{ $d->satuan }}"
                                    data-volume="{{ $d->volume }}"
                                    data-harsat="{{ $harsatVal }}"
                                    style="font-size:0.72rem; padding:2px 6px;" title="Edit">
                                    <i class="bx bx-edit-alt"></i>
                                </button>
                                <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, 'upah', $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
                        <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 fw-bold text-success">Rp {{ number_format($subTotalsTotal[$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 Upah.</p>
                        </td>
                    </tr>
                    @endif
                </tbody>
            </table>

            @else
            {{-- TABEL RAB MATERIAL (9 KOLOM PRESISI SESUAI ACUAN KLIEN) --}}
            <table class="table table-bordered rab-table mb-0">
                <thead>
                    <tr>
                        <th style="width:40px;" class="align-middle text-center">No</th>
                        <th style="width:100px;" class="align-middle">Kode Material</th>
                        <th style="width:120px;" class="align-middle">Kategori</th>
                        <th class="align-middle">Nama Material</th>
                        <th style="width:120px;" class="align-middle">Spesifikasi</th>
                        <th style="width:80px;" class="align-middle text-center">Satuan</th>
                        <th style="width:90px;" class="align-middle text-end">Volume</th>
                        <th style="width:130px;" class="align-middle text-end">Harga Satuan (Rp)</th>
                        <th style="width:140px;" class="align-middle text-end">Jumlah (Rp)</th>
                        <th style="width:100px;" class="align-middle text-center no-print">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @php $rowNum = 1; @endphp
                    @forelse($details as $blokName => $items)
                        <tr class="rab-category-header">
                            <td colspan="10"><i class="bx bx-building-house me-1"></i>{{ strtoupper($blokName) }}</td>
                        </tr>
                        @foreach($items as $d)
                        @php
                            $rowFiles = $rabDetailFiles->get($d->id, collect());
                            $harsatVal = $d->harga_satuan_material ?: $d->harga_satuan;
                            $totalVal  = $d->total_harga_material ?: $d->total_harga;
                        @endphp
                        <tr>
                            <td class="text-center text-muted">{{ $rowNum++ }}</td>
                            <td class="fw-semibold text-primary">{{ $d->kode_material ?: '-' }}</td>
                            <td><span class="badge bg-label-secondary" style="font-size:0.75rem;">{{ $d->kategori_material ?: ($d->kategori_nama ?: '-') }}</span></td>
                            <td class="fw-bold">
                                {{ $d->uraian_pekerjaan }}
                                @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><small class="text-muted">{{ $d->spesifikasi ?: '-' }}</small></td>
                            <td class="text-center">{{ $d->satuan }}</td>
                            <td class="text-end">{{ ((float)$d->volume == (int)(float)$d->volume) ? number_format((float)$d->volume, 0, ',', '.') : rtrim(rtrim(number_format((float)$d->volume, 2, ',', '.'), '0'), ',') }}</td>
                            <td class="text-end">{{ number_format($harsatVal, 0, ',', '.') }}</td>
                            <td class="text-end fw-bold text-success">{{ number_format($totalVal, 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-blok="{{ $d->blok ?: 'Blok A' }}"
                                    data-kodemat="{{ $d->kode_material }}"
                                    data-katmat="{{ $d->kategori_material }}"
                                    data-uraian="{{ $d->uraian_pekerjaan }}"
                                    data-spek="{{ $d->spesifikasi }}"
                                    data-satuan="{{ $d->satuan }}"
                                    data-volume="{{ $d->volume }}"
                                    data-harsat="{{ $harsatVal }}"
                                    style="font-size:0.72rem; padding:2px 6px;" title="Edit">
                                    <i class="bx bx-edit-alt"></i>
                                </button>
                                <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, 'material', $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
                        <tr class="rab-subtotal">
                            <td colspan="8" class="text-end pe-3" style="font-size:0.8rem;">Sub Total {{ $blokName }}</td>
                            <td class="text-end fw-bold text-success">Rp {{ number_format($subTotalsTotal[$blokName] ?? 0, 0, ',', '.') }}</td>
                            <td class="no-print"></td>
                        </tr>
                    @empty
                    @endforelse
                    @if($details->isEmpty())
                    <tr>
                        <td colspan="10" 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 Material.</p>
                        </td>
                    </tr>
                    @endif
                </tbody>
            </table>
            @endif
        </div>
    </div>
    <div class="card-footer bg-light py-2">
        <div class="d-flex justify-content-between align-items-center">
            <span class="fw-bold">GRAND TOTAL {{ strtoupper($titleLabel) }}</span>
            <span class="fs-5 fw-bold text-success">Rp {{ number_format($grandTotal, 0, ',', '.') }}</span>
        </div>
    </div>
</div>

{{-- File Lampiran Level Modul / Tempat Penyimpanan File Rekap --}}
@include('admin.partials.project_files_section', [
    'project'      => $project,
    'files'        => $files,
    'modul'        => 'rab_' . $type,
    'sectionTitle' => 'Tempat Penyimpanan File Rekapan ' . $titleLabel,
])

{{-- 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 {{ $titleLabel }}</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">
                        @if($isUpah)
                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Kategori Pekerjaan</label>
                            <input type="text" name="kategori_nama" id="edit_kategori_nama" class="form-control" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Uraian Pekerjaan</label>
                            <input type="text" name="uraian_pekerjaan" id="edit_uraian" class="form-control" required>
                        </div>
                        @else
                        <div class="col-md-4">
                            <label class="form-label fw-semibold">Blok</label>
                            <input type="text" name="blok" id="edit_blok" class="form-control" placeholder="Blok A" required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-semibold">Kode Material</label>
                            <input type="text" name="kode_material" id="edit_kode_material" class="form-control" placeholder="MAT001">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-semibold">Kategori Material</label>
                            <input type="text" name="kategori_material" id="edit_kategori_material" class="form-control" placeholder="Semen / Agregat">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Nama Material</label>
                            <input type="text" name="uraian_pekerjaan" id="edit_uraian" class="form-control" required placeholder="Semen Conch">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Spesifikasi</label>
                            <input type="text" name="spesifikasi" id="edit_spesifikasi" class="form-control" placeholder="50 Kg / SNI">
                        </div>
                        @endif

                        <div class="col-md-4">
                            <label class="form-label fw-semibold">Satuan</label>
                            <input type="text" name="satuan" id="edit_satuan" class="form-control" required>
                        </div>
                        <div class="col-md-4">
                            <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-4">
                            <label class="form-label fw-semibold">{{ $harsatLabel }}</label>
                            <input type="number" name="harga_satuan" id="edit_harga_satuan" class="form-control text-end" step="1" min="0" oninput="hitungEditPreview()">
                        </div>
                        <div class="col-12">
                            <label class="form-label fw-semibold">Total (Preview)</label>
                            <div class="form-control bg-light text-end fw-bold text-success fs-6" 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>

{{-- 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 {{ $titleLabel }}</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 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>
                <div id="attachRowFileList"></div>
            </div>
        </div>
    </div>
</div>

{{-- Modal Import Excel RAB --}}
<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 {{ $titleLabel }}</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 template {{ $titleLabel }}.
                    </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 {{ $titleLabel }} 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 {{ $titleLabel }} yang sudah ada.
                            </label>
                        </div>
                    </div>

                    <div class="pt-2 border-top">
                        <a href="{{ route('admin.rab.downloadTemplate', [$project, $type]) }}" class="btn btn-sm btn-outline-primary w-100">
                            <i class="bx bx-download me-1"></i>Download Template Excel {{ $titleLabel }}
                        </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>Proses Impor</button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

@section('page-script')
<script>
const suggestionsUrl = "{{ route('admin.rab.suggestions', [$project, $type]) }}";
const rabDetailFilesData = @json($rabDetailFilesData);
const isUpah = @json($isUpah);

let rabRowIndex = 0;

function formatRupiahRAB(num) {
    return 'Rp ' + new Intl.NumberFormat('id-ID').format(Math.round(num || 0));
}

function recalcRabUpahGrandTotal() {
    let grand = 0;
    document.querySelectorAll('#rabUpahContainer .rab-item-row').forEach(function(row) {
        const subDisplay = row.querySelector('.rab-subtotal-display');
        if (subDisplay && subDisplay.dataset.raw) {
            grand += parseFloat(subDisplay.dataset.raw) || 0;
        }
    });
    const el = document.getElementById('rabUpahGrandTotal');
    if (el) el.textContent = formatRupiahRAB(grand);
}

function recalcRabMaterialGrandTotal() {
    let grand = 0;
    document.querySelectorAll('#rabMaterialContainer .rab-material-row').forEach(function(row) {
        const subDisplay = row.querySelector('.mat-subtotal-display');
        if (subDisplay && subDisplay.dataset.raw) {
            grand += parseFloat(subDisplay.dataset.raw) || 0;
        }
    });
    const el = document.getElementById('rabMaterialGrandTotal');
    if (el) el.textContent = formatRupiahRAB(grand);
}

function addRabUpahRow(data = null) {
    const tmpl = document.getElementById('rabUpahRowTemplate').innerHTML.replace(/__IDX__/g, rabRowIndex++);
    const container = document.getElementById('rabUpahContainer');
    const div = document.createElement('div');
    div.innerHTML = tmpl;
    const row = div.firstElementChild;
    container.appendChild(row);

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

    const volInput = row.querySelector('.rab-volume-input');
    const harInput = row.querySelector('.rab-harga-input');
    const subDisplay = row.querySelector('.rab-subtotal-display');

    function updateSub() {
        const v = parseFloat(volInput.value) || 0;
        const h = parseFloat(harInput.value) || 0;
        const t = v * h;
        subDisplay.textContent = formatRupiahRAB(t);
        subDisplay.dataset.raw = t;
        recalcRabUpahGrandTotal();
    }

    volInput.addEventListener('input', updateSub);
    harInput.addEventListener('input', updateSub);

    row.querySelector('.rab-reset-row').addEventListener('click', function() {
        row.querySelector('.rab-uraian-input').value = '';
        $unitSelect.val('').trigger('change');
        row.querySelector('.rab-volume-input').value = '';
        row.querySelector('.rab-harga-input').value = '';
        updateSub();
    });

    row.querySelector('.rab-remove-row').addEventListener('click', function() {
        if (document.querySelectorAll('#rabUpahContainer .rab-item-row').length > 1) {
            row.remove();
            recalcRabUpahGrandTotal();
        }
    });

    if (data) {
        if (data.uraian_pekerjaan) row.querySelector('.rab-uraian-input').value = data.uraian_pekerjaan;
        if (data.satuan) $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;
        updateSub();
    }
}

function addRabMaterialRow(data = null) {
    const tmpl = document.getElementById('rabMaterialRowTemplate').innerHTML.replace(/__IDX__/g, rabRowIndex++);
    const container = document.getElementById('rabMaterialContainer');
    const div = document.createElement('div');
    div.innerHTML = tmpl;
    const row = div.firstElementChild;
    container.appendChild(row);

    const $masterPicker = $(row).find('.mat-master-picker');
    $masterPicker.select2({ theme: 'bootstrap-5', width: '100%', placeholder: '-- Input Manual atau Pilih Master Material --' });

    $masterPicker.on('change', function() {
        const opt = $(this).find(':selected');
        if (!opt.val()) return;

        const kode = opt.data('kode') || '';
        const kat  = opt.data('kategori') || '';
        const nama = opt.data('nama') || '';
        const sat  = opt.data('satuan') || '';

        row.querySelector('.mat-kode-input').value = kode;
        row.querySelector('.mat-kat-input').value = kat;
        row.querySelector('.mat-nama-input').value = nama;
        row.querySelector('.mat-satuan-input').value = sat;
    });

    const volInput = row.querySelector('.mat-volume-input');
    const harInput = row.querySelector('.mat-harga-input');
    const subDisplay = row.querySelector('.mat-subtotal-display');

    function updateSub() {
        const v = parseFloat(volInput.value) || 0;
        const h = parseFloat(harInput.value) || 0;
        const t = v * h;
        subDisplay.textContent = formatRupiahRAB(t);
        subDisplay.dataset.raw = t;
        recalcRabMaterialGrandTotal();
    }

    volInput.addEventListener('input', updateSub);
    harInput.addEventListener('input', updateSub);

    row.querySelector('.rab-reset-mat-row').addEventListener('click', function() {
        $masterPicker.val('').trigger('change');
        row.querySelector('.mat-kode-input').value = '';
        row.querySelector('.mat-kat-input').value = '';
        row.querySelector('.mat-nama-input').value = '';
        row.querySelector('.mat-spek-input').value = '';
        row.querySelector('.mat-satuan-input').value = '';
        row.querySelector('.mat-volume-input').value = '';
        row.querySelector('.mat-harga-input').value = '';
        updateSub();
    });

    row.querySelector('.rab-remove-mat-row').addEventListener('click', function() {
        if (document.querySelectorAll('#rabMaterialContainer .rab-material-row').length > 1) {
            row.remove();
            recalcRabMaterialGrandTotal();
        }
    });

    if (data) {
        if (data.kode_material) row.querySelector('.mat-kode-input').value = data.kode_material;
        if (data.kategori_material) row.querySelector('.mat-kat-input').value = data.kategori_material;
        if (data.uraian_pekerjaan) row.querySelector('.mat-nama-input').value = data.uraian_pekerjaan;
        if (data.spesifikasi) row.querySelector('.mat-spek-input').value = data.spesifikasi;
        if (data.satuan) row.querySelector('.mat-satuan-input').value = data.satuan;
        if (data.volume) row.querySelector('.mat-volume-input').value = data.volume;
        if (data.harga_satuan) row.querySelector('.mat-harga-input').value = data.harga_satuan;
        updateSub();
    }
}

$(document).ready(function() {
    if (isUpah) {
        $('.select2-cat').select2({ theme: 'bootstrap-5', width: '100%', tags: true, placeholder: '-- Pilih Kategori Pekerjaan --' });

        $('#kategori_nama').on('change select2:select select2:clear', function() {
            const kat = $(this).val() || '';
            if (!kat) {
                $('#rabUpahContainer').empty();
                rabRowIndex = 0;
                $('#rabUpahSection').hide();
                recalcRabUpahGrandTotal();
                return;
            }

            $('#rabUpahSection').show();
            $.getJSON(suggestionsUrl, { kategori: kat }, function(data) {
                $('#rabUpahContainer').empty();
                rabRowIndex = 0;
                if (Array.isArray(data) && data.length > 0) {
                    data.forEach(function(item) {
                        addRabUpahRow({
                            uraian_pekerjaan: typeof item === 'object' ? item.uraian_pekerjaan : item,
                            satuan: typeof item === 'object' ? item.satuan : '',
                            volume: '',
                            harga_satuan: 0
                        });
                    });
                } else {
                    addRabUpahRow();
                }
                recalcRabUpahGrandTotal();
            });
        });

        $('#btnAddRabUpahRow').on('click', function() { addRabUpahRow(); });

        $('#btnResetRabUpah').on('click', function() {
            document.getElementById('formAddRabUpah').reset();
            $('#kategori_nama').val('').trigger('change');
            $('#rabUpahContainer').empty();
            rabRowIndex = 0;
            $('#rabUpahSection').hide();
            recalcRabUpahGrandTotal();
        });

        addRabUpahRow();
    } else {
        // Init Material Select2
        $('.select2-block').select2({ theme: 'bootstrap-5', width: '100%', tags: true, placeholder: '-- Pilih / Ketik Blok --' });

        $('#btnAddRabMaterialRow').on('click', function() { addRabMaterialRow(); });

        $('#btnResetRabMaterial').on('click', function() {
            document.getElementById('formAddRabMaterial').reset();
            $('#material_blok').val('').trigger('change');
            $('#rabMaterialContainer').empty();
            rabRowIndex = 0;
            addRabMaterialRow();
            recalcRabMaterialGrandTotal();
        });

        addRabMaterialRow();
    }

    // Modal Edit RAB Handler
    $(document).on('click', '.btn-edit-rab', function() {
        const id     = $(this).data('id');
        const cat    = $(this).data('cat') || '';
        const blok   = $(this).data('blok') || '';
        const kodemat= $(this).data('kodemat') || '';
        const katmat = $(this).data('katmat') || '';
        const uraian = $(this).data('uraian') || '';
        const spek   = $(this).data('spek') || '';
        const satuan = $(this).data('satuan') || '';
        const volume = $(this).data('volume') || 0;
        const harsat = $(this).data('harsat') || 0;

        const actionUrl = "{{ route('admin.rab.updateDetail', [$project, $type, ':id']) }}".replace(':id', id);
        $('#formEditRab').attr('action', actionUrl);

        if (isUpah) {
            $('#edit_kategori_nama').val(cat);
        } else {
            $('#edit_blok').val(blok);
            $('#edit_kode_material').val(kodemat);
            $('#edit_kategori_material').val(katmat);
            $('#edit_spesifikasi').val(spek);
        }

        $('#edit_uraian').val(uraian);
        $('#edit_satuan').val(satuan);
        $('#edit_volume').val(volume);
        $('#edit_harga_satuan').val(harsat);

        hitungEditPreview();
        $('#modalEditRab').modal('show');
    });

    // Modal Attach Row Handler
    $(document).on('click', '.btn-attach-row', function() {
        const id     = $(this).data('id');
        const uraian = $(this).data('uraian');
        const mode   = $(this).data('mode');

        $('#attachRowFileableId').val(id);
        $('#attachRowTitle').html('<strong>Material/Uraian:</strong> ' + uraian);

        if (mode === 'view-only') {
            $('#formAttachRow').hide();
        } else {
            $('#formAttachRow').show();
            $('#attachRowFileInput').val('');
            $('#attachRowSubmitBtn').prop('disabled', true);
        }

        const files = rabDetailFilesData[id] || [];
        let html = '';

        if (files.length === 0) {
            html = '<div class="alert alert-secondary py-2 mb-0" style="font-size:0.82rem;"><i class="bx bx-info-circle me-1"></i>Belum ada file lampiran pada baris ini.</div>';
        } else {
            html = '<div class="table-responsive"><table class="table table-sm table-bordered align-middle mb-0" style="font-size:0.82rem;"><thead><tr><th>Nama File</th><th>Ukuran</th><th>Pengunggah</th><th class="text-center">Aksi</th></tr></thead><tbody>';
            files.forEach(function(f) {
                html += '<tr>' +
                    '<td><i class="' + f.icon + ' ' + f.color + ' me-1"></i>' +
                    '<a href="javascript:void(0)" onclick="openFilePreviewModal(\'' + f.preview + '\', \'' + f.download + '\', \'' + f.nama_asli.replace(/'/g, "\\'") + '\')" class="fw-semibold text-body">' + f.nama_asli + '</a></td>' +
                    '<td>' + f.ukuran + '</td>' +
                    '<td>' + f.uploader + '<br><small class="text-muted">' + f.tanggal + '</small></td>' +
                    '<td class="text-center">' +
                    '<button type="button" onclick="openFilePreviewModal(\'' + f.preview + '\', \'' + f.download + '\', \'' + f.nama_asli.replace(/'/g, "\\'") + '\')" class="btn btn-xs btn-outline-info me-1" title="Preview"><i class="bx bx-show"></i></button>' +
                    '<a href="' + f.download + '" class="btn btn-xs btn-outline-primary me-1" title="Download"><i class="bx bx-download"></i></a>' +
                    '<form action="' + f.destroy + '" method="POST" class="d-inline" onsubmit="return confirm(\'Hapus file ini?\')">' +
                    '@csrf @method("DELETE")' +
                    '<button type="submit" class="btn btn-xs btn-outline-danger" title="Hapus"><i class="bx bx-trash"></i></button>' +
                    '</form>' +
                    '</td>' +
                    '</tr>';
            });
            html += '</tbody></table></div>';
        }

        $('#attachRowFileList').html(html);
        $('#modalAttachRow').modal('show');
    });

    $('#attachRowFileInput').on('change', function() {
        $('#attachRowSubmitBtn').prop('disabled', !this.files || this.files.length === 0);
    });
});

function hitungEditPreview() {
    const vol = parseFloat(document.getElementById('edit_volume').value) || 0;
    const har = parseFloat(document.getElementById('edit_harga_satuan').value) || 0;
    const total = vol * har;
    document.getElementById('editPreviewTotal').textContent = formatRupiahRAB(total);
}
</script>
@endsection