<?php $__env->startSection('header', 'Input Monitoring Lapangan'); ?>

<?php $__env->startSection('content'); ?>
<div class="max-w-4xl mx-auto">
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="p-6 border-b border-gray-100 bg-gray-50">
            <h3 class="font-bold text-gray-800">Form Monitoring Real-time</h3>
            <p class="text-sm text-gray-500">Silakan isi data perkembangan di lapangan untuk <strong><?php echo e($beneficiary->name); ?></strong></p>
        </div>

        <form action="<?php echo e(route('monitoring.store')); ?>" method="POST" enctype="multipart/form-data" class="p-8 space-y-6">
            <?php echo csrf_field(); ?>
            <input type="hidden" name="beneficiary_id" value="<?php echo e($beneficiary->id); ?>">
            <input type="hidden" name="monitoring_date" value="<?php echo e(date('Y-m-d')); ?>">

            <?php
                $hasComponents = $beneficiary->horticultures->count() > 0 || 
                                $beneficiary->livestocks->count() > 0 || 
                                $beneficiary->poultries->count() > 0 || 
                                $beneficiary->fish->count() > 0;
            ?>

            <?php if(!$hasComponents): ?>
                <div class="col-span-full bg-yellow-50 p-4 rounded-xl border border-yellow-100 text-yellow-700 text-sm flex items-start">
                    <i class="fas fa-exclamation-triangle mt-1 mr-3"></i>
                    <div>
                        <p class="font-bold mb-1">Penerima manfaat ini belum memiliki data komponen bantuan.</p>
                        <p class="text-xs opacity-80">Anda masih dapat mengirimkan laporan berupa catatan umum dan foto dokumentasi lapangan.</p>
                    </div>
                </div>
            <?php endif; ?>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- GPS Section -->
                <div class="col-span-full">
                    <label class="block text-sm font-semibold text-gray-700 mb-2">Lokasi GPS (Real-time)</label>
                    <div class="flex items-center space-x-4">
                        <input type="text" id="lat-display" name="latitude" value="<?php echo e($beneficiary->latitude); ?>" readonly placeholder="Latitude" class="bg-gray-50 border border-gray-200 rounded-lg px-4 py-2.5 text-sm w-full outline-none">
                        <input type="text" id="lng-display" name="longitude" value="<?php echo e($beneficiary->longitude); ?>" readonly placeholder="Longitude" class="bg-gray-50 border border-gray-200 rounded-lg px-4 py-2.5 text-sm w-full outline-none">
                        <button type="button" id="get-location" class="bg-blue-500 text-white px-4 py-2.5 rounded-lg hover:bg-blue-600 transition flex items-center whitespace-nowrap">
                            <i class="fas fa-location-crosshairs mr-2"></i> Update GPS
                        </button>
                    </div>
                    <p class="text-[10px] text-gray-400 mt-1 italic">*Pastikan GPS aktif untuk akurasi data</p>
                </div>

                <!-- Photos Section -->
                <div class="col-span-full">
                    <label class="block text-sm font-semibold text-gray-700 mb-2">Foto Dokumentasi (Max 3)</label>
                    <div class="grid grid-cols-3 gap-4">
                        <div class="relative border-2 border-dashed border-gray-200 rounded-xl aspect-square flex flex-col items-center justify-center text-gray-400 hover:border-primary hover:text-primary cursor-pointer transition overflow-hidden">
                            <input type="file" name="photos[]" class="absolute inset-0 opacity-0 cursor-pointer" onchange="previewImage(this)">
                            <div class="text-center preview-container">
                                <i class="fas fa-camera text-2xl mb-2"></i>
                                <span class="text-[10px] font-bold uppercase block">Ambil Foto</span>
                            </div>
                        </div>
                        <div class="relative border-2 border-dashed border-gray-200 rounded-xl aspect-square flex flex-col items-center justify-center text-gray-400 hover:border-primary hover:text-primary cursor-pointer transition overflow-hidden">
                            <input type="file" name="photos[]" class="absolute inset-0 opacity-0 cursor-pointer" onchange="previewImage(this)">
                            <div class="text-center preview-container">
                                <i class="fas fa-camera text-2xl mb-2"></i>
                                <span class="text-[10px] font-bold uppercase block">Ambil Foto</span>
                            </div>
                        </div>
                        <div class="relative border-2 border-dashed border-gray-200 rounded-xl aspect-square flex flex-col items-center justify-center text-gray-400 hover:border-primary hover:text-primary cursor-pointer transition overflow-hidden">
                            <input type="file" name="photos[]" class="absolute inset-0 opacity-0 cursor-pointer" onchange="previewImage(this)">
                            <div class="text-center preview-container">
                                <i class="fas fa-camera text-2xl mb-2"></i>
                                <span class="text-[10px] font-bold uppercase block">Ambil Foto</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Status & Progress per Component -->
                <?php
                    $componentTypes = [
                        'horticultures' => ['label' => 'Hortikultura', 'icon' => 'leaf', 'color' => 'green'],
                        'livestocks' => ['label' => 'Peternakan', 'icon' => 'cow', 'color' => 'orange'],
                        'poultries' => ['label' => 'Unggas', 'icon' => 'dove', 'color' => 'blue'],
                        'fish' => ['label' => 'Perikanan', 'icon' => 'fish', 'color' => 'cyan']
                    ];
                ?>

                <?php $__currentLoopData = $componentTypes; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $key => $data): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <?php if($beneficiary->$key->count() > 0): ?>
                        <div class="col-span-full bg-<?php echo e($data['color']); ?>-50/30 p-6 rounded-2xl border border-<?php echo e($data['color']); ?>-100">
                            <h4 class="font-bold text-gray-800 mb-4 flex items-center">
                                <i class="fas fa-<?php echo e($data['icon']); ?> text-<?php echo e($data['color']); ?>-500 mr-2"></i>
                                Monitoring <?php echo e($data['label']); ?>

                            </h4>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <?php $__currentLoopData = $beneficiary->$key; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <div class="bg-white p-4 rounded-xl border border-gray-100 shadow-sm">
                                        <p class="text-sm font-bold text-gray-700 mb-3 flex justify-between">
                                            <span><?php echo e($item->type ?? $item->commodity ?? $data['label']); ?></span>
                                            <span class="text-xs font-normal text-gray-400">
                                                <?php if($key === 'horticultures'): ?>
                                                    <?php echo e($item->area); ?> Are
                                                <?php else: ?>
                                                    <?php echo e($item->quantity); ?> Ekor
                                                <?php endif; ?>
                                            </span>
                                        </p>
                                        <div class="grid grid-cols-2 gap-3">
                                            <input type="hidden" name="components[<?php echo e($key); ?>][<?php echo e($index); ?>][id]" value="<?php echo e($item->id); ?>">
                                            <div>
                                                <label class="block text-[10px] font-bold text-gray-400 uppercase mb-1">Status</label>
                                                <select name="components[<?php echo e($key); ?>][<?php echo e($index); ?>][health_status]" class="w-full border border-gray-100 bg-gray-50 rounded-lg px-3 py-2 text-xs outline-none focus:ring-<?php echo e($data['color']); ?>-500">
                                                    <option value="Sangat Baik">Sangat Baik</option>
                                                    <option value="Cukup Baik">Cukup Baik</option>
                                                    <option value="Perlu Perhatian">Perlu Perhatian</option>
                                                    <option value="Gagal">Gagal</option>
                                                </select>
                                            </div>
                                            <div>
                                                <label class="block text-[10px] font-bold text-gray-400 uppercase mb-1">Progres %</label>
                                                <input type="number" name="components[<?php echo e($key); ?>][<?php echo e($index); ?>][growth_percentage]" min="0" max="100" value="0" class="w-full border border-gray-100 bg-gray-50 rounded-lg px-3 py-2 text-xs outline-none focus:ring-<?php echo e($data['color']); ?>-500">
                                            </div>
                                        </div>
                                    </div>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            </div>
                        </div>
                    <?php endif; ?>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

                <!-- Detailed Notes -->
                <div class="col-span-full">
                    <label class="block text-sm font-semibold text-gray-700 mb-2">Catatan Detail Lapangan</label>
                    <textarea name="notes" rows="4" required class="w-full border border-gray-200 rounded-lg px-4 py-2.5 text-sm outline-none focus:ring-primary focus:border-primary" placeholder="Tuliskan kondisi spesifik tanaman/ternak saat ini..."></textarea>
                </div>
            </div>

            <div class="pt-6 border-t border-gray-100 flex items-center justify-end space-x-4">
                <a href="<?php echo e(route('beneficiaries.show', $beneficiary->id)); ?>" class="px-6 py-2.5 text-sm font-medium text-gray-500 hover:text-gray-700">Batal</a>
                <button type="submit" class="bg-primary text-white px-8 py-2.5 rounded-lg text-sm font-bold hover:bg-sky-600 transition shadow-lg shadow-blue-100">
                    Kirim Laporan Monitoring
                </button>
            </div>
        </form>
    </div>
