@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => 'Dashboard'])
    <div class="container-fluid py-4">
        <!-- HEADER -->
        <div class="row">
            <div class="col-12">
                <div class="card mb-4 bg-gradient-primary shadow-lg">
                    <div class="card-body p-4">
                        <div class="row">
                            <div class="col-lg-8 col-md-10 d-flex flex-column justify-content-center">
                                <h3 class="text-white mb-2">Selamat Datang Kembali, {{ session('username') ?? 'Admin' }}! 👋
                                </h3>
                                <p class="text-white opacity-8 mb-0">Berikut adalah ringkasan aktivitas di platform Anda
                                    hari ini. Pantau aktivitas pengguna, metrik konten, dan log sistem dari satu tampilan
                                    terpadu.</p>
                            </div>
                            <div class="col-lg-4 col-md-2 text-end d-none d-md-flex justify-content-end align-items-center">
                                <i class="ni ni-spaceship text-white opacity-4" style="font-size: 4rem;"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- TOP METRICS ROW -->
        <div class="row">
            <!-- Pages -->
            <div class="col-xl-4 col-sm-6 mb-xl-0 mb-4">
                <div class="card shadow-sm border-0">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-8">
                                <div class="numbers">
                                    <p class="text-sm mb-0 text-uppercase font-weight-bold text-muted">Halaman Master Pages
                                    </p>
                                    <h5 class="font-weight-bolder mb-0 text-dark">
                                        {{ number_format($totalPages ?? 0) }}
                                    </h5>
                                    <p class="mb-0 text-sm mt-1">
                                        <span
                                            class="text-success text-sm font-weight-bolder">{{ number_format($activePages ?? 0) }}</span>
                                        <span class="text-muted">Konten Aktif</span>
                                    </p>
                                </div>
                            </div>
                            <div class="col-4 text-end">
                                <div class="icon icon-shape bg-gradient-success shadow-success text-center rounded-circle">
                                    <i class="ni ni-collection text-lg opacity-10" aria-hidden="true"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Contacts -->
            <div class="col-xl-4 col-sm-6 mb-xl-0 mb-4">
                <div class="card shadow-sm border-0">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-8">
                                <div class="numbers">
                                    <p class="text-sm mb-0 text-uppercase font-weight-bold text-muted">Formulir Kontak</p>
                                    <h5 class="font-weight-bolder mb-0 text-dark">
                                        {{ number_format($totalContacts ?? 0) }}
                                    </h5>
                                    <p class="mb-0 text-sm mt-1">
                                        <span
                                            class="text-success text-sm font-weight-bolder">{{ number_format($activeContacts ?? 0) }}</span>
                                        <span class="text-muted">Posisi Aktif</span>
                                    </p>
                                </div>
                            </div>
                            <div class="col-4 text-end">
                                <div class="icon icon-shape bg-gradient-warning shadow-warning text-center rounded-circle">
                                    <i class="ni ni-email-83 text-lg opacity-10" aria-hidden="true"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Investors -->
            <div class="col-xl-4 col-sm-6">
                <div class="card shadow-sm border-0">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-8">
                                <div class="numbers">
                                    <p class="text-sm mb-0 text-uppercase font-weight-bold text-muted">Menu Investor</p>
                                    <h5 class="font-weight-bolder mb-0 text-dark">
                                        {{ number_format($totalInvestors ?? 0) }}
                                    </h5>
                                    <p class="mb-0 text-sm mt-1">
                                        <span class="text-success text-sm font-weight-bolder">Menu</span>
                                        <span class="text-muted">Dikonfigurasi</span>
                                    </p>
                                </div>
                            </div>
                            <div class="col-4 text-end">
                                <div class="icon icon-shape bg-gradient-danger shadow-danger text-center rounded-circle">
                                    <i class="ni ni-chart-bar-32 text-lg opacity-10" aria-hidden="true"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- GOOGLE ANALYTICS ROW -->
        <div class="row mt-4">
            <!-- Pengunjung Hari Ini -->
            <div class="col-xl-6 col-sm-6 mb-4">
                <div class="card shadow-sm border-0">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-8">
                                <div class="numbers">
                                    <p class="text-sm mb-0 text-uppercase font-weight-bold text-muted">Pengunjung Saat Ini
                                    </p>
                                    <h5 class="font-weight-bolder mb-0 text-dark">
                                        {{ isset($gaToday) ? number_format($gaToday) : '0' }}</h5>
                                    <p class="mb-0 text-sm mt-1">
                                        <span class="text-success text-sm font-weight-bolder">Realtime</span>
                                        <span class="text-muted">Google Analytics</span>
                                    </p>
                                </div>
                            </div>
                            <div class="col-4 text-end">
                                <div class="icon icon-shape bg-gradient-info shadow-info text-center rounded-circle">
                                    <i class="ni ni-world text-lg opacity-10" aria-hidden="true"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Pengunjung 30 Hari -->
            <div class="col-xl-6 col-sm-6 mb-4">
                <div class="card shadow-sm border-0">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-8">
                                <div class="numbers">
                                    <p class="text-sm mb-0 text-uppercase font-weight-bold text-muted">Pengunjung 30 Hari
                                    </p>
                                    <h5 class="font-weight-bolder mb-0 text-dark">
                                        {{ isset($gaMonthly) ? number_format($gaMonthly) : '0' }}</h5>
                                    <p class="mb-0 text-sm mt-1">
                                        <span class="text-success text-sm font-weight-bolder">Bulanan</span>
                                        <span class="text-muted">Google Analytics</span>
                                    </p>
                                </div>
                            </div>
                            <div class="col-4 text-end">
                                <div class="icon icon-shape bg-gradient-success shadow-success text-center rounded-circle">
                                    <i class="ni ni-chart-bar-32 text-lg opacity-10" aria-hidden="true"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- CHARTS AND QUICK STATS ROW -->
        <div class="row mt-4">
            <!-- Chart -->
            <div class="col-lg-12 mb-lg-0 mb-4">
                <div class="card z-index-2 h-100 shadow-sm border-0">
                    <div class="card-header pb-0 pt-4 bg-transparent d-flex justify-content-between">
                        <div>
                            <h6 class="text-capitalize text-dark font-weight-bolder mb-1">Tren Pengguna Aktif Unik Harian
                                (Google Analytics)</h6>
                            <p class="text-sm mb-0">
                                <i class="fa fa-chart-line text-info"></i>
                                <span class="font-weight-bold">28 Hari Terakhir</span> — jumlah pengguna aktif unik per
                                tanggal
                            </p>
                            <p class="text-sm text-muted mb-0">Data hari ini masih sementara dan mengikuti pemrosesan GA4.
                                Muat ulang dashboard untuk mengambil data terbaru.</p>
                            @if ($gaTimezone ?? null)
                                <p class="text-sm text-muted mb-0">Zona waktu laporan: {{ $gaTimezone }}</p>
                            @endif
                        </div>
                        <div class="icon icon-shape icon-sm bg-gradient-info shadow text-center border-radius-md">
                            <i class="ni ni-chart-bar-32 text-white opacity-10"></i>
                        </div>
                    </div>
                    <div class="card-body p-3">
                        @if ($gaChartError ?? false)
                            <p role="alert" class="text-danger">Data pengguna harian belum dapat diambil dari Google
                                Analytics. Coba muat ulang dashboard.</p>
                        @endif
                        <div class="chart" style="position: relative; height: 300px; width: 100%; min-width: 0;">
                            <canvas id="chart-line" class="chart-canvas"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- HALAMAN TERPOPULER ROW -->
        <style>
            /* Customizing standard DataTables to match Argon styling */
            .dataTables_wrapper .dataTables_paginate .paginate_button {
                padding: 0.4em 0.8em;
                margin-left: 4px;
                border-radius: 6px;
                border: 1px solid #e9ecef;
                background: white;
                cursor: pointer;
            }

            .dataTables_wrapper .dataTables_paginate .paginate_button.current {
                background: #5e72e4 !important;
                color: white !important;
                border-color: #5e72e4;
            }

            .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
                background: #f4f5f7 !important;
                color: #5e72e4 !important;
                border-color: #e9ecef;
            }

            .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
                background: #5e72e4 !important;
                color: white !important;
            }

            .dataTables_filter input {
                border: 1px solid #d2d6da;
                border-radius: 0.5rem;
                padding: 0.35rem 0.75rem;
                outline: none;
                font-size: 0.875rem;
            }

            .dataTables_filter input:focus {
                border-color: #5e72e4;
                box-shadow: 0 0 0 2px rgba(94, 114, 228, 0.2);
            }

            .dataTables_length select {
                border: 1px solid #d2d6da;
                border-radius: 0.5rem;
                padding: 0.35rem 1.5rem 0.35rem 0.75rem;
                outline: none;
            }

            .dataTables_wrapper .dataTables_info {
                padding-top: 1.2rem;
                font-size: 0.875rem;
                color: #8898aa;
            }

            .dataTables_wrapper .dataTables_paginate {
                padding-top: 1rem;
            }

            #datatable-top-pages th {
                border-bottom: 2px solid #e9ecef !important;
            }
        </style>
        <div class="row mt-4 mb-4">
            <div class="col-12">
                <div class="card shadow-sm border-0 h-100">
                    <div class="card-header border-bottom pb-3 pt-4 px-4 bg-transparent">
                        <h6 class="text-dark font-weight-bolder mb-0">Halaman Terpopuler</h6>
                        <p class="text-sm text-muted mb-0">Halaman teratas berdasarkan interaksi penayangan (30 hari
                            terakhir)</p>
                    </div>
                    <div class="card-body px-4 pt-3 pb-4">
                        <div class="table-responsive">
                            <table class="table table-flush align-items-center mb-0" id="datatable-top-pages"
                                style="width: 100%;">
                                <thead>
                                    <tr>
                                        <th
                                            class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 px-4">
                                            Jalur Halaman (Page Path)</th>
                                        <th
                                            class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                            Total Penayangan (Views)</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($gaTopPages ?? [] as $page)
                                        <tr>
                                            <td class="px-4">
                                                <div class="d-flex px-2 py-1 align-items-center">
                                                    <div
                                                        class="icon icon-shape icon-sm bg-gradient-info shadow text-center border-radius-md me-3">
                                                        <i class="ni ni-single-copy-04 text-white opacity-10"></i>
                                                    </div>
                                                    <div class="d-flex flex-column justify-content-center">
                                                        <h6 class="mb-0 text-sm font-weight-bold text-dark"
                                                            title="{{ $page['page'] }}">
                                                            {{ Str::limit($page['page'], 65) }}
                                                        </h6>
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="align-middle text-center text-sm">
                                                <span
                                                    class="badge bg-gradient-primary text-white text-xs px-3 py-2">{{ number_format($page['views']) }}
                                                    Views</span>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>



    </div>
