{
    "taken_at": "2026-10-24 01:25:24",
    "reason": "components tidak digunakan (tiada header/footer site, tiada pivot page, tiada rujukan $code)",
    "components": [
        {
            "id": 1,
            "name": "Navbar Web",
            "code": "navbar_web",
            "content": "<style>\n            .top-bar {\n                background: var(--gray-900);\n                padding: 7px 0;\n                font-size: 0.78rem;\n                border-bottom: 1px solid rgba(255,255,255,0.06);\n            }\n            .top-bar .container {\n                display: flex; justify-content: space-between; align-items: center;\n            }\n            .top-bar-left { display: flex; gap: 14px; align-items: center; }\n            .top-bar-left a {\n                color: var(--gray-400);\n                transition: color 0.2s;\n                font-size: 0.73rem;\n                font-weight: 500;\n            }\n            .top-bar-left a:hover { color: var(--gold); }\n            .top-bar-left .divider { color: var(--gray-600); font-size: 0.7rem; }\n            .top-bar-center { display: flex; align-items: center; gap: 8px; }\n            .top-btn { display: inline-flex; align-items: center; gap: 5px; color: var(--gray-300); font-size: 0.75rem; font-weight: 500; text-decoration: none; transition: color 0.2s; padding: 4px 10px; border-radius: 6px; border: 1px solid var(--gray-600); }\n            .top-btn:hover { color: var(--gold); border-color: var(--gold); }\n            .top-btn i { font-size: 0.65rem; }\n            .top-btn-reg { background: var(--accent); border-color: var(--accent); color: white; }\n            .top-btn-reg:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: white; }\n            .top-bar-right { display: flex; align-items: center; gap: 6px; }\n            .top-bar-right a {\n                color: var(--gray-400);\n                transition: all 0.2s;\n            }\n            .top-bar-right a:hover { color: var(--gold); }\n            .top-bar-right .social-icon {\n                display: inline-flex; align-items: center; justify-content: center;\n                width: 28px; height: 28px;\n                border-radius: 8px;\n                background: rgba(255,255,255,0.05);\n                color: var(--gray-400);\n                font-size: 0.72rem;\n            }\n            .top-bar-right .social-icon:hover {\n                background: rgba(245,158,11,0.15);\n                color: var(--gold);\n            }\n            .top-bar-right .access-icon {\n                display: inline-flex; align-items: center; justify-content: center;\n                width: 28px; height: 28px;\n                color: var(--gray-400);\n                font-size: 0.9rem;\n                border-radius: 8px;\n                transition: all 0.2s;\n            }\n            .top-bar-right .access-icon:hover {\n                background: rgba(245,158,11,0.15);\n                color: var(--gold);\n            }\n            .main-header {\n                background: rgba(255,255,255,0.92);\n                backdrop-filter: blur(16px) saturate(180%);\n                -webkit-backdrop-filter: blur(16px) saturate(180%);\n                border-bottom: 1px solid var(--gray-200);\n                position: sticky; top: 0; z-index: 1000;\n                transition: box-shadow 0.3s;\n            }\n            .main-header.scrolled { box-shadow: var(--shadow-md); }\n            .main-header .container {\n                display: flex; align-items: center; gap: 20px;\n            }\n            .header-brand {\n                display: flex; align-items: center; gap: 14px;\n                padding: 6px 0;\n            }\n            .header-logo {\n                width: auto; height: 42px; flex-shrink: 0;\n                display: flex; align-items: center;\n            }\n            .header-logo img { height: 100%; width: auto; }\n            .nav-wrapper {\n                flex: 1; display: flex; align-items: center; gap: 0; justify-content: center;\n            }\n            \n            \n            .nav-list { display: flex; align-items: center; gap: 2px; }\n            .nav-list > li { position: relative; }\n            .nav-list > li > a {\n                display: flex; align-items: center; gap: 6px;\n                padding: 24px 14px;\n                color: var(--gray-600);\n                font-size: 0.82rem; font-weight: 500;\n                white-space: nowrap;\n                letter-spacing: -0.01em;\n                border-radius: 8px;\n                position: relative;\n                transition: all 0.25s;\n            }\n            .nav-list > li > a::after {\n                content: '';\n                position: absolute;\n                bottom: 8px; left: 50%;\n                transform: translateX(-50%);\n                width: 0; height: 2.5px;\n                background: var(--accent);\n                border-radius: 4px;\n                transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n            }\n            .nav-list > li > a:hover::after,\n            .nav-list > li > a.active::after { width: 20px; }\n            .nav-list > li > a i:first-child {\n                font-size: 0.6rem; color: var(--accent);\n                opacity: 0; transform: translateX(-4px);\n                transition: all 0.25s;\n            }\n            .nav-list > li > a:hover i:first-child,\n            .nav-list > li > a.active i:first-child { opacity: 1; transform: translateX(0); }\n            .nav-list > li > a:hover { color: var(--accent); }\n            .nav-list > li > a.active { color: var(--accent); font-weight: 600; }\n            .nav-list > li > a .fa-angle-down {\n                font-size: 0.6rem; margin-left: 1px;\n                transition: transform 0.3s; color: var(--gray-400);\n            }\n            .nav-list > li:hover > a .fa-angle-down { transform: rotate(180deg); color: var(--accent); }\n            .dropdown-content {\n                position: absolute;\n                top: 100%; left: 50%;\n                transform: translateX(-50%) translateY(10px);\n                background: var(--white);\n                min-width: 240px;\n                box-shadow: 0 20px 60px rgba(0,0,0,0.12), 0 8px 20px rgba(0,0,0,0.06);\n                border-radius: 14px;\n                opacity: 0; visibility: hidden;\n                transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);\n                z-index: 100;\n                overflow: hidden;\n                border: 1px solid var(--gray-100);\n            }\n            .nav-list > li:hover .dropdown-content {\n                opacity: 1; visibility: visible;\n                transform: translateX(-50%) translateY(0);\n            }\n            .dropdown-content::before {\n                content: '';\n                position: absolute;\n                top: -5px; left: 50%;\n                transform: translateX(-50%) rotate(45deg);\n                width: 10px; height: 10px;\n                background: var(--white);\n                border-left: 1px solid var(--gray-100);\n                border-top: 1px solid var(--gray-100);\n            }\n            .dropdown-header {\n                background: linear-gradient(135deg, var(--primary), var(--primary-light));\n                color: rgba(255,255,255,0.9);\n                padding: 14px 18px;\n                font-size: 0.72rem;\n                font-weight: 400;\n                line-height: 1.5;\n            }\n            .dropdown-header i { margin-right: 10px; opacity: 0.7; }\n            .dropdown-content a {\n                display: flex; align-items: center; gap: 10px;\n                padding: 11px 18px;\n                color: var(--gray-600);\n                font-size: 0.8rem;\n                font-weight: 500;\n                border-bottom: 1px solid var(--gray-100);\n                transition: all 0.2s;\n            }\n            .dropdown-content a i { font-size: 0.5rem; color: var(--accent); }\n            .dropdown-content a:hover {\n                background: linear-gradient(135deg, var(--accent-light), #fff);\n                color: var(--accent);\n                padding-left: 24px;\n            }\n            .dropdown-content a:last-child { border-bottom: none; }\n            .nav-icons {\n                \n                display: flex;\n                align-items: center;\n                gap: 0;\n                padding: 2px 0 2px 8px;\n                border-left: 1px solid var(--gray-200);\n            }\n            .nav-icons .nav-icon-btn {\n                display: flex;\n                flex-direction: column;\n                align-items: center;\n                padding: 2px 4px 1px;\n                transition: all 0.15s;\n                border-radius: 4px;\n                text-decoration: none;\n            }\n            .nav-icons .nav-icon-btn:hover { background: var(--gray-100); }\n            .nav-icons .nav-icon-btn .ni-box {\n                width: 22px;\n                height: 22px;\n                border-radius: 4px;\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                font-size: 0.6rem;\n                transition: all 0.15s;\n                border: 1px solid transparent;\n            }\n            .nav-icons .nav-icon-btn:hover .ni-box { transform: scale(1.06); }\n            .nav-icons .nav-icon-btn:nth-child(1) .ni-box { background: #fef2f2; color: var(--accent); border-color: #fecaca; }\n            .nav-icons .nav-icon-btn:nth-child(2) .ni-box { background: #eef2ff; color: var(--primary); border-color: #c7d2fe; }\n            .nav-icons .nav-icon-btn:nth-child(3) .ni-box { background: #fffbeb; color: #d97706; border-color: #fde68a; }\n            .nav-icons .nav-icon-btn:nth-child(4) .ni-box { background: #f0fdf4; color: #16a34a; border-color: #bbf7d0; }\n            .nav-icons .nav-icon-btn span {\n                font-size: 0.4rem;\n                color: var(--gray-400);\n                font-weight: 600;\n                text-transform: uppercase;\n                margin-top: 1px;\n                letter-spacing: 0.1px;\n                white-space: nowrap;\n            }\n            .hamburger {\n                display: none; background: var(--gray-100); border: none;\n                cursor: pointer; padding: 8px 4px;\n                flex-direction: column; gap: 4px;\n                position: relative; z-index: 5;\n                border-radius: 8px;\n                \n            }\n            .hamburger span {\n                display: block; width: 20px; height: 2px;\n                background: var(--gray-600);\n                border-radius: 4px;\n                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n                transform-origin: center;\n            }\n            .hamburger:hover span { background: var(--accent); }\n            .hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(4px, 4px); width: 18px; }\n            .hamburger.active span:nth-child(2) { opacity: 0; transform: translateX(-4px); }\n            .hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(4px, -4px); width: 18px; }\n            .mob-top-bar { display: none; align-items: center; gap: 2px; margin-right: 10px; }\n            .mob-top-link { font-size: 0.7rem; color: var(--gray-500); text-decoration: none; padding: 4px 2px; font-weight: 500; }\n            .mob-top-link:hover { color: var(--accent); }\n            .mob-top-divider { color: var(--gray-300); font-size: 0.65rem; }\n            .mob-bottom-bar { display: none; align-items: center; justify-content: space-between; padding: 6px 16px; background: var(--gray-50); width: 100%; }\n            .mob-btm-left, .mob-btm-right { display: flex; align-items: center; gap: 2px; }\n            .mob-btm-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; color: var(--gray-500); text-decoration: none; border-radius: 6px; font-size: 0.75rem; }\n            .mob-btm-icon:hover { background: var(--gray-100); color: var(--accent); }\n            .mob-btm-icon-reg { color: var(--accent); }\n            .mob-btm-sep { width: 1px; height: 16px; background: var(--gray-200); }\n            .sidebar-overlay {\n                display: none; position: fixed; inset: 0;\n                background: rgba(0,0,0,0.5); z-index: 99;\n                opacity: 0; transition: opacity 0.3s;\n            }\n            .sidebar-overlay.open { display: block; opacity: 1; }\n            .sidebar-menu {\n                position: fixed; top: 42px; left: -300px; width: 280px;\n                height: calc(100vh - 42px); background: var(--white);\n                z-index: 100; overflow-y: auto;\n                transition: left 0.3s ease;\n                box-shadow: 5px 0 30px rgba(0,0,0,0.15);\n            }\n            .sidebar-menu.open { left: 0; }\n            .sidebar-header {\n                display: flex; align-items: center; justify-content: space-between;\n                padding: 18px 20px; border-bottom: 1px solid var(--gray-100);\n            }\n            .sidebar-header h3 { font-size: 0.9rem; font-weight: 600; color: var(--gray-900); margin: 0; }\n            .sidebar-close { background: none; border: none; font-size: 1.3rem; color: var(--gray-400); cursor: pointer; padding: 4px; }\n            .sidebar-close:hover { color: var(--accent); }\n            .sidebar-menu a {\n                display: flex; align-items: center; gap: 10px;\n                padding: 14px 20px;\n                color: var(--gray-700); text-decoration: none;\n                border-bottom: 1px solid var(--gray-100);\n                font-size: 0.85rem; font-weight: 500;\n                transition: all 0.2s;\n            }\n            .sidebar-menu a:hover { background: var(--gray-50); color: var(--accent); padding-left: 26px; }\n            .sidebar-menu a i:first-child { font-size: 0.65rem; color: var(--accent); width: 16px; }\n            .sidebar-menu .m-dropdown-btn {\n                display: flex; justify-content: space-between; align-items: center;\n                width: 100%; background: none; border: none;\n                color: var(--gray-700);\n                padding: 14px 20px;\n                font-size: 0.85rem; font-weight: 500;\n                font-family: inherit; cursor: pointer;\n                border-bottom: 1px solid var(--gray-100);\n                transition: all 0.2s;\n            }\n            .sidebar-menu .m-dropdown-btn:hover { background: var(--gray-50); color: var(--accent); }\n            .sidebar-menu .m-submenu { display: none; background: var(--gray-50); }\n            .sidebar-menu .m-submenu.open { display: block; }\n            .sidebar-menu .m-submenu a { padding-left: 40px; font-size: 0.8rem; }\n            .sidebar-menu .m-submenu a:hover { padding-left: 46px; }\n            @media (max-width: 1024px) {\n                .main-header .container { flex-wrap: wrap; }\n                .header-brand { flex: 0 0 auto; }\n                .nav-wrapper { flex: 1; justify-content: flex-end; gap: 0; }\n                .nav-list { display: none !important; }\n                .nav-icons { display: none !important; }\n                .hamburger { display: flex !important; flex-shrink: 0; }\n                .mob-top-bar { display: flex !important; flex-shrink: 0; }\n                .mob-bottom-bar { display: flex !important; }\n            }\n            @media (max-width: 768px) {\n                .top-bar { display: none !important; }\n                .header-brand img { max-height: 38px; }\n                .hamburger { width: 38px; height: 38px; display: flex !important; align-items: center; justify-content: center; }\n                .mob-top-bar { display: flex !important; }\n            }\n            @media (max-width: 480px) {\n                .top-bar-left a { font-size: 0.65rem; }\n                .top-bar-left .divider { font-size: 0.6rem; }\n                .header-brand img { max-height: 32px; }\n            }\n            </style>\n            <div class=\"top-bar\">\n                <div class=\"container\">\n                    <div class=\"top-bar-left\">\n                        <a href=\"{{ url(\"lang/ms\") }}\">MALAY</a>\n                        <span class=\"divider\">|</span>\n                        <a href=\"{{ url(\"lang/en\") }}\">ENGLISH</a>\n                        <span class=\"divider\">|</span>\n                        <a href=\"{{ url(\"lang/zh\") }}\">中文</a>\n                    </div>\n                    <div class=\"top-bar-center\">\n<a href=\"{{ url(\"/\" . ($siteSlug ?: \\App\\Http\\Helpers\\SettingHelper::defaultSiteSlug()) . \"/login-web\") }}\" class=\"top-btn\" target=\"_blank\"><i class=\"fas fa-sign-in-alt\"></i> {{ t(\"login\") }}</a>\n                        <a href=\"{{ url(\"/\" . ($siteSlug ?: \\App\\Http\\Helpers\\SettingHelper::defaultSiteSlug()) . \"/register-web\") }}\" class=\"top-btn top-btn-reg\" target=\"_blank\"><i class=\"fas fa-user-plus\"></i> {{ t(\"register\") }}</a>\n                    </div>\n                    <div class=\"top-bar-right\">\n                        <a href=\"#\" class=\"social-icon\" aria-label=\"Facebook\"><i class=\"fab fa-facebook-f\"></i></a>\n                        <a href=\"#\" class=\"social-icon\" aria-label=\"Twitter\"><i class=\"fab fa-twitter\"></i></a>\n                        <a href=\"#\" class=\"social-icon\" aria-label=\"YouTube\"><i class=\"fab fa-youtube\"></i></a>\n                        <a href=\"#\" class=\"social-icon\" aria-label=\"Instagram\"><i class=\"fab fa-instagram\"></i></a>\n                        <a href=\"#\" class=\"access-icon\" aria-label=\"Kebolehcapaian\"><i class=\"fas fa-wheelchair\"></i></a>\n                    </div>\n                </div>\n            </div>\n            <header class=\"main-header\">\n                <div class=\"container\">\n                    <div class=\"header-brand\">\n                        <div class=\"header-logo\">\n                            <img src=\"/dynaweb4/img/logo.png\" alt=\"Logo Agensi\">\n                        </div>\n                    </div>\n                    <div class=\"nav-wrapper\">\n                                        <ul class=\"nav-list\">\n                @foreach($menuTree as $item)\n                    @if(!empty($item['children']))\n                    <li>\n                        <a href=\"{{ $item['menu_link'] ?: '#' }}\"@if($loop->first) class=\"active\"@endif><i class=\"fas fa-angle-right\"></i> {{ $item['menu_name'] }} <i class=\"fas fa-angle-down\"></i></a>\n                        <div class=\"dropdown-content\">\n                            <div class=\"dropdown-header\"><i class=\"fas fa-link\"></i> {{ $item['menu_name'] }}</div>\n                            @foreach($item['children'] as $child)\n                            <a href=\"{{ $child['menu_link'] ?: '#' }}\"><i class=\"fas fa-angle-right\"></i> {{ $child['menu_name'] }}</a>\n                            @endforeach\n                        </div>\n                    </li>\n                    @else\n                    <li><a href=\"{{ $item['menu_link'] ?: '#' }}\"@if($loop->first) class=\"active\"@endif><i class=\"fas fa-angle-right\"></i> {{ $item['menu_name'] }}</a></li>\n                    @endif\n                @endforeach\n            </ul>\n                        <div class=\"nav-icons\">\n                            <a href=\"#\" class=\"nav-icon-btn\">\n                                <div class=\"ni-box\"><i class=\"fas fa-question\"></i></div>\n                                <span>Soalan Lazim</span>\n                            </a>\n                            \n                            <a href=\"#\" class=\"nav-icon-btn\">\n                                <div class=\"ni-box\"><i class=\"fas fa-comment\"></i></div>\n                                <span>Maklum Balas</span>\n                            </a>\n                            <a href=\"/{{ $siteSlug }}/sitemap-web\" class=\"nav-icon-btn\">\n                                <div class=\"ni-box\"><i class=\"fas fa-sitemap\"></i></div>\n                                <span>Sitemap</span>\n                            </a>\n                        </div>\n                        <div class=\"mob-top-bar\">\n                            <a href=\"{{ url(\"lang/ms\") }}\" class=\"mob-top-link\">MY</a>\n                            <span class=\"mob-top-divider\">|</span>\n                            <a href=\"{{ url(\"lang/en\") }}\" class=\"mob-top-link\">EN</a>\n                            <span class=\"mob-top-divider\">|</span>\n                            <a href=\"{{ url(\"lang/zh\") }}\" class=\"mob-top-link\">中文</a>\n                        </div>\n                        <button class=\"hamburger\" onclick=\"toggleMobile()\" aria-label=\"Toggle navigation\">\n                            <span></span><span></span><span></span>\n                        </button>\n                    </div>\n                    <div class=\"mob-bottom-bar\">\n                        <div class=\"mob-btm-left\">\n                            <a href=\"{{ url(\"/\" . ($siteSlug ?: \\App\\Http\\Helpers\\SettingHelper::defaultSiteSlug()) . \"/login-web\") }}\" class=\"mob-btm-icon\" target=\"_blank\"><i class=\"fas fa-sign-in-alt\"></i></a>\n                            <a href=\"{{ url(\"/\" . ($siteSlug ?: \\App\\Http\\Helpers\\SettingHelper::defaultSiteSlug()) . \"/register-web\") }}\" class=\"mob-btm-icon mob-btm-icon-reg\" target=\"_blank\"><i class=\"fas fa-user-plus\"></i></a>\n                        </div>\n                        <div class=\"mob-btm-right\">\n                            <a href=\"#\" class=\"mob-btm-icon\"><i class=\"fab fa-facebook-f\"></i></a>\n                            <a href=\"#\" class=\"mob-btm-icon\"><i class=\"fab fa-twitter\"></i></a>\n                            <a href=\"#\" class=\"mob-btm-icon\"><i class=\"fab fa-youtube\"></i></a>\n                            <a href=\"#\" class=\"mob-btm-icon\"><i class=\"fab fa-instagram\"></i></a>\n                            <a href=\"#\" class=\"mob-btm-icon\"><i class=\"fas fa-wheelchair\"></i></a>\n                        </div>\n                    </div>\n                </div>\n            </header>\n            <div class=\"sidebar-overlay\" id=\"sidebarOverlay\" onclick=\"toggleMobile()\"></div>\n            <div class=\"sidebar-menu\" id=\"sidebarMenu\">\n                <div class=\"sidebar-header\">\n                    <h3>Menu</h3>\n                    <button class=\"sidebar-close\" onclick=\"toggleMobile()\">&times;</button>\n                </div>\n                @foreach($menuTree as $item)\n                    @if(!empty($item['children']))\n                    <button class=\"m-dropdown-btn\" onclick=\"toggleSub(this)\">\n                        <span><i class=\"fas fa-angle-right\"></i> {{ $item['menu_name'] }}</span>\n                        <i class=\"fas fa-angle-down\"></i>\n                    </button>\n                    <div class=\"m-submenu\">\n                        @foreach($item['children'] as $child)\n                        <a href=\"{{ $child['menu_link'] ?: '#' }}\"><i class=\"fas fa-angle-right\"></i> {{ $child['menu_name'] }}</a>\n                        @endforeach\n                    </div>\n                    @else\n                    <a href=\"{{ $item['menu_link'] ?: '#' }}\"><i class=\"fas fa-angle-right\"></i> {{ $item['menu_name'] }}</a>\n                    @endif\n                @endforeach\n            </div>\n            <script>\n            function toggleMobile() {\n                document.getElementById('sidebarMenu')?.classList.toggle('open');\n                document.getElementById('sidebarOverlay')?.classList.toggle('open');\n                document.querySelector('.hamburger')?.classList.toggle('active');\n            }\n            function toggleSub(btn) {\n                btn.nextElementSibling.classList.toggle('open');\n                btn.querySelector('.fa-angle-down')?.classList.toggle('fa-rotate-180');\n            }\n            </script>",
            "type": "PHP",
            "category": "Header",
            "status": 1,
            "created_at": "2026-07-04 12:05:08",
            "updated_at": "2026-07-04 12:05:08"
        },
        {
            "id": 2,
            "name": "Footer Web",
            "code": "footer_web",
            "content": "@php\n            $todayVisits = \\App\\Models\\Backend\\VisitorPageView::todayViews();\n            $thisWeek = \\App\\Models\\Backend\\VisitorPageView::thisWeekViews();\n            $thisMonth = \\App\\Models\\Backend\\VisitorPageView::thisMonthViews();\n            $thisYear = \\App\\Models\\Backend\\VisitorPageView::thisYearViews();\n            $totalVisits = \\App\\Models\\Backend\\VisitorPageView::totalViews();\n            $mainLinks = \\App\\Models\\Backend\\ContentApplication::with(['translations' => function($q) use ($lang) { $q->where('application_translation_language', $lang); }])->where('application_cat', 'MAIN_LINKS')->where('application_status', 'ACTIVE')->orderBy('application_sort')->get();\n            $externalLinks = \\App\\Models\\Backend\\ContentApplication::with(['translations' => function($q) use ($lang) { $q->where('application_translation_language', $lang); }])->where('application_cat', 'EXTERNAL_LINKS')->where('application_status', 'ACTIVE')->orderBy('application_sort')->get();\n            @endphp\n            <style>\n            .footer {\n                background: var(--gray-900);\n                color: rgba(255,255,255,0.7);\n                font-size: 0.82rem;\n                border-top: 1px solid rgba(255,255,255,0.06);\n            }\n            .footer-main { padding: 48px 0 32px; }\n            .footer-grid {\n                display: grid;\n                grid-template-columns: 2fr 1fr 1fr 1.5fr;\n                gap: 40px;\n            }\n            .footer-brand .fb-logo {\n                display: flex; align-items: center; gap: 12px;\n                margin-bottom: 14px;\n            }\n            .footer-brand .fb-logo img { height: 42px; width: auto; }\n            .footer-brand .fb-logo span {\n                font-size: 0.9rem; font-weight: 700;\n                color: white;\n            }\n            .footer-brand p { font-size: 0.8rem; line-height: 1.7; color: rgba(255,255,255,0.45); }\n            .footer-col h4 {\n                color: white;\n                font-size: 0.8rem; font-weight: 700;\n                margin-bottom: 16px;\n                text-transform: uppercase;\n                letter-spacing: 0.5px;\n            }\n            .footer-col ul li { margin-bottom: 6px; }\n            .footer-col ul li a {\n                color: rgba(255,255,255,0.45);\n                transition: all 0.2s;\n                font-size: 0.8rem;\n            }\n            .footer-col ul li a:hover { color: var(--gold); padding-left: 4px; }\n            .footer-contact li {\n                display: flex; gap: 10px; align-items: flex-start;\n                margin-bottom: 10px;\n                color: rgba(255,255,255,0.45);\n                font-size: 0.8rem;\n            }\n            .footer-contact li i { width: 16px; margin-top: 4px; color: var(--gold); font-size: 0.75rem; }\n            .visitor-stats {\n                grid-column: 1 / -1;\n                background: rgba(255,255,255,0.04);\n                border-radius: 10px;\n                padding: 14px 20px 12px;\n                margin-top: 24px;\n                border: 1px solid rgba(255,255,255,0.08);\n            }\n            .visitor-stats h5 {\n                color: var(--gold);\n                font-size: 0.6rem;\n                font-weight: 700;\n                margin-bottom: 8px;\n                text-transform: uppercase;\n                letter-spacing: 0.5px;\n                text-align: center;\n            }\n            .visitor-stats .v-row {\n                display: flex;\n                justify-content: space-around;\n                gap: 0;\n            }\n            .visitor-stats .v-item {\n                flex: 1;\n                text-align: center;\n                padding: 4px 8px;\n                font-size: 0.65rem;\n                color: rgba(255,255,255,0.45);\n                border-right: 1px solid rgba(255,255,255,0.08);\n            }\n            .visitor-stats .v-item:last-child { border-right: none; }\n            .visitor-stats .v-item .v-label { display: block; font-size: 0.58rem; margin-bottom: 3px; color: rgba(255,255,255,0.35); }\n            .visitor-stats .v-item .v-value { color: var(--gold); font-weight: 700; font-size: 0.85rem; }\n            .social-links { display: flex; gap: 8px; margin-top: 16px; }\n            .social-links a {\n                width: 34px; height: 34px;\n                border-radius: 10px;\n                background: rgba(255,255,255,0.05);\n                display: flex; align-items: center; justify-content: center;\n                color: rgba(255,255,255,0.4);\n                transition: all 0.2s;\n                font-size: 0.8rem;\n                border: 1px solid rgba(255,255,255,0.06);\n            }\n            .social-links a:hover {\n                background: var(--gold);\n                color: var(--gray-900);\n                border-color: var(--gold);\n                transform: translateY(-2px);\n            }\n            .footer-bottom {\n                border-top: 1px solid rgba(255,255,255,0.06);\n                padding: 18px 0;\n            }\n            .footer-bottom .container {\n                display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;\n            }\n            .footer-bottom .fb-left { text-align: left; }\n            .footer-bottom .fb-left .copy {\n                font-size: 0.75rem;\n                color: rgba(255,255,255,0.3);\n            }\n            .footer-bottom .fb-left .browser-note {\n                font-size: 0.68rem;\n                color: rgba(255,255,255,0.2);\n                margin-top: 3px;\n            }\n            .footer-bottom-links { display: flex; gap: 16px; }\n            .footer-bottom-links a {\n                color: rgba(255,255,255,0.35);\n                transition: color 0.2s;\n                font-size: 0.75rem;\n            }\n            .footer-bottom-links a:hover { color: var(--gold); }\n            @media (max-width: 1024px) {\n                .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; }\n                .footer-main { padding: 40px 0 24px; }\n            }\n            @media (max-width: 768px) {\n                .footer-grid { grid-template-columns: 1fr; gap: 24px; }\n                .footer-main { padding: 32px 0 20px; }\n                .footer-brand .fb-logo img { height: 34px; }\n                .footer-col h4 { font-size: 0.85rem; }\n                .footer-bottom .container { flex-direction: column; text-align: center; gap: 12px; }\n                .footer-bottom .fb-left { text-align: center; }\n                .footer-bottom-links { justify-content: center; flex-wrap: wrap; gap: 12px; }\n                .footer-bottom .fb-left .copy { font-size: 0.75rem; }\n            }\n            @media (max-width: 480px) {\n                .footer-main { padding: 24px 0 16px; }\n                .footer-grid { gap: 20px; }\n                .footer-brand .fb-logo img { height: 28px; }\n                .footer-col ul li a { font-size: 0.78rem; }\n                .footer-contact li { font-size: 0.78rem; }\n                .footer-bottom-links { gap: 8px; }\n                .footer-bottom-links a { font-size: 0.72rem; }\n            }\n            </style>\n            <footer class=\"footer\">\n                <div class=\"footer-main\">\n                    <div class=\"container\">\n                        <div class=\"footer-grid\">\n                            <div class=\"footer-brand\">\n                                <div class=\"fb-logo\">\n                                    <img src=\"/dynaweb4/img/logo.png\" alt=\"Logo Agensi\">\n                                    \n                                </div>\n                                <p>{{ t(\"dynaweb4_desc\") }}</p>\n                                <div class=\"social-links\">\n                                    <a href=\"#\" aria-label=\"Facebook\"><i class=\"fab fa-facebook-f\"></i></a>\n                                    <a href=\"#\" aria-label=\"Twitter\"><i class=\"fab fa-twitter\"></i></a>\n                                    <a href=\"#\" aria-label=\"Instagram\"><i class=\"fab fa-instagram\"></i></a>\n                                    <a href=\"#\" aria-label=\"YouTube\"><i class=\"fab fa-youtube\"></i></a>\n                                </div>\n                            </div>\n                            <div class=\"footer-col\">\n                                <h4>Pautan Utama</h4>\n                                <ul>\n                                    @foreach($mainLinks as $link)\n                                    @php $lt = $link->translations->first(); @endphp\n                                    @if($lt)\n                                    <li><a href=\"{{ $link->application_url }}\" {{ str_starts_with($link->application_url ?? '', 'http') ? 'target=\"_blank\" rel=\"noopener\"' : '' }}>{{ $lt->application_translation_title }}</a></li>\n                                    @endif\n                                    @endforeach\n                                </ul>\n                            </div>\n                            <div class=\"footer-col\">\n                                <h4>Sambungan</h4>\n                                <ul>\n                                    @foreach($externalLinks as $link)\n                                    @php $lt = $link->translations->first(); @endphp\n                                    @if($lt)\n                                    <li><a href=\"{{ $link->application_url }}\" target=\"_blank\" rel=\"noopener\">{{ $lt->application_translation_title }}</a></li>\n                                    @endif\n                                    @endforeach\n                                </ul>\n                            </div>\n                            <div class=\"footer-col\">\n                                <h4>Hubungi Kami</h4>\n                                <ul class=\"footer-contact\">\n                                    <li><i class=\"fas fa-map-marker-alt\"></i> <span>LG-10, Lower Ground Floor, SACC Mall, 40000 Shah Alam, Selangor, MALAYSIA</span></li>\n                                    <li><i class=\"fas fa-envelope\"></i> <span>webmaster@dynaweb.com</span></li>\n                                    <li><i class=\"fas fa-phone\"></i> <span>+603-8888 0000</span></li>\n                                    <li><i class=\"fas fa-fax\"></i> <span>+603-8888 1111</span></li>\n                                </ul>\n                            </div>\n                            <div class=\"visitor-stats\">\n                                <h5>Statistik Pelawat</h5>\n                                <div class=\"v-row\">\n                                    <div class=\"v-item\"><span class=\"v-label\">Hari Ini</span><span class=\"v-value\">{{ number_format($todayVisits) }}</span></div>\n                                    <div class=\"v-item\"><span class=\"v-label\">Minggu Ini</span><span class=\"v-value\">{{ number_format($thisWeek) }}</span></div>\n                                    <div class=\"v-item\"><span class=\"v-label\">Bulan Ini</span><span class=\"v-value\">{{ number_format($thisMonth) }}</span></div>\n                                    <div class=\"v-item\"><span class=\"v-label\">Tahun Ini</span><span class=\"v-value\">{{ number_format($thisYear) }}</span></div>\n                                    <div class=\"v-item\"><span class=\"v-label\">Jumlah</span><span class=\"v-value\">{{ number_format($totalVisits) }}</span></div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"footer-bottom\">\n                    <div class=\"container\">\n                        <div class=\"fb-left\">\n                            <div class=\"copy\">&copy; 2026. Hak Cipta Terpelihara.</div>\n                            <div class=\"browser-note\">Paparan terbaik menggunakan pelayar Mozilla Firefox dan Google Chrome dengan resolusi skrin 1366x768.</div>\n                        </div>\n                        <div class=\"footer-bottom-links\">\n                            <a href=\"#\">Penafian</a>\n                            <a href=\"#\">Dasar Privasi</a>\n                            <a href=\"#\">Dasar Keselamatan</a>\n                            <a href=\"#\">Perlindungan Data</a>\n                        </div>\n                    </div>\n                </div>\n            </footer>",
            "type": "PHP",
            "category": "Footer",
            "status": 1,
            "created_at": "2026-07-04 12:05:08",
            "updated_at": "2026-07-04 12:05:08"
        },
        {
            "id": 3,
            "name": "News Web",
            "code": "news_web",
            "content": "@php\n            $items = \\App\\Models\\Backend\\ContentArticle::with(['translations' => function($q) use ($lang) { $q->where('article_translation_language', $lang); }])->where('article_category', 'NEWS')->published()->orderBy('article_date', 'desc')->orderBy('created_at', 'desc')->get();\n            @endphp\n            @if($items->count())\n            <section class=\"berita-section\">\n                <div class=\"container\">\n                    <div class=\"berita-header\">\n                        <span class=\"berita-badge\">Berita</span>\n                        <h1 class=\"berita-title\">Berita Terkini</h1>\n                        <p class=\"berita-subtitle\">Ikuti perkembangan terkini dan pengumuman rasmi.</p>\n                    </div>\n                    <div class=\"berita-grid\">\n                        @foreach($items as $item)\n                        @php $t = $item->translations->first(); @endphp\n                        @if($t)\n                        <a href=\"/{{ $siteSlug }}/article-web?id={{ $item->article_code }}\" class=\"berita-card\">\n                            @if($item->article_image)\n                            <div class=\"berita-card-img\">\n<img src=\"{{ image_url($item->article_image) }}\" alt=\"{{ $t->article_translation_title ?? '' }}\">\n                            </div>\n                            @endif\n                            <div class=\"berita-card-body\">\n                                <div class=\"berita-meta\">\n                                    <span class=\"berita-date\">{{ \\Carbon\\Carbon::parse($item->article_date)->format('d M Y') }}</span>\n                                </div>\n                                <h2 class=\"berita-card-title\">{{ $t->article_translation_title }}</h2>\n                                <p class=\"berita-card-excerpt\">{{ strip_tags(Str::limit($t->article_translation_content, 150)) }}</p>\n                                <span class=\"berita-readmore\">Baca Selengkapnya <i class=\"fas fa-arrow-right\"></i></span>\n                            </div>\n                        </a>\n                        @endif\n                        @endforeach\n                    </div>\n                </div>\n            </section>\n            <style>\n            .berita-section { padding: 60px 0 80px; background: var(--gray-50); min-height: 60vh; }\n            .berita-header { text-align: center; margin-bottom: 50px; }\n            .berita-badge { display: inline-block; background: var(--accent-light); color: var(--accent); padding: 6px 16px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; margin-bottom: 16px; }\n            .berita-title { font-size: 2rem; font-weight: 700; color: var(--gray-900); margin: 0 0 12px; }\n            .berita-subtitle { color: var(--gray-400); font-size: 1rem; margin: 0; }\n            .berita-grid { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }\n            .berita-card { display: block; background: var(--white); border-radius: 16px; border: 1px solid var(--gray-200); padding: 24px 28px; text-decoration: none; transition: box-shadow 0.2s, border-color 0.2s; }\n            .berita-card:hover { box-shadow: var(--shadow-lg); border-color: var(--accent); }\n            .berita-card-img { width: 100%; height: 180px; border-radius: 12px; overflow: hidden; margin-bottom: 14px; } .berita-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .berita-card-body { }\n            .berita-meta { margin-bottom: 10px; }\n            .berita-date { font-size: 0.8rem; color: var(--gray-400); }\n            .berita-card-title { font-size: 1.1rem; font-weight: 600; color: var(--gray-900); margin: 0 0 8px; line-height: 1.4; }\n            .berita-card:hover .berita-card-title { color: var(--primary); }\n            .berita-card-excerpt { font-size: 0.88rem; color: var(--gray-500); margin: 0 0 14px; line-height: 1.6; }\n            .berita-readmore { font-size: 0.85rem; color: var(--accent); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }\n            .berita-readmore i { font-size: 0.75rem; }\n            .berita-card:hover .berita-readmore { gap: 10px; }\n            @media (max-width: 768px) {\n                .berita-section { padding: 30px 0 50px; }\n                .berita-title { font-size: 1.4rem; }\n                .berita-card { padding: 18px 20px; }\n            }\n            @media (max-width: 480px) {\n                .berita-title { font-size: 1.2rem; }\n                .berita-card { padding: 16px; }\n            }\n            </style>\n            @else\n            <section style=\"padding:80px 0;text-align:center;background:var(--gray-50);min-height:50vh;\"><div class=\"container\"><i class=\"fas fa-newspaper\" style=\"font-size:3rem;color:var(--gray-300);margin-bottom:20px;\"></i><h2 style=\"color:var(--gray-500);font-weight:500;font-size:1.2rem;\">Tiada Berita</h2><p style=\"color:var(--gray-400);margin:10px 0 30px;\">Tiada berita buat masa ini.</p><a href=\"/{{ $siteSlug }}\" style=\"display:inline-flex;align-items:center;gap:8px;padding:12px 24px;background:var(--primary);color:white;border-radius:10px;text-decoration:none;font-size:0.85rem;\"><i class=\"fas fa-arrow-left\"></i> Kembali</a></div></section>\n            @endif\n            ",
            "type": "PHP",
            "category": "Content",
            "status": 1,
            "created_at": "2026-07-04 12:05:08",
            "updated_at": "2026-09-21 17:56:02"
        },
        {
            "id": 4,
            "name": "Download Web",
            "code": "download_web",
            "content": "@include('frontend.components.download-web')",
            "type": "PHP",
            "category": "Content",
            "status": 1,
            "created_at": "2026-07-04 12:05:08",
            "updated_at": "2026-09-21 18:35:39"
        },
        {
            "id": 5,
            "name": "Gallery Web",
            "code": "gallery_web",
            "content": "@php\n$code = request()->query('id');\n@endphp\n@if($code)\n@php\n$gallery = \\App\\Models\\Backend\\ContentPhotoGallery::with('translations')\n    ->where('gallery_code', $code)\n    ->where('gallery_status', 'ACTIVE')\n    ->first();\n@endphp\n@if($gallery)\n@php\n$gt = $gallery->translations->firstWhere('gallery_translation_language', $lang) ?? $gallery->translations->first();\n$photos = \\App\\Models\\Backend\\ContentPhotoList::where('photo_gallery_id', $gallery->gallery_id)\n    ->where(function ($q) { $q->whereNull('photo_main')->orWhere('photo_main', '1'); })\n    ->orderBy('photo_sort')\n    ->orderBy('photo_id')\n    ->get();\n$photoTrans = \\App\\Models\\Backend\\ContentPhotoList::where('photo_gallery_id', $gallery->gallery_id)\n    ->where('photo_language', $lang)\n    ->whereNotNull('photo_parent_id')\n    ->pluck('photo_descr', 'photo_parent_id');\n@endphp\n<section class=\"galeri-detail\">\n    <div class=\"container\">\n        <div class=\"galeri-breadcrumb\">\n            <a href=\"/{{ $siteSlug }}\">Utama</a>\n            <span class=\"sep\">/</span>\n            <a href=\"{{ request()->url() }}\">Galeri</a>\n            <span class=\"sep\">/</span>\n            <span class=\"current\">{{ $gt?->gallery_translation_title ?? $gallery->gallery_code }}</span>\n        </div>\n\n        <div class=\"galeri-detail-header\">\n            <h1 class=\"galeri-detail-title\">{{ $gt?->gallery_translation_title ?? 'Galeri' }}</h1>\n            @if($gt?->gallery_translation_descr)\n            <p class=\"galeri-detail-subtitle\">{{ $gt->gallery_translation_descr }}</p>\n            @endif\n            <p class=\"galeri-detail-count\">{{ $photos->count() }} gambar</p>\n        </div>\n\n        @if($photos->count())\n        <div class=\"galeri-photo-grid\">\n            @foreach($photos as $p)\n            @php $cap = $photoTrans[$p->photo_id] ?? $p->photo_descr; @endphp\n            <figure class=\"galeri-photo\">\n                <a href=\"{{ image_url($p->photo_url) }}\" target=\"_blank\" rel=\"noopener\">\n                    <img src=\"{{ image_url($p->photo_url) }}\" alt=\"{{ $cap }}\" loading=\"lazy\">\n                </a>\n                @if($cap)<figcaption>{{ $cap }}</figcaption>@endif\n            </figure>\n            @endforeach\n        </div>\n        @else\n        <p class=\"galeri-empty\">Tiada gambar dalam galeri ini.</p>\n        @endif\n\n        <div class=\"galeri-back\">\n            <a href=\"{{ request()->url() }}\" class=\"btn-back\"><i class=\"fas fa-arrow-left\"></i> Kembali ke Galeri</a>\n        </div>\n    </div>\n</section>\n\n<style>\n.galeri-detail { padding: 50px 0 80px; background: var(--gray-50); min-height: 60vh; }\n.galeri-breadcrumb { font-size: 0.82rem; color: var(--gray-400); margin-bottom: 26px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }\n.galeri-breadcrumb a { color: var(--primary); text-decoration: none; transition: color 0.2s; }\n.galeri-breadcrumb a:hover { color: var(--accent); }\n.galeri-breadcrumb .sep { color: var(--gray-300); }\n.galeri-breadcrumb .current { color: var(--gray-500); font-weight: 500; }\n.galeri-detail-header { text-align: center; margin-bottom: 40px; }\n.galeri-detail-title { font-size: 2rem; font-weight: 700; color: var(--gray-900); margin: 0 0 12px; }\n.galeri-detail-subtitle { color: var(--gray-500); font-size: 1rem; margin: 0 0 8px; }\n.galeri-detail-count { color: var(--gray-400); font-size: 0.85rem; margin: 0; }\n.galeri-photo-grid { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }\n.galeri-photo { margin: 0; border-radius: 14px; overflow: hidden; background: var(--white); box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.08)); }\n.galeri-photo a { display: block; aspect-ratio: 4/3; overflow: hidden; }\n.galeri-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s; }\n.galeri-photo:hover img { transform: scale(1.06); }\n.galeri-photo figcaption { padding: 10px 14px; font-size: 0.8rem; color: var(--gray-600); }\n.galeri-empty { text-align: center; color: var(--gray-400); padding: 40px 0; }\n.galeri-back { text-align: center; margin-top: 44px; }\n.btn-back { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; background: var(--primary); color: var(--white); border-radius: 10px; font-size: 0.85rem; font-weight: 500; text-decoration: none; transition: all 0.25s; }\n.btn-back:hover { background: var(--primary-light); transform: translateX(-3px); }\n.btn-back i { font-size: 0.75rem; }\n@media (max-width: 768px) {\n    .galeri-detail { padding: 30px 0 50px; }\n    .galeri-detail-title { font-size: 1.4rem; }\n    .galeri-photo-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }\n}\n</style>\n@else\n<section style=\"padding:80px 0;text-align:center;background:var(--gray-50);min-height:50vh;\">\n    <div class=\"container\">\n        <i class=\"fas fa-image\" style=\"font-size:3rem;color:var(--gray-300);margin-bottom:20px;\"></i>\n        <h2 style=\"color:var(--gray-500);font-weight:500;font-size:1.2rem;\">Galeri tidak ditemui</h2>\n        <p style=\"color:var(--gray-400);margin:10px 0 30px;\">Maaf, galeri yang anda cari tidak wujud atau telah dialihkan.</p>\n        <a href=\"{{ request()->url() }}\" class=\"btn-back\"><i class=\"fas fa-arrow-left\"></i> Kembali ke Galeri</a>\n    </div>\n</section>\n@endif\n@else\n@php\n$items = \\App\\Models\\Backend\\ContentPhotoGallery::with(['translations' => function($q) use ($lang) { $q->where('gallery_translation_language', $lang); }])->where('gallery_status', 'ACTIVE')->orderBy('gallery_date', 'desc')->get();\n@endphp\n@if($items->count())\n<section class=\"galeri-section\">\n    <div class=\"container\">\n        <div class=\"galeri-header\">\n            <span class=\"galeri-badge\">Galeri</span>\n            <h1 class=\"galeri-title\">Galeri Foto</h1>\n            <p class=\"galeri-subtitle\">Koleksi gambar dan foto-foto rasmi.</p>\n        </div>\n        <div class=\"galeri-grid\">\n            @foreach($items as $item)\n            @php $t = $item->translations->first(); @endphp\n            <a href=\"?id={{ $item->gallery_code }}\" class=\"galeri-card\">\n                <div class=\"galeri-img\">\n                    @if($item->gallery_thumbnail)\n                    <img src=\"{{ image_url($item->gallery_thumbnail) }}\" alt=\"{{ $t->gallery_translation_title ?? '' }}\">\n                    @else\n                    <div class=\"galeri-img-placeholder\"><i class=\"fas fa-image\"></i></div>\n                    @endif\n                </div>\n                <div class=\"galeri-overlay\">\n                    <h3>{{ $t->gallery_translation_title ?? 'Galeri' }}</h3>\n                    @if($t->gallery_translation_descr)<p>{{ Str::limit($t->gallery_translation_descr, 100) }}</p>@endif\n                </div>\n            </a>\n            @endforeach\n        </div>\n    </div>\n</section>\n<style>\n.galeri-section { padding: 60px 0 80px; background: var(--gray-50); min-height: 60vh; }\n.galeri-header { text-align: center; margin-bottom: 50px; }\n.galeri-badge { display: inline-block; background: var(--accent-light); color: var(--accent); padding: 6px 16px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; margin-bottom: 16px; }\n.galeri-title { font-size: 2rem; font-weight: 700; color: var(--gray-900); margin: 0 0 12px; }\n.galeri-subtitle { color: var(--gray-400); font-size: 1rem; margin: 0; }\n.galeri-grid { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }\n.galeri-card { position: relative; display: block; border-radius: 16px; overflow: hidden; aspect-ratio: 4/3; cursor: pointer; text-decoration: none; }\n.galeri-img { width: 100%; height: 100%; }\n.galeri-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s; }\n.galeri-card:hover .galeri-img img { transform: scale(1.08); }\n.galeri-img-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--gray-100); color: var(--gray-300); font-size: 2.5rem; }\n.galeri-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px; background: linear-gradient(transparent, rgba(0,0,0,0.7)); color: white; }\n.galeri-overlay h3 { font-size: 0.95rem; font-weight: 600; margin: 0 0 4px; }\n.galeri-overlay p { font-size: 0.8rem; margin: 0; opacity: 0.85; }\n@media (max-width: 768px) {\n    .galeri-section { padding: 30px 0 50px; }\n    .galeri-title { font-size: 1.4rem; }\n    .galeri-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }\n}\n</style>\n@else\n<section style=\"padding:80px 0;text-align:center;background:var(--gray-50);min-height:50vh;\"><div class=\"container\"><i class=\"fas fa-images\" style=\"font-size:3rem;color:var(--gray-300);margin-bottom:20px;\"></i><h2 style=\"color:var(--gray-500);font-weight:500;font-size:1.2rem;\">Tiada Galeri</h2><p style=\"color:var(--gray-400);margin:10px 0 30px;\">Tiada galeri foto buat masa ini.</p><a href=\"/{{ $siteSlug }}\" style=\"display:inline-flex;align-items:center;gap:8px;padding:12px 24px;background:var(--primary);color:white;border-radius:10px;text-decoration:none;font-size:0.85rem;\"><i class=\"fas fa-arrow-left\"></i> Kembali</a></div></section>\n@endif\n@endif\n",
            "type": "PHP",
            "category": "Content",
            "status": 1,
            "created_at": "2026-07-04 12:05:08",
            "updated_at": "2026-09-21 19:03:55"
        },
        {
            "id": 6,
            "name": "Video Web",
            "code": "video_web",
            "content": "@php\n            $items = \\App\\Models\\Backend\\ContentVideo::with(['translations' => function($q) use ($lang) { $q->where('video_translation_language', $lang); }])->published()->orderBy('video_date', 'desc')->get();\n            @endphp\n            @if($items->count())\n            <section class=\"video-section\">\n                <div class=\"container\">\n                    <div class=\"video-header\">\n                        <span class=\"video-badge\">Video</span>\n                        <h1 class=\"video-title\">Video</h1>\n                        <p class=\"video-subtitle\">Koleksi video dan tayangan multimedia rasmi.</p>\n                    </div>\n                    <div class=\"video-grid\">\n                        @foreach($items as $item)\n                        @php $t = $item->translations->first(); @endphp\n                        <div class=\"video-card\">\n                            <div class=\"video-thumb\">\n                                @if($item->video_img)\n                                <img src=\"{{ image_url($item->video_img) }}\" alt=\"{{ $t->video_translation_title ?? '' }}\">\n                                @elseif($item->video_external)\n                                <div class=\"video-embed\" style=\"padding:56.25% 0 0 0;position:relative;\"><iframe src=\"{{ $item->video_external }}\" style=\"position:absolute;top:0;left:0;width:100%;height:100%;border:0;\" allowfullscreen></iframe></div>\n                                @else\n                                <div class=\"video-placeholder\"><i class=\"fas fa-video\"></i></div>\n                                @endif\n                            </div>\n                            @if($t)\n                            <div class=\"video-info\">\n                                <h3 class=\"video-title-text\">{{ $t->video_translation_title }}</h3>\n                                @if($t->video_translation_content)<p class=\"video-desc\">{{ Str::limit($t->video_translation_content, 120) }}</p>@endif\n                            </div>\n                            @endif\n                        </div>\n                        @endforeach\n                    </div>\n                </div>\n            </section>\n            <style>\n            .video-section { padding: 60px 0 80px; background: var(--gray-50); min-height: 60vh; }\n            .video-header { text-align: center; margin-bottom: 50px; }\n            .video-badge { display: inline-block; background: var(--accent-light); color: var(--accent); padding: 6px 16px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; margin-bottom: 16px; }\n            .video-title { font-size: 2rem; font-weight: 700; color: var(--gray-900); margin: 0 0 12px; }\n            .video-subtitle { color: var(--gray-400); font-size: 1rem; margin: 0; }\n            .video-grid { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }\n            .video-card { background: var(--white); border-radius: 16px; overflow: hidden; border: 1px solid var(--gray-200); transition: box-shadow 0.2s; }\n            .video-card:hover { box-shadow: var(--shadow-lg); }\n            .video-thumb { }\n            .video-thumb img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }\n            .video-placeholder { width: 100%; aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; background: var(--gray-100); color: var(--gray-300); font-size: 2.5rem; }\n            .video-embed { }\n            .video-info { padding: 16px 18px; }\n            .video-title-text { font-size: 0.95rem; font-weight: 600; color: var(--gray-900); margin: 0 0 6px; }\n            .video-desc { font-size: 0.82rem; color: var(--gray-500); margin: 0; line-height: 1.5; }\n            @media (max-width: 768px) {\n                .video-section { padding: 30px 0 50px; }\n                .video-title { font-size: 1.4rem; }\n                .video-grid { grid-template-columns: 1fr; }\n            }\n            </style>\n            @else\n            <section style=\"padding:80px 0;text-align:center;background:var(--gray-50);min-height:50vh;\"><div class=\"container\"><i class=\"fas fa-video\" style=\"font-size:3rem;color:var(--gray-300);margin-bottom:20px;\"></i><h2 style=\"color:var(--gray-500);font-weight:500;font-size:1.2rem;\">Tiada Video</h2><p style=\"color:var(--gray-400);margin:10px 0 30px;\">Tiada video buat masa ini.</p><a href=\"/{{ $siteSlug }}\" style=\"display:inline-flex;align-items:center;gap:8px;padding:12px 24px;background:var(--primary);color:white;border-radius:10px;text-decoration:none;font-size:0.85rem;\"><i class=\"fas fa-arrow-left\"></i> Kembali</a></div></section>\n            @endif\n            ",
            "type": "PHP",
            "category": "Content",
            "status": 1,
            "created_at": "2026-07-04 12:05:08",
            "updated_at": "2026-09-21 18:35:39"
        },
        {
            "id": 7,
            "name": "FAQ Web",
            "code": "faq_web",
            "content": "@php\n            $faqs = \\App\\Models\\Backend\\ContentArticle::with(['translations' => function($q) use ($lang) { $q->where('article_translation_language', $lang); }])->where('article_category', 'ARTICLE')->published()->orderBy('article_sorting')->orderBy('created_at', 'desc')->get();\n            $num = 1;\n            @endphp\n            @if($faqs->count())\n            <section class=\"faq-section\">\n                <div class=\"container\">\n                    <div class=\"faq-header\">\n                        <span class=\"faq-badge\">FAQ</span>\n                        <h1 class=\"faq-title\">Soalan Lazim</h1>\n                        <p class=\"faq-subtitle\">Cari jawapan kepada soalan-soalan yang sering ditanya.</p>\n                    </div>\n            \n                    <div class=\"faq-list\" id=\"faq-list\">\n                        @foreach($faqs as $faq)\n                        @php $t = $faq->translations->first(); @endphp\n                        @if($t)\n                        <div class=\"faq-item\">\n                            <button class=\"faq-question\" onclick=\"toggleFaq(this)\">\n                                <span class=\"faq-number\">{{ $num }}</span>\n                                <span class=\"faq-text\">{{ $t->article_translation_title }}</span>\n                                <span class=\"faq-icon\">\n                                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"><path d=\"M4.79175 7.396L10.0001 12.6043L15.2084 7.396\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n                                </span>\n                            </button>\n                            <div class=\"faq-answer\">\n                                <div class=\"faq-answer-inner\">\n                                    {!! $t->article_translation_content !!}\n                                </div>\n                                <a href=\"/{{ $siteSlug }}/article-web?id={{ $faq->article_code }}\" class=\"faq-readmore\">Baca selengkapnya <i class=\"fas fa-arrow-right\"></i></a>\n                            </div>\n                        </div>\n                        @php $num++; @endphp\n                        @endif\n                        @endforeach\n                    </div>\n                </div>\n            </section>\n            \n            <style>\n            .faq-section {\n                padding: 60px 0 80px;\n                background: var(--gray-50);\n                min-height: 60vh;\n            }\n            .faq-header {\n                text-align: center;\n                margin-bottom: 50px;\n            }\n            .faq-badge {\n                display: inline-block;\n                background: var(--accent-light);\n                color: var(--accent);\n                padding: 6px 16px;\n                border-radius: 999px;\n                font-size: 0.75rem;\n                font-weight: 600;\n                margin-bottom: 16px;\n            }\n            .faq-title {\n                font-size: 2rem;\n                font-weight: 700;\n                color: var(--gray-900);\n                margin: 0 0 12px;\n            }\n            .faq-subtitle {\n                color: var(--gray-400);\n                font-size: 1rem;\n                margin: 0;\n            }\n            .faq-list {\n                max-width: 800px;\n                margin: 0 auto;\n                display: flex;\n                flex-direction: column;\n                gap: 12px;\n            }\n            .faq-item {\n                background: var(--white);\n                border-radius: 16px;\n                border: 1px solid var(--gray-200);\n                overflow: hidden;\n                transition: box-shadow 0.3s;\n            }\n            .faq-item:hover {\n                box-shadow: var(--shadow-lg);\n            }\n            .faq-question {\n                width: 100%;\n                display: flex;\n                align-items: center;\n                gap: 16px;\n                padding: 20px 24px;\n                background: none;\n                border: none;\n                cursor: pointer;\n                text-align: left;\n                font-size: 1rem;\n                color: var(--gray-800);\n                font-weight: 500;\n                transition: background 0.2s;\n                position: relative;\n            }\n            .faq-question:hover {\n                background: var(--gray-50);\n            }\n            .faq-question.active {\n                color: var(--primary);\n            }\n            .faq-number {\n                width: 32px;\n                height: 32px;\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                background: var(--gray-100);\n                color: var(--gray-500);\n                border-radius: 8px;\n                font-size: 0.8rem;\n                font-weight: 600;\n                flex-shrink: 0;\n            }\n            .faq-question.active .faq-number {\n                background: var(--primary);\n                color: white;\n            }\n            .faq-text {\n                flex: 1;\n            }\n            .faq-icon {\n                flex-shrink: 0;\n                color: var(--gray-400);\n                transition: transform 0.3s;\n            }\n            .faq-question.active .faq-icon {\n                transform: rotate(180deg);\n                color: var(--primary);\n            }\n            .faq-answer {\n                display: none;\n                border-top: 1px solid var(--gray-100);\n            }\n            .faq-answer.open {\n                display: block;\n            }\n            .faq-answer-inner {\n                padding: 20px 24px 12px;\n                color: var(--gray-600);\n                font-size: 0.95rem;\n                line-height: 1.8;\n            }\n            .faq-answer-inner p { margin-bottom: 1rem; }\n            .faq-answer-inner ul, .faq-answer-inner ol { padding-left: 20px; margin-bottom: 1rem; }\n            .faq-answer-inner li { margin-bottom: 6px; }\n            .faq-readmore {\n                display: inline-flex;\n                align-items: center;\n                gap: 6px;\n                margin: 0 24px 20px;\n                color: var(--primary);\n                font-size: 0.85rem;\n                font-weight: 500;\n                text-decoration: none;\n                transition: gap 0.2s;\n            }\n            .faq-readmore:hover {\n                gap: 10px;\n                text-decoration: underline;\n            }\n            @media (max-width: 768px) {\n                .faq-section { padding: 30px 0 50px; }\n                .faq-title { font-size: 1.4rem; }\n                .faq-question { padding: 16px 18px; font-size: 0.9rem; gap: 12px; }\n                .faq-answer-inner { padding: 16px 18px 10px; font-size: 0.9rem; }\n                .faq-number { width: 28px; height: 28px; font-size: 0.7rem; }\n            }\n            @media (max-width: 480px) {\n                .faq-title { font-size: 1.2rem; }\n                .faq-question { padding: 14px 16px; gap: 10px; }\n            }\n            </style>\n            \n            <script>\n            function toggleFaq(btn) {\n                var item = btn.parentElement;\n                var answer = item.querySelector('.faq-answer');\n                var isOpen = answer.classList.contains('open');\n            \n                document.querySelectorAll('#faq-list .faq-answer.open').forEach(function(el) {\n                    el.classList.remove('open');\n                });\n                document.querySelectorAll('#faq-list .faq-question.active').forEach(function(el) {\n                    el.classList.remove('active');\n                });\n            \n                if (!isOpen) {\n                    answer.classList.add('open');\n                    btn.classList.add('active');\n                }\n            }\n            </script>\n            @else\n            <section style=\"padding:80px 0;text-align:center;background:var(--gray-50);min-height:50vh;\">\n                <div class=\"container\">\n                    <i class=\"fas fa-question-circle\" style=\"font-size:3rem;color:var(--gray-300);margin-bottom:20px;\"></i>\n                    <h2 style=\"color:var(--gray-500);font-weight:500;font-size:1.2rem;\">Tiada Soalan Lazim</h2>\n                    <p style=\"color:var(--gray-400);margin:10px 0 30px;\">Tiada soalan lazim buat masa ini. Sila kembali semula kemudian.</p>\n                    <a href=\"/{{ $siteSlug }}\" style=\"display:inline-flex;align-items:center;gap:8px;padding:12px 24px;background:var(--primary);color:white;border-radius:10px;text-decoration:none;font-size:0.85rem;\"><i class=\"fas fa-arrow-left\"></i> Kembali ke Laman Utama</a>\n                </div>\n            </section>\n            @endif\n            ",
            "type": "PHP",
            "category": "Content",
            "status": 1,
            "created_at": "2026-07-04 12:05:08",
            "updated_at": "2026-09-21 17:56:02"
        },
        {
            "id": 8,
            "name": "Sitemap Web",
            "code": "sitemap_web",
            "content": "@php\n            use App\\Models\\Backend\\menu\\frontend\\MenuCategory;\n            use App\\Models\\Backend\\menu\\frontend\\RoleMapping;\n            \n            $navbarCategoryId = MenuCategory::where('category_name', 'Navbar Public')->value('category_id');\n            \n            $buildSitemap = function($parentId = 0, $level = 0) use (&$buildSitemap, $navbarCategoryId) {\n                $items = RoleMapping::with('menu')\n                    ->where('role_code', 'public')\n                    ->where('category_id', $navbarCategoryId)\n                    ->where('parent_id', $parentId)\n                    ->where('status', true)\n                    ->orderBy('sort')\n                    ->get()\n                    ->unique('menu_id');\n            \n                $tree = [];\n                foreach ($items as $item) {\n                    if (!$item->menu || !$item->menu->menu_status) continue;\n                    $tree[] = [\n                        'menu' => $item->menu,\n                        'level' => $level,\n                        'children' => $buildSitemap($item->menu_id, $level + 1),\n                    ];\n                }\n                return $tree;\n            };\n            \n            $sitemap = $buildSitemap();\n            @endphp\n            <section class=\"sitemap-section\">\n                <div class=\"container\">\n                    <div class=\"sitemap-header\">\n                        <h1><span>Peta</span> Laman</h1>\n                        <p>Senarai halaman dan pautan yang tersedia dalam portal ini.</p>\n                    </div>\n                    @if(count($sitemap))\n                    <div class=\"sitemap-grid\">\n                        @foreach($sitemap as $item)\n                        <div class=\"sitemap-card\">\n                            <a href=\"{{ $item['menu']->menu_link ?? '#' }}\" class=\"sitemap-card-title\">\n                                @if($item['menu']->menu_icon)<i class=\"{{ $item['menu']->menu_icon }}\"></i>@endif\n                                {{ $item['menu']->menu_name }}\n                            </a>\n                            @if(count($item['children']))\n                            <ul class=\"sitemap-list\">\n                                @foreach($item['children'] as $child)\n                                <li>\n                                    <a href=\"{{ $child['menu']->menu_link ?? '#' }}\">{{ $child['menu']->menu_name }}</a>\n                                    @if(count($child['children']))\n                                    <ul class=\"sitemap-sublist\">\n                                        @foreach($child['children'] as $sub)\n                                        <li><a href=\"{{ $sub['menu']->menu_link ?? '#' }}\">{{ $sub['menu']->menu_name }}</a></li>\n                                        @endforeach\n                                    </ul>\n                                    @endif\n                                </li>\n                                @endforeach\n                            </ul>\n                            @else\n                            <p class=\"sitemap-no-children\">Pautan langsung ke {{ $item['menu']->menu_name }}.</p>\n                            @endif\n                        </div>\n                        @endforeach\n                    </div>\n                    @else\n                    <div class=\"sitemap-empty\">\n                        <p>Tiada pautan buat masa ini.</p>\n                    </div>\n                    @endif\n                </div>\n            </section>\n            <style>\n            .sitemap-section { padding: 60px 0 80px; background: var(--gray-50); min-height: 60vh; }\n            .sitemap-header { text-align: center; margin-bottom: 50px; }\n            .sitemap-header h1 { font-size: 2rem; font-weight: 700; color: var(--gray-900); margin: 0 0 10px; }\n            .sitemap-header h1 span { color: var(--accent); }\n            .sitemap-header p { color: var(--gray-400); font-size: 1rem; margin: 0; }\n            .sitemap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }\n            .sitemap-card { background: var(--white); border-radius: 16px; border: 1px solid var(--gray-200); padding: 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }\n            .sitemap-card-title { display: flex; align-items: center; gap: 10px; font-size: 1rem; font-weight: 700; color: var(--gray-900); text-decoration: none; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid var(--accent-light); }\n            .sitemap-card-title i { color: var(--accent); }\n            .sitemap-card-title:hover { color: var(--accent); }\n            .sitemap-list { list-style: none; padding: 0; margin: 0; }\n            .sitemap-list li { margin-bottom: 10px; }\n            .sitemap-list li > a { display: block; font-size: 0.88rem; font-weight: 500; color: var(--gray-700); text-decoration: none; padding: 8px 12px; border-radius: 8px; transition: all 0.2s; }\n            .sitemap-list li > a:hover { background: var(--gray-50); color: var(--accent); padding-left: 16px; }\n            .sitemap-sublist { list-style: none; padding: 0 0 0 16px; margin: 4px 0 0; border-left: 2px solid var(--gray-200); }\n            .sitemap-sublist li { margin-bottom: 4px; }\n            .sitemap-sublist li a { display: block; font-size: 0.8rem; color: var(--gray-500); text-decoration: none; padding: 6px 10px; border-radius: 6px; transition: all 0.2s; }\n            .sitemap-sublist li a:hover { color: var(--accent); background: var(--gray-50); }\n            .sitemap-no-children { font-size: 0.85rem; color: var(--gray-400); margin: 0; padding: 8px 0; }\n            .sitemap-empty { text-align: center; padding: 60px 0; color: var(--gray-400); }\n            @media (max-width: 1024px) { .sitemap-grid { grid-template-columns: repeat(2, 1fr); } }\n            @media (max-width: 768px) { .sitemap-grid { grid-template-columns: 1fr; } .sitemap-header h1 { font-size: 1.5rem; } }\n            </style>\n            ",
            "type": "PHP",
            "category": "Content",
            "status": 1,
            "created_at": "2026-07-04 12:05:08",
            "updated_at": "2026-07-04 12:05:08"
        },
        {
            "id": 9,
            "name": "Calendar Web",
            "code": "calendar_web",
            "content": "@php\n            $items = \\App\\Models\\Backend\\ContentCalendar::with(['translations' => function($q) use ($lang) { $q->where('calendar_translation_language', $lang); }])->where('calendar_status', 'ACTIVE')->orderBy('calendar_date_start')->get();\n            $categories = \\App\\Models\\Backend\\Ref::where('cat', 'CALENDAR_CATEGORY')->pluck('descr', 'code');\n            $types = \\App\\Models\\Backend\\Ref::where('cat', 'CALENDAR_TYPE')->pluck('descr', 'code');\n            @endphp\n            @if($items->count())\n            <section class=\"cal-section\"><div class=\"container\">\n            <div class=\"cal-header\">\n            <span class=\"cal-badge\">Kalendar</span>\n            <h1 class=\"cal-title\">Kalendar Aktiviti</h1>\n            <p class=\"cal-subtitle\">Senarai aktiviti, mesyuarat dan program yang akan datang.</p>\n            </div>\n            <div class=\"cal-list\">\n            @foreach($items as $item)\n            @php $t = $item->translations->first(); @endphp\n            <div class=\"cal-item\">\n            <div class=\"cal-date-box\">\n            <span class=\"cal-date-day\">{{ date('d', strtotime($item->calendar_date_start)) }}</span>\n            <span class=\"cal-date-month\">{{ date('M', strtotime($item->calendar_date_start)) }}</span>\n            </div>\n            <div class=\"cal-info\">\n            @if($t)<h3 class=\"cal-title-text\">{{ $t->calendar_translation_title }}</h3>@endif\n            <div class=\"cal-meta\">\n            <span class=\"cal-cat\">{{ $categories[$item->calendar_category] ?? $item->calendar_category }}</span>\n            <span class=\"cal-type\">{{ $types[$item->calendar_type] ?? $item->calendar_type }}</span>\n            </div>\n            @if($t && $t->calendar_translation_location)<span class=\"cal-location\"><i class=\"fas fa-map-marker-alt\"></i> {{ $t->calendar_translation_location }}</span>@endif\n            @if($t && $t->calendar_translation_content)<p class=\"cal-desc\">{{ Str::limit($t->calendar_translation_content, 120) }}</p>@endif\n            </div>\n            <div class=\"cal-time-box\">\n            @if($item->calendar_time_start)<span class=\"cal-time\">{{ substr($item->calendar_time_start, 0, 5) }}</span>@endif\n            @if($item->calendar_time_end)<span class=\"cal-time-sep\">-</span><span class=\"cal-time\">{{ substr($item->calendar_time_end, 0, 5) }}</span>@endif\n            </div>\n            </div>\n            @endforeach\n            </div>\n            </div></section>\n            <style>\n            .cal-section{padding:60px 0 80px;background:var(--gray-50);min-height:60vh;}\n            .cal-header{text-align:center;margin-bottom:50px;}\n            .cal-badge{display:inline-block;background:var(--accent-light);color:var(--accent);padding:6px 16px;border-radius:999px;font-size:.75rem;font-weight:600;margin-bottom:16px;}\n            .cal-title{font-size:2rem;font-weight:700;color:var(--gray-900);margin:0 0 12px;}\n            .cal-subtitle{color:var(--gray-400);font-size:1rem;margin:0;}\n            .cal-list{max-width:800px;margin:0 auto;display:flex;flex-direction:column;gap:12px;}\n            .cal-item{display:flex;align-items:flex-start;gap:16px;background:var(--white);padding:18px 22px;border-radius:14px;border:1px solid var(--gray-200);transition:box-shadow .2s;}\n            .cal-item:hover{box-shadow:var(--shadow-lg);}\n            .cal-date-box{width:60px;text-align:center;flex-shrink:0;padding-top:4px;}\n            .cal-date-day{display:block;font-size:1.4rem;font-weight:700;color:var(--accent);line-height:1.2;}\n            .cal-date-month{display:block;font-size:.7rem;font-weight:600;color:var(--gray-400);text-transform:uppercase;}\n            .cal-info{flex:1;min-width:0;}\n            .cal-title-text{font-size:.95rem;font-weight:600;color:var(--gray-900);margin:0 0 6px;}\n            .cal-meta{display:flex;gap:8px;margin-bottom:6px;flex-wrap:wrap;}\n            .cal-cat{font-size:.7rem;background:var(--gray-100);color:var(--gray-500);padding:2px 10px;border-radius:999px;font-weight:500;}\n            .cal-type{font-size:.7rem;color:var(--gray-400);}\n            .cal-location{display:block;font-size:.8rem;color:var(--gray-500);margin-bottom:4px;}\n            .cal-location i{font-size:.7rem;margin-right:4px;}\n            .cal-desc{font-size:.82rem;color:var(--gray-400);margin:4px 0 0;line-height:1.5;}\n            .cal-time-box{text-align:center;flex-shrink:0;min-width:60px;padding-top:4px;}\n            .cal-time{display:block;font-size:.78rem;color:var(--gray-500);font-weight:500;}\n            .cal-time-sep{display:none;}\n            @media(max-width:768px){.cal-section{padding:30px 0 50px;}.cal-title{font-size:1.4rem;}.cal-item{padding:14px 16px;gap:12px;}.cal-date-day{font-size:1.1rem;}}\n            @media(max-width:480px){.cal-title{font-size:1.2rem;}.cal-item{flex-wrap:wrap;}.cal-time-box{width:100%;text-align:left;padding-left:76px;}}\n            </style>\n            @else\n            <section style=\"padding:80px 0;text-align:center;background:var(--gray-50);min-height:50vh;\"><div class=\"container\"><i class=\"fas fa-calendar-check\" style=\"font-size:3rem;color:var(--gray-300);margin-bottom:20px;\"></i><h2 style=\"color:var(--gray-500);font-weight:500;font-size:1.2rem;\">Tiada Aktiviti</h2><p style=\"color:var(--gray-400);margin:10px 0 30px;\">Tiada aktiviti berjadual buat masa ini.</p><a href=\"/{{ $siteSlug }}\" style=\"display:inline-flex;align-items:center;gap:8px;padding:12px 24px;background:var(--primary);color:white;border-radius:10px;text-decoration:none;font-size:.85rem;\"><i class=\"fas fa-arrow-left\"></i> Kembali</a></div></section>\n            @endif\n            ",
            "type": "PHP",
            "category": "Content",
            "status": 1,
            "created_at": "2026-07-04 12:05:08",
            "updated_at": "2026-07-04 12:05:08"
        },
        {
            "id": 10,
            "name": "Contact Us Web",
            "code": "contact_us_web",
            "content": "@php\n            $success = session('success');\n            if (!$success && request()->isMethod('POST')) {\n                $data = request()->validate([\n                    'name' => 'required|string|max:255',\n                    'email' => 'nullable|email|max:255',\n                    'subject' => 'required|string|max:255',\n                    'feedback' => 'required|string',\n                    'type' => 'nullable|string|max:255',\n                    'cat' => 'nullable|string|max:255',\n                ]);\n                $data['ticket_no'] = \\App\\Models\\Backend\\ContentFeedbackMain::generateTicketNo();\n                $data['status'] = 'PENDING';\n                \\App\\Models\\Backend\\ContentFeedbackMain::create($data);\n                $success = true;\n            }\n            @endphp\n            <section class=\"contact-section\">\n                <div class=\"container\">\n                    <div class=\"contact-header\">\n                        <span class=\"contact-badge\">Hubungi Kami</span>\n                        <h1 class=\"contact-title\">Hubungi Kami</h1>\n                        <p class=\"contact-subtitle\">Ada sebarang pertanyaan atau maklum balas? Jangan ragu untuk menghubungi kami.</p>\n                    </div>\n            \n                    <div class=\"contact-grid\">\n                        <div class=\"contact-info\">\n                            <div class=\"contact-info-card\">\n                                <div class=\"contact-info-icon\"><i class=\"fas fa-map-marker-alt\"></i></div>\n                                <h3>Alamat</h3>\n                                <p>Aras 1, Pusat Pentadbiran Kerajaan Persekutuan<br>Putrajaya</p>\n                            </div>\n                            <div class=\"contact-info-card\">\n                                <div class=\"contact-info-icon\"><i class=\"fas fa-phone-alt\"></i></div>\n                                <h3>Telefon</h3>\n                                <p>03-8000 8000</p>\n                                <span class=\"contact-info-note\">Isnin - Jumaat, 8:00 PG - 5:00 PTG</span>\n                            </div>\n                            <div class=\"contact-info-card\">\n                                <div class=\"contact-info-icon\"><i class=\"fas fa-envelope\"></i></div>\n                                <h3>Emel</h3>\n                                <p>admin@jabatan.gov.my</p>\n                            </div>\n                        </div>\n            \n                        <div class=\"contact-form-wrap\">\n                            @if($success)\n                            <div class=\"contact-success\">\n                                <i class=\"fas fa-check-circle\"></i>\n                                <h3>Berjaya Dihantar!</h3>\n                                <p>Pesan anda telah dihantar. Terima kasih!</p>\n                            </div>\n                            @else\n                            <form method=\"POST\" action=\"{{ request()->url() }}\" class=\"contact-form\">\n                                @csrf\n                                <div class=\"form-row\">\n                                    <div class=\"form-group\">\n                                        <label for=\"name\">Nama Penuh <span class=\"required\">*</span></label>\n                                        <input type=\"text\" id=\"name\" name=\"name\" required placeholder=\"Masukkan nama penuh\" value=\"{{ old('name') }}\">\n                                        @error('name') <span class=\"form-error\">{{ $message }}</span> @enderror\n                                    </div>\n                                    <div class=\"form-group\">\n                                        <label for=\"email\">Emel</label>\n                                        <input type=\"email\" id=\"email\" name=\"email\" placeholder=\"Masukkan alamat emel\" value=\"{{ old('email') }}\">\n                                        @error('email') <span class=\"form-error\">{{ $message }}</span> @enderror\n                                    </div>\n                                </div>\n                                <div class=\"form-row\">\n                                    <div class=\"form-group\">\n                                        <label for=\"type\">Jenis <span class=\"required\">*</span></label>\n                                        <select id=\"type\" name=\"type\" required>\n                                            <option value=\"\">-- Pilih Jenis --</option>\n                                            <option value=\"INQUIRY\" {{ old('type') == 'INQUIRY' ? 'selected' : '' }}>Pertanyaan</option>\n                                            <option value=\"FEEDBACK\" {{ old('type') == 'FEEDBACK' ? 'selected' : '' }}>Maklum Balas</option>\n                                            <option value=\"COMPLAINT\" {{ old('type') == 'COMPLAINT' ? 'selected' : '' }}>Aduan</option>\n                                            <option value=\"SUGGESTION\" {{ old('type') == 'SUGGESTION' ? 'selected' : '' }}>Cadangan</option>\n                                            <option value=\"REQUEST\" {{ old('type') == 'REQUEST' ? 'selected' : '' }}>Permintaan</option>\n                                        </select>\n                                        @error('type') <span class=\"form-error\">{{ $message }}</span> @enderror\n                                    </div>\n                                    <div class=\"form-group\">\n                                        <label for=\"cat\">Kategori</label>\n                                        <select id=\"cat\" name=\"cat\">\n                                            <option value=\"\">-- Pilih Kategori --</option>\n                                            <option value=\"ACCOUNTS\" {{ old('cat') == 'ACCOUNTS' ? 'selected' : '' }}>Akaun</option>\n                                            <option value=\"OTHERS\" {{ old('cat') == 'OTHERS' ? 'selected' : '' }}>Lain-lain</option>\n                                        </select>\n                                        @error('cat') <span class=\"form-error\">{{ $message }}</span> @enderror\n                                    </div>\n                                </div>\n                                <div class=\"form-group\">\n                                    <label for=\"subject\">Subjek <span class=\"required\">*</span></label>\n                                    <input type=\"text\" id=\"subject\" name=\"subject\" required placeholder=\"Masukkan subjek\" value=\"{{ old('subject') }}\">\n                                    @error('subject') <span class=\"form-error\">{{ $message }}</span> @enderror\n                                </div>\n                                <div class=\"form-group\">\n                                    <label for=\"feedback\">Mesej <span class=\"required\">*</span></label>\n                                    <textarea id=\"feedback\" name=\"feedback\" rows=\"6\" required placeholder=\"Tulis mesej anda di sini...\">{{ old('feedback') }}</textarea>\n                                    @error('feedback') <span class=\"form-error\">{{ $message }}</span> @enderror\n                                </div>\n                                <button type=\"submit\" class=\"contact-submit-btn\"><i class=\"fas fa-paper-plane\"></i> Hantar Mesej</button>\n                            </form>\n                            @endif\n                        </div>\n                    </div>\n                </div>\n            </section>\n            \n            <style>\n            .contact-section {\n                padding: 60px 0 80px;\n                background: var(--gray-50);\n                min-height: 60vh;\n            }\n            .contact-header {\n                text-align: center;\n                margin-bottom: 50px;\n            }\n            .contact-badge {\n                display: inline-block;\n                background: var(--accent-light);\n                color: var(--accent);\n                padding: 6px 16px;\n                border-radius: 999px;\n                font-size: 0.75rem;\n                font-weight: 600;\n                margin-bottom: 16px;\n            }\n            .contact-title {\n                font-size: 2rem;\n                font-weight: 700;\n                color: var(--gray-900);\n                margin: 0 0 12px;\n            }\n            .contact-subtitle {\n                color: var(--gray-400);\n                font-size: 1rem;\n                margin: 0;\n            }\n            .contact-grid {\n                display: grid;\n                grid-template-columns: 1fr 1.5fr;\n                gap: 40px;\n                max-width: 1000px;\n                margin: 0 auto;\n                align-items: start;\n            }\n            .contact-info {\n                display: flex;\n                flex-direction: column;\n                gap: 16px;\n            }\n            .contact-info-card {\n                background: var(--white);\n                padding: 24px;\n                border-radius: 16px;\n                border: 1px solid var(--gray-200);\n                transition: box-shadow 0.2s;\n            }\n            .contact-info-card:hover {\n                box-shadow: var(--shadow-md);\n            }\n            .contact-info-icon {\n                width: 44px;\n                height: 44px;\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                background: var(--accent-light);\n                color: var(--accent);\n                border-radius: 12px;\n                font-size: 1.1rem;\n                margin-bottom: 14px;\n            }\n            .contact-info-card h3 {\n                font-size: 0.95rem;\n                font-weight: 600;\n                color: var(--gray-900);\n                margin: 0 0 6px;\n            }\n            .contact-info-card p {\n                font-size: 0.85rem;\n                color: var(--gray-600);\n                margin: 0;\n                line-height: 1.6;\n            }\n            .contact-info-note {\n                display: block;\n                font-size: 0.75rem;\n                color: var(--gray-400);\n                margin-top: 4px;\n            }\n            .contact-form-wrap {\n                background: var(--white);\n                padding: 32px;\n                border-radius: 16px;\n                border: 1px solid var(--gray-200);\n            }\n            .contact-form {\n                display: flex;\n                flex-direction: column;\n                gap: 20px;\n            }\n            .form-row {\n                display: grid;\n                grid-template-columns: 1fr 1fr;\n                gap: 16px;\n            }\n            .form-group {\n                display: flex;\n                flex-direction: column;\n                gap: 6px;\n            }\n            .form-group label {\n                font-size: 0.85rem;\n                font-weight: 500;\n                color: var(--gray-700);\n            }\n            .required { color: var(--accent); }\n            .form-group input,\n            .form-group select,\n            .form-group textarea {\n                padding: 10px 14px;\n                border: 1px solid var(--gray-200);\n                border-radius: 10px;\n                font-size: 0.9rem;\n                font-family: inherit;\n                color: var(--gray-800);\n                background: var(--white);\n                transition: border-color 0.2s;\n                outline: none;\n                width: 100%;\n            }\n            .form-group input:focus,\n            .form-group select:focus,\n            .form-group textarea:focus {\n                border-color: var(--primary);\n            }\n            .form-group textarea { resize: vertical; }\n            .form-error {\n                font-size: 0.75rem;\n                color: var(--accent);\n            }\n            .contact-submit-btn {\n                display: inline-flex;\n                align-items: center;\n                justify-content: center;\n                gap: 8px;\n                padding: 14px 32px;\n                background: var(--primary);\n                color: var(--white);\n                border: none;\n                border-radius: 10px;\n                font-size: 0.9rem;\n                font-weight: 500;\n                cursor: pointer;\n                transition: background 0.2s;\n                width: 100%;\n            }\n            .contact-submit-btn:hover {\n                background: var(--primary-light);\n            }\n            .contact-submit-btn i { font-size: 0.85rem; }\n            .contact-success {\n                text-align: center;\n                padding: 40px 20px;\n            }\n            .contact-success i {\n                font-size: 3rem;\n                color: var(--teal);\n                margin-bottom: 16px;\n            }\n            .contact-success h3 {\n                font-size: 1.2rem;\n                font-weight: 600;\n                color: var(--gray-900);\n                margin: 0 0 8px;\n            }\n            .contact-success p {\n                color: var(--gray-400);\n                font-size: 0.9rem;\n                margin: 0;\n            }\n            @media (max-width: 768px) {\n                .contact-section { padding: 30px 0 50px; }\n                .contact-title { font-size: 1.4rem; }\n                .contact-grid { grid-template-columns: 1fr; gap: 24px; }\n                .form-row { grid-template-columns: 1fr; }\n                .contact-form-wrap { padding: 24px; }\n            }\n            @media (max-width: 480px) {\n                .contact-title { font-size: 1.2rem; }\n                .contact-form-wrap { padding: 20px; }\n            }\n            </style>\n            ",
            "type": "PHP",
            "category": "Content",
            "status": 1,
            "created_at": "2026-07-04 12:05:08",
            "updated_at": "2026-07-04 12:05:08"
        },
        {
            "id": 11,
            "name": "Directory Web",
            "code": "directory_web",
            "content": "@php\n            $depts = DB::table('content_directory_departments')->orderBy('directory_department_sort')->orderBy('directory_department_name')->get();\n            $selectedDept = request()->query('dept');\n            $staffQuery = DB::table('content_directory_staff')->where('directory_staff_status', 1);\n            if ($selectedDept) {\n                $staffQuery->where('directory_staff_department_id', $selectedDept);\n            }\n            $staffList = $staffQuery->orderBy('directory_staff_sort')->orderBy('directory_staff_name')->get();\n            @endphp\n            <section class=\"dir-section\"><div class=\"container\">\n            <div class=\"dir-header\">\n            <span class=\"dir-badge\">Direktori</span>\n            <h1 class=\"dir-title\">Direktori Kakitangan</h1>\n            <p class=\"dir-subtitle\">Senarai bahagian dan kakitangan jabatan.</p>\n            </div>\n            \n            <div class=\"dir-filter\">\n            <form method=\"GET\" action=\"{{ request()->url() }}\">\n            <select name=\"dept\" onchange=\"this.form.submit()\">\n            <option value=\"\">-- Pilih Bahagian --</option>\n            @foreach($depts as $d)\n            <option value=\"{{ $d->directory_department_id }}\" {{ $selectedDept == $d->directory_department_id ? 'selected' : '' }}>{{ $d->directory_department_name }}</option>\n            @endforeach\n            </select>\n            @if($selectedDept)\n            <a href=\"{{ request()->url() }}\" class=\"dir-reset\">Set Semula</a>\n            @endif\n            </form>\n            </div>\n            \n            @if($staffList->count())\n            <div class=\"dir-table-wrap\">\n            <table class=\"dir-table\">\n            <thead>\n            <tr>\n            <th>Bil.</th>\n            <th>Nama</th>\n            <th>Jawatan</th>\n            <th>Emel</th>\n            <th>Telefon</th>\n            </tr>\n            </thead>\n            <tbody>\n            @foreach($staffList as $i => $s)\n            <tr>\n            <td class=\"dir-num\">{{ $i + 1 }}</td>\n            <td class=\"dir-name\">\n            <div class=\"dir-name-cell\">\n            <div class=\"dir-photo\">\n            @if($s->directory_staff_photo)\n            <img src=\"{{ image_url($s->directory_staff_photo) }}\" alt=\"{{ $s->directory_staff_name }}\">\n            @else\n            <div class=\"dir-photo-placeholder\"><i class=\"fas fa-user\"></i></div>\n            @endif\n            </div>\n            <span>{{ $s->directory_staff_name }}</span>\n            </div>\n            </td>\n            <td class=\"dir-pos\">{{ $s->directory_staff_position ?? '-' }}</td>\n            <td class=\"dir-email\">@if($s->directory_staff_email)<a href=\"mailto:{{ $s->directory_staff_email }}\">{{ $s->directory_staff_email }}</a>@else - @endif</td>\n            <td class=\"dir-phone\">{{ $s->directory_staff_phone ?? '-' }}</td>\n            </tr>\n            @endforeach\n            </tbody>\n            </table>\n            </div>\n            @else\n            <div class=\"dir-empty\">\n            <p>Tiada kakitangan dijumpai untuk bahagian yang dipilih.</p>\n            </div>\n            @endif\n            \n            <div class=\"dir-note\">\n            <p><strong>Nota:</strong></p>\n            <ol>\n            <li>Untuk menghantar emel, klik pada alamat emel yang berkenaan.</li>\n            <li>TIDAK DIBENARKAN menggunakan maklumat ini untuk tujuan pengiklanan, pemasaran dan penjualan produk dan perkhidmatan serta menyebar maklumat pegawai tanpa kebenaran.</li>\n            </ol>\n            </div>\n            \n            </div></section>\n            \n            <style>\n            .dir-section{padding:60px 0 80px;background:var(--gray-50);min-height:60vh;}\n            .dir-header{text-align:center;margin-bottom:40px;}\n            .dir-badge{display:inline-block;background:var(--accent-light);color:var(--accent);padding:6px 16px;border-radius:999px;font-size:.75rem;font-weight:600;margin-bottom:16px;}\n            .dir-title{font-size:2rem;font-weight:700;color:var(--gray-900);margin:0 0 12px;}\n            .dir-subtitle{color:var(--gray-400);font-size:1rem;margin:0;}\n            .dir-filter{max-width:600px;margin:0 auto 30px;}\n            .dir-filter form{display:flex;gap:10px;}\n            .dir-filter select{flex:1;padding:10px 14px;border:1px solid var(--gray-200);border-radius:10px;font-size:.9rem;font-family:inherit;color:var(--gray-800);background:var(--white);outline:none;}\n            .dir-filter select:focus{border-color:var(--primary);}\n            .dir-reset{display:inline-flex;align-items:center;padding:10px 18px;background:var(--gray-100);color:var(--gray-600);border-radius:10px;text-decoration:none;font-size:.85rem;white-space:nowrap;}\n            .dir-reset:hover{background:var(--gray-200);}\n            .dir-table-wrap{max-width:950px;margin:0 auto;overflow-x:auto;border-radius:14px;border:1px solid var(--gray-200);background:var(--white);}\n            .dir-table{width:100%;border-collapse:collapse;font-size:.88rem;}\n            .dir-table th{padding:12px 16px;text-align:left;font-weight:600;color:var(--gray-700);background:var(--gray-50);border-bottom:2px solid var(--gray-200);white-space:nowrap;}\n            .dir-table td{padding:11px 16px;border-bottom:1px solid var(--gray-100);color:var(--gray-600);}\n            .dir-table tr:last-child td{border-bottom:none;}\n            .dir-table tr:hover td{background:var(--gray-50);}\n            .dir-num{width:50px;text-align:center;color:var(--gray-400);font-size:.8rem;}\n            .dir-name{font-weight:500;color:var(--gray-800);}\n            .dir-name-cell{display:flex;align-items:center;gap:10px;}\n            .dir-photo{width:36px;height:36px;border-radius:50%;overflow:hidden;flex-shrink:0;}\n            .dir-photo img{width:100%;height:100%;object-fit:cover;display:block;}\n            .dir-photo-placeholder{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--gray-100);color:var(--gray-300);font-size:.85rem;}\n            .dir-pos{color:var(--gray-500);}\n            .dir-email a{color:var(--primary);text-decoration:none;}\n            .dir-email a:hover{text-decoration:underline;}\n            .dir-phone{color:var(--gray-500);}\n            .dir-empty{max-width:600px;margin:30px auto 0;text-align:center;padding:30px;background:var(--white);border-radius:12px;border:1px solid var(--gray-200);color:var(--gray-400);}\n            .dir-note{max-width:800px;margin:40px auto 0;padding:20px 24px;background:var(--white);border-radius:12px;border:1px solid var(--gray-200);font-size:.82rem;color:var(--gray-500);line-height:1.7;}\n            .dir-note ol{padding-left:20px;margin:8px 0 0;}\n            .dir-note li{margin-bottom:4px;}\n            @media(max-width:768px){.dir-section{padding:30px 0 50px;}.dir-title{font-size:1.4rem;}.dir-filter select{font-size:.82rem;}.dir-table th,.dir-table td{padding:8px 10px;font-size:.8rem;}}\n            @media(max-width:480px){.dir-title{font-size:1.2rem;}}\n            </style>\n            ",
            "type": "PHP",
            "category": "Content",
            "status": 1,
            "created_at": "2026-07-04 12:05:08",
            "updated_at": "2026-07-04 12:05:08"
        },
        {
            "id": 12,
            "name": "Publication Web",
            "code": "publication_web",
            "content": "@include('frontend.components.publication-web')",
            "type": "PHP",
            "category": "Content",
            "status": 1,
            "created_at": "2026-07-04 12:05:08",
            "updated_at": "2026-09-21 18:35:39"
        },
        {
            "id": 13,
            "name": "Holiday Web",
            "code": "holiday_web",
            "content": "@php\n            $items = DB::table('content_public_holidays')->where('public_holiday_status', 'ACTIVE')->orderBy('public_holiday_start_date')->get();\n            $months = ['', 'Januari', 'Februari', 'Mac', 'April', 'Mei', 'Jun', 'Julai', 'Ogos', 'September', 'Oktober', 'November', 'Disember'];\n            $grouped = [];\n            foreach ($items as $h) {\n                $m = date('n', strtotime($h->public_holiday_start_date));\n                $grouped[$m][] = $h;\n            }\n            @endphp\n            @if($items->count())\n            <section class=\"holiday-section\"><div class=\"container\">\n            <div class=\"holiday-header\">\n            <span class=\"holiday-badge\">Cuti Umum</span>\n            <h1 class=\"holiday-title\">Cuti Umum 2026</h1>\n            <p class=\"holiday-subtitle\">Senarai cuti umum dan perayaan bagi tahun semasa.</p>\n            </div>\n            <div class=\"holiday-list\">\n            @foreach($grouped as $m => $hols)\n            <div class=\"holiday-month\">\n            <h2 class=\"holiday-month-title\">{{ $months[$m] ?? $m }}</h2>\n            @foreach($hols as $h)\n            <div class=\"holiday-item\">\n            <div class=\"holiday-date-box\">\n            <span class=\"holiday-day\">{{ date('d', strtotime($h->public_holiday_start_date)) }}</span>\n            </div>\n            <div class=\"holiday-info\">\n            <span class=\"holiday-name\">{{ $h->public_holiday_title }}</span>\n            <span class=\"holiday-range\">@if($h->public_holiday_start_date === $h->public_holiday_end_date){{ date('d M Y', strtotime($h->public_holiday_start_date)) }}@else{{ date('d M', strtotime($h->public_holiday_start_date)) }} - {{ date('d M Y', strtotime($h->public_holiday_end_date)) }}@endif</span>\n            </div>\n            </div>\n            @endforeach\n            </div>\n            @endforeach\n            </div>\n            </div></section>\n            <style>\n            .holiday-section{padding:60px 0 80px;background:var(--gray-50);min-height:60vh;}\n            .holiday-header{text-align:center;margin-bottom:50px;}\n            .holiday-badge{display:inline-block;background:var(--accent-light);color:var(--accent);padding:6px 16px;border-radius:999px;font-size:.75rem;font-weight:600;margin-bottom:16px;}\n            .holiday-title{font-size:2rem;font-weight:700;color:var(--gray-900);margin:0 0 12px;}\n            .holiday-subtitle{color:var(--gray-400);font-size:1rem;margin:0;}\n            .holiday-list{max-width:700px;margin:0 auto;display:flex;flex-direction:column;gap:30px;}\n            .holiday-month{}\n            .holiday-month-title{font-size:1.1rem;font-weight:600;color:var(--gray-900);margin:0 0 12px;padding-bottom:8px;border-bottom:2px solid var(--gray-200);}\n            .holiday-item{display:flex;align-items:center;gap:16px;background:var(--white);padding:14px 18px;border-radius:12px;border:1px solid var(--gray-200);margin-bottom:8px;transition:box-shadow .2s;}\n            .holiday-item:hover{box-shadow:var(--shadow-md);}\n            .holiday-date-box{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:var(--accent-light);color:var(--accent);border-radius:10px;font-size:1.1rem;font-weight:700;flex-shrink:0;}\n            .holiday-info{flex:1;}\n            .holiday-name{display:block;font-size:.9rem;font-weight:500;color:var(--gray-800);margin-bottom:2px;}\n            .holiday-range{font-size:.78rem;color:var(--gray-400);}\n            @media(max-width:768px){.holiday-section{padding:30px 0 50px;}.holiday-title{font-size:1.4rem;}.holiday-item{padding:12px 14px;}}\n            @media(max-width:480px){.holiday-title{font-size:1.2rem;}}\n            </style>\n            @else\n            <section style=\"padding:80px 0;text-align:center;background:var(--gray-50);min-height:50vh;\"><div class=\"container\"><i class=\"fas fa-calendar-alt\" style=\"font-size:3rem;color:var(--gray-300);margin-bottom:20px;\"></i><h2 style=\"color:var(--gray-500);font-weight:500;font-size:1.2rem;\">Tiada Cuti Umum</h2><p style=\"color:var(--gray-400);margin:10px 0 30px;\">Tiada data cuti umum buat masa ini.</p><a href=\"/{{ $siteSlug }}\" style=\"display:inline-flex;align-items:center;gap:8px;padding:12px 24px;background:var(--primary);color:white;border-radius:10px;text-decoration:none;font-size:.85rem;\"><i class=\"fas fa-arrow-left\"></i> Kembali</a></div></section>\n            @endif\n            ",
            "type": "PHP",
            "category": "Content",
            "status": 1,
            "created_at": "2026-07-04 12:05:08",
            "updated_at": "2026-07-04 12:05:08"
        },
        {
            "id": 15,
            "name": "Slider Web",
            "code": "slider_web",
            "content": "@php\n            $slides = \\App\\Models\\Backend\\ContentSlider::with(['translations' => function($q) use ($lang) { $q->where('slider_translation_language', $lang); }])->published()->orderBy('slider_sort')->get();\n            $gradients = [\n                'linear-gradient(135deg, #0f172a 0%, #1c294c 50%, #c04849 100%)',\n                'linear-gradient(135deg, #1a0000 0%, #8f3536 50%, #c04849 100%)',\n                'linear-gradient(135deg, #0a1a00 0%, #0d9488 50%, #0369a1 100%)',\n            ];\n            @endphp\n            @if($slides->count())\n            <section class=\"hero-slider\" id=\"main-content\">\n                <div class=\"slides\">\n                    @foreach($slides as $i => $slide)\n                    @php $t = $slide->translations->first(); $g = $gradients[$i % count($gradients)]; @endphp\n                    <div class=\"slide {{ $i === 0 ? 'active' : '' }}\" data-index=\"{{ $i }}\"\n                        data-effect=\"{{ strtolower($slide->slider_transition ?: 'fade') }}\"\n                        data-dim=\"{{ strtolower($slide->slider_dimension ?: '2d') }}\">\n                        <div class=\"slide-bg\" style=\"background: {{ $t && $t->slider_translation_img ? 'url(' . image_url($t->slider_translation_img) . ') center/cover no-repeat' : $g }};\"></div>\n                        <div class=\"hero-shapes\">\n                            <div class=\"shape\"></div><div class=\"shape\"></div><div class=\"shape\"></div>\n                        </div>\n                        <div class=\"container\">\n                            <div class=\"slide-content\">\n                                @if($t)\n                                <h1>{!! nl2br(e($t->slider_translation_title)) !!}</h1>\n                                @endif\n                                <div class=\"hero-buttons\">\n                                    @php\n                                        $href = null;\n                                        if ($slide->slider_url_type === 'FILE' && $slide->slider_url_upload) {\n                                            $href = image_url($slide->slider_url_upload);\n                                        } elseif ($slide->slider_url && $slide->slider_url_type !== 'NONE') {\n                                            $href = $slide->slider_url;\n                                        }\n                                    @endphp\n                                    @if($href)\n                                    <a href=\"{{ $href }}\" class=\"hero-btn hero-btn-primary\"><i class=\"fas fa-arrow-right\"></i> Maklumat Lanjut</a>\n                                    @endif\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                    @endforeach\n                </div>\n                @if($slides->count() > 1)\n                <button class=\"slider-arrows prev\" onclick=\"slidePrev()\"><i class=\"fas fa-chevron-left\"></i></button>\n                <button class=\"slider-arrows next\" onclick=\"slideNext()\"><i class=\"fas fa-chevron-right\"></i></button>\n                <div class=\"slider-dots\">\n                    @foreach($slides as $i => $slide)\n                    <span class=\"dot {{ $i === 0 ? 'active' : '' }}\" onclick=\"showSlide({{ $i }})\"></span>\n                    @endforeach\n                </div>\n                @endif\n            </section>\n            <style>\n            .hero-slider { position: relative; overflow: hidden; }\n            .hero-slider .slides { position: relative; min-height: 460px; display: flex; }\n            .hero-slider .slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.6s ease; pointer-events: none; }\n            .hero-slider .slide.active { opacity: 1; position: relative; flex: 1; pointer-events: auto; }\n            .hero-slider .slide::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 50%, rgba(192,72,73,0.15) 0%, transparent 60%); z-index: 2; }\n            .hero-slider .slide::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 70% 80%, rgba(245,158,11,0.08) 0%, transparent 50%); z-index: 2; }\n            .hero-slider .slide .slide-bg { position: absolute; inset: 0; z-index: 1; }\n            .hero-slider .slide .hero-shapes { position: absolute; inset: 0; overflow: hidden; z-index: 1; }\n            .hero-shapes .shape { position: absolute; border-radius: 50%; background: rgba(255,255,255,0.03); }\n            .hero-shapes .shape:nth-child(1) { width: 400px; height: 400px; top: -100px; right: -80px; }\n            .hero-shapes .shape:nth-child(2) { width: 200px; height: 200px; bottom: 40px; left: 10%; }\n            .hero-shapes .shape:nth-child(3) { width: 120px; height: 120px; top: 30%; right: 25%; background: rgba(192,72,73,0.08); }\n            .hero-slider .container { position: relative; z-index: 3; height: 100%; display: flex; align-items: center; }\n            .hero-slider .slide-content { max-width: 650px; padding: 80px 0; }\n            .hero-slider .slide-content h1 { font-size: 2.6rem; font-weight: 800; color: var(--white); line-height: 1.15; margin: 0 0 12px; letter-spacing: -1px; }\n            .hero-slider .slide-content p { font-size: 1rem; color: rgba(255,255,255,0.7); line-height: 1.7; margin: 0 0 30px; max-width: 520px; }\n            .hero-buttons { display: flex; gap: 12px; flex-wrap: wrap; }\n            .hero-btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border-radius: 10px; font-size: 0.85rem; font-weight: 600; text-decoration: none; transition: all 0.3s; position: relative; overflow: hidden; }\n            .hero-btn-primary { background: var(--accent); color: var(--white); }\n            .hero-btn-primary::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent); opacity: 0; transition: opacity 0.3s; }\n            .hero-btn-primary:hover::before { opacity: 1; }\n            .hero-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(192,72,73,0.4); }\n            .hero-btn-secondary { background: rgba(255,255,255,0.1); color: var(--white); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.15); }\n            .hero-btn-secondary:hover { background: rgba(255,255,255,0.2); transform: translateY(-2px); }\n            .slider-arrows { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; background: rgba(255,255,255,0.1); border: none; color: white; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; backdrop-filter: blur(8px); transition: all 0.3s; font-size: 0.9rem; display: flex; align-items: center; justify-content: center; }\n            .slider-arrows:hover { background: rgba(255,255,255,0.25); transform: translateY(-50%) scale(1.08); }\n            .slider-arrows.prev { left: 20px; }\n            .slider-arrows.next { right: 20px; }\n            .slider-dots { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 5; display: flex; gap: 8px; }\n            .slider-dots .dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.3); cursor: pointer; transition: all 0.3s; }\n            .slider-dots .dot.active { background: var(--accent); width: 28px; border-radius: 5px; }\n\n            /* ===== Per-slide effects (2D) ===== */\n            .hero-slider .slide.active.fx-fade { animation: fx-fade 0.8s ease both; }\n            .hero-slider .slide.active.fx-slide { animation: fx-slide 0.8s ease both; }\n            .hero-slider .slide.active.fx-zoom { animation: fx-zoom 0.8s ease both; }\n            .hero-slider .slide.active.fx-static { animation: none; }\n            @keyframes fx-fade { from { opacity: 0; } to { opacity: 1; } }\n            @keyframes fx-slide { from { opacity: 0; transform: translateX(12%); } to { opacity: 1; transform: translateX(0); } }\n            @keyframes fx-zoom { from { opacity: 0; transform: scale(1.15); } to { opacity: 1; transform: scale(1); } }\n\n            /* ===== Per-slide effects (3D) ===== */\n            .hero-slider .slide.active.fx-cube { animation: fx-cube 0.9s ease both; transform-origin: left center; }\n            .hero-slider .slide.active.fx-tumble { animation: fx-tumble 0.9s ease both; }\n            .hero-slider .slide.active.fx-roll { animation: fx-roll 0.9s ease both; }\n            .hero-slider .slide.active.fx-twist { animation: fx-twist 0.9s ease both; }\n            .hero-slider .slide.active.fx-spin { animation: fx-spin 0.9s ease both; }\n            @keyframes fx-cube { from { opacity: 0; transform: perspective(1400px) rotateY(-90deg); } to { opacity: 1; transform: perspective(1400px) rotateY(0deg); } }\n            @keyframes fx-tumble { from { opacity: 0; transform: perspective(1400px) rotate3d(1, 1, 0, -90deg) scale(0.8); } to { opacity: 1; transform: perspective(1400px) rotate3d(1, 1, 0, 0deg) scale(1); } }\n            @keyframes fx-roll { from { opacity: 0; transform: translateX(-60%) rotate3d(0, 0, 1, -30deg); } to { opacity: 1; transform: translateX(0) rotate3d(0, 0, 1, 0deg); } }\n            @keyframes fx-twist { from { opacity: 0; transform: perspective(1400px) rotateY(-120deg) scale(0.8); } to { opacity: 1; transform: perspective(1400px) rotateY(0deg) scale(1); } }\n            @keyframes fx-spin { from { opacity: 0; transform: perspective(1400px) rotate3d(1, 1, 1, -180deg) scale(0.5); } to { opacity: 1; transform: perspective(1400px) rotate3d(1, 1, 1, 0deg) scale(1); } }\n\n            @media (max-width: 768px) {\n                .hero-slider .slides { min-height: 340px; }\n                .hero-slider .slide-content { padding: 50px 0; }\n                .hero-slider .slide-content h1 { font-size: 1.6rem; }\n                .hero-shapes { display: none; }\n                .slider-arrows { width: 36px; height: 36px; font-size: 0.75rem; }\n                .slider-arrows.prev { left: 10px; }\n                .slider-arrows.next { right: 10px; }\n                .hero-btn { padding: 10px 20px; font-size: 0.78rem; }\n            }\n            </style>\n            <script>\n            var totalSlides = {{ $slides->count() }};\n            var currentSlide = 0;\n            var slideInterval;\n            var fxClasses = [\"fx-fade\", \"fx-slide\", \"fx-zoom\", \"fx-static\", \"fx-cube\", \"fx-tumble\", \"fx-roll\", \"fx-twist\", \"fx-spin\"];\n            function showSlide(index) {\n                var slides = document.querySelectorAll(\".hero-slider .slide\");\n                var dots = document.querySelectorAll(\".slider-dots .dot\");\n                slides.forEach(function(s) {\n                    s.classList.remove(\"active\");\n                    fxClasses.forEach(function(c) { s.classList.remove(c); });\n                });\n                dots.forEach(function(d) { d.classList.remove(\"active\"); });\n                var slide = slides[index];\n                if (!slide) return;\n                var effect = (slide.getAttribute(\"data-effect\") || \"fade\").toLowerCase();\n                slide.classList.add(\"active\");\n                slide.classList.add(\"fx-\" + effect);\n                if (dots[index]) dots[index].classList.add(\"active\");\n                currentSlide = index;\n            }\n            function slideNext() { showSlide((currentSlide + 1) % totalSlides); resetInterval(); }\n            function slidePrev() { showSlide((currentSlide - 1 + totalSlides) % totalSlides); resetInterval(); }\n            function resetInterval() { clearInterval(slideInterval); slideInterval = setInterval(function() { slideNext(); }, 6000); }\n            showSlide(0);\n            if (totalSlides > 1) { slideInterval = setInterval(function() { slideNext(); }, 6000); }\n            </script>\n            @endif\n",
            "type": "PHP",
            "category": "Content",
            "status": 1,
            "created_at": "2026-07-04 12:05:08",
            "updated_at": "2026-09-21 23:26:18"
        },
        {
            "id": 16,
            "name": "Ticker Web",
            "code": "ticker_web",
            "content": "@php\n            $news = \\App\\Models\\Backend\\ContentArticle::with([\"translations\" => function($q) use ($lang) { $q->where(\"article_translation_language\", $lang); }])->where(\"article_category\", \"NEWS\")->published()->latest()->take(5)->get();\n            @endphp\n            <!-- ===== NEWS TICKER ===== -->\n                <div class=\"ticker-section\">\n                    <div class=\"container\">\n                        <div class=\"ticker-wrap\">\n                            <div class=\"ticker-label\"><i class=\"fas fa-bolt\"></i> TERKINI</div>\n                            <div class=\"ticker-content\">\n                                <p>@foreach($news as $item)@php $t = $item->translations->first(); @endphp@if($t){{$t->article_translation_title}} &bull; @endif @endforeach </p>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            \n                \n            <style>\n            .ticker-section {\n                background: var(--white);\n                border-bottom: 1px solid var(--gray-200);\n            }\n            .ticker-wrap {\n                display: flex; align-items: stretch;\n                border-radius: 0;\n                overflow: hidden;\n            }\n            .ticker-label {\n                background: var(--accent);\n                color: white;\n                font-weight: 700;\n                font-size: 0.75rem;\n                padding: 10px 20px;\n                display: flex; align-items: center;\n                gap: 8px;\n                text-transform: uppercase;\n                letter-spacing: 1px;\n                flex-shrink: 0;\n            }\n            .ticker-label i { font-size: 0.8rem; }\n            .ticker-content {\n                flex: 1;\n                padding: 10px 20px;\n                overflow: hidden;\n                display: flex;\n                align-items: center;\n                position: relative;\n            }\n            .ticker-content p {\n                font-size: 0.82rem;\n                color: var(--gray-500);\n                white-space: nowrap;\n                margin: 0;\n                display: inline-block;\n                flex-shrink: 0;\n                padding-left: 100%;\n                animation: tickerScroll 25s linear infinite;\n            }\n            .ticker-content:hover p {\n                animation-play-state: paused;\n            }\n            @keyframes tickerScroll {\n                0% { transform: translateX(0); }\n                100% { transform: translateX(-100%); }\n            }\n            </style>\n            ",
            "type": "PHP",
            "category": "Content",
            "status": 1,
            "created_at": "2026-07-04 12:05:08",
            "updated_at": "2026-09-21 17:56:02"
        },
        {
            "id": 17,
            "name": "Modules Showcase Web",
            "code": "modules_showcase_web",
            "content": "@php\n            $counts = [\n                'artikel' => \\App\\Models\\Backend\\ContentArticle::published()->count(),\n                'dokumen' => \\App\\Models\\Backend\\ContentDownload::published()->count(),\n                'galeri' => \\App\\Models\\Backend\\ContentPhotoGallery::count(),\n                'foto' => \\App\\Models\\Backend\\ContentPhotoList::count(),\n                'slider' => \\App\\Models\\Backend\\ContentSlider::published()->count(),\n                'imej' => \\App\\Models\\Backend\\ContentImage::count(),\n                'video' => \\App\\Models\\Backend\\ContentVideo::published()->count(),\n                'kalendar' => \\App\\Models\\Backend\\ContentCalendar::count(),\n                'cuti' => \\App\\Models\\Backend\\ContentPublicHoliday::count(),\n                'jabatan' => \\App\\Models\\Backend\\ContentDirectoryDepartment::count(),\n                'staf' => \\App\\Models\\Backend\\ContentDirectoryStaff::count(),\n            ];\n            @endphp\n            <section class=\"module-showcase\">\n                <div class=\"container\">\n                    <div class=\"section-title\">\n                        <h2><span>Modul</span> Sistem</h2>\n                        <p>Senarai modul yang tersedia dalam sistem pengurusan portal</p>\n                    </div>\n                    <div class=\"module-grid\">\n                        <a href=\"/{{ $siteSlug }}/news-web\" class=\"module-card\">\n                            <div class=\"mc-icon\"><i class=\"fas fa-newspaper\"></i></div>\n                            <div class=\"mc-text\">\n                                <h4>Artikel <span class=\"mc-count\">{{ $counts['artikel'] }}</span></h4>\n                                <p>Pengurusan artikel & berita</p>\n                            </div>\n                        </a>\n                        <a href=\"/{{ $siteSlug }}/download-web\" class=\"module-card\">\n                            <div class=\"mc-icon\"><i class=\"fas fa-file-download\"></i></div>\n                            <div class=\"mc-text\">\n                                <h4>Dokumen <span class=\"mc-count\">{{ $counts['dokumen'] }}</span></h4>\n                                <p>Dokumen muat turun</p>\n                            </div>\n                        </a>\n                        <a href=\"/{{ $siteSlug }}/gallery-web\" class=\"module-card\">\n                            <div class=\"mc-icon\"><i class=\"fas fa-images\"></i></div>\n                            <div class=\"mc-text\">\n                                <h4>Galeri Foto <span class=\"mc-count\">{{ $counts['galeri'] }}</span></h4>\n                                <p>Album galeri foto</p>\n                            </div>\n                        </a>\n                        <a href=\"/{{ $siteSlug }}/gallery-web\" class=\"module-card\">\n                            <div class=\"mc-icon\"><i class=\"fas fa-camera\"></i></div>\n                            <div class=\"mc-text\">\n                                <h4>Senarai Foto <span class=\"mc-count\">{{ $counts['foto'] }}</span></h4>\n                                <p>Foto dalam galeri</p>\n                            </div>\n                        </a>\n                        <a href=\"/{{ $siteSlug }}/slider-web\" class=\"module-card\">\n                            <div class=\"mc-icon\"><i class=\"fas fa-sliders-h\"></i></div>\n                            <div class=\"mc-text\">\n                                <h4>Imej Slider <span class=\"mc-count\">{{ $counts['slider'] }}</span></h4>\n                                <p>Pengurusan slider utama</p>\n                            </div>\n                        </a>\n                        <a href=\"/{{ $siteSlug }}/gallery-web\" class=\"module-card\">\n                            <div class=\"mc-icon\"><i class=\"fas fa-image\"></i></div>\n                            <div class=\"mc-text\">\n                                <h4>Imej <span class=\"mc-count\">{{ $counts['imej'] }}</span></h4>\n                                <p>Pengurusan aset imej</p>\n                            </div>\n                        </a>\n                        <a href=\"/{{ $siteSlug }}/video-web\" class=\"module-card\">\n                            <div class=\"mc-icon\"><i class=\"fas fa-video\"></i></div>\n                            <div class=\"mc-text\">\n                                <h4>Video <span class=\"mc-count\">{{ $counts['video'] }}</span></h4>\n                                <p>Pengurusan kandungan video</p>\n                            </div>\n                        </a>\n                        <a href=\"/{{ $siteSlug }}/calendar-web\" class=\"module-card\">\n                            <div class=\"mc-icon\"><i class=\"fas fa-calendar-alt\"></i></div>\n                            <div class=\"mc-text\">\n                                <h4>Kalendar <span class=\"mc-count\">{{ $counts['kalendar'] }}</span></h4>\n                                <p>Pengurusan acara kalendar</p>\n                            </div>\n                        </a>\n                        <a href=\"/{{ $siteSlug }}/holiday-web\" class=\"module-card\">\n                            <div class=\"mc-icon\"><i class=\"fas fa-umbrella-beach\"></i></div>\n                            <div class=\"mc-text\">\n                                <h4>Cuti Umum <span class=\"mc-count\">{{ $counts['cuti'] }}</span></h4>\n                                <p>Pengurusan cuti umum</p>\n                            </div>\n                        </a>\n                        <a href=\"/{{ $siteSlug }}/directory-web\" class=\"module-card\">\n                            <div class=\"mc-icon\"><i class=\"fas fa-building\"></i></div>\n                            <div class=\"mc-text\">\n                                <h4>Jabatan <span class=\"mc-count\">{{ $counts['jabatan'] }}</span></h4>\n                                <p>Direktori jabatan</p>\n                            </div>\n                        </a>\n                        <a href=\"/{{ $siteSlug }}/directory-web\" class=\"module-card\">\n                            <div class=\"mc-icon\"><i class=\"fas fa-users\"></i></div>\n                            <div class=\"mc-text\">\n                                <h4>Staf <span class=\"mc-count\">{{ $counts['staf'] }}</span></h4>\n                                <p>Direktori staf</p>\n                            </div>\n                        </a>\n                        <a href=\"/{{ $siteSlug }}/contact-us-web\" class=\"module-card\">\n                            <div class=\"mc-icon\"><i class=\"fas fa-comment-dots\"></i></div>\n                            <div class=\"mc-text\">\n                                <h4>Maklum Balas</h4>\n                                <p>Penghantaran maklum balas</p>\n                            </div>\n                        </a>\n                    </div>\n                </div>\n            </section>\n            <style>\n            .module-showcase { padding: 50px 0 60px; background: var(--gray-50); }\n            .module-showcase .section-title { margin-bottom: 32px; text-align: center; }\n            .module-showcase .section-title h2 { font-size: 1.7rem; font-weight: 800; color: var(--primary); margin: 0 0 6px; }\n            .module-showcase .section-title h2 span { color: var(--accent); }\n            .module-showcase .section-title p { color: var(--gray-500); font-size: 0.88rem; margin: 6px auto 0; max-width: 500px; text-align: center; }\n            .module-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }\n            .module-card { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 8px; background: var(--white); border-left: 3px solid var(--accent); box-shadow: 0 1px 3px rgba(0,0,0,0.04); text-decoration: none; transition: all 0.2s; }\n            .module-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-left-color: var(--primary); }\n            .module-card .mc-icon { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; background: var(--accent-light); color: var(--accent); border-radius: 8px; font-size: 0.95rem; flex-shrink: 0; }\n            .module-card .mc-text h4 { font-size: 0.78rem; font-weight: 600; color: var(--gray-800); margin: 0 0 2px; display: flex; align-items: center; gap: 6px; }\n            .module-card .mc-count { background: var(--accent); color: white; font-size: 0.62rem; padding: 2px 6px; border-radius: 999px; font-weight: 700; line-height: 1; }\n            .module-card .mc-text p { font-size: 0.63rem; color: var(--gray-400); line-height: 1.3; margin: 0; }\n            @media (max-width: 1024px) { .module-grid { grid-template-columns: repeat(2, 1fr); } }\n            @media (max-width: 480px) { .module-grid { grid-template-columns: 1fr 1fr; } }\n            </style>\n            ",
            "type": "PHP",
            "category": "Content",
            "status": 1,
            "created_at": "2026-07-04 12:05:08",
            "updated_at": "2026-09-21 18:35:39"
        },
        {
            "id": 18,
            "name": "Home Web",
            "code": "home_web",
            "content": "@php\n            $berita = \\App\\Models\\Backend\\ContentArticle::with(['translations' => function($q) use ($lang) { $q->where('article_translation_language', $lang); }])->where('article_category', 'NEWS')->published()->orderBy('article_date', 'desc')->orderBy('created_at', 'desc')->take(5)->get();\n            $downloads = \\App\\Models\\Backend\\ContentDownload::where('download_language', $lang)->published()->orderBy('download_date', 'desc')->take(4)->get();\n            $galleries = \\App\\Models\\Backend\\ContentPhotoGallery::with(['translations' => function($q) use ($lang) { $q->where('gallery_translation_language', $lang); }])->where('gallery_status', 'ACTIVE')->orderBy('gallery_date', 'desc')->take(4)->get();\n            $videos = \\App\\Models\\Backend\\ContentVideo::with(['translations' => function($q) use ($lang) { $q->where('video_translation_language', $lang); }])->published()->orderBy('video_date', 'desc')->take(3)->get();\n            $events = \\App\\Models\\Backend\\ContentCalendar::with(['translations' => function($q) use ($lang) { $q->where('calendar_translation_language', $lang); }])->where('calendar_status', 'ACTIVE')->where('calendar_date_start', '>=', now()->format('Y-m-d'))->orderBy('calendar_date_start')->take(4)->get();\n            @endphp\n            <style>\n            /* ===== NEWS TICKER ===== */\n            .ticker-section {\n                background: var(--white);\n                border-bottom: 1px solid var(--gray-200);\n            }\n            .ticker-wrap {\n                display: flex; align-items: stretch;\n                border-radius: 0;\n                overflow: hidden;\n            }\n            .ticker-label {\n                background: var(--accent);\n                color: white;\n                font-weight: 700;\n                font-size: 0.75rem;\n                padding: 10px 20px;\n                display: flex; align-items: center;\n                gap: 8px;\n                text-transform: uppercase;\n                letter-spacing: 1px;\n                flex-shrink: 0;\n            }\n            .ticker-label i { font-size: 0.8rem; }\n            .ticker-content {\n                flex: 1;\n                padding: 10px 20px;\n                overflow: hidden;\n                display: flex; align-items: center;\n            }\n            .ticker-content p {\n                font-size: 0.82rem;\n                color: var(--gray-500);\n                overflow: hidden;\n                white-space: nowrap;\n                text-overflow: ellipsis;\n            }\n            \n            /* ===== FEATURE CARDS ===== */\n            .feature-cards {\n                padding: 40px 0;\n                background: var(--gray-50);\n            }\n            .feature-cards .container {\n                display: grid;\n                grid-template-columns: repeat(3, 1fr);\n                gap: 20px;\n            }\n            .feature-card {\n                position: relative;\n                height: 190px;\n                border-radius: var(--radius-lg);\n                overflow: hidden;\n                box-shadow: var(--shadow-md);\n                cursor: pointer;\n                display: flex; align-items: flex-end;\n                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n            }\n            .feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-xl); }\n            .feature-card::before {\n                content: '';\n                position: absolute; inset: 0;\n                background: linear-gradient(0deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.1) 60%, transparent 100%);\n                z-index: 1;\n                transition: opacity 0.3s;\n            }\n            .feature-card:hover::before { opacity: 0.85; }\n            .feature-card .fc-content {\n                position: relative; z-index: 2;\n                padding: 24px;\n                color: white;\n                width: 100%;\n            }\n            .feature-card .fc-content h3 {\n                font-size: 1.2rem; font-weight: 700;\n                margin-bottom: 4px;\n                letter-spacing: -0.02em;\n            }\n            .feature-card .fc-content p {\n                font-size: 0.78rem; opacity: 0.8;\n                font-weight: 400;\n            }\n            .feature-card .fc-content .fc-icon {\n                font-size: 1.6rem;\n                margin-bottom: 8px;\n                opacity: 0.9;\n            }\n            \n            /* ===== SECTION ===== */\n            .section { padding: 56px 0; }\n            .section-alt { background: var(--gray-50); }\n            .section-title { text-align: center; margin-bottom: 40px; }\n            .section-title h2 {\n                font-size: 1.5rem; font-weight: 800;\n                color: var(--gray-800);\n                letter-spacing: -0.03em;\n            }\n            .section-title h2 span { color: var(--accent); }\n            .section-title .title-line {\n                width: 48px; height: 4px;\n                background: linear-gradient(90deg, var(--accent), var(--primary));\n                margin: 10px auto 0;\n                border-radius: 4px;\n            }\n            .section-title p {\n                color: var(--gray-400);\n                font-size: 0.88rem;\n                margin-top: 8px;\n                max-width: 500px;\n                margin-left: auto; margin-right: auto;\n            }\n            \n            /* ===== NEWS GRID ===== */\n            .news-grid {\n                display: grid;\n                grid-template-columns: 2fr 1fr;\n                gap: 24px;\n            }\n            .featured-news {\n                position: relative;\n                border-radius: var(--radius-lg);\n                overflow: hidden;\n                min-height: 380px;\n                display: flex; align-items: flex-end;\n                cursor: pointer;\n            }\n            .featured-news-bg {\n                position: absolute; inset: 0;\n                background: linear-gradient(135deg, #1c294c, #2a1a3a);\n                transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);\n            }\n            .featured-news:hover .featured-news-bg { transform: scale(1.06); }\n            .featured-news::after {\n                content: '';\n                position: absolute; inset: 0;\n                background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.05) 60%, transparent 100%);\n            }\n            .featured-news .fc-badge {\n                position: absolute;\n                top: 20px; left: 20px;\n                z-index: 3;\n                background: var(--accent);\n                color: white;\n                font-size: 0.65rem; font-weight: 700;\n                padding: 4px 14px;\n                border-radius: 100px;\n                text-transform: uppercase;\n                letter-spacing: 0.5px;\n            }\n            .featured-news-content {\n                position: relative; z-index: 2;\n                padding: 28px;\n                color: white;\n                width: 100%;\n            }\n            .featured-news-content h3 {\n                font-size: 1.3rem; font-weight: 700;\n                margin-bottom: 8px; line-height: 1.3;\n            }\n            .featured-news-content p {\n                font-size: 0.82rem;\n                color: rgba(255,255,255,0.65);\n                margin-bottom: 12px;\n            }\n            .featured-news-content .news-date {\n                font-size: 0.75rem;\n                color: rgba(255,255,255,0.45);\n                display: flex; align-items: center; gap: 6px;\n            }\n            .news-sidebar { display: flex; flex-direction: column; gap: 14px; }\n            .news-item {\n                display: flex; gap: 14px;\n                padding: 14px;\n                background: var(--white);\n                border-radius: var(--radius);\n                border: 1px solid var(--gray-100);\n                transition: all 0.25s;\n            }\n            .news-item:hover {\n                box-shadow: var(--shadow-md);\n                border-color: var(--gray-200);\n                transform: translateX(3px);\n            }\n            .news-item-thumb {\n                width: 64px; height: 64px;\n                border-radius: 8px; flex-shrink: 0;\n                background: var(--gray-100);\n                display: flex; align-items: center; justify-content: center;\n                color: var(--gray-300);\n            }\n            .news-item-text { flex: 1; min-width: 0; }\n            .news-item-text h4 {\n                font-size: 0.82rem; font-weight: 600;\n                color: var(--gray-800);\n                margin-bottom: 4px;\n                line-height: 1.35;\n                display: -webkit-box;\n                -webkit-line-clamp: 2;\n                -webkit-box-orient: vertical;\n                overflow: hidden;\n            }\n            .news-item-text .news-date-sm {\n                font-size: 0.7rem;\n                color: var(--gray-400);\n                display: flex; align-items: center; gap: 4px;\n            }\n            \n            /* ===== DOKUMEN POPULAR ===== */\n            .docs-section { padding: 56px 0; background: var(--white); }\n            .docs-section .section-title { text-align: center; margin-bottom: 36px; }\n            .docs-section .section-title h2 { font-size: 1.5rem; font-weight: 800; color: var(--gray-800); margin: 0 0 6px; }\n            .docs-section .section-title h2 span { color: var(--accent); }\n            .docs-section .section-title p { color: var(--gray-400); font-size: 0.88rem; margin: 0 auto; max-width: 500px; }\n            .docs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }\n            .doc-card { display: flex; align-items: center; gap: 12px; padding: 16px; background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); text-decoration: none; transition: all 0.2s; }\n            .doc-card:hover { background: var(--white); border-color: var(--accent); box-shadow: var(--shadow-md); transform: translateY(-2px); }\n            .doc-icon { width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--accent-light); color: var(--accent); border-radius: 10px; font-size: 1.1rem; }\n            .doc-text { min-width: 0; }\n            .doc-text h4 { font-size: 0.85rem; font-weight: 600; color: var(--gray-800); margin: 0 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n            .doc-text p { font-size: 0.7rem; color: var(--gray-400); margin: 0; }\n            \n            /* ===== GALERI TERPILIH ===== */\n            .gallery-section { padding: 56px 0; background: var(--gray-50); }\n            .gallery-section .section-title { text-align: center; margin-bottom: 36px; }\n            .gallery-section .section-title h2 { font-size: 1.5rem; font-weight: 800; color: var(--gray-800); margin: 0 0 6px; }\n            .gallery-section .section-title h2 span { color: var(--accent); }\n            .gallery-section .section-title p { color: var(--gray-400); font-size: 0.88rem; margin: 0 auto; max-width: 500px; }\n            .gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }\n            .gallery-card { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/3; text-decoration: none; display: block; box-shadow: var(--shadow-md); }\n            .gallery-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s; }\n            .gallery-card:hover img { transform: scale(1.08); }\n            .gallery-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, transparent 60%); }\n            .gallery-card-title { position: absolute; bottom: 0; left: 0; right: 0; padding: 16px; color: white; font-size: 0.85rem; font-weight: 600; z-index: 2; margin: 0; }\n            \n            /* ===== VIDEO TERKINI ===== */\n            .videos-section { padding: 56px 0; background: var(--white); }\n            .videos-section .section-title { text-align: center; margin-bottom: 36px; }\n            .videos-section .section-title h2 { font-size: 1.5rem; font-weight: 800; color: var(--gray-800); margin: 0 0 6px; }\n            .videos-section .section-title h2 span { color: var(--accent); }\n            .videos-section .section-title p { color: var(--gray-400); font-size: 0.88rem; margin: 0 auto; max-width: 500px; }\n            .videos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }\n            .video-card { display: block; border-radius: var(--radius-lg); overflow: hidden; background: var(--gray-50); border: 1px solid var(--gray-200); text-decoration: none; transition: all 0.2s; }\n            .video-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }\n            .video-thumb { position: relative; aspect-ratio: 16/9; overflow: hidden; }\n            .video-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }\n            .video-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.25); transition: background 0.2s; }\n            .video-card:hover .video-play { background: rgba(0,0,0,0.4); }\n            .video-play i { width: 46px; height: 46px; background: var(--accent); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; padding-left: 3px; }\n            .video-info { padding: 14px; }\n            .video-info h4 { font-size: 0.88rem; font-weight: 600; color: var(--gray-800); margin: 0 0 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }\n            .video-info span { font-size: 0.7rem; color: var(--gray-400); }\n            \n            /* ===== ACARA AKAN DATANG ===== */\n            .events-section { padding: 56px 0; background: linear-gradient(135deg, var(--primary) 0%, #1c294c 100%); color: white; position: relative; overflow: hidden; }\n            .events-section::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(ellipse at 30% 50%, rgba(255,255,255,0.06) 0%, transparent 50%), radial-gradient(ellipse at 70% 20%, rgba(192,72,73,0.1) 0%, transparent 50%); z-index: 0; }\n            .events-section .container { position: relative; z-index: 1; }\n            .events-section .section-title { text-align: center; margin-bottom: 36px; }\n            .events-section .section-title h2 { font-size: 1.5rem; font-weight: 800; color: var(--white); margin: 0 0 6px; }\n            .events-section .section-title h2 span { color: var(--gold); }\n            .events-section .section-title p { color: rgba(255,255,255,0.65); font-size: 0.88rem; margin: 0 auto; max-width: 500px; }\n            .events-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }\n            .event-card { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-lg); padding: 20px; text-decoration: none; color: white; transition: all 0.2s; }\n            .event-card:hover { background: rgba(255,255,255,0.14); transform: translateY(-2px); }\n            .event-date { display: flex; align-items: baseline; gap: 6px; margin-bottom: 10px; }\n            .event-date .day { font-size: 1.6rem; font-weight: 800; color: var(--gold); line-height: 1; }\n            .event-date .month { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.5px; color: rgba(255,255,255,0.65); }\n            .event-card h4 { font-size: 0.9rem; font-weight: 600; margin: 0 0 6px; line-height: 1.35; }\n            .event-card p { font-size: 0.75rem; color: rgba(255,255,255,0.7); margin: 0; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }\n            \n            /* ===== RESPONSIVE ===== */\n            @media (max-width: 1024px) {\n                .news-grid { grid-template-columns: 1fr; }\n                .feature-cards .container { grid-template-columns: repeat(2, 1fr); }\n                .module-grid { grid-template-columns: repeat(2, 1fr); }\n                .docs-grid { grid-template-columns: repeat(2, 1fr); }\n                .gallery-grid { grid-template-columns: repeat(2, 1fr); }\n                .videos-grid { grid-template-columns: repeat(2, 1fr); }\n                .events-grid { grid-template-columns: repeat(2, 1fr); }\n            }\n            @media (max-width: 768px) {\n                .ticker-label { padding: 10px 14px; font-size: 0.68rem; }\n                .ticker-label i { display: none; }\n                .feature-cards .container { grid-template-columns: 1fr; }\n                .module-grid { grid-template-columns: 1fr 1fr; }\n                .feature-card { height: 150px; }\n                .docs-grid { grid-template-columns: 1fr; }\n                .gallery-grid { grid-template-columns: 1fr; }\n                .videos-grid { grid-template-columns: 1fr; }\n                .events-grid { grid-template-columns: 1fr; }\n            }\n            </style>\n                <!-- ===== FEATURE CARDS ===== -->\n                <section class=\"feature-cards\">\n                    <div class=\"container\">\n                        <a href=\"#\" class=\"feature-card\" style=\"background: linear-gradient(135deg, #1c294c, #2a3d6b);\">\n                            <div class=\"fc-content\">\n                                <div class=\"fc-icon\"><i class=\"fas fa-newspaper\"></i></div>\n                                <h3>TERKINI</h3>\n                                <p>Berita dan Pengumuman</p>\n                            </div>\n                        </a>\n                        <a href=\"#\" class=\"feature-card\" style=\"background: linear-gradient(135deg, #0d9488, #0369a1);\">\n                            <div class=\"fc-content\">\n                                <div class=\"fc-icon\"><i class=\"fas fa-globe\"></i></div>\n                                <h3>Perkhidmatan</h3>\n                                <p>Pelbagai Perkhidmatan Dalam Talian</p>\n                            </div>\n                        </a>\n                        <a href=\"#\" class=\"feature-card\" style=\"background: linear-gradient(135deg, #c04849, #8f3536);\">\n                            <div class=\"fc-content\">\n                                <div class=\"fc-icon\"><i class=\"fas fa-headset\"></i></div>\n                                <h3>Hubungi Kami</h3>\n                                <p>Maklumat Perhubungan dan Lokasi</p>\n                            </div>\n                        </a>\n                    </div>\n                </section>\n            \n                <!-- ===== NEWS SECTION ===== -->\n                <section class=\"section section-alt\">\n                    <div class=\"container\">\n                        <div class=\"section-title\">\n                            <h2><span>Berita</span> Terkini</h2>\n                            <div class=\"title-line\"></div>\n                            <p>Ikuti perkembangan terkini dari agensi kami</p>\n                        </div>\n                        @if($berita->count())\n                        <div class=\"news-grid\">\n                            @php $featured = $berita->first(); $f = $featured->translations->first(); @endphp\n                            @if($f)\n                            <a href=\"/{{ $siteSlug }}/article-web?id={{ $featured->article_code }}\" class=\"featured-news\">\n                                <div class=\"featured-news-bg\" @if($featured->article_image) style=\"background-image:url('{{ image_url($featured->article_image) }}');background-size:cover;background-position:center;\" @endif></div>\n                                <span class=\"fc-badge\">Pengumuman</span>\n                                <div class=\"featured-news-content\">\n                                    <h3>{{ $f->article_translation_title }}</h3>\n                                    <p>{{ strip_tags(Str::limit($f->article_translation_content, 160)) }}</p>\n                                    <span class=\"news-date\"><i class=\"far fa-calendar-alt\"></i> {{ \\Carbon\\Carbon::parse($featured->article_date)->format('d M Y') }}</span>\n                                </div>\n                            </a>\n                            @endif\n                            <div class=\"news-sidebar\">\n                                @foreach($berita->skip(1) as $item)\n                                @php $t = $item->translations->first(); @endphp\n                                @if($t)\n                                <a href=\"/{{ $siteSlug }}/article-web?id={{ $item->article_code }}\" class=\"news-item\">\n                                    <div class=\"news-item-thumb\">\n                                        @if($item->article_image)\n                                        <img src=\"{{ image_url($item->article_image) }}\" alt=\"{{ $t->article_translation_title }}\" style=\"width:100%;height:100%;object-fit:cover;display:block;border-radius:8px;\">\n                                        @else\n                                        <i class=\"far fa-image fa-lg\"></i>\n                                        @endif\n                                    </div>\n                                    <div class=\"news-item-text\">\n                                        <h4>{{ $t->article_translation_title }}</h4>\n                                        <span class=\"news-date-sm\"><i class=\"far fa-calendar-alt\"></i> {{ \\Carbon\\Carbon::parse($item->article_date)->format('d M Y') }}</span>\n                                    </div>\n                                </a>\n                                @endif\n                                @endforeach\n                            </div>\n                        </div>\n                        @else\n                        <div style=\"text-align:center;padding:40px 0;color:var(--gray-400);\">\n                            <p>Tiada berita buat masa ini.</p>\n                        </div>\n                        @endif\n                    </div>\n                </section>\n            \n                <!-- ===== DOKUMEN POPULAR ===== -->\n                <section class=\"docs-section\">\n                    <div class=\"container\">\n                        <div class=\"section-title\">\n                            <h2><span>Dokumen</span> Popular</h2>\n                            <div class=\"title-line\"></div>\n                            <p>Muat turun dokumen dan borang yang sering digunakan</p>\n                        </div>\n                        @if($downloads->count())\n                        <div class=\"docs-grid\">\n                            @foreach($downloads as $doc)\n                            <a href=\"{{ image_url($doc->download_file) }}\" target=\"_blank\" class=\"doc-card\">\n                                <div class=\"doc-icon\"><i class=\"fas fa-file-pdf\"></i></div>\n                                <div class=\"doc-text\">\n                                    <h4>{{ $doc->download_title }}</h4>\n                                    <p>{{ \\Carbon\\Carbon::parse($doc->download_date)->format('d M Y') }}</p>\n                                </div>\n                            </a>\n                            @endforeach\n                        </div>\n                        @else\n                        <div style=\"text-align:center;color:var(--gray-400);padding:20px 0;\"><p>Tiada dokumen buat masa ini.</p></div>\n                        @endif\n                    </div>\n                </section>\n            \n                <!-- ===== GALERI TERPILIH ===== -->\n                <section class=\"gallery-section\">\n                    <div class=\"container\">\n                        <div class=\"section-title\">\n                            <h2><span>Galeri</span> Terpilih</h2>\n                            <div class=\"title-line\"></div>\n                            <p>Liputan gambar aktiviti dan program terkini</p>\n                        </div>\n                        @if($galleries->count())\n                        <div class=\"gallery-grid\">\n                            @foreach($galleries as $gallery)\n                            @php $gt = $gallery->translations->first(); @endphp\n                            @if($gt)\n                            <a href=\"/{{ $siteSlug }}/gallery-web\" class=\"gallery-card\">\n                                @if($gallery->gallery_thumbnail)\n                                <img src=\"{{ image_url($gallery->gallery_thumbnail) }}\" alt=\"{{ $gt->gallery_translation_title }}\">\n                                @else\n                                <div style=\"width:100%;height:100%;background:var(--gray-200);display:flex;align-items:center;justify-content:center;color:var(--gray-400);\"><i class=\"far fa-image fa-2x\"></i></div>\n                                @endif\n                                <h4 class=\"gallery-card-title\">{{ $gt->gallery_translation_title }}</h4>\n                            </a>\n                            @endif\n                            @endforeach\n                        </div>\n                        @else\n                        <div style=\"text-align:center;color:var(--gray-400);padding:20px 0;\"><p>Tiada galeri buat masa ini.</p></div>\n                        @endif\n                    </div>\n                </section>\n            \n                <!-- ===== VIDEO TERKINI ===== -->\n                <section class=\"videos-section\">\n                    <div class=\"container\">\n                        <div class=\"section-title\">\n                            <h2><span>Video</span> Terkini</h2>\n                            <div class=\"title-line\"></div>\n                            <p>Tonton video dan siaran langsung terkini</p>\n                        </div>\n                        @if($videos->count())\n                        <div class=\"videos-grid\">\n                            @foreach($videos as $video)\n                            @php $vt = $video->translations->first(); @endphp\n                            @if($vt)\n                            <a href=\"{{ $video->video_url ?? $video->video_external ?? '#' }}\" target=\"_blank\" class=\"video-card\">\n                                <div class=\"video-thumb\">\n                                    @if($video->video_img)\n                                    <img src=\"{{ image_url($video->video_img) }}\" alt=\"{{ $vt->video_translation_title }}\">\n                                    @else\n                                    <div style=\"width:100%;height:100%;background:var(--gray-200);display:flex;align-items:center;justify-content:center;color:var(--gray-400);\"><i class=\"far fa-image fa-2x\"></i></div>\n                                    @endif\n                                    <div class=\"video-play\"><i class=\"fas fa-play\"></i></div>\n                                </div>\n                                <div class=\"video-info\">\n                                    <h4>{{ $vt->video_translation_title }}</h4>\n                                    <span>{{ \\Carbon\\Carbon::parse($video->video_date)->format('d M Y') }}</span>\n                                </div>\n                            </a>\n                            @endif\n                            @endforeach\n                        </div>\n                        @else\n                        <div style=\"text-align:center;color:var(--gray-400);padding:20px 0;\"><p>Tiada video buat masa ini.</p></div>\n                        @endif\n                    </div>\n                </section>\n            \n                <!-- ===== ACARA AKAN DATANG ===== -->\n                <section class=\"events-section\">\n                    <div class=\"container\">\n                        <div class=\"section-title\">\n                            <h2><span>Acara</span> Akan Datang</h2>\n                            <div class=\"title-line\"></div>\n                            <p>Jangan ketinggalan program dan aktiviti akan datang</p>\n                        </div>\n                        @if($events->count())\n                        <div class=\"events-grid\">\n                            @foreach($events as $event)\n                            @php $et = $event->translations->first(); @endphp\n                            @if($et)\n                            <a href=\"/{{ $siteSlug }}/calendar-web\" class=\"event-card\">\n                                <div class=\"event-date\">\n                                    <span class=\"day\">{{ \\Carbon\\Carbon::parse($event->calendar_date_start)->format('d') }}</span>\n                                    <span class=\"month\">{{ \\Carbon\\Carbon::parse($event->calendar_date_start)->format('M Y') }}</span>\n                                </div>\n                                <h4>{{ $et->calendar_translation_title }}</h4>\n                                @if($et->calendar_translation_content)\n                                <p>{{ strip_tags(Str::limit($et->calendar_translation_content, 80)) }}</p>\n                                @endif\n                            </a>\n                            @endif\n                            @endforeach\n                        </div>\n                        @else\n                        <div style=\"text-align:center;color:rgba(255,255,255,0.5);padding:20px 0;\"><p>Tiada acara akan datang.</p></div>\n                        @endif\n                    </div>\n                </section>\n            \n                \n            \n            \n            <style>\n            .back-to-top {\n                position: fixed; bottom: 30px; right: 30px;\n                z-index: 999;\n                width: 44px; height: 44px;\n                border-radius: 50%;\n                background: var(--accent);\n                color: white;\n                border: none;\n                cursor: pointer;\n                display: flex; align-items: center; justify-content: center;\n                font-size: 1.1rem;\n                box-shadow: 0 4px 16px rgba(192,72,73,0.35);\n                opacity: 0; visibility: hidden;\n                transform: translateY(10px);\n                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n            }\n            .back-to-top.visible {\n                opacity: 1; visibility: visible;\n                transform: translateY(0);\n            }\n            .back-to-top:hover {\n                transform: translateY(-3px);\n                box-shadow: 0 8px 24px rgba(192,72,73,0.5);\n            }\n            </style>\n            <button class=\"back-to-top\" id=\"backToTop\" onclick=\"window.scrollTo({top:0,behavior:'smooth'})\" aria-label=\"Kembali ke atas\">\n                <i class=\"fas fa-arrow-up\"></i>\n            </button>\n            <script>\n            document.addEventListener('scroll', function() {\n                document.getElementById('backToTop').classList.toggle('visible', window.scrollY > 400);\n            });\n            </script>\n            ",
            "type": "PHP",
            "category": "Content",
            "status": 1,
            "created_at": "2026-07-04 12:05:08",
            "updated_at": "2026-09-21 18:35:39"
        },
        {
            "id": 27,
            "name": "Form NRES",
            "code": "form_nres",
            "content": "{{-- ============================================================\r\n     COMPONENT: Form Web — modul content-form (Complaints & Feedback)\r\n     Borang diresolusi dari SLUG PAGE (fallback: ?form=slug).\r\n     Setiap borang ada page sendiri (slug = form_slug).\r\n     Partial: resources/views/frontend/form/*.blade.php\r\n     Route  : POST {site}/aduan/{formSlug} · POST {site}/aduan/tiket\r\n     ============================================================ --}}\r\n\r\n@once\r\n<style>\r\n.cf-narrow{max-width:900px;margin-left:auto;margin-right:auto}\r\n</style>\r\n@endonce\r\n\r\n@php\r\n    $cfSite = $siteSlug ?? request()->segment(1);\r\n    $cfService = app(\\App\\Services\\ContentFormService::class);\r\n    $cfQuery = request()->query();\r\n    $cfPageSlug = (string) (request()->route('slug') ?? '');\r\n    $cfFormSlug = (string) ($cfQuery['form'] ?? '');\r\n    $cfSubmission = null;\r\n    $cfTracked = null;\r\n    $cfForm = null;\r\n\r\n    if (! empty($cfQuery['selesai']) && session('form_submission_id')) {\r\n        $cfSubmission = \\App\\Models\\Backend\\ContentFormSubmission::with('form')->find(session('form_submission_id'));\r\n    }\r\n\r\n    if (! empty($cfQuery['tiket']) && session('tracked_submission_id')) {\r\n        $cfTracked = \\App\\Models\\Backend\\ContentFormSubmission::with(['messages', 'answers'])\r\n            ->find(session('tracked_submission_id'));\r\n    }\r\n\r\n    // Page slug = form slug (setiap borang ada page sendiri)\r\n    $cfFormSlug = $cfFormSlug !== '' ? $cfFormSlug : $cfPageSlug;\r\n\r\n    if ($cfFormSlug !== '') {\r\n        $cfForm = $cfService->findOpenForm($cfFormSlug);\r\n    }\r\n@endphp\r\n\r\n<section class=\"py-4 py-lg-5\">\r\n    <div class=\"container-xl\">\r\n\r\n        @if ($cfForm)\r\n            <div class=\"cf-narrow mb-3\">\r\n                <a href=\"{{ url($cfSite.'/'.App\\Services\\ContentFormService::PAGE_SLUG) }}\" class=\"text-teal small fw-semibold text-decoration-none\">\r\n                    &larr; Kembali ke senarai borang\r\n                </a>\r\n            </div>\r\n        @endif\r\n\r\n        @if ($cfSubmission)\r\n            @include('frontend.form._success', ['submission' => $cfSubmission, 'siteSlug' => $cfSite])\r\n        @elseif (! empty($cfQuery['tiket']))\r\n            @include('frontend.form._track', ['tracked' => $cfTracked, 'ticketNo' => old('ticket_no'), 'siteSlug' => $cfSite])\r\n        @elseif ($cfForm && filled($cfForm->form_external_url))\r\n            @include('frontend.form._list', ['forms' => collect([$cfForm]), 'siteSlug' => $cfSite])\r\n        @elseif ($cfForm)\r\n            @include('frontend.form._form', ['form' => $cfForm, 'siteSlug' => $cfSite])\r\n        @else\r\n            <h1 class=\"h4 fw-bold mb-1\" style=\"color:var(--green)\">Aduan dan Maklum Balas</h1>\r\n            <p class=\"small text-body-secondary mb-4\">\r\n                Sila pilih borang di bawah. Untuk aduan awam, gunakan sistem SISPAA.\r\n            </p>\r\n            @include('frontend.form._list', ['forms' => $cfService->openForms(), 'siteSlug' => $cfSite])\r\n        @endif\r\n\r\n    </div>\r\n</section>",
            "type": "PHP",
            "category": "Content",
            "status": 1,
            "created_at": "2026-10-23 22:40:57",
            "updated_at": "2026-10-23 23:48:34"
        }
    ],
    "pivot": []
}