@extends('admin.layout')
@section('content')
    <div class="panel-body">
        <h2>Selamat Datang, {{ Auth::user()->name }}</h2>
        <hr>
        <h3>Data Pengunjung</h3>
        <div class="div">
            <div class="col">
                <form action="/" method="GET" class="row">
                    <div class="form-group col-md-3">
                        <select name="tahun" id="tahun" class="select2-single form-control">
                            <option value="{{ date('Y') - 2 }}"
                                {{ Request('tahun', date('Y')) == date('Y') - 2 ? 'selected' : '' }}>
                                {{ date('Y') - 2 }}</option>
                            <option value="{{ date('Y') - 1 }}"
                                {{ Request('tahun', date('Y')) == date('Y') - 1 ? 'selected' : '' }}>
                                {{ date('Y') - 1 }}</option>
                            <option value="{{ date('Y') }}"
                                {{ Request('tahun', date('Y')) == date('Y') ? 'selected' : '' }}>
                                {{ date('Y') }}</option>
                        </select>

                    </div>
                    <div class="form-group col-md-2">
                        <button type="submit" class="btn btn-success">Cari</button>
                    </div>
                </form>
            </div>
        </div>
        <div>

            <canvas id="visitor"></canvas>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        const labels = [
            'January',
            'February',
            'March',
            'April',
            'May',
            'June',
            'July',
            'August',
            'September',
            'Oktober',
            'November',
            'Desember',
        ];

        const ctx2 = document.getElementById('visitor');

        const myChart2 = new Chart(ctx2, {
            type: 'line',
            data: {
                labels: labels,
                datasets: [{
                    label: 'Data Pengunjung Tahun {{ date('Y') }}',
                    backgroundColor: 'rgb(255, 99, 132)',
                    borderColor: 'rgb(255, 99, 132)',
                    data: {!! json_encode($v) !!},
                }]
            },
        });
    </script>
@endsection