@extends('layouts.app')

@section('title', 'Tambah Kelompok Tani - TaniMapping')

@push('styles')
<style>
    #map {
        height: 400px;
        width: 100%;
        border-radius: 10px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    
    .photo-preview {
        max-width: 150px;
        max-height: 150px;
        object-fit: cover;
        border-radius: 5px;
        margin: 5px;
    }
    
    .coordinate-input {
        font-family: monospace;
    }
    
    .coordinate-mode-toggle {
        background: #f8f9fa;
        border: 1px solid #dee2e6;
        border-radius: 10px;
        padding: 15px;
        margin-bottom: 20px;
    }
    
    .coordinate-mode-toggle .btn {
        margin-right: 10px;
        margin-bottom: 10px;
    }
    
    .coordinate-mode-toggle .btn.active {
        background-color: #198754;
        border-color: #198754;
    }
    
    .coordinate-inputs {
        display: none;
    }
    
    .coordinate-inputs.show {
        display: block;
    }
    
    .address-search {
        margin-bottom: 15px;
    }
    
    .geolocation-status {
        padding: 10px;
        border-radius: 5px;
        margin-bottom: 15px;
        display: none;
    }
    
    .geolocation-status.success {
        background-color: #d1e7dd;
        color: #0f5132;
        border: 1px solid #badbcc;
    }
    
    .geolocation-status.error {
        background-color: #f8d7da;
        color: #721c24;
        border: 1px solid #f5c6cb;
    }
    
    .geolocation-status.info {
        background-color: #d1ecf1;
        color: #0c5460;
        border: 1px solid #bee5eb;
    }
