@extends('layouts.app')

@section('title', 'View Connection Log - ISP ERP System')

@section('page-title', 'Connection Log Details')

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="custom-card">
                <div class="custom-card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h3 class="mb-0">
                                <i class="fas fa-eye me-2"></i>
                                Connection Log Details
                            </h3>
                            <p class="mb-0 opacity-75">View connection log information</p>
                        </div>
                        <div class="d-flex gap-2">
                            <a href="{{ route('user-connection-logs.index') }}" class="btn btn-light btn-custom">
                                <i class="fas fa-arrow-left me-2"></i>Back to Logs
                            </a>
                            <a href="{{ route('user-connection-logs.edit', $userConnectionLog) }}" class="btn btn-primary btn-custom">
                                <i class="fas fa-edit me-2"></i>Edit
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- User Statistics -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card bg-primary text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="card-subtitle mb-2 text-white-50">Total Connected</h6>
                            <h3 class="mb-0">{{ $totalConnected }}</h3>
                        </div>
                        <div>
                            <i class="fas fa-plug fa-2x opacity-50"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-warning text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="card-subtitle mb-2 text-white-50">Total Disconnected</h6>
                            <h3 class="mb-0">{{ $totalDisconnected }}</h3>
                        </div>
                        <div>
                            <i class="fas fa-unlink fa-2x opacity-50"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-success text-white">
                <div class="card-body">
                    <div>
                        <h6 class="card-subtitle mb-2 text-white-50">Last Connected</h6>
                        <p class="mb-0">
                            @if($lastConnected)
                                <small>{{ $lastConnected->created_at->format('M d, Y') }}</small><br>
                                <strong>{{ $lastConnected->created_at->format('H:i:s') }}</strong>
                            @else
                                <span class="text-white-50">N/A</span>
                            @endif
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-danger text-white">
                <div class="card-body">
                    <div>
                        <h6 class="card-subtitle mb-2 text-white-50">Last Disconnected</h6>
                        <p class="mb-0">
                            @if($lastDisconnected)
                                <small>{{ $lastDisconnected->created_at->format('M d, Y') }}</small><br>
                                <strong>{{ $lastDisconnected->created_at->format('H:i:s') }}</strong>
                            @else
                                <span class="text-white-50">N/A</span>
                            @endif
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Connection Log Details -->
    <div class="row">
        <div class="col-lg-8">
            <div class="custom-card">
                <div class="custom-card-header">
                    <h4 class="mb-0">
                        <i class="fas fa-info-circle me-2"></i>
                        Log Information
                    </h4>
                </div>
                <div class="custom-card-body">
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <strong>Username:</strong>
                            <p class="mb-0">{{ $userConnectionLog->username }}</p>
                        </div>
                        <div class="col-md-6">
                            <strong>Action:</strong>
                            <p class="mb-0">
                                @if($userConnectionLog->action == 'connect')
                                    <span class="badge bg-success">
                                        <i class="fas fa-plug me-1"></i>Connect
                                    </span>
                                @else
                                    <span class="badge bg-warning">
                                        <i class="fas fa-unlink me-1"></i>Disconnect
                                    </span>
                                @endif
                            </p>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-12">
                            <strong>Status:</strong>
                            <p class="mb-0">
                                @php
                                    $status = 'N/A';
                                    $statusBadge = 'secondary';
                                    
                                    if ($userConnectionLog->action == 'connect') {
                                        if (isset($isStillActive) && $isStillActive && isset($isActiveInAnyServer) && $isActiveInAnyServer) {
                                            $status = 'Active';
                                            $statusBadge = 'success';
                                        } elseif (isset($isStillActive) && !$isStillActive) {
                                            $status = 'Disconnected';
                                            $statusBadge = 'danger';
                                        } else {
                                            $status = 'Disconnected';
                                            $statusBadge = 'warning';
                                        }
                                    } else {
                                        $status = 'Disconnected';
                                        $statusBadge = 'warning';
                                    }
                                @endphp
                                @if($status != 'N/A')
                                    <span class="badge bg-{{ $statusBadge }}">
                                        @if($status == 'Active')
                                            <i class="fas fa-circle-check me-1"></i>
                                        @else
                                            <i class="fas fa-circle-xmark me-1"></i>
                                        @endif
                                        {{ $status }}
                                    </span>
                                    @if($status == 'Active' && isset($isActiveInAnyServer) && $isActiveInAnyServer)
                                        <small class="text-muted ms-2">(Active in at least one MikroTik server)</small>
                                    @elseif($status == 'Disconnected' && $statusBadge == 'danger')
                                        <small class="text-muted ms-2">(Was connected but now disconnected)</small>
                                    @endif
                                @else
                                    <span class="text-muted">{{ $status }}</span>
                                @endif
                            </p>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-6">
                            <strong>MikroTik Server:</strong>
                            <p class="mb-0">
                                @if($userConnectionLog->mikrotikServer)
                                    <span class="badge bg-info">{{ $userConnectionLog->mikrotikServer->name }}</span>
                                    <small class="text-muted">({{ $userConnectionLog->mikrotikServer->host }})</small>
                                @else
                                    <span class="text-muted">N/A</span>
                                @endif
                            </p>
                        </div>
                        <div class="col-md-6">
                            <strong>Client:</strong>
                            <p class="mb-0">
                                @if($userConnectionLog->client)
                                    {{ $userConnectionLog->client->username }} - {{ $userConnectionLog->client->name ?? 'N/A' }}
                                @else
                                    <span class="text-muted">N/A</span>
                                @endif
                            </p>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-6">
                            <strong>IP Address:</strong>
                            <p class="mb-0">
                                @if($userConnectionLog->ip_address)
                                    <code class="text-primary">{{ $userConnectionLog->ip_address }}</code>
                                @else
                                    <span class="text-muted">N/A</span>
                                @endif
                            </p>
                        </div>
                        <div class="col-md-6">
                            <strong>MAC Address:</strong>
                            <p class="mb-0">
                                @if($userConnectionLog->mac_address)
                                    <code>{{ $userConnectionLog->mac_address }}</code>
                                @else
                                    <span class="text-muted">N/A</span>
                                @endif
                            </p>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-6">
                            <strong>Session ID:</strong>
                            <p class="mb-0">
                                @if($userConnectionLog->session_id)
                                    <code>{{ $userConnectionLog->session_id }}</code>
                                @else
                                    <span class="text-muted">N/A</span>
                                @endif
                            </p>
                        </div>
                        <div class="col-md-6">
                            <strong>Interface:</strong>
                            <p class="mb-0">
                                @if($userConnectionLog->interface)
                                    {{ $userConnectionLog->interface }}
                                @else
                                    <span class="text-muted">N/A</span>
                                @endif
                            </p>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-6">
                            <strong>Profile:</strong>
                            <p class="mb-0">
                                @if($userConnectionLog->profile)
                                    {{ $userConnectionLog->profile }}
                                @else
                                    <span class="text-muted">N/A</span>
                                @endif
                            </p>
                        </div>
                        <div class="col-md-6">
                            <strong>Reason:</strong>
                            <p class="mb-0">
                                @if($userConnectionLog->reason)
                                    {{ $userConnectionLog->reason }}
                                @else
                                    <span class="text-muted">N/A</span>
                                @endif
                            </p>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-6">
                            <strong>Connected At:</strong>
                            <p class="mb-0">
                                @if($userConnectionLog->connected_at)
                                    {{ $userConnectionLog->connected_at->format('M d, Y H:i:s') }}
                                @else
                                    <span class="text-muted">N/A</span>
                                @endif
                            </p>
                        </div>
                        <div class="col-md-6">
                            <strong>Disconnected At:</strong>
                            <p class="mb-0">
                                @if($userConnectionLog->disconnected_at)
                                    {{ $userConnectionLog->disconnected_at->format('M d, Y H:i:s') }}
                                @else
                                    <span class="text-muted">N/A</span>
                                @endif
                            </p>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-6">
                            <strong>Uptime:</strong>
                            <p class="mb-0" id="uptimeDisplay">
                                @if(isset($isStillActive) && $isStillActive && isset($liveSessionData) && $liveSessionData && isset($liveSessionData['uptime']))
                                    @php
                                        // Use MikroTik's actual uptime string format (e.g., "1w5d16h15s")
                                        $uptimeStr = $liveSessionData['uptime'];
                                    @endphp
                                    <span class="text-success fw-bold" id="uptimeValue">{{ $uptimeStr }}</span>
                                    <small class="text-muted ms-2">(Live from MikroTik)</small>
                                    <input type="hidden" id="mikrotikUptime" value="{{ $uptimeStr }}">
                                @elseif(isset($isStillActive) && $isStillActive && $userConnectionLog->action == 'connect' && $userConnectionLog->connected_at)
                                    @php
                                        // Fallback: calculate from database timestamp
                                        $uptimeSeconds = now()->diffInSeconds($userConnectionLog->connected_at);
                                        $weeks = floor($uptimeSeconds / 604800);
                                        $days = floor(($uptimeSeconds % 604800) / 86400);
                                        $hours = floor(($uptimeSeconds % 86400) / 3600);
                                        $minutes = floor(($uptimeSeconds % 3600) / 60);
                                        $seconds = $uptimeSeconds % 60;
                                        $uptime = '';
                                        if ($weeks > 0) $uptime .= $weeks . 'w';
                                        if ($days > 0) $uptime .= $days . 'd';
                                        if ($hours > 0) $uptime .= $hours . 'h';
                                        if ($minutes > 0) $uptime .= $minutes . 'm';
                                        if ($seconds > 0 || $uptime === '') $uptime .= $seconds . 's';
                                    @endphp
                                    <span class="text-success fw-bold">{{ $uptime }}</span>
                                    <small class="text-muted ms-2">(Live)</small>
                                @elseif($userConnectionLog->duration_seconds)
                                    {{ $userConnectionLog->formatted_duration }}
                                @else
                                    <span class="text-muted">N/A</span>
                                @endif
                            </p>
                        </div>
                        <div class="col-md-6">
                            <strong>Duration:</strong>
                            <p class="mb-0">
                                @if($userConnectionLog->duration_seconds)
                                    {{ $userConnectionLog->formatted_duration }}
                                @else
                                    <span class="text-muted">N/A</span>
                                @endif
                            </p>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-6">
                            <strong>Created At:</strong>
                            <p class="mb-0">{{ $userConnectionLog->created_at->format('M d, Y H:i:s') }}</p>
                        </div>
                    </div>

                    <hr>

                    <div class="row mb-3">
                        <div class="col-md-3">
                            <strong>Bytes In:</strong>
                            <p class="mb-0">
                                @if($userConnectionLog->bytes_in)
                                    {{ number_format($userConnectionLog->bytes_in) }}
                                @else
                                    <span class="text-muted">N/A</span>
                                @endif
                            </p>
                        </div>
                        <div class="col-md-3">
                            <strong>Bytes Out:</strong>
                            <p class="mb-0">
                                @if($userConnectionLog->bytes_out)
                                    {{ number_format($userConnectionLog->bytes_out) }}
                                @else
                                    <span class="text-muted">N/A</span>
                                @endif
                            </p>
                        </div>
                        <div class="col-md-3">
                            <strong>Packets In:</strong>
                            <p class="mb-0">
                                @if($userConnectionLog->packets_in)
                                    {{ number_format($userConnectionLog->packets_in) }}
                                @else
                                    <span class="text-muted">N/A</span>
                                @endif
                            </p>
                        </div>
                        <div class="col-md-3">
                            <strong>Packets Out:</strong>
                            <p class="mb-0">
                                @if($userConnectionLog->packets_out)
                                    {{ number_format($userConnectionLog->packets_out) }}
                                @else
                                    <span class="text-muted">N/A</span>
                                @endif
                            </p>
                        </div>
                    </div>

                    @if($userConnectionLog->raw_data)
                        <hr>
                        <div class="mb-3">
                            <strong>Raw Data:</strong>
                            <pre class="bg-light p-3 rounded"><code>{{ json_encode($userConnectionLog->raw_data, JSON_PRETTY_PRINT) }}</code></pre>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <!-- Connection History Graph -->
        <div class="col-lg-4">
            <div class="custom-card">
                <div class="custom-card-header">
                    <h4 class="mb-0">
                        <i class="fas fa-chart-line me-2"></i>
                        Connection History (Last 30 Days)
                    </h4>
                </div>
                <div class="custom-card-body">
                    <div class="mb-3">
                        <canvas id="connectionHistoryChart" height="300"></canvas>
                    </div>
                </div>
            </div>

            <!-- Bytes In/Out Graph -->
            <div class="custom-card mt-4">
                <div class="custom-card-header">
                    <h4 class="mb-0">
                        <i class="fas fa-chart-bar me-2"></i>
                        Bytes In/Out (Last 30 Days)
                        <small class="text-muted ms-2" id="liveBytesIndicator" style="display: none;">
                            <i class="fas fa-circle text-success" style="font-size: 0.6rem;"></i> Live
                        </small>
                    </h4>
                </div>
                <div class="custom-card-body">
                    <div class="mb-3">
                        <canvas id="bytesChart" height="300"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Data Usage Graph -->
    <div class="row mt-4">
        <div class="col-12">
            <div class="custom-card">
                <div class="custom-card-header">
                    <h4 class="mb-0">
                        <i class="fas fa-chart-area me-2"></i>
                        Data Usage & Connection Duration (Last 30 Days)
                    </h4>
                </div>
                <div class="custom-card-body">
                    <canvas id="dataUsageChart" height="100"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<!-- Chart.js CDN -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const username = '{{ $userConnectionLog->username }}';
    let connectionChart = null;
    let dataUsageChart = null;
    let bytesChart = null;

    // Function to fetch and update graph data
    function updateGraphData() {
        const graphDataUrl = '{{ route("user-connection-logs.graph-data", ":username") }}'.replace(':username', encodeURIComponent(username));
        fetch(graphDataUrl, {
            method: 'GET',
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json',
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success && data.data) {
                updateCharts(data.data);
            }
        })
        .catch(error => {
            console.error('Error fetching graph data:', error);
        });
    }

    // Function to update charts with new data
    function updateCharts(graphData, liveBytes) {
        // Update Connection History Chart
        if (connectionChart) {
            connectionChart.data.labels = graphData.labels || [];
            connectionChart.data.datasets[0].data = graphData.connections || [];
            connectionChart.data.datasets[1].data = graphData.disconnections || [];
            connectionChart.update('none'); // 'none' mode for smoother updates
        }

        // Update Bytes Chart with live MikroTik data only
        if (bytesChart) {
            bytesChart.data.labels = graphData.labels || [];
            
            // Use graphData directly (already contains live MikroTik data, not database)
            // The controller replaces today's data with live MikroTik bytes
            bytesChart.data.datasets[0].data = graphData.dataIn || [];
            bytesChart.data.datasets[1].data = graphData.dataOut || [];
            bytesChart.update('none'); // 'none' mode for smoother updates
        }

        // Update Data Usage Chart
        if (dataUsageChart) {
            dataUsageChart.data.labels = graphData.labels || [];
            
            // Update data - last entry gets live MikroTik data if available
            let dataIn = [...(graphData.dataIn || [])];
            let dataOut = [...(graphData.dataOut || [])];
            
            // If we have live bytes and data exists, update the last (today's) entry
            if (liveBytes && liveBytes.hasLiveData && dataIn.length > 0) {
                const lastIndex = dataIn.length - 1;
                dataIn[lastIndex] = liveBytes.bytesIn || dataIn[lastIndex] || 0;
                dataOut[lastIndex] = liveBytes.bytesOut || dataOut[lastIndex] || 0;
            }
            
            dataUsageChart.data.datasets[0].data = dataIn;
            dataUsageChart.data.datasets[1].data = dataOut;
            dataUsageChart.data.datasets[2].data = graphData.durations || [];
            dataUsageChart.update('none'); // 'none' mode for smoother updates
        }
    }

    // Initialize Connection History Chart
    const connectionCtx = document.getElementById('connectionHistoryChart');
    if (connectionCtx) {
        const initialGraphData = @json($graphData ?? []);
        
        connectionChart = new Chart(connectionCtx, {
            type: 'line',
            data: {
                labels: initialGraphData.labels || [],
                datasets: [
                    {
                        label: 'Connections',
                        data: initialGraphData.connections || [],
                        borderColor: 'rgb(34, 197, 94)',
                        backgroundColor: 'rgba(34, 197, 94, 0.1)',
                        tension: 0.4,
                        fill: true
                    },
                    {
                        label: 'Disconnections',
                        data: initialGraphData.disconnections || [],
                        borderColor: 'rgb(239, 68, 68)',
                        backgroundColor: 'rgba(239, 68, 68, 0.1)',
                        tension: 0.4,
                        fill: true
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: true,
                        position: 'top'
                    },
                    tooltip: {
                        mode: 'index',
                        intersect: false
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            stepSize: 1
                        }
                    }
                },
                animation: {
                    duration: 0 // Disable animation for live updates
                }
            }
        });
    }

    // Initialize Bytes In/Out Chart
    const bytesCtx = document.getElementById('bytesChart');
    if (bytesCtx) {
        const initialGraphData = @json($graphData ?? []);
        
        bytesChart = new Chart(bytesCtx, {
            type: 'bar',
            data: {
                labels: initialGraphData.labels || [],
                datasets: [
                    {
                        label: 'Bytes In (MB)',
                        data: initialGraphData.dataIn || [],
                        backgroundColor: 'rgba(59, 130, 246, 0.6)',
                        borderColor: 'rgba(59, 130, 246, 1)',
                        borderWidth: 1
                    },
                    {
                        label: 'Bytes Out (MB)',
                        data: initialGraphData.dataOut || [],
                        backgroundColor: 'rgba(251, 191, 36, 0.6)',
                        borderColor: 'rgba(251, 191, 36, 1)',
                        borderWidth: 1
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: true,
                        position: 'top'
                    },
                    tooltip: {
                        mode: 'index',
                        intersect: false,
                        callbacks: {
                            label: function(context) {
                                return context.dataset.label + ': ' + context.parsed.y.toFixed(2) + ' MB';
                            }
                        }
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        title: {
                            display: true,
                            text: 'Data (MB)'
                        }
                    }
                },
                animation: {
                    duration: 0 // Disable animation for live updates
                }
            }
        });
    }

    // Initialize Data Usage Chart
    const dataUsageCtx = document.getElementById('dataUsageChart');
    if (dataUsageCtx) {
        const initialGraphData = @json($graphData ?? []);
        
        dataUsageChart = new Chart(dataUsageCtx, {
            type: 'bar',
            data: {
                labels: initialGraphData.labels || [],
                datasets: [
                    {
                        label: 'Data In (MB)',
                        data: initialGraphData.dataIn || [],
                        backgroundColor: 'rgba(59, 130, 246, 0.6)',
                        borderColor: 'rgba(59, 130, 246, 1)',
                        borderWidth: 1
                    },
                    {
                        label: 'Data Out (MB)',
                        data: initialGraphData.dataOut || [],
                        backgroundColor: 'rgba(251, 191, 36, 0.6)',
                        borderColor: 'rgba(251, 191, 36, 1)',
                        borderWidth: 1
                    },
                    {
                        label: 'Duration (Hours)',
                        data: initialGraphData.durations || [],
                        type: 'line',
                        borderColor: 'rgb(168, 85, 247)',
                        backgroundColor: 'rgba(168, 85, 247, 0.1)',
                        borderWidth: 2,
                        fill: false,
                        yAxisID: 'y1'
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: true,
                        position: 'top'
                    },
                    tooltip: {
                        mode: 'index',
                        intersect: false
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        position: 'left',
                        title: {
                            display: true,
                            text: 'Data (MB)'
                        }
                    },
                    y1: {
                        beginAtZero: true,
                        position: 'right',
                        title: {
                            display: true,
                            text: 'Duration (Hours)'
                        },
                        grid: {
                            drawOnChartArea: false
                        }
                    }
                },
                animation: {
                    duration: 0 // Disable animation for live updates
                }
            }
        });
    }

    // Update graphs every 30 seconds
    setInterval(updateGraphData, 30000);
    
    // Initial update after 5 seconds (to show it's live)
    setTimeout(updateGraphData, 5000);
});
</script>

