@extends('layout')

@section('title', 'Speed Test - TrimNet ISP')
@section('description', 'Tes kecepatan internet Anda dengan speed test TrimNet. Ukur kecepatan download, upload, dan ping untuk memastikan performa optimal.')

@section('content')    <!-- Hero Section -->
    <section class="pt-16 bg-gradient-to-br from-blue-600 to-blue-800 text-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
            <div class="text-center animate-fade-in-up">
                <h1 class="text-4xl md:text-6xl font-bold mb-6">
                    Speed <span class="text-yellow-400">Test</span>
                </h1>
                <p class="text-xl md:text-2xl mb-8 text-blue-100 max-w-3xl mx-auto">
                    Tes kecepatan internet Anda untuk memastikan performa optimal
                </p>
            </div>
        </div>
    </section>    <!-- Speed Test Tool -->
    <section class="py-20 bg-white">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="bg-white rounded-lg shadow-lg p-8 animate-on-scroll" x-data="speedTest()">
                <div class="text-center mb-8">
                    <h2 class="text-3xl font-bold text-gray-900 mb-4">Tes Kecepatan Internet</h2>
                    <p class="text-gray-600">Klik tombol di bawah untuk memulai pengujian kecepatan internet Anda</p>
                </div>
                
                <!-- Speed Gauges -->
                <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8">
                    <!-- Download Speed -->
                    <div class="text-center">
                        <div class="relative w-32 h-32 mx-auto mb-4">
                            <div class="w-32 h-32 rounded-full border-8 border-gray-200 relative">
                                <div class="absolute inset-0 rounded-full border-8 border-blue-500 border-t-transparent animate-spin" x-show="testing && currentTest === 'download'"></div>
                                <div class="absolute inset-0 flex items-center justify-center">
                                    <div class="text-center">
                                        <div class="text-2xl font-bold text-blue-600" x-text="downloadSpeed"></div>
                                        <div class="text-xs text-gray-500">Mbps</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <h3 class="text-lg font-semibold text-gray-900">Download</h3>
                        <p class="text-sm text-gray-600">Kecepatan unduh</p>
                    </div>
                    
                    <!-- Upload Speed -->
                    <div class="text-center">
                        <div class="relative w-32 h-32 mx-auto mb-4">
                            <div class="w-32 h-32 rounded-full border-8 border-gray-200 relative">
                                <div class="absolute inset-0 rounded-full border-8 border-green-500 border-t-transparent animate-spin" x-show="testing && currentTest === 'upload'"></div>
                                <div class="absolute inset-0 flex items-center justify-center">
                                    <div class="text-center">
                                        <div class="text-2xl font-bold text-green-600" x-text="uploadSpeed"></div>
                                        <div class="text-xs text-gray-500">Mbps</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <h3 class="text-lg font-semibold text-gray-900">Upload</h3>
                        <p class="text-sm text-gray-600">Kecepatan unggah</p>
                    </div>
                    
                    <!-- Ping -->
                    <div class="text-center">
                        <div class="relative w-32 h-32 mx-auto mb-4">
                            <div class="w-32 h-32 rounded-full border-8 border-gray-200 relative">
                                <div class="absolute inset-0 rounded-full border-8 border-purple-500 border-t-transparent animate-spin" x-show="testing && currentTest === 'ping'"></div>
                                <div class="absolute inset-0 flex items-center justify-center">
                                    <div class="text-center">
                                        <div class="text-2xl font-bold text-purple-600" x-text="ping"></div>
                                        <div class="text-xs text-gray-500">ms</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <h3 class="text-lg font-semibold text-gray-900">Ping</h3>
                        <p class="text-sm text-gray-600">Latensi</p>
                    </div>
                </div>
                
                <!-- Test Button -->
                <div class="text-center mb-8">
                    <button @click="startTest()" 
                            :disabled="testing"
                            :class="testing ? 'bg-gray-400 cursor-not-allowed' : 'bg-blue-600 hover:bg-blue-700'"
                            class="px-8 py-3 text-white rounded-lg font-semibold transition">
                        <span x-show="!testing">Mulai Test</span>
                        <span x-show="testing">Testing...</span>
                    </button>
                </div>
                
                <!-- Test Status -->
                <div class="text-center" x-show="testing">
                    <p class="text-gray-600" x-text="testStatus"></p>
                </div>
                
                <!-- Results -->
                <div x-show="completed" class="mt-8 p-6 bg-gray-50 rounded-lg">
                    <h3 class="text-xl font-bold text-gray-900 mb-4">Hasil Test</h3>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-center">
                        <div class="bg-white p-4 rounded-lg">
                            <div class="text-2xl font-bold text-blue-600" x-text="downloadSpeed + ' Mbps'"></div>
                            <div class="text-sm text-gray-600">Download Speed</div>
                        </div>
                        <div class="bg-white p-4 rounded-lg">
                            <div class="text-2xl font-bold text-green-600" x-text="uploadSpeed + ' Mbps'"></div>
                            <div class="text-sm text-gray-600">Upload Speed</div>
                        </div>
                        <div class="bg-white p-4 rounded-lg">
                            <div class="text-2xl font-bold text-purple-600" x-text="ping + ' ms'"></div>
                            <div class="text-sm text-gray-600">Ping</div>
                        </div>
                    </div>
                    
                    <div class="mt-6 text-center">
                        <button @click="resetTest()" class="bg-gray-600 text-white px-6 py-2 rounded-lg hover:bg-gray-700 transition">
                            Test Ulang
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </section>    <!-- Speed Interpretation -->
    <section class="py-20 bg-gray-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16 animate-on-scroll">
                <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
                    Panduan Kecepatan Internet
                </h2>
                <p class="text-gray-600 text-lg max-w-2xl mx-auto">
                    Pahami hasil speed test Anda dan kebutuhan kecepatan untuk berbagai aktivitas
                </p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div class="bg-white rounded-lg shadow-md p-6 animate-on-scroll">
                    <div class="bg-green-100 w-12 h-12 rounded-lg flex items-center justify-center mb-4">
                        <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                    </div>
                    <h3 class="text-xl font-semibold text-gray-900 mb-4">Aktivitas Ringan</h3>
                    <div class="space-y-2 text-gray-600">
                        <p><strong>5-25 Mbps:</strong> Web browsing, email, media sosial</p>
                        <p><strong>Cocok untuk:</strong> 1-2 pengguna</p>
                        <p><strong>Streaming:</strong> 480p - 720p</p>
                    </div>
                </div>
                
                <div class="bg-white rounded-lg shadow-md p-6">
                    <div class="bg-yellow-100 w-12 h-12 rounded-lg flex items-center justify-center mb-4">
                        <svg class="w-6 h-6 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                        </svg>
                    </div>
                    <h3 class="text-xl font-semibold text-gray-900 mb-4">Aktivitas Sedang</h3>
                    <div class="space-y-2 text-gray-600">
                        <p><strong>25-100 Mbps:</strong> HD streaming, video call, gaming</p>
                        <p><strong>Cocok untuk:</strong> 3-5 pengguna</p>
                        <p><strong>Streaming:</strong> 1080p - 4K</p>
                    </div>
                </div>
                
                <div class="bg-white rounded-lg shadow-md p-6">
                    <div class="bg-blue-100 w-12 h-12 rounded-lg flex items-center justify-center mb-4">
                        <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707"></path>
                        </svg>
                    </div>
                    <h3 class="text-xl font-semibold text-gray-900 mb-4">Aktivitas Berat</h3>
                    <div class="space-y-2 text-gray-600">
                        <p><strong>100+ Mbps:</strong> 4K streaming, live streaming, kantor</p>
                        <p><strong>Cocok untuk:</strong> 5+ pengguna, bisnis</p>
                        <p><strong>Streaming:</strong> 4K Ultra HD</p>
                    </div>
                </div>
            </div>
        </div>
    </section>    <!-- Tips Section -->
    <section class="py-20 bg-white">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16 animate-on-scroll">
                <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
                    Tips Optimasi Kecepatan
                </h2>
                <p class="text-gray-600 text-lg">
                    Cara meningkatkan performa internet Anda
                </p>
            </div>
            
            <div class="space-y-6">
                <div class="flex items-start animate-on-scroll">
                    <div class="bg-blue-100 w-8 h-8 rounded-full flex items-center justify-center mr-4 mt-1">
                        <span class="text-blue-600 font-semibold text-sm">1</span>
                    </div>
                    <div>
                        <h4 class="font-semibold text-gray-900 mb-2">Posisi Router yang Optimal</h4>
                        <p class="text-gray-600">Letakkan router di tempat terbuka, jauh dari dinding dan perangkat elektronik lainnya.</p>
                    </div>
                </div>
                
                <div class="flex items-start">
                    <div class="bg-blue-100 w-8 h-8 rounded-full flex items-center justify-center mr-4 mt-1">
                        <span class="text-blue-600 font-semibold text-sm">2</span>
                    </div>
                    <div>
                        <h4 class="font-semibold text-gray-900 mb-2">Gunakan Koneksi Kabel</h4>
                        <p class="text-gray-600">Untuk aktivitas berat seperti gaming atau streaming 4K, gunakan koneksi ethernet.</p>
                    </div>
                </div>
                
                <div class="flex items-start">
                    <div class="bg-blue-100 w-8 h-8 rounded-full flex items-center justify-center mr-4 mt-1">
                        <span class="text-blue-600 font-semibold text-sm">3</span>
                    </div>
                    <div>
                        <h4 class="font-semibold text-gray-900 mb-2">Update Firmware Router</h4>
                        <p class="text-gray-600">Pastikan router Anda selalu menggunakan firmware terbaru untuk performa optimal.</p>
                    </div>
                </div>
                
                <div class="flex items-start">
                    <div class="bg-blue-100 w-8 h-8 rounded-full flex items-center justify-center mr-4 mt-1">
                        <span class="text-blue-600 font-semibold text-sm">4</span>
                    </div>
                    <div>
                        <h4 class="font-semibold text-gray-900 mb-2">Kelola Bandwidth</h4>
                        <p class="text-gray-600">Batasi penggunaan bandwidth untuk aplikasi yang tidak penting saat melakukan aktivitas berat.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('scripts')
