@extends('layouts.admin')

@section('title', 'Dashboard')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2 class="mb-0">Dashboard</h2>
    <a href="{{ route('certificate.index') }}" class="btn btn-outline-primary btn-sm" target="_blank">Lihat Halaman Awam</a>
</div>

<form method="GET" class="card mb-4">
    <div class="card-body">
        <div class="row g-3">
            <div class="col-md-3">
                <label class="form-label">Tarikh Dari</label>
                <input type="date" name="date_from" class="form-control" value="{{ $filters['date_from'] ?? '' }}">
            </div>
            <div class="col-md-3">
                <label class="form-label">Tarikh Hingga</label>
                <input type="date" name="date_to" class="form-control" value="{{ $filters['date_to'] ?? '' }}">
            </div>
            <div class="col-md-3">
                <label class="form-label">Kategori</label>
                <select name="category" class="form-select">
                    <option value="">Semua</option>
                    @foreach($categories as $cat)
                        <option value="{{ $cat }}" {{ ($filters['category'] ?? '') == $cat ? 'selected' : '' }}>{{ $cat }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3 d-flex align-items-end">
                <button type="submit" class="btn btn-esijil me-2">Tapis</button>
                <a href="{{ route('admin.dashboard') }}" class="btn btn-outline-secondary">Reset</a>
            </div>
        </div>
    </div>
</form>

<div class="row g-3 mb-4">
    <div class="col-md-3 col-sm-6">
        <div class="card stat-card"><div class="card-body">
            <h6 class="text-muted">Jumlah Peserta</h6>
            <h3 class="mb-0 text-primary">{{ number_format($stats['total_participants']) }}</h3>
        </div></div>
    </div>
    <div class="col-md-3 col-sm-6">
        <div class="card stat-card"><div class="card-body">
            <h6 class="text-muted">Telah Muat Turun</h6>
            <h3 class="mb-0 text-success">{{ number_format($stats['downloaded_participants']) }}</h3>
        </div></div>
    </div>
    <div class="col-md-3 col-sm-6">
        <div class="card stat-card"><div class="card-body">
            <h6 class="text-muted">Belum Muat Turun</h6>
            <h3 class="mb-0 text-warning">{{ number_format($stats['not_downloaded_participants']) }}</h3>
        </div></div>
    </div>
    <div class="col-md-3 col-sm-6">
        <div class="card stat-card"><div class="card-body">
            <h6 class="text-muted">Peratus Muat Turun</h6>
            <h3 class="mb-0">{{ $stats['download_percentage'] }}%</h3>
        </div></div>
    </div>
    <div class="col-md-3 col-sm-6">
        <div class="card stat-card"><div class="card-body">
            <h6 class="text-muted">Jumlah Transaksi</h6>
            <h3 class="mb-0">{{ number_format($stats['total_transactions']) }}</h3>
        </div></div>
    </div>
    <div class="col-md-3 col-sm-6">
        <div class="card stat-card"><div class="card-body">
            <h6 class="text-muted">Hari Ini</h6>
            <h3 class="mb-0">{{ number_format($stats['downloads_today']) }}</h3>
        </div></div>
    </div>
    <div class="col-md-3 col-sm-6">
        <div class="card stat-card"><div class="card-body">
            <h6 class="text-muted">Minggu Ini</h6>
            <h3 class="mb-0">{{ number_format($stats['downloads_this_week']) }}</h3>
        </div></div>
    </div>
    <div class="col-md-3 col-sm-6">
        <div class="card stat-card"><div class="card-body">
            <h6 class="text-muted">Bulan Ini</h6>
            <h3 class="mb-0">{{ number_format($stats['downloads_this_month']) }}</h3>
        </div></div>
    </div>
</div>

<div class="row g-4">
    <div class="col-lg-6">
        <div class="card"><div class="card-header">Muat Turun Mengikut Hari</div>
        <div class="card-body"><canvas id="chartDownloadsByDay" height="200"></canvas></div></div>
    </div>
    <div class="col-lg-6">
        <div class="card"><div class="card-header">Status Muat Turun Peserta</div>
        <div class="card-body"><canvas id="chartDownloadStatus" height="200"></canvas></div></div>
    </div>
    <div class="col-lg-6">
        <div class="card"><div class="card-header">Muat Turun Mengikut Kategori</div>
        <div class="card-body"><canvas id="chartByCategory" height="200"></canvas></div></div>
    </div>
    <div class="col-lg-6">
        <div class="card"><div class="card-header">Muat Turun Mengikut Jam</div>
        <div class="card-body"><canvas id="chartByHour" height="200"></canvas></div></div>
    </div>
    <div class="col-lg-6">
        <div class="card"><div class="card-header">Muat Turun Mengikut Peranti</div>
        <div class="card-body"><canvas id="chartByDevice" height="200"></canvas></div></div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    new Chart(document.getElementById('chartDownloadsByDay'), {
        type: 'line',
        data: {
            labels: @json($downloadsByDay->pluck('date')),
            datasets: [{ label: 'Muat Turun', data: @json($downloadsByDay->pluck('count')), borderColor: '#003366', fill: false }]
        }
    });
    new Chart(document.getElementById('chartDownloadStatus'), {
        type: 'doughnut',
        data: {
            labels: @json($downloadStatusChart['labels']),
            datasets: [{ data: @json($downloadStatusChart['data']), backgroundColor: ['#198754', '#ffc107'] }]
        }
    });
    new Chart(document.getElementById('chartByCategory'), {
        type: 'bar',
        data: {
            labels: @json($downloadsByCategory->pluck('category')),
            datasets: [{ label: 'Muat Turun', data: @json($downloadsByCategory->pluck('count')), backgroundColor: '#CC0000' }]
        }
    });
    new Chart(document.getElementById('chartByHour'), {
        type: 'bar',
        data: {
            labels: @json($downloadsByHour->pluck('hour')->map(fn($h) => $h . ':00')),
            datasets: [{ label: 'Muat Turun', data: @json($downloadsByHour->pluck('count')), backgroundColor: '#003366' }]
        }
    });
    new Chart(document.getElementById('chartByDevice'), {
        type: 'pie',
        data: {
            labels: @json($downloadsByDevice->pluck('device_type')),
            datasets: [{ data: @json($downloadsByDevice->pluck('count')), backgroundColor: ['#003366', '#CC0000', '#FFCC00'] }]
        }
    });
});
</script>
@endpush