@extends('layouts.app')

@section('title', 'Daftar Permohonan')

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

    <div class="d-flex align-items-center justify-content-between gap-3 mb-4 flex-wrap">
        <div>
            <h5 class="mb-0 fw-bold" style="color:var(--bpdlh-green);">Permohonan Pembiayaan</h5>
            <small class="text-muted">Dana Bergulir Agroforestry Perorangan</small>
        </div>
        @role('petugas_lapangan')
        <a href="{{ route('applications.create') }}" class="btn btn-primary flex-shrink-0">
            <i class="bi bi-plus-lg me-1"></i>
            <span class="d-none d-md-inline">Buat Permohonan</span>
            <span class="d-md-none">Baru</span>
        </a>
        @endrole
    </div>

    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show">
            <i class="bi bi-check-circle me-2"></i>{{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    {{-- GROUPED VIEW (untuk verifikator) --}}
    @if($isGrouped ?? false)

    {{-- Filter Bar --}}
    <div class="card border-0 shadow-sm mb-3">
        <div class="card-body py-2 px-3">
            <form method="GET" action="{{ route('applications.index') }}" class="d-flex flex-wrap align-items-center gap-2">
                {{-- Status --}}
                <select name="status" class="form-select form-select-sm" style="max-width:140px;" onchange="this.form.submit()">
                    <option value="">Status</option>
                    <option value="menunggu_fa"    {{ ($filterStatus ?? '') === 'menunggu_fa'    ? 'selected' : '' }}>Menunggu FA</option>
                    <option value="da_berlangsung" {{ ($filterStatus ?? '') === 'da_berlangsung' ? 'selected' : '' }}>DA + Finalisasi</option>
                    <option value="siap_submit"    {{ ($filterStatus ?? '') === 'siap_submit'    ? 'selected' : '' }}>Siap Submit</option>
                    <option value="rejected"       {{ ($filterStatus ?? '') === 'rejected'       ? 'selected' : '' }}>Ada Rejected</option>
                </select>

                {{-- Bulan Ronde --}}
                <select name="ronde_month" class="form-select form-select-sm" style="max-width:130px;" onchange="this.form.submit()">
                    <option value="">Bulan Ronde</option>
                    @foreach($rondeOptions ?? [] as $ronde)
                    <option value="{{ $ronde }}" {{ ($filterRonde ?? '') === $ronde ? 'selected' : '' }}>{{ $ronde }}</option>
                    @endforeach
                </select>

                {{-- PL --}}
                <select name="pl" class="form-select form-select-sm" style="max-width:130px;" onchange="this.form.submit()">
                    <option value="">PL</option>
                    @foreach($plOptions ?? [] as $pl)
                    <option value="{{ $pl }}" {{ ($filterPl ?? '') === $pl ? 'selected' : '' }}>{{ $pl }}</option>
                    @endforeach
                </select>

                {{-- Kabupaten --}}
                <select name="kabupaten" class="form-select form-select-sm" style="max-width:130px;" onchange="this.form.submit()">
                    <option value="">Kabupaten</option>
                    @foreach($kabupatenOptions ?? [] as $kabupaten)
                    <option value="{{ $kabupaten }}" {{ ($filterKabupaten ?? '') === $kabupaten ? 'selected' : '' }}>{{ $kabupaten }}</option>
                    @endforeach
                </select>

                {{-- Search --}}
                <div class="input-group input-group-sm" style="max-width:180px;">
                    <span class="input-group-text bg-white"><i class="bi bi-search text-muted"></i></span>
                    <input type="text" name="search" class="form-control" placeholder="Cari nama..." value="{{ $filterSearch ?? '' }}">
                </div>

                {{-- Reset --}}
                @if(($filterStatus ?? '') || ($filterRonde ?? '') || ($filterPl ?? '') || ($filterKabupaten ?? '') || ($filterSearch ?? ''))
                <a href="{{ route('applications.index') }}" class="btn btn-sm btn-outline-secondary">
                    <i class="bi bi-x-circle me-1"></i>Reset
                </a>
                @endif
            </form>
        </div>
    </div>

    {{-- Kelompok Cards --}}
    @if(empty($kelompokList))
    <div class="card border-0 shadow-sm mb-4">
        <div class="card-body text-center py-5 text-muted">
            <i class="bi bi-inbox fs-2 d-block mb-2"></i>
            Tidak ada pengajuan kelompok yang perlu ditindaklanjuti
        </div>
    </div>
    @else
    <div class="d-flex flex-column gap-3 mb-4">
        @foreach($kelompokList as $item)
        @php
            $pk       = $item['pk'];
            $badge    = $item['badge'];
            $pct      = $item['total'] > 0 ? round($item['fa_selesai'] / $item['total'] * 100) : 0;
            $pctDa    = $item['total'] > 0 ? round($item['da_selesai'] / $item['total'] * 100) : 0;
            $kabupaten = $pk->kelompok?->kabupaten ?? '';
        @endphp
        <div class="card border-0 shadow-sm">
            <div class="card-body p-3 p-md-4">
                <div class="d-flex align-items-start justify-content-between gap-3 flex-wrap">
                    <div class="flex-grow-1">
                        <div class="d-flex align-items-center gap-2 mb-1 flex-wrap">
                            <h6 class="fw-bold mb-0" style="color:#1a6b3c;">{{ $pk->kelompok?->nama ?? '—' }}</h6>
                            <span class="badge bg-{{ $badge['color'] }} bg-opacity-{{ $badge['color'] === 'warning' ? '75' : '100' }}">
                                {{ $badge['label'] }}
                            </span>
                        </div>
                        <div class="text-muted small mb-2">
                            Ronde {{ $item['ronde'] }}
                            @if($item['pl_name'])
                             · PL: <strong>{{ $item['pl_name'] }}</strong>
                            @endif
                            @if($kabupaten)
                             · {{ $kabupaten }}
                            @endif
                            · {{ $item['total'] }} anggota mengajukan
                        </div>
                        <div class="fw-semibold mb-2" style="font-size:.9rem;">
                            Rp {{ number_format($item['total_plafond'], 0, ',', '.') }}
                            <span class="fw-normal text-muted small">total plafond diajukan</span>
                        </div>
                        <div class="mb-1" style="font-size:.78rem;">
                            <span class="text-muted me-1">FA:</span>
                            <strong>{{ $item['fa_selesai'] }}/{{ $item['total'] }} selesai</strong>
                        </div>
                        <div class="progress mb-2" style="height:6px;max-width:280px;">
                            <div class="progress-bar bg-info" style="width:{{ $pct }}%"></div>
                        </div>
                        <div class="mb-1" style="font-size:.78rem;">
                            <span class="text-muted me-1">DA:</span>
                            <strong>{{ $item['da_selesai'] }}/{{ $item['total'] }} selesai</strong>
                        </div>
                        <div class="progress" style="height:6px;max-width:280px;">
                            <div class="progress-bar bg-warning" style="width:{{ $pctDa }}%"></div>
                        </div>
                    </div>
                    <div class="flex-shrink-0 d-flex flex-column align-items-end gap-2">
                        <a href="{{ route('pengajuan-kelompok.show', $pk->id) }}"
                           class="btn btn-sm btn-outline-primary">
                            <i class="bi bi-folder2-open me-1"></i>Buka
                        </a>
                        <div class="text-muted" style="font-size:.7rem;">
                            {{ $pk->created_at->diffForHumans() }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @endforeach
    </div>
    @endif

    @else

    {{-- FLAT LIST VIEW (untuk field officer) --}}

    {{-- Desktop Table --}}
    <div class="card shadow-sm border-0 d-none d-md-block">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead class="table-light">
                        <tr>
                            <th style="width:40px;">#</th>
                            <th>Nama Pemohon</th>
                            <th>Paket</th>
                            <th>Petugas</th>
                            <th>Tgl Diajukan</th>
                            <th>Status</th>
                            <th style="width:80px;"></th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($applications as $app)
                        <tr>
                            <td class="text-muted" style="font-size:.8rem;">{{ $applications->firstItem() + $loop->index }}</td>
                            <td>
                                <div class="fw-semibold">{{ $app->applicant_name }}</div>
                                <div class="text-muted" style="font-size:.75rem;">{{ substr($app->id, 0, 8) }}</div>
                            </td>
                            <td style="font-size:.85rem;">{{ $app->paket_label }}</td>
                            <td style="font-size:.85rem;">{{ $app->submittedBy?->name ?? '-' }}</td>
                            <td style="font-size:.85rem;">{{ $app->created_at->format('d/m/Y') }}</td>
                            <td>{!! $app->status_badge !!}</td>
                            <td>
                                <a href="{{ route('applications.show', $app->id) }}"
                                   class="btn btn-sm btn-outline-primary py-0">
                                    <i class="bi bi-eye"></i>
                                </a>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="7" class="text-center text-muted py-5">
                                <i class="bi bi-inbox fs-3 d-block mb-2"></i>
                                Belum ada permohonan.
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
        @if($applications->hasPages())
        <div class="card-footer bg-white">
            {{ $applications->links() }}
        </div>
        @endif
    </div>

    {{-- Mobile Card List --}}
    <div class="d-md-none">
        @forelse($applications as $app)
        <a href="{{ route('applications.show', $app->id) }}" class="text-decoration-none">
            <div class="card shadow-sm border-0 mb-3">
                <div class="card-body py-3">
                    <div class="d-flex align-items-start justify-content-between">
                        <div>
                            <div class="fw-semibold">{{ $app->applicant_name }}</div>
                            <div class="text-muted" style="font-size:.78rem;">{{ $app->paket_label }}</div>
                            <div class="text-muted" style="font-size:.75rem;">
                                <i class="bi bi-calendar3 me-1"></i>{{ $app->created_at->format('d/m/Y') }}
                            </div>
                        </div>
                        <div class="text-end">
                            {!! $app->status_badge !!}
                            <div class="text-muted mt-1" style="font-size:.72rem;">{{ substr($app->id, 0, 8) }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </a>
        @empty
        <div class="text-center text-muted py-5">
            <i class="bi bi-inbox fs-3 d-block mb-2"></i>
            Belum ada permohonan.
        </div>
        @endforelse
        {{ $applications->links() }}
    </div>

    @endif

</div>
@endsection