@extends('layouts.app')

@section('title', 'Dashboard chi tiết')
@section('page_title', 'Dashboard chi tiết')

@section('breadcrumb')
    <li class="breadcrumb-item active">Chi tiết</li>
@endsection

@push('styles')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css">
    <style>
        /* === Select2 — match Bootstrap 4 form-control === */
        .select2-container--default .select2-selection--single {
            height: calc(2.25rem + 2px);
            border: 1px solid #ced4da;
            border-radius: 0.25rem;
            background-color: #fff;
            padding: 0;
        }
        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 1.5;
            padding: 0.375rem 2rem 0.375rem 0.75rem;
            color: #495057;
        }
        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 100%; top: 0; right: 6px;
        }
        .select2-container--default.select2-container--focus .select2-selection--single,
        .select2-container--default.select2-container--open .select2-selection--single {
            border-color: #80bdff;
            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
            outline: 0;
        }
        .select2-container--default .select2-results__option--highlighted[aria-selected] {
            background-color: #007bff;
        }
        .select2-dropdown { border-color: #ced4da; }

        /* === Day card === */
        .day-card {
            border-radius: 0.75rem;
            border: 1px solid #eef0f4;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
            overflow: hidden;
            margin-bottom: 1.5rem;
        }
        .day-card-header {
            display: flex; align-items: center; justify-content: space-between;
            padding: 1rem 1.5rem;
            background: linear-gradient(to right, #f7faff 0%, #fff 100%);
            border-bottom: 1px solid #eef0f4;
            cursor: pointer;
            user-select: none;
            transition: background 0.15s ease;
        }
        .day-card-header:hover { background: linear-gradient(to right, #eef5ff 0%, #fafcff 100%); }
        .day-card-header .day-title {
            display: flex; align-items: center; gap: 0.75rem;
            font-size: 1.1rem;
            font-weight: 600;
            color: #1f2d3d;
            margin: 0;
        }
        .day-card-header .day-calendar {
            width: 36px; height: 36px;
            background: linear-gradient(135deg, #4a90e2, #357abd);
            color: #fff;
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-size: 1rem;
        }
        .day-card-header .day-of-week {
            background: #eef3fa;
            color: #1a3a5e;
            padding: 0.25rem 0.65rem;
            border-radius: 999px;
            font-size: 0.8rem;
            font-weight: 600;
            margin-left: 0.5rem;
            text-transform: capitalize;
        }
        .day-card-header .fa-chevron-down {
            color: #6c757d;
            transition: transform 0.2s;
        }
        .day-card-header.collapsed .fa-chevron-down {
            transform: rotate(-90deg);
        }

        /* === Table === */
        .metric-cell {
            text-align: center !important;
            vertical-align: middle !important;
            font-weight: 600;
            min-width: 64px;
            font-size: 0.85rem;
        }
        .metric-cell.bg-success { color: #fff; }
        .metric-cell.bg-warning { color: #1f2d3d; }
        .metric-cell.bg-danger  { color: #fff; }
        .metric-cell.bg-empty {
            color: #d0d5db;
            background-color: #fafbfc;
            font-weight: 400;
        }
        .metric-label {
            font-weight: 600;
            font-size: 0.82rem;
            background-color: #f4f6f9;
            text-align: left !important;
            padding-left: 1.25rem !important;
            vertical-align: middle !important;
            width: 84px;
            color: #495057;
            letter-spacing: 0.03em;
        }
        td.ip-cell {
            background-color: #eef3fa !important;
            border-left: 4px solid #4a90e2 !important;
            color: #1a3a5e;
            font-size: 0.98em;
            padding-left: 1rem !important;
            font-weight: 600;
        }
        tbody tr.ip-block-alt > td.metric-label { background-color: #eceff3; }
        tbody tr.ip-block-alt > td.ip-cell { background-color: #e3ebf4 !important; }
        tbody tr.ip-block-alt > td.metric-cell.bg-empty { background-color: #f3f4f6; }
        tr.ip-group-end > td { border-bottom: 2px solid #cfd4da !important; }

        thead th {
            background-color: #f8fafc !important;
            color: #495057;
            font-size: 0.78rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            border-bottom: 2px solid #dee2e6 !important;
        }

        /* Current time column highlight (chỉ áp dụng cho ngày hôm nay) */
        thead th.current-slot {
            background: linear-gradient(180deg, #4a90e2 0%, #357abd 100%) !important;
            color: #fff !important;
            position: relative;
        }
        thead th.current-slot::after {
            content: '';
            position: absolute;
            bottom: -2px; left: 50%;
            transform: translateX(-50%);
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-top: 6px solid #357abd;
        }
        td.current-slot-col {
            box-shadow: inset 2px 0 0 rgba(74, 144, 226, 0.3),
                        inset -2px 0 0 rgba(74, 144, 226, 0.3);
        }

        /* Custom thin scrollbar cho bảng */
        .day-card .table-responsive {
            scrollbar-width: thin;
            scrollbar-color: #c1c8d1 #f1f3f5;
        }
        .day-card .table-responsive::-webkit-scrollbar {
            height: 8px; width: 8px;
        }
        .day-card .table-responsive::-webkit-scrollbar-track {
            background: #f1f3f5;
            border-radius: 4px;
        }
        .day-card .table-responsive::-webkit-scrollbar-thumb {
            background: #c1c8d1;
            border-radius: 4px;
        }
        .day-card .table-responsive::-webkit-scrollbar-thumb:hover {
            background: #a0a8b2;
        }

        /* === Chart view === */
        .chart-server-title {
            display: flex; align-items: center; gap: 0.75rem;
            font-weight: 600;
            color: #1f2d3d;
            margin-bottom: 0.75rem;
            padding: 0.5rem 0;
        }
        .chart-server-icon {
            width: 32px; height: 32px;
            background: linear-gradient(135deg, #4a90e2, #357abd);
            color: #fff;
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-size: 0.9rem;
        }
        .chart-wrapper {
            position: relative;
            height: 280px;
        }
    </style>
@endpush

@section('content')
    <div class="card card-outline card-primary">
        <div class="card-header">
            <h3 class="card-title">Bộ lọc</h3>
        </div>
        <form method="GET" action="{{ route('details') }}" id="filter-form" novalidate>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-4 col-sm-6 form-group mb-0">
                        <label for="domain_id">Domain <span class="text-danger">*</span></label>
                        <select name="domain_id" id="domain_id" required
                                class="form-control @error('domain_id') is-invalid @enderror">
                            <option value="">-- Chọn domain --</option>
                            @foreach ($domains as $d)
                                <option value="{{ $d->id }}"
                                        {{ (string) $domainId === (string) $d->id ? 'selected' : '' }}>
                                    {{ $d->name }}
                                </option>
                            @endforeach
                        </select>
                        @error('domain_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>
                </div>
            </div>
            <div class="card-footer">
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-search"></i> Xem báo cáo
                </button>
                <a href="{{ route('details') }}" class="btn btn-default">
                    <i class="fas fa-redo"></i> Đặt lại
                </a>
                <small class="text-muted ml-3">
                    Thông số &lt; 60 <span class="badge badge-success">xanh</span>,
                    60 – 79 <span class="badge badge-warning">vàng</span>,
                    &ge; 80 <span class="badge badge-danger">đỏ</span>.
                </small>
            </div>
        </form>
    </div>

    @if ($hasFilter)
        @if ($servers->isEmpty())
            <div class="alert alert-info">
                Domain này chưa có IP nào.
                <a href="{{ route('servers.create') }}">Thêm IP</a> để bắt đầu giám sát.
            </div>
        @elseif (empty($days))
            <div class="alert alert-warning">
                Domain này chưa có dữ liệu giám sát nào.
            </div>
        @else
            @php
                $metricRows = [
                    ['label' => 'RAM',  'field' => 'ram_usage_pct'],
                    ['label' => 'CPU',  'field' => 'cpu_usage_pct'],
                    ['label' => 'DISK', 'field' => 'disk_usage_pct'],
                ];

                $displayTz = config('app.display_timezone');
                $now = \Carbon\Carbon::now($displayTz);

                // Build dataset cho Chart.js — chỉ làm 1 lần ở PHP side, JS chỉ render.
                $chartData = [];
                foreach ($days as $day) {
                    $dayItem = [
                        'dateKey' => $day['date']->format('Ymd'),
                        'labels' => collect($day['slots'])->map(fn ($s) => $s->format('H:i'))->all(),
                        'servers' => [],
                    ];
                    foreach ($servers as $server) {
                        $ram = $cpu = $disk = [];
                        foreach ($day['slots'] as $slot) {
                            $key = $server->id.'|'.$slot->format('Y-m-d H:i:s');
                            $metric = $day['metrics']->get($key);
                            $ram[] = $metric !== null ? $metric['ram_usage_pct'] : null;
                            $cpu[] = $metric !== null ? $metric['cpu_usage_pct'] : null;
                            $disk[] = $metric !== null ? $metric['disk_usage_pct'] : null;
                        }
                        $dayItem['servers'][] = [
                            'id' => $server->id,
                            'ram' => $ram,
                            'cpu' => $cpu,
                            'disk' => $disk,
                        ];
                    }
                    $chartData[] = $dayItem;
                }
            @endphp

            <div class="d-flex justify-content-end mb-2">
                <div class="btn-group btn-group-sm" role="group" aria-label="View mode">
                    <button type="button" id="view-table-btn" class="btn btn-primary">
                        <i class="fas fa-table"></i> Bảng
                    </button>
                    <button type="button" id="view-chart-btn" class="btn btn-outline-primary">
                        <i class="fas fa-chart-line"></i> Biểu đồ
                    </button>
                </div>
            </div>

            @foreach ($days as $day)
                @php
                    $date = $day['date'];
                    $slots = $day['slots'];
                    $metrics = $day['metrics'];
                    $collapseId = 'day-'.$date->format('Ymd');
                    $currentSlotIndex = $now->isSameDay($date)
                        ? $now->hour * 2 + ($now->minute >= 30 ? 1 : 0)
                        : -1;
                @endphp

                <div class="day-card">
                    <div class="day-card-header" data-toggle="collapse" data-target="#{{ $collapseId }}" aria-expanded="true">
                        <h3 class="day-title">
                            <span class="day-calendar"><i class="far fa-calendar-alt"></i></span>
                            {{ $date->format('d/m/Y') }}
                            <span class="day-of-week">{{ $date->isoFormat('dddd') }}</span>
                        </h3>
                        <i class="fas fa-chevron-down"></i>
                    </div>
                    <div id="{{ $collapseId }}" class="collapse show">
                        <div class="table-responsive view-table">
                            <table class="table table-bordered table-sm mb-0">
                                <thead>
                                    <tr>
                                        <th class="align-middle" style="min-width: 160px">IP</th>
                                        <th class="align-middle" style="width: 84px; padding-left: 1.25rem;">Chỉ số</th>
                                        @foreach ($slots as $slotIdx => $slot)
                                            <th class="text-center align-middle {{ $slotIdx === $currentSlotIndex ? 'current-slot' : '' }}">
                                                {{ $slot->format('H:i') }}
                                            </th>
                                        @endforeach
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($servers as $server)
                                        @foreach ($metricRows as $i => $row)
                                            <tr @class([
                                                'ip-group-end' => $i === count($metricRows) - 1,
                                                'ip-block-alt' => $loop->parent->iteration % 2 === 0,
                                            ])>
                                                @if ($i === 0)
                                                    <td rowspan="3" class="align-middle ip-cell">
                                                        {{ $server->ip_address }}
                                                    </td>
                                                @endif
                                                <td class="metric-label text-center align-middle">{{ $row['label'] }}</td>
                                                @foreach ($slots as $slotIdx => $slot)
                                                    @php
                                                        $key = $server->id.'|'.$slot->format('Y-m-d H:i:s');
                                                        $metric = $metrics->get($key);
                                                        $value = $metric !== null ? $metric[$row['field']] : null;

                                                        $color = 'bg-empty';
                                                        if ($value !== null) {
                                                            $color = $value < 60 ? 'bg-success'
                                                                : ($value < 80 ? 'bg-warning' : 'bg-danger');
                                                        }
                                                    @endphp
                                                    <td class="metric-cell {{ $color }} align-middle {{ $slotIdx === $currentSlotIndex ? 'current-slot-col' : '' }}">
                                                        {{ $value !== null ? $value.'%' : '—' }}
                                                    </td>
                                                @endforeach
                                            </tr>
                                        @endforeach
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        <div class="view-chart p-3" style="display: none;">
                            <div class="row">
                                @foreach ($servers as $server)
                                    <div class="col-12 mb-4">
                                        <div class="chart-server-title">
                                            <span class="chart-server-icon"><i class="fas fa-server"></i></span>
                                            {{ $server->ip_address }}
                                        </div>
                                        <div class="chart-wrapper">
                                            <canvas id="chart-{{ $date->format('Ymd') }}-{{ $server->id }}"></canvas>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        @endif
    @endif
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.js"></script>
    @if ($hasFilter && ! empty($days ?? []))
        <script>
            const chartData = @json($chartData ?? []);
        </script>
    @endif
    <script>
        $(function () {
            $('#domain_id').select2({
                placeholder: '-- Chọn domain --',
                width: '100%',
            });

            // Client-side validation
            $('#filter-form').on('submit', function (e) {
                var $form = $(this);

                $form.find('.is-invalid').removeClass('is-invalid');
                $form.find('.invalid-feedback').remove();

                function showError($input, message) {
                    $input.addClass('is-invalid');
                    $input.after('<div class="invalid-feedback">' + message + '</div>');
                }

                var domainId = $('#domain_id').val();
                if (!domainId) showError($('#domain_id'), 'Vui lòng chọn domain.');

                if ($form.find('.is-invalid').length > 0) {
                    e.preventDefault();
                }
            });

            $('#filter-form').on('change input', '.form-control', function () {
                $(this).removeClass('is-invalid');
                $(this).siblings('.invalid-feedback').remove();
            });

            // Toggle chevron khi collapse/expand
            $('.day-card-header').on('click', function () {
                $(this).toggleClass('collapsed');
            });

            // ==== Toggle Bảng / Biểu đồ ====
            // Nhiều ngày × nhiều server → khởi tạo hết Chart.js cùng lúc sẽ đơ trình duyệt.
            // Dùng IntersectionObserver: chỉ new Chart() cho canvas đang/sắp lọt vào khung nhìn,
            // các canvas còn lại chỉ khởi tạo khi user cuộn tới.
            var chartsInitialized = false;
            var chartObserver = null;

            function findServerChartData(dateKey, serverId) {
                var day = chartData.find(function (d) { return d.dateKey === dateKey; });
                if (!day) return null;
                var server = day.servers.find(function (s) { return s.id === serverId; });
                if (!server) return null;
                return { labels: day.labels, server: server };
            }

            function initChartCanvas(canvas) {
                var parts = canvas.id.split('-'); // "chart", dateKey, serverId
                var found = findServerChartData(parts[1], parseInt(parts[2], 10));
                if (!found) return;

                new Chart(canvas, {
                    type: 'line',
                    data: {
                        labels: found.labels,
                        datasets: [
                            {
                                label: 'RAM',  data: found.server.ram,
                                borderColor: '#e74c3c', backgroundColor: 'rgba(231,76,60,0.08)',
                                borderWidth: 2, tension: 0.3, spanGaps: true, pointRadius: 2,
                            },
                            {
                                label: 'CPU',  data: found.server.cpu,
                                borderColor: '#3498db', backgroundColor: 'rgba(52,152,219,0.08)',
                                borderWidth: 2, tension: 0.3, spanGaps: true, pointRadius: 2,
                            },
                            {
                                label: 'DISK', data: found.server.disk,
                                borderColor: '#27ae60', backgroundColor: 'rgba(39,174,96,0.08)',
                                borderWidth: 2, tension: 0.3, spanGaps: true, pointRadius: 2,
                            }
                        ]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        interaction: { mode: 'index', intersect: false },
                        plugins: {
                            legend: { position: 'top' },
                            tooltip: {
                                callbacks: {
                                    label: function (ctx) {
                                        var v = ctx.parsed.y;
                                        return ctx.dataset.label + ': ' + (v === null ? '—' : v + '%');
                                    }
                                }
                            }
                        },
                        scales: {
                            y: {
                                min: 0, max: 100,
                                ticks: { stepSize: 10, callback: function (v) { return v + '%'; } },
                                title: { display: true, text: 'Sử dụng (%)' }
                            },
                            x: {
                                ticks: { autoSkip: false, maxRotation: 45, minRotation: 0, font: { size: 10 } }
                            }
                        }
                    }
                });
            }

            function renderCharts() {
                if (chartsInitialized || typeof chartData === 'undefined') return;
                chartsInitialized = true;

                var canvases = document.querySelectorAll('.view-chart canvas');

                if (typeof IntersectionObserver === 'undefined') {
                    // Fallback cho browser cũ không hỗ trợ — khởi tạo hết như trước.
                    canvases.forEach(initChartCanvas);
                    return;
                }

                chartObserver = new IntersectionObserver(function (entries) {
                    entries.forEach(function (entry) {
                        if (!entry.isIntersecting) return;
                        chartObserver.unobserve(entry.target);
                        initChartCanvas(entry.target);
                    });
                }, { rootMargin: '300px 0px' });

                canvases.forEach(function (canvas) {
                    chartObserver.observe(canvas);
                });
            }

            var VIEW_STORAGE_KEY = 'dashboard-view-mode';

            function showChartView() {
                $('.view-table').hide();
                $('.view-chart').show();
                $('#view-table-btn').removeClass('btn-primary').addClass('btn-outline-primary');
                $('#view-chart-btn').removeClass('btn-outline-primary').addClass('btn-primary');
                renderCharts();
            }

            function showTableView() {
                $('.view-chart').hide();
                $('.view-table').show();
                $('#view-chart-btn').removeClass('btn-primary').addClass('btn-outline-primary');
                $('#view-table-btn').removeClass('btn-outline-primary').addClass('btn-primary');
            }

            $('#view-chart-btn').on('click', function () {
                localStorage.setItem(VIEW_STORAGE_KEY, 'chart');
                showChartView();
            });

            $('#view-table-btn').on('click', function () {
                localStorage.setItem(VIEW_STORAGE_KEY, 'table');
                showTableView();
            });

            // Khôi phục tab user đã chọn lần trước (nếu nút tồn tại — tức có data)
            if ($('#view-chart-btn').length && localStorage.getItem(VIEW_STORAGE_KEY) === 'chart') {
                showChartView();
            }
        });
    </script>
@endpush