@extends('layouts.app')

@section('title', 'لوحة تحكم الوكيل - Reekoo')

@section('content')
<div class="container-fluid">
    <div class="row">
        <!-- Sidebar -->
        @include('components.agent-sidebar')

        <!-- Main Content -->
        <div class="col-md-9 col-lg-10">
            <!-- Top Navbar -->
            <nav class="navbar navbar-custom mb-4">
                <div class="container-fluid">
                    <h4 class="mb-0 fw-bold">لوحة التحكم</h4>
                    <div class="d-flex align-items-center gap-3">
                        <div class="user-info">
                            <div class="user-avatar">
                                {{ mb_substr($agent->name, 0, 1) }}
                            </div>
                            <div>
                                <div class="fw-bold">{{ $agent->name }}</div>
                                <small class="text-muted">وكيل</small>
                            </div>
                        </div>
                        <form method="POST" action="{{ route('logout') }}" class="mb-0">
                            @csrf
                            <button type="submit" class="btn btn-outline-danger btn-sm">
                                <i class="fas fa-sign-out-alt"></i>
                                تسجيل الخروج
                            </button>
                        </form>
                    </div>
                </div>
            </nav>

            <!-- Main Content Area -->
            <div class="main-content">
                <!-- Welcome Message -->
                <div class="alert alert-info mb-4" style="border-radius: 15px; border: none;">
                    <h5 class="alert-heading">
                        <i class="fas fa-hand-wave me-2"></i>
                        مرحباً {{ $agent->name }}!
                    </h5>
                    <p class="mb-0">نتمنى لك يوماً سعيداً في إدارة المحتوى</p>
                </div>

                <!-- Statistics Cards -->
                <div class="row">
                    <div class="col-md-6">
                        <div class="stat-card primary">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h3>{{ number_format($stats['total_users']) }}</h3>
                                    <p>إجمالي المستخدمين</p>
                                </div>
                                <i class="fas fa-users fa-3x" style="opacity: 0.3;"></i>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="stat-card success">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h3>{{ number_format($stats['total_videos']) }}</h3>
                                    <p>إجمالي الفيديوهات</p>
                                </div>
                                <i class="fas fa-video fa-3x" style="opacity: 0.3;"></i>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Quick Actions -->
                <div class="row mt-4">
                    <div class="col-12">
                        <div class="card card-custom">
                            <div class="card-body">
                                <h5 class="card-title fw-bold mb-4">
                                    <i class="fas fa-bolt me-2"></i>
                                    إجراءات سريعة
                                </h5>
                                <div class="row">
                                    <div class="col-md-4 mb-3">
                                        <a href="#" class="text-decoration-none">
                                            <div class="d-flex align-items-center p-3 bg-light rounded">
                                                <div class="bg-primary bg-opacity-10 p-3 rounded me-3">
                                                    <i class="fas fa-users text-primary fa-2x"></i>
                                                </div>
                                                <div>
                                                    <h6 class="mb-0">عرض المستخدمين</h6>
                                                    <small class="text-muted">إدارة حسابات المستخدمين</small>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        <a href="#" class="text-decoration-none">
                                            <div class="d-flex align-items-center p-3 bg-light rounded">
                                                <div class="bg-success bg-opacity-10 p-3 rounded me-3">
                                                    <i class="fas fa-video text-success fa-2x"></i>
                                                </div>
                                                <div>
                                                    <h6 class="mb-0">مراجعة الفيديوهات</h6>
                                                    <small class="text-muted">مراقبة المحتوى</small>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        <a href="#" class="text-decoration-none">
                                            <div class="d-flex align-items-center p-3 bg-light rounded">
                                                <div class="bg-warning bg-opacity-10 p-3 rounded me-3">
                                                    <i class="fas fa-flag text-warning fa-2x"></i>
                                                </div>
                                                <div>
                                                    <h6 class="mb-0">البلاغات</h6>
                                                    <small class="text-muted">مراجعة البلاغات</small>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Info Section -->
                <div class="row mt-4">
                    <div class="col-12">
                        <div class="card card-custom">
                            <div class="card-body">
                                <h5 class="card-title fw-bold mb-3">
                                    <i class="fas fa-info-circle me-2"></i>
                                    معلومات
                                </h5>
                                <p class="text-muted">
                                    مرحباً بك في لوحة تحكم الوكيل. يمكنك من هنا إدارة المستخدمين والمحتوى ومراجعة البلاغات.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection