@extends('admin.layouts.master')

@section('title', 'Dashboard')
@section('page_title', 'Dashboard')

@section('style')
<style>
/*
 * সব CSS .db-wrap এর ভেতরে scoped।
 * Master file এর theme variables use করে — light/dim/dark সব mode এ কাজ করে।
 */
.db-wrap { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }

/* ── Header ── */
.db-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--line);
}
.db-header-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--ink);
    margin: 0 0 4px;
    letter-spacing: -.4px;
    line-height: 1.2;
}
.db-header-sub {
    font-size: 13px;
    color: var(--muted);
    font-weight: 500;
    margin: 0;
}
.db-date-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}
.db-date-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    margin: 0;
}
.db-date-input {
    height: 36px;
    border: 1.5px solid var(--line) !important;
    border-radius: 0 !important;
    background: var(--panel) !important;
    color: var(--ink) !important;
    font-size: 13px;
    font-weight: 600;
    padding: 0 12px;
    outline: none !important;
    box-shadow: none !important;
    transition: border-color .18s;
    color-scheme: var(--date-color-scheme, light);
}
.db-date-input:focus { border-color: var(--acc) !important; box-shadow: none !important; }

/* ── Stat Cards ── */
.db-stats-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 14px;
    margin-bottom: 28px;
}
@media(max-width:992px){ .db-stats-grid { grid-template-columns: repeat(2,1fr); } }
@media(max-width:576px){ .db-stats-grid { grid-template-columns: 1fr; } }

.db-stat {
    background: var(--panel);
    border: 1.5px solid var(--line);
    border-top: 3px solid var(--acc);
    border-radius: 0 !important;
    padding: 20px 18px 16px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    transition: box-shadow .2s, background .3s, border-color .3s;
}
.db-stat:hover { box-shadow: 0 6px 22px rgba(90,103,216,.15); }
.db-stat.s2 { border-top-color: #0ea5e9; }
.db-stat.s3 { border-top-color: #10b981; }
.db-stat.s4 { border-top-color: #f59e0b; }

.db-stat-val {
    font-size: 34px;
    font-weight: 900;
    color: var(--ink);
    line-height: 1;
    margin-bottom: 8px;
    letter-spacing: -1.5px;
    min-height: 34px;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}
.db-stat-lbl {
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .9px;
    line-height: 1.4;
}
.db-stat-icon {
    width: 46px;
    height: 46px;
    background: var(--acc-soft);
    border-radius: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--acc);
    flex-shrink: 0;
    transition: background .3s;
}
.db-stat.s2 .db-stat-icon { background: rgba(14,165,233,.15); color:#0ea5e9; }
.db-stat.s3 .db-stat-icon { background: rgba(16,185,129,.15); color:#10b981; }
.db-stat.s4 .db-stat-icon { background: rgba(245,158,11,.15);  color:#f59e0b; }

/* ── Section Label ── */
.db-sec-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.db-sec-label::after { content:''; flex:1; height:1px; background: var(--line); }

/* ── Two col ── */
.db-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 28px;
}
@media(max-width:768px){ .db-two-col { grid-template-columns: 1fr; } }

/* ── Table Card ── */
.db-tcard {
    background: var(--panel);
    border: 1.5px solid var(--line);
    border-radius: 0 !important;
    overflow: hidden;
    transition: background .3s, border-color .3s;
}
.db-tcard-head {
    padding: 14px 18px;
    border-bottom: 1.5px solid var(--line);
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background .3s;
}
.db-tcard-title {
    margin: 0;
    font-size: 14px;
    font-weight: 800;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 7px;
    letter-spacing: -.2px;
}
.db-tcard-title i { color: var(--acc); font-size: 13px; }
.db-tcard-badge {
    font-size: 10px;
    font-weight: 800;
    background: var(--acc-soft);
    color: var(--acc);
    padding: 3px 9px;
    border-radius: 0 !important;
    text-transform: uppercase;
    letter-spacing: .8px;
}
.db-tcard table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}
.db-tcard thead th {
    background: var(--surface) !important;
    padding: 10px 16px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--muted);
    border-bottom: 1.5px solid var(--line) !important;
    border-radius: 0 !important;
}
.db-tcard tbody td {
    padding: 11px 16px;
    border-bottom: 1px solid var(--line) !important;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ink);
    vertical-align: middle;
    background: transparent !important;
    transition: background .15s;
}
.db-tcard tbody tr:last-child td { border-bottom: none !important; }
.db-tcard tbody tr:hover td { background: var(--sb-hover-bg) !important; }
.db-tcard .db-num {
    font-size: 14px;
    font-weight: 800;
    color: var(--acc);
    letter-spacing: -.3px;
}
.db-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: var(--acc-soft);
    color: var(--acc);
    font-size: 11px;
    font-weight: 800;
    border-radius: 0 !important;
}

