@extends('admin.layouts.layout')

@section('content')
    <div class="container-scroller">
        @include('admin.layouts.navbar')

        <div class="container-fluid page-body-wrapper">
            @include('admin.layouts.sidebar')

            <div class="main-panel">
                <div class="content-wrapper">
                    <!-- KPIs Section -->
                    <div class="row">
                        <div class="col-md-3 grid-margin stretch-card">
                            <div class="card card-rounded">
                                <div class="card-body">
                                    <h4 class="card-title">عدد اللاعبين</h4>
                                    <h2 class="text-primary">{{ $totalPlayers ?? 0 }}</h2>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 grid-margin stretch-card">
                            <div class="card card-rounded">
                                <div class="card-body">
                                    <h4 class="card-title">عدد المدربين</h4>
                                    <h2 class="text-success">{{ $totalCoaches ?? 0 }}</h2>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 grid-margin stretch-card">
                            <div class="card card-rounded">
                                <div class="card-body">
                                    <h4 class="card-title">الاشتراكات النشطة
                                    </h4>
                                    <h2 class="text-info">{{ $activeSubscriptions ?? 0 }}</h2>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 grid-margin stretch-card">
                            <div class="card card-rounded">
                                <div class="card-body">
                                    <h4 class="card-title">إجمالي الإيرادات
                                    </h4>
                                    <h2 class="text-danger">{{ $totalRevenue ?? '0.00' }} جنيه</h2>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 grid-margin stretch-card">
                            <div class="card card-rounded">
                                <div class="card-body">
                                    <h4 class="card-title">إجمالي النفقات</h4>
                                    <h2 class="text-warning">{{ $totalExpenses ?? '0.00' }} جنيه</h2>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Revenue Trend Chart -->
                    <div class="row">
                        <div class="col-lg-8 grid-margin stretch-card">
                            <div class="card card-rounded">
                                <div class="card-body">
                                    <h4 class="card-title">اتجاه الإيرادات</h4>
                                    <canvas id="revenueChart"></canvas>
                                </div>
                            </div>
                        </div>

                        <!-- Recent Subscriptions Table -->
                        <div class="col-lg-4 grid-margin stretch-card">
                            <div class="card card-rounded">
                                <div class="card-body">
                                    <h4 class="card-title">الاشتراكات الأخيرة</h4>
                                    <div class="table-responsive">
                                        <table class="table">
                                            <thead>
                                                <tr>
                                                    <th>لاعب</th>
                                                    <th>رياضة</th>
                                                    <th>منذ</th>
                                                    <th>حتى</th>
                                                    <th>التكلفة</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @forelse($recentSubscriptions as $subscription)
                                                    <tr>
                                                        <td>{{ $subscription->player->name ?? 'Unknown Player' }}</td>
                                                        <td>
                                                            @if ($subscription->package)
                                                                Package: {{ $subscription->package->name }}
                                                            @elseif($subscription->game)
                                                                Game: {{ $subscription->game->name }}
                                                            @elseif($subscription->subGame)
                                                                Sub-Game: {{ $subscription->subGame->name }}
                                                            @else
                                                                N/A
                                                            @endif
                                                        </td>
                                                        <td>{{ $subscription->start_date ?? 'N/A' }}</td>
                                                        <td>{{ $subscription->end_date ?? 'N/A' }}</td>
                                                        <td>{{ $subscription->calculated_fee ?? '0.00' }} جنيه</td>
                                                    </tr>
                                                @empty
                                                    <tr>
                                                        <td colspan="5">لا يوجد اشتراكات حديثة</td>
                                                    </tr>
                                                @endforelse
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Attendance Overview -->
                    <div class="row">
                        <div class="col-lg-12 grid-margin stretch-card">
                            <div class="card card-rounded">
                                <div class="card-body">
                                    <h4 class="card-title">الحضور/ الغياب</h4>
                                    <canvas id="attendanceChart"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Footer -->
                <footer class="footer">
                    <div class="d-sm-flex justify-content-center justify-content-sm-between">
                        <span class="text-muted text-center text-sm-left d-block d-sm-inline-block">Admin Dashboard ©
                            {{ date('Y') }}</span>
                        <span class="float-none float-sm-end d-block mt-1 mt-sm-0 text-center">Powered by Your
                            Company</span>
                    </div>
                </footer>
            </div>
        </div>
    </div>
