@extends('admin.layout.app')

@section('body')
<div class="row g-3 mb-4">
    @foreach($stats as $label => $value)
        <div class="col-md-4 col-xl-2">
            <div class="card h-100">
                <div class="card-body">
                    <p class="text-muted text-uppercase small mb-1">{{ str_replace('_', ' ', $label) }}</p>
                    <h3 class="mb-0">{{ number_format($value) }}</h3>
                </div>
            </div>
        </div>
    @endforeach
</div>

<div class="row g-4">
    <div class="col-xl-8">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h4 class="card-title mb-0">Website Content Center</h4>
                <a href="{{ route('front.home') }}" target="_blank" class="btn btn-sm btn-outline-primary">Preview Website</a>
            </div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-md-6 col-xl-4"><a class="content-action" href="{{ route('pages.index') }}"><i class="bx bx-file"></i><span>Pages</span><small>Mission, vision, messages</small></a></div>
                    <div class="col-md-6 col-xl-4"><a class="content-action" href="{{ route('admin.website-content-items.index') }}"><i class="bx bx-buildings"></i><span>Committees & Offices</span><small>Offices, committees, academic sections</small></a></div>
                    <div class="col-md-6 col-xl-4"><a class="content-action" href="{{ route('posts.index') }}"><i class="bx bx-news"></i><span>News & Events</span><small>Posts and announcements</small></a></div>
                    <div class="col-md-6 col-xl-4"><a class="content-action" href="{{ route('admin.team-members.index') }}"><i class="bx bx-group"></i><span>Team / HR</span><small>Leadership and staff</small></a></div>
                    <div class="col-md-6 col-xl-4"><a class="content-action" href="{{ route('admin.testimonials.index') }}"><i class="bx bx-comment-detail"></i><span>Testimonials</span><small>Students and teachers</small></a></div>
                    <div class="col-md-6 col-xl-4"><a class="content-action" href="{{ route('galleries.index') }}"><i class="bx bx-image"></i><span>Gallery</span><small>Photos and activities</small></a></div>
                    <div class="col-md-6 col-xl-4"><a class="content-action" href="{{ route('videos.index') }}"><i class="bx bx-video"></i><span>Videos</span><small>Lectures and media</small></a></div>
                    <div class="col-md-6 col-xl-4"><a class="content-action" href="{{ route('admin.comments.index') }}"><i class="bx bx-message-dots"></i><span>Comments</span><small>Review public page comments</small></a></div>
                    <div class="col-md-6 col-xl-4"><a class="content-action" href="{{ route('admin.feedback.index') }}"><i class="bx bx-star"></i><span>Feedback</span><small>Moderate visitor feedback</small></a></div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-4">
        <div class="card">
            <div class="card-header"><h4 class="card-title mb-0">Important Pages</h4></div>
            <div class="card-body">
                <div class="list-group list-group-flush">
                    @forelse($pages as $page)
                        <a href="{{ route('pages.edit', $page) }}" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                            <span>{{ $page->title }}</span>
                            <small class="text-muted">{{ $page->slug }}</small>
                        </a>
                    @empty
                        <div class="text-muted">No pages yet.</div>
                    @endforelse
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .content-action{display:block;height:100%;padding:22px;border:1px solid var(--admin-border-color, rgba(15,23,42,.08));border-radius:8px;background:var(--admin-surface-color, #fff);color:var(--admin-text-color, #0f172a);text-decoration:none;transition:.2s ease}
    .content-action:hover{transform:translateY(-3px);box-shadow:0 14px 34px var(--admin-shadow-color, rgba(15,23,42,.08))}
    .content-action i{font-size:28px;color:var(--admin-primary-color, #e9082d);margin-bottom:12px}.content-action span{display:block;font-weight:800}.content-action small{display:block;color:var(--admin-muted-color, #64748b);margin-top:4px}
</style>
@endsection