@extends('adminlte::page')

@section('title', 'AdminLTE')

@section('content_header')
    <!-- <h1>Dashboard</h1> -->
@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">User <b>{{$member->member_name}}</b> (#{{$member->member_id}})</h3>
                </div>
                <div class="box-body">
                    <a href="{{ route('members.index_v2') }}" title="Back">
                        <button class="btn btn-warning btn-sm"><i class="fa fa-arrow-left" aria-hidden="true"></i> Back
                        </button>
                    </a>

                    <br><br>

                    <div class="table-responsive">
                        <table class="table table-borderless">
                            <tbody>
                            <tr>
                                <th> Member ID</th>
                                <td>{{$member->member_id}}</td>
                            </tr>
                            <tr>
                                <th> Member Account ID</th>
                                <td>{{$member->member_account_id}}</td>
                            </tr>
                            <tr>
                                <th> Member Server</th>
                                <td>{{$member->member_server}}</td>
                            </tr>
                            <tr>
                                <th> Member Name</th>
                                <td>{{$member->member_name}}</td>
                            </tr>
                            <tr>
                                <th> Member Code</th>
                                <td>{{$member->member_code}}</td>
                            </tr>
                            <tr>
                                <th> Member Level</th>
                                <td>{{$member->member_level}}</td>
                            </tr>
                            <tr>
                                <th> Member Exp</th>
                                <td>{{$member->member_exp}}</td>
                            </tr>
                            <tr>
                                <th> Member Gold</th>
                                <td>{{$member->member_gold}}</td>
                            </tr>
                            <tr>
                                <th> Member Stamina</th>
                                <td>{{$member->member_stamina}}</td>
                            </tr>
                            <tr>
                                <th> Member Last Online</th>
                                <td>{{ date("d/m/Y",$member->member_last_online) }}</td>
                            </tr>
                            <tr>
                                <th> Member Country</th>
                                <td>{{$member->member_country}}</td>
                            </tr>
                            <tr>
                                <th> Member Device</th>
                                <td>{{$member->member_device}}</td>
                            </tr>
                            <tr>
                                <th> Member Account ID</th>
                                <td>{{$member->member_account_id}}</td>
                            </tr>
                            <tr>
                                <th> Member Facebook ID</th>
                                <td>{{$member->member_facebook_id}}</td>
                            </tr>
                            <tr>
                                <th> Member Google ID</th>
                                <td>{{$member->member_google_id}}</td>
                            </tr>
                            <tr>
                                <th> Member Game Center ID</th>
                                <td>{{$member->member_game_center_id}}</td>
                            </tr>
                            <tr>
                                <th> Member Account Type</th>
                                <td>{{$member->member_account_type}}</td>
                            </tr>
                            <tr>
                                <th> Member Diamond</th>
                                <td>{{$member->member_diamond}}</td>
                            </tr>
                            <tr>
                                <th> Member Ability</th>
                                <td>{{$member->member_ability}}</td>
                            </tr>
                            <tr>
                                <th> Member Register Time</th>
                                <td> {{ date("d/m/Y", $member->member_register_time) }}</td>
                            </tr>
                            <tr>
                                <th> Member Border</th>
                                <td>{{$member->member_border}}</td>
                            </tr>
                            <tr>
                                <th> Member Avatar</th>
                                <td>{{$member->member_avatar}}</td>
                            </tr>
                            <tr>
                                <th> Treasure Stamina</th>
                                <td>{{$member->treasure_stamina}}</td>
                            </tr>
                            <tr>
                                <th> Diamond Total Buy</th>
                                <td>{{$member->diamond_total_buy}}</td>
                            </tr>
                            <tr>
                                <th> Diamond Total Use</th>
                                <td>{{$member->diamond_total_use}}</td>
                            </tr>
                            <tr>
                                <th> Member Guild</th>
                                <td>{{$member->member_guild}}</td>
                            </tr>
                            <tr>
                                <th> Guild Permission</th>
                                <td>{{$member->guild_permission}}</td>
                            </tr>
                            <tr>
                                <th> Guild Member Homage</th>
                                <td>{{$member->guild_member_homage}}</td>
                            </tr>
                            <tr>
                                <th> Hall Legend Gem</th>
                                <td>{{$member->hall_legend_gem}}</td>
                            </tr>
                            <tr>
                                <th> Arena Gem</th>
                                <td> {{$member->arena_gem}}</td>
                            </tr>
                            <tr>
                                <th> Crucible Gem</th>
                                <td>{{$member->crucible_gem}}</td>
                            </tr>
                            <tr>
                                <th> Super Arena gem</th>
                                <td> {{$member->super_arena_gem}} </td>
                            </tr>
                            <tr>
                                <th> Last Request RND</th>
                                <td>{{$member->last_request_rnd}} </td>
                            </tr>
                            <tr>
                                <th> Hero List <br/>
                                    <small><a href="{{route('hero', $member->member_id)}}">View detail</a></small>
                                </th>
                                <td>
                                    <canvas id="myChart" height="80"></canvas>
                                </td>
                                </tr>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@stop

<script>
    function enable() {
        document.getElementById("bt_banned_status").disabled = false;
    }
</script>

@section('js')
    <script type="text/javascript">
        let heros = {!! $hero_data !!};
        let labels = [];
        let data = [];
        heros.map( (hero, i) => {
            let level = i + 1;
            while (level < hero.hero_star) {
                labels.push(`${level} stars`)
                data.push(0)
                level++
            }
            labels.push(`${heros[i].hero_star} stars`)
            data.push(heros[i].hero_count)
        })
        console.log(heros)

        const ctx = document.getElementById("myChart");
        const myBarChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: labels,
                fill: false,
                datasets: [
                    {
                        fill: false,
                        label: "Number of heros",
                        borderColor: "#75a5c3",
                        pointRadius: 5,
                        pointHoverRadius: 7,
                        pointBackgroundColor: "#3e95cd",
                        barPercentage: 0.5,
                        data: data
                    }
                ]
            },
            options: {
                hover: {
                    animationDuration: 0
                },
                animation: {
                    duration: 1,
                    onComplete: function() {
                        const chartInstance = this.chart,
                            ctx = chartInstance.ctx;

                        ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
                        ctx.textAlign = 'center';
                        ctx.textBaseline = 'bottom';

                        this.data.datasets.forEach(function(dataset, i) {
                            var meta = chartInstance.controller.getDatasetMeta(i);
                            meta.data.forEach(function(bar, index) {
                                var data = dataset.data[index];
                                ctx.fillText(data, bar._model.x, bar._model.y - 10);
                            });
                        });
                    }
                },
                tooltips: {
                    enabled: false
                },
                legend: {
                    display: true,
                },
                scales: {
                    yAxes: [{
                        gridLines: {
                            display: true
                        },
                        ticks: {
                            max: Math.max(...data) + 3,
                            beginAtZero: true
                        }
                    }],
                    xAxes: [{
                        gridLines: {
                            display: false
                        },
                        ticks: {
                            min: 0,
                            beginAtZero: true
                        }
                    }]
                },
            }
        });
    </script>
@endsection