<div>
    <x-slot:title>
        {{ data_get_str($server, 'name')->limit(10) }} > Metrics | Coolify
    </x-slot>
    <livewire:server.navbar :server="$server" />
    <div class="flex flex-col h-full gap-8 sm:flex-row">
        <x-server.sidebar :server="$server" activeMenu="metrics" />
        <div class="w-full">
            <div class="flex items-center gap-2">
                <h2>Metrics</h2>
                @if ($server->isMetricsEnabled())
                    <x-forms.button canGate="update" :canResource="$server" wire:click='toggleMetrics'>
                        Disable Metrics
                    </x-forms.button>
                @elseif ($server->isSentinelEnabled())
                    <x-forms.button canGate="update" :canResource="$server" isHighlighted wire:click='toggleMetrics'>
                        Enable Metrics
                    </x-forms.button>
                @endif
            </div>
            <div class="pb-4">Basic metrics for your server.</div>
            @if ($server->isMetricsEnabled())
                <div @if ($poll) wire:poll.5000ms='pollData' @endif x-init="$wire.loadData()">
                    <x-forms.select label="Interval" wire:change="setInterval" id="interval">
                        <option value="5">5 minutes (live)</option>
                        <option value="10">10 minutes (live)</option>
                        <option value="30">30 minutes</option>
                        <option value="60">1 hour</option>
                        <option value="720">12 hours</option>
                        <option value="10080">1 week</option>
                        <option value="43200">30 days</option>
                    </x-forms.select>
                    <h4 class="pt-4">CPU Usage</h4>
                    <div wire:ignore id="{!! $chartId !!}-cpu"></div>

                    <script>
                        (function() {
                            checkTheme();
                            const optionsServerCpu = {
                                stroke: {
                                    curve: 'straight',
                                    width: 2,
                                },
                                chart: {
                                    height: '150px',
                                    id: '{!! $chartId !!}-cpu',
                                    type: 'area',
                                    toolbar: {
                                        show: true,
                                        tools: {
                                            download: false,
                                            selection: false,
                                            zoom: true,
                                            zoomin: false,
                                            zoomout: false,
                                            pan: false,
                                            reset: true
                                        },
                                    },
                                    animations: {
                                        enabled: true,
                                    },
                                },
                                fill: {
                                    type: 'gradient',
                                },
                                dataLabels: {
                                    enabled: false,
                                    offsetY: -10,
                                    style: {
                                        colors: ['#FCD452'],
                                    },
                                    background: {
                                        enabled: false,
                                    }
                                },
                                 grid: {
                                     show: true,
                                     borderColor: '',
                                 },
                                 colors: [cpuColor],
                                 xaxis: {
                                     type: 'datetime',
                                 },
                                 series: [{
                                     name: 'CPU %',
                                    data: []
                                }],
                                noData: {
                                    text: 'Loading...',
                                    style: {
                                        color: textColor,
                                    }
                                },
                                 tooltip: {
                                     enabled: true,
                                     marker: {
                                         show: false,
                                     },
                                     custom: function({ series, seriesIndex, dataPointIndex, w }) {
                                         const value = series[seriesIndex][dataPointIndex];
                                         const timestamp = w.globals.seriesX[seriesIndex][dataPointIndex];
                                         const date = new Date(timestamp);
                                         const timeString = String(date.getUTCHours()).padStart(2, '0') + ':' +
                                             String(date.getUTCMinutes()).padStart(2, '0') + ':' +
                                             String(date.getUTCSeconds()).padStart(2, '0') + ', ' +
                                             date.getUTCFullYear() + '-' +
                                             String(date.getUTCMonth() + 1).padStart(2, '0') + '-' +
                                             String(date.getUTCDate()).padStart(2, '0');
                                         return '<div class="apexcharts-tooltip-custom">' +
                                             '<div class="apexcharts-tooltip-custom-value">CPU: <span class="apexcharts-tooltip-value-bold">' + value + '%</span></div>' +
                                             '<div class="apexcharts-tooltip-custom-title">' + timeString + '</div>' +
                                             '</div>';
                                     }
                                 },
                                legend: {
                                    show: false
                                }
                            }
                            const serverCpuChart = new ApexCharts(document.getElementById(`{!! $chartId !!}-cpu`),
                                optionsServerCpu);
                            serverCpuChart.render();
                            Livewire.on('refreshChartData-{!! $chartId !!}-cpu', (chartData) => {
                                checkTheme();
                                 serverCpuChart.updateOptions({
                                         series: [{
                                             data: chartData[0].seriesData,
                                         }],
                                         colors: [cpuColor],
                                        xaxis: {
                                            type: 'datetime',
                                            labels: {
                                                show: true,
                                                style: {
                                                    colors: textColor,
                                                }
                                            }
                                        },
                                         yaxis: {
                                             show: true,
                                             labels: {
                                                 show: true,
                                                 style: {
                                                     colors: textColor,
                                                 },
                                                 formatter: function(value) {
                                                     return Math.round(value) + ' %';
                                                 }
                                             }
                                         },
                                        noData: {
                                            text: 'Loading...',
                                            style: {
                                                color: textColor,
                                            }
                                        }
                                    });
                                });
                        })();
                    </script>

                    <div>
                        <h4>Memory Usage</h4>
                        <div wire:ignore id="{!! $chartId !!}-memory"></div>

                        <script>
                            (function() {
                                checkTheme();
                                const optionsServerMemory = {
                                    stroke: {
                                        curve: 'straight',
                                        width: 2,
                                    },
                                    chart: {
                                        height: '150px',
                                        id: '{!! $chartId !!}-memory',
                                        type: 'area',
                                        toolbar: {
                                            show: true,
                                            tools: {
                                                download: false,
                                                selection: false,
                                                zoom: true,
                                                zoomin: false,
                                                zoomout: false,
                                                pan: false,
                                                reset: true
                                            },
                                        },
                                        animations: {
                                            enabled: true,
                                        },
                                    },
                                    fill: {
                                        type: 'gradient',
                                    },
                                    dataLabels: {
                                        enabled: false,
                                        offsetY: -10,
                                        style: {
                                            colors: ['#FCD452'],
                                        },
                                        background: {
                                            enabled: false,
                                        }
                                    },
                                     grid: {
                                         show: true,
                                         borderColor: '',
                                     },
                                     colors: [ramColor],
                                     xaxis: {
                                         type: 'datetime',
                                         labels: {
                                             show: true,
                                            style: {
                                                colors: textColor,
                                            }
                                        }
                                    },
                                    series: [{
                                        name: "Memory (%)",
                                        data: []
                                    }],
                                    noData: {
                                        text: 'Loading...',
                                        style: {
                                            color: textColor,
                                        }
                                    },
                                     tooltip: {
                                         enabled: true,
                                         marker: {
                                             show: false,
                                         },
                                         custom: function({ series, seriesIndex, dataPointIndex, w }) {
                                             const value = series[seriesIndex][dataPointIndex];
                                             const timestamp = w.globals.seriesX[seriesIndex][dataPointIndex];
                                             const date = new Date(timestamp);
                                             const timeString = String(date.getUTCHours()).padStart(2, '0') + ':' +
                                                 String(date.getUTCMinutes()).padStart(2, '0') + ':' +
                                                 String(date.getUTCSeconds()).padStart(2, '0') + ', ' +
                                                 date.getUTCFullYear() + '-' +
                                                 String(date.getUTCMonth() + 1).padStart(2, '0') + '-' +
                                                 String(date.getUTCDate()).padStart(2, '0');
                                             return '<div class="apexcharts-tooltip-custom">' +
                                                 '<div class="apexcharts-tooltip-custom-value">Memory: <span class="apexcharts-tooltip-value-bold">' + value + '%</span></div>' +
                                                 '<div class="apexcharts-tooltip-custom-title">' + timeString + '</div>' +
                                                 '</div>';
                                         }
                                     },
                                    legend: {
                                        show: false
                                    }
                                }
                                const serverMemoryChart = new ApexCharts(document.getElementById(`{!! $chartId !!}-memory`),
                                    optionsServerMemory);
                                serverMemoryChart.render();
                                Livewire.on('refreshChartData-{!! $chartId !!}-memory', (chartData) => {
                                    checkTheme();
                                     serverMemoryChart.updateOptions({
                                             series: [{
                                                 data: chartData[0].seriesData,
                                             }],
                                             colors: [ramColor],
                                            xaxis: {
                                                type: 'datetime',
                                                labels: {
                                                    show: true,
                                                    style: {
                                                        colors: textColor,
                                                    }
                                                }
                                            },
                                             yaxis: {
                                                 min: 0,
                                                 show: true,
                                                 labels: {
                                                     show: true,
                                                     style: {
                                                         colors: textColor,
                                                     },
                                                      formatter: function(value) {
                                                          return Math.round(value) + ' %';
                                                      }
                                                 }
                                             },
                                            noData: {
                                                text: 'Loading...',
                                                style: {
                                                    color: textColor,
                                                }
                                            }
                                        });
                                    });
                            })();
                        </script>

                    </div>
                </div>
            @else
                @if ($server->isSentinelEnabled())
                    <x-callout type="info" title="Metrics Disabled">
                        Metrics are disabled for this server. Click "Enable Metrics" above to start collecting metrics.
                    </x-callout>
                @else
                    <x-callout type="info" title="Sentinel Required">
                        Metrics require Sentinel to be enabled.
                        Please <a class="underline font-semibold" href="{{ route('server.sentinel', ['server_uuid' => $server->uuid]) }}" {{ wireNavigate() }}>enable Sentinel</a> first.
                    </x-callout>
                @endif
            @endif
        </div>
    </div>
</div>
