<div class="min-h-screen bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50">
    @push('styles')
        <style>
            .glass-card {
                @apply bg-white/80 backdrop-blur-xl rounded-2xl border border-white/20 shadow-xl;
            }

            .gradient-text {
                @apply bg-gradient-to-r from-blue-600 via-purple-600 to-indigo-600 bg-clip-text text-transparent;
            }

            .stat-card {
                @apply glass-card p-6 hover-lift;
            }

            .stat-icon {
                @apply w-12 h-12 rounded-full flex items-center justify-center text-white text-xl shadow-lg;
            }

            .hover-lift {
                @apply transition-all duration-300 hover:transform hover:-translate-y-1 hover:shadow-2xl;
            }

            .pulse-animation {
                animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
            }

            @keyframes pulse {
                0%, 100% {
                    opacity: 1;
                }
                50% {
                    opacity: .8;
                }
            }
        </style>
    @endpush

    <div class="container mx-auto px-4 py-8 max-w-7xl">
        <!-- 页面标题 -->
        <div class="text-center mb-8">
            <div class="glass-card inline-block px-8 py-4 mb-6">
                <h1 class="text-4xl font-bold gradient-text mb-2">
                    教材目录管理
                </h1>
                <p class="text-slate-600">
                    管理教材的章节目录结构
                </p>
            </div>
        </div>

        <!-- 统计卡片 -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
            @php
                $catalogs = $this->table->getRecords();
                $total = $catalogs->count();
            @endphp

            <div class="stat-card">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm font-medium text-slate-600">目录总数</p>
                        <p class="text-3xl font-bold gradient-text">{{ $total }}</p>
                    </div>
                    <div class="stat-icon bg-gradient-to-r from-blue-500 to-blue-600 pulse-animation" style="animation-delay: 0s;">
                        📋
                    </div>
                </div>
            </div>

            <div class="stat-card">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm font-medium text-slate-600">已发布</p>
                        <p class="text-3xl font-bold text-green-600">{{ $total }}</p>
                    </div>
                    <div class="stat-icon bg-gradient-to-r from-green-500 to-green-600 pulse-animation" style="animation-delay: 0.3s;">
                        ✓
                    </div>
                </div>
            </div>

            <div class="stat-card">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm font-medium text-slate-600">活跃</p>
                        <p class="text-3xl font-bold text-purple-600">{{ $total }}</p>
                    </div>
                    <div class="stat-icon bg-gradient-to-r from-purple-500 to-purple-600 pulse-animation" style="animation-delay: 0.6s;">
                        🔄
                    </div>
                </div>
            </div>
        </div>

        <!-- 表格容器 -->
        <div class="glass-card p-6">
            {{ $this->table }}
        </div>
    </div>
</div>
