@extends('adminlte::page')

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

@section('content_header')
    <h1 style="display: inline-block;">Dashboard</h1>
    <div class="pull-right" style="text-align: right; font-size: 14px; line-height: 1.6;">
        <div><i class="fa fa-server"></i> Server: <strong id="server-time"></strong></div>
        <div><i class="fa fa-globe"></i> Vietnam: <strong id="vn-time"></strong></div>
    </div>
@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 bought by Servers</h3>
                </div>
                <div class="box-body">
                    <form id="date-filter" class="form" action="" method="get" style="margin-top: 10px">
                        <div class="row">
                            <div class="col-sm-3">
                                <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>
                            <div class="col-sm-3">
                                <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 class="col-sm-2">
                                <div class="form-group">
                                    <label>&nbsp;</label><br>
                                    <button type="submit" class="btn btn-primary"><i class="fa fa-search"></i> Search</button>
                                </div>
                            </div>
                        </div>
                    </form>
                    <hr/>
                    @if (isset($allServerTotalMoney))
                    <h5>Total Buy: <b>$ {{number_format($allServerTotalMoney, 2, ",", ".")}} </b></h5>
                    @endif
                    <div class="row">
                        <div class="col-md-4">
                            <h4 class="text-center"><strong>By Server</strong></h4>
                            <div style="height: 280px;">
                                <canvas id="diamond-buy-server-chart"></canvas>
                            </div>
                        </div>
                        <div class="col-md-8">
                            <h4 class="text-center"><strong>By Day</strong></h4>
                            <div style="height: 280px;">
                                <canvas id="revenue-by-day-chart"></canvas>
                            </div>
                        </div>
                    </div>
                    <div id="chart-legend" style="margin-top: 15px; text-align: center;"></div>
                </div>
            </div>

            <div class="box" id="diamond-used-by-member-div">
                <div class="box-header">
                    <h3 class="box-title">Diamond bought by Members</h3>
                </div>
                <div class="box-body">
                    <form id="search-form" class="form" action="" method="get">
                        <div class="row">
                            <div class="col-sm-2">
                                <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>
                            <div class="col-sm-3">
                                <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 class="col-sm-2">
                                <div class="form-group">
                                    <label>&nbsp;</label><br>
                                    <button type="submit" class="btn btn-primary"><i class="fa fa-search"></i> Search</button>
                                </div>
                            </div>
                        </div>
                    </form>
                    <hr/>
                    <div class="table table-responsive" style="padding-bottom: 100px;">
                        <table id="member-diamond-buy-table" class="table table-striped">
                            <thead>
                            <tr>
                                <th> #Account ID </th>
                                <th> Member Name </th>
                                <th> Server ID </th>
                                <th> VIP </th>
                                <th> Purchase </th>
                                <th> Total </th>
                                <th> Last Online </th>
                                <th> Registered </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">
        var serverTimezone = 'America/Los_Angeles';
        function updateClocks() {
            var now = new Date();
            var opts = { year:'numeric', month:'2-digit', day:'2-digit', hour:'2-digit', minute:'2-digit', second:'2-digit', hour12:false };

            var serverOpts = Object.assign({}, opts, { timeZone: serverTimezone });
            document.getElementById('server-time').textContent = now.toLocaleString('sv-SE', serverOpts).replace('T',' ');

            var vnOpts = Object.assign({}, opts, { timeZone: 'Asia/Ho_Chi_Minh' });
            document.getElementById('vn-time').textContent = now.toLocaleString('sv-SE', vnOpts).replace('T',' ');
        }
        updateClocks();
        setInterval(updateClocks, 1000);
    </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>>>",
                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: false,
                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();
                    }
                },
                order: [[4, 'desc']],
                columns: [
                    { data: 'member_id', name: 'member_id' },
                    { data: 'member_name', name: 'member_name' },
                    { data: 'server_id', name: 'server_id' },
                    { data: 'vip_level', name: 'vip_level', orderable: false, searchable: false },
                    { data: 'total_money', name: 'total_money' },
                    { data: 'total_alltime', name: 'total_alltime', searchable: false },
                    { data: 'last_online', name: 'last_online', orderable: false, searchable: false },
                    { data: 'register_time', name: 'register_time', orderable: false, searchable: false },
                    { data: 'action', name: 'action', orderable: false, searchable: false },
                ]
            });

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

            // Build shared color map per server
            let diamondServers = {!! isset($diamondBuyServer) ? $diamondBuyServer : "[]" !!};
            var serverColorMap = {};
            diamondServers.forEach(function(ds) {
                var cp = randomRgbPair();
                serverColorMap[ds.server_id] = {
                    name: ds.server_name,
                    color: rgba2hex(cp.color),
                    hoverColor: rgba2hex(cp.hoverColor)
                };
            });

            // Pie chart - by server
            let pieLabels = [];
            let pieData = [];
            let pieBg = [];
            let pieHoverBg = [];

            diamondServers.forEach(function(ds) {
                var sc = serverColorMap[ds.server_id];
                pieLabels.push('S' + ds.server_id);
                pieData.push(Math.round(ds.total_money * 100) / 100);
                pieBg.push(sc.color);
                pieHoverBg.push(sc.hoverColor);
            });

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

            var myPieChart = new Chart(ctx, {
                type: 'pie',
                data: {
                    labels: pieLabels,
                    datasets: [{
                        data: pieData,
                        backgroundColor: pieBg,
                        hoverBackgroundColor: pieHoverBg,
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    legend: { display: false },
                    tooltips: {
                        callbacks: {
                            label: function(tooltipItem, data) {
                                var label = data.labels[tooltipItem.index] || '';
                                var value = data.datasets[0].data[tooltipItem.index];
                                return label + ': $ ' + value.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2});
                            }
                        }
                    },
                    onHover: (event, chartElement) => {
                        event.target.style.cursor = chartElement[0] ? 'pointer' : 'default';
                    }
                },
            });

            // Bar chart - revenue by day
            var dateFrom = $('input[name=date_from]').val() || '{{ $dateFrom }}';
            var dateTo = $('input[name=date_to]').val() || '{{ $dateTo }}';
            $.get('{!! route('dashboard.revenue_by_day') !!}', { date_from: dateFrom, date_to: dateTo }, function(revenueData) {
                var dates = [...new Set(revenueData.map(r => r.buy_date))].sort();
                var servers = {};
                revenueData.forEach(function(r) {
                    var key = r.server_id;
                    if (!servers[key]) {
                        // Reuse color from pie chart, or generate new if server not in pie data
                        var sc = serverColorMap[key];
                        if (!sc) {
                            var cp = randomRgbPair();
                            sc = { name: r.server_name, color: rgba2hex(cp.color), hoverColor: rgba2hex(cp.hoverColor) };
                            serverColorMap[key] = sc;
                        }
                        servers[key] = { name: sc.name, id: key, color: sc.color, hoverColor: sc.hoverColor, data: {} };
                    }
                    servers[key].data[r.buy_date] = parseFloat(r.total_money);
                });

                var datasets = [];
                Object.keys(servers).sort(function(a,b){ return a - b; }).forEach(function(key) {
                    var srv = servers[key];
                    datasets.push({
                        label: 'S' + srv.id,
                        backgroundColor: srv.color,
                        hoverBackgroundColor: srv.hoverColor,
                        data: dates.map(function(d) { return srv.data[d] || 0; })
                    });
                });

                var ctxBar = document.getElementById("revenue-by-day-chart");
                new Chart(ctxBar, {
                    type: 'bar',
                    data: { labels: dates, datasets: datasets },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        scales: {
                            xAxes: [{ stacked: true }],
                            yAxes: [{
                                stacked: true,
                                ticks: {
                                    beginAtZero: true,
                                    callback: function(value) { return '$ ' + value.toLocaleString(); }
                                }
                            }]
                        },
                        tooltips: {
                            callbacks: {
                                label: function(tooltipItem, data) {
                                    var label = data.datasets[tooltipItem.datasetIndex].label || '';
                                    return label + ': $ ' + tooltipItem.yLabel.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2});
                                }
                            }
                        },
                        legend: { display: false }
                    }
                });

                // Shared legend
                var legendHtml = '<div style="display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;">';
                Object.keys(serverColorMap).sort(function(a,b){ return a - b; }).forEach(function(key) {
                    var sc = serverColorMap[key];
                    legendHtml += '<span style="display: inline-flex; align-items: center; gap: 4px; font-size: 13px;">'
                        + '<span style="display: inline-block; width: 14px; height: 14px; border-radius: 3px; background:' + sc.color + ';"></span>'
                        + 'S' + key
                        + '</span>';
                });
                legendHtml += '</div>';
                document.getElementById('chart-legend').innerHTML = legendHtml;
            });

            ctx.onclick = function(e) {
                var slice = myPieChart.getElementAtEvent(e);
                if (!slice.length) return;
                var index = slice[0]._index;
                var serverID = diamondServers[index].server_id;
                $('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