@extends('layouts.app')

@section('title', 'Tracking Jalur Irigasi - TaniMapping')

@push('styles')
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<style>
    #map {
        height: 500px;
        width: 100%;
        border-radius: 10px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    
    .tracking-controls {
        background-color: #f8f9fa;
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 15px;
    }
    
    .tracking-status {
        font-size: 1.1rem;
        font-weight: 600;
        padding: 10px;
        border-radius: 8px;
        text-align: center;
        margin-bottom: 15px;
    }
    
    .status-recording {
        background-color: #d4edda;
        color: #155724;
        border: 1px solid #c3e6cb;
    }
    
    .status-paused {
        background-color: #fff3cd;
        color: #856404;
        border: 1px solid #ffeaa7;
    }
    
    .status-completed {
        background-color: #d1ecf1;
        color: #0c5460;
        border: 1px solid #bee5eb;
    }
    
    .tracking-info {
        background-color: #e9ecef;
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 15px;
    }
    
    .tracking-info h6 {
        margin-bottom: 10px;
        color: #495057;
    }
    
    .tracking-info .row {
        margin-bottom: 10px;
    }
    
    .tracking-info .col-6 {
        font-size: 0.9rem;
    }
    
    .tracking-info .value {
        font-weight: 600;
        color: #212529;
    }
    
    .btn-tracking {
        font-size: 1.1rem;
        padding: 12px 24px;
        margin: 5px;
    }
    
    .btn-start {
        background-color: #28a745;
        border-color: #28a745;
    }
    
    .btn-pause {
        background-color: #ffc107;
        border-color: #ffc107;
        color: #212529;
    }
    
    .btn-resume {
        background-color: #17a2b8;
        border-color: #17a2b8;
    }
    
    .btn-stop {
        background-color: #dc3545;
        border-color: #dc3545;
    }
    
    .btn-record {
        background-color: #6f42c1;
        border-color: #6f42c1;
    }
    
    .tracking-points {
        max-height: 300px;
        overflow-y: auto;
    }
    
    .point-item {
        background-color: #f8f9fa;
        border: 1px solid #dee2e6;
        border-radius: 6px;
        padding: 10px;
        margin-bottom: 8px;
    }
    
    .point-number {
        background-color: #007bff;
        color: white;
        border-radius: 50%;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        font-size: 0.9rem;
    }
    
    .point-coordinates {
        font-family: monospace;
        font-size: 0.85rem;
        color: #6c757d;
    }
    
    .point-time {
        font-size: 0.8rem;
        color: #6c757d;
    }
    
    .point-distance {
        font-weight: 600;
        color: #28a745;
    }
    
    .alert-tracking {
        border-radius: 8px;
        border: none;
        padding: 15px;
        margin-bottom: 15px;
    }
    
    .gps-indicator {
        display: inline-block;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        margin-right: 8px;
        animation: pulse 2s infinite;
    }
    
    .gps-active {
        background-color: #28a745;
    }
    
    .gps-inactive {
        background-color: #dc3545;
    }
    
    @keyframes pulse {
        0% { opacity: 1; }
        50% { opacity: 0.5; }
        100% { opacity: 1; }
    }
