@extends('customer.layouts.mobile')

@section('title', 'Status Koneksi')
@section('page-title', 'Koneksi Internet')

@php
    $showBackButton = true;
@endphp

@section('content')
<!-- Connection Status Card -->
<div class="mobile-card mb-4">
    <div class="mobile-card-body">
        <div style="text-align: center; padding: 20px 0;">
            <div style="width: 80px; height: 80px; margin: 0 auto 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative;" id="connectionIndicator">
                <div style="width: 100%; height: 100%; border-radius: 50%; background: {{ $connectionStatus['is_online'] ? 'linear-gradient(135deg, var(--success) 0%, #38a169 100%)' : 'linear-gradient(135deg, var(--danger) 0%, #e53e3e 100%)' }}; display: flex; align-items: center; justify-content: center;">
                    <i class="bi bi-wifi" style="font-size: 32px; color: white;"></i>
                </div>
                @if($connectionStatus['is_online'])
                    <div style="position: absolute; width: 100%; height: 100%; border-radius: 50%; border: 3px solid var(--success); animation: pulse-ring 2s infinite;"></div>
                @endif
            </div>
            
            <h3 style="margin: 0 0 8px 0; font-size: 24px; font-weight: 700; color: var(--dark);">
                {{ $connectionStatus['is_online'] ? 'Terhubung' : 'Terputus' }}
            </h3>
            <p style="margin: 0; color: var(--secondary); font-size: 14px;">
                {{ $connectionStatus['is_online'] ? 'Koneksi internet stabil' : 'Tidak ada koneksi internet' }}
            </p>
            
            @if($connectionStatus['is_online'])
                <div style="margin-top: 16px; padding: 12px; background: rgba(72, 187, 120, 0.1); border-radius: 8px;">
                    <p style="margin: 0; font-size: 12px; color: var(--success); font-weight: 500;">
                        <i class="bi bi-check-circle me-1"></i>
                        Uptime: {{ $connectionStatus['uptime'] ?? '99.9%' }} • Last check: {{ now()->format('H:i') }}
                    </p>
                </div>
            @else
                <div style="margin-top: 16px; padding: 12px; background: rgba(245, 101, 101, 0.1); border-radius: 8px;">
                    <p style="margin: 0; font-size: 12px; color: var(--danger); font-weight: 500;">
                        <i class="bi bi-exclamation-circle me-1"></i>
                        Koneksi terputus • Hubungi support untuk bantuan
                    </p>
                </div>
            @endif
        </div>
    </div>
</div>
    
@if($connectionStatus['is_online'])
<!-- Speed Test Card -->
<div class="mobile-card mb-4">
    <div class="mobile-card-header">
        <i class="bi bi-speedometer2 me-2"></i>
        Test Kecepatan
    </div>
    <div class="mobile-card-body">
        <div class="text-center mb-4">
            <button class="btn-mobile btn-primary-mobile" onclick="startSpeedTest()" id="speedTestBtn">
                <i class="bi bi-play-circle me-2"></i>
                Mulai Speed Test
            </button>
        </div>
        
        <div id="speedTestResults" class="d-none">
            <div class="mobile-grid mobile-grid-3">
                <div style="text-align: center; padding: 16px; background: var(--light); border-radius: 8px;">
                    <i class="bi bi-download" style="color: var(--success); font-size: 20px; margin-bottom: 8px;"></i>
                    <p style="margin: 0; font-size: 12px; color: var(--secondary);">Download</p>
                    <p style="margin: 4px 0 0 0; font-size: 18px; font-weight: 700; color: var(--dark);" id="downloadSpeed">{{ $connectionStatus['download_speed'] ?? '0' }}</p>
                    <p style="margin: 0; font-size: 10px; color: var(--secondary);">Mbps</p>
                </div>
                <div style="text-align: center; padding: 16px; background: var(--light); border-radius: 8px;">
                    <i class="bi bi-upload" style="color: var(--info); font-size: 20px; margin-bottom: 8px;"></i>
                    <p style="margin: 0; font-size: 12px; color: var(--secondary);">Upload</p>
                    <p style="margin: 4px 0 0 0; font-size: 18px; font-weight: 700; color: var(--dark);" id="uploadSpeed">{{ $connectionStatus['upload_speed'] ?? '0' }}</p>
                    <p style="margin: 0; font-size: 10px; color: var(--secondary);">Mbps</p>
                </div>
                <div style="text-align: center; padding: 16px; background: var(--light); border-radius: 8px;">
                    <i class="bi bi-stopwatch" style="color: var(--warning); font-size: 20px; margin-bottom: 8px;"></i>
                    <p style="margin: 0; font-size: 12px; color: var(--secondary);">Ping</p>
                    <p style="margin: 4px 0 0 0; font-size: 18px; font-weight: 700; color: var(--dark);" id="pingTime">0</p>
                    <p style="margin: 0; font-size: 10px; color: var(--secondary);">ms</p>
                </div>
            </div>
    
            <div style="margin-top: 16px;">
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
                    <span style="font-size: 12px; color: var(--secondary);">Kualitas Koneksi</span>
                    <span style="font-size: 12px; font-weight: 600; color: var(--dark);" id="connectionQuality">Excellent</span>
                </div>
                <div style="width: 100%; height: 8px; background: #e2e8f0; border-radius: 4px; overflow: hidden;">
                    <div style="height: 100%; background: linear-gradient(90deg, var(--success) 0%, var(--warning) 70%, var(--danger) 100%); border-radius: 4px; transition: width 0.5s ease;" id="qualityBar"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Usage Statistics -->