</div>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('scripts'); ?>
<script>
    function previewImage(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            var container = input.parentElement.querySelector('.preview-container');
            
            reader.onload = function(e) {
                container.innerHTML = `<img src="${e.target.result}" class="w-full h-full object-cover">`;
                input.parentElement.classList.remove('border-dashed');
                input.parentElement.classList.add('border-solid', 'border-primary');
            }
            
            reader.readAsDataURL(input.files[0]);
        }
    }

    document.getElementById('get-location').addEventListener('click', function() {
        if (navigator.geolocation) {
            this.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Mencari...';
            navigator.geolocation.getCurrentPosition((position) => {
                document.getElementById('lat-display').value = position.coords.latitude.toFixed(6);
                document.getElementById('lng-display').value = position.coords.longitude.toFixed(6);
                this.innerHTML = '<i class="fas fa-check mr-2"></i> Berhasil';
                this.classList.replace('bg-blue-500', 'bg-green-500');
            }, (error) => {
                alert('Gagal mendapatkan lokasi: ' + error.message);
                this.innerHTML = '<i class="fas fa-location-crosshairs mr-2"></i> Update GPS';
            });
        } else {
            alert('Geolocation tidak didukung oleh browser ini.');
        }
    });
</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/monitoring/create.blade.php ENDPATH**/ ?>