@extends('layouts.app')

@section('title', 'Detail Irigasi - ' . $irigasi->nama_irigasi)

@push('styles')
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<style>
    #map {
        height: 400px;
        width: 100%;
        border-radius: 10px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    
    .info-card {
        transition: transform 0.2s ease-in-out;
    }
    
    .info-card:hover {
        transform: translateY(-2px);
    }
    
    .kelompok-tani-card {
        border-left: 4px solid #198754;
        transition: all 0.3s ease;
    }
    
    .kelompok-tani-card:hover {
        border-left-color: #0d6efd;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
    
    .photo-preview {
        max-width: 100px;
        max-height: 100px;
        object-fit: cover;
        border-radius: 5px;
        margin: 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-primary">
                    <i class="fas fa-water me-2"></i>{{ $irigasi->nama_irigasi }}
                </h2>
                <p class="text-muted">Detail sistem irigasi pertanian</p>
            </div>
            <div>
                @if(auth()->user()->isAdmin())
                    <a href="{{ route('irigasi.edit', $irigasi->id) }}" class="btn btn-warning me-2">
                        <i class="fas fa-edit me-2"></i>Edit
                    </a>
                @endif
                <a href="{{ route('irigasi.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">
        <!-- Basic Info Card -->
        <div class="card shadow mb-4">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0">
                    <i class="fas fa-info-circle me-2"></i>Informasi Dasar
                </h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <p class="mb-3">
                            <i class="fas fa-water me-2 text-primary"></i>
                            <strong>Nama Irigasi:</strong><br>
                            {{ $irigasi->nama_irigasi }}
                        </p>
                        
                        @if($irigasi->lokasi)
                            <p class="mb-3">
                                <i class="fas fa-map-marker-alt me-2 text-success"></i>
                                <strong>Lokasi:</strong><br>
                                {{ $irigasi->lokasi }}
                            </p>
                        @endif
                        
                        @if($irigasi->created_at)
                            <p class="mb-3">
                                <i class="fas fa-calendar me-2 text-info"></i>
                                <strong>Dibuat:</strong><br>
                                {{ $irigasi->created_at->format('d F Y H:i') }}
                            </p>
                        @endif
                    </div>
                    
                    <div class="col-md-6">
                        @if($irigasi->latitude && $irigasi->longitude)
                            <p class="mb-3">
                                <i class="fas fa-map-pin me-2 text-warning"></i>
                                <strong>Koordinat:</strong><br>
                                <span class="font-monospace">{{ $irigasi->latitude }}, {{ $irigasi->longitude }}</span>
                            </p>
                        @endif
                        
                        @if($irigasi->updated_at)
                            <p class="mb-3">
                                <i class="fas fa-clock me-2 text-secondary"></i>
                                <strong>Terakhir Diupdate:</strong><br>
                                {{ $irigasi->updated_at->format('d F Y H:i') }}
                            </p>
                        @endif
                        
                        <p class="mb-3">
                            <i class="fas fa-users me-2 text-danger"></i>
                            <strong>Jumlah Kelompok Tani:</strong><br>
                            <span class="badge bg-primary fs-6">{{ $irigasi->kelompokTani->count() }}</span>
                        </p>
                    </div>
                </div>
                
                @if($irigasi->deskripsi)
                    <hr>
                    <div>
                        <h6><i class="fas fa-align-left me-2"></i>Deskripsi:</h6>
                        <p class="mb-0">{{ $irigasi->deskripsi }}</p>
                    </div>
                @endif
            </div>
        </div>
        
        <!-- Kelompok Tani List -->
        <div class="card shadow">
            <div class="card-header bg-success text-white">
                <h5 class="mb-0">
                    <i class="fas fa-users me-2"></i>Kelompok Tani yang Menggunakan
                    <span class="badge bg-light text-dark ms-2">{{ $irigasi->kelompokTani->count() }}</span>
                </h5>
            </div>
            <div class="card-body">
                @if($irigasi->kelompokTani->count() > 0)
                    <div class="row">
                        @foreach($irigasi->kelompokTani as $kelompok)
                            <div class="col-md-6 mb-3">
                                <div class="card kelompok-tani-card h-100">
                                    <div class="card-body">
                                        <h6 class="card-title text-success">
                                            <i class="fas fa-users me-2"></i>{{ $kelompok->nama_kelompok }}
                                        </h6>
                                        
                                        <p class="card-text small mb-2">
                                            <i class="fas fa-ruler-combined me-2 text-muted"></i>
                                            <strong>Luas Lahan:</strong> {{ $kelompok->luas_lahan }} Ha
                                        </p>
                                        
                                        @if($kelompok->alamat)
                                            <p class="card-text small mb-2">
                                                <i class="fas fa-map-marker-alt me-2 text-muted"></i>
                                                <strong>Alamat:</strong> {{ Str::limit($kelompok->alamat, 50) }}
                                            </p>
                                        @endif
                                        
                                        @if($kelompok->fotos->count() > 0)
                                            <div class="mb-2">
                                                <small class="text-muted">
                                                    <i class="fas fa-camera me-1"></i>Foto:
                                                </small>
                                                <div class="mt-1">
                                                    @foreach($kelompok->fotos->take(3) as $foto)
                                                        <img src="{{ asset('storage/' . $foto->path) }}" 
                                                             alt="Foto {{ $kelompok->nama_kelompok }}" 
                                                             class="photo-preview">
                                                    @endforeach
                                                    @if($kelompok->fotos->count() > 3)
                                                        <span class="badge bg-secondary">+{{ $kelompok->fotos->count() - 3 }}</span>
                                                    @endif
                                                </div>
                                            </div>
                                        @endif
                                        
                                        <div class="mt-auto">
                                            <a href="{{ route('kelompok-tani.show', $kelompok->id) }}" 
                                               class="btn btn-outline-success btn-sm">
                                                <i class="fas fa-eye me-1"></i>Lihat Detail
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @else
                    <div class="text-center py-4">
                        <i class="fas fa-users fa-3x text-muted mb-3"></i>
                        <h6 class="text-muted">Belum ada kelompok tani yang menggunakan irigasi ini</h6>
                        <p class="text-muted small">Kelompok tani akan muncul di sini setelah mereka mendaftar menggunakan irigasi ini</p>
                    </div>
                @endif
            </div>
        </div>
    </div>
    
    <!-- Sidebar -->
    <div class="col-md-4">
        <!-- Map Card -->
        @if($irigasi->latitude && $irigasi->longitude)
            <div class="card shadow mb-4">
                <div class="card-header bg-info text-white">
                    <h5 class="mb-0">
                        <i class="fas fa-map me-2"></i>Lokasi di Peta
                    </h5>
                </div>
                <div class="card-body">
                    <div id="map"></div>
                    <div class="mt-3">
                        <p class="text-muted small">
                            <i class="fas fa-info-circle me-1"></i>
                            Lokasi irigasi ditandai dengan marker biru
                        </p>
                    </div>
                </div>
            </div>
        @else
            <div class="card shadow mb-4">
                <div class="card-header bg-warning text-white">
                    <h5 class="mb-0">
                        <i class="fas fa-exclamation-triangle me-2"></i>Koordinat Belum Diisi
                    </h5>
                </div>
                <div class="card-body text-center py-4">
                    <i class="fas fa-map fa-3x text-muted mb-3"></i>
                    <h6 class="text-muted">Lokasi belum ditentukan</h6>
                    <p class="text-muted small">Koordinat lokasi irigasi belum diisi</p>
                    @if(auth()->user()->isAdmin())
                        <a href="{{ route('irigasi.edit', $irigasi->id) }}" class="btn btn-warning btn-sm">
                            <i class="fas fa-edit me-2"></i>Edit untuk Tambah Koordinat
                        </a>
                    @endif
                </div>
            </div>
        @endif
        
        <!-- Quick Actions -->
        <div class="card shadow mb-4">
            <div class="card-header bg-secondary text-white">
                <h5 class="mb-0">
                    <i class="fas fa-bolt me-2"></i>Aksi Cepat
                </h5>
            </div>
            <div class="card-body">
                <div class="d-grid gap-2">
                    @if(auth()->user()->isAdmin())
                        <a href="{{ route('irigasi.edit', $irigasi->id) }}" class="btn btn-warning btn-sm">
                            <i class="fas fa-edit me-2"></i>Edit Irigasi
                        </a>
                        
                        @if($irigasi->kelompokTani->count() == 0)
                            <form action="{{ route('irigasi.destroy', $irigasi->id) }}" method="POST" 
                                  onsubmit="return confirm('Apakah Anda yakin ingin menghapus irigasi ini?')">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-danger btn-sm w-100">
                                    <i class="fas fa-trash me-2"></i>Hapus Irigasi
                                </button>
                            </form>
                        @else
                            <button class="btn btn-danger btn-sm" disabled title="Tidak dapat dihapus karena masih digunakan oleh kelompok tani">
                                <i class="fas fa-trash me-2"></i>Hapus Irigasi
                            </button>
                        @endif
                    @endif
                    
                    <a href="{{ route('kelompok-tani.create') }}" class="btn btn-success btn-sm">
                        <i class="fas fa-plus me-2"></i>Tambah Kelompok Tani
                    </a>
                    
                    <a href="{{ route('irigasi.index') }}" class="btn btn-outline-primary btn-sm">
                        <i class="fas fa-list me-2"></i>Lihat Semua Irigasi
                    </a>
                </div>
            </div>
        </div>
        
        <!-- Statistics -->
        <div class="card shadow">
            <div class="card-header bg-light">
                <h6 class="mb-0">
                    <i class="fas fa-chart-bar me-2"></i>Statistik
                </h6>
            </div>
            <div class="card-body">
                <div class="row text-center">
                    <div class="col-6">
                        <h5 class="text-primary mb-1">{{ $irigasi->kelompokTani->count() }}</h5>
                        <small class="text-muted">Kelompok Tani</small>
                    </div>
                    <div class="col-6">
                        <h5 class="text-success mb-1">
                            {{ $irigasi->kelompokTani->sum('luas_lahan') }}
                        </h5>
                        <small class="text-muted">Total Lahan (Ha)</small>
                    </div>
                </div>
                
                @if($irigasi->kelompokTani->count() > 0)
                    <hr>
                    <div class="text-center">
                        <h6 class="text-muted">Rata-rata Luas Lahan</h6>
                        <h4 class="text-info">
                            {{ number_format($irigasi->kelompokTani->avg('luas_lahan'), 2) }} Ha
                        </h4>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    @if($irigasi->latitude && $irigasi->longitude)
        // Initialize map
        const map = L.map('map').setView([{{ $irigasi->latitude }}, {{ $irigasi->longitude }}], 13);
        
        // Add OpenStreetMap tiles
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '© OpenStreetMap contributors'
        }).addTo(map);
        
        // Add marker for irigasi location
        const marker = L.marker([{{ $irigasi->latitude }}, {{ $irigasi->longitude }}]).addTo(map);
        
        // Add popup with irigasi info
        const popupContent = `
            <div class="text-center">
                <h6 class="mb-2"><i class="fas fa-water me-2"></i>{{ $irigasi->nama_irigasi }}</h6>
                <p class="mb-1"><i class="fas fa-map-marker-alt me-2"></i>{{ $irigasi->lokasi ?? 'Lokasi tidak tersedia' }}</p>
                <p class="mb-0"><i class="fas fa-users me-2"></i>{{ $irigasi->kelompokTani->count() }} Kelompok Tani</p>
            </div>
        `;
        marker.bindPopup(popupContent);
        
        // Add circle to show approximate coverage area
        const circle = L.circle([{{ $irigasi->latitude }}, {{ $irigasi->longitude }}], {
            color: 'blue',
            fillColor: '#3b82f6',
            fillOpacity: 0.1,
            radius: 5000 // 5km radius
        }).addTo(map);
        
        // Add circle for smaller coverage area
        const innerCircle = L.circle([{{ $irigasi->latitude }}, {{ $irigasi->longitude }}], {
            color: 'blue',
            fillColor: '#3b82f6',
            fillOpacity: 0.2,
            radius: 2000 // 2km radius
        }).addTo(map);

        // Add jalur irigasi visualization if exists
        @if($irigasi->jalur->count() > 0)
            const jalurCoordinates = @json($irigasi->jalur_coordinates);
            
            if (jalurCoordinates.length > 1) {
                // Create polyline for jalur
                const polyline = L.polyline(jalurCoordinates, {
                    color: '#2563eb',
                    weight: 4,
                    opacity: 0.8
                }).addTo(map);
                
                // Add markers for each jalur point
                jalurCoordinates.forEach((coord, index) => {
                    @php
                        $jalurData = $irigasi->jalur->toArray();
                    @endphp
                    const jalurPoint = @json($jalurData)[index];
                    
                    // Create marker with different colors based on tipe saluran
                    let markerColor = '#6b7280'; // default gray
                    if (jalurPoint.tipe_saluran) {
                        switch(jalurPoint.tipe_saluran) {
                            case 'primer':
                                markerColor = '#dc2626'; // red
                                break;
                            case 'sekunder':
                                markerColor = '#d97706'; // orange
                                break;
                            case 'tersier':
                                markerColor = '#0891b2'; // blue
                                break;
                            case 'kuarter':
                                markerColor = '#4b5563'; // gray
                                break;
                        }
                    }
                    
                    // Create custom icon
                    const customIcon = L.divIcon({
                        className: 'custom-div-icon',
                        html: `<div style="background-color: ${markerColor}; width: 12px; height: 12px; display: block; border: 2px solid white; border-radius: 50%; box-shadow: 0 0 4px rgba(0,0,0,0.5);"></div>`,
                        iconSize: [12, 12],
                        iconAnchor: [6, 6]
                    });
                    
                    const jalurMarker = L.marker(coord, { icon: customIcon }).addTo(map);
                    
                    // Add popup for jalur point
                    const jalurPopupContent = `
                        <div class="text-center">
                            <h6 class="mb-2"><i class="fas fa-map-marker-alt me-2"></i>${jalurPoint.nama_titik || 'Titik ' + jalurPoint.urutan}</h6>
                            <p class="mb-1"><strong>Urutan:</strong> ${jalurPoint.urutan}</p>
                            ${jalurPoint.tipe_saluran ? `<p class="mb-1"><strong>Tipe:</strong> ${jalurPoint.tipe_saluran}</p>` : ''}
                            ${jalurPoint.kapasitas ? `<p class="mb-0"><strong>Kapasitas:</strong> ${jalurPoint.kapasitas} m³/s</p>` : ''}
                        </div>
                    `;
                    jalurMarker.bindPopup(jalurPopupContent);
                });
                
                // Fit map to show all jalur points
                map.fitBounds(polyline.getBounds(), { padding: [20, 20] });
            }
        @endif
    @endif
});
</script>
@endpush