{"id":7289,"date":"2025-09-18T10:59:11","date_gmt":"2025-09-18T03:59:11","guid":{"rendered":"https:\/\/labamu.co.id\/success-stories\/"},"modified":"2025-11-20T16:27:49","modified_gmt":"2025-11-20T09:27:49","slug":"success-stories","status":"publish","type":"page","link":"https:\/\/labamu.co.id\/en\/success-stories\/","title":{"rendered":"Success Stories"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"7289\" class=\"elementor elementor-7289 elementor-529\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5805ae0 e-flex e-con-boxed e-con e-parent\" data-id=\"5805ae0\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5bffb12 elementor-widget elementor-widget-shortcode\" data-id=\"5bffb12\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">    <div id=\"landing-stories-app\"><\/div>\n    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-bcdb167 e-flex e-con-boxed e-con e-parent\" data-id=\"bcdb167\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-789803f elementor-widget elementor-widget-html\" data-id=\"789803f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\/* Wrapper *\/\n    .post-grid-wrapper {\n      max-width: 1200px;\n      margin: 0 auto;\n      padding: 20px;\n      font-family: sans-serif;\n    }\n    \n    \/* Dropdown + search *\/\n    .post-filter {\n     margin-bottom: 20px;\n     display: flex;\n     justify-content: space-between; \/* kiri - kanan *\/\n     align-items: center;\n     flex-wrap: wrap; \/* biar turun ke bawah di layar kecil *\/\n     gap: 20px;\n    }\n\n    .filter-left,\n    .filter-right {\n     display: inline-flex;\n     align-items: center;\n     gap: 8px;\n    }\n\n    .post-filter label {\n     font-size: 0.95rem;\n     margin: 0;\n     color: #333;\n     white-space: nowrap;\n    }\n\n    .post-filter select,\n    .search-wrapper input {\n     padding: 8px 12px;\n     border-radius: 6px;\n     border: 1px solid #ccc;\n     font-size: 1rem;\n    }\n\n    .search-wrapper {\n     position: relative;\n     display: inline-flex;\n     align-items: center;\n    }\n    .search-wrapper input {\n     padding-right: 30px;\n    }\n    .search-wrapper .search-icon {\n     position: absolute;\n     right: 8px;\n     top: 50%;\n     transform: translateY(-50%);\n     color: #666;\n     font-size: 0.9rem;\n    }\n    \n    \/* Grid layout *\/\n.post-grid {\n  --gap: 20px;\n  display: grid;\n  gap: var(--gap);\n  grid-template-columns: repeat(1, 1fr);\n}\n@media (min-width: 600px) {\n  .post-grid { grid-template-columns: repeat(2, 1fr); }\n}\n@media (min-width: 960px) {\n  .post-grid { grid-template-columns: repeat(3, 1fr); }\n}\n@media (min-width: 1280px) { \/* tambahan buat 4 kolom *\/\n  .post-grid { grid-template-columns: repeat(4, 1fr); }\n}\n    \n    \/* Card style *\/\n    .post-card {\n      background: #fff;\n      border-radius: 12px;\n      overflow: hidden;\n      box-shadow: 0 4px 15px rgba(0,0,0,0.1);\n      display: flex;\n      flex-direction: column;\n      transition: transform 0.2s ease, box-shadow 0.2s ease;\n    }\n    .post-card:hover {\n      transform: translateY(-4px);\n      box-shadow: 0 6px 20px rgba(0,0,0,0.15);\n    }\n    .post-card img {\n      width: 100%;\n      aspect-ratio: 1\/1;\n      object-fit: cover;\n      display: block;\n    }\n    .post-card .card-body {\n      padding: 18px;\n      text-align: center;\n      flex: 1;\n      display: flex;\n      flex-direction: column;\n      gap: 5px;\n    }\n    .title-section{\n        font-size: 2rem;\n        font-weight: 800;\n        color: #111;\n    }\n    .post-card h3 {\n        margin: 0;\n        font-size: 1.2rem;\n        font-weight: 800;\n        color: #111;\n\n        display: -webkit-box;\n        -webkit-line-clamp: 2;   \/* maksimal 2 baris *\/\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n        text-overflow: ellipsis;\n    }\n    .post-card .excerpt {\n      font-size: 0.95rem;\n      color: #444;\n      flex-grow: 1;\n    }\n\n    \/* Read More & Download *\/\n    .post-card .readmore {\n      display: flex;\n      justify-content: center;\n      gap: 10px;\n    }\n    .post-card .readmore a {\n      display: inline-block;\n      padding: 10px 20px;\n      border: 1px solid #ccc;\n      border-radius: 6px;\n      text-decoration: none;\n      font-size: 0.9rem;\n      transition: background 0.2s, color 0.2s, border-color 0.2s;\n    }\n    .post-card .readmore a:first-child {\n      background: #fff;\n      color: #111;\n    }\n    .post-card .readmore a:first-child:hover {\n      background: #006bff;\n      color: #fff;\n      border-color: #006bff;\n    }\n    .post-card .readmore .btn-download {\n      background: #006bff;\n      color: #fff;\n      border-color: #006bff;\n    }\n    \n    .loading, .error {\n      text-align: center;\n      padding: 20px;\n      color: #666;\n    }\n<\/style><div class=\"post-grid-wrapper\" style=\"margin-top: 50px; text-align: center;\"><!-- Grid --><div id=\"postGrid\"><div class=\"loading\">Loading posts...<\/div><\/div><\/div><script>(function(){\n      const gridContainer = document.getElementById(\"postGrid\");\n      const filterSelect = document.getElementById(\"categoryFilter\");\n      const searchBox = document.getElementById(\"searchBox\");\n    \n      const baseUrl = \"\/wp-json\/wp\/v2\";\n      const postsPerPage = 4;\n    \n      \/\/ helper: strip HTML\n      function stripHtml(html){\n        const tmp = document.createElement(\"div\");\n        tmp.innerHTML = html;\n        return tmp.textContent || tmp.innerText || \"\";\n      }\n      function truncate(str, n){\n        return str.length > n ? str.slice(0, n).trim() + \"\u2026\" : str;\n      }\n    \n      \/\/ Fetch categories for dropdown\n      function loadCategories(){\n        fetch(`${baseUrl}\/categories?parent=41&per_page=50`)\n          .then(res => res.json())\n          .then(cats => {\n            cats.forEach(cat => {\n              if (cat.count === 0) return;\n              const opt = document.createElement(\"option\");\n              opt.value = cat.id;\n              opt.textContent = cat.name;\n              filterSelect.appendChild(opt);\n            });\n          });\n      }\n    \n      async function loadPosts(searchTerm = \"\") {\n  gridContainer.innerHTML = '<div class=\"loading\">Loading posts...<\/div>';\n\n  let url = `${baseUrl}\/posts?per_page=${postsPerPage}&categories=41&_embed`;\n\n  \/\/ filter by search\n  if (searchTerm) {\n    url += `&search=${encodeURIComponent(searchTerm)}`;\n  }\n\n  try {\n    const res = await fetch(url);\n    if (!res.ok) throw new Error(\"Gagal ambil data post\");\n    const posts = await res.json();\n\n    if (posts.length === 0) {\n      gridContainer.innerHTML = '<div class=\"error\">Tidak ada postingan.<\/div>';\n      return;\n    }\n\n    const grid = document.createElement(\"div\");\n    grid.className = \"post-grid\";\n\n    posts.forEach(post => {\n        let thumb = \"\";\n        try {\n            const fm = post._embedded?.[\"wp:featuredmedia\"]?.[0];\n            thumb = fm?.source_url \n                || post.rttpg_featured_image_url?.medium?.[0] \n                || post.rttpg_featured_image_url?.full?.[0] \n                || \"\";\n        } catch (e) {\n            thumb = post.rttpg_featured_image_url?.full?.[0] || \"\";\n        }\n\n      let excerpt = stripHtml(post.excerpt?.rendered || post.content?.rendered || \"\");\n      excerpt = truncate(excerpt, 140);\n\n      const card = document.createElement(\"div\");\n      card.className = \"post-card\";\n      card.innerHTML = `\n        ${thumb ? `<img decoding=\"async\" src=\"${thumb}\" alt=\"${post.title.rendered}\">` : \"\"}\n        <div class=\"card-body\"><h3><a href=\"${post.link}\" style=\"text-decoration:none; color:inherit;\">${post.title.rendered}\n            <\/a><\/h3><\/div>`;\n      grid.appendChild(card);\n    });\n\n    gridContainer.innerHTML = \"\";\n    gridContainer.appendChild(grid);\n  } catch (err) {\n    gridContainer.innerHTML = `<div class=\"error\">Error: ${err.message}<\/div>`;\n  }\n}\n    \n      \/\/ Init\n    \/\/   loadCategories();\n      loadPosts();\n    \n      \/\/ Event: filter change\n      filterSelect.addEventListener(\"change\", () => {\n        loadPosts(filterSelect.value, searchBox.value.trim());\n      });\n    \n      \/\/ Event: search\n      let typingTimer;\n      searchBox.addEventListener(\"input\", () => {\n        clearTimeout(typingTimer);\n        typingTimer = setTimeout(() => {\n          loadPosts(filterSelect.value, searchBox.value.trim());\n        }, 500); \/\/ delay biar ga terlalu sering fetch\n      });\n    })();\n    <\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Loading posts&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"content-type":"","om_disable_all_campaigns":false,"footnotes":""},"class_list":["post-7289","page","type-page","status-publish","hentry"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/labamu.co.id\/en\/wp-json\/wp\/v2\/pages\/7289","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/labamu.co.id\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/labamu.co.id\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/labamu.co.id\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/labamu.co.id\/en\/wp-json\/wp\/v2\/comments?post=7289"}],"version-history":[{"count":1,"href":"https:\/\/labamu.co.id\/en\/wp-json\/wp\/v2\/pages\/7289\/revisions"}],"predecessor-version":[{"id":7290,"href":"https:\/\/labamu.co.id\/en\/wp-json\/wp\/v2\/pages\/7289\/revisions\/7290"}],"wp:attachment":[{"href":"https:\/\/labamu.co.id\/en\/wp-json\/wp\/v2\/media?parent=7289"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}