@extends('layouts.app')
@section('title', 'Dashboard')

@section('content')
<div class="wrapper-md">
    <div class="d-flex flex-column">
        <div class="d-flex justify-content-between align-items-center mb-md">
            <div class="d-flex flex-column">
                <h1 class="lh-sm mb-0">Dashboard</h1>
                <small class="text-muted lh-sm">Summary of daily activities and performance</small>
            </div>
        </div>

        <div class="grid grid-12 gap-md mb-md">
            @php
                $kpis = [
                    [
                        'label' => 'Total User',
                        'value' => 2,
                        'icon' => 'people',
                        'trend' => '0%',
                        'trendDirection' => null,
                        'subtitle' => 'dari bulan lalu',
                    ],
                    [
                        'label' => 'Total Artikel',
                        'value' => 0,
                        'icon' => 'document_one_page_multiple',
                        'trend' => '0%',
                        'trendDirection' => null,
                        'subtitle' => 'dari bulan lalu',
                    ],
                    [
                        'label' => 'Total Visitor',
                        'value' => 0,
                        'icon' => 'globe_person',
                        'trend' => '0%',
                        'trendDirection' => null,
                        'subtitle' => 'hari ini',
                    ],
                    [
                        'label' => 'Total Komentar',
                        'value' => 0,
                        'icon' => 'comment_multiple',
                        'trend' => '0%',
                        'trendDirection' => null,
                        'subtitle' => 'hari ini',
                    ],
                ];
            @endphp
            @foreach($kpis as $kpi)
                <div class="col-span-3">
                    <x-fluent-metric-card
                        :title="$kpi['label']"
                        :value="$kpi['value']"
                        :icon="$kpi['icon']"
                        :trend="$kpi['trend']"
                        :trendDirection="$kpi['trendDirection']"
                        :subtitle="$kpi['subtitle']"
                        variant="kpi"
                        :hover="true"
                        :compact="true"
                    />
                </div>
            @endforeach
        </div>

        {{-- Charts --}}
        <div class="grid grid-12 gap-md mb-md">
            <div class="col-span-6">
                <x-fluent-card
                    icon="calendar_data_bar"
                    title="Statistik Pengunjung Website"
                >
                    <x-slot:body>
                        <div class="m-md">
                            <x-fluent-chart
                                :labels="['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun']"
                                :data="[1200, 900, 1500, 800, 2000, 1700]"
                                height="220"
                            />
                        </div>
                    </x-slot:body>
                    <x-slot:footer>
                        <a href="{{ route('activity-logs.index') }}" class="fluent-link">
                            Selengkapnya →
                        </a>
                    </x-slot:footer>
                </x-fluent-card>
            </div>

            <div class="col-span-3">
                <x-fluent-card
                    icon="news"
                    title="Berita Terfavorit"
                    class="h-100"
                >
                    <x-slot:body>
                        <x-fluent-empty-state
                            icon="document"
                            title="Belum ada berita"
                            description="Data akan muncul setelah ada artikel dengan interaksi tinggi."
                        />
                    </x-slot:body>
                    <x-slot:footer>
                        <a href="{{ route('activity-logs.index') }}" class="fluent-link">
                            Selengkapnya →
                        </a>
                    </x-slot:footer>
                </x-fluent-card>
            </div>
            <div class="col-span-3">
                <x-fluent-card
                    icon="comment_badge"
                    title="Komentar Terkini"
                    class="h-100"
                >
                    <x-slot:body>
                        <x-fluent-empty-state
                            icon="comment_multiple"
                            title="Belum ada komentar"
                            description="Data akan muncul setelah ada pengunjung yang memberi komentar."
                        />
                    </x-slot:body>
                    <x-slot:footer>
                        <a href="{{ route('activity-logs.index') }}" class="fluent-link">
                            Selengkapnya →
                        </a>
                    </x-slot:footer>
                </x-fluent-card>
            </div>
        </div>
        <x-fluent-card
            title="Aktivitas Log Terkini"
            icon="task_list_ltr"
        >
            <x-slot:body>
                <table class="fluent-dashboard-table fluent-dashboard-table--striped">
                    <thead>
                        <tr>
                            <th class="col-w-50">#</th>
                            <th class="col-w-150">User</th>
                            <th class="col-w-100">IP Address</th>
                            <th class="col-w-100">Aksi</th>
                            <th class="col-w-100">Model</th>
                            <th>URL</th>
                            <th class="col-w-150">Waktu</th>
                        </tr>
                    </thead>
                    <tbody>
                        @php $_i=1; @endphp
                        @foreach($data_log as $log)
                            <tr>
                                <td>{{ $_i }}</td>
                                <td>{{ $log->user?->email ?? '-' }}</td>
                                <td>{{ $log->ip_address }}</td>
                                <td>
                                    <span class="status-badge
                                        @if($log->action === 'create') status-primary
                                        @elseif($log->action === 'update') status-success
                                        @elseif($log->action === 'delete') status-danger
                                        @endif">
                                        {{ ucfirst($log->action) }}
                                    </span>
                                </td>
                                <td>{{ $log->model }}</td>
                                <td class="text-nowrap text-ellipsis">{{ $log->request_url }}</td>
                                <td class="text-nowrap text-ellipsis">
                                    {{ $log->created_at }}
                                </td>
                            </tr>
                            @php $_i++; @endphp
                        @endforeach
                    </tbody>
                </table>
            </x-slot:body>
            <x-slot:footer>
                <a href="{{ route('activity-logs.index') }}" class="fluent-link">
                    Lihat semua →
                </a>
            </x-slot:footer>
        </x-fluent-card>

    </div>
</div>
@endsection

@push('scripts')
     @vite(['resources/sass/chartjs.scss', 'resources/js/chartjs.js'])
@endpush