<?php $__env->startSection('header', 'Detail Penerima Manfaat'); ?>

<?php $__env->startSection('styles'); ?>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('content'); ?>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
    <!-- Left Column: Profile & Info -->
    <div class="space-y-6">
        <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
            <div class="flex flex-col items-center text-center">
                <div class="w-24 h-24 bg-blue-50 rounded-full flex items-center justify-center text-primary text-3xl font-bold mb-4 uppercase">
                    <?php echo e(substr($beneficiary->name, 0, 1)); ?><?php echo e(substr(strrchr($beneficiary->name, " "), 1, 1)); ?>

                </div>
                <h3 class="text-xl font-bold text-gray-800"><?php echo e($beneficiary->name); ?></h3>
                <p class="text-sm text-gray-500 uppercase tracking-wide">NIK: <?php echo e($beneficiary->nik); ?></p>
                <div class="mt-4 flex items-center space-x-2">
                    <span class="px-3 py-1 
                        <?php if($beneficiary->status == 'active'): ?> bg-green-100 text-green-800 
                        <?php elseif($beneficiary->status == 'graduated'): ?> bg-blue-100 text-blue-800
                        <?php else: ?> bg-gray-100 text-gray-800 <?php endif; ?>
                        text-xs font-semibold rounded-full uppercase">
                        <?php echo e($beneficiary->status); ?>

                    </span>
                    <span class="px-3 py-1 bg-blue-100 text-blue-800 text-xs font-semibold rounded-full">Kec. <?php echo e($beneficiary->district); ?></span>
                </div>
            </div>
            
            <div class="mt-8 pt-6 border-t border-gray-100 space-y-4">
                <a href="<?php echo e(route('monitoring.create', $beneficiary->id)); ?>" class="w-full bg-primary text-white py-2.5 rounded-lg text-sm font-bold hover:bg-sky-600 transition flex items-center justify-center shadow-md shadow-blue-100">
                    <i class="fas fa-plus-circle mr-2"></i> Input Monitoring Baru
                </a>
                <div>
                    <p class="text-xs text-gray-400 uppercase font-bold tracking-wider">Alamat</p>
                    <p class="text-sm text-gray-700 mt-1"><?php echo e($beneficiary->address); ?>, Desa <?php echo e($beneficiary->village); ?>, Sumba Tengah</p>
                </div>
                <div>
                    <p class="text-xs text-gray-400 uppercase font-bold tracking-wider">Orang Tua Asuh</p>
                    <p class="text-sm text-gray-700 mt-1"><?php echo e($beneficiary->foster_parent_name); ?> (<?php echo e($beneficiary->foster_parent_role); ?>)</p>
                </div>
                <div>
                    <p class="text-xs text-gray-400 uppercase font-bold tracking-wider">Komponen Program</p>
                    <div class="flex flex-wrap gap-2 mt-2">
                        <?php if($beneficiary->horticultures->count() > 0): ?>
                            <span class="px-2 py-1 bg-green-50 text-green-700 text-[10px] font-bold rounded">HORTIKULTURA</span>
                        <?php endif; ?>
                        <?php if($beneficiary->livestocks->count() > 0): ?>
                            <span class="px-2 py-1 bg-orange-50 text-orange-700 text-[10px] font-bold rounded">TERNAK</span>
                        <?php endif; ?>
                        <?php if($beneficiary->poultries->count() > 0): ?>
                            <span class="px-2 py-1 bg-yellow-50 text-yellow-700 text-[10px] font-bold rounded">UNGGAS</span>
                        <?php endif; ?>
                        <?php if($beneficiary->fish->count() > 0): ?>
                            <span class="px-2 py-1 bg-blue-50 text-blue-700 text-[10px] font-bold rounded">IKAN</span>
                        <?php endif; ?>
                    </div>
                </div>
            </div>
        </div>

        <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
            <h4 class="font-bold text-gray-800 mb-4 flex items-center">
                <i class="fas fa-location-dot text-primary mr-2"></i> Lokasi GPS
            </h4>
            <div id="mini-map" class="h-40 rounded-lg mb-4"></div>
            <p class="text-xs text-gray-500 font-mono"><?php echo e($beneficiary->latitude); ?>, <?php echo e($beneficiary->longitude); ?></p>
        </div>
    </div>

    <!-- Right Column: Timeline & Components Detail -->
    <div class="lg:col-span-2 space-y-6">
        <!-- Components Detail Tabs -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
            <div class="border-b border-gray-100 flex items-center justify-between pr-6">
                <nav class="flex">
                    <button onclick="switchTab('monitoring')" id="tab-monitoring" class="tab-btn px-6 py-4 text-sm font-medium border-b-2 border-primary text-primary transition-all">Monitoring Program</button>
                    <button onclick="switchTab('components')" id="tab-components" class="tab-btn px-6 py-4 text-sm font-medium text-gray-500 hover:text-gray-700 transition-all">Rincian Komponen</button>
                    <button onclick="switchTab('gallery')" id="tab-gallery" class="tab-btn px-6 py-4 text-sm font-medium text-gray-500 hover:text-gray-700 transition-all">Galeri Foto</button>
                </nav>
                <a href="<?php echo e(route('export.pdf', $beneficiary->id)); ?>" class="text-xs font-bold text-red-500 hover:text-red-700 flex items-center">
                    <i class="fas fa-file-pdf mr-1"></i> Cetak PDF
                </a>
            </div>
    
            <!-- Tab: Monitoring Program -->
            <div id="content-monitoring" class="tab-content p-6">
                <div class="flow-root">
                    <ul role="list" class="-mb-8">
                        <?php $__empty_1 = true; $__currentLoopData = $beneficiary->monitorings->sortByDesc('monitoring_date'); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $monitoring): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                        <li>
                            <div class="relative pb-8">
                                <?php if(!$loop->last): ?>
                                <span class="absolute left-4 top-4 -ml-px h-full w-0.5 bg-gray-200" aria-hidden="true"></span>
                                <?php endif; ?>
                                <div class="relative flex space-x-3">
                                    <div>
                                        <span class="h-8 w-8 rounded-full bg-green-500 flex items-center justify-center ring-8 ring-white text-white">
                                            <i class="fas fa-check text-xs"></i>
                                        </span>
                                    </div>
                                    <div class="flex min-w-0 flex-1 justify-between space-x-4 pt-1.5">
                                        <div>
                                            <p class="text-sm text-gray-800"><?php echo e($monitoring->notes); ?> <span class="font-medium text-gray-900">(Monitoring #<?php echo e($loop->iteration); ?>)</span></p>
                                            <div class="mt-3 grid grid-cols-4 gap-2">
                                                <?php $__currentLoopData = $beneficiary->documentations->where('monitoring_id', $monitoring->id); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $doc): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                    <a href="<?php echo e(asset('storage/' . $doc->file_path)); ?>" target="_blank" class="block">
                                                        <img src="<?php echo e(asset('storage/' . $doc->file_path)); ?>" class="w-full h-16 rounded-lg border object-cover hover:opacity-75 transition" alt="photo">
                                                    </a>
                                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                            </div>
                                            <div class="mt-2 flex flex-wrap gap-2">
                                                <span class="text-[10px] bg-blue-50 text-blue-600 px-2 py-0.5 rounded-full font-bold uppercase"><?php echo e($monitoring->health_status); ?></span>
                                                <span class="text-[10px] bg-green-50 text-green-600 px-2 py-0.5 rounded-full font-bold uppercase"><?php echo e($monitoring->growth_percentage); ?>% PERTUMBUHAN</span>
                                            </div>
                                        </div>
                                        <div class="whitespace-nowrap text-right text-xs text-gray-500">
                                            <time datetime="<?php echo e($monitoring->monitoring_date); ?>"><?php echo e(date('d M Y', strtotime($monitoring->monitoring_date))); ?></time>
                                            <p class="mt-1 font-medium text-primary"><?php echo e($monitoring->user->name ?? 'Petugas'); ?></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                        <div class="text-center py-10">
                            <div class="w-16 h-16 bg-gray-50 rounded-full flex items-center justify-center mx-auto mb-4">
                                <i class="fas fa-info-circle text-gray-300 text-2xl"></i>
                            </div>
                            <p class="text-sm text-gray-500 italic">Belum ada data monitoring untuk penerima manfaat ini.</p>
                        </div>
                        <?php endif; ?>
                    </ul>
                </div>
                
                <?php if($beneficiary->monitorings->count() > 0): ?>
                <div class="mt-10 border-t border-gray-100 pt-6">
                    <button class="w-full bg-gray-50 text-gray-600 py-3 rounded-lg text-sm font-medium hover:bg-gray-100 transition">
                        Lihat Laporan Monitoring Lengkap
                    </button>
                </div>
                <?php endif; ?>
            </div>

            <!-- Tab: Rincian Komponen -->
            <div id="content-components" class="tab-content p-6 hidden">
                <div class="space-y-8">
                    <?php if($beneficiary->horticultures->count() > 0): ?>
                    <div>
                        <h5 class="text-sm font-bold text-gray-800 uppercase tracking-wider mb-4 flex items-center">
                            <span class="w-2 h-2 bg-green-500 rounded-full mr-2"></span> Hortikultura
                        </h5>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <?php $__currentLoopData = $beneficiary->horticultures; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <div class="bg-gray-50 p-4 rounded-lg border border-gray-100">
                                <div class="flex justify-between items-start">
                                    <div>
                                        <p class="text-xs text-gray-500 uppercase font-bold"><?php echo e($item->type); ?></p>
                                        <h6 class="font-bold text-gray-800 text-lg"><?php echo e($item->commodity); ?></h6>
                                    </div>
                                    <span class="bg-green-100 text-green-800 text-xs font-bold px-2 py-1 rounded"><?php echo e($item->quantity); ?> <?php echo e($item->unit); ?></span>
                                </div>
                                <p class="text-xs text-gray-500 mt-2">Ditanam: <?php echo e(date('d M Y', strtotime($item->planting_date))); ?></p>
                            </div>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </div>
                    </div>
                    <?php endif; ?>

                    <?php if($beneficiary->livestocks->count() > 0): ?>
                    <div>
                        <h5 class="text-sm font-bold text-gray-800 uppercase tracking-wider mb-4 flex items-center">
                            <span class="w-2 h-2 bg-orange-500 rounded-full mr-2"></span> Peternakan
                        </h5>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <?php $__currentLoopData = $beneficiary->livestocks; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <div class="bg-gray-50 p-4 rounded-lg border border-gray-100">
                                <div class="flex justify-between items-start">
                                    <div>
                                        <p class="text-xs text-gray-500 uppercase font-bold">Ternak Besar/Kecil</p>
                                        <h6 class="font-bold text-gray-800 text-lg"><?php echo e($item->type); ?></h6>
                                    </div>
                                    <div class="text-right">
                                        <p class="text-xs font-bold text-gray-700">Total: <?php echo e($item->male_count + $item->female_count); ?> Ekor</p>
                                        <p class="text-[10px] text-gray-500">J: <?php echo e($item->male_count); ?> | B: <?php echo e($item->female_count); ?></p>
                                    </div>
                                </div>
                                <p class="text-xs text-gray-500 mt-2">Distribusi: <?php echo e(date('d M Y', strtotime($item->distribution_date))); ?></p>
                            </div>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </div>
                    </div>
                    <?php endif; ?>

                    <?php if($beneficiary->poultries->count() > 0): ?>
                    <div>
                        <h5 class="text-sm font-bold text-gray-800 uppercase tracking-wider mb-4 flex items-center">
                            <span class="w-2 h-2 bg-yellow-500 rounded-full mr-2"></span> Unggas
                        </h5>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <?php $__currentLoopData = $beneficiary->poultries; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <div class="bg-gray-50 p-4 rounded-lg border border-gray-100">
                                <div class="flex justify-between items-start">
                                    <div>
                                        <p class="text-xs text-gray-500 uppercase font-bold">Unggas</p>
                                        <h6 class="font-bold text-gray-800 text-lg"><?php echo e($item->type); ?></h6>
                                    </div>
                                    <span class="bg-yellow-100 text-yellow-800 text-xs font-bold px-2 py-1 rounded"><?php echo e($item->quantity); ?> Ekor</span>
                                </div>
                                <p class="text-xs text-gray-500 mt-2">Distribusi: <?php echo e(date('d M Y', strtotime($item->distribution_date))); ?></p>
                            </div>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </div>
                    </div>
                    <?php endif; ?>

                    <?php if($beneficiary->fish->count() > 0): ?>
                    <div>
                        <h5 class="text-sm font-bold text-gray-800 uppercase tracking-wider mb-4 flex items-center">
                            <span class="w-2 h-2 bg-blue-500 rounded-full mr-2"></span> Perikanan
                        </h5>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <?php $__currentLoopData = $beneficiary->fish; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <div class="bg-gray-50 p-4 rounded-lg border border-gray-100">
                                <div class="flex justify-between items-start">
                                    <div>
                                        <p class="text-xs text-gray-500 uppercase font-bold"><?php echo e($item->pond_type); ?></p>
                                        <h6 class="font-bold text-gray-800 text-lg"><?php echo e($item->type); ?></h6>
                                    </div>
                                    <span class="bg-blue-100 text-blue-800 text-xs font-bold px-2 py-1 rounded"><?php echo e($item->quantity); ?> Ekor</span>
                                </div>
                                <p class="text-xs text-gray-500 mt-2">Distribusi: <?php echo e(date('d M Y', strtotime($item->distribution_date))); ?></p>
                            </div>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </div>
                    </div>
                    <?php endif; ?>

                    <?php if($beneficiary->horticultures->count() == 0 && $beneficiary->livestocks->count() == 0 && $beneficiary->poultries->count() == 0 && $beneficiary->fish->count() == 0): ?>
                    <div class="text-center py-10">
                        <p class="text-sm text-gray-500 italic">Data komponen belum tersedia.</p>
                    </div>
                    <?php endif; ?>
                </div>
            </div>

            <!-- Tab: Galeri Foto -->
            <div id="content-gallery" class="tab-content p-6 hidden">
                <?php if($beneficiary->documentations->count() > 0): ?>
                <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
                    <?php $__currentLoopData = $beneficiary->documentations; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $doc): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <div class="group relative aspect-square rounded-xl overflow-hidden border border-gray-100 shadow-sm">
                        <img src="<?php echo e(asset('storage/' . $doc->file_path)); ?>" class="w-full h-full object-cover transition duration-300 group-hover:scale-110" alt="Gallery photo">
                        <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-3">
                            <p class="text-white text-[10px] font-bold uppercase"><?php echo e($doc->type ?? 'Dokumentasi'); ?></p>
                            <p class="text-white/80 text-[10px]"><?php echo e(date('d M Y', strtotime($doc->created_at))); ?></p>
                        </div>
                        <a href="<?php echo e(asset('storage/' . $doc->file_path)); ?>" target="_blank" class="absolute inset-0 z-10"></a>
                    </div>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </div>
                <?php else: ?>
                <div class="text-center py-10">
                    <div class="w-16 h-16 bg-gray-50 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i class="fas fa-camera text-gray-300 text-2xl"></i>
                    </div>
                    <p class="text-sm text-gray-500 italic">Belum ada foto dokumentasi.</p>
                </div>
                <?php endif; ?>
            </div>
        </div>

        <!-- Component Stats -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
                <h4 class="font-bold text-gray-800 mb-4">Target Hortikultura</h4>
                <div class="space-y-4">
                    <div>
                        <div class="flex justify-between text-xs mb-1">
                            <span class="text-gray-500">Pertumbuhan Tanaman</span>
                            <span class="font-bold text-primary">75%</span>
                        </div>
                        <div class="w-full bg-gray-100 rounded-full h-2">
                            <div class="bg-primary h-2 rounded-full" style="width: 75%"></div>
                        </div>
                    </div>
                    <div class="flex justify-between items-center py-2 border-t border-gray-50">
                        <span class="text-sm text-gray-600">Jenis Tanaman</span>
                        <span class="text-sm font-bold">Cabe, Tomat, Terong</span>
                    </div>
                </div>
            </div>
            
            <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
                <h4 class="font-bold text-gray-800 mb-4">Kesehatan Ternak</h4>
                <div class="flex items-center space-x-4">
                    <div class="w-16 h-16 rounded-full border-4 border-green-500 flex items-center justify-center">
                        <span class="text-sm font-bold text-green-500">100%</span>
                    </div>
                    <div>
                        <p class="text-sm text-gray-700">Semua ternak (10 ekor ayam) dalam kondisi sehat.</p>
                        <p class="text-xs text-gray-400 mt-1">Terakhir dicek: 20 Apr 2026</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<?php $__env->startSection('scripts'); ?>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<script>
    function switchTab(tabId) {
        // Hide all tab content
        document.querySelectorAll('.tab-content').forEach(function(content) {
            content.classList.add('hidden');
        });

        // Show selected tab content
        document.getElementById('content-' + tabId).classList.remove('hidden');

        // Reset all tab buttons
        document.querySelectorAll('.tab-btn').forEach(function(btn) {
            btn.classList.remove('border-primary', 'text-primary', 'border-b-2');
            btn.classList.add('text-gray-500');
        });

        // Highlight selected tab button
        var activeBtn = document.getElementById('tab-' + tabId);
        activeBtn.classList.remove('text-gray-500');
        activeBtn.classList.add('border-primary', 'text-primary', 'border-b-2');
    }

    document.addEventListener('DOMContentLoaded', function() {
        var lat = <?php echo e($beneficiary->latitude ?? -9.45); ?>;
        var lng = <?php echo e($beneficiary->longitude ?? 119.6); ?>;
        var map = L.map('mini-map', {
            zoomControl: false,
            attributionControl: false
        }).setView([lat, lng], 13);

        // Base Layers
        var osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        });

        var satellite = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
            attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EBP, and the GIS User Community'
        });

        // Add default layer
        osm.addTo(map);

        // Layer Control (optional for mini-map, but useful)
        var baseMaps = {
            "Peta": osm,
            "Satelit": satellite
        };
        L.control.layers(baseMaps, null, {position: 'topright'}).addTo(map);

        L.marker([lat, lng]).addTo(map);
    });
</script>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.app', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/sumba001/public_html/pom500.sumbatengahkab.go.id/resources/views/beneficiaries/2show.blade.php ENDPATH**/ ?>