@extends('layouts.app')

@section('title', 'Peta Polygon Kelompok Tani - TaniMapping')

@push('styles')
<style>
    #public-map {
        height: 600px;
        width: 100%;
        border-radius: 15px;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    }
    
    .polygon-info-card {
        background: rgba(255, 255, 255, 0.95);
        border-radius: 10px;
        padding: 15px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }
    
    .polygon-legend {
        background: rgba(255, 255, 255, 0.95);
        border-radius: 10px;
        padding: 20px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }
    
    .legend-item {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
    }
    
    .legend-color {
        width: 20px;
        height: 20px;
        border-radius: 4px;
        margin-right: 10px;
        border: 2px solid #fff;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }
    
    .stats-card {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-radius: 15px;
        padding: 20px;
        margin-bottom: 20px;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    }
    
    .stats-number {
        font-size: 2.5rem;
        font-weight: bold;
        margin-bottom: 5px;
    }
    
    .stats-label {
        font-size: 0.9rem;
        opacity: 0.9;
    }
    
    .polygon-type-badge {
        display: inline-block;
        padding: 4px 8px;
        border-radius: 12px;
        font-size: 0.75rem;
        font-weight: 500;
        margin: 2px;
    }
    
    .polygon-type-badge.lahan {
        background: #d4edda;
        color: #155724;
    }
    
    .polygon-type-badge.irigasi {
        background: #d1ecf1;
        color: #0c5460;
    }
    
    .polygon-type-badge.buffer {
        background: #fff3cd;
        color: #856404;
    }
    
    .polygon-type-badge.lainnya {
        background: #f8d7da;
        color: #721c24;
    }
</style>
@endpush

@section('content')
<div class="row mb-4">
    <div class="col-12">
        <div class="d-flex justify-content-between align-items-center">
            <div>
                <h2 class="text-primary">
                    <i class="fas fa-map-marked-alt me-2"></i>Peta Polygon Kelompok Tani
                </h2>
                <p class="text-muted">Visualisasi area lahan kelompok tani di Kabupaten Tapin</p>
            </div>
            <div>
                <a href="{{ route('home') }}" class="btn btn-outline-secondary me-2">
                    <i class="fas fa-home me-2"></i>Beranda
                </a>
                @auth
                    <a href="{{ route('kelompok-tani.index') }}" class="btn btn-primary">
                        <i class="fas fa-users me-2"></i>Kelompok Tani
                    </a>
                @else
                    <a href="{{ route('login') }}" class="btn btn-primary">
                        <i class="fas fa-sign-in-alt me-2"></i>Login
                    </a>
                @endauth
            </div>
        </div>
    </div>
</div>

<!-- Statistics Cards -->
<div class="row mb-4">
    <div class="col-md-3">
        <div class="stats-card text-center">
            <div class="stats-number">{{ $kelompokTani->count() }}</div>
            <div class="stats-label">Total Kelompok Tani</div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stats-card text-center">
            <div class="stats-number">{{ $kelompokTani->sum('luas_lahan') }}</div>
            <div class="stats-label">Total Luas Lahan (Ha)</div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stats-card text-center">
            <div class="stats-number">{{ $kelompokTani->flatMap->poligon->count() }}</div>
            <div class="stats-label">Total Area Polygon</div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stats-card text-center">
            <div class="stats-number">{{ $kelompokTani->flatMap->poligon->where('jenis', 'lahan')->count() }}</div>
            <div class="stats-label">Area Lahan Pertanian</div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-9">
        <div class="card shadow">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0">
                    <i class="fas fa-map me-2"></i>Peta Area Lahan
                </h5>
            </div>
            <div class="card-body p-0">
                <div id="public-map"></div>
            </div>
        </div>
    </div>
    
    <div class="col-md-3">
        <!-- Legend -->
        <div class="polygon-legend mb-3">
            <h6 class="mb-3">
                <i class="fas fa-info-circle me-2"></i>Legenda
            </h6>
            <div class="legend-item">
                <div class="legend-color" style="background-color: #28a745;"></div>
                <span>Lahan Pertanian</span>
            </div>
            <div class="legend-item">
                <div class="legend-color" style="background-color: #17a2b8;"></div>
                <span>Area Irigasi</span>
            </div>
            <div class="legend-item">
                <div class="legend-color" style="background-color: #ffc107;"></div>
                <span>Area Buffer</span>
            </div>
            <div class="legend-item">
                <div class="legend-color" style="background-color: #dc3545;"></div>
                <span>Lainnya</span>
            </div>
        </div>
        
        <!-- Polygon List -->
        <div class="card shadow">
            <div class="card-header bg-info text-white">
                <h6 class="mb-0">
                    <i class="fas fa-list me-2"></i>Daftar Area
                </h6>
            </div>
            <div class="card-body" style="max-height: 400px; overflow-y: auto;">
                @forelse($kelompokTani as $kt)
                    @if($kt->poligon && $kt->poligon->count() > 0)
                        @foreach($kt->poligon as $polygon)
                            <div class="mb-3 p-2 border rounded">
                                <h6 class="mb-1">{{ $kt->nama_kelompok }}</h6>
                                <span class="polygon-type-badge {{ $polygon->jenis }}">
                                    {{ ucfirst($polygon->jenis) }}
                                </span>
                                @if($polygon->deskripsi)
                                    <small class="d-block text-muted mt-1">{{ $polygon->deskripsi }}</small>
                                @endif
                                <small class="d-block text-muted mt-1">
                                    <i class="fas fa-map-marker-alt me-1"></i>
                                    {{ $kt->alamat ?: 'Alamat tidak tersedia' }}
                                </small>
                            </div>
                        @endforeach
                    @endif
                @empty
                    <p class="text-muted text-center">Belum ada data polygon</p>
                @endforelse
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Initialize public map
    const publicMap = L.map('public-map').setView([-2.9167, 115.1667], 10);
    
    // Add OpenStreetMap tiles
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '© OpenStreetMap contributors'
    }).addTo(publicMap);
    
    // Color mapping for polygon types
    const polygonColors = {
        'lahan': '#28a745',
        'irigasi': '#17a2b8',
        'buffer': '#ffc107',
        'lainnya': '#dc3545'
    };
    
    // Store all polygons for bounds calculation
    const allPolygons = [];
    
    // Add polygons to map
    @foreach($kelompokTani as $kt)
        @if($kt->poligon && $kt->poligon->count() > 0)
            @foreach($kt->poligon as $polygon)
                @if($polygon->koordinat && count($polygon->koordinat) >= 3)
                    const polygonCoords{{ $kt->id }}_{{ $polygon->id }} = [
                        @foreach($polygon->koordinat as $coord)
                            [{{ $coord['lat'] }}, {{ $coord['lng'] }}],
                        @endforeach
                    ];

                    const polygon{{ $kt->id }}_{{ $polygon->id }} = L.polygon(polygonCoords{{ $kt->id }}_{{ $polygon->id }}, {
                        color: '{{ $polygonColors[$polygon->jenis] ?? "#6c757d" }}',
                        weight: 3,
                        fillColor: '{{ $polygonColors[$polygon->jenis] ?? "#6c757d" }}',
                        fillOpacity: 0.4
                    }).addTo(publicMap);

                    // Add popup with information
                    polygon{{ $kt->id }}_{{ $polygon->id }}.bindPopup(`
                        <div class="polygon-info-card">
                            <h6 class="mb-2">
                                <i class="fas fa-users me-2"></i>{{ $kt->nama_kelompok }}
                            </h6>
                            <p class="mb-2">
                                <strong>Jenis Area:</strong> 
                                <span class="polygon-type-badge {{ $polygon->jenis }}">
                                    {{ ucfirst($polygon->jenis) }}
                                </span>
                            </p>
                            @if($polygon->deskripsi)
                                <p class="mb-2">
                                    <strong>Deskripsi:</strong> {{ $polygon->deskripsi }}
                                </p>
                            @endif
                            <p class="mb-2">
                                <strong>Luas Lahan:</strong> {{ $kt->luas_lahan }} Ha
                            </p>
                            <p class="mb-2">
                                <strong>Alamat:</strong> {{ $kt->alamat ?: 'Tidak tersedia' }}
                            </p>
                            @if($kt->jalurIrigasi)
                                <p class="mb-0">
                                    <strong>Jalur Irigasi:</strong> {{ $kt->jalurIrigasi->irigasi->nama_irigasi }}
                                </p>
                            @endif
                        </div>
                    `);

                    // Store polygon for bounds calculation
                    allPolygons.push(polygon{{ $kt->id }}_{{ $polygon->id }});
                @endif
            @endforeach
        @endif
    @endforeach
    
    // Fit map bounds to include all polygons
    if (allPolygons.length > 0) {
        const group = new L.featureGroup(allPolygons);
        publicMap.fitBounds(group.getBounds().pad(0.1));
    }
    
    // Add scale control
    L.control.scale().addTo(publicMap);
});
</script>
@endpush