@extends('admin.layouts.app')

@section('content')
<div class="container">
    <h2>상황판</h2>
    <hr/>

    <div class="row justify-content-center">
        <div class="col-md-6">
            <h5>{{ date('m') }}월 방문자</h5>
            <div id="visitsChart"></div>
            <table class="table table-bordered">
                <caption>
                    단위：명
                </caption>
                <colgroup>
                    <col width="20%"/>
                    <col width="*"/>
                    <col width="20%"/>
                    <col width="*"/>
                </colgroup>
                <tr>
                    <th>신규 방문자</th>
                    <td>{{ $visitStats['totalCntNew'] }}</td>
                    <th>오늘 방문자</th>
                    <td>{{ $visitStats['visitorTodayCount'] }}</td>
                </tr>
                <tr>
                    <th>재방문자</th>
                    <td>{{ $visitStats['totalCntRe'] }}</td>
                    <th>어제 방문자</th>
                    <td>{{ $visitStats['visitorYesterdayCount'] }}</td>
                </tr>
                <tr>
                    <th>오늘 방문자</th>
                    <td>{{ $visitStats['totalCntTo'] }}</td>
                    <th>전체 방문자</th>
                    <td>{{ $visitStats['visitorTotalCount'] }}</td>
                </tr>
            </table>
        </div>

        <div class="col-md-6">
            <h5>회원가입</h5>
            <div id="usersChart"></div>
            <table class="table table-bordered">
                <caption>
                    단위：명
                </caption>
                <colgroup>
                    <col width="20%"/>
                    <col width="*"/>
                    <col width="20%"/>
                    <col width="*"/>
                </colgroup>
                <tr>
                    <th>오늘 가입자</th>
                    <td>{{ $userStats['todayCount'] }}</td>
                    <th>주간 가입자 수</th>
                    <td>{{ $userStats['weeklyUserCount'] }}</td>
                </tr>
                <tr>
                    <th>월간 가입자 수</th>
                    <td>{{ $userStats['monthlyUserCount'] }}</td>
                    <th>전체 가입자 수</th>
                    <td>{{ $userStats['totalUserCount'] }}</td>
                </tr>
            </table>
        </div>
    </div>
</div>
@endsection

@push('styles')
    <link rel="stylesheet" href="/plugin/c3-0.7.20/c3.min.css"/>
@endpush

@push('scripts')
    <script src="/plugin/c3-0.7.20/docs/js/d3-5.8.2.min.js"></script>
    <script src="/plugin/c3-0.7.20/c3.min.js"></script>
    <script>
        let chart_1 = c3.generate({
            bindto: "#visitsChart",
            data: {
                x: 'x',
                columns: [
                    ['x', {!! $visitStats['dates'] !!}],
                    ["신규", {!! $visitStats['cntNews'] !!}],
                    ["재방문", {!! $visitStats['cntRes'] !!}],
                    ["합계", {!! $visitStats['cntTots'] !!}],
                ]
            },
            axis: {
                x: {
                    type: "timeseries",
                    tick: {
                        format: "%m-%d"
                    }
                }
            }
        });

        let chart_2 = c3.generate({
            bindto: "#usersChart",
            data: {
                x: 'x',
                columns: [
                    ['x', {!! $userStats['dates'] !!}],
                    ["신규", {!! $userStats['cntNews'] !!}],
                ]
            },
            axis: {
                x: {
                    type: "timeseries",
                    tick: {
                        format: "%m-%d"
                    }
                }
            }
        });
    </script>
@endpush