@if(isset($isStillActive) && $isStillActive && isset($liveSessionData) && $liveSessionData && isset($liveSessionData['uptime']))
<script>
document.addEventListener('DOMContentLoaded', function() {
    const uptimeValueEl = document.getElementById('uptimeValue');
    const mikrotikUptimeInput = document.getElementById('mikrotikUptime');
    
    if (!uptimeValueEl || !mikrotikUptimeInput) return;
    
    const initialUptimeStr = mikrotikUptimeInput.value;
    if (!initialUptimeStr) return;
    
    // Parse initial uptime from MikroTik format (e.g., "1w5d16h15s")
    function parseMikrotikUptime(uptimeStr) {
        let seconds = 0;
        const weekMatch = uptimeStr.match(/(\d+)w/);
        const dayMatch = uptimeStr.match(/(\d+)d/);
        const hourMatch = uptimeStr.match(/(\d+)h/);
        const minMatch = uptimeStr.match(/(\d+)m/);
        const secMatch = uptimeStr.match(/(\d+)s/);
        
        if (weekMatch) seconds += parseInt(weekMatch[1]) * 604800; // 7 days
        if (dayMatch) seconds += parseInt(dayMatch[1]) * 86400;
        if (hourMatch) seconds += parseInt(hourMatch[1]) * 3600;
        if (minMatch) seconds += parseInt(minMatch[1]) * 60;
        if (secMatch) seconds += parseInt(secMatch[1]);
        
        return seconds;
    }
    
    // Format back to MikroTik format
    function formatMikrotikUptime(totalSeconds) {
        if (totalSeconds < 0) return '0s';
        
        const weeks = Math.floor(totalSeconds / 604800);
        const days = Math.floor((totalSeconds % 604800) / 86400);
        const hours = Math.floor((totalSeconds % 86400) / 3600);
        const minutes = Math.floor((totalSeconds % 3600) / 60);
        const secs = totalSeconds % 60;
        
        let uptimeStr = '';
        if (weeks > 0) uptimeStr += `${weeks}w`;
        if (days > 0) uptimeStr += `${days}d`;
        if (hours > 0) uptimeStr += `${hours}h`;
        if (minutes > 0) uptimeStr += `${minutes}m`;
        if (secs > 0 || uptimeStr === '') uptimeStr += `${secs}s`;
        
        return uptimeStr;
    }
    
    let baseSeconds = parseMikrotikUptime(initialUptimeStr);
    const startTime = Date.now();
    
    function updateUptime() {
        // Calculate elapsed time since page load
        const elapsedSeconds = Math.floor((Date.now() - startTime) / 1000);
        const currentUptimeSeconds = baseSeconds + elapsedSeconds;
        
        const uptimeText = formatMikrotikUptime(currentUptimeSeconds);
        uptimeValueEl.textContent = uptimeText;
    }
    
    // Update immediately
    updateUptime();
    
    // Update every second
    setInterval(updateUptime, 1000);
});
</script>
@elseif(isset($isStillActive) && $isStillActive && $userConnectionLog->action == 'connect' && $userConnectionLog->connected_at)
<script>
document.addEventListener('DOMContentLoaded', function() {
    const uptimeDisplay = document.getElementById('uptimeDisplay');
    if (!uptimeDisplay) return;
    
    const connectedAtStr = '{{ $userConnectionLog->connected_at->toISOString() }}';
    if (!connectedAtStr) return;
    
    const connectedAt = new Date(connectedAtStr);
    
    // Validate date
    if (isNaN(connectedAt.getTime())) {
        console.error('Invalid connected_at date:', connectedAtStr);
        return;
    }
    
    // Format to MikroTik format
    function formatMikrotikUptime(totalSeconds) {
        if (totalSeconds < 0) return '0s';
        
        const weeks = Math.floor(totalSeconds / 604800);
        const days = Math.floor((totalSeconds % 604800) / 86400);
        const hours = Math.floor((totalSeconds % 86400) / 3600);
        const minutes = Math.floor((totalSeconds % 3600) / 60);
        const secs = totalSeconds % 60;
        
        let uptimeStr = '';
        if (weeks > 0) uptimeStr += `${weeks}w`;
        if (days > 0) uptimeStr += `${days}d`;
        if (hours > 0) uptimeStr += `${hours}h`;
        if (minutes > 0) uptimeStr += `${minutes}m`;
        if (secs > 0 || uptimeStr === '') uptimeStr += `${secs}s`;
        
        return uptimeStr;
    }
    
    function updateUptime() {
        const now = new Date();
        const diffSeconds = Math.floor((now - connectedAt) / 1000);
        
        if (diffSeconds < 0) {
            uptimeDisplay.innerHTML = '<span class="text-muted">N/A</span>';
            return;
        }
        
        const uptimeText = formatMikrotikUptime(diffSeconds);
        uptimeDisplay.innerHTML = `<span class="text-success fw-bold">${uptimeText}</span> <small class="text-muted ms-2">(Live)</small>`;
    }
    
    // Update immediately
    updateUptime();
    
    // Update every second
    setInterval(updateUptime, 1000);
});
</script>
@endif
@endsection