@include('admin.partials.header')
@include('admin.partials.sidebar')
@include('admin.partials.topbar')

<style>
    .mod-layout {
        display: grid;
        gap: 24px;
        grid-template-columns: 280px minmax(0, 1fr);
    }

    .filter-panel,
    .mod-card {
        background: #fff;
        border: 1px solid var(--color-outline-variant);
        border-radius: 16px;
        box-shadow: 0 4px 20px rgba(36, 59, 83, .05);
    }

    .filter-panel {
        align-self: start;
        padding: 24px;
        position: sticky;
        top: 88px;
    }

    .filter-panel h3 {
        font-family: 'Hanken Grotesk', sans-serif;
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 20px;
    }

    .filter-section {
        margin-bottom: 28px;
    }

    .filter-section-label {
        color: var(--color-outline);
        display: block;
        font-family: 'JetBrains Mono', monospace;
        font-size: 12px;
        letter-spacing: .08em;
        margin-bottom: 12px;
        text-transform: uppercase;
    }

    .filter-item,
    .urgency-btn {
        align-items: center;
        background: transparent;
        border: 0;
        border-radius: 8px;
        color: var(--color-on-surface);
        display: flex;
        gap: 10px;
        padding: 10px 12px;
        width: 100%;
    }

    .filter-item:hover,
    .filter-item.active,
    .urgency-btn:hover {
        background: var(--color-surface-container-low);
    }

    .filter-item input {
        accent-color: var(--color-primary);
    }

    .filter-item-label {
        flex: 1;
        text-align: left;
    }

    .filter-badge {
        background: var(--color-surface-container);
        border-radius: 999px;
        color: var(--color-on-surface-variant);
        font-family: 'JetBrains Mono', monospace;
        font-size: 11px;
        padding: 2px 8px;
    }

    .urgency-dot {
        border-radius: 50%;
        height: 8px;
        width: 8px;
    }

    .mod-page-title {
        color: var(--color-on-surface);
        font-family: 'Hanken Grotesk', sans-serif;
        font-size: clamp(32px, 4vw, 48px);
        font-weight: 700;
        margin: 0;
    }

    .mod-page-sub {
        color: var(--color-on-surface-variant);
        font-size: 18px;
        margin-top: 4px;
    }

    .btn-sort,
    .btn-bulk {
        align-items: center;
        border-radius: 999px;
        display: flex;
        font-family: 'JetBrains Mono', monospace;
        font-size: 14px;
        gap: 8px;
        padding: 9px 18px;
    }

    .btn-sort {
        background: #fff;
        border: 1px solid var(--color-outline-variant);
        color: var(--color-on-surface);
    }

    .btn-bulk {
        background: var(--color-primary);
        border: 0;
        color: #fff;
    }

    .mod-card {
        overflow: hidden;
        transition: opacity .3s, transform .3s, box-shadow .2s;
    }

    .mod-card:hover {
        box-shadow: 0 12px 32px rgba(36, 59, 83, .15);
    }

    .mod-card-img-wrap {
        height: 192px;
        overflow: hidden;
        position: relative;
    }

    .mod-card-img {
        height: 100%;
        object-fit: cover;
        width: 100%;
    }

    .type-pill,
    .time-pill,
    .status-pending-badge {
        border-radius: 999px;
        font-family: 'JetBrains Mono', monospace;
        font-size: 12px;
        padding: 4px 12px;
    }

    .type-pill {
        align-items: center;
        background: rgba(255, 255, 255, .9);
        color: var(--color-primary);
        display: flex;
        gap: 4px;
    }

    .time-pill {
        background: rgba(228, 239, 255, .95);
        color: var(--color-on-surface-variant);
    }

    .img-badge-left,
    .img-badge-right {
        position: absolute;
        top: 12px;
    }

    .img-badge-left {
        left: 12px;
    }

    .img-badge-right {
        right: 12px;
    }

    .mod-card-body {
        padding: 24px;
    }

    .mod-card-title {
        color: var(--color-on-surface);
        font-family: 'Hanken Grotesk', sans-serif;
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 4px;
    }

    .mod-card-author {
        align-items: center;
        color: var(--color-on-surface-variant);
        display: flex;
        font-size: 14px;
        gap: 4px;
        margin: 0;
    }

    .status-pending-badge {
        background: rgba(57, 184, 143, .12);
        color: var(--color-secondary);
        white-space: nowrap;
    }

    .btn-approve,
    .btn-reject,
    .btn-view {
        align-items: center;
        border: 0;
        border-radius: 8px;
        display: flex;
        font-family: 'JetBrains Mono', monospace;
        font-size: 14px;
        gap: 8px;
        justify-content: center;
        padding: 10px;
    }

    .btn-approve {
        background: var(--color-secondary);
        color: #fff;
        flex: 1;
    }

    .btn-reject {
        background: var(--color-error-container);
        color: var(--color-error);
        flex: 1;
    }

    .btn-view {
        background: transparent;
        border: 1px solid var(--color-outline-variant);
        color: var(--color-on-surface);
    }

    @media (max-width: 991px) {
        .mod-layout {
            grid-template-columns: 1fr;
        }

        .filter-panel {
            position: static;
        }
    }
