@extends('layouts.app')

@section('title', 'Detail 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-stats {
        background-color: #f8f9fa;
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 15px;
    }
    
    .stat-item {
        text-align: center;
        padding: 10px;
    }
    
    .stat-value {
        font-size: 1.5rem;
        font-weight: 700;
        color: #007bff;
        margin-bottom: 5px;
    }
    
    .stat-label {
        font-size: 0.9rem;
        color: #6c757d;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    
    .tracking-points {
        max-height: 400px;
        overflow-y: auto;
    }
    
    .point-item {
        background-color: #f8f9fa;
        border: 1px solid #dee2e6;
        border-radius: 6px;
        padding: 12px;
        margin-bottom: 10px;
        transition: all 0.2s ease;
    }
    
    .point-item:hover {
        background-color: #e9ecef;
        border-color: #adb5bd;
    }
    
    .point-number {
        background-color: #007bff;
        color: white;
        border-radius: 50%;
        width: 35px;
        height: 35px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        font-size: 1rem;
        margin-right: 15px;
    }
    
    .point-coordinates {
        font-family: monospace;
        font-size: 0.9rem;
        color: #495057;
        margin-bottom: 5px;
    }
    
    .point-details {
        font-size: 0.8rem;
        color: #6c757d;
    }
    
    .point-distance {
        font-weight: 600;
        color: #28a745;
        font-size: 0.9rem;
    }
    
    .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: 8px;
    }
    
    .tracking-info .col-6 {
        font-size: 0.9rem;
    }
    
    .tracking-info .value {
        font-weight: 600;
        color: #212529;
    }
    
    .status-badge {
        font-size: 0.9rem;
        padding: 0.5rem 1rem;
    }
    
    .btn-convert {
        font-size: 1.1rem;
        padding: 12px 24px;
    }
