@extends('adminlte::page')

@section('title', 'Heroes Legend')

@section('content_header')
    <h1>Dashboard</h1>
@stop

@section('css') 
    <link href="{{ asset('css/common.css') }}" rel="stylesheet" type="text/css">
@stop

@section('content')
    <div class="row">
        <div class="col-md-12">
    </div>
        <div class="col-md-12">
            <div class="box">
                <div class="box-header">
                    <h3 class="box-title">Diamond used by Servers</h3>
                </div>
                <div class="box-body">
                    <form id="date-filter" class="form" action="" method="get" style="margin-top: 20px">
                        <div class="row">
                            <div class="col-sm-4">
                                <div class="form-group">
                                    <label for="date-from">From: </label>
                                    <input class="form-control date" autocomplete="off" type="text" name="date_from"
                                        id="date-from" placeholder="2020-01-01" value="{{isset($dateFrom)? $dateFrom : ''}}"/>
                                </div>
                                <div class="form-group">
                                    <label for="date-to">To: </label>
                                    <input class="form-control date" autocomplete="off" type="text" name="date_to"
                                        id="date-to" placeholder="2020-01-01" value="{{isset($dateTo)? $dateTo : ''}}"/>
                                </div>
                            </div>
                        </div>
                        <button type="submit" class="btn btn-primary">Search</button>
                    </form>
                    <hr/>
                    @if (isset($allServerTotalMoney))
                    <h5>Total Buy: <b>$ {{number_format($allServerTotalMoney, 2, ",", ".")}} </b></h5>
                    @endif
                    <div class="table-responsive">
                        <canvas id="diamond-buy-server-chart" height="100"></canvas>
                    </div>
                </div>
            </div>

            <div class="box" id="diamond-used-by-member-div">
                <div class="box-header">
                    <h3 class="box-title">Diamond used by Members</h3>
                </div>
                <div class="box-body">
                    <form id="search-form" class="form" action="" method="get">
                        <div class="row">
                            <div class="col-sm-4">
                                <div class="form-group">
                                    <label for="server-id">Server ID: </label>
                                    <input min=0 class="form-control" placeholder="Server ID" type="number" name="server_id" id="server-id" value=""/>
                                </div>
                                <div class="form-group">
                                    <label for="member-name">Member Name: </label>
                                    <input class="form-control" placeholder="Member name" type="text" name="member_name" id="member-name" value=""/>
                                </div>
                            </div>
                        </div>
                        <button type="submit" class="btn btn-primary">Search</button>
                        <hr/>
                    </form>
                    <div class="table table-responsive" style="padding-bottom: 100px;">
                        <table id="member-diamond-buy-table" class="table table-striped">
                            <thead>
                            <tr>
                                <th> # </th>
                                <th> Member Name </th>
                                <th> Total Money </th>
                                <th> Action </th>
                            </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        
    </div>
@stop

@section('js')
    <script src="{{ asset('vendor/adminlte/vendor/bootstrap/dist/js/bootstrap-datepicker.min.js.download') }}"></script>
    <script type="text/javascript">
        $('.date').datepicker({
            format: 'yyyy-mm-dd',
            autoclose: true,
            todayHighlight: true,
            defaultDate: '',
            orientation: "bottom",
        })
    </script>
    <script type="text/javascript">
        $(document).ready(function(){
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            oTable = $('#member-diamond-buy-table').DataTable({
                dom: "<'row'<'col-xs-12'<'col-xs-6'l><'col-xs-6'p>>r>"+
                    "<'row'<'col-xs-12't>>"+
                    "<'row'<'col-xs-12'<'col-xs-6'i><'col-xs-6'p>>>",
                bSort: false,
                processing: true,
                language: {
                    loadingRecords: '&nbsp;',
                    processing: '<div class="lds-roller"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>'
                },
                serverSide: true,
                ajax: {
                    url: '{!! route('dashboard.member_diamond_buy') !!}',
                    data: function (d) {
                        d.server_id = $('input[name=server_id]').val();
                        d.date_from = $('input[name=date_from]').val();
                        d.date_to = $('input[name=date_to]').val();
                        d.member_name = $('input[name=member_name]').val();
                    }
                },
                columns: [
                    { data: 'member_id', name: 'member_id' },
                    { data: 'member_name', name: 'member_name' },
                    { data: 'total_money', name: 'total_money' },
                    { data: 'action', name: 'action'},
                ]
            });

            $('#search-form').on('submit', function(e) {
                oTable.draw();
                e.preventDefault();
            });

            let diamondServers = {!! isset($diamondBuyServer) ? $diamondBuyServer : "[]" !!};
            let labels = [];
            let data = [];
            let backgroundColor = [];
            let hoverBackgroundColor = [];
            
            diamondServers.map( (diamondServer, i) => {
                labels.push(`Server: ${diamondServer.server_name} #${diamondServer.server_id}`);
                data.push(Math.round(diamondServer.total_money * 100) / 100);
                colorPair = randomRgbPair();
                backgroundColor.push(rgba2hex(colorPair.color));
                hoverBackgroundColor.push(rgba2hex(colorPair.hoverColor));
            })

            const ctx = document.getElementById("diamond-buy-server-chart");       

            var myPieChart = new Chart(ctx, {
                type: 'pie',
                data: {
                    labels: labels,
                    datasets: [{
                        data: data,
                        backgroundColor: backgroundColor,
                        hoverBackgroundColor: hoverBackgroundColor,
                    }]
                },
                options: {
                    legend: {
                        title: {
                            display: true,
                            text: "Servers"
                        },
                        display: true,
                        position: "right",
                        onHover: (event, chartElement) => {
                            event.target.style.cursor = 'pointer';
                        }
                    },
                    onHover: (event, chartElement) => {
                        event.target.style.cursor = chartElement[0] ? 'pointer' : 'default';
                    }
                },
                
            });

            ctx.onclick = function(e) {
                var slice = myPieChart.getElementAtEvent(e);
                if (!slice.length) return; // return if not clicked on slice
                var label = slice[0]._model.label;
                if (label != "") {
                    var labelArr = label.split("#");
                    var serverID = labelArr[1];
                    $('input[name=server_id]').val(serverID);
                    $('#search-form').submit();
                    $([document.documentElement, document.body]).animate({
                        scrollTop: $("#diamond-used-by-member-div").offset().top
                    }, 1000);
                }
            }

        })
    </script>
@endsection