@extends('layouts.admin')

@section('title', 'Admin Dashboard')
@section('header_title', 'Dashboard Overview')

@section('content')
<div class="row">
    <div class="col-lg-12 mb-4">
        <div class="card-custom" style="background: linear-gradient(135deg, #1e1e1e 0%, #111 100%); color: white; border: none;">
            <h2 class="text-white" style="font-weight: 800;">Welcome to IPC Shalom Chicago Admin Portal</h2>
            <p style="color: #bbb; font-size: 16px; margin: 5px 0 0 0;">Manage your church website modules, articles, pastors, schedules, gallery albums, and settings dynamically using the sidebar navigation.</p>
        </div>
    </div>
</div>

<div class="row">
    <!-- Row 1 -->
    <div class="col-xl-3 col-md-6">
        <div class="dashboard-card">
            <div class="card-info">
                <h3>{{ $stats['settings'] }}</h3>
                <p>Site Settings</p>
            </div>
            <div class="card-icon">
                <i class="fa fa-cogs"></i>
            </div>
        </div>
    </div>
    
    <div class="col-xl-3 col-md-6">
        <div class="dashboard-card">
            <div class="card-info">
                <h3>{{ $stats['navigation'] }}</h3>
                <p>Menu Links</p>
            </div>
            <div class="card-icon">
                <i class="fa fa-compass"></i>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6">
        <div class="dashboard-card">
            <div class="card-info">
                <h3>{{ $stats['pages'] }}</h3>
                <p>Pages</p>
            </div>
            <div class="card-icon">
                <i class="fa fa-file-text-o"></i>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6">
        <div class="dashboard-card">
            <div class="card-info">
                <h3>{{ $stats['banners'] }}</h3>
                <p>Sliders</p>
            </div>
            <div class="card-icon">
                <i class="fa fa-image"></i>
            </div>
        </div>
    </div>

    <!-- Row 2 -->
    <div class="col-xl-3 col-md-6">
        <div class="dashboard-card">
            <div class="card-info">
                <h3>{{ $stats['teams'] }}</h3>
                <p>Leaders</p>
            </div>
            <div class="card-icon">
                <i class="fa fa-users"></i>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6">
        <div class="dashboard-card">
            <div class="card-info">
                <h3>{{ $stats['schedules'] }}</h3>
                <p>Schedules</p>
            </div>
            <div class="card-icon">
                <i class="fa fa-clock-o"></i>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6">
        <div class="dashboard-card">
            <div class="card-info">
                <h3>{{ $stats['testimonials'] }}</h3>
                <p>Testimonials</p>
            </div>
            <div class="card-icon">
                <i class="fa fa-quote-left"></i>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6">
        <div class="dashboard-card">
            <div class="card-info">
                <h3>{{ $stats['recommendations'] }}</h3>
                <p>Notices</p>
            </div>
            <div class="card-icon">
                <i class="fa fa-thumbs-up"></i>
            </div>
        </div>
    </div>

    <!-- Row 3 -->
    <div class="col-xl-3 col-md-6">
        <div class="dashboard-card">
            <div class="card-info">
                <h3>{{ $stats['albums'] }}</h3>
                <p>Albums</p>
            </div>
            <div class="card-icon">
                <i class="fa fa-camera"></i>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6">
        <div class="dashboard-card">
            <div class="card-info">
                <h3>{{ $stats['articles'] }}</h3>
                <p>Articles</p>
            </div>
            <div class="card-icon">
                <i class="fa fa-newspaper-o"></i>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6">
        <div class="dashboard-card">
            <div class="card-info">
                <h3>{{ $stats['events'] }}</h3>
                <p>Events</p>
            </div>
            <div class="card-icon">
                <i class="fa fa-calendar"></i>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6">
        <div class="dashboard-card">
            <div class="card-info">
                <h3>{{ $stats['ministryphotos'] }}</h3>
                <p>Ministry Banners</p>
            </div>
            <div class="card-icon">
                <i class="fa fa-picture-o"></i>
            </div>
        </div>
    </div>

    <!-- Row 4 -->
    <div class="col-xl-3 col-md-6">
        <div class="dashboard-card">
            <div class="card-info">
                <h3>{{ $stats['opportunities'] }}</h3>
                <p>Opportunities</p>
            </div>
            <div class="card-icon">
                <i class="fa fa-briefcase"></i>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6">
        <div class="dashboard-card">
            <div class="card-info">
                <h3>{{ $stats['scrollers'] }}</h3>
                <p>Scrollers</p>
            </div>
            <div class="card-icon">
                <i class="fa fa-sliders"></i>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6">
        <div class="dashboard-card">
            <div class="card-info">
                <h3>{{ $stats['users'] }}</h3>
                <p>Admin Users</p>
            </div>
            <div class="card-icon">
                <i class="fa fa-user"></i>
            </div>
        </div>
    </div>
</div>
@endsection