@extends('mitra.layouts.app')

@section('title', 'Detail Penerima Manfaat')

@section('content')
    <div class="mb-6">
        <div class="flex items-center justify-between">
            <div>
                <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Detail Penerima Manfaat</h1>
                <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Informasi lengkap penerima manfaat</p>
            </div>
            <a href="{{ route('mitra.penerima-manfaat.index') }}" class="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition duration-200">
                Kembali
            </a>
        </div>
    </div>

    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 border border-gray-200 dark:border-gray-700">
        <!-- Informasi Umum -->
        <div class="mb-6">
            <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Informasi Umum</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">SPPG</label>
                    <p class="text-sm font-medium text-gray-900 dark:text-white">{{ $penerimaManfaat->sppg->nama }}</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">Tipe</label>
                    <span class="px-2 py-1 text-xs font-medium rounded-full {{ $penerimaManfaat->tipe === 'sekolah' ? 'bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-400' : 'bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-400' }}">
                        {{ $penerimaManfaat->tipe_label }}
                    </span>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">Nama</label>
                    <p class="text-sm font-medium text-gray-900 dark:text-white">{{ $penerimaManfaat->nama }}</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">Kelurahan</label>
                    <p class="text-sm font-medium text-gray-900 dark:text-white">{{ $penerimaManfaat->kelurahan ?? '-' }}</p>
                </div>
                @if($penerimaManfaat->tipe === 'sekolah')
                    <div>
                        <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">NPSN</label>
                        <p class="text-sm font-medium text-gray-900 dark:text-white">{{ $penerimaManfaat->npsn ?? '-' }}</p>
                    </div>
                @else
                    <div>
                        <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">RW</label>
                        <p class="text-sm font-medium text-gray-900 dark:text-white">{{ $penerimaManfaat->rw ?? '-' }}</p>
                    </div>
                @endif
            </div>
        </div>

        @if($penerimaManfaat->tipe === 'sekolah')
            <!-- Data Sekolah -->
            <div class="mb-6 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
                <h2 class="text-lg font-semibold text-blue-900 dark:text-blue-300 mb-4">Data Sekolah</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">Paud/TK</label>
                        <p class="text-lg font-bold text-gray-900 dark:text-white">{{ number_format($penerimaManfaat->jumlah_paud_tk) }}</p>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">SD/MI</label>
                        <p class="text-lg font-bold text-gray-900 dark:text-white">{{ number_format($penerimaManfaat->jumlah_sd_mi) }}</p>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">SMP/MTS</label>
                        <p class="text-lg font-bold text-gray-900 dark:text-white">{{ number_format($penerimaManfaat->jumlah_smp_mts) }}</p>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">SMA/MA/SMK</label>
                        <p class="text-lg font-bold text-gray-900 dark:text-white">{{ number_format($penerimaManfaat->jumlah_sma_ma_smk) }}</p>
                    </div>
                </div>
                <div class="mt-4 pt-4 border-t border-blue-200 dark:border-blue-800">
                    <p class="text-sm font-medium text-blue-900 dark:text-blue-300">Total Siswa: <span class="text-lg font-bold">{{ number_format($penerimaManfaat->total_siswa) }}</span></p>
                </div>
            </div>
        @else
            <!-- Data Posyandu -->
            <div class="mb-6 p-4 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-800">
                <h2 class="text-lg font-semibold text-green-900 dark:text-green-300 mb-4">Data Posyandu (3B)</h2>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">Balita</label>
                        <p class="text-lg font-bold text-gray-900 dark:text-white">{{ number_format($penerimaManfaat->jumlah_balita) }}</p>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">Busui (Ibu Menyusui)</label>
                        <p class="text-lg font-bold text-gray-900 dark:text-white">{{ number_format($penerimaManfaat->jumlah_busui) }}</p>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">Bumil (Ibu Hamil)</label>
                        <p class="text-lg font-bold text-gray-900 dark:text-white">{{ number_format($penerimaManfaat->jumlah_bumil) }}</p>
                    </div>
                </div>
                <div class="mt-4 pt-4 border-t border-green-200 dark:border-green-800">
                    <p class="text-sm font-medium text-green-900 dark:text-green-300">Total 3B: <span class="text-lg font-bold">{{ number_format($penerimaManfaat->total_3b) }}</span></p>
                </div>
            </div>
        @endif

        <!-- Porsi -->
        <div class="mb-6 p-4 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg border border-yellow-200 dark:border-yellow-800">
            <h2 class="text-lg font-semibold text-yellow-900 dark:text-yellow-300 mb-4">Porsi</h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">Porsi Kecil</label>
                    <p class="text-lg font-bold text-gray-900 dark:text-white">{{ number_format($penerimaManfaat->porsi_kecil) }}</p>
                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Untuk PAUD, TK, SD Kelas 1-3</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">Porsi Sedang</label>
                    <p class="text-lg font-bold text-gray-900 dark:text-white">{{ number_format($penerimaManfaat->porsi_sedang) }}</p>
                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Untuk SD Kelas 4 - SMP</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">Porsi Besar</label>
                    <p class="text-lg font-bold text-gray-900 dark:text-white">{{ number_format($penerimaManfaat->porsi_besar) }}</p>
                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Untuk SMA, Ibu Hamil, Ibu Menyusui</p>
                </div>
            </div>
            <div class="mt-4 pt-4 border-t border-yellow-200 dark:border-yellow-800">
                <p class="text-sm font-medium text-yellow-900 dark:text-yellow-300">Total Porsi: <span class="text-lg font-bold">{{ number_format($penerimaManfaat->total_porsi) }}</span></p>
            </div>
        </div>

        <!-- Staff -->
        <div class="mb-6 p-4 bg-purple-50 dark:bg-purple-900/20 rounded-lg border border-purple-200 dark:border-purple-800">
            <h2 class="text-lg font-semibold text-purple-900 dark:text-purple-300 mb-4">Staff</h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">Guru</label>
                    <p class="text-lg font-bold text-gray-900 dark:text-white">{{ number_format($penerimaManfaat->jumlah_guru) }}</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">Tendik (Tenaga Kependidikan)</label>
                    <p class="text-lg font-bold text-gray-900 dark:text-white">{{ number_format($penerimaManfaat->jumlah_tendik) }}</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">PIC (Person in Charge)</label>
                    <p class="text-lg font-bold text-gray-900 dark:text-white">{{ number_format($penerimaManfaat->jumlah_pic) }}</p>
                </div>
            </div>
            <div class="mt-4 pt-4 border-t border-purple-200 dark:border-purple-800">
                <p class="text-sm font-medium text-purple-900 dark:text-purple-300">Total Staff: <span class="text-lg font-bold">{{ number_format($penerimaManfaat->total_staff) }}</span></p>
            </div>
        </div>

        <!-- Total & Keterangan -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">Total Keseluruhan</label>
                <p class="text-2xl font-bold text-blue-600 dark:text-blue-400">{{ number_format($penerimaManfaat->total) }}</p>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">Keterangan</label>
                <p class="text-sm text-gray-900 dark:text-white">{{ $penerimaManfaat->keterangan ?? '-' }}</p>
            </div>
        </div>
    </div>
@endsection