@extends('layouts.app')

@section('title', $pk->kelompok->nama . ' — Ronde ' . $pk->created_at->format('M Y'))

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

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

    <x-ui.page-header
        :title="$pk->kelompok->nama . ' — Ronde ' . $pk->created_at->format('M Y')"
        subtitle="Daftar debitur dalam ronde ini"
        :back="route('pengajuan-kelompok.index')"
    >
        <x-slot:actions>
            @role('petugas_lapangan')
            <a href="{{ route('pengajuan.create', $pk->id) }}" class="btn btn-primary btn-sm">
                <i class="bi bi-person-plus me-1"></i> Tambah Debitur
            </a>
            @endrole
        </x-slot:actions>
    </x-ui.page-header>

    {{-- ══════════════════════════════════════════════════════════ --}}
    {{-- RINGKASAN RONDE                                           --}}
    {{-- ══════════════════════════════════════════════════════════ --}}
    <x-ui.section-card title="Ringkasan Ronde" icon="bi-info-circle">
        <div class="row g-0">
            <div class="col-md-3">
                <x-ui.data-field label="Kelompok" :value="$pk->kelompok->nama" />
            </div>
            <div class="col-md-3">
                <x-ui.data-field label="Lokasi" :value="$pk->kelompok->kecamatan . ', ' . $pk->kelompok->kabupaten" />
            </div>
            <div class="col-md-3">
                <x-ui.data-field label="Pendamping">
                    <span class="fw-medium">{{ $pk->nama_pendamping }}</span>
                    @if($pk->afiliasi_pendamping)
                        <br><small class="text-muted">{{ $pk->afiliasi_pendamping }}</small>
                    @endif
                </x-ui.data-field>
            </div>
            <div class="col-md-3">
                <x-ui.data-field label="Anggota Mengajukan">
                    <span class="fw-semibold">{{ $pk->jumlah_anggota_mengajukan }}</span>
                    <span class="text-muted"> / {{ $pk->jumlah_anggota_total }} anggota</span>
                </x-ui.data-field>
            </div>
        </div>
    </x-ui.section-card>

    {{-- ══════════════════════════════════════════════════════════ --}}
    {{-- PROGRESS CARD                                             --}}
    {{-- ══════════════════════════════════════════════════════════ --}}
    @php
        $totalDebitur  = $pk->pengajuan->count();
        $dataLengkap   = $pk->pengajuan->filter(fn($p) => $p->isSeksiLengkap())->count();
        $daSubmit      = $pk->pengajuan->filter(fn($p) => in_array(
            $p->getRawOriginal('status'),
            ['waiting_da_penelaah', 'waiting_approval_da', 'fa', 'waiting_review_fa', 'waiting_keputusan', 'disetujui', 'ditolak']
        ))->count();
        $pctData = $totalDebitur > 0 ? round(($dataLengkap / $totalDebitur) * 100) : 0;
        $pctDa   = $totalDebitur > 0 ? round(($daSubmit / $totalDebitur) * 100) : 0;
    @endphp
    @if($totalDebitur > 0)
    <x-ui.section-card title="Progress Ronde" icon="bi-bar-chart">
        <div class="mb-3">
            <div class="d-flex justify-content-between mb-1">
                <small class="text-muted">Input Data Lengkap</small>
                <small class="fw-medium">{{ $dataLengkap }}/{{ $totalDebitur }} debitur</small>
            </div>
            <div class="progress" style="height:8px;">
                <div class="progress-bar bg-success" style="width:{{ $pctData }}%"></div>
            </div>
        </div>
        <div>
            <div class="d-flex justify-content-between mb-1">
                <small class="text-muted">DA Sudah Submit</small>
                <small class="fw-medium">{{ $daSubmit }}/{{ $totalDebitur }} debitur</small>
            </div>
            <div class="progress" style="height:8px;">
                <div class="progress-bar bg-primary" style="width:{{ $pctDa }}%"></div>
            </div>
        </div>
    </x-ui.section-card>
    @endif

    {{-- ══════════════════════════════════════════════════════════ --}}
    {{-- DOKUMEN KELOMPOK (collapsible)                            --}}
    {{-- ══════════════════════════════════════════════════════════ --}}
    <x-ui.section-card title="Dokumen Kelompok" icon="bi-folder2-open" :collapsible="true">
        <div class="table-responsive">
            <table class="table table-sm align-middle mb-0">
                <thead class="table-light">
                    <tr>
                        <th style="width:2rem;">#</th>
                        <th>Nama Dokumen</th>
                        <th style="width:5rem;">Wajib</th>
                        <th style="width:6rem;">Status</th>
                        <th style="width:5rem;">File</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach(\App\Models\DokumenKelompok::JENIS_DOKUMEN as $jenis => $label)
                    @php $doc = $pk->dokumen->firstWhere('jenis', $jenis); @endphp
                    <tr>
                        <td><small class="text-muted">{{ $loop->iteration }}</small></td>
                        <td>
                            <small class="fw-medium">{{ $label }}</small>
                            @if($jenis === 'survey_harga')
                                <span class="badge bg-info text-dark ms-1" style="font-size:.65rem;">Data Master</span>
                            @endif
                        </td>
                        <td>
                            @if(in_array($jenis, \App\Models\DokumenKelompok::WAJIB))
                                <span class="badge bg-danger-subtle text-danger border border-danger-subtle" style="font-size:.65rem;">Wajib</span>
                            @else
                                <span class="text-muted small">—</span>
                            @endif
                        </td>
                        <td>
                            @if($doc && $doc->ada)
                                <span class="badge bg-success">Ada</span>
                            @else
                                <span class="badge bg-secondary">Belum</span>
                            @endif
                        </td>
                        <td>
                            @if($doc && $doc->file_path)
                                <a href="{{ Storage::url($doc->file_path) }}" target="_blank"
                                    class="btn btn-sm btn-outline-primary py-0 px-2">
                                    <i class="bi bi-file-earmark" style="font-size:.8rem;"></i>
                                </a>
                            @else
                                <span class="text-muted small">—</span>
                            @endif
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </x-ui.section-card>

    {{-- ══════════════════════════════════════════════════════════ --}}
    {{-- PENILAIAN 3 KRITERIA (collapsible)                        --}}
    {{-- ══════════════════════════════════════════════════════════ --}}
    <x-ui.section-card title="Penilaian 3 Kriteria Kelompok" icon="bi-check2-all" :collapsible="true">
        @forelse($pk->penilaian_kriteria ?? [] as $kr)
        <div class="d-flex align-items-start gap-3 {{ !$loop->last ? 'mb-3 pb-3 border-bottom' : '' }}">
            @if(($kr['status'] ?? '') === 'valid')
                <span class="badge bg-success flex-shrink-0 mt-1">Terpenuhi</span>
            @else
                <span class="badge bg-danger flex-shrink-0 mt-1">Tidak</span>
            @endif
            <div>
                <p class="mb-0 fw-medium small">{{ $kr['kriteria'] }}</p>
                @if(!empty($kr['catatan']))
                    <small class="text-muted">Catatan: {{ $kr['catatan'] }}</small>
                @endif
            </div>
        </div>
        @empty
        <p class="text-muted mb-0 small">Data kriteria belum tersedia.</p>
        @endforelse
    </x-ui.section-card>

    {{-- ══════════════════════════════════════════════════════════ --}}
    {{-- DAFTAR DEBITUR                                            --}}
    {{-- ══════════════════════════════════════════════════════════ --}}
    <x-ui.section-card title="Daftar Debitur" icon="bi-people">

        {{-- Desktop table --}}
        <div class="table-responsive d-none d-md-block">
            <table class="table table-hover align-middle mb-0">
                <thead class="table-light">
                    <tr>
                        <th style="width:2rem;">#</th>
                        <th>Nama Debitur</th>
                        <th>NIK</th>
                        <th>Jenis Layanan</th>
                        <th>Progress Seksi</th>
                        <th>Status</th>
                        <th style="width:8rem;"></th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($pk->pengajuan as $i => $pa)
                    @php
                        $rawStatus   = $pa->getRawOriginal('status');
                        $seksi       = $pa->seksiCompletion();
                        $allComplete = collect($seksi)->every(fn($v) => $v === 'complete');

                        $badgeMap = [
                            'complete' => '<span class="badge bg-success" title="Lengkap">✓</span>',
                            'partial'  => '<span class="badge bg-warning text-dark" title="Sebagian">⚠</span>',
                            'empty'    => '<span class="badge bg-secondary" title="Belum">○</span>',
                        ];
                    @endphp
                    <tr>
                        <td><small class="text-muted">{{ $i + 1 }}</small></td>
                        <td>
                            <strong>{{ $pa->debitur?->nama ?? '—' }}</strong>
                        </td>
                        <td>
                            <small class="text-muted font-monospace">{{ $pa->debitur?->nik ?? '—' }}</small>
                        </td>
                        <td>
                            @if($pa->jenis_layanan === 'tunda_tebang')
                                <span class="badge bg-primary-subtle text-primary border border-primary-subtle" style="font-size:.7rem;">Tunda Tebang</span>
                            @elseif($pa->jenis_layanan)
                                <span class="badge bg-success-subtle text-success border border-success-subtle" style="font-size:.7rem;">MUK</span>
                            @else
                                <span class="text-muted small">—</span>
                            @endif
                        </td>
                        <td>
                            <div class="d-flex gap-1">
                                @foreach(['3a','3b','3c','3d'] as $s)
                                    {!! $badgeMap[$seksi[$s] ?? 'empty'] !!}
                                @endforeach
                            </div>
                            <div class="d-flex gap-1 mt-1" style="font-size:.6rem;">
                                @foreach(['3a','3b','3c','3d'] as $s)
                                    <span class="text-muted">{{ $s }}</span>
                                @endforeach
                            </div>
                        </td>
                        <td>
                            <x-pengajuan.status-badge :status="$pa->status" />
                        </td>
                        <td class="text-end">
                            @if(!$allComplete)
                                <a href="{{ route('pengajuan.show', $pa->id) }}"
                                   class="btn btn-sm btn-outline-secondary">
                                    Buka
                                </a>
                            @elseif(in_array($rawStatus, ['draft']))
                                <a href="{{ route('desk-analysis.pl.show', $pa->id) }}"
                                   class="btn btn-sm btn-primary">
                                    Input DA
                                </a>
                            @elseif($rawStatus === 'da_pl')
                                <a href="{{ route('desk-analysis.pl.show', $pa->id) }}"
                                   class="btn btn-sm btn-outline-primary">
                                    Input DA
                                </a>
                            @elseif($rawStatus === 'fa')
                                <a href="{{ route('field-analysis.show', $pa->id) }}"
                                   class="btn btn-sm btn-info text-dark">
                                    Input FA
                                </a>
                            @else
                                <a href="{{ route('desk-analysis.pl.show', $pa->id) }}"
                                   class="btn btn-sm btn-outline-secondary">
                                    Lihat DA
                                </a>
                            @endif
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="7" class="py-0 border-0">
                            {{-- empty state rendered below --}}
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        {{-- Mobile cards --}}
        <div class="d-md-none">
            @forelse($pk->pengajuan as $pa)
            @php
                $rawStatus   = $pa->getRawOriginal('status');
                $seksi       = $pa->seksiCompletion();
                $allComplete = collect($seksi)->every(fn($v) => $v === 'complete');

                $badgeMap = [
                    'complete' => '<span class="badge bg-success">✓</span>',
                    'partial'  => '<span class="badge bg-warning text-dark">⚠</span>',
                    'empty'    => '<span class="badge bg-secondary">○</span>',
                ];
            @endphp
            <div class="border rounded p-3 mb-2">
                <div class="d-flex justify-content-between align-items-start mb-2">
                    <div>
                        <strong class="d-block">{{ $pa->debitur?->nama ?? '—' }}</strong>
                        <small class="text-muted font-monospace">{{ $pa->debitur?->nik ?? '—' }}</small>
                    </div>
                    <x-pengajuan.status-badge :status="$pa->status" />
                </div>
                <div class="d-flex gap-1 mb-2 align-items-center">
                    <small class="text-muted me-1">Seksi:</small>
                    @foreach(['3a','3b','3c','3d'] as $s)
                        {!! $badgeMap[$seksi[$s] ?? 'empty'] !!}
                        <span class="text-muted" style="font-size:.65rem;">{{ $s }}</span>
                    @endforeach
                </div>
                <div class="d-flex gap-2">
                    @if(!$allComplete)
                        <a href="{{ route('pengajuan.show', $pa->id) }}" class="btn btn-sm btn-outline-secondary flex-fill">Buka</a>
                    @elseif(in_array($rawStatus, ['draft', 'da_pl']))
                        <a href="{{ route('desk-analysis.pl.show', $pa->id) }}" class="btn btn-sm btn-primary flex-fill">Input DA</a>
                    @elseif($rawStatus === 'fa')
                        <a href="{{ route('field-analysis.show', $pa->id) }}" class="btn btn-sm btn-info text-dark flex-fill">Input FA</a>
                    @else
                        <a href="{{ route('desk-analysis.pl.show', $pa->id) }}" class="btn btn-sm btn-outline-secondary flex-fill">Lihat DA</a>
                    @endif
                    <a href="{{ route('pengajuan.show', $pa->id) }}" class="btn btn-sm btn-outline-secondary">
                        <i class="bi bi-eye"></i>
                    </a>
                </div>
            </div>
            @empty
            @endforelse
        </div>

        {{-- Empty state --}}
        @if($pk->pengajuan->isEmpty())
        <x-ui.empty-state
            icon="bi-person-x"
            title="Belum ada debitur"
            desc="Klik 'Tambah Debitur' untuk menginput data anggota pertama."
        >
            @role('petugas_lapangan')
            <a href="{{ route('pengajuan.create', $pk->id) }}" class="btn btn-primary btn-sm mt-2">
                <i class="bi bi-person-plus me-1"></i> Tambah Debitur
            </a>
            @endrole
        </x-ui.empty-state>
        @endif

        <x-slot:footer>
            <small class="text-muted">
                <i class="bi bi-info-circle me-1"></i>
                Legend: <span class="badge bg-success">✓</span> Lengkap &nbsp;
                <span class="badge bg-warning text-dark">⚠</span> Sebagian &nbsp;
                <span class="badge bg-secondary">○</span> Belum
            </small>
        </x-slot:footer>

    </x-ui.section-card>

</div>
@endsection