<?php
require_once __DIR__ . '/../includes/auth.php';
require_once __DIR__ . '/../includes/config.php';

$page_title = 'إدارة التصنيفات';

$total_categories   = 0;
$active_categories  = 0;
$inactive_categories = 0;
$latest_categories  = [];

$result = $conn->query("SELECT COUNT(*) AS total FROM categories");
if ($result && $row = $result->fetch_assoc()) {
    $total_categories = (int)$row['total'];
}

$result = $conn->query("SELECT COUNT(*) AS total FROM categories WHERE status = 1");
if ($result && $row = $result->fetch_assoc()) {
    $active_categories = (int)$row['total'];
}

$result = $conn->query("SELECT COUNT(*) AS total FROM categories WHERE status = 0");
if ($result && $row = $result->fetch_assoc()) {
    $inactive_categories = (int)$row['total'];
}

$result = $conn->query("SELECT id, name, image, sort_order, status, created_at FROM categories ORDER BY id DESC LIMIT 6");
if ($result) {
    while ($row = $result->fetch_assoc()) {
        $latest_categories[] = $row;
    }
}

include __DIR__ . '/../includes/header.php';
include __DIR__ . '/../includes/sidebar.php';
?>

<div class="page-content">

    <div class="page-header-box">
        <div>
            <h1 class="page-main-title">إدارة التصنيفات</h1>
            <p class="page-main-subtitle">لوحة تحكم خاصة بإدارة أقسام التطبيق بشكل سريع ومرتب</p>
        </div>

        <div class="page-header-actions">
            <a href="create.php" class="btn btn-primary">
                <i class="fa-solid fa-plus"></i>
                <span>إضافة تصنيف جديد</span>
            </a>

            <a href="list.php" class="btn btn-light-custom">
                <i class="fa-solid fa-table-list"></i>
                <span>عرض كل التصنيفات</span>
            </a>
        </div>
    </div>

    <div class="dashboard-stats-grid">
        <div class="dashboard-stat-card border-primary">
            <div class="stat-icon bg-primary-soft">
                <i class="fa-solid fa-layer-group"></i>
            </div>
            <div class="stat-content">
                <h3><?php echo $total_categories; ?></h3>
                <p>إجمالي التصنيفات</p>
            </div>
        </div>

        <div class="dashboard-stat-card border-success">
            <div class="stat-icon bg-success-soft">
                <i class="fa-solid fa-circle-check"></i>
            </div>
            <div class="stat-content">
                <h3><?php echo $active_categories; ?></h3>
                <p>التصنيفات المفعلة</p>
            </div>
        </div>

        <div class="dashboard-stat-card border-danger">
            <div class="stat-icon bg-danger-soft">
                <i class="fa-solid fa-circle-xmark"></i>
            </div>
            <div class="stat-content">
                <h3><?php echo $inactive_categories; ?></h3>
                <p>التصنيفات المعطلة</p>
            </div>
        </div>
    </div>

    <div class="quick-actions-grid">
        <a href="create.php" class="quick-action-card">
            <div class="quick-action-icon">
                <i class="fa-solid fa-folder-plus"></i>
            </div>
            <div class="quick-action-text">
                <h4>إضافة تصنيف</h4>
                <p>إضافة قسم جديد للتطبيق مع صورة وترتيب</p>
            </div>
        </a>

        <a href="list.php" class="quick-action-card">
            <div class="quick-action-icon">
                <i class="fa-solid fa-list"></i>
            </div>
            <div class="quick-action-text">
                <h4>إدارة التصنيفات</h4>
                <p>عرض، تعديل، حذف، وتفعيل التصنيفات</p>
            </div>
        </a>
    </div>

    <div class="card categories-overview-card">
        <div class="section-head">
            <div>
                <h2>آخر التصنيفات المضافة</h2>
                <p>أحدث العناصر الموجودة داخل النظام</p>
            </div>
            <a href="list.php" class="section-link">عرض الكل</a>
        </div>

        <?php if (!empty($latest_categories)): ?>
            <div class="categories-mini-grid">
                <?php foreach ($latest_categories as $category): ?>
                    <div class="category-mini-card">
                        <div class="category-mini-image">
                            <?php if (!empty($category['image']) && file_exists(__DIR__ . '/../' . $category['image'])): ?>
                                <img src="/app/admin/<?php echo htmlspecialchars($category['image']); ?>" alt="<?php echo htmlspecialchars($category['name']); ?>">
                            <?php else: ?>
                                <div class="category-mini-placeholder">
                                    <i class="fa-solid fa-image"></i>
                                </div>
                            <?php endif; ?>
                        </div>

                        <div class="category-mini-info">
                            <h4><?php echo htmlspecialchars($category['name']); ?></h4>
                            <div class="category-meta-row">
                                <span>الترتيب: <?php echo (int)$category['sort_order']; ?></span>
                            </div>
                            <div class="category-meta-row">
                                <?php if ((int)$category['status'] === 1): ?>
                                    <span class="status-badge status-active">مفعل</span>
                                <?php else: ?>
                                    <span class="status-badge status-inactive">معطل</span>
                                <?php endif; ?>
                            </div>
                        </div>

                        <div class="category-mini-actions">
                            <a href="edit.php?id=<?php echo (int)$category['id']; ?>" class="mini-btn mini-btn-edit" title="تعديل">
                                <i class="fa-solid fa-pen"></i>
                            </a>
                            <a href="list.php" class="mini-btn mini-btn-view" title="عرض الكل">
                                <i class="fa-solid fa-eye"></i>
                            </a>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
        <?php else: ?>
            <div class="empty-state-box">
                <div class="empty-state-icon">
                    <i class="fa-solid fa-layer-group"></i>
                </div>
                <h3>ماكو تصنيفات حالياً</h3>
                <p>ابدأ بإضافة أول تصنيف حتى يظهر داخل التطبيق</p>
                <a href="create.php" class="btn btn-primary">
                    <i class="fa-solid fa-plus"></i>
                    <span>إضافة أول تصنيف</span>
                </a>
            </div>
        <?php endif; ?>
    </div>