</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-route me-2"></i>Tracking Jalur Irigasi
                    </h2>
                    <p class="text-muted">Rekam jalur irigasi secara real-time dengan GPS</p>
                </div>
                <div>
                    <a href="{{ route('irigasi-jalur-tracking.index') }}" class="btn btn-outline-secondary">
                        <i class="fas fa-list me-2"></i>Daftar Tracking
                    </a>
                    <a href="{{ route('irigasi-jalur.index') }}" class="btn btn-outline-primary ms-2">
                        <i class="fas fa-arrow-left me-2"></i>Kembali
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Tracking Status -->
    <div id="tracking-status" class="tracking-status" style="display: none;">
        <i class="fas fa-circle-notch fa-spin me-2"></i>
        <span id="status-text">Memulai tracking...</span>
    </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 Tracking
                    </h5>
                </div>
                <div class="card-body">
                    <div id="map"></div>
                    
                    <!-- GPS Status -->
                    <div class="mt-3 text-center">
                        <span class="gps-indicator gps-inactive" id="gps-indicator"></span>
                        <small class="text-muted" id="gps-status">GPS tidak aktif</small>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-lg-4">
            <!-- Session Setup -->
            <div class="card shadow-sm mb-3" id="session-setup">
                <div class="card-header bg-white">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-cog me-2"></i>Setup Sesi Tracking
                    </h5>
                </div>
                <div class="card-body">
                    <form id="tracking-form">
                        <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" id="irigasi_id" name="irigasi_id" required>
                                <option value="">Pilih Sistem Irigasi</option>
                                @foreach($irigasi as $ir)
                                    <option value="{{ $ir->id }}">
                                        {{ $ir->nama_irigasi }}
                                        @if($ir->lokasi)
                                            - {{ $ir->lokasi }}
                                        @endif
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="mb-3">
                            <label for="notes" class="form-label">
                                <i class="fas fa-sticky-note me-2"></i>Catatan
                            </label>
                            <textarea class="form-control" id="notes" name="notes" rows="3" 
                                      placeholder="Catatan tentang jalur yang akan direkam..."></textarea>
                        </div>

                        <div class="d-grid">
                            <button type="submit" class="btn btn-start btn-tracking" id="btn-start">
                                <i class="fas fa-play me-2"></i>Mulai Tracking
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Tracking Controls -->
            <div class="card shadow-sm mb-3" id="tracking-controls" style="display: none;">
                <div class="card-header bg-white">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-gamepad me-2"></i>Kontrol Tracking
                    </h5>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <button type="button" class="btn btn-record btn-tracking" id="btn-record">
                            <i class="fas fa-map-pin me-2"></i>Rekam Titik
                        </button>
                        <button type="button" class="btn btn-pause btn-tracking" id="btn-pause">
                            <i class="fas fa-pause me-2"></i>Jeda
                        </button>
                        <button type="button" class="btn btn-resume btn-tracking" id="btn-resume" style="display: none;">
                            <i class="fas fa-play me-2"></i>Lanjutkan
                        </button>
                        <button type="button" class="btn btn-stop btn-tracking" id="btn-stop">
                            <i class="fas fa-stop me-2"></i>Selesai
                        </button>
                    </div>
                </div>
            </div>

            <!-- Tracking Info -->
            <div class="card shadow-sm mb-3" id="tracking-info" style="display: none;">
                <div class="card-header bg-white">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-info-circle me-2"></i>Informasi Tracking
                    </h5>
                </div>
                <div class="card-body">
                    <div class="tracking-info">
                        <div class="row">
                            <div class="col-6">Status:</div>
                            <div class="col-6 value" id="info-status">-</div>
                        </div>
                        <div class="row">
                            <div class="col-6">Total Titik:</div>
                            <div class="col-6 value" id="info-total-points">0</div>
                        </div>
                        <div class="row">
                            <div class="col-6">Total Jarak:</div>
                            <div class="col-6 value" id="info-total-distance">0 m</div>
                        </div>
                        <div class="row">
                            <div class="col-6">Durasi:</div>
                            <div class="col-6 value" id="info-duration">00:00</div>
                        </div>
                        <div class="row">
                            <div class="col-6">Kecepatan Rata-rata:</div>
                            <div class="col-6 value" id="info-avg-speed">0 m/s</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Convert to Jalur -->
            <div class="card shadow-sm mb-3" id="convert-jalur" style="display: none;">
                <div class="card-header bg-white">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-exchange-alt me-2"></i>Konversi ke Jalur
                    </h5>
                </div>
                <div class="card-body">
                    <form id="convert-form">
                        <div class="mb-3">
                            <label for="nama_jalur" class="form-label">
                                <i class="fas fa-tag me-2"></i>Nama Jalur
                            </label>
                            <input type="text" class="form-control" id="nama_jalur" name="nama_jalur" 
                                   placeholder="Contoh: Jalur Primer Utama">
                        </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" id="tipe_saluran" name="tipe_saluran">
                                <option value="">Pilih Tipe Saluran</option>
                                <option value="primer">Saluran Primer</option>
                                <option value="sekunder">Saluran Sekunder</option>
                                <option value="tersier">Saluran Tersier</option>
                                <option value="kuarter">Saluran Kuarter</option>
                            </select>
                        </div>

                        <div class="d-grid">
                            <button type="submit" class="btn btn-success">
                                <i class="fas fa-save me-2"></i>Buat Jalur Irigasi
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Tracking Points List -->
    <div class="row mt-4" id="tracking-points-section" style="display: none;">
        <div class="col-12">
            <div class="card shadow-sm">
                <div class="card-header bg-white">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-list me-2"></i>Daftar Titik Tracking
                    </h5>
                </div>
                <div class="card-body">
                    <div class="tracking-points" id="tracking-points">
                        <!-- Points will be added here dynamically -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Success Modal -->
