@extends('Common::admin.layout.page')
@section('page')
    <!-- Small boxes (Stat box) -->
    <div class="row">
        @foreach ($counters as $count)
            <div class="col-lg-3 col-6">
                <!-- small box -->
                <div class="small-box text-white bg-{{ $count['type'] }}">
                    <div class="inner">
                        <h3>{{ $count['count'] }}</h3>

                        <p>{{ $count['title'] }}</p>
                    </div>
                    <div class="icon">
                        <i class="ion fas {{ $count['icon'] }}"></i>
                    </div>
                    <a href="{{ $count['url'] }}" style="color:white !important;" class="small-box-footer mlink">@lang('More') <i
                            class="fas fa-arrow-circle-right"></i></a>
                </div>
            </div>
            <!-- ./col -->
        @endforeach
    </div>

    <!-- Charts Row -->
    <div class="row mb-4">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header pb-0 border-0">
                    <h6 class="m-0 font-weight-bold text-primary">{{__('Matches Status')}} ({{ $currentYear }})</h6>
                </div>
                <div class="card-body">
                    <div style="height: 300px; width: 100%;">
                        <canvas id="matchesStatusChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card">
                <div class="card-header pb-0 border-0">
                    <h6 class="m-0 font-weight-bold text-primary">{{__('Matches & Playgrounds')}} ({{ $currentYear }})</h6>
                </div>
                <div class="card-body">
                    <div style="height: 300px; width: 100%;">
                        <canvas id="matchesChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Financial Charts Row -->
    <div class="row mb-4">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header pb-0 border-0">
                    <h6 class="m-0 font-weight-bold text-primary">{{__('Financial Statistics')}} ({{ $currentYear }})</h6>
                </div>
                <div class="card-body">
                    <div style="height: 350px; width: 100%;">
                        <canvas id="financialStatusChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h6 class="m-0 font-weight-bold text-primary">{{__('Latest Wallet Transactions')}}</h6>
                </div>
                <div class="card-content">
                    <div class="table-responsive mt-1">
                        <table class="table table-hover-animation mb-0">
                            <thead>
                            <tr>
                                <th>{{__('ID')}}</th>
                                <th>{{__('Sender')}}</th>
                                <th>{{__('Receiver')}}</th>
                                <th>{{__('Player Δ')}}</th>
                                <th>{{__('System Δ')}}</th>
                                <th>{{__('Type')}}</th>
                                <th>{{__('Created At')}}</th>
                            </tr>
                            </thead>
                            <tbody>
                            @if(count($latestTransactions) > 0)
                                @foreach($latestTransactions as $transaction)
                                    <tr>
                                        <td>{{$transaction->id}}</td>
                                        <td>{{$transaction->sender_details}}</td>
                                        <td>{{$transaction->receiver_details}}</td>
                                        <td>
                                            @if($transaction->credit_palyer > 0)
                                                <span class="text-success">+{{$transaction->credit_palyer}}</span>
                                            @elseif($transaction->debit_player > 0)
                                                <span class="text-danger">-{{$transaction->debit_player}}</span>
                                            @else
                                                <span class="text-muted">0.00</span>
                                            @endif
                                            <small class="text-muted">{{ $transaction->currency }}</small>
                                        </td>
                                        <td>
                                            @php
                                                $sysCredit = $transaction->credit_system + $transaction->fees_credit;
                                                $sysDebit = $transaction->debit_system + $transaction->fees_debit;
                                            @endphp
                                            @if($sysCredit > 0)
                                                <span class="text-primary">+{{$sysCredit}}</span>
                                                @if($transaction->fees_credit > 0)
                                                    <small class="text-info" title="Fees">(incl. {{$transaction->fees_credit}} fees)</small>
                                                @endif
                                            @elseif($sysDebit > 0)
                                                <span class="text-warning">-{{$sysDebit}}</span>
                                                @if($transaction->fees_debit > 0)
                                                    <small class="text-info" title="Fees">(incl. {{$transaction->fees_debit}} fees)</small>
                                                @endif
                                            @else
                                                <span class="text-muted">0.00</span>
                                            @endif
                                            <small class="text-muted">{{ $transaction->currency }}</small>
                                        </td>
                                        <td><span class="badge badge-light-secondary">{{$transaction->type}}</span></td>
                                        <td>{{$transaction->created_at->format('Y-m-d H:i')}}</td>
                                    </tr>
                                @endforeach
                            @else
                                <tr>
                                    <td colspan="6" class="text-center">{{__('No Data')}}</td>
                                </tr>
                            @endif
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        function renderMyCharts() {
            var statusCanvas = document.getElementById('matchesStatusChart');
            if(!statusCanvas) return;
            var ctxStatus = statusCanvas.getContext('2d');
            var statusChart = new Chart(ctxStatus, {
                type: 'bar',
                data: {
                    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                    datasets: [
                        {
                            label: '{{__("Completed")}}',
                            data: @json($chartCompleted),
                            backgroundColor: 'rgba(28, 200, 138, 0.8)',
                            borderColor: 'rgba(28, 200, 138, 1)',
                            borderWidth: 1
                        },
                        {
                            label: '{{__("Cancelled")}}',
                            data: @json($chartCancelled),
                            backgroundColor: 'rgba(231, 74, 59, 0.8)',
                            borderColor: 'rgba(231, 74, 59, 1)',
                            borderWidth: 1
                        },
                        {
                            label: '{{__("Open")}}',
                            data: @json($chartOpen),
                            backgroundColor: 'rgba(54, 162, 235, 0.8)',
                            borderColor: 'rgba(54, 162, 235, 1)',
                            borderWidth: 1
                        },
                        {
                            label: '{{__("Ongoing")}}',
                            data: @json($chartOngoing),
                            backgroundColor: 'rgba(246, 194, 62, 0.8)',
                            borderColor: 'rgba(246, 194, 62, 1)',
                            borderWidth: 1
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        yAxes: [{ ticks: { beginAtZero: true, precision: 0 } }]
                    }
                }
            });

            var matchesCanvas = document.getElementById('matchesChart');
            if(!matchesCanvas) return;
            var ctxMatches = matchesCanvas.getContext('2d');
            var matchesChart = new Chart(ctxMatches, {
                type: 'bar',
                data: {
                    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                    datasets: [
                        {
                            label: '{{__("Matches")}}',
                            data: @json($chartMatches),
                            backgroundColor: 'rgba(28, 200, 138, 0.8)',
                            borderColor: 'rgba(28, 200, 138, 1)',
                            borderWidth: 1
                        },
                        {
                            label: '{{__("Playgrounds")}}',
                            data: @json($chartPlaygrounds),
                            backgroundColor: 'rgba(246, 194, 62, 0.8)',
                            borderColor: 'rgba(246, 194, 62, 1)',
                            borderWidth: 1
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        yAxes: [{ ticks: { beginAtZero: true, precision: 0 } }]
                    }
                }
            });

            var financialCanvas = document.getElementById('financialStatusChart');
            if(!financialCanvas) return;
            var ctxFinancial = financialCanvas.getContext('2d');
            var financialChart = new Chart(ctxFinancial, {
                type: 'bar',
                data: {
                    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                    datasets: [
                        {
                            label: '{{__("System Balance")}}',
                            data: @json($chartSystemBalance),
                            backgroundColor: 'rgba(54, 162, 235, 0.8)',
                            borderColor: 'rgba(54, 162, 235, 1)',
                            borderWidth: 1
                        },
                        {
                            label: '{{__("Total Fees")}}',
                            data: @json($chartFees),
                            backgroundColor: 'rgba(28, 200, 138, 0.8)',
                            borderColor: 'rgba(28, 200, 138, 1)',
                            borderWidth: 1
                        },
                        {
                            label: '{{__("Players Balance")}}',
                            data: @json($chartPlayersBalance),
                            backgroundColor: 'rgba(255, 159, 64, 0.8)',
                            borderColor: 'rgba(255, 159, 64, 1)',
                            borderWidth: 1
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    tooltips: {
                        mode: 'index',
                        intersect: false,
                    },
                    scales: {
                        yAxes: [{ ticks: { beginAtZero: true } }]
                    }
                }
            });
        }

        if (typeof Chart === 'undefined') {
            $.getScript("{{ url('assets/admin/plugins/chart.js/Chart.bundle.min.js') }}", function() {
                renderMyCharts();
            });
        } else {
            renderMyCharts();
        }
    </script>
@endsection