</div>

<style>
.page-header-box{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
    margin-bottom:24px;
    background:linear-gradient(135deg,#ffffff 0%,#f9fbfd 100%);
    border:1px solid #e9eef4;
    border-radius:22px;
    padding:24px;
    box-shadow:0 10px 25px rgba(15,23,42,0.05);
}

.page-main-title{
    margin:0 0 8px;
    font-size:30px;
    font-weight:800;
    color:#1f2937;
}

.page-main-subtitle{
    margin:0;
    color:#6b7280;
    font-size:15px;
}

.page-header-actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

.btn-light-custom{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:44px;
    border-radius:14px;
    border:1px solid #dce6ee;
    background:#fff;
    color:#1f2937;
    text-decoration:none;
    padding:10px 16px;
    font-weight:700;
    transition:.2s ease;
}

.btn-light-custom:hover{
    background:#f8fbfd;
    border-color:#96b8cc;
}

.dashboard-stats-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:18px;
    margin-bottom:20px;
}

.dashboard-stat-card{
    background:#fff;
    border-radius:20px;
    padding:22px;
    display:flex;
    align-items:center;
    gap:16px;
    border:1px solid #ecf1f6;
    box-shadow:0 10px 25px rgba(15,23,42,0.05);
    position:relative;
    overflow:hidden;
}

.dashboard-stat-card::after{
    content:"";
    position:absolute;
    left:-25px;
    bottom:-25px;
    width:90px;
    height:90px;
    border-radius:50%;
    background:rgba(150,184,204,0.08);
}

.border-primary{
    border-top:4px solid #96b8cc;
}

.border-success{
    border-top:4px solid #22c55e;
}

.border-danger{
    border-top:4px solid #ef4444;
}

.stat-icon{
    width:62px;
    height:62px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    flex-shrink:0;
}

.bg-primary-soft{
    background:rgba(150,184,204,0.18);
    color:#5f8ea8;
}

.bg-success-soft{
    background:rgba(34,197,94,0.16);
    color:#16a34a;
}

.bg-danger-soft{
    background:rgba(239,68,68,0.16);
    color:#dc2626;
}

