@extends('layouts.cmsapp')

@section('cms_content')

<div class="main-content">

    <!-- Page Header -->
    <div class="row">
        <div class="col-12">
            <h1 class="page-title mb-2">Dashboard</h1>

            <!-- Breadcrumb -->
            <ol class="breadcrumb breadcrumb-2 mb-4">
                <li>
                    <a href="{{ route('home') }}">
                        <i class="fa fa-home"></i> Home
                    </a>
                </li>
                <li class="active"><strong>Dashboard</strong></li>
            </ol>

            <div class="line-dashed mb-4"></div>
        </div>
    </div>

    <!-- Dashboard Cards -->
    <div class="row justify-content-center text-center">

        <!-- Total Pages -->
        <div class="col-xl-3 col-lg-4 col-md-6 mb-4">
            <div class="dashboard-card">
                <div class="icon bg-primary">
                    <i class="fa fa-file-text"></i>
                </div>
                <div class="content">
                    <h5>Total Pages</h5>
                    <h2>{{ $pagesCount }}</h2>
                </div>
            </div>
        </div>

        <!-- News -->
        <div class="col-xl-3 col-lg-4 col-md-6 mb-4">
            <div class="dashboard-card">
                <div class="icon bg-success">
                    <i class="fa fa-newspaper-o"></i>
                </div>
                <div class="content">
                    <h5>News</h5>
                    <h2>{{ $eventsCount }}</h2>
                </div>
            </div>
        </div>

        <!-- Announcements -->
        <div class="col-xl-3 col-lg-4 col-md-6 mb-4">
            <div class="dashboard-card">
                <div class="icon bg-warning">
                    <i class="fa fa-bullhorn"></i>
                </div>
                <div class="content">
                    <h5>Announcements</h5>
                    <h2>{{ $announcementsCount }}</h2>
                </div>
            </div>
        </div>

    </div>

</div>

<!-- Dashboard Styles -->
<style>
.dashboard-card {
    background: #ffffff;
    border-radius: 10px;
    padding: 30px 20px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.06);
    transition: all 0.25s ease-in-out;
    height: 100%;
}

.dashboard-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 28px rgba(0,0,0,0.12);
}

.dashboard-card .icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 15px;
    border-radius: 50%;
    color: #fff;
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dashboard-card .content h5 {
    margin-bottom: 8px;
    font-weight: 600;
    color: #555;
}

.dashboard-card .content h2 {
    font-weight: 700;
    margin: 0;
    color: #222;
}
</style>

@endsection