@extends('layouts.admin')

@section('title', 'داشبورد')

@section('content')
<div class="row clearfix">
    <!-- کل کاربران -->
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
        <div class="info-box bg-pink hover-expand-effect">
            <div class="icon">
                <i class="material-icons">people</i>
            </div>
            <div class="content">
                <div class="text">کل کاربران</div>
                <div class="number count-to" data-from="0" data-to="{{ $stats['total_users'] }}" data-speed="1000" data-fresh-interval="20">
                    {{ number_format($stats['total_users']) }}
                </div>
            </div>
        </div>
    </div>

    <!-- کاربران فعال -->
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
        <div class="info-box bg-cyan hover-expand-effect">
            <div class="icon">
                <i class="material-icons">person</i>
            </div>
            <div class="content">
                <div class="text">کاربران فعال</div>
                <div class="number count-to" data-from="0" data-to="{{ $stats['active_users'] }}" data-speed="1000" data-fresh-interval="20">
                    {{ number_format($stats['active_users']) }}
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row clearfix">
    <!-- کاربران ویژه -->
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
        <div class="info-box bg-light-green hover-expand-effect">
            <div class="icon">
                <i class="material-icons">star</i>
            </div>
            <div class="content">
                <div class="text">کاربران ویژه</div>
                <div class="number count-to" data-from="0" data-to="{{ $stats['total_subscriptions'] }}" data-speed="1000" data-fresh-interval="20">
                    {{ number_format($stats['total_subscriptions']) }}
                </div>
            </div>
        </div>
    </div>

    <!-- اشتراک‌های فعال -->
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
        <div class="info-box bg-orange hover-expand-effect">
            <div class="icon">
                <i class="material-icons">payment</i>
            </div>
            <div class="content">
                <div class="text">اشتراک‌های فعال</div>
                <div class="number count-to" data-from="0" data-to="{{ $stats['total_subscriptions'] }}" data-speed="1000" data-fresh-interval="20">
                    {{ number_format($stats['total_subscriptions']) }}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- کاربران فعال -->
<div class="row clearfix">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <div class="card">
            <div class="header">
                <h2>کاربران فعال</h2>
            </div>
            <div class="body">
                <div class="form-group">
                    <label>بازه زمانی:</label>
                    <select class="form-control" id="activeUsersPeriod" onchange="updateActiveUsers()" style="max-width: 300px;">
                        <option value="today">امروز</option>
                        <option value="week">این هفته</option>
                        <option value="month" selected>این ماه</option>
                    </select>
                </div>
                <div class="info-box-3 bg-teal">
                    <div class="icon">
                        <i class="material-icons">people_outline</i>
                    </div>
                    <div class="content">
                        <div class="text">تعداد کاربران فعال</div>
                        <div class="number" id="activeUsersCount">{{ number_format($active_users_month) }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- آمار اشتراک‌ها -->
<div class="row clearfix">
    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
        <div class="card">
            <div class="header">
                <h2>آمار اشتراک‌ها</h2>
            </div>
            <div class="body">
                <table class="table table-bordered table-striped table-hover">
                    <thead>
                        <tr>
                            <th>نوع پلن</th>
                            <th>تعداد</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($subscription_stats as $stat)
                        <tr>
                            <td>{{ $stat->plan_type }}</td>
                            <td>{{ number_format($stat->count) }}</td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- آخرین ۵ کاربر -->
    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
        <div class="card">
            <div class="header">
                <h2>آخرین ۵ کاربر ثبت‌نام شده</h2>
            </div>
            <div class="body">
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>ایمیل</th>
                                <th>تاریخ عضویت</th>
                                <th>وضعیت</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($latest_users as $user)
                            <tr>
                                <td>
                                    <!-- Link to be implemented -->
                                    <a href="#">
                                        {{ $user->email }}
                                    </a>
                                </td>
                                <td>{{ $user->created_at->diffForHumans() }}</td>
                                <td>
                                    @if($user->status == 'active')
                                        <span class="label label-success">فعال</span>
                                    @elseif($user->status == 'inactive')
                                        <span class="label label-warning">غیرفعال</span>
                                    @elseif($user->status == 'banned')
                                        <span class="label label-danger">مسدود</span>
                                    @else
                                        <span class="label label-default">{{ $user->status }}</span>
                                    @endif
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
const activeUsersData = {
    today: {{ $active_users_today }},
    week: {{ $active_users_week }},
    month: {{ $active_users_month }}
};

function updateActiveUsers() {
    const period = document.getElementById('activeUsersPeriod').value;
    const count = activeUsersData[period];
    document.getElementById('activeUsersCount').textContent = count.toLocaleString('fa-IR');
}
</script>
@endsection