</style>

<main id="main" class="pt-4">
    <section class="mod-layout">
        <aside class="filter-panel">
            <h3>Filters</h3>

            <div class="filter-section">
                <span class="filter-section-label">Listing Type</span>
                <label class="filter-item active">
                    <input type="checkbox" checked>
                    <span class="filter-item-label">All Listings</span>
                    <span class="filter-badge">124</span>
                </label>
                <label class="filter-item">
                    <input type="checkbox">
                    <span class="filter-item-label">Jobs</span>
                    <span class="filter-badge">42</span>
                </label>
                <label class="filter-item">
                    <input type="checkbox">
                    <span class="filter-item-label">Rentals</span>
                    <span class="filter-badge">58</span>
                </label>
                <label class="filter-item">
                    <input type="checkbox">
                    <span class="filter-item-label">Services</span>
                    <span class="filter-badge">24</span>
                </label>
            </div>

            <div class="filter-section mb-0">
                <span class="filter-section-label">Urgency</span>
                <button class="urgency-btn">
                    <span class="urgency-dot" style="background:var(--color-error);"></span>
                    High Priority
                </button>
                <button class="urgency-btn">
                    <span class="urgency-dot" style="background:var(--color-secondary);"></span>
                    Standard
                </button>
            </div>
        </aside>

        <section>
            <div class="d-flex flex-column flex-md-row align-items-md-end justify-content-between gap-3 mb-4">
                <div>
                    <h2 class="mod-page-title">Pending Approval</h2>
                    <p class="mod-page-sub">Reviewing 24 new submissions today.</p>
                </div>
                <div class="d-flex gap-2">
                    <button class="btn-sort">
                        <span class="material-symbols-outlined" style="font-size:18px;">sort</span>
                        Newest First
                    </button>
                    <button class="btn-bulk">Bulk Action (0)</button>
                </div>
            </div>

            <div class="row g-4">
                <div class="col-12 col-xl-6 col-xxl-4">
                    <div class="mod-card">
                        <div class="mod-card-img-wrap">
                            <img class="mod-card-img" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBh_bHKtACHwcO4tGFii51MgUP5FsGmBMUlDwlAKgBDXGj7p4JupNevfLDDLqFdiDrfFIN11daZ6457FOUgkR2_Q-FDRqP6hwtGg-d2ff4_5Db1iCbGbmof870s4IoYJ9kDyXbXvJ-sMMUNN0NcYQ8fYzrIv2KH-li2OMNoR8A6auPpnieVtbCsnryn_o5mAtlrk4VY9MD13QwHhjCRw2FcuqzO9Lqx5I-Sptr1U-MVF7V_uNI5ULwU5YfJgucqMD8rBYbUhKc2Iv8" alt="Industrial Loft Studio">
                            <div class="img-badge-left"><span class="type-pill"><span class="material-symbols-outlined">apartment</span> RENTALS</span></div>
                            <div class="img-badge-right"><span class="time-pill">2h ago</span></div>
                        </div>
                        <div class="mod-card-body">
                            <div class="d-flex justify-content-between gap-3 mb-4">
                                <div>
                                    <h4 class="mod-card-title">Industrial Loft Studio</h4>
                                    <p class="mod-card-author"><span class="material-symbols-outlined">account_circle</span> By: Alex Rivera</p>
                                </div>
                                <span class="status-pending-badge">PENDING</span>
                            </div>
                            <div class="d-flex gap-2">
                                <button class="btn-approve"><span class="material-symbols-outlined">check_circle</span> Approve</button>
                                <button class="btn-reject"><span class="material-symbols-outlined">cancel</span> Reject</button>
                                <button class="btn-view" title="View Details"><span class="material-symbols-outlined">visibility</span></button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-12 col-xl-6 col-xxl-4">
                    <div class="mod-card">
                        <div class="mod-card-img-wrap">
                            <img class="mod-card-img" src="https://lh3.googleusercontent.com/aida-public/AB6AXuC5bkCdNVtAjzjKWHGwv9zSDtiYJb9iqZ3L8IN_Ke04cto4zuO_OXv7m8775FXJVSmSzU3k5AWBS8fuyNvCd3Wu1JIi5b-z8hx2fZkRSRTsBS5SEv_Biisi45T4ImMPGWHxi_XAFElCbeXAe5bqWBYU-sRO5eU9t_IlkBCQVMohno4y1HCGzHptHVCVqQskO72cGgNsZCTHSuY6s-Q3KIXYZx1Pq7A7Kh-L7zM-Pselp37Pq0s_j8_k48nDKSCLTu0MTCDjZ9M4lPg" alt="Senior Product Designer">
                            <div class="img-badge-left"><span class="type-pill"><span class="material-symbols-outlined">work</span> JOBS</span></div>
                            <div class="img-badge-right"><span class="time-pill">5h ago</span></div>
                        </div>
                        <div class="mod-card-body">
                            <div class="d-flex justify-content-between gap-3 mb-4">
                                <div>
                                    <h4 class="mod-card-title">Senior Product Designer</h4>
                                    <p class="mod-card-author"><span class="material-symbols-outlined">business</span> By: TechFlow Systems</p>
                                </div>
                                <span class="status-pending-badge">PENDING</span>
                            </div>
                            <div class="d-flex gap-2">
                                <button class="btn-approve"><span class="material-symbols-outlined">check_circle</span> Approve</button>
                                <button class="btn-reject"><span class="material-symbols-outlined">cancel</span> Reject</button>
                                <button class="btn-view"><span class="material-symbols-outlined">visibility</span></button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-12 col-xl-6 col-xxl-4">
                    <div class="mod-card">
                        <div class="mod-card-img-wrap">
                            <img class="mod-card-img" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBNj8BHgxF6rKVnYAu0RNxPvL9hU0bO2IwGKCO26K-mCSweawScIWVGnH0iaDfy3hlOmzijxGOXnDi2659Y4AGlabeTTV5gSm8mGi82zSnZXz5wlMTUbphCKTDfKj2NvWQPFZK73_06nIqTYuI-1yKCL0pqdyUPgjIsmY1qI64ajofJ4t1Egc-fvBABrf6t6GWeOeejQYth6wQ09pfRYuRbaC9DlumJ7Jld2zZ5nsEuHIWFAXT5PR15VEO6KLyFrcH_yEtJnjEuEVc" alt="Maintenance Service">
                            <div class="img-badge-left"><span class="type-pill"><span class="material-symbols-outlined">construction</span> SERVICES</span></div>
                            <div class="img-badge-right"><span class="time-pill">1d ago</span></div>
                        </div>
                        <div class="mod-card-body">
                            <div class="d-flex justify-content-between gap-3 mb-4">
                                <div>
                                    <h4 class="mod-card-title">Home Maintenance Package</h4>
                                    <p class="mod-card-author"><span class="material-symbols-outlined">account_circle</span> By: Visual Arts Co.</p>
                                </div>
                                <span class="status-pending-badge">PENDING</span>
                            </div>
                            <div class="d-flex gap-2">
                                <button class="btn-approve"><span class="material-symbols-outlined">check_circle</span> Approve</button>
                                <button class="btn-reject"><span class="material-symbols-outlined">cancel</span> Reject</button>
                                <button class="btn-view"><span class="material-symbols-outlined">visibility</span></button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </section>
</main>

<script>
    document.querySelectorAll('.btn-approve, .btn-reject').forEach((button) => {
        button.addEventListener('click', () => {
            const column = button.closest('[class*="col-"]');
            const card = button.closest('.mod-card');

            card.style.opacity = '0';
            card.style.transform = 'translateY(-16px)';
            setTimeout(() => column?.remove(), 300);
        });
    });

    document.querySelectorAll('.filter-item').forEach((item) => {
        item.addEventListener('click', () => item.classList.toggle('active'));
    });
</script>

@include('admin.partials.footer')