@extends('layouts.app')

@section('title', 'Detail Titik Jalur 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);
    }
    
    .detail-card {
        transition: transform 0.2s ease-in-out;
    }
    
    .detail-card:hover {
        transform: translateY(-2px);
    }
    
    .info-badge {
        font-size: 0.875rem;
        padding: 0.5rem 0.75rem;
    }
    
    .coordinate-display {
        background-color: #f8f9fa;
        border-radius: 8px;
        padding: 15px;
        font-family: 'Courier New', monospace;
    }
</style>
@endpush

@section('content')
<div class="container-fluid">
    <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-marker-alt me-2"></i>Detail Titik Jalur Irigasi
                    </h2>
                    <p class="text-muted">Informasi lengkap titik jalur sistem irigasi</p>
                </div>
                <div>
                    @if(auth()->user()->isAdmin())
                        <a href="{{ route('irigasi-jalur.edit', $irigasiJalur->id) }}" class="btn btn-warning me-2">
                            <i class="fas fa-edit me-2"></i>Edit
                        </a>
                    @endif
                    <a href="{{ route('irigasi-jalur.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-lg-8">
            <div class="card shadow-sm detail-card">
                <div class="card-header bg-white">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-info-circle me-2"></i>Informasi Titik Jalur
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h6 class="text-primary">Data Titik</h6>
                            <table class="table table-borderless">
                                <tr>
                                    <td><strong>Nama Titik:</strong></td>
                                    <td>{{ $irigasiJalur->nama_titik ?? 'Titik ' . $irigasiJalur->urutan }}</td>
                                </tr>
                                <tr>
                                    <td><strong>Urutan:</strong></td>
                                    <td>
                                        <span class="badge bg-primary info-badge">{{ $irigasiJalur->urutan }}</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td><strong>Tipe Saluran:</strong></td>
                                    <td>
                                        @if($irigasiJalur->tipe_saluran)
                                            @php
                                                $badgeClass = match($irigasiJalur->tipe_saluran) {
                                                    'primer' => 'bg-danger',
                                                    'sekunder' => 'bg-warning',
                                                    'tersier' => 'bg-info',
                                                    'kuarter' => 'bg-secondary',
                                                    default => 'bg-secondary'
                                                };
                                            @endphp
                                            <span class="badge {{ $badgeClass }} info-badge">
                                                {{ $irigasiJalur->tipe_saluran_label }}
                                            </span>
                                        @else
                                            <span class="text-muted">-</span>
                                        @endif
                                    </td>
                                </tr>
                                <tr>
                                    <td><strong>Kapasitas:</strong></td>
                                    <td>
                                        @if($irigasiJalur->kapasitas)
                                            <span class="badge bg-success info-badge">
                                                {{ number_format($irigasiJalur->kapasitas, 2) }} m³/s
                                            </span>
                                        @else
                                            <span class="text-muted">-</span>
                                        @endif
                                    </td>
                                </tr>
                                <tr>
                                    <td><strong>Panjang Jalur:</strong></td>
                                    <td>
                                        @if($irigasiJalur->panjang_jalur !== null)
                                            <span class="badge bg-warning info-badge">
                                                {{ number_format($irigasiJalur->panjang_jalur, 2) }} m
                                            </span>
                                        @else
                                            <span class="text-muted">-</span>
                                        @endif
                                    </td>
                                </tr>
                                <tr>
                                    <td><strong>Total Panjang:</strong></td>
                                    <td>
                                        @if($irigasiJalur->total_panjang !== null)
                                            <span class="badge bg-info info-badge">
                                                {{ number_format($irigasiJalur->total_panjang, 2) }} m
                                            </span>
                                        @else
                                            <span class="text-muted">-</span>
                                        @endif
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <div class="col-md-6">
                            <h6 class="text-primary">Sistem Irigasi</h6>
                            <table class="table table-borderless">
                                <tr>
                                    <td><strong>Nama Irigasi:</strong></td>
                                    <td>{{ $irigasiJalur->irigasi->nama_irigasi }}</td>
                                </tr>
                                <tr>
                                    <td><strong>Lokasi:</strong></td>
                                    <td>{{ $irigasiJalur->irigasi->lokasi ?? 'Tidak tersedia' }}</td>
                                </tr>
                                <tr>
                                    <td><strong>Deskripsi:</strong></td>
                                    <td>{{ $irigasiJalur->irigasi->deskripsi ?? 'Tidak tersedia' }}</td>
                                </tr>
                                <tr>
                                    <td><strong>Total Titik Jalur:</strong></td>
                                    <td>
                                        <span class="badge bg-info info-badge">
                                            {{ $irigasiJalur->irigasi->jalur->count() }} titik
                                        </span>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>

                    <hr>

                    <div class="coordinate-display">
                        <h6 class="text-primary mb-3">
                            <i class="fas fa-map-pin me-2"></i>Koordinat Geografis
                        </h6>
                        <div class="row">
                            <div class="col-md-6">
                                <strong>Latitude:</strong> {{ number_format($irigasiJalur->latitude, 8) }}
                            </div>
                            <div class="col-md-6">
                                <strong>Longitude:</strong> {{ number_format($irigasiJalur->longitude, 8) }}
                            </div>
                        </div>
                        <div class="mt-2">
                            <small class="text-muted">
                                <i class="fas fa-info-circle me-1"></i>
                                Koordinat ini menunjukkan lokasi tepat titik jalur di peta
                            </small>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Map Section -->
            <div class="card shadow-sm mt-4">
                <div class="card-header bg-white">
                    <h5 class="card-title 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">
                        <small class="text-muted">
                            <i class="fas fa-info-circle me-1"></i>
                            Peta menunjukkan lokasi titik jalur dalam konteks sistem irigasi
                        </small>
                    </div>
                </div>
            </div>
        </div>

        <!-- Sidebar Information -->
        <div class="col-lg-4">
            <!-- Jalur Information -->
            <div class="card shadow-sm detail-card">
                <div class="card-header bg-white">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-route me-2"></i>Informasi Jalur
                    </h5>
                </div>
                <div class="card-body">
                    @php
                        $jalur = $irigasiJalur->irigasi->jalur;
                        $currentIndex = $jalur->search(function($item) use ($irigasiJalur) {
                            return $item->id === $irigasiJalur->id;
                        });
                        $prevJalur = $currentIndex > 0 ? $jalur[$currentIndex - 1] : null;
                        $nextJalur = $currentIndex < $jalur->count() - 1 ? $jalur[$currentIndex + 1] : null;
                    @endphp

                    <div class="mb-3">
                        <h6 class="text-primary">Urutan dalam Jalur</h6>
                        <div class="d-flex align-items-center">
                            @if($prevJalur)
                                <div class="text-center me-3">
                                    <div class="badge bg-secondary info-badge">{{ $prevJalur->urutan }}</div>
                                    <div class="small text-muted">{{ $prevJalur->nama_titik ?? 'Titik ' . $prevJalur->urutan }}</div>
                                </div>
                            @endif
                            
                            <div class="text-center mx-3">
                                <div class="badge bg-primary info-badge">{{ $irigasiJalur->urutan }}</div>
                                <div class="small text-primary fw-bold">{{ $irigasiJalur->nama_titik ?? 'Titik ' . $irigasiJalur->urutan }}</div>
                            </div>
                            
                            @if($nextJalur)
                                <div class="text-center ms-3">
                                    <div class="badge bg-secondary info-badge">{{ $nextJalur->urutan }}</div>
                                    <div class="small text-muted">{{ $nextJalur->nama_titik ?? 'Titik ' . $nextJalur->urutan }}</div>
                                </div>
                            @endif
                        </div>
                    </div>

                    @if($irigasiJalur->irigasi->jalur->count() > 1)
                        <div class="mb-3">
                            <h6 class="text-primary">Statistik Jalur</h6>
                            <ul class="list-unstyled">
                                <li><strong>Total Titik:</strong> {{ $irigasiJalur->irigasi->jalur->count() }}</li>
                                <li><strong>Panjang Total:</strong> 
                                    @php
                                        $totalPanjang = $irigasiJalur->irigasi->jalur->max('total_panjang');
                                    @endphp
                                    @if($totalPanjang)
                                        {{ number_format($totalPanjang / 1000, 2) }} km
                                    @else
                                        <span class="text-muted">Belum dihitung</span>
                                    @endif
                                </li>
                                <li><strong>Posisi:</strong> {{ $currentIndex + 1 }} dari {{ $irigasiJalur->irigasi->jalur->count() }}</li>
                                @if($irigasiJalur->panjang_jalur)
                                    <li><strong>Panjang Segment:</strong> {{ number_format($irigasiJalur->panjang_jalur, 2) }} m</li>
                                @endif
                            </ul>
                        </div>
                    @endif

                    <div class="mb-3">
                        <h6 class="text-primary">Tipe Saluran</h6>
                        <div class="d-flex flex-wrap gap-2">
                            @foreach($irigasiJalur->irigasi->jalur->groupBy('tipe_saluran') as $tipe => $jalurGroup)
                                @php
                                    $badgeClass = match($tipe) {
                                        'primer' => 'bg-danger',
                                        'sekunder' => 'bg-warning',
                                        'tersier' => 'bg-info',
                                        'kuarter' => 'bg-secondary',
                                        default => 'bg-secondary'
                                    };
                                @endphp
                                <span class="badge {{ $badgeClass }}">
                                    {{ $jalurGroup->first()->tipe_saluran_label }} ({{ $jalurGroup->count() }})
                                </span>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>

            <!-- Quick Actions -->
            <div class="card shadow-sm mt-4">
                <div class="card-header bg-white">
                    <h5 class="card-title 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-jalur.edit', $irigasiJalur->id) }}" class="btn btn-warning">
                                <i class="fas fa-edit me-2"></i>Edit Titik Jalur
                            </a>
                            
                            <form action="{{ route('irigasi-jalur.destroy', $irigasiJalur->id) }}" 
                                  method="POST" 
                                  onsubmit="return confirm('Yakin ingin menghapus titik jalur ini?')">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-danger w-100">
                                    <i class="fas fa-trash me-2"></i>Hapus Titik Jalur
                                </button>
                            </form>
                        @endif
                        
                        <a href="{{ route('irigasi.show', $irigasiJalur->irigasi->id) }}" class="btn btn-outline-primary">
                            <i class="fas fa-water me-2"></i>Lihat Sistem Irigasi
                        </a>
                        
                        <a href="{{ route('irigasi-jalur.index') }}" class="btn btn-outline-secondary">
                            <i class="fas fa-list me-2"></i>Semua Titik Jalur
                        </a>
                        
                        @if(auth()->user()->isAdmin() || auth()->user()->isPetugas())
                            <button type="button" class="btn btn-info" onclick="recalculatePanjangJalur()">
                                <i class="fas fa-calculator me-2"></i>Hitung Ulang Panjang Jalur
                            </button>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Metadata -->
            <div class="card shadow-sm mt-4">
                <div class="card-header bg-white">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-clock me-2"></i>Metadata
                    </h5>
                </div>
                <div class="card-body">
                    <div class="small text-muted">
                        <div class="mb-2">
                            <strong>Dibuat:</strong><br>
                            {{ $irigasiJalur->created_at->format('d M Y H:i') }}
                        </div>
                        <div>
                            <strong>Terakhir Diupdate:</strong><br>
                            {{ $irigasiJalur->updated_at->format('d M Y H:i') }}
                        </div>
                    </div>
                </div>
            </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() {
    // Initialize map
    const map = L.map('map').setView([{{ $irigasiJalur->latitude }}, {{ $irigasiJalur->longitude }}], 15);
    
    // Add OpenStreetMap tiles
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '© OpenStreetMap contributors'
    }).addTo(map);
    
    // Add marker for current jalur point
    const currentMarker = L.marker([{{ $irigasiJalur->latitude }}, {{ $irigasiJalur->longitude }}]).addTo(map);
    
    // Add popup for current point
    const currentPopupContent = `
        <div class="text-center">
            <h6 class="mb-2"><i class="fas fa-map-marker-alt me-2"></i>{{ $irigasiJalur->nama_titik ?? 'Titik ' . $irigasiJalur->urutan }}</h6>
            <p class="mb-1"><strong>Urutan:</strong> {{ $irigasiJalur->urutan }}</p>
            @if($irigasiJalur->tipe_saluran)
                <p class="mb-1"><strong>Tipe:</strong> {{ $irigasiJalur->tipe_saluran_label }}</p>
            @endif
            @if($irigasiJalur->kapasitas)
                <p class="mb-0"><strong>Kapasitas:</strong> {{ number_format($irigasiJalur->kapasitas, 2) }} m³/s</p>
            @endif
        </div>
    `;
    currentMarker.bindPopup(currentPopupContent);
    
    // Add jalur visualization if exists
    @if($irigasiJalur->irigasi->jalur->count() > 1)
        const jalurCoordinates = @json($irigasiJalur->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 other jalur points
            jalurCoordinates.forEach((coord, index) => {
                @php
                    $jalurData = $irigasiJalur->irigasi->jalur->toArray();
                @endphp
                const jalurPoint = @json($jalurData)[index];
                
                // Skip current point (already added above)
                if (jalurPoint.id === {{ $irigasiJalur->id }}) return;
                
                // 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: 10px; height: 10px; display: block; border: 2px solid white; border-radius: 50%; box-shadow: 0 0 4px rgba(0,0,0,0.5);"></div>`,
                    iconSize: [10, 10],
                    iconAnchor: [5, 5]
                });
                
                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
});

// Function to recalculate panjang jalur
function recalculatePanjangJalur() {
    if (!confirm('Yakin ingin menghitung ulang panjang jalur untuk sistem irigasi ini? Ini akan memakan waktu beberapa saat.')) {
        return;
    }
    
    const button = event.target;
    const originalText = button.innerHTML;
    button.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Menghitung...';
    button.disabled = true;
    
    fetch(`/irigasi-jalur/{{ $irigasiJalur->irigasi_id }}/recalculate`, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Content-Type': 'application/json',
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('Panjang jalur berhasil dihitung ulang! Total panjang: ' + (data.data.total / 1000).toFixed(2) + ' km');
            location.reload();
        } else {
            alert('Terjadi kesalahan: ' + data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Terjadi kesalahan saat menghitung panjang jalur.');
    })
    .finally(() => {
        button.innerHTML = originalText;
        button.disabled = false;
    });
}
</script>
@endpush