</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>Detail Tracking Jalur Irigasi
                    </h2>
                    <p class="text-muted">Detail lengkap sesi tracking jalur irigasi</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>

    <!-- Session Info -->
    <div class="row mb-4">
        <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-info-circle me-2"></i>Informasi Sesi Tracking
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="tracking-info">
                                <div class="row">
                                    <div class="col-6">Sistem Irigasi:</div>
                                    <div class="col-6 value">{{ $firstPoint->irigasi->nama_irigasi }}</div>
                                </div>
                                <div class="row">
                                    <div class="col-6">Lokasi:</div>
                                    <div class="col-6 value">{{ $firstPoint->irigasi->lokasi ?? '-' }}</div>
                                </div>
                                <div class="row">
                                    <div class="col-6">Session ID:</div>
                                    <div class="col-6 value">
                                        <code class="small">{{ $firstPoint->session_id }}</code>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-6">Status:</div>
                                    <div class="col-6 value">
                                        <span class="badge status-badge bg-{{ $firstPoint->status_color }}">
                                            {{ $firstPoint->status_label }}
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="tracking-info">
                                <div class="row">
                                    <div class="col-6">Dibuat Oleh:</div>
                                    <div class="col-6 value">{{ $firstPoint->creator->nama_lengkap ?? $firstPoint->creator->name }}</div>
                                </div>
                                <div class="row">
                                    <div class="col-6">Waktu Mulai:</div>
                                    <div class="col-6 value">{{ $trackingPoints->first()->created_at->format('d/m/Y H:i:s') }}</div>
                                </div>
                                <div class="row">
                                    <div class="col-6">Waktu Selesai:</div>
                                    <div class="col-6 value">{{ $trackingPoints->last()->created_at->format('d/m/Y H:i:s') }}</div>
                                </div>
                                <div class="row">
                                    <div class="col-6">Durasi:</div>
                                    <div class="col-6 value">
                                        @php
                                            $duration = $stats['duration'];
                                            $hours = floor($duration / 3600);
                                            $minutes = floor(($duration % 3600) / 60);
                                            $seconds = $duration % 60;
                                        @endphp
                                        @if($hours > 0)
                                            {{ $hours }}j {{ $minutes }}m {{ $seconds }}s
                                        @else
                                            {{ $minutes }}m {{ $seconds }}s
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Statistics -->
    <div class="row mb-4">
        <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-chart-bar me-2"></i>Statistik Tracking
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="stat-item">
                                <div class="stat-value">{{ $stats['total_points'] }}</div>
                                <div class="stat-label">Total Titik</div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="stat-item">
                                <div class="stat-value">{{ number_format($stats['total_distance'], 2) }}</div>
                                <div class="stat-label">Total Jarak (m)</div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="stat-item">
                                <div class="stat-value">{{ number_format($stats['avg_speed'], 2) }}</div>
                                <div class="stat-label">Kecepatan Rata-rata (m/s)</div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="stat-item">
                                <div class="stat-value">{{ number_format($stats['avg_accuracy'], 2) }}</div>
                                <div class="stat-label">Akurasi Rata-rata (m)</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- Map -->
        <div class="col-lg-8">
            <div class="card shadow-sm mb-4">
                <div class="card-header bg-white">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-map me-2"></i>Peta Jalur Tracking
                    </h5>
                </div>
                <div class="card-body">
                    <div id="map"></div>
                    <div class="mt-3">
                        <small class="text-muted">
                            <i class="fas fa-info-circle me-1"></i>
                            Peta menampilkan jalur tracking dari titik awal hingga akhir
                        </small>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Tracking Points -->
        <div class="col-lg-4">
            <div class="card shadow-sm mb-4">
                <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">
                        @foreach($trackingPoints as $point)
                            <div class="point-item d-flex align-items-center" data-lat="{{ $point->latitude }}" data-lng="{{ $point->longitude }}">
                                <div class="point-number">{{ $point->urutan }}</div>
                                <div class="flex-grow-1">
                                    <div class="point-coordinates">
                                        {{ number_format($point->latitude, 6) }}, {{ number_format($point->longitude, 6) }}
                                    </div>
                                    <div class="point-details">
                                        {{ $point->created_at->format('H:i:s') }}
                                        @if($point->accuracy)
                                            | Akurasi: {{ number_format($point->accuracy, 2) }}m
                                        @endif
                                        @if($point->altitude)
                                            | Altitude: {{ number_format($point->altitude, 2) }}m
                                        @endif
                                        @if($point->speed)
                                            | Speed: {{ number_format($point->speed, 2) }}m/s
                                        @endif
                                    </div>
                                </div>
                                @if($point->panjang_jalur)
                                    <div class="point-distance">
                                        +{{ number_format($point->panjang_jalur, 2) }}m
                                    </div>
                                @endif
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>

            <!-- Convert to Jalur -->
            @if($firstPoint->status === 'completed')
                <div class="card shadow-sm">
                    <div class="card-header bg-success text-white">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-exchange-alt me-2"></i>Konversi ke Jalur Irigasi
                        </h5>
                    </div>
                    <div class="card-body">
                        <p class="text-white-50 mb-3">
                            Tracking selesai! Anda dapat mengkonversi data tracking ini menjadi jalur irigasi yang dapat digunakan.
                        </p>
                        <button type="button" class="btn btn-light btn-convert w-100" onclick="showConvertModal()">
                            <i class="fas fa-save me-2"></i>Buat Jalur Irigasi
                        </button>
                    </div>
                </div>
            @endif
        </div>
    </div>
</div>

