@extends('layouts.app')

@section('title', ($pengajuanKelompok->kelompok->nama ?? 'Batch') . ' — Detail Pengajuan')

@push('styles')
<style>
    /* Tab navigation dalam accordion */
    .debitur-tabs .nav-link {
        font-size: .82rem;
        padding: .4rem .85rem;
        color: #6c757d;
    }
    .debitur-tabs .nav-link.active {
        font-weight: 600;
        color: var(--bpdlh-green);
        border-color: #dee2e6 #dee2e6 #fff;
    }
    /* Accordion debitur — header lebih compact */
    .debitur-accordion .accordion-button {
        font-size: .9rem;
        padding: .75rem 1.25rem;
        gap: .75rem;
    }
    .debitur-accordion .accordion-button:not(.collapsed) {
        background: var(--los-green-bg, #eaf4ee);
        color: var(--bpdlh-green);
        box-shadow: none;
    }
    /* Tabel dokumen compact */
    .tbl-dokumen th, .tbl-dokumen td {
        font-size: .82rem;
        vertical-align: middle;
        padding: .45rem .75rem;
    }
    /* Biaya usaha section header */
    .section-label {
        font-size: .7rem;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: rgba(0,0,0,.4);
        padding: .35rem 0 .15rem;
        border-bottom: 1px solid #f0f0f0;
        margin-bottom: .5rem;
    }
</style>
@endpush

@php
    $kelompok      = $pengajuanKelompok->kelompok;
    $allPengajuan  = $pengajuanKelompok->pengajuan;
    $total         = $allPengajuan->count();
    $draftCount    = $allPengajuan->where('status', 'draft')->count();
    $doneCount     = $total - $draftCount;
    $pct           = $total > 0 ? round($doneCount / $total * 100) : 0;

    $docsKelompok  = $pengajuanKelompok->dokumen->keyBy('jenis');

    $labelDokDebitur = [
        'ktp_pemohon'                   => 'KTP Pemohon',
        'ktp_pasangan'                   => 'KTP Pasangan',
        'kartu_keluarga'                 => 'Kartu Keluarga',
        'formulir_permohonan_perorangan' => 'Formulir Permohonan Perorangan',
        'dokumen_penguasaan_lahan'       => 'Dokumen Penguasaan Lahan',
        'surat_permohonan_fdb'           => 'Surat Permohonan FDB',
    ];
@endphp

@section('content')
<div class="container-fluid px-3 px-md-4 py-4">

    <x-ui.alert :flash="true" />

    <x-ui.page-header
        title="{{ $kelompok->nama ?? 'Batch' }} — Ronde {{ $pengajuanKelompok->created_at->translatedFormat('M Y') }}"
        subtitle="Detail Pengajuan (Monitoring)"
        back="{{ route('penelaah.pengajuan.index') }}"
    />

    {{-- Summary row --}}
    <div class="card shadow-sm border-0 rounded-3 mb-4">
        <div class="card-body py-3">
            <div class="row g-3 align-items-center">
                <div class="col-12 col-md-8">
                    <div class="d-flex flex-wrap gap-3">
                        <span class="text-muted small">
                            <i class="bi bi-people-fill me-1"></i>
                            <strong>{{ $kelompok->nama ?? '-' }}</strong>
                        </span>
                        <span class="text-muted small">
                            <i class="bi bi-calendar3 me-1"></i>
                            Ronde {{ $pengajuanKelompok->created_at->translatedFormat('M Y') }}
                        </span>
                        <span class="text-muted small">
                            <i class="bi bi-person-lines-fill me-1"></i>
                            {{ $total }} debitur
                        </span>
                    </div>
                </div>
                <div class="col-12 col-md-4">
                    <div class="d-flex align-items-center gap-2">
                        <div class="progress flex-fill" style="height:6px;">
                            <div class="progress-bar bg-success" style="width:{{ $pct }}%"></div>
                        </div>
                        <small class="text-muted text-nowrap">{{ $doneCount }}/{{ $total }} selesai</small>
                    </div>
                    @if($doneCount === $total && $total > 0)
                    <small class="text-warning d-block mt-1">
                        <i class="bi bi-hourglass-split me-1"></i>Menunggu submit PL
                    </small>
                    @endif
                </div>
            </div>
        </div>
    </div>

    {{-- Dokumen Kelompok — default expanded (tanpa collapsible) --}}
    <x-ui.section-card title="Dokumen Kelompok" icon="bi-folder2-open" :padding="false" class="mb-4">
        <div class="table-responsive">
            <table class="table table-hover tbl-dokumen mb-0">
                <thead class="table-light">
                    <tr>
                        <th class="ps-4">#</th>
                        <th>Nama Dokumen</th>
                        <th class="text-center">Wajib</th>
                        <th class="text-center">Status</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    @foreach(\App\Models\DokumenKelompok::JENIS_DOKUMEN as $key => $label)
                    @php
                        $doc   = $docsKelompok->get($key);
                        $ada   = $doc?->ada ?? false;
                        $wajib = in_array($key, \App\Models\DokumenKelompok::WAJIB);
                    @endphp
                    <tr>
                        <td class="ps-4 text-muted">{{ $loop->iteration }}</td>
                        <td>{{ $label }}</td>
                        <td class="text-center">
                            @if($wajib)
                                <span class="badge bg-danger-subtle text-danger rounded-pill">Wajib</span>
                            @else
                                <span class="text-muted">—</span>
                            @endif
                        </td>
                        <td class="text-center">
                            @if($ada)
                                <span class="badge bg-success-subtle text-success">
                                    <i class="bi bi-check-lg me-1"></i>Ada
                                </span>
                            @else
                                <span class="badge bg-secondary-subtle text-secondary">
                                    <i class="bi bi-x me-1"></i>Belum
                                </span>
                            @endif
                        </td>
                        <td class="pe-3 text-end">
                            @if($ada && $doc?->file_path)
                                <a href="{{ Storage::url($doc->file_path) }}"
                                   target="_blank"
                                   class="btn btn-xs btn-outline-primary btn-sm py-0 px-2">
                                    <i class="bi bi-box-arrow-up-right me-1"></i>Lihat
                                </a>
                            @endif
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </x-ui.section-card>

    {{-- Daftar Debitur — Bootstrap Accordion --}}
    <div class="mb-1">
        <h6 class="fw-semibold mb-3" style="color:var(--bpdlh-green);">
            <i class="bi bi-person-lines-fill me-2"></i>Daftar Debitur
        </h6>
    </div>

    @if($allPengajuan->isEmpty())
        <x-ui.empty-state icon="bi-person-x" title="Tidak ada debitur"
            desc="Batch ini belum memiliki data debitur." />
    @else
    <div class="accordion debitur-accordion shadow-sm rounded-3 overflow-hidden mb-4"
         id="accordionDebitur">

        @foreach($allPengajuan as $loop_i => $pengajuan)
        @php
            $debitur    = $pengajuan->debitur;
            $accordionId = 'debitur-'.$pengajuan->id;
            $isFirst    = $loop_i === 0;
        @endphp
        <div class="accordion-item border-0 {{ !$isFirst ? 'border-top' : '' }}">
            <h2 class="accordion-header">
                <button class="accordion-button {{ $isFirst ? '' : 'collapsed' }}"
                        type="button"
                        data-bs-toggle="collapse"
                        data-bs-target="#{{ $accordionId }}"
                        aria-expanded="{{ $isFirst ? 'true' : 'false' }}"
                        aria-controls="{{ $accordionId }}">
                    <span class="fw-semibold">{{ $debitur->nama ?? '-' }}</span>
                    <span class="text-muted small ms-2 d-none d-sm-inline">
                        NIK {{ $debitur->nik ?? '-' }}
                    </span>
                    <span class="ms-auto me-2">
                        <x-pengajuan.status-badge :status="$pengajuan->status" />
                    </span>
                </button>
            </h2>

            <div id="{{ $accordionId }}"
                 class="accordion-collapse collapse {{ $isFirst ? 'show' : '' }}"
                 data-bs-parent="#accordionDebitur">
                <div class="accordion-body p-0">

                    {{-- Nav Tabs --}}
                    <ul class="nav nav-tabs debitur-tabs px-3 pt-2 border-bottom bg-light"
                        id="tabs-{{ $pengajuan->id }}" role="tablist">
                        @foreach([
                            ['aplikasi',  'Aplikasi Perorangan', 'bi-person-badge'],
                            ['sak',       'SAK',                 'bi-cash-stack'],
                            ['tallysheet','Tallysheet',          'bi-table'],
                            ['dokumen',   'Dokumen',             'bi-folder'],
                        ] as [$key, $label, $icon])
                        <li class="nav-item" role="presentation">
                            <button class="nav-link {{ $key === 'aplikasi' ? 'active' : '' }}"
                                    id="tab-{{ $key }}-{{ $pengajuan->id }}"
                                    data-bs-toggle="tab"
                                    data-bs-target="#pane-{{ $key }}-{{ $pengajuan->id }}"
                                    type="button" role="tab">
                                <i class="bi {{ $icon }} me-1 d-none d-sm-inline"></i>{{ $label }}
                            </button>
                        </li>
                        @endforeach
                    </ul>

                    <div class="tab-content p-3">

                        {{-- ── Tab 1: Aplikasi Perorangan ─────────────────── --}}
                        <div class="tab-pane fade show active"
                             id="pane-aplikasi-{{ $pengajuan->id }}" role="tabpanel">
                            @if(!$debitur)
                                <x-ui.empty-state icon="bi-person-x" title="Data belum diisi"
                                    desc="PL belum mengisi data debitur." />
                            @else
                            <div class="row g-0">
                                {{-- Identitas Pemohon --}}
                                <div class="col-12">
                                    <div class="section-label">Identitas Pemohon</div>
                                </div>
                                <div class="col-12 col-md-6 col-lg-4">
                                    <x-ui.data-field label="Nama Pemohon" :value="$debitur->nama" />
                                </div>
                                <div class="col-12 col-md-6 col-lg-4">
                                    <x-ui.data-field label="NIK" :value="$debitur->nik" />
                                </div>
                                <div class="col-12 col-md-6 col-lg-4">
                                    <x-ui.data-field label="No. KK" :value="$debitur->no_kk" />
                                </div>
                                <div class="col-12 col-md-6 col-lg-4">
                                    <x-ui.data-field label="Tempat Lahir" :value="$debitur->tempat_lahir" />
                                </div>
                                <div class="col-12 col-md-6 col-lg-4">
                                    <x-ui.data-field label="Tanggal Lahir"
                                        :value="$debitur->tanggal_lahir?->format('d M Y')" />
                                </div>
                                <div class="col-12 col-md-6 col-lg-4">
                                    <x-ui.data-field label="Jenis Kelamin" :value="$debitur->jenis_kelamin" />
                                </div>
                                <div class="col-12 col-md-6 col-lg-4">
                                    <x-ui.data-field label="Status Kawin" :value="$debitur->status_kawin" />
                                </div>
                                <div class="col-12 col-md-6 col-lg-4">
                                    <x-ui.data-field label="Tanggungan" :value="$debitur->tanggungan" />
                                </div>
                                @if($debitur->nama_pasangan)
                                <div class="col-12 col-md-6 col-lg-4">
                                    <x-ui.data-field label="Nama Pasangan" :value="$debitur->nama_pasangan" />
                                </div>
                                <div class="col-12 col-md-6 col-lg-4">
                                    <x-ui.data-field label="NIK Pasangan" :value="$debitur->nik_pasangan" />
                                </div>
                                <div class="col-12 col-md-6 col-lg-4">
                                    <x-ui.data-field label="Tgl Lahir Pasangan"
                                        :value="$debitur->tanggal_lahir_pasangan?->format('d M Y')" />
                                </div>
                                @endif
                                <div class="col-12">
                                    <x-ui.data-field label="Alamat / Domisili" :value="$debitur->alamat" />
                                </div>

                                {{-- Permohonan Pembiayaan --}}
                                <div class="col-12 mt-2">
                                    <div class="section-label">Permohonan Pembiayaan</div>
                                </div>
                                <div class="col-12 col-md-4">
                                    <x-ui.data-field label="Nilai Permohonan"
                                        :value="$pengajuan->nilai_permohonan" currency />
                                </div>
                                <div class="col-12 col-md-4">
                                    <x-ui.data-field label="Jangka Waktu"
                                        :value="($pengajuan->jangka_waktu_bulan ? $pengajuan->jangka_waktu_bulan.' bulan' : null)" />
                                </div>
                                <div class="col-12 col-md-4">
                                    <x-ui.data-field label="Usaha Dibiayai" :value="$pengajuan->usaha_dibiayai" />
                                </div>

                                {{-- Usaha --}}
                                <div class="col-12 mt-2">
                                    <div class="section-label">Data Usaha</div>
                                </div>
                                <div class="col-12 col-md-4">
                                    <x-ui.data-field label="Lama Usaha"
                                        :value="($debitur->lama_usaha_tahun ? $debitur->lama_usaha_tahun.' tahun' : null)" />
                                </div>
                                <div class="col-12 col-md-4">
                                    <x-ui.data-field label="Sektor Ekonomi" :value="$pengajuan->sektor_ekonomi" />
                                </div>
                                <div class="col-12 col-md-4">
                                    <x-ui.data-field label="Status Kepemilikan Usaha"
                                        :value="$debitur->status_kepemilikan_usaha" />
                                </div>
                            </div>
                            @endif
                        </div>

                        {{-- ── Tab 2: SAK ──────────────────────────────────── --}}
                        <div class="tab-pane fade"
                             id="pane-sak-{{ $pengajuan->id }}" role="tabpanel">
                            @php
                                $biayaBySection    = $pengajuan->biayaUsaha->groupBy('section');
                                $pendapatanLainnya = $pengajuan->pendapatanLainnya;
                                $biayaHidup        = $pengajuan->biayaHidup;
                            @endphp

                            {{-- Biaya Usaha --}}
                            @if($biayaBySection->isEmpty())
                                <x-ui.empty-state icon="bi-hourglass" title="Belum diisi"
                                    desc="PL belum mengisi data biaya usaha." />
                            @else
                                @foreach($biayaBySection as $section => $items)
                                <div class="section-label">{{ $section ?: 'Biaya Usaha' }}</div>
                                <div class="table-responsive mb-3">
                                    <table class="table table-sm tbl-dokumen mb-0">
                                        <thead class="table-light">
                                            <tr>
                                                <th>Item</th>
                                                <th class="text-end">Qty</th>
                                                <th>Satuan</th>
                                                <th class="text-end">Harga/Satuan</th>
                                                <th class="text-end">Total</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($items->sortBy('urutan') as $b)
                                            <tr>
                                                <td>{{ $b->nama_item }}</td>
                                                <td class="text-end">{{ $b->qty }}</td>
                                                <td>{{ $b->satuan }}</td>
                                                <td class="text-end">Rp {{ number_format($b->harga_per_satuan, 0, ',', '.') }}</td>
                                                <td class="text-end fw-semibold">Rp {{ number_format($b->total, 0, ',', '.') }}</td>
                                            </tr>
                                            @endforeach
                                            <tr class="table-light fw-semibold">
                                                <td colspan="4" class="text-end">Total</td>
                                                <td class="text-end">Rp {{ number_format($items->sum('total'), 0, ',', '.') }}</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                @endforeach
                            @endif

                            {{-- Pendapatan Lainnya --}}
                            <div class="section-label mt-2">Pendapatan Lainnya</div>
                            @if(!$pendapatanLainnya)
                                <p class="text-muted small fst-italic">Belum diisi.</p>
                            @else
                            <div class="row g-0">
                                <div class="col-12 col-md-6">
                                    <x-ui.data-field label="Pendapatan Usaha Lain / bulan"
                                        :value="$pendapatanLainnya->pendapatan_usaha_lain_per_bulan" currency />
                                </div>
                                <div class="col-12 col-md-6">
                                    <x-ui.data-field label="Pendapatan Pasangan / bulan"
                                        :value="$pendapatanLainnya->pendapatan_pasangan_per_bulan" currency />
                                </div>
                            </div>
                            @endif

                            {{-- Biaya Hidup --}}
                            <div class="section-label mt-2">Biaya Hidup</div>
                            @if(!$biayaHidup)
                                <p class="text-muted small fst-italic">Belum diisi.</p>
                            @else
                            <div class="row g-0">
                                @foreach([
                                    'rumah_tangga'   => 'Rumah Tangga',
                                    'listrik_air'    => 'Listrik & Air',
                                    'transportasi'   => 'Transportasi',
                                    'pendidikan'     => 'Pendidikan',
                                    'pulsa_internet' => 'Pulsa & Internet',
                                    'kontrakan'      => 'Kontrakan',
                                    'lain_lain'      => 'Lain-lain',
                                ] as $field => $label)
                                <div class="col-12 col-md-6 col-lg-4">
                                    <x-ui.data-field :label="$label" :value="$biayaHidup->$field" currency />
                                </div>
                                @endforeach
                                <div class="col-12">
                                    <x-ui.data-field label="Total Biaya Hidup / bulan"
                                        :value="$biayaHidup->total" currency />
                                </div>
                            </div>
                            @endif
                        </div>

                        {{-- ── Tab 3: Tallysheet ───────────────────────────── --}}
                        <div class="tab-pane fade"
                             id="pane-tallysheet-{{ $pengajuan->id }}" role="tabpanel">
                            @php $ts = $pengajuan->tallysheetMuk; @endphp
                            @if(!$ts)
                                <x-ui.empty-state icon="bi-hourglass" title="Belum diisi"
                                    desc="PL belum mengisi data tallysheet." />
                            @else
                            <div class="row g-0 mb-3">
                                <div class="col-12 col-md-4">
                                    <x-ui.data-field label="Siklus Usaha"
                                        :value="($ts->siklus_usaha_bulan ? $ts->siklus_usaha_bulan.' bulan' : null)" />
                                </div>
                                <div class="col-12 col-md-4">
                                    <x-ui.data-field label="Panen / Tahun"
                                        :value="($ts->panen_per_tahun ? $ts->panen_per_tahun.'x' : null)" />
                                </div>
                                <div class="col-12 col-md-4">
                                    <x-ui.data-field label="Nilai Jaminan MUK" :value="$ts->nilai_jaminan" currency />
                                </div>
                            </div>

                            @if($ts->produksiBulanan->isEmpty())
                                <p class="text-muted small fst-italic">Belum ada data produksi bulanan.</p>
                            @else
                            <div class="section-label">Produksi Bulanan</div>
                            <div class="table-responsive">
                                <table class="table table-sm tbl-dokumen mb-0">
                                    <thead class="table-light">
                                        <tr>
                                            <th>Bulan</th>
                                            <th class="text-end">Qty (kg)</th>
                                            <th class="text-end">Harga/kg</th>
                                            <th class="text-end">Total</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($ts->produksiBulanan as $pb)
                                        <tr>
                                            <td>{{ \App\Models\ProduksiBulanan::getNamaBulan($pb->bulan) }}</td>
                                            <td class="text-end">{{ number_format($pb->qty_panen_kg, 0, ',', '.') }}</td>
                                            <td class="text-end">Rp {{ number_format($pb->harga_per_kg, 0, ',', '.') }}</td>
                                            <td class="text-end fw-semibold">Rp {{ number_format($pb->total_harga, 0, ',', '.') }}</td>
                                        </tr>
                                        @endforeach
                                        <tr class="table-light fw-semibold">
                                            <td colspan="3" class="text-end">Total Produksi Tahunan</td>
                                            <td class="text-end">Rp {{ number_format($ts->produksiBulanan->sum('total_harga'), 0, ',', '.') }}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            @endif
                            @endif
                        </div>

                        {{-- ── Tab 4: Dokumen Debitur ──────────────────────── --}}
                        <div class="tab-pane fade"
                             id="pane-dokumen-{{ $pengajuan->id }}" role="tabpanel">
                            @php $doksByJenis = $pengajuan->dokumen->keyBy('jenis'); @endphp
                            @if($doksByJenis->isEmpty())
                                <x-ui.empty-state icon="bi-file-earmark-x" title="Belum ada dokumen"
                                    desc="PL belum mengupload dokumen untuk debitur ini." />
                            @else
                            <div class="table-responsive">
                                <table class="table table-hover tbl-dokumen mb-0">
                                    <thead class="table-light">
                                        <tr>
                                            <th>#</th>
                                            <th>Nama Dokumen</th>
                                            <th class="text-center">Status</th>
                                            <th></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($labelDokDebitur as $key => $label)
                                        @php $dok = $doksByJenis->get($key); @endphp
                                        <tr>
                                            <td class="text-muted">{{ $loop->iteration }}</td>
                                            <td>{{ $label }}</td>
                                            <td class="text-center">
                                                @if($dok)
                                                    <span class="badge bg-success-subtle text-success">
                                                        <i class="bi bi-check-lg me-1"></i>Ada
                                                    </span>
                                                @else
                                                    <span class="badge bg-secondary-subtle text-secondary">
                                                        <i class="bi bi-x me-1"></i>Belum
                                                    </span>
                                                @endif
                                            </td>
                                            <td class="text-end pe-2">
                                                @if($dok?->file_path)
                                                    <a href="{{ Storage::url($dok->file_path) }}"
                                                       target="_blank"
                                                       class="btn btn-sm btn-outline-primary py-0 px-2">
                                                        <i class="bi bi-box-arrow-up-right me-1"></i>Lihat
                                                    </a>
                                                @endif
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                            @endif
                        </div>

                    </div>{{-- /tab-content --}}
                </div>{{-- /accordion-body --}}
            </div>{{-- /accordion-collapse --}}
        </div>{{-- /accordion-item --}}
        @endforeach

    </div>{{-- /accordion --}}
    @endif

</div>
@endsection