@extends('layouts.admin')

@section('content')
<!-- [ breadcrumb ] start -->
<div class="page-header"><div class="page-block"><div class="row align-items-center">
    <div class="col-md-12"><ul class="breadcrumb"><li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">হোম</a></li><li class="breadcrumb-item" aria-current="page">ড্যাশবোর্ড</li></ul></div>
    <div class="col-md-12"><div class="page-header-title"><h2 class="mb-0">স্বাগতম, {{ Auth::guard('admin')->user()->name }} 👋</h2></div></div>
</div></div></div>
<!-- [ breadcrumb ] end -->

@php $user = Auth::guard('admin')->user()->role; @endphp

<!-- ═══════ STAT CARDS ═══════ -->
<div class="row">
    <!-- Total News -->
    <div class="col-md-6 col-xl-3">
        <div class="card overflow-hidden">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="flex-grow-1">
                        <h6 class="mb-1 text-muted fw-normal">মোট নিউজ</h6>
                        <h3 class="mb-0">
                            @if ($user->name != 'admin' && $user->name != 'moderator') {{ $author_post }} @else {{ $total_post }} @endif
                        </h3>
                    </div>
                    <div class="avtar avtar-l bg-light-primary rounded-3">
                        <svg class="pc-icon" style="width:28px;height:28px"><use xlink:href="#custom-document-text"></use></svg>
                    </div>
                </div>
                <div class="mt-3 pt-3 border-top">
                    <span class="badge bg-light-success text-success"><i class="ti ti-trending-up me-1"></i>আজ +{{ $today_posts }}</span>
                    <span class="text-muted ms-2 small">নতুন নিউজ</span>
                </div>
            </div>
        </div>
    </div>
    <!-- Pending -->
    <div class="col-md-6 col-xl-3">
        <div class="card overflow-hidden">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="flex-grow-1">
                        <h6 class="mb-1 text-muted fw-normal">পেন্ডিং নিউজ</h6>
                        <h3 class="mb-0">
                            @if ($user->name != 'admin' && $user->name != 'moderator') {{ $author_pending }} @else {{ $pending_posts }} @endif
                        </h3>
                    </div>
                    <div class="avtar avtar-l bg-light-warning rounded-3">
                        <svg class="pc-icon" style="width:28px;height:28px"><use xlink:href="#custom-calendar-1"></use></svg>
                    </div>
                </div>
                <div class="mt-3 pt-3 border-top">
                    <a href="{{ route('pending.index') }}" class="text-warning fw-medium small">রিভিউ করুন →</a>
                </div>
            </div>
        </div>
    </div>
    <!-- Approved -->
    <div class="col-md-6 col-xl-3">
        <div class="card overflow-hidden">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="flex-grow-1">
                        <h6 class="mb-1 text-muted fw-normal">প্রকাশিত নিউজ</h6>
                        <h3 class="mb-0">{{ $approved_posts }}</h3>
                    </div>
                    <div class="avtar avtar-l bg-light-success rounded-3">
                        <svg class="pc-icon" style="width:28px;height:28px"><use xlink:href="#custom-security-safe"></use></svg>
                    </div>
                </div>
                <div class="mt-3 pt-3 border-top">
                    <a href="{{ route('post.index') }}" class="text-success fw-medium small">সব দেখুন →</a>
                </div>
            </div>
        </div>
    </div>
    <!-- Categories -->
    <div class="col-md-6 col-xl-3">
        <div class="card overflow-hidden">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="flex-grow-1">
                        <h6 class="mb-1 text-muted fw-normal">ক্যাটাগরি</h6>
                        <h3 class="mb-0">{{ $total_categories }}</h3>
                    </div>
                    <div class="avtar avtar-l bg-light-info rounded-3">
                        <svg class="pc-icon" style="width:28px;height:28px"><use xlink:href="#custom-folder-open"></use></svg>
                    </div>
                </div>
                <div class="mt-3 pt-3 border-top">
                    <a href="{{ route('categories.index') }}" class="text-info fw-medium small">ম্যানেজ করুন →</a>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- ═══════ CHARTS ROW ═══════ -->
