@extends('admin.layouts.app')

@section('content')
<div class="container-fluid">
    <h2>로그인 통계</h2>
    <hr/>
    @include('admin.messages')
    @include('admin.user.log.login.navTabs')

    <form name="f_admin_search" id="fAdminSearch" method="get" action="{{ route('admin.user.log.login.stat.index') }}">
        <div class="row g-2">
            <label class="col-auto col-form-label">기간</label>
            <div class="col-auto">
                <input type="date" name="start_date" id="startDate" class="form-control" value="{{ $startDate }}" />
            </div>
            <div class="col-auto">~</div>
            <div class="col-auto">
                <div class="input-group">
                    <input type="date" name="end_date" id="endDate" class="form-control" value="{{ $endDate }}" />
                    <button type="submit" class="btn btn-dark">검색</button>
                </div>
            </div>
        </div>
    </form>

    <div class="row pt-4 pb-2">
        <div class="col">
            <div class="btn-group btn-group-toggle">
                <button name="success" class="btn btn-outline-secondary @if($success == '1') active @endif" value="1" form="fAdminSearch">성공</button>
                <button name="success" class="btn btn-outline-secondary @if($success == '0') active @endif" value="0" form="fAdminSearch">실패</button>
            </div>
            <div class="btn-group btn-group-toggle">
                <button name="date_type" class="btn btn-outline-secondary @if($dateType == 'd') active @endif" value="d" form="fAdminSearch">일별</button>
                <button name="date_type" class="btn btn-outline-secondary @if($dateType == 'm') active @endif" value="m" form="fAdminSearch">월별</button>
                <button name="date_type" class="btn btn-outline-secondary @if($dateType == 'y') active @endif" value="y" form="fAdminSearch">년도별</button>
            </div>
        </div>
    </div>

    <div id="chart_1"></div>

    <form name="f_admin_list" id="fAdminList" method="post">
        @csrf
        <div class="table-responsive">
            <table class="table table-hover table-bordered table-nowrap">
                <thead>
                    <tr>
                        <th>기간</th>
                        <th>횟수</th>
                        <th>비율</th>
                        <th>그래프</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($result as $date => $row)
                    <tr>
                        <td>{{ $date }}</td>
                        <td>{{ $row['count'] }}</td>
                        <td>{{ $row['sRate'] }}%</td>
                        <td>
                            <div class="progress">
                                <div class="progress-bar bg-success" role="progressbar" style="width: {{ $row['sRate'] }}%;" aria-valuenow="{{ $row['sRate'] }}" aria-valuemin="0" aria-valuemax="100">{{ $row['sRate'] }}%</div>
                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </form>
</div>

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script type="module">
$(function() {

    // Load the Visualization API and the corechart package.
    google.charts.load('current', {'packages':['corechart']});

    // Set a callback to run when the Google Visualization API is loaded.
    google.charts.setOnLoadCallback(drawChart);

    // Callback that creates and populates a data table,
    // instantiates the pie chart, passes in the data and
    // draws it.
    function drawChart() {

        let data = new google.visualization.DataTable();

        data.addColumn('string', '기간');
        data.addColumn('number', '횟수');
        data.addRows([
            @foreach($result as $k => $v)
                ['{{ $k }}', {{ $v['count'] }}],
            @endforeach
        ]);

        let chart = new google.visualization.AreaChart(document.getElementById('chart_1'));

        chart.draw(data, {
            width: '100%', height: '400',
            legendTextStyle: {fontName: 'gulim', fontSize: '12'},
            tooltipTextStyle: {color: '#006679', fontName: 'dotum', fontSize: '12'},
            hAxis: {textStyle: {color: '#959595', fontName: 'dotum', fontSize: '12'}},
            vAxis: {textStyle: {color: '#959595', fontName: 'dotum', fontSize: '12'}, gridlineColor: '#e1e1e1', baselineColor: '#e1e1e1', textPosition: 'out'},
            lineWidth: 3,
            pointSize: 5
        });
    }
});
</script>
@endsection
