<div>
    <style>
        .skeleton {
            background: #eee;
            background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);
            border-radius: 5px;
            background-size: 200% 100%;
            animation: 1.5s shine linear infinite;
        }
        @keyframes shine {
            to { background-position-x: -200%; }
        }
        .bg-gradient-primary-custom {
            background: linear-gradient(195deg, #ffc34e 0%, #ffab00 100%);
        }
        .bg-gradient-dark-custom {
            background: linear-gradient(195deg, #323a54 0%, #1a2035 100%);
        }
        .spinner-overlay {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(255,255,255,0.7);
            z-index: 9999;
            display: flex; justify-content: center; align-items: center;
        }
        .spiral-loader {
            border: 4px solid rgba(0, 0, 0, 0.1);
            border-left-color: #ffc34e;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            animation: spin 1s linear infinite;
        }
        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
    </style>

    <!-- Global Loading Spinner for Livewire Actions -->
    <div wire:loading class="spinner-overlay">
        <div class="spiral-loader"></div>
    </div>

    <div class="container-fluid py-4">
        @if(session('status'))
            <div class="alert alert-success text-white alert-dismissible fade show" role="alert">
                {{ session('status') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        <!-- Stats Cards -->
        <div class="row mb-5">
            <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
                <div class="card">
                    <div class="card-header p-3 pt-2">
                        <div class="icon icon-lg icon-shape bg-gradient-dark-custom shadow-dark text-center border-radius-xl mt-n4 position-absolute">
                            <i class="material-symbols-rounded opacity-10">article</i>
                        </div>
                        <div class="text-end pt-1">
                            <p class="text-sm mb-0 text-capitalize">Total Blogs</p>
                            <h4 class="mb-0">{{ $totalBlogs }}</h4>
                        </div>
                    </div>
                    <hr class="dark horizontal my-0">
                    <div class="card-footer p-3">
                         <a href="{{ route('admin-blog') }}" class="mb-0 text-sm text-primary fw-bold">View Details</a>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
                <div class="card">
                    <div class="card-header p-3 pt-2">
                        <div class="icon icon-lg icon-shape bg-gradient-primary-custom shadow-primary text-center border-radius-xl mt-n4 position-absolute">
                            <i class="material-symbols-rounded opacity-10">work</i>
                        </div>
                        <div class="text-end pt-1">
                            <p class="text-sm mb-0 text-capitalize">Total Jobs</p>
                            <h4 class="mb-0">{{ $totalJobs }}</h4>
                        </div>
                    </div>
                    <hr class="dark horizontal my-0">
                    <div class="card-footer p-3">
                         <a href="{{ route('admin-jobs') }}" class="mb-0 text-sm text-primary fw-bold">View Details</a>
                    </div>
                </div>
            </div>
             <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
                <div class="card">
                    <div class="card-header p-3 pt-2">
                        <div class="icon icon-lg icon-shape bg-success shadow-success text-center border-radius-xl mt-n4 position-absolute">
                            <i class="material-symbols-rounded opacity-10">person</i>
                        </div>
                        <div class="text-end pt-1">
                            <p class="text-sm mb-0 text-capitalize">Applications</p>
                            <h4 class="mb-0">{{ $totalApplications }}</h4>
                        </div>
                    </div>
                    <hr class="dark horizontal my-0">
                    <div class="card-footer p-3">
                         <a href="{{ route('admin-job-applications') }}" class="mb-0 text-sm text-success fw-bold">View Details</a>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-sm-6">
                 <div class="card">
                    <div class="card-header p-3 pt-2">
                        <div class="icon icon-lg icon-shape bg-info shadow-info text-center border-radius-xl mt-n4 position-absolute">
                            <i class="material-symbols-rounded opacity-10">weekend</i>
                        </div>
                        <div class="text-end pt-1">
                            <p class="text-sm mb-0 text-capitalize">Admins</p>
                            <h4 class="mb-0">3</h4> <!-- Placeholder for admin count if not passed -->
                        </div>
                    </div>
                    <hr class="dark horizontal my-0">
                    <div class="card-footer p-3">
                        <p class="mb-0"><span class="text-success text-sm font-weight-bolder">Active</span> personnel</p>
                    </div>
                </div>
            </div>
        </div>

    <!-- Content Row -->
        <div class="row mb-4">
            <!-- Recent Jobs -->
            <div class="col-lg-8 col-md-6 mb-md-0 mb-4">
                <div class="card">
                    <div class="card-header pb-0">
                        <div class="row">
                            <div class="col-lg-6 col-7">
                                <h6>Recent Jobs</h6>
                                <p class="text-sm mb-0">
                                    <i class="fa fa-check text-info" aria-hidden="true"></i>
                                    <span class="font-weight-bold ms-1">{{ count($recentJobs) }} active</span> this month
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="card-body px-0 pb-2">
                        <div class="table-responsive">
                            <table class="table align-items-center mb-0">
                                <thead>
                                    <tr>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Title</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Posted Date</th>
                                        <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($recentJobs as $job)
                                    <tr>
                                        <td>
                                            <div class="d-flex px-2 py-1">
                                                <div class="d-flex flex-column justify-content-center">
                                                    <h6 class="mb-0 text-sm">{{ $job->title }}</h6>
                                                    <p class="text-xs text-secondary mb-0">{{ $job->location ?? 'N/A' }}</p>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <span class="text-xs font-weight-bold">{{ $job->created_at->format('M d, Y') }}</span>
                                        </td>
                                        <td class="text-center text-sm">
                                             <span class="badge badge-sm {{ $job->status == 'active' ? 'bg-gradient-success' : 'bg-gradient-secondary' }}">{{ ucfirst($job->status) }}</span>
                                        </td>
                                    </tr>
                                    @endforeach
                                    @if(count($recentJobs) == 0)
                                        <tr><td colspan="3" class="text-center py-4">No recent jobs found.</td></tr>
                                    @endif
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Recent Blogs (Smaller Column) -->
            <div class="col-lg-4 col-md-6">
                <div class="card h-100">
                    <div class="card-header pb-0">
                        <h6>Recent Blogs</h6>
                        <p class="text-sm">
                            <i class="fa fa-arrow-up text-success" aria-hidden="true"></i>
                            <span class="font-weight-bold">Latest</span> publications
                        </p>
                    </div>
                    <div class="card-body p-3">
                        <div class="timeline timeline-one-side">
                             @foreach ($recentBlogs as $blog)
                            <div class="timeline-block mb-3">
                                <span class="timeline-step">
                                    <i class="material-symbols-rounded text-success text-gradient">notifications</i>
                                </span>
                                <div class="timeline-content">
                                    <h6 class="text-dark text-sm font-weight-bold mb-0">{{ Str::limit($blog->title, 25) }}</h6>
                                    <p class="text-secondary font-weight-bold text-xs mt-1 mb-0">{{ $blog->created_at->format('d M h:i A') }}</p>
                                </div>
                            </div>
                            @endforeach
                            @if(count($recentBlogs) == 0)
                                <p class="text-sm text-center">No blogs posted yet.</p>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Recent Applications (Full Width) -->
        <div class="row">
            <div class="col-12">
                 <div class="card my-4">
                    <div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
                        <div class="bg-gradient-primary-custom shadow-primary border-radius-lg pt-4 pb-3">
                            <h6 class="text-white text-capitalize ps-3">New Job Applications</h6>
                        </div>
                    </div>
                    <div class="card-body px-0 pb-2">
                         <div class="table-responsive p-0">
                            <table class="table align-items-center mb-0">
                                <thead>
                                    <tr>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Applicant</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Role</th>
                                        <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Date</th>
                                        <th class="text-secondary opacity-7"></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($recentApplications as $application)
                                    <tr>
                                        <td>
                                            <div class="d-flex px-2 py-1">
                                                <div>
                                                    <div class="avatar avatar-sm me-3 border-radius-lg bg-gradient-dark text-white d-flex align-items-center justify-content-center">
                                                        {{ strtoupper(substr($application->first_name, 0, 1)) }}
                                                    </div>
                                                </div>
                                                <div class="d-flex flex-column justify-content-center">
                                                    <h6 class="mb-0 text-sm">{{ $application->first_name }} {{ $application->last_name }}</h6>
                                                    <p class="text-xs text-secondary mb-0">{{ $application->email }}</p>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <p class="text-xs font-weight-bold mb-0">{{ $application->job->title ?? 'N/A' }}</p>
                                            <p class="text-xs text-secondary mb-0">Job ID: {{ $application->job_id }}</p>
                                        </td>
                                        <td class="align-middle text-center">
                                            <span class="text-secondary text-xs font-weight-bold">{{ $application->created_at->format('Y-m-d') }}</span>
                                        </td>
                                        <td class="align-middle">
                                             <a href="{{ route('admin-job-applications') }}" class="text-secondary font-weight-bold text-xs" data-toggle="tooltip" data-original-title="View user">
                                                View
                                            </a>
                                        </td>
                                    </tr>
                                    @endforeach
                                    @if(count($recentApplications) == 0)
                                        <tr><td colspan="4" class="text-center py-4">No new applications.</td></tr>
                                    @endif
                                </tbody>
                            </table>
                         </div>
                    </div>
                 </div>
            </div>
        </div>
    </div>
</div>