@extends('layouts.app')

@section('title', 'Tambah 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;
    }
    
</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-plus me-2"></i>Tambah Titik Jalur Irigasi
                    </h2>
                    <p class="text-muted">Tambahkan titik baru untuk jalur sistem irigasi</p>
                </div>
                <div>
                    <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-12 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 Input
                    </h5>
                </div>
                <div class="card-body">
                    <form action="{{ route('irigasi-jalur.store') }}" method="POST">
                        @csrf
                        
                        <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') == $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', 1) }}" 
                                   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') }}" 
                                           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') }}" 
                                           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') }}" 
                                   placeholder="Contoh: Bendungan, Saluran Primer, dll">
                            @error('nama_titik')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Panjang Jalur Info -->
                        <div class="alert alert-info">
                            <i class="fas fa-info-circle me-2"></i>
                            <strong>Panjang Jalur:</strong> Panjang jalur akan dihitung otomatis berdasarkan koordinat yang diinput. 
                            Sistem menggunakan formula Haversine untuk menghitung jarak antar titik dalam satuan meter.
                        </div>
                        <small class="text-muted">Nama atau deskripsi titik jalur</small>

                        <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') == $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') }}" 
                                   step="0.01" 
                                   min="0" 
                                   placeholder="0.00">
                            @error('kapasitas')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="d-grid">
                            <button type="submit" class="btn btn-success">
                                <i class="fas fa-save me-2"></i>Simpan Titik Jalur
                            </button>
                        </div>
                    </form>
                </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([-6.2088, 106.8456], 8);
    
    // 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], 13);
    }
    
    // Click on map to set coordinates
    map.on('click', function(e) {
        setMarker(e.latlng.lat, e.latlng.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');
        }
    };
    
    // Auto-fill coordinates if they exist
    const latInput = document.getElementById('latitude');
    const lngInput = document.getElementById('longitude');
    
    if (latInput.value && lngInput.value) {
        const lat = parseFloat(latInput.value);
        const lng = parseFloat(lngInput.value);
        if (!isNaN(lat) && !isNaN(lng)) {
            setMarker(lat, lng);
        }
    }
});
</script>
@endpush