<div class="mobile-card mb-4">
    <div class="mobile-card-header">
        <i class="bi bi-bar-chart me-2"></i>
        Statistik Penggunaan
    </div>
    <div class="mobile-card-body">
        <div class="mobile-grid">
            <div style="padding: 16px; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); border-radius: 8px; color: white; text-align: center;">
                <i class="bi bi-calendar-month" style="font-size: 24px; margin-bottom: 8px; opacity: 0.9;"></i>
                <p style="margin: 0; font-size: 12px; opacity: 0.8;">Bulan Ini</p>
                <p style="margin: 4px 0 0 0; font-size: 20px; font-weight: 700;">{{ rand(150, 500) }} GB</p>
            </div>
                    
            <div style="padding: 16px; background: linear-gradient(135deg, var(--success) 0%, #38a169 100%); border-radius: 8px; color: white; text-align: center;">
                <i class="bi bi-calendar-week" style="font-size: 24px; margin-bottom: 8px; opacity: 0.9;"></i>
                <p style="margin: 0; font-size: 12px; opacity: 0.8;">Minggu Ini</p>
                <p style="margin: 4px 0 0 0; font-size: 20px; font-weight: 700;">{{ rand(30, 120) }} GB</p>
            </div>
                    
            <div style="padding: 16px; background: linear-gradient(135deg, var(--info) 0%, #3182ce 100%); border-radius: 8px; color: white; text-align: center;">
                <i class="bi bi-calendar-day" style="font-size: 24px; margin-bottom: 8px; opacity: 0.9;"></i>
                <p style="margin: 0; font-size: 12px; opacity: 0.8;">Hari Ini</p>
                <p style="margin: 4px 0 0 0; font-size: 20px; font-weight: 700;">{{ $connectionStatus['data_usage']['total'] ?? rand(5, 25) . ' GB' }}</p>
            </div>
        </div>

        <div style="margin-top: 16px; padding: 12px; background: var(--light); border-radius: 8px;">
            <div style="display: flex; justify-content: space-between; align-items: center;">
                <span style="font-size: 12px; color: var(--secondary);">Rata-rata harian</span>
                <span style="font-size: 12px; font-weight: 600; color: var(--dark);">{{ rand(8, 20) }} GB/hari</span>
            </div>
        </div>
    </div>
</div>
@endif
                    
<!-- Connection Info -->
<div class="mobile-card mb-4">
    <div class="mobile-card-header">
        <i class="bi bi-info-circle me-2"></i>
        Informasi Koneksi
    </div>
    <div class="mobile-card-body">
        <div style="display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid #e2e8f0;">
            <span style="color: var(--secondary); font-size: 14px;">Nomor Layanan</span>
            <span style="color: var(--dark); font-weight: 600; font-size: 14px;">{{ $pelanggan->nomer_layanan ?? 'Belum Ada' }}</span>
        </div>
        <div style="display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid #e2e8f0;">
            <span style="color: var(--secondary); font-size: 14px;">Status Akun</span>
            <span style="background: {{ $pelanggan->status == 'aktif' ? 'rgba(72, 187, 120, 0.1)' : 'rgba(245, 101, 101, 0.1)' }}; color: {{ $pelanggan->status == 'aktif' ? 'var(--success)' : 'var(--danger)' }}; padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: 500;">
                {{ ucfirst($pelanggan->status ?? 'Tidak Aktif') }}
            </span>
        </div>
        <div style="display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid #e2e8f0;">
            <span style="color: var(--secondary); font-size: 14px;">Paket Internet</span>
            <span style="color: var(--dark); font-weight: 600; font-size: 14px;">{{ $pelanggan->layananData->nama_layanan ?? 'Standard 20 Mbps' }}</span>
        </div>
        <div style="display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid #e2e8f0;">
            <span style="color: var(--secondary); font-size: 14px;">IP Address</span>
            <span style="color: var(--dark); font-weight: 600; font-size: 14px;">{{ $connectionStatus['ip_address'] ?? 'N/A' }}</span>
        </div>
        <div style="display: flex; justify-content: space-between; align-items: center; padding: 12px 0;">
            <span style="color: var(--secondary); font-size: 14px;">Terdaftar Sejak</span>
            <span style="color: var(--dark); font-weight: 600; font-size: 14px;">{{ \Carbon\Carbon::parse($pelanggan->created_at)->format('d M Y') }}</span>
        </div>
    </div>
</div>
@endsection

