@extends('layouts.app')

@section('title', 'Tambah Irigasi - TaniMapping')

@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-primary">
                    <i class="fas fa-plus me-2"></i>Tambah Irigasi
                </h2>
                <p class="text-muted">Tambahkan data sistem irigasi baru</p>
            </div>
            <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 class="row">
    <div class="col-md-8">
        <div class="card shadow">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0">
                    <i class="fas fa-edit me-2"></i>Form Data Irigasi
                </h5>
            </div>
            <div class="card-body">
                <form method="POST" action="{{ route('irigasi.store') }}" id="irigasiForm">
                    @csrf
                    
                    <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') }}" 
                               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') }}" 
                               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 Inputs -->
                    <div class="mb-3">
                        <label class="form-label">
                            <i class="fas fa-map-pin me-2"></i>Koordinat Lokasi
                        </label>
                        <div class="row">
                            <div class="col-md-6">
                                <label for="latitude" class="form-label">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') }}" 
                                       placeholder="-6.2088">
                                @error('latitude')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <div class="form-text">Contoh: -6.2088 (Jakarta)</div>
                            </div>
                            
                            <div class="col-md-6">
                                <label for="longitude" class="form-label">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') }}" 
                                       placeholder="106.8456">
                                @error('longitude')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <div class="form-text">Contoh: 106.8456 (Jakarta)</div>
                            </div>
                        </div>
                        
                        <!-- Coordinate feedback -->
                        <div id="coordinate-feedback"></div>
                        
                        <!-- Quick Coordinate Buttons -->
                        <div class="mt-3">
                            <button type="button" class="btn btn-sm btn-outline-primary me-2" onclick="setCoordinates(-6.2088, 106.8456)">
                                <i class="fas fa-map-marker-alt me-1"></i>Jakarta
                            </button>
                            <button type="button" class="btn btn-sm btn-outline-primary me-2" onclick="setCoordinates(-6.9175, 107.6191)">
                                <i class="fas fa-map-marker-alt me-1"></i>Bandung
                            </button>
                            <button type="button" class="btn btn-sm btn-outline-primary me-2" onclick="setCoordinates(-7.7971, 110.3708)">
                                <i class="fas fa-map-marker-alt me-1"></i>Yogyakarta
                            </button>
                            <button type="button" class="btn btn-sm btn-outline-success" onclick="getCurrentLocation()">
                                <i class="fas fa-crosshairs me-1"></i>Lokasi Saya
                            </button>
                        </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') }}</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-primary btn-lg" id="submitBtn">
                            <i class="fas fa-save me-2"></i>Simpan Data Irigasi
                        </button>
                    </div>
                    
                    <!-- Loading overlay -->
                    <div id="loading-overlay" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 9999;">
                        <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 20px; border-radius: 10px; text-align: center;">
                            <i class="fas fa-spinner fa-spin fa-2x text-primary mb-3"></i>
                            <p class="mb-0">Menyimpan data irigasi...</p>
                        </div>
                    </div>
                </form>
            </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
                </h5>
            </div>
            <div class="card-body">
                <h6>Tips Pengisian:</h6>
                <ul class="list-unstyled">
                    <li class="mb-2">
                        <i class="fas fa-check text-success me-2"></i>
                        <strong>Nama Irigasi:</strong> Gunakan nama yang jelas dan mudah diingat
                    </li>
                    <li class="mb-2">
                        <i class="fas fa-check text-success me-2"></i>
                        <strong>Lokasi:</strong> Masukkan wilayah administratif yang tepat
                    </li>
                    <li class="mb-2">
                        <i class="fas fa-check text-success me-2"></i>
                        <strong>Koordinat:</strong> Gunakan GPS atau pencarian alamat untuk akurasi
                    </li>
                    <li class="mb-2">
                        <i class="fas fa-check text-success me-2"></i>
                        <strong>Deskripsi:</strong> Jelaskan detail teknis dan kapasitas irigasi
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    console.log('DOM loaded, initializing irrigation form...');
    
    let map, marker;
    
    try {
        // Initialize Leaflet map
        const map = L.map('map').setView([-2.9167, 115.1667], 8); // Kabupaten Tapin
        
        // Add OpenStreetMap tiles
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '© OpenStreetMap contributors'
        }).addTo(map);
        
        // Handle map click
        map.on('click', function(e) {
            const lat = e.latlng.lat;
            const lng = e.latlng.lng;
            
            // Update form fields
            document.getElementById('latitude').value = lat.toFixed(8);
            document.getElementById('longitude').value = lng.toFixed(8);
            
            // Update marker
            updateMapMarker(lat, lng);
            
            // Show coordinates feedback
            showCoordinateFeedback(lat, lng);
            
            console.log('Map clicked:', lat, lng);
        });
        
        // Load existing coordinates if available
        const existingLat = parseFloat(document.getElementById('latitude').value);
        const existingLng = parseFloat(document.getElementById('longitude').value);
        
        if (existingLat && existingLng && !isNaN(existingLat) && !isNaN(existingLng)) {
            map.setView([existingLat, existingLng], 15);
            updateMapMarker(existingLat, existingLng);
        }
        
        console.log('Map initialized successfully');
        
    } catch (error) {
        console.error('Error initializing map:', error);
        
        // Fallback: show error message to user
        const mapContainer = document.getElementById('map');
        if (mapContainer) {
            mapContainer.innerHTML = `
                <div class="alert alert-danger">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    Terjadi kesalahan saat memuat peta. Form masih dapat digunakan tanpa peta.
                    <br><small>Error: ${error.message}</small>
                </div>
            `;
        }
    }
    
    // Update map marker function
    function updateMapMarker(lat, lng) {
        if (marker) {
            map.removeLayer(marker);
        }
        marker = L.marker([lat, lng]).addTo(map);
        map.setView([lat, lng], 15);
    }
    
    // Show coordinate feedback
    function showCoordinateFeedback(lat, lng) {
        const feedbackDiv = document.getElementById('coordinate-feedback');
        if (feedbackDiv) {
            feedbackDiv.innerHTML = `
                <div class="alert alert-success alert-sm mt-2">
                    <i class="fas fa-check-circle me-2"></i>
                    Koordinat berhasil diatur: ${lat.toFixed(6)}, ${lng.toFixed(6)}
                </div>
            `;
            
            // Auto-hide after 3 seconds
            setTimeout(() => {
                feedbackDiv.innerHTML = '';
            }, 3000);
        }
    }
    
    // Form validation and submission
    const form = document.getElementById('irigasiForm');
    const submitBtn = document.getElementById('submitBtn');
    
    if (form && submitBtn) {
        form.addEventListener('submit', function(e) {
            console.log('Form submitted');
            
            // Basic validation
            const namaIrigasi = document.getElementById('nama_irigasi').value.trim();
            if (!namaIrigasi) {
                e.preventDefault();
                showValidationError('nama_irigasi', 'Nama irigasi wajib diisi!');
                return false;
            }
            
            // Check coordinate validity if provided
            const lat = parseFloat(document.getElementById('latitude').value);
            const lng = parseFloat(document.getElementById('longitude').value);
            
            if ((lat && isNaN(lat)) || (lng && isNaN(lng))) {
                e.preventDefault();
                alert('Koordinat tidak valid! Silakan periksa kembali.');
                return false;
            }
            
            if (lat && (lat < -90 || lat > 90)) {
                e.preventDefault();
                showValidationError('latitude', 'Latitude harus antara -90 dan 90');
                return false;
            }
            
            if (lng && (lng < -180 || lng > 180)) {
                e.preventDefault();
                showValidationError('longitude', 'Longitude harus antara -180 dan 180');
                return false;
            }
            
            // Disable submit button to prevent double submission
            submitBtn.disabled = true;
            submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Menyimpan...';
            
            // Show loading overlay
            const loadingOverlay = document.getElementById('loading-overlay');
            if (loadingOverlay) {
                loadingOverlay.style.display = 'block';
            }
            
            console.log('Form validation passed, submitting...');
            
            // Re-enable button after 10 seconds (in case of slow network or errors)
            setTimeout(() => {
                if (submitBtn.disabled) {
                    submitBtn.disabled = false;
                    submitBtn.innerHTML = '<i class="fas fa-save me-2"></i>Simpan Data Irigasi';
                    if (loadingOverlay) {
                        loadingOverlay.style.display = 'none';
                    }
                }
            }, 10000);
        });
    }
    
    // Function to show validation errors
    function showValidationError(fieldId, message) {
        const field = document.getElementById(fieldId);
        if (field) {
            field.classList.add('is-invalid');
            
            // Remove existing error message
            const existingError = field.parentNode.querySelector('.invalid-feedback');
            if (existingError) {
                existingError.remove();
            }
            
            // Add new error message
            const errorDiv = document.createElement('div');
            errorDiv.className = 'invalid-feedback';
            errorDiv.textContent = message;
            field.parentNode.appendChild(errorDiv);
            
            // Remove error state after user starts typing
            field.addEventListener('input', function() {
                field.classList.remove('is-invalid');
                if (errorDiv.parentNode) {
                    errorDiv.remove();
                }
            }, { once: true });
        }
    }
    
    // Input field validation on blur
    const inputFields = ['nama_irigasi', 'lokasi', 'latitude', 'longitude'];
    inputFields.forEach(fieldId => {
        const field = document.getElementById(fieldId);
        if (field) {
            field.addEventListener('blur', function() {
                validateField(fieldId);
            });
        }
    });
    
    function validateField(fieldId) {
        const field = document.getElementById(fieldId);
        if (!field) return;
        
        const value = field.value.trim();
        
        switch(fieldId) {
            case 'nama_irigasi':
                if (!value) {
                    showValidationError(fieldId, 'Nama irigasi wajib diisi');
                } else if (value.length > 255) {
                    showValidationError(fieldId, 'Nama irigasi maksimal 255 karakter');
                } else {
                    clearValidationError(fieldId);
                }
                break;
                
            case 'lokasi':
                if (value && value.length > 255) {
                    showValidationError(fieldId, 'Lokasi maksimal 255 karakter');
                } else {
                    clearValidationError(fieldId);
                }
                break;
                
            case 'latitude':
                if (value) {
                    const lat = parseFloat(value);
                    if (isNaN(lat)) {
                        showValidationError(fieldId, 'Latitude harus berupa angka');
                    } else if (lat < -90 || lat > 90) {
                        showValidationError(fieldId, 'Latitude harus antara -90 dan 90');
                    } else {
                        clearValidationError(fieldId);
                    }
                } else {
                    clearValidationError(fieldId);
                }
                break;
                
            case 'longitude':
                if (value) {
                    const lng = parseFloat(value);
                    if (isNaN(lng)) {
                        showValidationError(fieldId, 'Longitude harus berupa angka');
                    } else if (lng < -180 || lng > 180) {
                        showValidationError(fieldId, 'Longitude harus antara -180 dan 180');
                    } else {
                        clearValidationError(fieldId);
                    }
                } else {
                    clearValidationError(fieldId);
                }
                break;
        }
    }
    
    function clearValidationError(fieldId) {
        const field = document.getElementById(fieldId);
        if (field) {
            field.classList.remove('is-invalid');
            const errorDiv = field.parentNode.querySelector('.invalid-feedback');
            if (errorDiv) {
                errorDiv.remove();
            }
        }
    }
});