<div class="modal fade" id="successModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title">
                    <i class="fas fa-check-circle me-2"></i>Berhasil!
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p id="success-message"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
            </div>
        </div>
    </div>
</div>

<!-- Error Modal -->
<div class="modal fade" id="errorModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title">
                    <i class="fas fa-exclamation-triangle me-2"></i>Error!
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p id="error-message"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
            </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() {
    // Global variables
    let map, currentMarker, trackingPolyline;
    let currentSessionId = null;
    let trackingPoints = [];
    let isTracking = false;
    let isPaused = false;
    let startTime = null;
    let durationInterval = null;
    let watchId = null;
    
    // Initialize map
    function initMap() {
        map = L.map('map').setView([-6.2088, 106.8456], 8);
        
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '© OpenStreetMap contributors'
        }).addTo(map);
        
        // Initialize polyline for tracking
        trackingPolyline = L.polyline([], {color: 'red', weight: 3}).addTo(map);
    }
    
    // Initialize tracking
    function initTracking() {
        initMap();
        setupEventListeners();
        checkGPSPermission();
    }
    
    // Setup event listeners
    function setupEventListeners() {
        // Form submission
        document.getElementById('tracking-form').addEventListener('submit', startTracking);
        
        // Tracking controls
        document.getElementById('btn-record').addEventListener('click', recordPoint);
        document.getElementById('btn-pause').addEventListener('click', pauseTracking);
        document.getElementById('btn-resume').addEventListener('click', resumeTracking);
        document.getElementById('btn-stop').addEventListener('click', stopTracking);
        
        // Convert form
        document.getElementById('convert-form').addEventListener('submit', convertToJalur);
    }
    
    // Check GPS permission
    function checkGPSPermission() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(
                function(position) {
                    updateGPSStatus(true);
                    // Center map on current location
                    const lat = position.coords.latitude;
                    const lng = position.coords.longitude;
                    map.setView([lat, lng], 15);
                    
                    // Add current location marker
                    if (currentMarker) {
                        map.removeLayer(currentMarker);
                    }
                    currentMarker = L.marker([lat, lng], {
                        icon: L.divIcon({
                            className: 'current-location-marker',
                            html: '<div style="background-color: #007bff; width: 20px; height: 20px; border-radius: 50%; border: 3px solid white; box-shadow: 0 0 10px rgba(0,0,0,0.3);"></div>',
                            iconSize: [20, 20],
                            iconAnchor: [10, 10]
                        })
                    }).addTo(map);
                },
                function(error) {
                    updateGPSStatus(false);
                    console.error('GPS Error:', error);
                }
            );
        } else {
            updateGPSStatus(false);
        }
    }
    
    // Update GPS status indicator
    function updateGPSStatus(active) {
        const indicator = document.getElementById('gps-indicator');
        const status = document.getElementById('gps-status');
        
        if (active) {
            indicator.className = 'gps-indicator gps-active';
            status.textContent = 'GPS aktif';
        } else {
            indicator.className = 'gps-indicator gps-inactive';
            status.textContent = 'GPS tidak aktif';
        }
    }
    
    // Start tracking session
    async function startTracking(e) {
        e.preventDefault();
        
        const formData = new FormData(e.target);
        const irigasiId = formData.get('irigasi_id');
        const notes = formData.get('notes');
        
        if (!irigasiId) {
            showError('Pilih sistem irigasi terlebih dahulu.');
            return;
        }
        
        try {
            showStatus('Memulai sesi tracking...', 'recording');
            // Try to get initial GPS fix before starting session
            let initialPosition = null;
            if (navigator.geolocation) {
                initialPosition = await new Promise((resolve) => {
                    navigator.geolocation.getCurrentPosition(
                        (pos) => resolve(pos),
                        () => resolve(null),
                        { enableHighAccuracy: true, timeout: 8000, maximumAge: 0 }
                    );
                });
            }
            
            const response = await fetch('{{ route("irigasi-jalur-tracking.start-session") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                body: JSON.stringify({
                    irigasi_id: irigasiId,
                    notes: notes,
                    latitude: initialPosition ? initialPosition.coords.latitude : undefined,
                    longitude: initialPosition ? initialPosition.coords.longitude : undefined,
                    accuracy: initialPosition ? initialPosition.coords.accuracy : undefined,
                    altitude: initialPosition ? initialPosition.coords.altitude : undefined,
                    speed: initialPosition ? initialPosition.coords.speed : undefined,
                    heading: initialPosition ? initialPosition.coords.heading : undefined
                })
            });
            
            const data = await response.json();
            
            if (data.success) {
                currentSessionId = data.session_id;
                startTime = new Date();
                isTracking = true;
                
                // Hide setup, show controls
                document.getElementById('session-setup').style.display = 'none';
                document.getElementById('tracking-controls').style.display = 'block';
                document.getElementById('tracking-info').style.display = 'block';
                document.getElementById('tracking-points-section').style.display = 'block';
                
                // Start GPS tracking
                startGPSTracking();
                
                // Start duration timer
                startDurationTimer();
                
                showStatus('Tracking aktif - Silakan mulai merekam koordinat', 'recording');
                showSuccess('Sesi tracking dimulai!');
                
                // If we had an initial position, reflect it in UI as first point
                if (initialPosition) {
                    const lat = initialPosition.coords.latitude;
                    const lng = initialPosition.coords.longitude;
                    const accuracy = initialPosition.coords.accuracy;
                    const point = {
                        id: data.tracking_id,
                        urutan: 1,
                        latitude: lat,
                        longitude: lng,
                        accuracy: accuracy,
                        timestamp: new Date(),
                        distance: 0
                    };
                    trackingPoints.push(point);
                    updateTrackingMap();
                    updateTrackingInfo();
                    addPointToList(point);
                }
                
            } else {
                showError(data.message || 'Gagal memulai sesi tracking.');
            }
            
        } catch (error) {
            console.error('Error starting tracking:', error);
            showError('Terjadi kesalahan saat memulai tracking.');
        }
    }
    
    // Start GPS tracking
    function startGPSTracking() {
        if (navigator.geolocation && !watchId) {
            watchId = navigator.geolocation.watchPosition(
                function(position) {
                    updateGPSStatus(true);
                    
                    const lat = position.coords.latitude;
                    const lng = position.coords.longitude;
                    
                    // Update current location marker
                    if (currentMarker) {
                        currentMarker.setLatLng([lat, lng]);
                    } else {
                        currentMarker = L.marker([lat, lng], {
                            icon: L.divIcon({
                                className: 'current-location-marker',
                                html: '<div style="background-color: #007bff; width: 20px; height: 20px; border-radius: 50%; border: 3px solid white; box-shadow: 0 0 10px rgba(0,0,0,0.3);"></div>',
                                iconSize: [20, 20],
                                iconAnchor: [10, 10]
                        })
                    }).addTo(map);
                    }
                    
                    // Center map on current location
                    map.setView([lat, lng], 15);
                    
                },
                function(error) {
                    updateGPSStatus(false);
                    console.error('GPS Error:', error);
                },
                {
                    enableHighAccuracy: true,
                    timeout: 10000,
                    maximumAge: 30000
                }
            );
        }
    }
    
    // Record tracking point
    async function recordPoint() {
        if (!currentSessionId || !isTracking) {
            showError('Tracking belum dimulai atau sedang dijeda.');
            return;
        }
        
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(
                async function(position) {
                    const lat = position.coords.latitude;
                    const lng = position.coords.longitude;
                    const accuracy = position.coords.accuracy;
                    const altitude = position.coords.altitude;
                    const speed = position.coords.speed;
                    const heading = position.coords.heading;
                    
                    try {
                        const response = await fetch('{{ route("irigasi-jalur-tracking.record-point") }}', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                            },
                            body: JSON.stringify({
                                session_id: currentSessionId,
                                latitude: lat,
                                longitude: lng,
                                accuracy: accuracy,
                                altitude: altitude,
                                speed: speed,
                                heading: heading
                            })
                        });
                        
                        const data = await response.json();
                        
                        if (data.success) {
                            // Calculate distance from previous point if not provided by backend
                            let distance = data.distance || 0;
                            if (trackingPoints.length > 0 && !data.distance) {
                                const lastPoint = trackingPoints[trackingPoints.length - 1];
                                distance = calculateDistance(
                                    lastPoint.latitude, lastPoint.longitude,
                                    lat, lng
                                );
                            }
                            
                            // Add point to tracking
                            const point = {
                                id: data.tracking_id,
                                urutan: data.urutan,
                                latitude: lat,
                                longitude: lng,
                                accuracy: accuracy,
                                timestamp: new Date(),
                                distance: distance
                            };
                            
                            trackingPoints.push(point);
                            
                            // Update map
                            updateTrackingMap();
                            
                            // Update tracking info
                            updateTrackingInfo();
                            
                            // Add point to list
                            addPointToList(point);
                            
                            showSuccess(`Koordinat berhasil direkam! (Titik ${data.urutan})`);
                            
                        } else {
                            showError(data.message || 'Gagal merekam koordinat.');
                        }
                        
                    } catch (error) {
                        console.error('Error recording point:', error);
                        showError('Terjadi kesalahan saat merekam koordinat.');
                    }
                },
                function(error) {
                    showError('Tidak dapat mendapatkan lokasi saat ini: ' + error.message);
                },
                {
                    enableHighAccuracy: true,
                    timeout: 10000,
                    maximumAge: 0
                }
            );
        } else {
            showError('Browser tidak mendukung geolokasi.');
        }
    }
    
    // Update tracking map
    function updateTrackingMap() {
        if (trackingPoints.length > 0) {
            const coordinates = trackingPoints.map(point => [point.latitude, point.longitude]);
            trackingPolyline.setLatLngs(coordinates);
            
            // Fit map to show all points
            if (coordinates.length > 1) {
                map.fitBounds(trackingPolyline.getBounds());
            }
        }
    }
    
    // Update tracking information
    function updateTrackingInfo() {
        document.getElementById('info-total-points').textContent = trackingPoints.length;
        
        if (trackingPoints.length > 0) {
            const totalDistance = trackingPoints.reduce((sum, point) => sum + (point.distance || 0), 0);
            document.getElementById('info-total-distance').textContent = totalDistance.toFixed(2) + ' m';
            
            // Calculate average speed
            if (trackingPoints.length > 1 && startTime) {
                const now = new Date();
                const duration = (now - startTime) / 1000; // duration in seconds
                const avgSpeed = duration > 0 ? totalDistance / duration : 0;
                document.getElementById('info-avg-speed').textContent = avgSpeed.toFixed(2) + ' m/s';
            } else {
                document.getElementById('info-avg-speed').textContent = '0.00 m/s';
            }
        } else {
            document.getElementById('info-total-distance').textContent = '0.00 m';
            document.getElementById('info-avg-speed').textContent = '0.00 m/s';
        }
    }
    
    // Add point to tracking list
    function addPointToList(point) {
        const pointsContainer = document.getElementById('tracking-points');
        
        const pointElement = document.createElement('div');
        pointElement.className = 'point-item d-flex align-items-center';
        pointElement.innerHTML = `
            <div class="point-number me-3">${point.urutan}</div>
            <div class="flex-grow-1">
                <div class="point-coordinates">
                    ${point.latitude.toFixed(6)}, ${point.longitude.toFixed(6)}
                </div>
                <div class="point-time">
                    ${point.timestamp.toLocaleTimeString()}
                    ${point.accuracy ? ` | Akurasi: ${point.accuracy.toFixed(2)}m` : ''}
                </div>
            </div>
            ${point.distance ? `<div class="point-distance">+${point.distance.toFixed(2)}m</div>` : ''}
        `;
        
        pointsContainer.appendChild(pointElement);
        pointsContainer.scrollTop = pointsContainer.scrollHeight;
    }
    
    // Start duration timer
    function startDurationTimer() {
        durationInterval = setInterval(() => {
            updateDuration();
            updateTrackingInfo(); // Also update tracking info every second
        }, 1000);
    }
    
    // Update duration display
    function updateDuration() {
        if (startTime) {
            const now = new Date();
            const diff = Math.floor((now - startTime) / 1000);
            const minutes = Math.floor(diff / 60);
            const seconds = diff % 60;
            document.getElementById('info-duration').textContent = 
                `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
        }
    }
    
    // Pause tracking
    async function pauseTracking() {
        if (!currentSessionId) return;
        
        try {
            const response = await fetch('{{ route("irigasi-jalur-tracking.pause-session") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                body: JSON.stringify({
                    session_id: currentSessionId
                })
            });
            
            const data = await response.json();
            
            if (data.success) {
                isPaused = true;
                isTracking = false;
                document.getElementById('btn-pause').style.display = 'none';
                document.getElementById('btn-resume').style.display = 'block';
                showStatus('Tracking dijeda', 'paused');
                showSuccess('Tracking dijeda');
            }
            
        } catch (error) {
            console.error('Error pausing tracking:', error);
            showError('Gagal menjeda tracking.');
        }
    }
    
    // Resume tracking
    async function resumeTracking() {
        if (!currentSessionId) return;
        
        try {
            const response = await fetch('{{ route("irigasi-jalur-tracking.resume-session") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                body: JSON.stringify({
                    session_id: currentSessionId
                })
            });
            
            const data = await response.json();
            
            if (data.success) {
                isPaused = false;
                isTracking = true;
                document.getElementById('btn-pause').style.display = 'block';
                document.getElementById('btn-resume').style.display = 'none';
                showStatus('Tracking aktif', 'recording');
                showSuccess('Tracking dilanjutkan');
            }
            
        } catch (error) {
            console.error('Error resuming tracking:', error);
            showError('Gagal melanjutkan tracking.');
        }
    }
    
    // Stop tracking
    async function stopTracking() {
        if (!currentSessionId) return;
        
        try {
            const response = await fetch('{{ route("irigasi-jalur-tracking.complete-session") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                body: JSON.stringify({
                    session_id: currentSessionId
                })
            });
            
            const data = await response.json();
            
            if (data.success) {
                isTracking = false;
                isPaused = false;
                
                // Stop GPS tracking
                if (watchId) {
                    navigator.geolocation.clearWatch(watchId);
                    watchId = null;
                }
                
                // Stop timer
                if (durationInterval) {
                    clearInterval(durationInterval);
                    durationInterval = null;
                }
                
                // Show convert option
                document.getElementById('convert-jalur').style.display = 'block';
                
                showStatus('Tracking selesai', 'completed');
                showSuccess('Tracking selesai! Anda dapat mengkonversi ke jalur irigasi.');
                
            }
            
        } catch (error) {
            console.error('Error stopping tracking:', error);
            showError('Gagal menghentikan tracking.');
        }
    }
    
    // Convert tracking to jalur
    async function convertToJalur(e) {
        e.preventDefault();
        
        const formData = new FormData(e.target);
        const namaJalur = formData.get('nama_jalur');
        const tipeSaluran = formData.get('tipe_saluran');
        
        try {
            const response = await fetch('{{ route("irigasi-jalur-tracking.convert-to-jalur") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                body: JSON.stringify({
                    session_id: currentSessionId,
                    nama_jalur: namaJalur,
                    tipe_saluran: tipeSaluran
                })
            });
            
            const data = await response.json();
            
            if (data.success) {
                showSuccess(`Jalur irigasi berhasil dibuat! Total ${data.count} titik dengan panjang ${data.total_panjang}m`);
                
                // Redirect to jalur index after delay
                setTimeout(() => {
                    window.location.href = data.redirect_url;
                }, 2000);
                
            } else {
                showError(data.message || 'Gagal mengkonversi tracking ke jalur.');
            }
            
        } catch (error) {
            console.error('Error converting tracking:', error);
            showError('Terjadi kesalahan saat mengkonversi tracking.');
        }
    }
    
    // Show status
    function showStatus(message, type) {
        const statusDiv = document.getElementById('tracking-status');
        const statusText = document.getElementById('status-text');
        
        statusDiv.className = `tracking-status status-${type}`;
        statusText.textContent = message;
        statusDiv.style.display = 'block';
    }
    
    // Show success message
    function showSuccess(message) {
        document.getElementById('success-message').textContent = message;
        new bootstrap.Modal(document.getElementById('successModal')).show();
    }
    
    // Show error message
    function showError(message) {
        document.getElementById('error-message').textContent = message;
        new bootstrap.Modal(document.getElementById('errorModal')).show();
    }
    
    // Calculate distance between two coordinates using Haversine formula
    function calculateDistance(lat1, lon1, lat2, lon2) {
        const earthRadius = 6371000; // Earth radius in meters
        
        const latDelta = (lat2 - lat1) * Math.PI / 180;
        const lonDelta = (lon2 - lon1) * Math.PI / 180;
        
        const a = Math.sin(latDelta / 2) * Math.sin(latDelta / 2) +
                  Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
                  Math.sin(lonDelta / 2) * Math.sin(lonDelta / 2);
        
        const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
        
        return earthRadius * c;
    }
    
    // Initialize tracking
    initTracking();
});
</script>
@endpush