@endsection

@section('page_js')
    <!-- Include Chart.js and DataLabels Plugin -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>

    <script>
        // Revenue Chart
        const revenueCtx = document.getElementById('revenueChart').getContext('2d');
        new Chart(revenueCtx, {
            type: 'line',
            data: {
                labels: {!! json_encode($revenueLabels) !!},
                datasets: [{
                    label: 'Revenue',
                    data: {!! json_encode($revenueData) !!},
                    borderColor: 'rgba(75, 192, 192, 1)',
                    backgroundColor: 'rgba(75, 192, 192, 0.2)',
                    borderWidth: 2,
                    tension: 0.4,
                    fill: true
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    title: {
                        display: true,
                        text: 'اتجاه الإيرادات (آخر 6 أشهر)',
                        font: {
                            size: 18
                        }
                    },
                    tooltip: {
                        enabled: true,
                        callbacks: {
                            label: function(tooltipItem) {
                                return 'جنيه' + tooltipItem.raw.toFixed(2);
                            }
                        }
                    },
                    legend: {
                        position: 'top'
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        title: {
                            display: true,
                            text: 'الإيرادات (جنيه)'
                        }
                    },
                    x: {
                        title: {
                            display: true,
                            text: 'الشهور'
                        }
                    }
                }
            }
        });

        // Attendance Chart
        const attendanceCtx = document.getElementById('attendanceChart').getContext('2d');
        new Chart(attendanceCtx, {
            type: 'bar',
            data: {
                labels: {!! json_encode($attendanceLabels) !!},
                datasets: [{
                        label: 'اللاعب الحاضر (%)',
                        data: {!! json_encode($playerPresentData) !!},
                        backgroundColor: 'rgba(75, 192, 192, 0.8)',
                        borderColor: 'rgba(75, 192, 192, 1)',
                        borderWidth: 1
                    },
                    {
                        label: 'اللاعب الغائب (%)',
                        data: {!! json_encode($playerAbsentData) !!},
                        backgroundColor: 'rgba(255, 99, 132, 0.8)',
                        borderColor: 'rgba(255, 99, 132, 1)',
                        borderWidth: 1
                    },
                    {
                        label: 'المدرب الحاضر (%)',
                        data: {!! json_encode($coachPresentData) !!},
                        backgroundColor: 'rgba(54, 162, 235, 0.8)',
                        borderColor: 'rgba(54, 162, 235, 1)',
                        borderWidth: 1
                    },
                    {
                        label: 'المدرب الغائب (%)',
                        data: {!! json_encode($coachAbsentData) !!},
                        backgroundColor: 'rgba(255, 206, 86, 0.8)',
                        borderColor: 'rgba(255, 206, 86, 1)',
                        borderWidth: 1
                    }
                ]
            },
            options: {
                responsive: true,
                plugins: {
                    title: {
                        display: true,
                        text: 'نظرة عامة على الحضور (آخر 7 أيام)',
                        font: {
                            size: 18
                        }
                    },
                    tooltip: {
                        enabled: true,
                        callbacks: {
                            label: function(tooltipItem) {
                                return tooltipItem.dataset.label + ': ' + tooltipItem.raw.toFixed(2) + '%';
                            }
                        }
                    },
                    legend: {
                        position: 'top'
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        max: 100,
                        title: {
                            display: true,
                            text: 'النسبة (%)'
                        }
                    },
                    x: {
                        title: {
                            display: true,
                            text: 'أيام الأسبوع'
                        }
                    }
                }
            }
        });
    </script>
@endsection