<script>
function speedTest() {
    return {
        testing: false,
        completed: false,
        currentTest: '',
        testStatus: '',
        downloadSpeed: '0',
        uploadSpeed: '0',
        ping: '0',
        
        startTest() {
            this.testing = true;
            this.completed = false;
            this.resetValues();
            
            // Simulate ping test
            this.currentTest = 'ping';
            this.testStatus = 'Mengukur ping...';
            setTimeout(() => {
                this.ping = Math.floor(Math.random() * 30) + 5; // 5-35ms
                
                // Simulate download test
                this.currentTest = 'download';
                this.testStatus = 'Mengukur kecepatan download...';
                setTimeout(() => {
                    this.downloadSpeed = (Math.random() * 80 + 20).toFixed(1); // 20-100 Mbps
                    
                    // Simulate upload test
                    this.currentTest = 'upload';
                    this.testStatus = 'Mengukur kecepatan upload...';
                    setTimeout(() => {
                        this.uploadSpeed = (Math.random() * 40 + 10).toFixed(1); // 10-50 Mbps
                        
                        this.testing = false;
                        this.completed = true;
                        this.currentTest = '';
                        this.testStatus = '';
                    }, 2000);
                }, 3000);
            }, 2000);
        },
        
        resetTest() {
            this.completed = false;
            this.resetValues();
        },
        
        resetValues() {
            this.downloadSpeed = '0';
            this.uploadSpeed = '0';
            this.ping = '0';
        }
    }
}
</script>
@endsection