@extends('layouts.admin')

@section('content')

<div class="container-fluid">

    <!-- Welcome Section -->
    <div class="mb-4">
        <h2 style="color: var(--admin-primary); font-weight: 700;">
            <i class="fas fa-hand-wave me-2" style="color: var(--admin-accent);"></i>
            Welcome, {{ auth()->user()->name }}
        </h2>
        <p class="text-muted mb-0">
            Manage sermons, events, and keep the church website up to date.
        </p>
    </div>

    <!-- Scripture -->
    <div class="admin-info-box mb-4">
        <p class="scripture mb-0">
            "Whatever you do, work heartily, as for the Lord and not for men,
            knowing that from the Lord you will receive the inheritance as your reward.
            You are serving the Lord Christ."
            <strong>- Colossians 3:23-24 (ESV)</strong>
        </p>
    </div>

    <!-- Quick Stats -->
    <div class="row mb-4 g-4">

        <div class="col-md-4 col-lg">
            <div class="admin-stat-card p-4 h-100">
                <div class="d-flex align-items-center gap-3">
                    <div class="stat-icon sermons">
                        <i class="fas fa-bible"></i>
                    </div>
                    <div>
                        <div class="stat-label">Total Sermons</div>
                        <div class="stat-value">{{ $sermonCount }}</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-4 col-lg">
            <div class="admin-stat-card p-4 h-100">
                <div class="d-flex align-items-center gap-3">
                    <div class="stat-icon upcoming">
                        <i class="fas fa-calendar-check"></i>
                    </div>
                    <div>
                        <div class="stat-label">Upcoming Events</div>
                        <div class="stat-value">{{ $upcomingEvents }}</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-4 col-lg">
            <div class="admin-stat-card p-4 h-100">
                <div class="d-flex align-items-center gap-3">
                    <div class="stat-icon past">
                        <i class="fas fa-clock"></i>
                    </div>
                    <div>
                        <div class="stat-label">Past Events</div>
                        <div class="stat-value">{{ $pastEvents }}</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-4 col-lg">
            <div class="admin-stat-card p-4 h-100">
                <div class="d-flex align-items-center gap-3">
                    <div class="stat-icon" style="background: #e8eafc; color: #1b2f9c;">
                        <i class="fas fa-users"></i>
                    </div>
                    <div>
                        <div class="stat-label">Members</div>
                        <div class="stat-value">{{ $memberCount }}</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-4 col-lg">
            <div class="admin-stat-card p-4 h-100">
                <div class="d-flex align-items-center gap-3">
                    <div class="stat-icon" style="background: #e8f5e9; color: #2e7d32;">
                        <i class="fas fa-envelope-open-text"></i>
                    </div>
                    <div>
                        <div class="stat-label">Subscribers</div>
                        <div class="stat-value">{{ $subscriberCount }}</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-4 col-lg">
            <div class="admin-stat-card p-4 h-100">
                <div class="d-flex align-items-center gap-3">
                    <div class="stat-icon" style="background: #fff3e0; color: #e65100;">
                        <i class="fas fa-praying-hands"></i>
                    </div>
                    <div>
                        <div class="stat-label">Prayer Requests</div>
                        <div class="stat-value">{{ $prayerRequestCount }}</div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <!-- Admin Action Cards -->
    <div class="row g-4">

        <div class="col-md-6">
            <div class="admin-action-card">
                <div class="card-icon">
                    <i class="fas fa-bible"></i>
                </div>
                <h4>Manage Sermons</h4>
                <p class="text-muted small">
                    Add new sermon videos, edit existing sermons, or remove sermons. Keep the sermon library up to date so visitors can access recent teachings.
                </p>
                <div class="d-flex gap-2 mt-3">
                    <a href="{{ route('admin.sermons.add') }}" class="btn btn-admin-primary btn-sm">
                        <i class="fas fa-plus me-1"></i> Add Sermon
                    </a>
                    <a href="{{ route('admin.sermons') }}" class="btn btn-admin-secondary btn-sm">
                        <i class="fas fa-list me-1"></i> Manage Sermons
                    </a>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="admin-action-card">
                <div class="card-icon">
                    <i class="fas fa-calendar-alt"></i>
                </div>
                <h4>Manage Events</h4>
                <p class="text-muted small">
                    Create new events, update event details, manage images, or mark events as completed. Keep the community informed about upcoming gatherings.
                </p>
                <div class="d-flex gap-2 mt-3">
                    <a href="{{ route('admin.events.add') }}" class="btn btn-admin-primary btn-sm">
                        <i class="fas fa-plus me-1"></i> Add Event
                    </a>
                    <a href="{{ route('admin.events') }}" class="btn btn-admin-secondary btn-sm">
                        <i class="fas fa-list me-1"></i> Manage Events
                    </a>
                </div>
            </div>
        </div>

    </div>

    <!-- Recent Activity -->
    @if($recentActivity->count() > 0)
    <div class="mt-4">
        <h4 style="color: var(--admin-primary); font-weight: 700;">
            <i class="fas fa-history me-2" style="color: var(--admin-accent);"></i> Recent Activity
        </h4>
        <div class="admin-table mt-3">
            <table class="table table-striped table-hover mb-0">
                <thead class="admin-table-head">
                    <tr>
                        <th>Admin</th>
                        <th>Action</th>
                        <th>Description</th>
                        <th>When</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($recentActivity as $log)
                    <tr>
                        <td>{{ $log->admin?->name ?? 'System' }}</td>
                        <td>
                            @if($log->action === 'created')
                                <span class="badge bg-success">{{ $log->action }}</span>
                            @elseif($log->action === 'updated')
                                <span class="badge bg-primary">{{ $log->action }}</span>
                            @elseif($log->action === 'deleted')
                                <span class="badge bg-danger">{{ $log->action }}</span>
                            @else
                                <span class="badge bg-secondary">{{ $log->action }}</span>
                            @endif
                        </td>
                        <td class="small">{{ $log->description }}</td>
                        <td class="text-muted small">{{ $log->created_at->diffForHumans() }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        <div class="mt-2">
            <a href="{{ route('admin.activity-log') }}" class="btn btn-admin-secondary btn-sm">
                <i class="fas fa-list me-1"></i> View All Activity
            </a>
        </div>
    </div>
    @endif

</div>

@endsection