</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-success">
                    <i class="fas fa-plus me-2"></i>Tambah Kelompok Tani
                </h2>
                <p class="text-muted">Tambahkan data kelompok tani baru</p>
            </div>
            <a href="{{ route('kelompok-tani.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-success text-white">
                <h5 class="mb-0">
                    <i class="fas fa-edit me-2"></i>Form Data Kelompok Tani
                </h5>
            </div>
            <div class="card-body">
                <form method="POST" action="{{ route('kelompok-tani.store') }}" enctype="multipart/form-data">
                    @csrf
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="jalur_irigasi_id" class="form-label">
                                    <i class="fas fa-route me-2"></i>Jalur Irigasi <span class="text-danger">*</span>
                                </label>
                                <select class="form-select @error('jalur_irigasi_id') is-invalid @enderror" 
                                        id="jalur_irigasi_id" name="jalur_irigasi_id" required>
                                    <option value="">Pilih Jalur Irigasi</option>
                                    @foreach($jalurIrigasi as $jalur)
                                        <option value="{{ $jalur->id }}" {{ old('jalur_irigasi_id') == $jalur->id ? 'selected' : '' }}>
                                            {{ $jalur->irigasi->nama_irigasi }} - {{ $jalur->nama_titik ?: 'Titik ' . $jalur->urutan }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('jalur_irigasi_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="nama_kelompok" class="form-label">
                                    <i class="fas fa-users me-2"></i>Nama Kelompok <span class="text-danger">*</span>
                                </label>
                                <input type="text" class="form-control @error('nama_kelompok') is-invalid @enderror" 
                                       id="nama_kelompok" name="nama_kelompok" value="{{ old('nama_kelompok') }}" required>
                                @error('nama_kelompok')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="luas_lahan" class="form-label">
                                    <i class="fas fa-ruler-combined me-2"></i>Luas Lahan (Ha) <span class="text-danger">*</span>
                                </label>
                                <input type="number" step="0.01" min="0" class="form-control @error('luas_lahan') is-invalid @enderror" 
                                       id="luas_lahan" name="luas_lahan" value="{{ old('luas_lahan') }}" required>
                                <div class="form-text">
                                    <i class="fas fa-info-circle me-1"></i>
                                    Luas lahan akan dihitung otomatis dari polygon yang digambar
                                </div>
                                @error('luas_lahan')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="alamat" class="form-label">
                                    <i class="fas fa-map-marker-alt me-2"></i>Alamat
                                </label>
                                <textarea class="form-control @error('alamat') is-invalid @enderror" 
                                          id="alamat" name="alamat" rows="1">{{ old('alamat') }}</textarea>
                                @error('alamat')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </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-success 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 <span class="text-danger">*</span>
                                    </label>
                                    <input type="number" step="0.00000001" class="form-control coordinate-input @error('latitude') is-invalid @enderror" 
                                           id="latitude" name="latitude" value="{{ old('latitude') }}" required>
                                    @error('latitude')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </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 <span class="text-danger">*</span>
                                    </label>
                                    <input type="number" step="0.00000001" class="form-control coordinate-input @error('longitude') is-invalid @enderror" 
                                           id="longitude" name="longitude" value="{{ old('longitude') }}" required>
                                    @error('longitude')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </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="3">{{ old('deskripsi') }}"></textarea>
                        @error('deskripsi')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label for="fotos" class="form-label">
                            <i class="fas fa-camera me-2"></i>Foto Lahan
                        </label>
                        <input type="file" class="form-control @error('fotos.*') is-invalid @enderror" 
                               id="fotos" name="fotos[]" multiple accept="image/*">
                        <div class="form-text">Pilih satu atau lebih foto (JPG, PNG, GIF, maksimal 2MB per foto)</div>
                        @error('fotos.*')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <div id="photo-preview" class="mt-2"></div>
                    </div>

                    <!-- Polygon Area Section -->
                    <div class="mb-3">
                        <label class="form-label">
                            <i class="fas fa-draw-polygon me-2"></i>Area Lahan (Polygon)
                        </label>
                        <div class="card border-info">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="polygon_type" class="form-label">Jenis Area</label>
                                            <select class="form-select" id="polygon_type" name="polygon_type">
                                                <option value="lahan">Lahan Pertanian</option>
                                                <option value="irigasi">Area Irigasi</option>
                                                <option value="buffer">Area Buffer</option>
                                                <option value="lainnya">Lainnya</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="polygon_description" class="form-label">Deskripsi Area</label>
                                            <input type="text" class="form-control" id="polygon_description" 
                                                   name="polygon_description" placeholder="Deskripsi area lahan...">
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="mb-3">
                                    <div class="d-flex justify-content-between align-items-center mb-2">
                                        <span class="text-muted">Gambar polygon di peta atau input koordinat manual</span>
                                        <div class="btn-group btn-group-sm" role="group">
                                            <button type="button" class="btn btn-outline-primary" id="draw-polygon-btn">
                                                <i class="fas fa-pencil-alt me-1"></i>Gambar
                                            </button>
                                            <button type="button" class="btn btn-outline-secondary" id="clear-polygon-btn">
                                                <i class="fas fa-trash me-1"></i>Hapus
                                            </button>
                                        </div>
                                    </div>
                                    
                                    <div class="alert alert-info">
                                        <i class="fas fa-info-circle me-2"></i>
                                        <strong>Cara menggunakan:</strong><br>
                                        1. Klik tombol "Gambar" untuk mulai menggambar polygon<br>
                                        2. Klik pada peta untuk menambahkan titik polygon<br>
                                        3. Klik ganda untuk menyelesaikan polygon<br>
                                        4. Atau input koordinat manual di bawah ini
                                    </div>
                                </div>

                                <!-- Manual Coordinate Input -->
                                <div class="mb-3">
                                    <label class="form-label">Input Koordinat Manual (Opsional)</label>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <label for="manual_lat" class="form-label small">Latitude</label>
                                            <input type="number" step="0.00000001" class="form-control form-control-sm" 
                                                   id="manual_lat" placeholder="-2.9167">
                                        </div>
                                        <div class="col-md-6">
                                            <label for="manual_lng" class="form-label small">Longitude</label>
                                            <input type="number" step="0.00000001" class="form-control form-control-sm" 
                                                   id="manual_lng" placeholder="115.1667">
                                        </div>
                                    </div>
                                    <div class="mt-2">
                                        <button type="button" class="btn btn-sm btn-outline-success" id="add-coordinate-btn">
                                            <i class="fas fa-plus me-1"></i>Tambah Titik
                                        </button>
                                        <button type="button" class="btn btn-sm btn-outline-info" id="complete-polygon-btn">
                                            <i class="fas fa-check me-1"></i>Selesai
                                        </button>
                                    </div>
                                </div>

                                <!-- Coordinate Display -->
                                <div class="mb-3">
                                    <label class="form-label">Koordinat Polygon</label>
                                    <textarea class="form-control" id="polygon_coordinates" name="koordinat_poligon" 
                                              rows="4" readonly placeholder="Koordinat polygon akan muncul di sini..."></textarea>
                                    <div class="form-text">Format: [{"lat": -2.9167, "lng": 115.1667}, ...]</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="d-grid">
                        <button type="submit" class="btn btn-success btn-lg">
                            <i class="fas fa-save me-2"></i>Simpan Data
                        </button>
                    </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
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Initialize map
    const createMap = 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(createMap);
    
    let marker;
    
    // Coordinate mode management
    const coordinateModeBtns = document.querySelectorAll('.coordinate-mode-btn');
    const autoModeControls = document.getElementById('auto-mode-controls');
    const coordinateInputs = document.getElementById('coordinate-inputs');
    const addressSearch = document.getElementById('address-search');
    const geolocationStatus = document.getElementById('geolocation-status');
    
    // Show coordinate inputs by default (auto mode)
    coordinateInputs.classList.add('show');
    
    coordinateModeBtns.forEach(btn => {
        btn.addEventListener('click', function() {
            const mode = this.dataset.mode;
            
            // Update button states
            coordinateModeBtns.forEach(b => b.classList.remove('active'));
            this.classList.add('active');
            
            if (mode === 'auto') {
                autoModeControls.style.display = 'block';
                coordinateInputs.classList.add('show');
            } else {
                autoModeControls.style.display = 'none';
                coordinateInputs.classList.add('show');
            }
        });
    });
    
    // Get current location
    document.getElementById('get-current-location').addEventListener('click', function() {
        if (navigator.geolocation) {
            showStatus('info', 'Mencari lokasi...', 'geolocation-status');
            
            navigator.geolocation.getCurrentPosition(
                function(position) {
                    const lat = position.coords.latitude;
                    const lng = position.coords.longitude;
                    
                    // Update form fields
                    document.getElementById('latitude').value = lat.toFixed(8);
                    document.getElementById('longitude').value = lng.toFixed(8);
                    
                    // Update map
                    updateMapMarker(lat, lng);
                    
                    showStatus('success', 'Lokasi berhasil ditemukan!', 'geolocation-status');
                },
                function(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';
                    }
                    showStatus('error', errorMessage, 'geolocation-status');
                },
                {
                    enableHighAccuracy: true,
                    timeout: 10000,
                    maximumAge: 60000
                }
            );
        } else {
            showStatus('error', 'Geolocation tidak didukung di browser ini', 'geolocation-status');
        }
    });
    
    // Search by address toggle
    document.getElementById('search-by-address').addEventListener('click', function() {
        if (addressSearch.style.display === 'none') {
            addressSearch.style.display = 'block';
            this.innerHTML = '<i class="fas fa-times me-2"></i>Tutup Pencarian';
        } else {
            addressSearch.style.display = 'none';
            this.innerHTML = '<i class="fas fa-search me-2"></i>Cari Berdasarkan Alamat';
        }
    });
    
    // Perform address search
    document.getElementById('perform-search').addEventListener('click', function() {
        const address = document.getElementById('search-address').value.trim();
        if (!address) {
            showStatus('error', 'Masukkan alamat yang akan dicari', 'geolocation-status');
            return;
        }
        
        showStatus('info', 'Mencari alamat...', 'geolocation-status');
        
        // Use Nominatim for geocoding (OpenStreetMap)
        const searchUrl = `https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(address)}&limit=1`;
        
        fetch(searchUrl)
            .then(response => response.json())
            .then(data => {
                if (data && data.length > 0) {
                    const result = data[0];
                    const lat = parseFloat(result.lat);
                    const lng = parseFloat(result.lon);
                    
                    // Update form fields
                    document.getElementById('latitude').value = lat.toFixed(8);
                    document.getElementById('longitude').value = lng.toFixed(8);
                    
                    // Update map
                    updateMapMarker(lat, lng);
                    
                    showStatus('success', `Alamat ditemukan: ${result.display_name}`, 'geolocation-status');
                } else {
                    showStatus('error', 'Alamat tidak ditemukan', 'geolocation-status');
                }
            })
            .catch(error => {
                showStatus('error', 'Gagal mencari alamat: ' + error.message, 'geolocation-status');
            });
    });
    
    // Handle map click
    createMap.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);
    });
    
    // Handle photo preview
    document.getElementById('fotos').addEventListener('change', function(e) {
        const preview = document.getElementById('photo-preview');
        preview.innerHTML = '';
        
        for (let file of e.target.files) {
            if (file.type.startsWith('image/')) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    const img = document.createElement('img');
                    img.src = e.target.result;
                    img.className = 'photo-preview';
                    preview.appendChild(img);
                };
                reader.readAsDataURL(file);
            }
        }
    });
    
    // Helper functions
    function updateMapMarker(lat, lng) {
        if (marker) {
            createMap.removeLayer(marker);
        }
        marker = L.marker([lat, lng]).addTo(createMap);
        
        // Center map on location
        createMap.setView([lat, lng], 15);
    }
    
    function showStatus(type, message, elementId) {
        const element = document.getElementById(elementId);
        element.className = `geolocation-status ${type}`;
        element.textContent = message;
        element.style.display = 'block';
        
        // Auto-hide success messages after 5 seconds
        if (type === 'success') {
            setTimeout(() => {
                element.style.display = 'none';
            }, 5000);
        }
    }
    
    // Set default coordinates if available
    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);
        createMap.setView([lat, lng], 15);
        marker = L.marker([lat, lng]).addTo(createMap);
    }

    // Initialize PolygonManager for polygon drawing functionality
    const polygonManager = new PolygonManager(createMap, 'polygon_coordinates', {
        defaultColor: '#3388ff',
        defaultWeight: 2,
        defaultOpacity: 0.2,
        pointMarkerColor: '#ff4444'
    });
});
</script>
@endpush