<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lingel Media Portal</title>

    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

    <style>
        :root {
            --brand-green: #0e6b57;
            --brand-green-dark: #0a4d3f;
            --brand-green-soft: #1a8b73;
            --brand-gold: #d9a728;
            --brand-gold-soft: #f3c85a;
            --brand-cream: #f7f2e7;
            --bg-main: #081411;
            --bg-secondary: #0d1d19;
            --panel: rgba(15, 32, 27, 0.88);
            --panel-light: rgba(23, 44, 38, 0.92);
            --border-soft: rgba(217, 167, 40, 0.18);
            --text-main: #f5f7f2;
            --text-muted: #b8c7c0;
            --shadow-gold: 0 10px 30px rgba(217, 167, 40, 0.12);
            --shadow-green: 0 10px 30px rgba(14, 107, 87, 0.22);
        }

        * {
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            background:
                radial-gradient(circle at top left, rgba(217, 167, 40, 0.10), transparent 28%),
                radial-gradient(circle at top right, rgba(14, 107, 87, 0.16), transparent 30%),
                linear-gradient(180deg, #07110f 0%, #0a1714 35%, #081411 100%);
            color: var(--text-main);
            font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            min-height: 100vh;
        }

        .no-select {
            user-select: none;
            -webkit-user-select: none;
        }

        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: #0c1614; }
        ::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, var(--brand-gold), var(--brand-green));
            border-radius: 12px;
        }

        .glass-nav {
            background: rgba(7, 17, 15, 0.82);
            backdrop-filter: blur(16px);
            border-bottom: 1px solid rgba(217, 167, 40, 0.10);
            box-shadow: 0 10px 30px rgba(0,0,0,0.18);
        }

        .brand-wrap {
            display: flex;
            align-items: center;
            gap: 14px;
        }

        .brand-logo {
            width: 48px;
            height: 48px;
            object-fit: cover;
            border-radius: 9999px;
            border: 2px solid rgba(217, 167, 40, 0.55);
            box-shadow: 0 6px 18px rgba(217, 167, 40, 0.18);
            background: #fff;
        }

        .brand-text {
            line-height: 1;
        }

        .brand-title {
            font-size: 1.4rem;
            font-weight: 800;
            letter-spacing: 0.12em;
            color: var(--brand-cream);
        }

        .brand-title .accent {
            color: var(--brand-gold-soft);
        }

        .brand-subtitle {
            font-size: 0.68rem;
            letter-spacing: 0.24em;
            text-transform: uppercase;
            color: rgba(245, 247, 242, 0.58);
            margin-top: 4px;
        }

        .hero-section {
            position: relative;
            overflow: hidden;
            padding: 70px 16px 56px;
            background:
                linear-gradient(135deg, rgba(14, 107, 87, 0.10), rgba(217, 167, 40, 0.08)),
                linear-gradient(180deg, rgba(10, 23, 20, 0.92), rgba(7, 17, 15, 0.86));
            border-bottom: 1px solid rgba(217, 167, 40, 0.10);
        }

        .hero-section::before {
            content: "";
            position: absolute;
            inset: auto -80px -80px auto;
            width: 260px;
            height: 260px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(217, 167, 40, 0.18), transparent 65%);
            pointer-events: none;
        }

        .hero-section::after {
            content: "";
            position: absolute;
            top: -60px;
            left: -80px;
            width: 280px;
            height: 280px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(14, 107, 87, 0.16), transparent 68%);
            pointer-events: none;
        }

        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(217, 167, 40, 0.12);
            color: var(--brand-gold-soft);
            border: 1px solid rgba(217, 167, 40, 0.20);
            padding: 8px 16px;
            border-radius: 9999px;
            font-size: 0.85rem;
            font-weight: 600;
            margin-bottom: 18px;
            box-shadow: var(--shadow-gold);
        }

        .hero-title {
            font-size: clamp(2.2rem, 4vw, 4rem);
            font-weight: 900;
            line-height: 1.05;
            color: var(--brand-cream);
            margin-bottom: 14px;
        }

        .hero-title span {
            color: var(--brand-gold-soft);
        }

        .hero-desc {
            color: rgba(245, 247, 242, 0.72);
            font-size: 1rem;
            max-width: 760px;
            margin: 0 auto 28px;
        }

        .search-shell {
            position: relative;
            max-width: 860px;
            margin: 0 auto;
        }

        .search-shell::before {
            content: "";
            position: absolute;
            inset: -1px;
            border-radius: 9999px;
            background: linear-gradient(135deg, rgba(217, 167, 40, 0.55), rgba(14, 107, 87, 0.48));
            z-index: 0;
            opacity: 0.55;
        }

        .search-box {
            position: relative;
            z-index: 1;
            width: 100%;
            padding: 18px 24px 18px 60px;
            border-radius: 9999px;
            border: 1px solid rgba(255,255,255,0.06);
            background: rgba(8, 20, 17, 0.95);
            color: #fff;
            font-size: 1.05rem;
            outline: none;
            box-shadow: 0 16px 40px rgba(0,0,0,0.28);
            transition: all 0.3s ease;
        }

        .search-box:focus {
            box-shadow: 0 0 0 4px rgba(217, 167, 40, 0.12), 0 18px 45px rgba(0,0,0,0.28);
            transform: translateY(-1px);
        }

        .search-icon {
            position: absolute;
            top: 50%;
            left: 24px;
            transform: translateY(-50%);
            z-index: 2;
            color: var(--brand-gold-soft);
            font-size: 1.15rem;
        }

        .filter-panel {
            background: linear-gradient(180deg, rgba(11, 24, 20, 0.92), rgba(9, 19, 16, 0.88));
            border: 1px solid rgba(217, 167, 40, 0.10);
            border-radius: 24px;
            padding: 24px;
            box-shadow: 0 20px 50px rgba(0,0,0,0.18);
        }

        .section-label {
            color: rgba(245, 247, 242, 0.62);
            font-size: 0.8rem;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            margin-bottom: 12px;
            font-weight: 700;
        }

        .type-btn,
        .cat-btn {
            background: rgba(255,255,255,0.03);
            color: var(--text-muted);
            border: 1px solid rgba(255,255,255,0.06);
            transition: all 0.28s ease;
            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.015);
        }

        .type-btn:hover,
        .cat-btn:hover {
            transform: translateY(-2px);
            color: white;
            border-color: rgba(217, 167, 40, 0.24);
            background: rgba(217, 167, 40, 0.08);
            box-shadow: var(--shadow-gold);
        }

        .filter-active {
            background: linear-gradient(135deg, var(--brand-gold), #bf8f19) !important;
            color: #101713 !important;
            border-color: rgba(217, 167, 40, 0.90) !important;
            box-shadow: 0 10px 24px rgba(217, 167, 40, 0.22) !important;
        }

        .select2-container--default .select2-selection--single {
            background: rgba(255,255,255,0.03);
            border: 1px solid rgba(217, 167, 40, 0.15);
            height: 46px;
            border-radius: 9999px;
            display: flex;
            align-items: center;
            padding: 0 8px;
        }

        .select2-container--default .select2-selection--single .select2-selection__rendered {
            color: #e7ece8;
            padding-left: 0.9rem;
            font-weight: 600;
            line-height: 44px;
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 44px;
            right: 10px;
        }

        .select2-dropdown {
            background: #0c1714;
            border: 1px solid rgba(217, 167, 40, 0.18);
            color: white;
            border-radius: 12px;
            overflow: hidden;
        }

        .select2-search--dropdown .select2-search__field {
            background: #091310;
            color: white;
            border: 1px solid rgba(217, 167, 40, 0.12);
            border-radius: 8px;
            outline: none;
        }

        .select2-results__option {
            padding: 10px 12px;
        }

        .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
            background: linear-gradient(135deg, var(--brand-green), var(--brand-green-soft));
            color: white;
        }

        .assets-grid {
            margin-top: 30px;
        }

        .asset-card {
            position: relative;
            background:
                linear-gradient(180deg, rgba(18, 35, 30, 0.96), rgba(10, 21, 18, 0.98));
            border: 1px solid rgba(217, 167, 40, 0.10);
            border-radius: 22px;
            overflow: hidden;
            transition: all 0.32s ease;
            box-shadow: 0 14px 34px rgba(0,0,0,0.18);
        }

        .asset-card::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, transparent 40%, rgba(217, 167, 40, 0.03) 100%);
            pointer-events: none;
        }

        .asset-card:hover {
            transform: translateY(-8px);
            border-color: rgba(217, 167, 40, 0.34);
            box-shadow: 0 22px 48px rgba(0,0,0,0.26), 0 0 0 1px rgba(217, 167, 40, 0.08);
        }

        .asset-media {
            position: relative;
            background:
                radial-gradient(circle at top, rgba(217, 167, 40, 0.08), transparent 40%),
                linear-gradient(180deg, #13241f, #0b1513);
        }

        .asset-type-badge {
            position: absolute;
            top: 12px;
            right: 12px;
            background: rgba(10, 14, 13, 0.78);
            border: 1px solid rgba(217, 167, 40, 0.18);
            color: var(--brand-gold-soft);
            padding: 6px 10px;
            border-radius: 9999px;
            font-size: 0.65rem;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            backdrop-filter: blur(8px);
        }

        .play-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(0,0,0,0.06), rgba(0,0,0,0.36));
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.25s ease;
        }

        .asset-card:hover .play-overlay {
            background: linear-gradient(180deg, rgba(14, 107, 87, 0.10), rgba(0,0,0,0.18));
        }

        .play-overlay i {
            color: white;
            opacity: 0.88;
            filter: drop-shadow(0 4px 10px rgba(0,0,0,0.35));
        }

        .asset-body {
            position: relative;
            z-index: 1;
            padding: 18px 18px 16px;
        }

        .asset-category {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: var(--brand-gold-soft);
            font-size: 0.68rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            margin-bottom: 10px;
        }

        .asset-title {
            font-size: 0.96rem;
            font-weight: 700;
            color: #f9fbf8;
            line-height: 1.45;
            transition: color 0.25s ease;
        }

        .asset-card:hover .asset-title {
            color: var(--brand-gold-soft);
        }

        .asset-footer {
            margin-top: 16px;
            padding-top: 14px;
            border-top: 1px solid rgba(255,255,255,0.06);
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 0.72rem;
            text-transform: uppercase;
            color: rgba(245, 247, 242, 0.55);
            letter-spacing: 0.06em;
        }

        .view-link {
            color: #8dd8c2;
            font-weight: 700;
        }

        .empty-state {
            background: linear-gradient(180deg, rgba(18, 35, 30, 0.95), rgba(10, 21, 18, 0.98));
            border: 1px solid rgba(217, 167, 40, 0.10);
            border-radius: 24px;
            box-shadow: 0 18px 42px rgba(0,0,0,0.18);
        }

        .modal-shell {
            background: rgba(0, 0, 0, 0.92);
            backdrop-filter: blur(14px);
        }

        .modal-topbar {
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.80), rgba(0, 0, 0, 0.12));
        }

        .modal-btn {
            width: 42px;
            height: 42px;
            border-radius: 9999px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(255,255,255,0.06);
            color: #e8ebe9;
            border: 1px solid rgba(217, 167, 40, 0.12);
            transition: all 0.25s ease;
        }

        .modal-btn:hover {
            background: rgba(217, 167, 40, 0.14);
            color: white;
            transform: translateY(-1px);
        }

        /* Pagination */
        nav[role="navigation"] {
            margin-top: 4rem;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        nav[role="navigation"] .text-sm.text-gray-700 {
            color: rgba(245, 247, 242, 0.50) !important;
            margin-bottom: 1.2rem;
            font-size: 0.76rem;
            text-transform: uppercase;
            letter-spacing: 0.14em;
        }

        nav[role="navigation"] .relative.z-0 {
            display: inline-flex;
            border-radius: 16px;
            padding: 6px;
            background: rgba(15, 31, 27, 0.84);
            border: 1px solid rgba(217, 167, 40, 0.12);
            box-shadow: 0 12px 32px rgba(0,0,0,0.18);
        }

        nav[role="navigation"] a,
        nav[role="navigation"] span.relative {
            border: none !important;
            margin: 0 3px;
            border-radius: 10px !important;
            min-width: 42px;
            height: 42px;
            display: flex !important;
            align-items: center;
            justify-content: center;
            background: transparent !important;
            color: rgba(245, 247, 242, 0.68) !important;
            font-weight: 700;
            transition: all 0.25s ease;
        }

        nav[role="navigation"] a:hover {
            background: rgba(217, 167, 40, 0.10) !important;
            color: var(--brand-gold-soft) !important;
        }

        nav[role="navigation"] span[aria-current="page"] span {
            background: linear-gradient(135deg, var(--brand-gold), #bc8d1c) !important;
            color: #121814 !important;
            box-shadow: 0 8px 18px rgba(217, 167, 40, 0.28);
        }

        nav[role="navigation"] svg {
            width: 1.1rem;
            height: 1.1rem;
        }

        .footer-note {
            color: rgba(245, 247, 242, 0.42);
            font-size: 0.82rem;
        }

        @media (max-width: 768px) {
            .brand-title {
                font-size: 1.1rem;
            }

            .hero-section {
                padding-top: 56px;
                padding-bottom: 44px;
            }

            .hero-desc {
                font-size: 0.95rem;
            }

            .filter-panel {
                padding: 18px;
                border-radius: 20px;
            }
        }
    </style>
</head>
<body class="leading-normal tracking-normal no-select">

    <nav class="glass-nav sticky top-0 z-40">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-20 items-center">
                <div class="brand-wrap">
                    <img src="assets/logo.png" alt="Lingel Logo" class="brand-logo">
                    <div class="brand-text">
                        <div class="brand-title">Lingel</div>
                        <div class="brand-subtitle">Premium Asset Portal</div>
                    </div>
                </div>

                <div class="flex items-center space-x-3 sm:space-x-4">
                    <span class="text-sm hidden sm:block" style="color: rgba(245,247,242,0.70);">
                        Hello, <strong style="color: var(--brand-gold-soft);"><?php echo e(Auth::user()->name); ?></strong>
                    </span>

                    <?php if(Auth::user()->role === 'super_admin' || Auth::user()->role === 'uploader'): ?>
                        <a href="<?php echo e(route('admin.assets')); ?>"
                           class="px-4 py-2.5 rounded-xl text-sm font-semibold transition"
                           style="background: linear-gradient(135deg, var(--brand-green), var(--brand-green-soft)); color: white; box-shadow: var(--shadow-green);">
                            <i class="fas fa-cog mr-2"></i>Admin Panel
                        </a>
                    <?php endif; ?>

                    <form method="POST" action="<?php echo e(route('logout')); ?>">
                        <?php echo csrf_field(); ?>
                        <button type="submit" class="modal-btn" title="Logout">
                            <i class="fas fa-sign-out-alt text-base"></i>
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </nav>

    <section class="hero-section">
        <div class="max-w-5xl mx-auto text-center relative z-10">
            <div class="hero-badge">
                <i class="fas fa-shield-alt"></i>
                Organized. Elegant. Brand-Ready.
            </div>

            <h2 class="hero-title">
                Find The Perfect <span>Lingel Asset</span>
            </h2>

            <p class="hero-desc">
                Search images, videos, and documents from your premium Lingel media library with a cleaner,
                more refined experience built around the brand’s green and gold identity.
            </p>

            <div class="search-shell">
                <span class="search-icon"><i class="fas fa-search"></i></span>
                <input
                    type="text"
                    id="mainSearch"
                    value="<?php echo e(request('search')); ?>"
                    placeholder="Search by title, asset type, or category..."
                    class="search-box"
                >
            </div>
        </div>
    </section>

    <div class="max-w-7xl mx-auto px-4 w-full mt-8 mb-8">
        <div class="filter-panel">
            <div class="mb-6">
                <div class="section-label">Asset Type</div>
                <div class="flex flex-wrap gap-3">
                    <button class="type-btn <?php echo e(request('type', 'all') == 'all' ? 'filter-active' : ''); ?> px-5 py-3 rounded-xl font-semibold" data-type="all">
                        <i class="fas fa-th-large mr-2"></i>All Types
                    </button>
                    <button class="type-btn <?php echo e(request('type') == 'video' ? 'filter-active' : ''); ?> px-5 py-3 rounded-xl font-semibold" data-type="video">
                        <i class="fas fa-video mr-2"></i>Videos
                    </button>
                    <button class="type-btn <?php echo e(request('type') == 'image' ? 'filter-active' : ''); ?> px-5 py-3 rounded-xl font-semibold" data-type="image">
                        <i class="fas fa-image mr-2"></i>Images
                    </button>
                    <button class="type-btn <?php echo e(request('type') == 'document' ? 'filter-active' : ''); ?> px-5 py-3 rounded-xl font-semibold" data-type="document">
                        <i class="fas fa-file-pdf mr-2"></i>Documents
                    </button>
                </div>
            </div>

            <div>
                <div class="section-label">Categories</div>
                <div class="flex flex-wrap items-center gap-3">
                    <button class="cat-btn <?php echo e(request('category', 'all') == 'all' ? 'filter-active' : ''); ?> px-6 py-2.5 rounded-full font-semibold" data-category="all">
                        All Categories
                    </button>

                    <?php
                        $visibleCategories = $categories->take(4);
                        $hiddenCategories = $categories->skip(4);
                    ?>

                    <?php $__currentLoopData = $visibleCategories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $category): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <button
                            class="cat-btn <?php echo e(request('category') == $category->id ? 'filter-active' : ''); ?> px-6 py-2.5 rounded-full font-semibold"
                            data-category="<?php echo e($category->id); ?>"
                        >
                            <?php echo e($category->name); ?>

                        </button>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

                    <?php if($hiddenCategories->count() > 0): ?>
                        <div class="w-64 ml-0 sm:ml-2">
                            <select id="moreCategories" class="select2-more w-full" data-placeholder="More Categories...">
                                <option></option>
                                <?php $__currentLoopData = $hiddenCategories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $category): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <option value="<?php echo e($category->id); ?>" <?php echo e(request('category') == $category->id ? 'selected' : ''); ?>>
                                        <?php echo e($category->name); ?>

                                    </option>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            </select>
                        </div>
                    <?php endif; ?>
                </div>
            </div>
        </div>
    </div>

    <main class="flex-grow max-w-7xl mx-auto px-4 w-full mb-16">
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 assets-grid" id="assetsGrid">
            <?php $__empty_1 = true; $__currentLoopData = $assets; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $asset): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                <div
                    onclick="openPreviewModal('<?php echo e($asset->title); ?>', '<?php echo e($asset->file_type); ?>', '<?php echo e($asset->file_url); ?>')"
                    class="asset-card cursor-pointer group flex flex-col"
                >
                    <div class="relative aspect-video asset-media w-full flex items-center justify-center overflow-hidden pointer-events-none">
                        <?php if($asset->file_type == 'video'): ?>
                            <video class="w-full h-full object-cover" preload="metadata">
                                <source src="<?php echo e($asset->file_url); ?>" type="video/mp4">
                            </video>
                            <div class="play-overlay">
                                <i class="fas fa-play-circle text-5xl"></i>
                            </div>
                        <?php elseif($asset->file_type == 'image'): ?>
                            <img src="<?php echo e($asset->file_url); ?>" alt="Preview" class="w-full h-full object-cover group-hover:scale-105 transition duration-500">
                        <?php elseif($asset->file_type == 'document'): ?>
                            <div class="flex flex-col items-center justify-center text-center px-4">
                                <div class="w-20 h-20 rounded-full flex items-center justify-center mb-3"
                                     style="background: rgba(217, 167, 40, 0.10); border: 1px solid rgba(217,167,40,0.18);">
                                    <i class="fas fa-file-pdf text-4xl" style="color: var(--brand-gold-soft);"></i>
                                </div>
                                <p class="text-sm" style="color: rgba(245,247,242,0.65);">Preview Document</p>
                            </div>
                        <?php endif; ?>

                        <span class="asset-type-badge"><?php echo e($asset->file_type); ?></span>
                    </div>

                    <div class="asset-body flex-grow flex flex-col justify-between pointer-events-none">
                        <div>
                            <div class="asset-category">
                                <i class="fas fa-folder-open text-[10px]"></i>
                                <?php echo e($asset->category->name ?? 'General'); ?>

                            </div>

                            <h3 class="asset-title line-clamp-2">
                                <?php echo e($asset->title); ?>

                            </h3>
                        </div>

                        <div class="asset-footer">
                            <span><?php echo e($asset->file_size ?? 'N/A'); ?></span>
                            <span class="view-link">View Asset</span>
                        </div>
                    </div>
                </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                <div class="col-span-full text-center py-20 empty-state mt-4">
                    <div class="w-24 h-24 mx-auto rounded-full flex items-center justify-center mb-6"
                         style="background: rgba(217, 167, 40, 0.08); border: 1px solid rgba(217, 167, 40, 0.14);">
                        <i class="fas fa-search-minus text-4xl" style="color: var(--brand-gold-soft);"></i>
                    </div>
                    <h3 class="text-3xl font-bold mb-2" style="color: var(--brand-cream);">No results found</h3>
                    <p class="text-sm" style="color: rgba(245,247,242,0.58);">
                        Try changing your search term, asset type, or category filter.
                    </p>
                </div>
            <?php endif; ?>
        </div>

        <div class="mt-12 mb-12">
            <?php echo e($assets->links()); ?>

        </div>

        <div class="text-center footer-note mt-8">
          Designed by: <a href="https://www.onelogindigitalmedia.com" target="_blank" class="text-blue-400 hover:underline">One Login Digital Media</a>
        </div>
    </main>

    <div id="previewModal" class="fixed inset-0 modal-shell z-[100] hidden flex-col items-center justify-center">
        <div class="absolute top-0 left-0 w-full p-6 flex justify-between items-center z-50 modal-topbar">
            <h3 id="modalTitle" class="text-white text-xl font-bold tracking-wide"></h3>

            <div class="flex items-center gap-3">
                <button id="fullscreenBtn" title="Toggle Fullscreen" class="modal-btn">
                    <i id="fullscreenIcon" class="fas fa-expand-arrows-alt"></i>
                </button>

                <button onclick="closePreviewModal()" class="modal-btn" title="Close Preview">
                    <i class="fas fa-times text-lg"></i>
                </button>
            </div>
        </div>

        <div id="modalContent" class="w-full h-full max-w-6xl mx-auto flex items-center justify-center p-8 mt-10"></div>
    </div>

    <script>
        const modalElement = document.getElementById('previewModal');
        const fullscreenBtn = document.getElementById('fullscreenBtn');
        const fullscreenIcon = document.getElementById('fullscreenIcon');

        function toggleFullScreen() {
            if (!document.fullscreenElement) {
                modalElement.requestFullscreen().catch(err => console.error(err));
            } else {
                document.exitFullscreen();
            }
        }

        function updateFullscreenIcons() {
            if (document.fullscreenElement) {
                fullscreenIcon.classList.replace('fa-expand-arrows-alt', 'fa-compress-arrows-alt');
            } else {
                fullscreenIcon.classList.replace('fa-compress-arrows-alt', 'fa-expand-arrows-alt');
            }
        }

        fullscreenBtn.addEventListener('click', toggleFullScreen);
        document.addEventListener('fullscreenchange', updateFullscreenIcons);

        function openPreviewModal(title, type, url) {
            document.getElementById('modalTitle').innerText = title;
            let contentContainer = document.getElementById('modalContent');
            contentContainer.innerHTML = '';
            let safeHtml = '';

            if (type === 'video') {
                safeHtml = `<video src="${url}" controls controlsList="nodownload" oncontextmenu="return false;" class="max-w-full max-h-[80vh] rounded-2xl shadow-2xl" autoplay></video>`;
            } else if (type === 'image') {
                safeHtml = `<img src="${url}" oncontextmenu="return false;" draggable="false" class="max-w-full max-h-[85vh] rounded-2xl object-contain shadow-2xl">`;
            } else if (type === 'document') {
                safeHtml = `<iframe src="${url}#toolbar=0" class="w-full h-[85vh] rounded-2xl bg-white shadow-2xl"></iframe>`;
            }

            contentContainer.innerHTML = safeHtml;
            document.body.style.overflow = 'hidden';
            document.getElementById('previewModal').classList.remove('hidden');
            document.getElementById('previewModal').classList.add('flex');
        }

        function closePreviewModal() {
            if (document.fullscreenElement) document.exitFullscreen();
            document.getElementById('modalContent').innerHTML = '';
            document.body.style.overflow = 'auto';
            document.getElementById('previewModal').classList.add('hidden');
            document.getElementById('previewModal').classList.remove('flex');
        }

        let currentType = '<?php echo e(request('type', 'all')); ?>';
        let currentCategory = '<?php echo e(request('category', 'all')); ?>';

        $(document).ready(function() {
            $('#moreCategories').select2({
                placeholder: "More Categories...",
                allowClear: true,
                width: '100%'
            });

            $('#moreCategories').on('change', function() {
                currentCategory = $(this).val() || 'all';
                updateURL();
            });
        });

        $('.type-btn').click(function() {
            currentType = $(this).data('type');
            updateURL();
        });

        $('.cat-btn').click(function() {
            currentCategory = $(this).data('category');
            updateURL();
        });

        let timer;
        $('#mainSearch').on('keyup', function() {
            clearTimeout(timer);
            timer = setTimeout(updateURL, 700);
        });

        function updateURL() {
            let search = $('#mainSearch').val();
            let url = new URL(window.location.href);

            if (search) url.searchParams.set('search', search);
            else url.searchParams.delete('search');

            if (currentType !== 'all') url.searchParams.set('type', currentType);
            else url.searchParams.delete('type');

            if (currentCategory !== 'all') url.searchParams.set('category', currentCategory);
            else url.searchParams.delete('category');

            url.searchParams.delete('page');
            window.location.href = url.toString();
        }
    </script>
</body>
</html>
<?php /**PATH C:\wamp64\www\lingel-portal\system\resources\views/welcome.blade.php ENDPATH**/ ?>