@extends('layouts.app')

@section('title', 'Detail Kelompok Tani - TaniMapping')

@push('styles')
<style>
    #map {
        height: 400px;
        width: 100%;
        border-radius: 10px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    
    .photo-gallery img {
        width: 100%;
        height: 200px;
        object-fit: cover;
        border-radius: 8px;
        transition: transform 0.2s;
    }
    
    .photo-gallery img:hover {
        transform: scale(1.05);
    }
    
    .info-card {
        transition: transform 0.2s;
    }
    
    .info-card:hover {
        transform: translateY(-2px);
    }
</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-success">
                    <i class="fas fa-users me-2"></i>{{ $kelompokTani->nama_kelompok }}
                </h2>
                <p class="text-muted">Detail informasi kelompok tani</p>
            </div>
            <div>
                <a href="{{ route('kelompok-tani.edit', $kelompokTani->id) }}" class="btn btn-warning me-2">
                    <i class="fas fa-edit me-2"></i>Edit
                </a>
                <a href="{{ route('kelompok-tani.index') }}" class="btn btn-outline-secondary">
                    <i class="fas fa-arrow-left me-2"></i>Kembali
                </a>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <!-- Main Information -->
    <div class="col-md-8">
        <div class="row">
            <!-- Basic Info -->
            <div class="col-md-6 mb-4">
                <div class="card shadow info-card h-100">
                    <div class="card-header bg-primary text-white">
                        <h6 class="mb-0">
                            <i class="fas fa-info-circle me-2"></i>Informasi Dasar
                        </h6>
                    </div>
                    <div class="card-body">
                        <table class="table table-borderless">
                            <tr>
                                <td><strong>Nama Kelompok:</strong></td>
                                <td>{{ $kelompokTani->nama_kelompok }}</td>
                            </tr>
                            <tr>
                                <td><strong>Jalur Irigasi:</strong></td>
                                <td>
                                    <span class="badge bg-info">
                                        <i class="fas fa-route me-1"></i>
                                @if($kelompokTani->jalurIrigasi && $kelompokTani->jalurIrigasi->irigasi)
                                    {{ $kelompokTani->jalurIrigasi->irigasi->nama_irigasi }} - {{ $kelompokTani->jalurIrigasi->nama_titik ?: 'Titik ' . $kelompokTani->jalurIrigasi->urutan }}
                                @else
                                    <span class="text-warning">Jalur Irigasi tidak ditemukan</span>
                                @endif
                                    </span>
                                </td>
                            </tr>
                            <tr>
                                <td><strong>Luas Lahan:</strong></td>
                                <td>
                                    <span class="badge bg-success">{{ $kelompokTani->luas_lahan }} Ha</span>
                                </td>
                            </tr>
                            <tr>
                                <td><strong>Alamat:</strong></td>
                                <td>
                                    @if($kelompokTani->alamat)
                                        <i class="fas fa-map-marker-alt me-1"></i>{{ $kelompokTani->alamat }}
                                    @else
                                        <span class="text-muted">-</span>
                                    @endif
                                </td>
                            </tr>
                            <tr>
                                <td><strong>Koordinat:</strong></td>
                                <td>
                                    <small class="text-muted font-monospace">
                                        {{ $kelompokTani->latitude }}, {{ $kelompokTani->longitude }}
                                    </small>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>

            <!-- Additional Info -->
            <div class="col-md-6 mb-4">
                <div class="card shadow info-card h-100">
                    <div class="card-header bg-success text-white">
                        <h6 class="mb-0">
                            <i class="fas fa-plus-circle me-2"></i>Informasi Tambahan
                        </h6>
                    </div>
                    <div class="card-body">
                        <table class="table table-borderless">
                            <tr>
                                <td><strong>Deskripsi:</strong></td>
                                <td>
                                    @if($kelompokTani->deskripsi)
                                        {{ $kelompokTani->deskripsi }}
                                    @else
                                        <span class="text-muted">-</span>
                                    @endif
                                </td>
                            </tr>
                            <tr>
                                <td><strong>Dibuat Oleh:</strong></td>
                                <td>
                                    <i class="fas fa-user me-1"></i>{{ $kelompokTani->creator ? $kelompokTani->creator->nama_lengkap : 'User tidak ditemukan' }}
                                </td>
                            </tr>
                            <tr>
                                <td><strong>Tanggal Dibuat:</strong></td>
                                <td>
                                    <i class="fas fa-calendar me-1"></i>{{ $kelompokTani->created_at->format('d/m/Y H:i') }}
                                </td>
                            </tr>
                            <tr>
                                <td><strong>Terakhir Update:</strong></td>
                                <td>
                                    <i class="fas fa-clock me-1"></i>{{ $kelompokTani->updated_at->format('d/m/Y H:i') }}
                                </td>
                            </tr>
                            <tr>
                                <td><strong>Jumlah Foto:</strong></td>
                                <td>
                                    <span class="badge bg-info">{{ $kelompokTani->fotos->count() }} Foto</span>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- Photos -->
        @if($kelompokTani->fotos->count() > 0)
            <div class="card shadow mb-4">
                <div class="card-header bg-warning text-white">
                    <h6 class="mb-0">
                        <i class="fas fa-camera me-2"></i>Foto Lahan ({{ $kelompokTani->fotos->count() }})
                    </h6>
                </div>
                <div class="card-body">
                    <div class="row photo-gallery">
                        @foreach($kelompokTani->fotos as $foto)
                            <div class="col-md-4 mb-3">
                                <img src="{{ asset('storage/' . $foto->path) }}" 
                                     alt="{{ $foto->caption ?? 'Foto Lahan' }}" 
                                     class="img-fluid" 
                                     data-bs-toggle="modal" 
                                     data-bs-target="#photoModal{{ $foto->id }}">
                                
                                @if($foto->caption)
                                    <p class="text-center mt-2 mb-0">
                                        <small class="text-muted">{{ $foto->caption }}</small>
                                    </p>
                                @endif
                            </div>

                            <!-- Photo Modal -->
                            <div class="modal fade" id="photoModal{{ $foto->id }}" tabindex="-1">
                                <div class="modal-dialog modal-lg">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title">Foto Lahan</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                        </div>
                                        <div class="modal-body text-center">
                                            <img src="{{ asset('storage/' . $foto->path) }}" 
                                                 alt="{{ $foto->caption ?? 'Foto Lahan' }}" 
                                                 class="img-fluid">
                                            @if($foto->caption)
                                                <p class="mt-3">{{ $foto->caption }}</p>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        @endif

        <!-- Map -->
        <div class="card shadow">
            <div class="card-header bg-info text-white">
                <h6 class="mb-0">
                    <i class="fas fa-map me-2"></i>Lokasi di Peta
                </h6>
            </div>
            <div class="card-body">
                <div id="map"></div>
            </div>
        </div>
    </div>

    <!-- Sidebar -->
    <div class="col-md-4">
        <!-- Jalur Irigasi Info -->
        <div class="card shadow mb-4">
            <div class="card-header bg-info text-white">
                <h6 class="mb-0">
                    <i class="fas fa-route me-2"></i>Informasi Jalur Irigasi
                </h6>
            </div>
            <div class="card-body">
                <h6>
                    @if($kelompokTani->jalurIrigasi && $kelompokTani->jalurIrigasi->irigasi)
                        {{ $kelompokTani->jalurIrigasi->irigasi->nama_irigasi }}
                    @else
                        <span class="text-warning">Jalur Irigasi tidak ditemukan</span>
                    @endif
                </h6>
                <p class="mb-2">
                    <i class="fas fa-map-pin me-1"></i>{{ $kelompokTani->jalurIrigasi->nama_titik ?: 'Titik ' . $kelompokTani->jalurIrigasi->urutan }}
                </p>
                @if($kelompokTani->jalurIrigasi->irigasi->lokasi)
                    <p class="mb-2">
                        <i class="fas fa-map-marker-alt me-1"></i>{{ $kelompokTani->jalurIrigasi->irigasi->lokasi }}
                    </p>
                @endif
                @if($kelompokTani->jalurIrigasi->irigasi->deskripsi)
                    <p class="mb-0 text-muted">{{ $kelompokTani->jalurIrigasi->irigasi->deskripsi }}</p>
                @endif
            </div>
        </div>

        <!-- Polygon Area Info -->
        @if($kelompokTani->poligon && $kelompokTani->poligon->count() > 0)
        <div class="card shadow mb-4">
            <div class="card-header bg-warning text-dark">
                <h6 class="mb-0">
                    <i class="fas fa-draw-polygon me-2"></i>Area Lahan (Polygon)
                </h6>
            </div>
            <div class="card-body">
                @foreach($kelompokTani->poligon as $polygon)
                <div class="border rounded p-3 mb-3">
                    <div class="row">
                        <div class="col-md-6">
                            <h6 class="text-primary">
                                <i class="fas fa-shapes me-2"></i>
                                @switch($polygon->jenis)
                                    @case('lahan')
                                        Lahan Pertanian
                                        @break
                                    @case('irigasi')
                                        Area Irigasi
                                        @break
                                    @case('buffer')
                                        Area Buffer
                                        @break
                                    @default
                                        {{ ucfirst($polygon->jenis) }}
                                @endswitch
                            </h6>
                            @if($polygon->deskripsi)
                                <p class="text-muted mb-2">{{ $polygon->deskripsi }}</p>
                            @endif
                        </div>
                        <div class="col-md-6">
                            <div class="text-end">
                                <span class="badge bg-secondary">
                                    <i class="fas fa-map-pin me-1"></i>
                                    {{ count($polygon->koordinat) }} Titik
                                </span>
                            </div>
                        </div>
                    </div>
                    
                    @if($polygon->koordinat && count($polygon->koordinat) > 0)
                    <div class="mt-3">
                        <small class="text-muted">
                            <strong>Koordinat:</strong><br>
                            @foreach($polygon->koordinat as $index => $coord)
                                {{ $index + 1 }}. {{ number_format($coord['lat'], 6) }}, {{ number_format($coord['lng'], 6) }}<br>
                            @endforeach
                        </small>
                    </div>
                    @endif
                </div>
                @endforeach
            </div>
        </div>
        @endif

        <!-- Quick Actions -->
        <div class="card shadow">
            <div class="card-header bg-success text-white">
                <h6 class="mb-0">
                    <i class="fas fa-bolt me-2"></i>Aksi Cepat
                </h6>
            </div>
            <div class="card-body">
                <div class="d-grid gap-2">
                    <a href="{{ route('kelompok-tani.edit', $kelompokTani->id) }}" class="btn btn-warning">
                        <i class="fas fa-edit me-2"></i>Edit Data
                    </a>
                    <a href="{{ route('kelompok-tani.index') }}" class="btn btn-outline-secondary">
                        <i class="fas fa-list me-2"></i>Lihat Semua
                    </a>
                    <a href="{{ route('home') }}" class="btn btn-outline-info">
                        <i class="fas fa-map me-2"></i>Lihat Peta
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Initialize map
    const showMap = L.map('map').setView([{{ $kelompokTani->latitude }}, {{ $kelompokTani->longitude }}], 15);
    
    // Add OpenStreetMap tiles
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '© OpenStreetMap contributors'
    }).addTo(showMap);
    
    // Add marker for this kelompok tani
    const marker = L.marker([{{ $kelompokTani->latitude }}, {{ $kelompokTani->longitude }}])
        .addTo(showMap)
        .bindPopup(`
            <div class="text-center">
                <h6><i class="fas fa-users me-2"></i>{{ $kelompokTani->nama_kelompok }}</h6>
                <p class="mb-2"><i class="fas fa-route me-2"></i>
                    @if($kelompokTani->jalurIrigasi && $kelompokTani->jalurIrigasi->irigasi)
                        {{ $kelompokTani->jalurIrigasi->irigasi->nama_irigasi }} - {{ $kelompokTani->jalurIrigasi->nama_titik ?: 'Titik ' . $kelompokTani->jalurIrigasi->urutan }}
                    @else
                        <span class="text-warning">Jalur Irigasi tidak ditemukan</span>
                    @endif
                </p>
                <p class="mb-0"><i class="fas fa-ruler-combined me-2"></i>{{ $kelompokTani->luas_lahan }} Ha</p>
            </div>
        `);
    
    // Add jalur irigasi marker if different location
    @if($kelompokTani->jalurIrigasi->latitude && $kelompokTani->jalurIrigasi->longitude)
        const jalurMarker{{ $kelompokTani->jalurIrigasi->id }} = L.marker([{{ $kelompokTani->jalurIrigasi->latitude }}, {{ $kelompokTani->jalurIrigasi->longitude }}])
            .addTo(showMap)
            .bindPopup(`
                <div class="text-center">
                    <h6><i class="fas fa-route me-2"></i>
                        @if($kelompokTani->jalurIrigasi && $kelompokTani->jalurIrigasi->irigasi)
                            {{ $kelompokTani->jalurIrigasi->irigasi->nama_irigasi }}
                        @else
                            <span class="text-warning">Jalur Irigasi tidak ditemukan</span>
                        @endif
                    </h6>
                    <p class="mb-0">Titik Jalur Irigasi</p>
                </div>
            `);
    @endif

    // Add polygon areas to map
    @if($kelompokTani->poligon && $kelompokTani->poligon->count() > 0)
        @foreach($kelompokTani->poligon as $polygon)
            @if($polygon->koordinat && count($polygon->koordinat) >= 3)
                const polygonCoords{{ $polygon->id }} = [
                    @foreach($polygon->koordinat as $coord)
                        [{{ $coord['lat'] }}, {{ $coord['lng'] }}],
                    @endforeach
                ];
                
                const polygon{{ $polygon->id }} = L.polygon(polygonCoords{{ $polygon->id }}, {
                    color: '#ffc107',
                    weight: 3,
                    fillColor: '#ffc107',
                    fillOpacity: 0.3
                }).addTo(showMap);
                
                polygon{{ $polygon->id }}.bindPopup(`
                    <div class="text-center">
                        <h6><i class="fas fa-draw-polygon me-2"></i>
                            @switch($polygon->jenis)
                                @case('lahan')
                                    Lahan Pertanian
                                    @break
                                @case('irigasi')
                                    Area Irigasi
                                    @break
                                @case('buffer')
                                    Area Buffer
                                    @break
                                @default
                                    {{ ucfirst($polygon->jenis) }}
                            @endswitch
                        </h6>
                        @if($polygon->deskripsi)
                            <p class="mb-1">{{ $polygon->deskripsi }}</p>
                        @endif
                        <p class="mb-0 text-muted">
                            <i class="fas fa-map-pin me-1"></i>
                            {{ count($polygon->koordinat) }} Titik
                        </p>
                    </div>
                `);
                
                // Fit map bounds to include polygon
                showMap.fitBounds(polygon{{ $polygon->id }}.getBounds());
            @endif
        @endforeach
    @endif
});
</script>
@endpush