@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-7">
                                <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-5">
                                <div class="float-right">
                                    <div class="btn-group btn-group-toggle" data-toggle="buttons">
                                        <label class="btn btn-outline-secondary {{active('date', 'today', 'focus active')}}">
                                            <input type="radio" id="date" name="date"
                                                   value="today" {{active('date', 'today', 'checked')}}">
                                            @lang('Today')
                                        </label>
                                        <label
                                            class="btn btn-outline-secondary {{active('date', 'yesterday', 'focus active')}}">
                                            <input type="radio" id="date" name="date"
                                                   value="yesterday" {{active('date', 'yesterday', 'checked')}}">
                                            @lang('Yesterday')
                                        </label>
                                        <label
                                            class="btn btn-outline-secondary {{active('date', 'this_week', 'focus active')}}">
                                            <input type="radio" id="date" name="date"
                                                   value="this_week" {{active('date', 'this_week', 'checked')}}">
                                            @lang('This Week')
                                        </label>
                                        <label
                                            class="btn btn-outline-secondary {{active('date', 'last_week', 'focus active')}}">
                                            <input type="radio" id="date" name="date"
                                                   value="last_week" {{active('date', 'last_week', 'checked')}}">
                                            @lang('Last Week')
                                        </label>
                                        <label
                                            class="btn btn-outline-secondary {{active('date', 'this_month', 'focus active')}}">
                                        <input type="radio" id="date" name="date"
                                               value="this_month" {{active('date', 'this_month', 'checked')}}">
                                        @lang('This Month')
                                        </label>
                                        <label
                                            class="btn btn-outline-secondary {{active('date', 'last_six_months', 'focus active')}}">
                                            <input type="radio" id="date" name="date"
                                                   value="last_six_months" {{active('date', 'last_six_months', 'checked')}}>
                                            @lang('Last 6 Months')
                                        </label>
                                        <button class="btn btn-secondary" id="refreshDashboard">
                                            @lang('Search')
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- end page title -->

                    <div class="row">
                        <div class="col-8" id="rendered">
                            @include('home.render')
                        </div>
                        <div class="col-4">
                            <div class="card">
                                <div class="card-body" style="min-height: 750px">
                                    <div class="form-group">
                                        <label>{{ __('Filter By Skins:') }}</label>
                                        <select class="form-control js-select2 text-uppercase" multiple="multiple"
                                                name="skin_select[]">
                                            @foreach ($skinGroups as $skinGroup)
                                                <optgroup label="{{ $skinGroup->description }}">
                                                    @foreach ($skinGroup->skins as $skin)
                                                        @if (request()->get('skin_select'))
                                                        @php
                                                            $check = in_array($skin->skinid, request()->get('skin_select')) ?
                                                            'selected' : ''
                                                        @endphp
                                                            <option value="{{ $skin->skinid }}" class="pl-1" {{$check}}>
                                                                {{ $skin->name }}
                                                            </option>
                                                        @else
                                                            <option value="{{ $skin->skinid }}" class="pl-1">
                                                                {{ $skin->name }}
                                                            </option>
                                                        @endif

                                                    @endforeach
                                                </optgroup>
                                            @endforeach
                                        </select>
                                    </div>
                                    <h3 class="card-title font-16 mb-4">
                                        @lang('Analytics')
                                    </h3>
                                    <style type="text/css">
                                        .reformat {
                                            margin: 5px;
                                            cursor: pointer;
                                            min-width: 45%;
                                        }
                                    </style>
                                    <div class="btn-group-toggle mb-2" data-toggle="buttons">
                                        <button class="btn btn-outline-secondary reformat" 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" 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" 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" 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" 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" data-toggle="modal"
                                                data-target="#losingProvidersModal">
                                            <i class="fa fa-table fa-5x"></i><br>
                                            Top Losing Providers
                                        </button>

                                        <div class="mt-4 mb-4"></div>
                                        <label
                                            class="btn btn-outline-secondary reformat {{active('chart', 'ggr', 'focus active')}}">
                                            <input type="radio" id="chart" name="chart"
                                                   value="ggr" {{active('chart', 'ggr', 'checked')}}>
                                            <i class="fa fa-chart-area fa-5x"></i><br>
                                            GGR
                                        </label>
                                        <label
                                            class="btn btn-outline-secondary reformat {{active('chart', 'bet_count', 'focus active')}}">
                                            <input type="radio" id="chart" name="chart"
                                                   value="bet_count" {{active('chart', 'bet_count', 'checked')}}>
                                            <i class="fa fa-chart-area fa-5x"></i><br>
                                            Bet Counts
                                        </label>
                                        <label
                                            class="btn btn-outline-secondary reformat {{active('chart', 'bet_amount', 'focus active')}}">
                                            <input type="radio" id="chart" name="chart"
                                                   value="bet_amount" {{active('chart', 'bet_amount', 'checked')}}>
                                            <i class="fa fa-chart-area fa-5x"></i><br>
                                            Bet Amounts
                                        </label>
                                        <label
                                            class="btn btn-outline-secondary reformat {{active('chart', 'device_history', 'focus active')}}">
                                            <input type="radio" id="chart" name="chart"
                                                   value="device_history" {{active('chart', 'device_history', 'checked')}}>
                                            <i class="fa fa-chart-area fa-5x"></i><br>
                                            Devices
                                        </label>
                                        <label
                                            class="btn btn-outline-secondary reformat {{active('chart', 'provider_bet_history', 'focus active')}}">
                                            <input type="radio" id="chart" name="chart"
                                                   value="provider_bet_history" {{active('chart', 'provider_bet_history', 'checked')}}>
                                            <i class="fa fa-chart-area fa-5x"></i><br>
                                            Provider Bets
                                        </label>
                                        <label
                                            class="btn btn-outline-secondary reformat  {{active('chart', 'top_game_history', 'focus active')}}">
                                            <input type="radio" id="chart" name="chart"
                                                   value="top_game_history" {{active('chart', 'top_game_history', 'checked')}}>
                                            <i class="fa fa-chart-area fa-5x"></i><br>
                                            Top Games
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- container-fluid -->
        </div>
    </form>
    <!-- content -->
@endsection
@section('script')
    <script type="text/javascript">
        $(document).ready(function () {
            $('.js-select2').select2({
                placeholder: "All",
                templateResult: function (data) {
                    if (!data.element) {
                        return data.text;
                    }
                    var $element = $(data.element);
                    var $wrapper = $('<span></span>');
                    $wrapper.addClass($element[0].className);
                    $wrapper.text(data.text);

                    return $wrapper;
                }
            });

            @if (isset($chart['labels']) && isset($chart['datasets']))
            let chartX = document.getElementById("chartX").getContext("2d");
            let defaultChart = new Chart(chartX, {
                type: '{{ $type }}',
                data: {
                    labels: @json($chart['labels']),
                    datasets: @json($chart['datasets']),
                },
                options: {
                    responsive: true,
                }
            });
            @endif

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

    </script>
@endsection