@extends('layout.main')

@push('style')
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />

<style>
    .plant-marker {
        border: 2px solid #ffffff;
        border-radius: 50%;
        box-shadow: 0 0 5px rgba(0,0,0,0.6);
        animation: pulse 2s infinite;
    }
    @keyframes pulse {
        0% { box-shadow: 0 0 0 0 rgba(0,0,0, 0.4); }
        70% { box-shadow: 0 0 0 10px rgba(0,0,0, 0); }
        100% { box-shadow: 0 0 0 0 rgba(0,0,0, 0); }
    }
</style>
@endpush

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
    <div class="card">
        <div class="card-header border-bottom mb-4 d-flex justify-content-between align-items-center">
            <h5 class="card-title mb-0">Detail Map Tanaman</h5>
            <a href="{{ route('tanaman.index') }}" class="btn btn-sm btn-label-secondary">
                <i class="ti tabler-arrow-left me-1"></i> Kembali
            </a>
        </div>
        
        <div class="card-body">
            <div class="row">
                <div class="col-lg-5 mb-4">
                    <h6 class="mb-3 text-primary"><i class="ti tabler-seeding me-1"></i> Identitas Tanaman</h6>
                    
                    <div class="mb-3">
                        <label class="form-label">Nama Tanaman</label>
                        <input type="text" class="form-control bg-lighter fw-bold text-dark" value="{{ $tanaman->nama }}" readonly />
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Pemilik / Pengelola</label>
                        <input type="text" class="form-control bg-lighter" value="{{ $tanaman->profile->nama ?? '-' }}" readonly />
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Komoditas</label>
                            <div class="input-group">
                                <span class="input-group-text color-indicator" style="background-color: #fff; border-right: none;"></span>
                                <input type="text" class="form-control bg-lighter" value="{{ $tanaman->komoditas->nama ?? '-' }}" readonly />
                            </div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Kondisi Saat Ini</label>
                            <div>
                                @if($tanaman->kondisi_tanaman == 'sehat')
                                    <span class="badge bg-label-success w-100 p-2 fs-6">Sehat</span>
                                @elseif($tanaman->kondisi_tanaman == 'sakit')
                                    <span class="badge bg-label-warning w-100 p-2 fs-6">Sakit</span>
                                @else
                                    <span class="badge bg-label-danger w-100 p-2 fs-6">Mati</span>
                                @endif
                            </div>
                        </div>
                    </div>

                    <hr class="my-4">
                    <h6 class="mb-3 text-primary"><i class="ti tabler-map-pin me-1"></i> Informasi Spasial (Lokasi)</h6>

                    <div class="mb-3">
                        <label class="form-label">Berada di Lahan</label>
                        <input type="text" class="form-control bg-lighter" value="{{ $tanaman->lahan->nama ?? '-' }}" readonly />
                    </div>

                    <div class="row">
                        <div class="col-6 mb-3">
                            <label class="form-label">Latitude</label>
                            <input type="text" class="form-control bg-lighter font-monospace" value="{{ $tanaman->latitude }}" readonly />
                        </div>
                        <div class="col-6 mb-3">
                            <label class="form-label">Longitude</label>
                            <input type="text" class="form-control bg-lighter font-monospace" value="{{ $tanaman->longitude }}" readonly />
                        </div>
                    </div>
                </div>

                <div class="col-lg-7 mb-4">
                    <h6 class="mb-3 text-primary"><i class="ti tabler-map me-1"></i> Visualisasi Titik Tanam</h6>
                    <div class="border rounded" style="height: 500px; position: relative;">
                        <div id="map" style="height: 100%; width: 100%; border-radius: 0.375rem; z-index: 1;"></div>
                    </div>
                    <small class="text-muted d-block mt-2 fst-italic">*Klik pada titik tanaman di peta untuk melihat informasi kondisi.</small>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
@endsection

@push('scripts')
<script>
    document.addEventListener("DOMContentLoaded", function() {
        let lahanPath = {!! $tanaman->lahan->path ? $tanaman->lahan->path : '[]' !!};
        let plantLat = {{ $tanaman->latitude }};
        let plantLng = {{ $tanaman->longitude }};
        let plantName = "{{ $tanaman->nama }}";
        let plantCondition = "{{ ucfirst($tanaman->kondisi_tanaman) }}";
        let komoditasId = {{ $tanaman->komoditas_id ?? 1 }};

        const colorPalette = [
            '#FF33A8', '#3357FF', '#F3FF33', '#FF5733', '#33FFF5', 
            '#8A33FF', '#FF8F33', '#33FF8A', '#FF3333', '#33A8FF'
        ];
  
        let markerColor = colorPalette[komoditasId % colorPalette.length];
        
        document.querySelector('.color-indicator').style.backgroundColor = markerColor;

        let map = L.map('map').setView([plantLat, plantLng], 18);

        L.tileLayer('http://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}', {
            maxZoom: 22,
            subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
            attribution: '&copy; Google Maps Satellite'
        }).addTo(map);

        if (Array.isArray(lahanPath) && lahanPath.length > 0) {
            try {
                let latLngs = lahanPath.map(coord => [coord[1], coord[0]]);
                
                let polygon = L.polygon(latLngs, {
                    color: '#28c76f',     
                    fillColor: '#28c76f', 
                    fillOpacity: 0.3,
                    weight: 2
                }).addTo(map);

                map.fitBounds(polygon.getBounds(), { padding: [20, 20] });
            } catch (e) {
                console.error("Gagal menggambar poligon lahan.");
            }
        }

        let customIcon = L.divIcon({
            className: 'custom-div-icon',
            html: `<div class="plant-marker" style="background-color:${markerColor}; width:20px; height:20px;"></div>`,
            iconSize: [20, 20],
            iconAnchor: [10, 10]
        });

        let badgeClass = 'bg-label-success';
        if (plantCondition.toLowerCase() === 'sakit') badgeClass = 'bg-label-warning';
        if (plantCondition.toLowerCase() === 'mati') badgeClass = 'bg-label-danger';

        let popupContent = `
            <div class="text-center" style="min-width: 120px;">
                <h6 class="mb-1 fw-bold">${plantName}</h6>
            </div>
        `;

        let marker = L.marker([plantLat, plantLng], { icon: customIcon }).addTo(map);
        marker.bindPopup(popupContent);

        setTimeout(() => { marker.openPopup(); }, 500);
    });
</script>
@endpush