<div class="row">
    <!-- Monthly News Trend (Area Chart) -->
    <div class="col-xl-8 col-md-12">
        <div class="card">
            <div class="card-header d-flex align-items-center justify-content-between">
                <div>
                    <h5 class="mb-1">নিউজ পরিসংখ্যান</h5>
                    <p class="text-muted mb-0 small">গত ৬ মাসের নিউজ ট্রেন্ড</p>
                </div>
                <div class="d-flex align-items-center gap-2">
                    <span class="badge bg-primary rounded-pill" style="width:10px;height:10px;padding:0"></span>
                    <span class="text-muted small">নিউজ</span>
                </div>
            </div>
            <div class="card-body pt-0">
                <div id="monthly-post-chart" style="min-height: 320px;"></div>
            </div>
        </div>
    </div>

    <!-- Category Distribution (Bar Chart) -->
    <div class="col-xl-4 col-md-12">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-1">ক্যাটাগরি অনুযায়ী</h5>
                <p class="text-muted mb-0 small">শীর্ষ ক্যাটাগরিগুলো</p>
            </div>
            <div class="card-body pt-0">
                <div id="category-chart" style="min-height: 320px;"></div>
            </div>
        </div>
    </div>
</div>

<!-- ═══════ QUICK STATS ROW ═══════ -->
<div class="row">
    <div class="col-6 col-xl-2 col-lg-4">
        <div class="card">
            <div class="card-body text-center py-4">
                <div class="avtar avtar-s rounded-circle bg-light-primary text-primary mx-auto mb-3"><svg class="pc-icon" style="width:20px;height:20px"><use xlink:href="#custom-calendar-1"></use></svg></div>
                <h4 class="mb-1">{{ $today_posts }}</h4>
                <p class="mb-0 text-muted small">আজকের নিউজ</p>
            </div>
        </div>
    </div>
    <div class="col-6 col-xl-2 col-lg-4">
        <div class="card">
            <div class="card-body text-center py-4">
                <div class="avtar avtar-s rounded-circle bg-light-info text-info mx-auto mb-3"><svg class="pc-icon" style="width:20px;height:20px"><use xlink:href="#custom-calendar-1"></use></svg></div>
                <h4 class="mb-1">{{ $week_posts }}</h4>
                <p class="mb-0 text-muted small">এই সপ্তাহ</p>
            </div>
        </div>
    </div>
    <div class="col-6 col-xl-2 col-lg-4">
        <div class="card">
            <div class="card-body text-center py-4">
                <div class="avtar avtar-s rounded-circle bg-light-success text-success mx-auto mb-3"><svg class="pc-icon" style="width:20px;height:20px"><use xlink:href="#custom-calendar-1"></use></svg></div>
                <h4 class="mb-1">{{ $month_posts }}</h4>
                <p class="mb-0 text-muted small">এই মাস</p>
            </div>
        </div>
    </div>
    <div class="col-6 col-xl-2 col-lg-4">
        <div class="card">
            <div class="card-body text-center py-4">
                <div class="avtar avtar-s rounded-circle bg-light-warning text-warning mx-auto mb-3"><svg class="pc-icon" style="width:20px;height:20px"><use xlink:href="#custom-document-text"></use></svg></div>
                <h4 class="mb-1">{{ $drafts }}</h4>
                <p class="mb-0 text-muted small">ড্রাফট</p>
            </div>
        </div>
    </div>
    <div class="col-6 col-xl-2 col-lg-4">
        <div class="card">
            <div class="card-body text-center py-4">
                <div class="avtar avtar-s rounded-circle bg-light-danger text-danger mx-auto mb-3"><svg class="pc-icon" style="width:20px;height:20px"><use xlink:href="#custom-calendar-1"></use></svg></div>
                <h4 class="mb-1">{{ $schedules }}</h4>
                <p class="mb-0 text-muted small">নির্ধারিত</p>
            </div>
        </div>
    </div>
    <div class="col-6 col-xl-2 col-lg-4">
        <div class="card">
            <div class="card-body text-center py-4">
                <div class="avtar avtar-s rounded-circle bg-light-secondary text-secondary mx-auto mb-3"><svg class="pc-icon" style="width:20px;height:20px"><use xlink:href="#custom-notification"></use></svg></div>
                <h4 class="mb-1">{{ App\Models\Subscriber::count() }}</h4>
                <p class="mb-0 text-muted small">সাবস্ক্রাইবার</p>
            </div>
        </div>
    </div>