@push('css')
<style>
@keyframes pulse-ring {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(1.3);
        opacity: 0;
    }
}

.speed-test-animation {
    animation: spin 2s linear infinite;
    }
    
    @keyframes spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }
</style>
@endpush

@push('scripts')
<script>
let speedTestRunning = false;

function startSpeedTest() {
    if (speedTestRunning) return;
    
    speedTestRunning = true;
    const btn = document.getElementById('speedTestBtn');
    const results = document.getElementById('speedTestResults');
    
    // Update button
    btn.innerHTML = '<span class="spinner-mobile"></span> Testing...';
    btn.disabled = true;
    
    // Show results container
    results.classList.remove('d-none');
    
    // Reset values
    document.getElementById('downloadSpeed').textContent = '0';
    document.getElementById('uploadSpeed').textContent = '0';
    document.getElementById('pingTime').textContent = '0';
    
    // Simulate speed test
    simulateSpeedTest();
}

function simulateSpeedTest() {
    let progress = 0;
    const interval = setInterval(() => {
        progress += Math.random() * 10;
        
        if (progress >= 100) {
            clearInterval(interval);
            completeSpeedTest();
            return;
        }
        
        // Update values gradually
        const downloadTarget = Math.random() * 50 + 10;
        const uploadTarget = Math.random() * 20 + 5;
        const pingTarget = Math.random() * 50 + 10;
        
        const currentDownload = (downloadTarget * progress / 100).toFixed(1);
        const currentUpload = (uploadTarget * progress / 100).toFixed(1);
        const currentPing = Math.floor(pingTarget * progress / 100);
        
        document.getElementById('downloadSpeed').textContent = currentDownload;
        document.getElementById('uploadSpeed').textContent = currentUpload;
        document.getElementById('pingTime').textContent = currentPing;
    }, 100);
}

function completeSpeedTest() {
    const btn = document.getElementById('speedTestBtn');
    const downloadSpeed = parseFloat(document.getElementById('downloadSpeed').textContent);
    
    // Determine quality
    let quality, qualityWidth, qualityColor;
    if (downloadSpeed >= 30) {
        quality = 'Excellent';
        qualityWidth = '90%';
        qualityColor = 'var(--success)';
    } else if (downloadSpeed >= 20) {
        quality = 'Good';
        qualityWidth = '70%';
        qualityColor = 'var(--info)';
    } else if (downloadSpeed >= 10) {
        quality = 'Fair';
        qualityWidth = '50%';
        qualityColor = 'var(--warning)';
    } else {
        quality = 'Poor';
        qualityWidth = '30%';
        qualityColor = 'var(--danger)';
    }
    
    document.getElementById('connectionQuality').textContent = quality;
    document.getElementById('qualityBar').style.width = qualityWidth;
    document.getElementById('qualityBar').style.background = qualityColor;
    
    // Reset button
    btn.innerHTML = '<i class="bi bi-arrow-clockwise me-2"></i> Test Ulang';
    btn.disabled = false;
    speedTestRunning = false;
}

function refreshConnection() {
    const btn = event.target.closest('button');
    const icon = btn.querySelector('i');
    
    icon.classList.add('speed-test-animation');
    btn.disabled = true;
    
    setTimeout(() => {
        icon.classList.remove('speed-test-animation');
        btn.disabled = false;
        showNotification('Status koneksi berhasil diperbarui', 'success');
    }, 2000);
}

function showTroubleshooting() {
    const troubleshootingSteps = `
        <div class="alert-mobile alert-warning-mobile">
            <strong>Langkah Troubleshooting:</strong><br>
            1. Restart modem/router Anda<br>
            2. Periksa kabel jaringan<br>
            3. Restart perangkat Anda<br>
            4. Hubungi support jika masalah berlanjut
        </div>
    `;
    
    const content = document.querySelector('.mobile-content');
    content.insertAdjacentHTML('afterbegin', troubleshootingSteps);
    
    setTimeout(() => {
        const alert = document.querySelector('.alert-mobile');
        if (alert) {
            alert.style.opacity = '0';
            alert.style.transform = 'translateY(-10px)';
            setTimeout(() => alert.remove(), 300);
        }
    }, 8000);
}

function showNotification(message, type = 'info') {
    const notification = document.createElement('div');
    notification.className = `alert-mobile alert-${type}-mobile`;
    notification.style.position = 'fixed';
    notification.style.top = '80px';
    notification.style.left = '50%';
    notification.style.transform = 'translateX(-50%)';
    notification.style.zIndex = '9999';
    notification.style.minWidth = '280px';
    notification.style.maxWidth = '90%';
    notification.innerHTML = `
        <i class="bi bi-${type === 'success' ? 'check-circle' : 'info-circle'} me-2"></i>
        ${message}
    `;
    
    document.body.appendChild(notification);
    
    setTimeout(() => {
        notification.style.opacity = '0';
        notification.style.transform = 'translateX(-50%) translateY(-10px)';
        setTimeout(() => notification.remove(), 300);
    }, 3000);
}
</script>
@endpush