@extends('layouts.app')

@section('title', 'Edit 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);
    }
    
    .coordinate-inputs {
        background-color: #f8f9fa;
        border-radius: 8px;
        padding: 15px;
    }
    
    .map-controls {
        margin-bottom: 15px;
    }
    
    .quick-coordinates {
        margin-bottom: 15px;
    }
    
    .quick-coordinates .btn {
        margin: 2px;
        font-size: 0.875rem;
    }
    
    .current-value {
        background-color: #e3f2fd;
        border: 1px solid #2196f3;
        border-radius: 4px;
        padding: 8px 12px;
        margin-bottom: 10px;
    }
</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-edit me-2"></i>Edit Titik Jalur Irigasi
                    </h2>
                    <p class="text-muted">Edit data titik jalur sistem irigasi</p>
                </div>
                <div>
                    <a href="{{ route('irigasi-jalur.show', $irigasiJalur->id) }}" class="btn btn-outline-info me-2">
                        <i class="fas fa-eye me-2"></i>Lihat Detail
                    </a>
                    <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">
        <div class="col-lg-8">
            <div class="card shadow-sm">
                <div class="card-header bg-white">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-map me-2"></i>Peta Interaktif
                    </h5>
                </div>
                <div class="card-body">
                    <div class="map-controls">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="quick-coordinates">
                                    <small class="text-muted d-block mb-2">Koordinat Cepat:</small>
                                    <button type="button" class="btn btn-sm btn-outline-primary" onclick="setQuickCoordinate(-6.2088, 106.8456)">
                                        Jakarta
                                    </button>
                                    <button type="button" class="btn btn-sm btn-outline-primary" onclick="setQuickCoordinate(-6.9175, 107.6191)">
                                        Bandung
                                    </button>
                                    <button type="button" class="btn btn-sm btn-outline-primary" onclick="setQuickCoordinate(-7.7971, 110.3708)">
                                        Yogyakarta
                                    </button>
                                    <button type="button" class="btn btn-sm btn-outline-primary" onclick="setQuickCoordinate(-7.2504, 112.7688)">
                                        Surabaya
                                    </button>
                                </div>
                            </div>
                            <div class="col-md-6 text-end">
                                <button type="button" class="btn btn-sm btn-outline-success" onclick="getCurrentLocation()">
                                    <i class="fas fa-location-arrow me-2"></i>Lokasi Saat Ini
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <div id="map"></div>
                    
                    <div class="mt-3">
                        <small class="text-muted">
                            <i class="fas fa-info-circle me-1"></i>
                            Klik pada peta untuk mengatur koordinat titik jalur
                        </small>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-lg-4">
            <div class="card shadow-sm">
                <div class="card-header bg-white">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-edit me-2"></i>Form Edit
                    </h5>
                </div>
                <div class="card-body">
                    <form action="{{ route('irigasi-jalur.update', $irigasiJalur->id) }}" method="POST">
                        @csrf
                        @method('PUT')
                        
                        <div class="mb-3">
                            <label for="irigasi_id" class="form-label">
                                <i class="fas fa-water me-2"></i>Sistem Irigasi <span class="text-danger">*</span>
                            </label>
                            <select class="form-select @error('irigasi_id') is-invalid @enderror" 
                                    id="irigasi_id" 
                                    name="irigasi_id" 
                                    required>
                                <option value="">Pilih Sistem Irigasi</option>
                                @foreach($irigasi as $ir)
                                    <option value="{{ $ir->id }}" 
                                            {{ old('irigasi_id', $irigasiJalur->irigasi_id) == $ir->id ? 'selected' : '' }}>
                                        {{ $ir->nama_irigasi }}
                                        @if($ir->lokasi)
                                            - {{ $ir->lokasi }}
                                        @endif
                                    </option>
                                @endforeach
                            </select>
                            @error('irigasi_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="urutan" class="form-label">
                                <i class="fas fa-sort-numeric-up me-2"></i>Urutan Titik <span class="text-danger">*</span>
                            </label>
                            <input type="number" 
                                   class="form-control @error('urutan') is-invalid @enderror" 
                                   id="urutan" 
                                   name="urutan" 
                                   value="{{ old('urutan', $irigasiJalur->urutan) }}" 
                                   min="1" 
                                   required>
                            @error('urutan')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <small class="text-muted">Urutan titik dalam jalur (1, 2, 3, dst)</small>
                        </div>

                        <div class="coordinate-inputs">
                            <div class="row">
                                <div class="col-md-6">
                                    <label for="latitude" class="form-label">
                                        <i class="fas fa-latitude me-2"></i>Latitude <span class="text-danger">*</span>
                                    </label>
                                    <input type="number" 
                                           class="form-control @error('latitude') is-invalid @enderror" 
                                           id="latitude" 
                                           name="latitude" 
                                           value="{{ old('latitude', $irigasiJalur->latitude) }}" 
                                           step="0.000001" 
                                           required>
                                    @error('latitude')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-6">
                                    <label for="longitude" class="form-label">
                                        <i class="fas fa-longitude me-2"></i>Longitude <span class="text-danger">*</span>
                                    </label>
                                    <input type="number" 
                                           class="form-control @error('longitude') is-invalid @enderror" 
                                           id="longitude" 
                                           name="longitude" 
                                           value="{{ old('longitude', $irigasiJalur->longitude) }}" 
                                           step="0.000001" 
                                           required>
                                    @error('longitude')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="nama_titik" class="form-label">
                                <i class="fas fa-map-marker-alt me-2"></i>Nama Titik
                            </label>
                            <input type="text" 
                                   class="form-control @error('nama_titik') is-invalid @enderror" 
                                   id="nama_titik" 
                                   name="nama_titik" 
                                   value="{{ old('nama_titik', $irigasiJalur->nama_titik) }}" 
                                   placeholder="Contoh: Bendungan, Saluran Primer, dll">
                            @error('nama_titik')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <small class="text-muted">Nama atau deskripsi titik jalur</small>
                        </div>

                        <div class="mb-3">
                            <label for="tipe_saluran" class="form-label">
                                <i class="fas fa-stream me-2"></i>Tipe Saluran
                            </label>
                            <select class="form-select @error('tipe_saluran') is-invalid @enderror" 
                                    id="tipe_saluran" 
                                    name="tipe_saluran">
                                <option value="">Pilih Tipe Saluran</option>
                                @foreach($tipeSaluran as $key => $label)
                                    <option value="{{ $key }}" 
                                            {{ old('tipe_saluran', $irigasiJalur->tipe_saluran) == $key ? 'selected' : '' }}>
                                        {{ $label }}
                                    </option>
                                @endforeach
                            </select>
                            @error('tipe_saluran')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="kapasitas" class="form-label">
                                <i class="fas fa-tint me-2"></i>Kapasitas Saluran (m³/detik)
                            </label>
                            <input type="number" 
                                   class="form-control @error('kapasitas') is-invalid @enderror" 
                                   id="kapasitas" 
                                   name="kapasitas" 
                                   value="{{ old('kapasitas', $irigasiJalur->kapasitas) }}" 
                                   step="0.01" 
                                   min="0" 
                                   placeholder="0.00">
                            @error('kapasitas')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-warning">
                                <i class="fas fa-save me-2"></i>Update Titik Jalur
                            </button>
                            <a href="{{ route('irigasi-jalur.show', $irigasiJalur->id) }}" class="btn btn-outline-secondary">
                                <i class="fas fa-times me-2"></i>Batal
                            </a>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Current Values -->
            <div class="card shadow-sm mt-4">
                <div class="card-header bg-white">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-info-circle me-2"></i>Nilai Saat Ini
                    </h5>
                </div>
                <div class="card-body">
                    <div class="current-value">
                        <strong>Nama Titik:</strong> {{ $irigasiJalur->nama_titik ?? 'Titik ' . $irigasiJalur->urutan }}
                    </div>
                    <div class="current-value">
                        <strong>Urutan:</strong> {{ $irigasiJalur->urutan }}
                    </div>
                    <div class="current-value">
                        <strong>Tipe Saluran:</strong> 
                        @if($irigasiJalur->tipe_saluran)
                            {{ $irigasiJalur->tipe_saluran_label }}
                        @else
                            <span class="text-muted">Tidak diatur</span>
                        @endif
                    </div>
                    <div class="current-value">
                        <strong>Kapasitas:</strong> 
                        @if($irigasiJalur->kapasitas)
                            {{ number_format($irigasiJalur->kapasitas, 2) }} m³/s
                        @else
                            <span class="text-muted">Tidak diatur</span>
                        @endif
                    </div>
                    <div class="current-value">
                        <strong>Koordinat:</strong> 
                        {{ number_format($irigasiJalur->latitude, 6) }}, {{ number_format($irigasiJalur->longitude, 6) }}
                    </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 with current coordinates
    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);
    
    let marker = null;
    
    // Function to set marker and update coordinates
    function setMarker(lat, lng) {
        // Remove existing marker
        if (marker) {
            map.removeLayer(marker);
        }
        
        // Add new marker
        marker = L.marker([lat, lng]).addTo(map);
        
        // Update form inputs
        document.getElementById('latitude').value = lat.toFixed(6);
        document.getElementById('longitude').value = lng.toFixed(6);
        
        // Center map on marker
        map.setView([lat, lng], 15);
    }
    
    // Set initial marker
    setMarker({{ $irigasiJalur->latitude }}, {{ $irigasiJalur->longitude }});
    
    // Click on map to set coordinates
    map.on('click', function(e) {
        setMarker(e.latlng.lat, e.latlng.lng);
    });
    
    // Quick coordinate buttons
    window.setQuickCoordinate = function(lat, lng) {
        setMarker(lat, lng);
    };
    
    // Get current location
    window.getCurrentLocation = function() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
                const lat = position.coords.latitude;
                const lng = position.coords.longitude;
                setMarker(lat, lng);
            }, function(error) {
                alert('Tidak dapat mendapatkan lokasi saat ini: ' + error.message);
            });
        } else {
            alert('Browser tidak mendukung geolokasi');
        }
    };
});
</script>
@endpush