</div>

<!-- ═══════ BOTTOM ROW: Recent News + Platform + Quick Links ═══════ -->
<div class="row">
    <!-- Recent News Table -->
    <div class="col-xl-8 col-md-12">
        <div class="card tbl-card">
            <div class="card-header d-flex align-items-center justify-content-between">
                <h5 class="mb-0">সাম্প্রতিক নিউজ</h5>
                <a href="{{ route('post.index') }}" class="btn btn-sm btn-outline-primary">সব দেখুন</a>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover table-borderless mb-0">
                        <thead>
                            <tr><th>শিরোনাম</th><th>স্ট্যাটাস</th><th class="text-end">তারিখ</th></tr>
                        </thead>
                        <tbody>
                            @foreach($recent_posts as $rp)
                            <tr>
                                <td>
                                    <div class="d-flex align-items-center gap-2">
                                        @if($rp->photo && file_exists(public_path('assets/images/'.$rp->photo)))
                                        <img src="{{ asset('assets/images/'.$rp->photo) }}" alt="" class="rounded" style="width:36px;height:36px;object-fit:cover">
                                        @else
                                        <div class="avtar avtar-xs bg-light-primary rounded"><svg class="pc-icon" style="width:14px;height:14px"><use xlink:href="#custom-document-text"></use></svg></div>
                                        @endif
                                        <span class="fw-medium" style="max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block">{{ $rp->title ?? 'শিরোনামহীন' }}</span>
                                    </div>
                                </td>
                                <td>
                                    @if($rp->is_pending == 1)
                                        <span class="badge bg-light-warning text-warning">পেন্ডিং</span>
                                    @elseif($rp->status == 'draft')
                                        <span class="badge bg-light-secondary text-secondary">ড্রাফট</span>
                                    @else
                                        <span class="badge bg-light-success text-success">প্রকাশিত</span>
                                    @endif
                                </td>
                                <td class="text-end text-muted small">{{ $rp->created_at ? $rp->created_at->format('d M Y') : '-' }}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Platform Sidebar -->
    <div class="col-xl-4 col-md-12">
        <!-- Platform Stats -->
        <div class="card">
            <div class="card-header"><h5 class="mb-0">প্ল্যাটফর্ম</h5></div>
            <div class="list-group list-group-flush">
                <a href="{{ route('rss.index') }}" class="list-group-item list-group-item-action d-flex align-items-center justify-content-between py-3">
                    <span class="d-flex align-items-center gap-2"><span class="avtar avtar-xs bg-light-warning rounded-circle"><svg class="pc-icon" style="width:14px;height:14px"><use xlink:href="#custom-share-bold"></use></svg></span>আরএসএস ফিড</span>
                    <span class="badge bg-light-warning text-warning rounded-pill px-3">{{ $rss }}</span>
                </a>
                <a href="{{ route('addPolls.index') }}" class="list-group-item list-group-item-action d-flex align-items-center justify-content-between py-3">
                    <span class="d-flex align-items-center gap-2"><span class="avtar avtar-xs bg-light-info rounded-circle"><svg class="pc-icon" style="width:14px;height:14px"><use xlink:href="#custom-graph"></use></svg></span>পোল</span>
                    <span class="badge bg-light-info text-info rounded-pill px-3">{{ $polls }}</span>
                </a>
                <a href="{{ route('categories.index') }}" class="list-group-item list-group-item-action d-flex align-items-center justify-content-between py-3">
                    <span class="d-flex align-items-center gap-2"><span class="avtar avtar-xs bg-light-success rounded-circle"><svg class="pc-icon" style="width:14px;height:14px"><use xlink:href="#custom-folder-open"></use></svg></span>ক্যাটাগরি</span>
                    <span class="badge bg-light-success text-success rounded-pill px-3">{{ $total_categories }}</span>
                </a>
                <a href="{{ route('admin.staff.index') }}" class="list-group-item list-group-item-action d-flex align-items-center justify-content-between py-3">
                    <span class="d-flex align-items-center gap-2"><span class="avtar avtar-xs bg-light-primary rounded-circle"><svg class="pc-icon" style="width:14px;height:14px"><use xlink:href="#custom-user-square"></use></svg></span>রিপোর্টার</span>
                    <span class="badge bg-light-primary text-primary rounded-pill px-3">{{ App\Models\Admin::where('id','!=',1)->count() }}</span>
                </a>
            </div>
        </div>

        <!-- Quick Actions -->
        <div class="card">
            <div class="card-header"><h5 class="mb-0">দ্রুত অ্যাকশন</h5></div>
            <div class="card-body">
                <div class="d-grid gap-2">
                    <a href="{{ route('admin.post.format') }}" class="btn btn-primary"><i class="ti ti-plus me-1"></i>নতুন নিউজ</a>
                    <a href="{{ route('pending.index') }}" class="btn btn-outline-warning"><i class="ti ti-clock me-1"></i>পেন্ডিং রিভিউ ({{ $pending_posts }})</a>
                    <a href="{{ route('draft.index') }}" class="btn btn-outline-secondary"><i class="ti ti-file-text me-1"></i>ড্রাফট ({{ $drafts }})</a>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<!-- ApexCharts CDN -->
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // ── Monthly News Trend (Area Chart) ──
    new ApexCharts(document.querySelector("#monthly-post-chart"), {
        chart: { type: 'area', height: 320, toolbar: { show: false }, fontFamily: 'Public Sans, sans-serif' },
        series: [{ name: 'নিউজ', data: {!! $monthly_counts !!} }],
        xaxis: {
            categories: {!! $monthly_labels !!},
            labels: { style: { colors: '#8c98a4', fontSize: '12px' } },
            axisBorder: { show: false }, axisTicks: { show: false }
        },
        yaxis: { labels: { style: { colors: '#8c98a4', fontSize: '12px' } } },
        colors: ['#4680FF'],
        fill: { type: 'gradient', gradient: { shadeIntensity: 1, opacityFrom: 0.4, opacityTo: 0.05, stops: [0, 90, 100] } },
        stroke: { curve: 'smooth', width: 3 },
        dataLabels: { enabled: false },
        grid: { borderColor: '#f0f2f5', strokeDashArray: 4, xaxis: { lines: { show: false } } },
        markers: { size: 4, colors: ['#4680FF'], strokeColors: '#fff', strokeWidth: 2, hover: { size: 6 } },
        tooltip: { theme: 'light', y: { formatter: function(val) { return val + ' টি নিউজ'; } } }
    }).render();

    // ── Category Distribution (Bar Chart) ──
    new ApexCharts(document.querySelector("#category-chart"), {
        chart: { type: 'bar', height: 320, toolbar: { show: false }, fontFamily: 'Public Sans, sans-serif' },
        series: [{ name: 'নিউজ', data: {!! $cat_counts !!} }],
        xaxis: {
            categories: {!! $cat_labels !!},
            labels: { style: { colors: '#8c98a4', fontSize: '11px' }, rotate: -45, rotateAlways: true, trim: true, maxHeight: 80 },
            axisBorder: { show: false }, axisTicks: { show: false }
        },
        yaxis: { labels: { style: { colors: '#8c98a4', fontSize: '12px' } } },
        colors: ['#4680FF', '#3EC9D6', '#E58A00', '#DC2626', '#2CA87F', '#7C3AED'],
        plotOptions: { bar: { borderRadius: 6, columnWidth: '50%', distributed: true } },
        legend: { show: false },
        dataLabels: { enabled: true, style: { fontSize: '11px', fontWeight: 600 }, offsetY: -6 },
        grid: { borderColor: '#f0f2f5', strokeDashArray: 4, xaxis: { lines: { show: false } } },
        tooltip: { theme: 'light', y: { formatter: function(val) { return val + ' টি নিউজ'; } } }
    }).render();
});
</script>
@endsection