// Function to set coordinates from quick buttons
function setCoordinates(lat, lng) {
    document.getElementById('latitude').value = lat;
    document.getElementById('longitude').value = lng;
    
    // Update map if available
    if (typeof map !== 'undefined' && map) {
        map.setView([lat, lng], 12);
        
        // Update marker
        if (typeof marker !== 'undefined' && marker) {
            map.removeLayer(marker);
        }
        marker = L.marker([lat, lng]).addTo(map);
    }
    
    // Show feedback
    const feedbackDiv = document.getElementById('coordinate-feedback');
    if (feedbackDiv) {
        feedbackDiv.innerHTML = `
            <div class="alert alert-info alert-sm mt-2">
                <i class="fas fa-info-circle me-2"></i>
                Koordinat berhasil diatur melalui tombol cepat
            </div>
        `;
        
        setTimeout(() => {
            feedbackDiv.innerHTML = '';
        }, 3000);
    }
    
    console.log('Coordinates set via quick button:', lat, lng);
}

// Function to get current location
function getCurrentLocation() {
    if (!navigator.geolocation) {
        alert('Geolocation tidak didukung di browser ini');
        return;
    }
    
    const feedbackDiv = document.getElementById('coordinate-feedback');
    if (feedbackDiv) {
        feedbackDiv.innerHTML = `
            <div class="alert alert-info alert-sm mt-2">
                <i class="fas fa-spinner fa-spin me-2"></i>
                Mencari lokasi Anda...
            </div>
        `;
    }
    
    navigator.geolocation.getCurrentPosition(
        (position) => {
            const lat = position.coords.latitude;
            const lng = position.coords.longitude;
            
            document.getElementById('latitude').value = lat.toFixed(8);
            document.getElementById('longitude').value = lng.toFixed(8);
            
            // Update map if available
            if (typeof map !== 'undefined' && map) {
                map.setView([lat, lng], 15);
                
                if (typeof marker !== 'undefined' && marker) {
                    map.removeLayer(marker);
                }
                marker = L.marker([lat, lng]).addTo(map);
            }
            
            // Show success feedback
            if (feedbackDiv) {
                feedbackDiv.innerHTML = `
                    <div class="alert alert-success alert-sm mt-2">
                        <i class="fas fa-check-circle me-2"></i>
                        Lokasi berhasil ditemukan!
                    </div>
                `;
                
                setTimeout(() => {
                    feedbackDiv.innerHTML = '';
                }, 3000);
            }
            
            console.log('Current location found:', lat, lng);
        },
        (error) => {
            let errorMessage = 'Gagal mendapatkan lokasi: ';
            switch(error.code) {
                case error.PERMISSION_DENIED:
                    errorMessage += 'Izin lokasi ditolak';
                    break;
                case error.POSITION_UNAVAILABLE:
                    errorMessage += 'Informasi lokasi tidak tersedia';
                    break;
                case error.TIMEOUT:
                    errorMessage += 'Waktu pencarian lokasi habis';
                    break;
                default:
                    errorMessage += 'Terjadi kesalahan yang tidak diketahui';
            }
            
            if (feedbackDiv) {
                feedbackDiv.innerHTML = `
                    <div class="alert alert-danger alert-sm mt-2">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        ${errorMessage}
                    </div>
                `;
                
                setTimeout(() => {
                    feedbackDiv.innerHTML = '';
                }, 5000);
            }
            
            console.error('Geolocation error:', error);
        },
        {
            enableHighAccuracy: true,
            timeout: 10000,
            maximumAge: 60000
        }
    );
}
</script>
@endpush