/* ── Chart Card ── */
.db-chart-card {
    background: var(--panel);
    border: 1.5px solid var(--line);
    border-radius: 0 !important;
    overflow: hidden;
    margin-bottom: 14px;
    transition: background .3s, border-color .3s;
}
.db-chart-head {
    padding: 14px 18px;
    border-bottom: 1.5px solid var(--line);
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background .3s;
}
.db-chart-title {
    margin: 0;
    font-size: 14px;
    font-weight: 800;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: -.2px;
}
.db-chart-title i { color: var(--acc); font-size: 13px; }
.db-chart-sub {
    font-size: 12px;
    color: var(--muted);
    font-weight: 600;
    background: var(--acc-soft);
    color: var(--acc);
    padding: 3px 10px;
    border-radius: 0 !important;
}
.db-chart-body {
    padding: 20px;
    height: 300px;
    position: relative;
}

/* ── Spinner ── */
.db-spin {
    display: inline-block;
    width: 20px; height: 20px;
    border: 2.5px solid var(--line);
    border-top-color: var(--acc);
    border-radius: 50% !important;
    animation: db-spin-anim .7s linear infinite;
    vertical-align: middle;
}
@keyframes db-spin-anim { to { transform: rotate(360deg); } }

/* ── Date input dark mode color-scheme fix ── */
[data-theme="dim"] .db-date-input,
[data-theme="dark"] .db-date-input {
    color-scheme: dark;
}
</style>
@endsection