@endsection

@push('js')
    <script src="./assets/js/plugins/chartjs.min.js"></script>
    <script>
        var ctx1 = document.getElementById("chart-line").getContext("2d");

        var rawLabels = {!! $chartLabels ?? '[]' !!};
        var userData = {!! $chartUsers ?? '[]' !!};

        new Chart(ctx1, {
            type: "line",
            data: {
                labels: rawLabels,
                datasets: [{
                    label: "Pengguna aktif unik per hari",
                    tension: 0,
                    borderWidth: 0,
                    pointRadius: 2,
                    pointBackgroundColor: "#2dce89",
                    borderColor: "#2dce89",
                    borderWidth: 3,
                    fill: false,
                    data: userData,
                    maxBarThickness: 6
                }],
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: true,
                        labels: {
                            color: '#8898aa',
                            font: {
                                size: 12,
                                family: "Open Sans",
                            }
                        }
                    }
                },
                interaction: {
                    intersect: false,
                    mode: 'index',
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        grid: {
                            drawBorder: false,
                            display: true,
                            drawOnChartArea: true,
                            drawTicks: false,
                            borderDash: [5, 5]
                        },
                        ticks: {
                            precision: 0,
                            display: true,
                            padding: 10,
                            color: '#8898aa',
                            font: {
                                size: 11,
                                family: "Open Sans",
                                style: 'normal',
                                lineHeight: 2
                            },
                        }
                    },
                    x: {
                        grid: {
                            drawBorder: false,
                            display: false,
                            drawOnChartArea: false,
                            drawTicks: false,
                            borderDash: [5, 5]
                        },
                        ticks: {
                            display: true,
                            color: '#8898aa',
                            padding: 20,
                            font: {
                                size: 11,
                                family: "Open Sans",
                                style: 'normal',
                                lineHeight: 2
                            },
                        }
                    },
                },
            },
        });

        $(document).ready(function() {
            $('#datatable-top-pages').DataTable({
                "pageLength": 10,
                "lengthChange": false,
                "searching": true,
                "language": {
                    "paginate": {
                        "previous": "<i class='fas fa-angle-left'></i>",
                        "next": "<i class='fas fa-angle-right'></i>"
                    },
                    "info": "Menampilkan _START_ sampai _END_ dari _TOTAL_ halaman",
                    "infoEmpty": "Menampilkan 0 sampai 0 dari 0 halaman",
                    "emptyTable": "Belum ada data halaman terpopuler.",
                    "search": "Cari Halaman:"
                }
            });
        });
    </script>
@endpush