

<?php $__env->startSection('styles'); ?>
<link rel="stylesheet" href="<?php echo e(asset('css/detail.css')); ?>">
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css"/>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('content'); ?>

<div class="detail-container">

    
    <div class="breadcrumb">
        <?php if(auth()->user()->role == 'petani'): ?>
            <a href="/petani/dashboard">Dashboard</a>
        <?php elseif(auth()->user()->role == 'penyuluh'): ?>
            <a href="/penyuluh/dashboard">Dashboard</a>
        <?php elseif(auth()->user()->role == 'admin'): ?>
            <a href="/admin/dashboard">Dashboard</a>
        <?php endif; ?>
        <span>›</span>
        <span>Detail Laporan</span>
    </div>

    
    <div class="page-title">
        <h2>Detail Laporan Hama</h2>
        <span class="status-pill status-<?php echo e($lapor->status); ?>">
            <?php echo e(str_replace('_', ' ', $lapor->status)); ?>

        </span>
    </div>

    
    <div class="top-grid">

        
        <div class="info-col">

            
            <div class="card">
                <div class="card-label">
                    <span class="card-icon">👨‍🌾</span>
                    Informasi Petani
                </div>

                <div class="info-list">

                    <div class="info-row">
                        <span class="info-key">Nama</span>
                        <span class="info-val"><?php echo e($lapor->nama_petani); ?></span>
                    </div>

                    <div class="info-row">
                        <span class="info-key">Lokasi</span>
                        <span class="info-val"><?php echo e($lapor->lokasi); ?></span>
                    </div>

                    <div class="info-row">
                        <span class="info-key">Koordinat</span>
                        <span class="info-val coord"><?php echo e($lapor->lat); ?>, <?php echo e($lapor->lng); ?></span>
                    </div>

                    <div class="info-row">
                        <span class="info-key">Kecamatan</span>
                        <span class="info-val"><?php echo e($lapor->kecamatan ?? '-'); ?></span>
                    </div>

                    <div class="info-row">
                        <span class="info-key">Tanggal</span>
                        <span class="info-val"><?php echo e($lapor->created_at->format('d M Y, H:i')); ?> WIB</span>
                    </div>

                </div>
            </div>

            
            <div class="card">
                <div class="card-label">
                    <span class="card-icon">🐛</span>
                    Detail Serangan Hama
                </div>

                <div class="serangan-grid">

                    <div class="serangan-item">
                        <span class="serangan-key">Jenis Hama</span>
                        <span class="serangan-val hama"><?php echo e($lapor->jenis_hama); ?></span>
                    </div>

                    <div class="serangan-item">
                        <span class="serangan-key">Tingkat Serangan</span>
                        <span class="badge-tingkat
                            <?php if($lapor->tingkat_serangan=='Berat'): ?> berat
                            <?php elseif($lapor->tingkat_serangan=='Sedang'): ?> sedang
                            <?php else: ?> ringan
                            <?php endif; ?>">
                            <?php if($lapor->tingkat_serangan=='Berat'): ?> 🔴
                            <?php elseif($lapor->tingkat_serangan=='Sedang'): ?> 🟡
                            <?php else: ?> 🟢
                            <?php endif; ?>
                            <?php echo e($lapor->tingkat_serangan); ?>

                        </span>
                    </div>

                    <div class="serangan-item">
                        <span class="serangan-key">Luas Lahan</span>
                        <span class="serangan-val"><?php echo e($lapor->luas_lahan); ?> Ha</span>
                    </div>

                    <div class="serangan-item">
                        <span class="serangan-key">Lama Kejadian</span>
                        <span class="serangan-val"><?php echo e($lapor->lama_kejadian); ?> hari</span>
                    </div>

                </div>

                <?php if($lapor->deskripsi): ?>
                <div class="desc-wrapper">
                    <span class="serangan-key">Deskripsi</span>
                    <div class="desc"><?php echo e($lapor->deskripsi); ?></div>
                </div>
                <?php endif; ?>

            </div>

        </div>

        
        <div class="foto-col">
            <div class="card foto-card">
                <div class="card-label">
                    <span class="card-icon">📷</span>
                    Foto Laporan
                </div>

                <?php if($lapor->foto): ?>
                    <div class="foto-wrapper">
                        <img
                            src="<?php echo e(asset('foto/'.$lapor->foto)); ?>"
                            class="foto"
                            alt="Foto laporan hama"
                            onclick="openLightbox(this.src)"
                        >
                        <div class="foto-hint">Klik foto untuk memperbesar</div>
                    </div>
                <?php else: ?>
                    <div class="foto-empty">
                        <span>📷</span>
                        <p>Foto tidak tersedia</p>
                    </div>
                <?php endif; ?>
            </div>
        </div>

    </div>

    
    <div class="card map-card">
        <div class="card-label">
            <span class="card-icon">📍</span>
            Lokasi di Peta
        </div>
        <div id="map"></div>
    </div>

    
    <div class="action-bar">

        <a href="javascript:history.back()" class="btn-back">← Kembali</a>

        <?php if(auth()->user()->role == 'penyuluh' && $lapor->status != 'menunggu_validasi'): ?>
            <a href="/penyuluh/analisis/<?php echo e($lapor->id); ?>" class="btn-analisis">
                📊 Lihat Analisis TOPSIS
            </a>
        <?php endif; ?>

        <?php if($lapor->status == 'menunggu_validasi' && auth()->user()->role == 'petani'): ?>
            <a href="/lapor/<?php echo e($lapor->id); ?>/edit" class="btn-edit">
                ✏ Edit Laporan
            </a>
        <?php endif; ?>

    </div>

