@extends('layouts.app')

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

@push('styles')
<link rel="stylesheet" href="{{ asset('css/coordinate-manager.css') }}">
<style>
    #map {
        height: 400px;
        width: 100%;
        border-radius: 10px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    
    .coordinate-input {
        font-family: monospace;
    }
</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-warning">
                    <i class="fas fa-edit me-2"></i>Edit Irigasi
                </h2>
                <p class="text-muted">Edit data sistem irigasi: {{ $irigasi->nama_irigasi }}</p>
            </div>
            <div>
                <a href="{{ route('irigasi.show', $irigasi->id) }}" class="btn btn-outline-info me-2">
                    <i class="fas fa-eye me-2"></i>Lihat Detail
                </a>
                <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">
    <div class="col-md-8">
        <div class="card shadow">
            <div class="card-header bg-warning text-white">
                <h5 class="mb-0">
                    <i class="fas fa-edit me-2"></i>Form Edit Data Irigasi
                </h5>
            </div>
            <div class="card-body">
                <form method="POST" action="{{ route('irigasi.update', $irigasi->id) }}">
                    @csrf
                    @method('PUT')
                    
                    <div class="mb-3">
                        <label for="nama_irigasi" class="form-label">
                            <i class="fas fa-water me-2"></i>Nama Irigasi <span class="text-danger">*</span>
                        </label>
                        <input type="text" class="form-control @error('nama_irigasi') is-invalid @enderror" 
                               id="nama_irigasi" name="nama_irigasi" 
                               value="{{ old('nama_irigasi', $irigasi->nama_irigasi) }}" 
                               placeholder="Contoh: Bendung Citarum, Waduk Jatiluhur" required>
                        @error('nama_irigasi')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <div class="form-text">Masukkan nama sistem irigasi yang jelas dan unik</div>
                    </div>

                    <div class="mb-3">
                        <label for="lokasi" class="form-label">
                            <i class="fas fa-map-marker-alt me-2"></i>Lokasi
                        </label>
                        <input type="text" class="form-control @error('lokasi') is-invalid @enderror" 
                               id="lokasi" name="lokasi" 
                               value="{{ old('lokasi', $irigasi->lokasi) }}" 
                               placeholder="Contoh: Kecamatan Cikarang, Kabupaten Bekasi">
                        @error('lokasi')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <div class="form-text">Masukkan lokasi atau wilayah irigasi</div>
                    </div>

                    <!-- Coordinate Mode Toggle -->
                    <div class="coordinate-mode-toggle">
                        <h6 class="mb-3">
                            <i class="fas fa-map-pin me-2"></i>Mode Input Koordinat
                        </h6>
                        <div class="mb-3">
                            <button type="button" class="btn btn-outline-primary coordinate-mode-btn active" data-mode="auto">
                                <i class="fas fa-magic me-2"></i>Auto (GPS/Geocoding)
                            </button>
                            <button type="button" class="btn btn-outline-secondary coordinate-mode-btn" data-mode="manual">
                                <i class="fas fa-edit me-2"></i>Manual
                            </button>
                        </div>
                        
                        <!-- Auto Mode Controls -->
                        <div id="auto-mode-controls">
                            <div class="row">
                                <div class="col-md-6">
                                    <button type="button" class="btn btn-primary btn-sm" id="get-current-location">
                                        <i class="fas fa-location-arrow me-2"></i>Dapatkan Lokasi Saat Ini
                                    </button>
                                </div>
                                <div class="col-md-6">
                                    <button type="button" class="btn btn-info btn-sm" id="search-by-address">
                                        <i class="fas fa-search me-2"></i>Cari Berdasarkan Alamat
                                    </button>
                                </div>
                            </div>
                            
                            <div class="geolocation-status" id="geolocation-status"></div>
                            
                            <div class="address-search" id="address-search" style="display: none;">
                                <div class="input-group">
                                    <input type="text" class="form-control" id="search-address" 
                                           placeholder="Masukkan alamat untuk dicari...">
                                    <button class="btn btn-outline-primary" type="button" id="perform-search">
                                        <i class="fas fa-search"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Coordinate Inputs -->
                    <div class="coordinate-inputs" id="coordinate-inputs">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="latitude" class="form-label">
                                        <i class="fas fa-map-pin me-2"></i>Latitude
                                    </label>
                                    <input type="number" step="0.00000001" class="form-control coordinate-input @error('latitude') is-invalid @enderror" 
                                           id="latitude" name="latitude" 
                                           value="{{ old('latitude', $irigasi->latitude) }}" 
                                           placeholder="-6.2088">
                                    @error('latitude')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <div class="form-text">Contoh: -6.2088 (Jakarta)</div>
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="longitude" class="form-label">
                                        <i class="fas fa-map-pin me-2"></i>Longitude
                                    </label>
                                    <input type="number" step="0.00000001" class="form-control coordinate-input @error('longitude') is-invalid @enderror" 
                                           id="longitude" name="longitude" 
                                           value="{{ old('longitude', $irigasi->longitude) }}" 
                                           placeholder="106.8456">
                                    @error('longitude')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <div class="form-text">Contoh: 106.8456 (Jakarta)</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="deskripsi" class="form-label">
                            <i class="fas fa-align-left me-2"></i>Deskripsi
                        </label>
                        <textarea class="form-control @error('deskripsi') is-invalid @enderror" 
                                  id="deskripsi" name="deskripsi" rows="4" 
                                  placeholder="Deskripsikan sistem irigasi ini, termasuk kapasitas, sumber air, dan informasi teknis lainnya...">{{ old('deskripsi', $irigasi->deskripsi) }}</textarea>
                        @error('deskripsi')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <div class="form-text">Berikan deskripsi detail tentang sistem irigasi</div>
                    </div>

                    <div class="d-grid">
                        <button type="submit" class="btn btn-warning btn-lg">
                            <i class="fas fa-save me-2"></i>Update Data Irigasi
                        </button>
                    </div>
                </form>
            </div>
        </div>
        
        <!-- Current Data Summary -->
        <div class="card shadow mt-4">
            <div class="card-header bg-info text-white">
                <h5 class="mb-0">
                    <i class="fas fa-info-circle me-2"></i>Data Saat Ini
                </h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <p class="mb-2">
                            <strong>Nama:</strong> {{ $irigasi->nama_irigasi }}
                        </p>
                        <p class="mb-2">
                            <strong>Lokasi:</strong> {{ $irigasi->lokasi ?? 'Belum diisi' }}
                        </p>
                        <p class="mb-2">
                            <strong>Dibuat:</strong> {{ $irigasi->created_at->format('d M Y H:i') }}
                        </p>
                    </div>
                    <div class="col-md-6">
                        <p class="mb-2">
                            <strong>Koordinat:</strong> 
                            @if($irigasi->latitude && $irigasi->longitude)
                                {{ $irigasi->latitude }}, {{ $irigasi->longitude }}
                            @else
                                Belum diisi
                            @endif
                        </p>
                        <p class="mb-2">
                            <strong>Terakhir Update:</strong> {{ $irigasi->updated_at->format('d M Y H:i') }}
                        </p>
                        <p class="mb-2">
                            <strong>Kelompok Tani:</strong> {{ $irigasi->kelompokTani->count() }} kelompok
                        </p>
                    </div>
                </div>
                
                @if($irigasi->deskripsi)
                    <hr>
                    <p class="mb-0">
                        <strong>Deskripsi:</strong> {{ $irigasi->deskripsi }}
                    </p>
                @endif
            </div>
        </div>
    </div>
    
    <div class="col-md-4">
        <div class="card shadow">
            <div class="card-header bg-info text-white">
                <h5 class="mb-0">
                    <i class="fas fa-map me-2"></i>Peta Lokasi
                </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>
                        Klik pada peta untuk menentukan koordinat lokasi irigasi
                    </p>
                </div>
            </div>
        </div>
        
        <!-- Help Card -->
        <div class="card shadow mt-4">
            <div class="card-header bg-warning text-white">
                <h5 class="mb-0">
                    <i class="fas fa-question-circle me-2"></i>Panduan Edit
                </h5>
            </div>
            <div class="card-body">
                <h6>Tips Pengeditan:</h6>
                <ul class="list-unstyled">
                    <li class="mb-2">
                        <i class="fas fa-check text-success me-2"></i>
                        <strong>Nama:</strong> Pastikan nama tetap unik dan mudah diingat
                    </li>
                    <li class="mb-2">
                        <i class="fas fa-check text-success me-2"></i>
                        <strong>Lokasi:</strong> Update jika ada perubahan wilayah administratif
                    </li>
                    <li class="mb-2">
                        <i class="fas fa-check text-success me-2"></i>
                        <strong>Koordinat:</strong> Gunakan GPS atau pencarian untuk akurasi
                    </li>
                    <li class="mb-2">
                        <i class="fas fa-check text-success me-2"></i>
                        <strong>Deskripsi:</strong> Update informasi teknis yang berubah
                    </li>
                </ul>
                
                <div class="alert alert-info mt-3">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    <strong>Perhatian:</strong> Perubahan data irigasi akan mempengaruhi data kelompok tani yang terkait.
                </div>
            </div>
        </div>
        
        <!-- Quick Actions -->
        <div class="card shadow mt-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">
                    <a href="{{ route('irigasi.show', $irigasi->id) }}" class="btn btn-outline-info btn-sm">
                        <i class="fas fa-eye me-2"></i>Lihat Detail
                    </a>
                    <a href="{{ route('irigasi.index') }}" class="btn btn-outline-primary btn-sm">
                        <i class="fas fa-list me-2"></i>Kembali ke Daftar
                    </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
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="{{ asset('js/coordinate-manager.js') }}"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Initialize coordinate manager with existing coordinates
    const coordinateManager = new CoordinateManager('map', 'latitude', 'longitude', {
        defaultLat: {{ $irigasi->latitude ?? -2.9167 }},
        defaultLng: {{ $irigasi->longitude ?? 115.1667 }},
        defaultZoom: {{ $irigasi->latitude && $irigasi->longitude ? 15 : 8 }}
    });
    
    // Auto-fill location when coordinates are set
    const latInput = document.getElementById('latitude');
    const lngInput = document.getElementById('longitude');
    const lokasiInput = document.getElementById('lokasi');
    
    function updateLocationFromCoordinates() {
        const lat = parseFloat(latInput.value);
        const lng = parseFloat(lngInput.value);
        
        if (lat && lng && !isNaN(lat) && !isNaN(lng)) {
            // Use reverse geocoding to get location name
            const reverseUrl = `https://nominatim.openstreetmap.org/reverse?format=json&lat=${lat}&lon=${lng}&zoom=10`;
            
            fetch(reverseUrl)
                .then(response => response.json())
                .then(data => {
                    if (data && data.display_name) {
                        // Extract city/district from full address
                        const addressParts = data.display_name.split(', ');
                        const cityDistrict = addressParts.slice(-3, -1).join(', ');
                        if (cityDistrict && !lokasiInput.value) {
                            lokasiInput.value = cityDistrict;
                        }
                    }
                })
                .catch(error => {
                    console.log('Reverse geocoding failed:', error);
                });
        }
    }
    
    // Listen for coordinate changes
    latInput.addEventListener('input', updateLocationFromCoordinates);
    lngInput.addEventListener('input', updateLocationFromCoordinates);
    
    // Override coordinate manager's updateCoordinates to also update location
    const originalUpdateCoordinates = coordinateManager.updateCoordinates;
    coordinateManager.updateCoordinates = function(lat, lng) {
        originalUpdateCoordinates.call(this, lat, lng);
        setTimeout(updateLocationFromCoordinates, 1000); // Delay to ensure coordinates are set
    };
});
</script>
@endpush