<!-- Convert to Jalur Modal -->
<div class="modal fade" id="convertModal" 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-exchange-alt me-2"></i>Konversi ke Jalur Irigasi
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="convertForm">
                    <input type="hidden" name="session_id" value="{{ $firstPoint->session_id }}">
                    
                    <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" required>
                        <div class="form-text">Berikan nama yang deskriptif untuk jalur ini</div>
                    </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" required>
                            <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 class="form-text">Pilih tipe saluran sesuai dengan hierarki irigasi</div>
                    </div>

                    <div class="alert alert-info">
                        <i class="fas fa-info-circle me-2"></i>
                        <strong>Informasi:</strong> Jalur irigasi akan dibuat berdasarkan data tracking yang telah direkam. 
                        Total {{ $stats['total_points'] }} titik dengan panjang {{ number_format($stats['total_distance'], 2) }}m.
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                <button type="button" class="btn btn-success" onclick="submitConvert()">
                    <i class="fas fa-save me-2"></i>Buat Jalur
                </button>
            </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>
                <a href="{{ route('irigasi-jalur.index') }}" class="btn btn-primary">
                    <i class="fas fa-route me-2"></i>Lihat Jalur
                </a>
            </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() {
    // Initialize map
    const map = L.map('map').setView([{{ $trackingPoints->first()->latitude }}, {{ $trackingPoints->first()->longitude }}], 15);
    
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '© OpenStreetMap contributors'
    }).addTo(map);
    
    // Add tracking points to map
    const coordinates = [];
    const markers = [];
    
    @foreach($trackingPoints as $point)
        coordinates.push([{{ $point->latitude }}, {{ $point->longitude }}]);
        
        // Add marker for each point
        const marker{{ $point->urutan }} = L.marker([{{ $point->latitude }}, {{ $point->longitude }}], {
            title: 'Titik {{ $point->urutan }}'
        }).addTo(map);
        
        // Add popup with point info
        const popupContent{{ $point->urutan }} = '<strong>Titik {{ $point->urutan }}</strong><br>' +
            'Koordinat: {{ $point->latitude }}, {{ $point->longitude }}<br>' +
            'Waktu: {{ $point->created_at->format('H:i:s') }}<br>' +
            @if($point->accuracy)'Akurasi: {{ number_format($point->accuracy, 2) }}m<br>'@endif
            @if($point->panjang_jalur)'Jarak: +{{ number_format($point->panjang_jalur, 2) }}m'@endif;
        marker{{ $point->urutan }}.bindPopup(popupContent{{ $point->urutan }});
        
        markers.push(marker{{ $point->urutan }});
    @endforeach
    
    // Add polyline for tracking path
    if (coordinates.length > 1) {
        const polyline = L.polyline(coordinates, {
            color: 'red',
            weight: 4,
            opacity: 0.8
        }).addTo(map);
        
        // Fit map to show all points
        map.fitBounds(polyline.getBounds());
        
        // Add start and end markers with different colors
        if (coordinates.length > 0) {
            // Start marker (green)
            L.marker(coordinates[0], {
                icon: L.divIcon({
                    className: 'start-marker',
                    html: '<div style="background-color: #28a745; 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).bindPopup('<strong>Start Point</strong>');
            
            // End marker (red)
            L.marker(coordinates[coordinates.length - 1], {
                icon: L.divIcon({
                    className: 'end-marker',
                    html: '<div style="background-color: #dc3545; 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).bindPopup('<strong>End Point</strong>');
        }
    }
    
    // Add click event to point items to center map
    document.querySelectorAll('.point-item').forEach(function(item) {
        item.addEventListener('click', function() {
            const lat = parseFloat(this.dataset.lat);
            const lng = parseFloat(this.dataset.lng);
            map.setView([lat, lng], 18);
            
            // Highlight clicked point
            this.style.backgroundColor = '#e3f2fd';
            this.style.borderColor = '#2196f3';
            
            // Reset other points
            document.querySelectorAll('.point-item').forEach(function(otherItem) {
                if (otherItem !== item) {
                    otherItem.style.backgroundColor = '#f8f9fa';
                    otherItem.style.borderColor = '#dee2e6';
                }
            });
        });
    });
});

// Show convert modal
function showConvertModal() {
    new bootstrap.Modal(document.getElementById('convertModal')).show();
}

// Submit convert form
async function submitConvert() {
    const form = document.getElementById('convertForm');
    const formData = new FormData(form);
    
    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: formData.get('session_id'),
                nama_jalur: formData.get('nama_jalur'),
                tipe_saluran: formData.get('tipe_saluran')
            })
        });
        
        const data = await response.json();
        
        if (data.success) {
            // Close convert modal
            bootstrap.Modal.getInstance(document.getElementById('convertModal')).hide();
            
            // Show success message
            document.getElementById('success-message').textContent = 
                `Jalur irigasi berhasil dibuat! Total ${data.count} titik dengan panjang ${data.total_panjang}m`;
            new bootstrap.Modal(document.getElementById('successModal')).show();
            
        } else {
            showError(data.message || 'Gagal mengkonversi tracking ke jalur.');
        }
        
    } catch (error) {
        console.error('Error converting tracking:', error);
        showError('Terjadi kesalahan saat mengkonversi tracking.');
    }
}

// Show error message
function showError(message) {
    document.getElementById('error-message').textContent = message;
    new bootstrap.Modal(document.getElementById('errorModal')).show();
}
</script>
@endpush