</div>


<div class="lightbox" id="lightbox" onclick="closeLightbox()">
    <img id="lightboxImg" src="" alt="Foto besar">
    <button class="lightbox-close" onclick="closeLightbox()">✕</button>
</div>

<?php $__env->stopSection(); ?>

<?php $__env->startSection('scripts'); ?>
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script>

/* ===== MAP ===== */
var lat = <?php echo e($lapor->lat ?? -5.2); ?>;
var lng = <?php echo e($lapor->lng ?? 119.4); ?>;

var map = L.map('map').setView([lat, lng], 15);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap'
}).addTo(map);

var icon = L.divIcon({
    html: `<div style="
        background:#2e7d32;color:white;
        border-radius:50% 50% 50% 0;
        width:36px;height:36px;
        transform:rotate(-45deg);
        display:flex;align-items:center;justify-content:center;
        box-shadow:0 4px 12px rgba(0,0,0,0.3);
        border:3px solid white;">
        <span style="transform:rotate(45deg);font-size:16px;">📍</span>
    </div>`,
    iconSize: [36, 36],
    iconAnchor: [18, 36],
    popupAnchor: [0, -38],
    className: ''
});

var marker = L.marker([lat, lng], { icon: icon }).addTo(map);

marker.bindPopup(`
    <div style="font-family:'Poppins',sans-serif;min-width:210px;padding:4px 0;">
        <div style="font-weight:700;color:#1b5e20;font-size:14px;margin-bottom:8px;">
            📍 Lokasi Serangan
        </div>
        <table style="font-size:12px;line-height:2;width:100%;">
            <tr>
                <td style="color:#6b7280;padding-right:8px;white-space:nowrap;">Petani</td>
                <td style="font-weight:600;"><?php echo e($lapor->nama_petani); ?></td>
            </tr>
            <tr>
                <td style="color:#6b7280;white-space:nowrap;">Kecamatan</td>
                <td style="font-weight:600;"><?php echo e($lapor->kecamatan ?? '-'); ?></td>
            </tr>
            <tr>
                <td style="color:#6b7280;white-space:nowrap;">Hama</td>
                <td style="font-weight:600;"><?php echo e($lapor->jenis_hama); ?></td>
            </tr>
            <tr>
                <td style="color:#6b7280;white-space:nowrap;">Tingkat</td>
                <td>
                    <span style="
                        background:<?php echo e($lapor->tingkat_serangan=='Berat' ? '#ffebee' : ($lapor->tingkat_serangan=='Sedang' ? '#fff3e0' : '#e8f5e9')); ?>;
                        color:<?php echo e($lapor->tingkat_serangan=='Berat' ? '#c62828' : ($lapor->tingkat_serangan=='Sedang' ? '#e65100' : '#2e7d32')); ?>;
                        padding:2px 8px;border-radius:10px;font-weight:600;font-size:11px;">
                        <?php echo e($lapor->tingkat_serangan); ?>

                    </span>
                </td>
            </tr>
            <tr>
                <td style="color:#6b7280;white-space:nowrap;">Lokasi</td>
                <td><?php echo e(Str::limit($lapor->lokasi, 50)); ?></td>
            </tr>
        </table>
    </div>
`).openPopup();

setTimeout(() => map.invalidateSize(), 300);

/* ===== LIGHTBOX ===== */
function openLightbox(src) {
    document.getElementById('lightboxImg').src = src;
    document.getElementById('lightbox').classList.add('active');
    document.body.style.overflow = 'hidden';
}

function closeLightbox() {
    document.getElementById('lightbox').classList.remove('active');
    document.body.style.overflow = '';
}

document.addEventListener('keydown', e => {
    if (e.key === 'Escape') closeLightbox();
});

</script>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\Users\Maylha\pelaporanpertanian\resources\views/lapor/show.blade.php ENDPATH**/ ?>