@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 { }
@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])

<div class="d-flex justify-content-end mb-3 no-print">
    <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>

<datalist id="category_list">
    @foreach($categorySuggestions as $suggestion)
        <option value="{{ $suggestion }}">
    @endforeach
</datalist>

{{-- Form Tambah Item RAB --}}
<div class="card mb-4 no-print">
    <div class="card-header py-3">
        <h6 class="mb-0 fw-bold"><i class="bx bx-plus-circle me-2 text-primary"></i>Tambah {{ $type === 'material' ? 'Material' : 'Item Pekerjaan' }}</h6>
    </div>
    <div class="card-body">
        <form action="{{ route('admin.rab.storeDetail', [$project, $type]) }}" method="POST" id="formAddRab">
            @csrf
            <div class="row g-3 align-items-end">
                <div class="col-md-3">
                    <label class="form-label fw-semibold" style="font-size:0.82rem;">Kategori <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 --</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 class="col-md-3">
                    <label class="form-label fw-semibold" style="font-size:0.82rem;">{{ $type === 'material' ? 'Material' : 'Uraian Pekerjaan' }} <span class="text-danger">*</span></label>
                    <input type="text" name="uraian_pekerjaan" id="uraian_pekerjaan"
                        class="form-control @error('uraian_pekerjaan') is-invalid @enderror"
                        value="{{ old('uraian_pekerjaan') }}"
                        placeholder="{{ $type === 'material' ? 'cth: Semen PCC 50kg' : 'cth: Pek. Galian Tanah' }}" required>
                    @error('uraian_pekerjaan') <div class="invalid-feedback">{{ $message }}</div> @enderror
                </div>
                <div class="col-md-2">
                    <label class="form-label fw-semibold" style="font-size:0.82rem;">Satuan <span class="text-danger">*</span></label>
                    <select name="satuan" id="satuan" class="form-select select2-unit @error('satuan') is-invalid @enderror" required>
                        <option value="">-- Pilih / Ketik Satuan --</option>
                        @foreach($units as $u)
                            <option value="{{ $u->nama_satuan }}" {{ old('satuan') == $u->nama_satuan ? 'selected' : '' }}>{{ $u->nama_satuan }}</option>
                        @endforeach
                    </select>
                    @error('satuan') <div class="invalid-feedback">{{ $message }}</div> @enderror
                </div>
                <div class="col-md-2">
                    <label class="form-label fw-semibold" style="font-size:0.82rem;">Volume <span class="text-danger">*</span></label>
                    <input type="number" name="volume" id="volume"
                        class="form-control input-rupiah @error('volume') is-invalid @enderror"
                        value="{{ old('volume') }}" step="0.01" min="0" placeholder="0" required>
                </div>
                <div class="col-md-2">
                    <label class="form-label fw-semibold" style="font-size:0.82rem;">Harga Satuan (Rp) <span class="text-danger">*</span></label>
                    <input type="number" name="harga_satuan" id="harga_satuan"
                        class="form-control input-rupiah @error('harga_satuan') is-invalid @enderror"
                        value="{{ old('harga_satuan') }}" step="1" min="0" placeholder="0" required
                        oninput="hitungPreview()">
                </div>
            </div>
            <div class="mt-3 text-end">
                <button type="submit" class="btn btn-primary btn-sm px-4">
                    <i class="bx bx-plus me-1"></i>Tambah Item
                </button>
                <button type="reset" class="btn btn-outline-secondary btn-sm" onclick="document.getElementById('previewTotal').textContent='Rp 0'">Reset</button>
            </div>
        </form>
    </div>
</div>

{{-- 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:80px;" 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 ?? '');
                        @endphp
                        <tr>
                            <td class="text-center text-muted">{{ $rowNum++ }}</td>
                            <td>{{ $d->uraian_pekerjaan }}</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>
                                <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>

{{-- 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>
                            <input type="text" name="uraian_pekerjaan" id="edit_uraian" class="form-control" required>
                        </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>

@endsection

@section('page-script')
<script>
$(document).ready(function() {
    $('.select2-cat').select2({
        theme: 'bootstrap-5',
        width: '100%',
        tags: true,
        placeholder: '-- Pilih / Ketik Kategori --'
    });

    $('.select2-unit').select2({
        theme: 'bootstrap-5',
        width: '100%',
        tags: true,
        placeholder: '-- Pilih / Ketik Satuan --'
    });

    $('.select2-modal-cat').select2({
        theme: 'bootstrap-5',
        dropdownParent: $('#modalEditRab'),
        width: '100%',
        tags: true,
        placeholder: '-- Pilih / Ketik Kategori --'
    });

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

// ---- 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;
    document.getElementById('previewTotal').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;

        // Populate fields
        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');

        document.getElementById('edit_uraian').value = uraian;

        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();

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