<?= $this->extend('layouts/admin') ?>

<?= $this->section('content') ?>

<style>
    .gallery-container {
        display: flex;
        height: calc(100vh - 120px);
        background: #fff;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: var(--shadow-md);
    }

    .gallery-sidebar {
        width: 280px;
        background: #f8fafc;
        border-right: 1px solid var(--border);
        padding: 30px;
        display: flex;
        flex-direction: column;
    }

    .gallery-main {
        flex-grow: 1;
        padding: 40px;
        overflow-y: auto;
    }

    .integration-box {
        margin-top: 40px;
        text-align: center;
        padding: 20px;
    }

    .integration-icon {
        width: 60px;
        height: 60px;
        background: #fff;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 15px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.05);
        color: var(--text-admin-muted);
        font-size: 1.5rem;
    }

    .search-bar {
        background: #f8fafc;
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 12px 20px;
        width: 100%;
        max-width: 400px;
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 30px;
    }

    .search-bar input {
        background: none;
        border: none;
        outline: none;
        width: 100%;
        font-size: 0.95rem;
    }

    .category-chips {
        display: flex;
        gap: 10px;
        margin-bottom: 40px;
        flex-wrap: wrap;
    }

    .chip {
        padding: 8px 18px;
        border-radius: 20px;
        background: #fff;
        border: 1px solid var(--border);
        font-size: 0.85rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
        color: var(--text-admin-muted);
    }

    .chip.active {
        background: var(--primary);
        color: #fff;
        border-color: var(--primary);
    }

    .template-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 30px;
    }

    .template-card {
        border: 1px solid var(--border);
        border-radius: 20px;
        overflow: hidden;
        transition: all 0.3s;
        cursor: pointer;
        background: #fff;
    }

    .template-card:hover {
        transform: translateY(-5px);
        box-shadow: var(--shadow-lg);
        border-color: var(--primary);
    }

    .template-preview {
        height: 180px;
        background: #f8fafc;
        display: flex;
        align-items: center;
        justify-content: center;
        border-bottom: 1px solid var(--border);
        position: relative;
    }

    .template-preview .bi-plus-lg {
        font-size: 2.5rem;
        color: var(--text-admin-muted);
        opacity: 0.3;
    }

    .template-info {
        padding: 20px;
        text-align: center;
    }

    .template-info h4 {
        margin-bottom: 5px;
        font-size: 1.1rem;
    }

    .template-info p {
        color: var(--text-admin-muted);
        font-size: 0.85rem;
    }

    .sidebar-title {
        font-size: 1.2rem;
        font-weight: 700;
        margin-bottom: 10px;
    }

    .sidebar-subtitle {
        font-size: 0.8rem;
        color: var(--text-admin-muted);
        margin-bottom: 30px;
    }

    .menu-section-label {
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: var(--primary);
        font-weight: 700;
        margin-bottom: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
</style>

<div class="gallery-container">
    <div class="gallery-sidebar">
        <h2 class="sidebar-title">New Registers</h2>
        <p class="sidebar-subtitle">Choose a starting point</p>

        <div class="menu-section-label">
            MY INTEGRATIONS <i class="bi bi-plus-lg" style="cursor: pointer;"></i>
        </div>

        <div class="integration-box">
            <div class="integration-icon">
                <i class="bi bi-link-45deg"></i>
            </div>
            <h5 style="font-size: 0.95rem; margin-bottom: 8px;">No Integrations yet</h5>
            <p style="font-size: 0.75rem; color: var(--text-admin-muted); margin-bottom: 20px;">Connect your data sources</p>
            <button class="btn btn-primary" style="font-size: 0.75rem; padding: 8px 15px; border-radius: 8px; width: 100%;">
                <i class="bi bi-plus-lg"></i> Add Integration
            </button>
        </div>
    </div>

    <div class="gallery-main">
        <div class="search-bar">
            <i class="bi bi-search" style="color: var(--text-admin-muted);"></i>
            <input type="text" placeholder="Search templates...">
        </div>

        <div class="category-chips">
            <div class="chip active">All</div>
            <div class="chip">CRM</div>
            <div class="chip">HR</div>
            <div class="chip">Finance</div>
            <div class="chip">Project</div>
            <div class="chip">Inventory</div>
            <div class="chip">Marketing</div>
            <div class="chip">Custom</div>
            <div class="chip">General</div>
        </div>

        <div class="section-label" style="font-size: 0.85rem; font-weight: 700; color: var(--text-admin-muted); margin-bottom: 25px; display: flex; align-items: center; gap: 10px;">
            <div style="width: 8px; height: 8px; border-radius: 50%; background: var(--primary);"></div>
            BRANCH
        </div>

        <div class="template-grid">
            <div class="template-card" onclick="location.href='<?= base_url('admin/project_add') ?>'">
                <div class="template-preview">
                    <!-- Spreadsheet Pattern Background -->
                    <div style="width: 80%; height: 60%; background: #fff; border: 1px dashed var(--border); border-radius: 8px; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); padding: 5px;">
                        <?php for($i=0; $i<16; $i++): ?>
                            <div style="border: 0.5px solid #f1f5f9; background: <?= $i==5 ? 'transparent' : '#f8fafc' ?>; display: flex; align-items: center; justify-content: center;">
                                <?php if($i==5): ?><i class="bi bi-plus-lg" style="font-size: 1rem; opacity: 0.5;"></i><?php endif; ?>
                            </div>
                        <?php endfor; ?>
                    </div>
                </div>
                <div class="template-info">
                    <h4>Blank Registers</h4>
                    <p>Start from scratch</p>
                </div>
            </div>
            
            <!-- Placeholder Templates -->
            <div class="template-card" style="opacity: 0.6;">
                <div class="template-preview">
                    <i class="bi bi-people" style="font-size: 2.5rem; color: var(--primary);"></i>
                </div>
                <div class="template-info">
                    <h4>HR Directory</h4>
                    <p>Employee database template</p>
                </div>
            </div>

            <div class="template-card" style="opacity: 0.6;">
                <div class="template-preview">
                    <i class="bi bi-cash-stack" style="font-size: 2.5rem; color: #2ecc71;"></i>
                </div>
                <div class="template-info">
                    <h4>Finance Tracker</h4>
                    <p>Expense management template</p>
                </div>
            </div>
        </div>
    </div>
</div>

<?= $this->endSection() ?>
