@extends('backendTools.layouts.backend')

@section('title', '後台工具')

@section('header')
    <i class="bi bi-toolbox me-2"></i>後台小工具
@endsection

@section('content')
    <hr>
    {{-- 一個資訊小卡片 --}}
    <div class="col">
        <div class="card shadow mb-4">
            <div class="card-header">
                <i class="bi bi-person-circle me-2"></i>使用者資訊
            </div>
            <div class="card-body">
                @if (isset($loginUser))
                    <p class="card-text"><strong>UID:</strong> {{ $loginUser->uid }}</p>
                    <p class="card-text"><strong>名稱:</strong> {{ $loginUser->cagent }}</p>
                @else
                    <p class="card-text">無法載入使用者資訊。</p>
                @endif
            </div>
        </div>
        {{-- dataland --}}
        <div class="card shadow">
            <div class="card-header">
                <i class="bi bi-bar-chart-fill me-2"></i>Dataland Chart
            </div>
            <div class="card-body">
                <div id="chart-container" style="height: 500px;"></div>
            </div>
        </div>
        <p></p>
        {{-- error log --}}
        <div class="card shadow">
            <div class="card-header">
                <i class="bi bi-bug-fill me-2"></i>Error log Today
            </div>
            <div class="card-body">
                <p class="card-text"><strong>前台錯誤數量 : </strong> {{ $error_log[2] }}</p>
                <p class="card-text"><strong>後台錯誤數量 : </strong> {{ $error_log[1] }}</p>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const chartContainer = document.getElementById('chart-container');
            const chart = Highcharts.chart(chartContainer, {
                chart: {
                    type: 'areaspline',
                    zoomType: 'x',
                    backgroundColor: '#f8f9fa',
                    events: {
                        load: function() {
                            this.showLoading('正在載入...');
                        }
                    }
                },
                title: {
                    text: '近期投注與派彩趨勢圖',
                    style: {
                        color: '#333',
                        fontWeight: 'bold'
                    }
                },
                xAxis: {
                    categories: {!! json_encode(array_keys($data_land_chart['sum_bet'])) !!},
                    title: {
                        text: '日期'
                    },
                    labels: {
                        style: {
                            color: '#666'
                        }
                    }
                },
                yAxis: {
                    title: {
                        text: '額度',
                        style: {
                            color: '#666'
                        }
                    },
                    labels: {
                        style: {
                            color: '#666'
                        }
                    }
                },
                tooltip: {
                    shared: true,
                    useHTML: true,
                    headerFormat: '<b>{point.key}</b><br/>',
                    pointFormatter: function() {
                        const rtpMap = {!! json_encode($data_land_chart['RTP']) !!};
                        const rtp = rtpMap[this.category] !== undefined ? rtpMap[this.category] + '%' :
                            'N/A';
                        let pointFormat =
                            `<span style="color:{series.color}">{series.name}</span>: <b>{point.y:,.0f}</b><br/>`;
                        if (this.series.index === 1) {
                            pointFormat += `RTP: <b>${rtp}</b><br/>`;
                        }
                        return Highcharts.format(pointFormat, this);
                    },
                    backgroundColor: 'rgba(0, 0, 0, 0.75)',
                    style: {
                        color: '#fff'
                    }
                },
                plotOptions: {
                    areaspline: {
                        fillOpacity: 0.5,
                        marker: {
                            enabled: false
                        }
                    }
                },
                series: [{
                    name: '投注額度',
                    data: {!! json_encode(array_values($data_land_chart['sum_bet'])) !!},
                    color: '#007bff',
                    fillColor: {
                        linearGradient: {
                            x1: 0,
                            y1: 0,
                            x2: 0,
                            y2: 1
                        },
                        stops: [
                            [0, Highcharts.getOptions().colors[0]],
                            [1, Highcharts.color(Highcharts.getOptions().colors[0]).setOpacity(
                                0).get('rgba')]
                        ]
                    }
                }, {
                    name: '派彩額度',
                    data: {!! json_encode(array_values($data_land_chart['sum_win'])) !!},
                    color: '#28a745',
                    fillColor: {
                        linearGradient: {
                            x1: 0,
                            y1: 0,
                            x2: 0,
                            y2: 1
                        },
                        stops: [
                            [0, Highcharts.getOptions().colors[1]],
                            [1, Highcharts.color(Highcharts.getOptions().colors[1]).setOpacity(
                                0).get('rgba')]
                        ]
                    }
                }],
                credits: {
                    enabled: false
                }
            });
            chart.hideLoading();
        });
    </script>
@endpush