@extends('layouts.app')

@section('title', 'Location Tracking Configuration')

@section('content')
<div>
    <div class="mb-6">
        <h2 class="text-3xl font-bold text-white">Location Tracking Configuration</h2>
        <p class="text-gray-400 text-sm mt-1">Konfigurasi metode tracking lokasi</p>
    </div>

    <form action="{{ route('location-tracking-configs.update') }}" method="POST" class="space-y-6">
        @csrf
        @method('PUT')

        <!-- Auto-Track Settings -->
        <div class="bg-surface border border-border rounded-xl p-6">
            <h3 class="text-lg font-semibold text-white mb-4 flex items-center gap-2">
                <i data-lucide="settings" class="w-5 h-5"></i>
                Auto-Track Settings
            </h3>
            
            <div class="space-y-4">
                @php
                    $autoTrackSettings = $settingsByCategory['auto_track'] ?? [];
                @endphp

                <div>
                    <div class="flex items-center justify-between mb-2">
                        <label class="text-sm font-medium text-gray-300">Enable Auto-Track</label>
                        @php
                            $autoTrackEnabled = $autoTrackSettings->firstWhere('key', 'auto_track_enabled');
                        @endphp
                        @if($autoTrackEnabled)
                        <input type="hidden" name="settings[{{ $autoTrackEnabled->id }}][key]" value="auto_track_enabled">
                        <input type="checkbox" name="settings[{{ $autoTrackEnabled->id }}][value]" value="1" 
                               {{ old("settings.{$autoTrackEnabled->id}.value", $autoTrackEnabled->value) ? 'checked' : '' }}
                               class="w-4 h-4 text-blue-600 bg-white/5 border-white/10 rounded focus:ring-blue-500">
                        @endif
                    </div>
                    <p class="text-xs text-gray-500">Otomatis tracking lokasi saat menerima aduan</p>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-300 mb-2">Tracking Priority Order</label>
                    @php
                        $prioritySetting = $autoTrackSettings->firstWhere('key', 'tracking_priority');
                        $priority = $prioritySetting ? (old("settings.{$prioritySetting->id}.value", $prioritySetting->value) ?? ['gps', 'cell_id', 'area_code']) : ['gps', 'cell_id', 'area_code'];
                        if (is_string($priority)) {
                            $priority = json_decode($priority, true) ?? ['gps', 'cell_id', 'area_code'];
                        }
                    @endphp
                    @if($prioritySetting)
                    <input type="hidden" name="settings[{{ $prioritySetting->id }}][key]" value="tracking_priority">
                    <div id="priority-sortable" class="space-y-2">
                        @foreach($priority as $index => $method)
                        <div class="flex items-center gap-2 bg-white/5 border border-white/10 rounded-lg p-3" data-method="{{ $method }}">
                            <i data-lucide="grip-vertical" class="w-4 h-4 text-gray-500 cursor-move"></i>
                            <span class="flex-1 text-white capitalize">{{ $method }}</span>
                            <input type="hidden" name="settings[{{ $prioritySetting->id }}][value][{{ $index }}]" value="{{ $method }}">
                        </div>
                        @endforeach
                    </div>
                    <p class="text-xs text-gray-500 mt-2">Drag untuk mengubah urutan prioritas</p>
                    @endif
                </div>
            </div>
        </div>

        <!-- Area Code Settings -->
        <div class="bg-surface border border-border rounded-xl p-6">
            <h3 class="text-lg font-semibold text-white mb-4 flex items-center gap-2">
                <i data-lucide="map-pin" class="w-5 h-5"></i>
                Area Code Tracking
            </h3>
            
            <div class="space-y-4">
                @php
                    $areaCodeSettings = $settingsByCategory['area_code'] ?? [];
                    $areaCodeEnabled = $areaCodeSettings->firstWhere('key', 'area_code_enabled');
                @endphp

                <div>
                    <div class="flex items-center justify-between mb-2">
                        <label class="text-sm font-medium text-gray-300">Enable Area Code Tracking</label>
                        @if($areaCodeEnabled)
                        <input type="hidden" name="settings[{{ $areaCodeEnabled->id }}][key]" value="area_code_enabled">
                        <input type="checkbox" name="settings[{{ $areaCodeEnabled->id }}][value]" value="1"
                               {{ old("settings.{$areaCodeEnabled->id}.value", $areaCodeEnabled->value) ? 'checked' : '' }}
                               class="w-4 h-4 text-blue-600 bg-white/5 border-white/10 rounded focus:ring-blue-500">
                        @endif
                    </div>
                    <p class="text-xs text-gray-500">Tracking lokasi berdasarkan area code nomor telepon (Akurasi: ±5-10 km)</p>
                </div>
            </div>
        </div>

        <!-- Cell-ID Settings -->
        <div class="bg-surface border border-border rounded-xl p-6">
            <h3 class="text-lg font-semibold text-white mb-4 flex items-center gap-2">
                <i data-lucide="radio" class="w-5 h-5"></i>
                Cell-ID Tracking
            </h3>
            
            <div class="space-y-4">
                @php
                    $cellIdSettings = $settingsByCategory['cell_id'] ?? [];
                    $cellIdEnabled = $cellIdSettings->firstWhere('key', 'cell_id_enabled');
                    $cellIdCacheTtl = $cellIdSettings->firstWhere('key', 'cell_id_cache_ttl');
                @endphp

                <div>
                    <div class="flex items-center justify-between mb-2">
                        <label class="text-sm font-medium text-gray-300">Enable Cell-ID Tracking</label>
                        @if($cellIdEnabled)
                        <input type="hidden" name="settings[{{ $cellIdEnabled->id }}][key]" value="cell_id_enabled">
                        <input type="checkbox" name="settings[{{ $cellIdEnabled->id }}][value]" value="1"
                               {{ old("settings.{$cellIdEnabled->id}.value", $cellIdEnabled->value) ? 'checked' : '' }}
                               class="w-4 h-4 text-blue-600 bg-white/5 border-white/10 rounded focus:ring-blue-500">
                        @endif
                    </div>
                    <p class="text-xs text-gray-500">Tracking lokasi menggunakan Cell-ID dari tower BTS (Akurasi: ±100-500 meter)</p>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-300 mb-2">Cache TTL (seconds)</label>
                    @if($cellIdCacheTtl)
                    <input type="hidden" name="settings[{{ $cellIdCacheTtl->id }}][key]" value="cell_id_cache_ttl">
                    <input type="number" name="settings[{{ $cellIdCacheTtl->id }}][value]" 
                           value="{{ old("settings.{$cellIdCacheTtl->id}.value", $cellIdCacheTtl->value ?? 3600) }}"
                           min="60" max="86400"
                           class="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <p class="text-xs text-gray-500 mt-1">Lama waktu cache lokasi Cell-ID (default: 3600 = 1 jam)</p>
                    @endif
                </div>

                <div class="bg-blue-500/10 border border-blue-500/20 rounded-lg p-3">
                    <p class="text-sm text-blue-300">
                        <strong>Catatan:</strong> Cell-ID tracking memerlukan konfigurasi provider. 
                        <a href="{{ route('cell-id-provider-configs.index') }}" class="underline">Konfigurasi Provider</a>
                    </p>
                </div>
            </div>
        </div>

        <!-- GPS Settings -->
        <div class="bg-surface border border-border rounded-xl p-6">
            <h3 class="text-lg font-semibold text-white mb-4 flex items-center gap-2">
                <i data-lucide="navigation" class="w-5 h-5"></i>
                GPS Tracking
            </h3>
            
            <div class="space-y-4">
                @php
                    $gpsSettings = $settingsByCategory['gps'] ?? [];
                    $gpsMinAccuracy = $gpsSettings->firstWhere('key', 'gps_min_accuracy');
                @endphp

                <div>
                    <label class="block text-sm font-medium text-gray-300 mb-2">Minimum GPS Accuracy (meters)</label>
                    @if($gpsMinAccuracy)
                    <input type="hidden" name="settings[{{ $gpsMinAccuracy->id }}][key]" value="gps_min_accuracy">
                    <input type="number" name="settings[{{ $gpsMinAccuracy->id }}][value]" 
                           value="{{ old("settings.{$gpsMinAccuracy->id}.value", $gpsMinAccuracy->value ?? 50) }}"
                           min="1" max="1000"
                           class="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <p class="text-xs text-gray-500 mt-1">GPS dengan akurasi di bawah nilai ini akan ditolak (default: 50 meter)</p>
                    @endif
                </div>
            </div>
        </div>

        <!-- Submit Button -->
        <div class="flex gap-3">
            <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg transition font-medium">
                Simpan Konfigurasi
            </button>
            <a href="{{ route('location-tracking-configs.index') }}" class="px-6 py-3 bg-white/5 hover:bg-white/10 border border-white/10 text-white rounded-lg transition">
                Reset
            </a>
        </div>
    </form>
</div>

<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const sortable = Sortable.create(document.getElementById('priority-sortable'), {
        animation: 150,
        handle: '.cursor-move',
        onEnd: function(evt) {
            // Update hidden inputs order
            const items = evt.to.children;
            Array.from(items).forEach((item, index) => {
                const inputs = item.querySelectorAll('input[type="hidden"]');
                inputs.forEach((input, inputIndex) => {
                    if (inputIndex === 0) {
                        // Keep key input as is
                        return;
                    }
                    // Update value input name with new index
                    if (input.name.includes('[value]')) {
                        input.name = input.name.replace(/\[value\]\[\d+\]/, `[value][${index}]`);
                    }
                });
            });
        }
    });
});
</script>
@endsection