@section('content')
<div class="db-wrap">

    {{-- Header --}}
    <div class="db-header">
        <div>
            <p class="db-header-title">
                <i class="fas fa-chart-line" style="color:var(--acc);margin-right:10px;font-size:17px;"></i>Dashboard Overview
            </p>
            <p class="db-header-sub">{{ now()->format('l, d F Y') }}</p>
        </div>
        <div class="db-date-wrap">
            <label class="db-date-label" for="filterDate">
                <i class="fas fa-calendar-alt" style="margin-right:5px;color:var(--acc);"></i>Filter Date
            </label>
            <input type="date" id="filterDate" class="db-date-input" value="{{ now()->toDateString() }}">
        </div>
    </div>

    {{-- Stat Cards --}}
    <div class="db-stats-grid">
        <div class="db-stat">
            <div>
                <div class="db-stat-val today_total_news"><span class="db-spin"></span></div>
                <div class="db-stat-lbl">Today's News</div>
            </div>
            <div class="db-stat-icon"><i class="fas fa-newspaper"></i></div>
        </div>
        <div class="db-stat s2">
            <div>
                <div class="db-stat-val yesterday_total_news"><span class="db-spin"></span></div>
                <div class="db-stat-lbl">Yesterday's News</div>
            </div>
            <div class="db-stat-icon"><i class="fas fa-history"></i></div>
        </div>
        <div class="db-stat s3">
            <div>
                <div class="db-stat-val today_auth_user_news"><span class="db-spin"></span></div>
                <div class="db-stat-lbl">Your Today's Posts</div>
            </div>
            <div class="db-stat-icon"><i class="fas fa-user-edit"></i></div>
        </div>
        <div class="db-stat s4">
            <div>
                <div class="db-stat-val total_auth_user_news"><span class="db-spin"></span></div>
                <div class="db-stat-lbl">Your Total Posts</div>
            </div>
            <div class="db-stat-icon"><i class="fas fa-layer-group"></i></div>
        </div>
    </div>

    {{-- Editor Tables --}}
    <div class="db-sec-label">
        <i class="fas fa-users" style="color:var(--acc);"></i>Editor Performance
    </div>

    <div class="db-two-col">
        <div class="db-tcard">
            <div class="db-tcard-head">
                <p class="db-tcard-title"><i class="fas fa-clock"></i>Today Editor News</p>
                <span class="db-tcard-badge">Live</span>
            </div>
            <table>
                <thead>
                    <tr>
                        <th width="44">#</th>
                        <th>Editor Name</th>
                        <th>Total</th>
                    </tr>
                </thead>
                <tbody class="today_users_table">
                    <tr><td colspan="3" style="text-align:center;padding:24px;color:var(--muted);font-size:13px;">
                        <span class="db-spin"></span>
                    </td></tr>
                </tbody>
            </table>
        </div>

        <div class="db-tcard">
            <div class="db-tcard-head">
                <p class="db-tcard-title"><i class="fas fa-chart-bar"></i>Total Editor News</p>
                <span class="db-tcard-badge">All Time</span>
            </div>
            <table>
                <thead>
                    <tr>
                        <th width="44">#</th>
                        <th>Editor Name</th>
                        <th>Total</th>
                    </tr>
                </thead>
                <tbody class="total_users_table">
                    <tr><td colspan="3" style="text-align:center;padding:24px;color:var(--muted);font-size:13px;">
                        <span class="db-spin"></span>
                    </td></tr>
                </tbody>
            </table>
        </div>
    </div>

    {{-- Charts --}}
    <div class="db-sec-label">
        <i class="fas fa-signal" style="color:var(--acc);"></i>Analytics
    </div>

    <div class="db-chart-card">
        <div class="db-chart-head">
            <p class="db-chart-title"><i class="fas fa-clock"></i>Hourly News Read</p>
            <span class="db-chart-sub">Today</span>
        </div>
        <div class="db-chart-body">
            <canvas id="hourlyChart"></canvas>
        </div>
    </div>

    <div class="db-chart-card">
        <div class="db-chart-head">
            <p class="db-chart-title"><i class="fas fa-users"></i>Visitors Report</p>
            <span class="db-chart-sub">Monthly</span>
        </div>
        <div class="db-chart-body">
            <canvas id="monthlyChart"></canvas>
        </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()); });

    /* ── Theme-aware Chart colors ── */
    function getThemeColors() {
        var s = getComputedStyle(document.documentElement);
        return {
            ink:     s.getPropertyValue('--ink').trim()     || '#0f172a',
            muted:   s.getPropertyValue('--muted').trim()   || '#64748b',
            line:    s.getPropertyValue('--line').trim()     || '#e6e9f2',
            acc:     s.getPropertyValue('--acc').trim()      || '#5a67d8',
            panel:   s.getPropertyValue('--panel').trim()   || '#ffffff',
        };
    }

    function makeTooltip(tc) {
        return {
            backgroundColor: tc.ink,
            titleColor: '#e2e8f0',
            bodyColor: tc.muted,
            titleFont: { size: 13, weight: '700' },
            bodyFont: { size: 12 },
            padding: 12
        };
    }

    function makeTicks(tc) {
        return { font: { size: 12, weight: '600', family: "'Plus Jakarta Sans', system-ui" }, color: tc.muted };
    }

    function loadDashboard(filterDate) {
        ['.today_total_news','.yesterday_total_news','.today_auth_user_news','.total_auth_user_news']
            .forEach(function(c){ $(c).html('<span class="db-spin"></span>'); });
        $(".today_users_table, .total_users_table").html(
            '<tr><td colspan="3" style="text-align:center;padding:24px;color:var(--muted);font-size:13px;"><span class="db-spin"></span></td></tr>'
        );

        $.ajax({
            url: "{{ url('/admin/dashboard') }}",
            method: "GET",
            data: { filter_date: filterDate },
            dataType: "json",
            success: function (res) {
                var tc = getThemeColors();

                /* Stat cards */
                $('.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 table */
                var todayHtml = '';
                if (res.users && res.users.length) {
                    res.users.forEach(function(u, i) {
                        todayHtml += '<tr>'
                            + '<td><span class="db-rank">' + (i+1) + '</span></td>'
                            + '<td>' + u.name + '</td>'
                            + '<td class="db-num">' + u.news_count + '</td>'
                            + '</tr>';
                    });
                } else {
                    todayHtml = '<tr><td colspan="3" style="text-align:center;padding:22px;color:var(--muted);font-size:13px;">No data found</td></tr>';
                }
                $(".today_users_table").html(todayHtml);

                /* Total table */
                var totalHtml = '';
                if (res.usersTotalNews && res.usersTotalNews.length) {
                    res.usersTotalNews.forEach(function(u, i) {
                        totalHtml += '<tr>'
                            + '<td><span class="db-rank">' + (i+1) + '</span></td>'
                            + '<td>' + u.name + '</td>'
                            + '<td class="db-num">' + u.news_count + '</td>'
                            + '</tr>';
                    });
                } else {
                    totalHtml = '<tr><td colspan="3" style="text-align:center;padding:22px;color:var(--muted);font-size:13px;">No data found</td></tr>';
                }
                $(".total_users_table").html(totalHtml);

                /* Hourly Chart */
                var hours      = res.hourly.map(function(h){ return h.hour + ':00'; });
                var hourlyData = res.hourly.map(function(h){ return h.news_read_count; });
                var hourlyTotal = hourlyData.reduce(function(a,b){ return a+b; }, 0);

                if (window._hourlyChart) window._hourlyChart.destroy();
                window._hourlyChart = new Chart(
                    document.getElementById('hourlyChart').getContext('2d'), {
                    type: 'bar',
                    data: {
                        labels: hours,
                        datasets: [{
                            label: 'Reads',
                            data: hourlyData,
                            backgroundColor: tc.acc.replace(')', ', 0.85)').replace('rgb(', 'rgba(').replace('#', '') || 'rgba(90,103,216,0.85)',
                            borderWidth: 0
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: { display: false },
                            title: {
                                display: true,
                                text: 'Total Reads: ' + hourlyTotal,
                                font: { size: 13, weight: '700' },
                                color: tc.ink,
                                padding: { bottom: 12 }
                            },
                            datalabels: {
                                anchor: 'end', align: 'top',
                                font: { weight: '700', size: 11, family: "'Plus Jakarta Sans', system-ui" },
                                color: tc.acc
                            },
                            tooltip: makeTooltip(tc)
                        },
                        scales: {
                            x: { grid: { display: false }, ticks: makeTicks(tc) },
                            y: {
                                beginAtZero: true,
                                grid: { color: tc.line },
                                ticks: { font: { size: 12, weight: '500' }, color: tc.muted }
                            }
                        }
                    },
                    plugins: [ChartDataLabels]
                });

                /* Monthly Chart */
                var vLabels  = res.monthlyVisitors.map(function(v){ return v.date; });
                var vData    = res.monthlyVisitors.map(function(v){ return v.visitor_count; });
                var visitorTotal = vData.reduce(function(a,b){ return a+b; }, 0);

                if (window._monthlyChart) window._monthlyChart.destroy();
                window._monthlyChart = new Chart(
                    document.getElementById('monthlyChart').getContext('2d'), {
                    type: 'bar',
                    data: {
                        labels: vLabels,
                        datasets: [{
                            label: 'Visitors',
                            data: vData,
                            backgroundColor: 'rgba(14,165,233,0.85)',
                            borderWidth: 0
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: { display: false },
                            title: {
                                display: true,
                                text: 'Total Visitors: ' + visitorTotal,
                                font: { size: 13, weight: '700' },
                                color: tc.ink,
                                padding: { bottom: 12 }
                            },
                            datalabels: {
                                anchor: 'end', align: 'top',
                                font: { weight: '700', size: 11, family: "'Plus Jakarta Sans', system-ui" },
                                color: '#0ea5e9'
                            },
                            tooltip: makeTooltip(tc)
                        },
                        scales: {
                            x: {
                                grid: { display: false },
                                ticks: { ...makeTicks(tc), maxRotation: 45 }
                            },
                            y: {
                                beginAtZero: true,
                                grid: { color: tc.line },
                                ticks: { font: { size: 12, weight: '500' }, color: tc.muted }
                            }
                        }
                    },
                    plugins: [ChartDataLabels]
                });
            }
        });
    }

    /*
     * Theme change হলে chart গুলো re-render করো।
     * setTheme() master layout এ আছে — সেটা call হওয়ার পরে
     * এই event fire করবে।
     */
    var _origSetTheme = window.setTheme;
    window.setTheme = function(t) {
        if (_origSetTheme) _origSetTheme(t);
        // Charts destroy হলে re-load করো
        setTimeout(function() {
            loadDashboard($("#filterDate").val());
        }, 320); // transition শেষ হওয়ার পর
    };
});
</script>
@endsection