@extends('layouts.app')

@section('content')
    <!-- Google Font: Source Sans Pro -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="{{ public_path('/plugins/fontawesome-free/css/all.min.css')  }}">
    <!-- Theme style -->
    <link rel="stylesheet" href="{{ public_path('/dist/css/adminlte.min.css') }}">

    <style>
        .main-sidebar, .main-header, .main-footer {
            display: none;
        }

        .content-wrapper {
            margin-left: 0 !important;
        }
    </style>

    <script>
        window.print();
    </script>
    <div class="card">
        <div class="card-header">
            <h2 style="font-family: arial;">Relatório de websites</h2>
        </div>
        <div class="card-body">
            <table style="width: 100%;">
                <tr>
                    <td>De: {{ date('d/m/Y', strtotime(request()->get('date_init'))) }}</td>
                    <td>Até: {{ date('d/m/Y', strtotime(request()->get('date_end'))) }}</td>
                </tr>
            </table>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="card card-primary">
                <div class="card-header">
                    <h3 class="card-title">Jogos mais jogados</h3>
                </div>
                <div class="card-body">
                    <img src="https://quickchart.io/chart?c={{ $top_games_qtd }}" id="topGamesQtd" style="height: 300px; display: block; width: 500px; margin: 0 auto;"></img>
                </div>
            </div>
        </div>

        <div class="col-md-12">
            <div class="card card-primary">
                <div class="card-header">
                    <h3 class="card-title">Jogos mais apostados</h3>
                </div>
                <div class="card-body">
                    <img src="https://quickchart.io/chart?c={{ $top_games_values }}" id="topGamesQtd" style="height: 300px; display: block; width: 500px; margin: 0 auto;"></img>
                </div>
            </div>
        </div>

        <div class="col-md-12">
            <div class="card card-primary">
                <div class="card-header">
                    <h3 class="card-title">Provedores mais jogados</h3>
                    <div class="card-tools">
                        <button type="button" class="btn btn-tool" data-card-widget="collapse">
                            <i class="fas fa-minus"></i>
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    <div class="chartjs-size-monitor">
                        <div class="chartjs-size-monitor-expand">
                            <div class=""></div>
                        </div>
                        <div class="chartjs-size-monitor-shrink">
                            <div class=""></div>
                        </div>
                    </div>
                    <img src="https://quickchart.io/chart?c={{ $top_providers_qtd }}" id="topGamesQtd" style="height: 300px; display: block; width: 500px; margin: 0 auto;"></img>
                </div>
            </div>
        </div>

        <div class="col-md-12">
            <div class="card card-primary">
                <div class="card-header">
                    <h3 class="card-title">Provedores mais apostados</h3>
                    <div class="card-tools">
                        <button type="button" class="btn btn-tool" data-card-widget="collapse">
                            <i class="fas fa-minus"></i>
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    <div class="chartjs-size-monitor">
                        <div class="chartjs-size-monitor-expand">
                            <div class=""></div>
                        </div>
                        <div class="chartjs-size-monitor-shrink">
                            <div class=""></div>
                        </div>
                    </div>
                    <img src="https://quickchart.io/chart?c={{ $top_providers_values }}" id="topGamesQtd" style="height: 300px; display: block; width: 500px; margin: 0 auto;"></img>
                </div>
            </div>
        </div>

        <div class="col-md-12">
            <div class="card card-primary">
                <div class="card-header">
                    <h3 class="card-title">Top 10 websites</h3>
                </div>
                <div class="card-body">
                    <img src="https://quickchart.io/chart?c={{ $top_websites }}" id="topGamesQtd" style="height: 300px; display: block; width: 500px; margin: 0 auto;"></img>
                </div>
            </div>
        </div>

        <div class="col-md-12">
            <div class="card card-primary">
                <div class="card-header">
                    <h3 class="card-title">Agrupado por dia</h3>
                    <div class="card-tools">
                        <button type="button" class="btn btn-tool" data-card-widget="collapse">
                            <i class="fas fa-minus"></i>
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    <div class="chartjs-size-monitor">
                        <div class="chartjs-size-monitor-expand">
                            <div class=""></div>
                        </div>
                        <div class="chartjs-size-monitor-shrink">
                            <div class=""></div>
                        </div>
                    </div>
                    <img src="https://quickchart.io/chart?c={{ $per_day }}" id="topGamesQtd" style="height: 300px; display: block; width: 500px; margin: 0 auto;"></img>
                </div>
            </div>
        </div>
    </div>
@endsection