.stat-content h3{
    margin:0 0 6px;
    font-size:30px;
    font-weight:800;
    color:#111827;
}

.stat-content p{
    margin:0;
    color:#6b7280;
    font-weight:600;
}

.quick-actions-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:18px;
    margin-bottom:22px;
}

.quick-action-card{
    background:#fff;
    border-radius:20px;
    padding:20px;
    border:1px solid #e8edf3;
    box-shadow:0 10px 25px rgba(15,23,42,0.05);
    display:flex;
    align-items:center;
    gap:16px;
    text-decoration:none;
    color:#1f2937;
    transition:.25s ease;
}

.quick-action-card:hover{
    transform:translateY(-4px);
    border-color:#96b8cc;
    box-shadow:0 16px 35px rgba(15,23,42,0.08);
}

.quick-action-icon{
    width:58px;
    height:58px;
    border-radius:18px;
    background:linear-gradient(135deg,#96b8cc 0%,#7ea7be 100%);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    flex-shrink:0;
}

.quick-action-text h4{
    margin:0 0 6px;
    font-size:18px;
    font-weight:800;
}

.quick-action-text p{
    margin:0;
    color:#6b7280;
    font-size:14px;
}

.categories-overview-card{
    border-radius:22px;
    padding:22px;
}

.section-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:20px;
}

.section-head h2{
    margin:0 0 6px;
    font-size:22px;
    font-weight:800;
    color:#111827;
}

.section-head p{
    margin:0;
    color:#6b7280;
    font-size:14px;
}

.section-link{
    text-decoration:none;
    color:#5f8ea8;
    font-weight:700;
}

.categories-mini-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:18px;
}

.category-mini-card{
    border:1px solid #edf2f7;
    border-radius:20px;
    padding:16px;
    display:flex;
    flex-direction:column;
    gap:14px;
    background:#fff;
    transition:.2s ease;
}

.category-mini-card:hover{
    border-color:#d8e6ef;
    box-shadow:0 12px 26px rgba(15,23,42,0.06);
}

.category-mini-image{
    width:100%;
    height:170px;
    border-radius:18px;
    overflow:hidden;
    background:#f8fafc;
    border:1px solid #eef2f7;
    display:flex;
    align-items:center;
    justify-content:center;
}

.category-mini-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.category-mini-placeholder{
    font-size:34px;
    color:#a0aec0;
}

.category-mini-info h4{
    margin:0 0 10px;
    font-size:18px;
    font-weight:800;
    color:#111827;
}

.category-meta-row{
    margin-bottom:8px;
    color:#6b7280;
    font-size:14px;
    font-weight:600;
}

.status-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:30px;
    padding:4px 12px;
    border-radius:999px;
    font-size:13px;
    font-weight:800;
}

.status-active{
    background:rgba(34,197,94,0.14);
    color:#15803d;
}

.status-inactive{
    background:rgba(239,68,68,0.14);
    color:#b91c1c;
}

.category-mini-actions{
    display:flex;
    gap:10px;
    margin-top:auto;
}

.mini-btn{
    width:40px;
    height:40px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    transition:.2s ease;
}

.mini-btn-edit{
    background:#eff6ff;
    color:#2563eb;
}

.mini-btn-view{
    background:#f0fdf4;
    color:#16a34a;
}

.mini-btn:hover{
    transform:translateY(-2px);
}

.empty-state-box{
    padding:40px 20px;
    text-align:center;
}

.empty-state-icon{
    width:80px;
    height:80px;
    margin:0 auto 16px;
    border-radius:24px;
    background:rgba(150,184,204,0.16);
    color:#5f8ea8;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:30px;
}

.empty-state-box h3{
    margin:0 0 10px;
    font-size:22px;
    font-weight:800;
}

.empty-state-box p{
    margin:0 0 18px;
    color:#6b7280;
}

@media (max-width: 991px){
    .page-main-title{
        font-size:24px;
    }

    .page-header-box{
        padding:18px;
    }

    .dashboard-stat-card,
    .quick-action-card{
        padding:18px;
    }

    .category-mini-image{
        height:150px;
    }
}
</style>

<?php include __DIR__ . '/../includes/footer.php'; ?>