@extends('layouts.dashboard')

@section('css')
    <link rel="stylesheet" href="/plugins/chartist/css/chartist.min.css">
    <link rel="stylesheet" href="/plugins/morris/morris.css">
@endsection

@section('page-title'){{ __('BackOffice Dashboard') }}@endsection

@section('menu'){{ __('Dashboard') }}@endsection

@section('content')
    <form action="/new-dashboard" method="GET" class="search">
        <div class="content-page">
            <!-- Start content -->
            <div class="content">
                <div class="container-fluid">
                    <!-- start page title -->
                    <div class="page-title-box">
                        <div class="row align-items-center">
                            <div class="col-4">
                                <h6 class="page-title">
                                    @lang('Dashboard')
                                </h6>
                                <ol class="breadcrumb m-0">
                                    <li class="breadcrumb-item active" aria-current="page">
                                        @lang('Summary')
                                    </li>
                                </ol>
                            </div>
                            <div class="col-8">
                                <div class="float-right">

                                    <div class="btn-group btn-group-toggle" data-toggle="buttons">
                                        <label class="btn btn-outline-secondary {{ request()->get('date') === 'today' ? 'focus active' : '' }}">
                                            <input type="radio" id="date" name="date"
                                                   value="today" {{ request()->get('date') === 'today' ? 'focus active' : ''  }}">
                                            @lang('Today')
                                        </label>
                                        <label
                                            class="btn btn-outline-secondary {{ request()->get('date') === 'yesterday' ? 'focus active' : '' }}">
                                            <input type="radio" id="date" name="date"
                                                   value="yesterday" {{ request()->get('date') === 'yesterday' ? 'checked' : '' }}">
                                            @lang('Yesterday')
                                        </label>

                                    </div>
                                    <div class="btn-group ml-3">
                                        <button class="btn btn-secondary" id="refreshDashboard">
                                            @lang('Generate')
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- end page title -->
                    <div class="row">
                        <div class="col-2 d-none">
                            <div class="skins" style="height: 750px; overflow-y: scroll; overflow-x: hidden"></div>
                            <div class="games d-none" style="height: 750px; overflow-y: scroll; overflow-x: hidden"></div>
                        </div>
                        <div class="col-8">
                            <div class="tab-content" id="report-tabContent">
                                @foreach ($reports as $key => $report)
                                    <div class="card tab-pane fade {{ $report['selected'] === true ? 'fade show active' : 'fade show active' }}" id="{{$key}}">
                                        <div class="card-body">
                                            <h5 class="card-title font-16 mb-4 d-flex justify-content-between align-items-center">
                                                {{ $report['title'] }}

                                                @if ($key === 'active_skin_history')
                                                    <button type="button" class="btn btn-sm btn-primary" onclick="return false;" data-toggle="modal"
                                                            data-target="#activeSkinsModal">
                                                        @lang('Details')
                                                    </button>
                                                @endif
                                            </h5>
                                            @if (isset($report['chart']['labels'], $report['chart']['datasets']))
                                            <canvas id="{{$key}}Chart" class="morris-charts morris-chart-height"  style="min-height: 400px"></canvas>
                                            @else
                                                <div class="alert alert-danger" role="alert">
                                                    No Results!
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="card">
                                <div class="card-body" style="min-height: 750px">
                                    <h3 class="card-title font-16 mb-4">
                                        @lang('Analytics')
                                    </h3>
                                    <input type="hidden" name="skins">
                                    <input type="hidden" name="games">
                                    <div class="mb-2 d-flex flex-wrap">
                                        <button class="btn btn-outline-secondary reformat" onclick="return false;" data-toggle="modal"
                                                data-target="#winningPlayersModal">
                                            <i class="fa fa-table fa-5x"></i><br>
                                            Top Winning Players
                                        </button>
                                        <button class="btn btn-outline-secondary reformat" onclick="return false;" data-toggle="modal"
                                                data-target="#losingPlayersModal">
                                            <i class="fa fa-table fa-5x"></i><br>
                                            Top Losing Players
                                        </button>
                                        <button class="btn btn-outline-secondary reformat" onclick="return false;" data-toggle="modal"
                                                data-target="#winningGamesModal">
                                            <i class="fa fa-table fa-5x"></i><br>
                                            Top Winning Games
                                        </button>
                                        <button class="btn btn-outline-secondary reformat" onclick="return false;" data-toggle="modal"
                                                data-target="#losingGamesModal">
                                            <i class="fa fa-table fa-5x"></i><br>
                                            Top Losing Games
                                        </button>
                                        <button class="btn btn-outline-secondary reformat" onclick="return false;" data-toggle="modal"
                                                data-target="#winningProvidersModal">
                                            <i class="fa fa-table fa-5x"></i><br>
                                            Top Winning Providers
                                        </button>
                                        <button class="btn btn-outline-secondary reformat" onclick="return false;" data-toggle="modal"
                                                data-target="#losingProvidersModal">
                                            <i class="fa fa-table fa-5x"></i><br>
                                            Top Losing Providers
                                        </button>
                                    </div>
                                    <div class="nav" id="nav-tab">
                                        <style type="text/css">
                                            .reformat {
                                                margin: 5px;
                                                cursor: pointer;
                                                min-width: 48%;
                                            }
                                            .collapse-row.collapsed + tr {
                                                display: none;
                                            }
                                        </style>
                                        @foreach ($reports as $key => $report)
                                            <button class="btn btn-outline-secondary reformat d-none {{ $report['selected'] === true ? 'active' : '' }}" id="{{ $key }}" data-toggle="tab" href="#{{ $key }}">
                                                <i class="fa fa-chart-bar fa-5x"></i><br>
                                                {{ $report['title'] }}
                                            </button>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- container-fluid -->
        </div>
    </form>
    <!-- content -->
    <!-- Modals -->
    @include('home.rankings.ranking-modal', [
        'modalType' => 'winningPlayers',
        'modalView' => 'playerRankings',
        'modalTitle' => 'Top Winning Players',
        'modalDataSet' => $models['playerHistories']['winners']
    ])

    @include('home.rankings.ranking-modal', [
        'modalType' => 'losingPlayers',
        'modalView' => 'playerRankings',
        'modalTitle' => 'Top Losing Players',
        'modalDataSet' => $models['playerHistories']['losers']
    ])
    @include('home.rankings.ranking-modal', [
        'modalType' => 'winningGames',
        'modalView' => 'gameRankings',
        'modalTitle' => 'Top Winning Games',
        'modalDataSet' => $models['gameHistories']['winners']
    ])

    @include('home.rankings.ranking-modal', [
        'modalType' => 'losingGames',
        'modalView' => 'gameRankings',
        'modalTitle' => 'Top Losing Games',
        'modalDataSet' => $models['gameHistories']['losers']
    ])

    @include('home.rankings.ranking-modal', [
        'modalType' => 'winningProviders',
        'modalView' => 'providerRankings',
        'modalTitle' => 'Top Winning Providers',
        'modalDataSet' => $models['providerHistories']['winners']
    ])

    @include('home.rankings.ranking-modal', [
        'modalType' => 'losingProviders',
        'modalView' => 'providerRankings',
        'modalTitle' => 'Top Losing Providers',
        'modalDataSet' => $models['providerHistories']['losers']
    ])
    {{--
    @include('home.rankings.ranking-modal', [
        'modalType' => 'activeSkins',
        'modalView' => 'activeSkins',
        'modalTitle' => 'Active Skin Details',
        'modalDataSet' => $models['activeSkinHistories']
    --}}
])
@endsection
@section('script')
    <script src="/assets/js/common/tree.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('[data-toggle="tooltip"]').tooltip({
                'html' : true,
            })
        })
        function buildTreeBySkins() {
            let tree = new Tree('.skins', {
                data: [{
                    id: '-1',
                    text: 'All',
                    children: @json($skinGroups['byGroupedPartners']),
                    checked: true,
                }],
                closeDepth: 10,
                loaded: function () {

                },
                onChange: function () {
                    console.log(this.values);
                    $('input[name=skins]').val(this.values);
                }
            })
        }
        function buildTreeByPartners() {
            let tree = new Tree('.skins', {
                data: [{
                    id: '-1',
                    text: 'All',
                    children: @json($skinGroups['byOnlyPartners']),
                    checked: true,
                }],
                closeDepth: 10,
                loaded: function () {

                },
                onChange: function () {
                    console.log(this.values);
                    $('input[name=skins]').val(this.values);
                }
            })
        }
        function buildTreeByGameProviders() {
            let tree = new Tree('.games', {
                data: [{
                    id: '-1',
                    text: 'All',
                    children: @json($gameProviders),
                    checked: true,
                }],
                closeDepth: 10,
                loaded: function () {

                },
                onChange: function () {
                    console.log(this.values);
                    $('input[name=games]').val(this.values);
                }
            })
        }
        $(document).ready(function () {
            @if (request()->get('compare_by') === 'partners')
                buildTreeByPartners();
            @elseif (request()->get('compare_by') === 'skins')
                buildTreeBySkins();
            @else
                buildTreeByPartners();
            @endif

            //buildTreeByGameProviders();

            @foreach($reports as $key => $report)
                @if (isset($report['chart']['labels'], $report['chart']['datasets']))
                    let {{$key}} = document.getElementById("{{$key}}Chart").getContext("2d");
                    let {{$key}}Chart = new Chart({{$key}}, {
                        type: '{{ $report['type'] }}',
                        data: {
                            labels: @json($report['chart']['labels']),
                            datasets: @json($report['chart']['datasets']),
                        },
                        options: {
                            responsive: true,
                        }
                    });
                @endif
            @endforeach

            $('#refreshDashboard').click(function () {
                $('.search').first().submit();
            })
        })

    </script>
@endsection