@extends('admin.layouts.master')

@section('title', 'Admin')
@section('page', 'Dashboard')
@section('sub_page', 'Home')

@section('content')

    <div class="row mb-3">
        <div class="col-md-9"></div>
        <div class="col-md-3">
            <label for="filterDate" class="form-label">Select Date</label>
            <input type="date" id="filterDate" class="form-control" value="{{ now()->toDateString() }}">
        </div>
    </div>

    <div class="row">
        <div class="col-lg-3 col-6">
            <div class="small-box bg-info">
                <div class="inner">
                    <h3 class="today_total_news">0</h3>
                    <p>Today's News Post's</p>
                </div>
                <div class="icon">
                    <i class="ion ion-newspaper"></i>
                </div>
            </div>
        </div>

        <div class="col-lg-3 col-6">
            <div class="small-box bg-info">
                <div class="inner">
                    <h3 class="yesterday_total_news">0</h3>
                    <p>Yesterday total news</p>
                </div>
                <div class="icon">
                    <i class="ion ion-newspaper"></i>
                </div>
            </div>
        </div>

        <div class="col-lg-3 col-6">
            <div class="small-box bg-info">
                <div class="inner">
                    <h3 class="today_auth_user_news">0</h3>
                    <p>Today's <b class="text-bold">{{ auth()->user()->name ?? 'Your' }}</b> Post's</p>
                </div>
                <div class="icon">
                    <i class="ion ion-newspaper"></i>
                </div>
            </div>
        </div>

        <div class="col-lg-3 col-6">
            <div class="small-box bg-info">
                <div class="inner">
                    <h3 class="total_auth_user_news">0</h3>
                    <p>Totals's <b class="text-bold">{{ auth()->user()->name ?? 'Your' }}</b> Post's</p>
                </div>
                <div class="icon">
                    <i class="ion ion-newspaper"></i>
                </div>
            </div>
        </div>
    </div>

    <div class="row mt-3">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h2>Today Editor News</h2>
                </div>
                <div class="card-body">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Total News</th>
                            </tr>
                        </thead>
                        <tbody class="today_users_table">
                            <tr>
                                <td colspan="2" class="text-center">Loading...</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h2>Total Editor News</h2>
                </div>
                <div class="card-body">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Total News</th>
                            </tr>
                        </thead>
                        <tbody class="total_users_table">
                            <tr>
                                <td colspan="2" class="text-center">Loading...</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="row mt-3">
        <!-- Hourly News Read Chart -->
        <div class="col-lg-12 mb-4">
            <div class="card shadow-lg border-0 rounded-4">
                <div
                    class="card-header bg-gradient-primary text-white rounded-top-4 d-flex align-items-center justify-content-between">
                    <h5 class="mb-0 fw-bold">Hourly News Read</h5>
                </div>
                <div class="card-body" style="height: 400px;">
                    <canvas id="hourlyChart" style="height:350px;"></canvas>
                </div>
            </div>
        </div>

        <!-- Monthly Visitors Chart -->
        <div class="col-lg-12 mb-4">
            <div class="card shadow-lg border-0 rounded-4">
                <div
                    class="card-header bg-gradient-success text-white rounded-top-4 d-flex align-items-center justify-content-between">
                    <h5 class="mb-0 fw-bold">Visitors Report</h5>
                </div>
                <div class="card-body" style="height: 400px;">
                    <canvas id="monthlyChart" style="height:350px;"></canvas>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('script')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>

    <script>
        $(document).ready(function() {
            loadDashboard($("#filterDate").val());

            $("#filterDate").on("change", function() {
                loadDashboard($(this).val());
            });

            function loadDashboard(filterDate) {
                let targets = [
                    '.today_total_news',
                    '.yesterday_total_news',
                    '.today_auth_user_news',
                    '.total_auth_user_news'
                ];

                targets.forEach(function(cls) {
                    $(cls).html('<span class="loading"></span>');
                });

                $(".today_users_table").html('<tr><td colspan="2" class="text-center">Loading...</td></tr>');
                $(".total_users_table").html('<tr><td colspan="2" class="text-center">Loading...</td></tr>');

                $.ajax({
                    url: "{{ url('/admin/dashboard') }}",
                    method: "GET",
                    data: {
                        filter_date: filterDate
                    },
                    dataType: "json",
                    success: function(res) {
                        // Stats
                        $('.today_total_news').text(res.stats.today_total_news ?? 0);
                        $('.yesterday_total_news').text(res.stats.yesterday_total_news ?? 0);
                        $('.today_auth_user_news').text(res.stats.today_auth_user_news ?? 0);
                        $('.total_auth_user_news').text(res.stats.total_auth_user_news ?? 0);

                        // Today Users Table
                        let todayHtml = '';
                        if (res.users.length) {
                            res.users.forEach(u => {
                                todayHtml +=
                                    `<tr><td>${u.name}</td><td>${u.news_count}</td></tr>`;
                            });
                        } else {
                            todayHtml =
                                '<tr><td colspan="2" class="text-center">No data found</td></tr>';
                        }
                        $(".today_users_table").html(todayHtml);

                        // Total Users Table
                        let totalHtml = '';
                        if (res.usersTotalNews.length) {
                            res.usersTotalNews.forEach(u => {
                                totalHtml +=
                                    `<tr><td>${u.name}</td><td>${u.news_count}</td></tr>`;
                            });
                        } else {
                            totalHtml =
                                '<tr><td colspan="2" class="text-center">No data found</td></tr>';
                        }
                        $(".total_users_table").html(totalHtml);

                        // Hourly Chart
                        let hours = res.hourly.map(h => h.hour + ":00");
                        let newsReadData = res.hourly.map(h => h.news_read_count);
                        let totalHourlyNewsRead = newsReadData.reduce((a, b) => a + b, 0);
                        let ctxHourly = document.getElementById("hourlyChart").getContext("2d");
                        if (window.hourlyChartInstance) window.hourlyChartInstance.destroy();
                        window.hourlyChartInstance = new Chart(ctxHourly, {
                            type: "bar",
                            data: {
                                labels: hours,
                                datasets: [{
                                    label: "News Read (Total: " + totalHourlyNewsRead +
                                        ")",
                                    data: newsReadData,
                                    backgroundColor: "rgba(54,162,235,0.8)",
                                    borderRadius: 8
                                }]
                            },
                            options: {
                                responsive: true,
                                maintainAspectRatio: false,
                                plugins: {
                                    datalabels: {
                                        anchor: 'end',
                                        align: 'top',
                                        font: {
                                            weight: 'bold',
                                            size: 14
                                        },
                                        color: '#000'
                                    }
                                },
                                scales: {
                                    y: {
                                        beginAtZero: true
                                    }
                                }
                            },
                            plugins: [ChartDataLabels]
                        });

                        // Monthly Chart
                        let visitorLabels = res.monthlyVisitors.map(v => v.date);
                        let visitorData = res.monthlyVisitors.map(v => v.visitor_count);
                        let totalMonthlyVisitors = visitorData.reduce((a, b) => a + b, 0);
                        let ctxMonthly = document.getElementById("monthlyChart").getContext("2d");
                        if (window.monthlyChartInstance) window.monthlyChartInstance.destroy();
                        window.monthlyChartInstance = new Chart(ctxMonthly, {
                            type: "bar",
                            data: {
                                labels: visitorLabels,
                                datasets: [{
                                    label: "Visitors (Total: " + totalMonthlyVisitors +
                                        ")",
                                    data: visitorData,
                                    backgroundColor: "rgba(75,192,192,0.7)",
                                    borderRadius: 8
                                }]
                            },
                            options: {
                                responsive: true,
                                maintainAspectRatio: false,
                                plugins: {
                                    datalabels: {
                                        anchor: 'end',
                                        align: 'top',
                                        font: {
                                            weight: 'bold',
                                            size: 14
                                        },
                                        color: '#000'
                                    }
                                },
                                scales: {
                                    y: {
                                        beginAtZero: true
                                    }
                                }
                            },
                            plugins: [ChartDataLabels]
                        });

                    }
                });
            }
        });
    </script>

    <style>
        .loading {
            display: inline-block;
            width: 16px;
            height: 16px;
            border: 2px solid #f3f3f3;
            border-radius: 50%;
            border-top: 2px solid #3498db;
            animation: spin 0.8s linear infinite;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        .card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
        }

        .bg-gradient-primary {
            background: linear-gradient(135deg, #4a90e2, #357ABD);
        }

        .bg-gradient-success {
            background: linear-gradient(135deg, #28a745, #218838);
        }

        .card-header {
            font-size: 1.2rem;
            font-weight: 600;
        }

        canvas {
            background-color: #ffffff;
            border-radius: 12px;
            padding: 20px;
        }
    </style>
@endsection