{"id":3441,"date":"2023-07-11T13:29:16","date_gmt":"2023-07-11T06:29:16","guid":{"rendered":"https:\/\/arwanacitra.com\/?page_id=3441"},"modified":"2023-07-16T18:22:25","modified_gmt":"2023-07-16T11:22:25","slug":"products-arwana","status":"publish","type":"page","link":"https:\/\/arwanacitra.com\/id\/products-arwana\/","title":{"rendered":""},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"3441\" class=\"elementor elementor-3441\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-4e4a653 elementor-section-full_width elementor-section-stretched elementor-section-height-default elementor-section-height-default\" data-id=\"4e4a653\" data-element_type=\"section\" data-settings=\"{&quot;stretch_section&quot;:&quot;section-stretched&quot;,&quot;jet_parallax_layout_list&quot;:[]}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-b213c78\" data-id=\"b213c78\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-80d01e2 elementor-widget elementor-widget-image\" data-id=\"80d01e2\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"1920\" height=\"800\" src=\"https:\/\/arwanacitra.com\/wp-content\/uploads\/5our-brand-arwana\/img-bg.png\" class=\"attachment-full size-full wp-image-365\" alt=\"\" srcset=\"https:\/\/arwanacitra.com\/wp-content\/uploads\/5our-brand-arwana\/img-bg.png 1920w, https:\/\/arwanacitra.com\/wp-content\/uploads\/5our-brand-arwana\/img-bg-300x125.png 300w, https:\/\/arwanacitra.com\/wp-content\/uploads\/5our-brand-arwana\/img-bg-1024x427.png 1024w, https:\/\/arwanacitra.com\/wp-content\/uploads\/5our-brand-arwana\/img-bg-768x320.png 768w, https:\/\/arwanacitra.com\/wp-content\/uploads\/5our-brand-arwana\/img-bg-1536x640.png 1536w, https:\/\/arwanacitra.com\/wp-content\/uploads\/5our-brand-arwana\/img-bg-150x63.png 150w, https:\/\/arwanacitra.com\/wp-content\/uploads\/5our-brand-arwana\/img-bg-696x290.png 696w, https:\/\/arwanacitra.com\/wp-content\/uploads\/5our-brand-arwana\/img-bg-1068x445.png 1068w, https:\/\/arwanacitra.com\/wp-content\/uploads\/5our-brand-arwana\/img-bg-600x250.png 600w\" sizes=\"(max-width: 1920px) 100vw, 1920px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a9d2263 elementor-widget__width-auto elementor-absolute elementor-widget elementor-widget-image\" data-id=\"a9d2263\" data-element_type=\"widget\" data-settings=\"{&quot;_position&quot;:&quot;absolute&quot;}\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"380\" height=\"380\" src=\"https:\/\/arwanacitra.com\/wp-content\/uploads\/5our-brand-arwana\/arwana-logo-B.png\" class=\"attachment-full size-full wp-image-346\" alt=\"\" srcset=\"https:\/\/arwanacitra.com\/wp-content\/uploads\/5our-brand-arwana\/arwana-logo-B.png 380w, https:\/\/arwanacitra.com\/wp-content\/uploads\/5our-brand-arwana\/arwana-logo-B-300x300.png 300w, https:\/\/arwanacitra.com\/wp-content\/uploads\/5our-brand-arwana\/arwana-logo-B-150x150.png 150w, https:\/\/arwanacitra.com\/wp-content\/uploads\/5our-brand-arwana\/arwana-logo-B-100x100.png 100w\" sizes=\"(max-width: 380px) 100vw, 380px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dc391c3 elementor-absolute elementor-widget elementor-widget-heading\" data-id=\"dc391c3\" data-element_type=\"widget\" data-settings=\"{&quot;_position&quot;:&quot;absolute&quot;}\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Arwana Tiles<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-55da8f2 elementor-absolute elementor-widget elementor-widget-heading\" data-id=\"55da8f2\" data-element_type=\"widget\" data-settings=\"{&quot;_position&quot;:&quot;absolute&quot;}\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h6 class=\"elementor-heading-title elementor-size-default\">Arwana floor and wall tiles are our original product line which are aimed at cost-conscious customers. It is specifically formulated to offer, first and foremost, functionality and quality at a very affordable price range. Other features of Arwana tiles include simplicity in design, and flexibility of design applications for your living spaces.<\/h6>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-8f31b53 elementor-section-full_width elementor-section-stretched elementor-section-height-default elementor-section-height-default\" data-id=\"8f31b53\" data-element_type=\"section\" data-settings=\"{&quot;stretch_section&quot;:&quot;section-stretched&quot;,&quot;jet_parallax_layout_list&quot;:[]}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-24718b3\" data-id=\"24718b3\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-1a02e84 elementor-widget elementor-widget-html\" data-id=\"1a02e84\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t    <script type=\"text\/javascript\" src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n    <form id=\"filters\" class=\"max-w-6xl mx-auto flex justify-center p-4\" action=\"\">\n  <div class=\"grid sm:grid-cols-4 sm:grid-rows-1 grid-rows-3 gap-4 w-full sm:w-auto\">\n    <select data-filter=\"ukuran\" id=\"ukuran\" name=\"size\" class=\"filter-ukuran border bg-zinc-200 p-2 focus:outline-none\">\n        <option value=\"\">SIZE<\/option>\n    <\/select>    \n    <select data-filter=\"warna\" id=\"warna\" name=\"color\" class=\"filter-warna border bg-zinc-200 p-2 focus:outline-none\">\n        <option value=\"\">COLOR<\/option>\n    <\/select>    \n    <select data-filter=\"tipe\" id=\"tipe\" name=\"tipe\" class=\"filter-tipe border bg-zinc-200 p-2 focus:outline-none\">\n        <option value=\"\">TYPE<\/option>\n    <\/select>    \n    <div class=\"flex sm:grid-cols-2 sm:grid-rows-1 grid-rows-1 gap-2 w-full sm:w-auto\">\n        <input type=\"text\" name=\"keyword\" class=\"border w-full p-2 focus:outline-none\" placeholder=\"Search by keyword...\">\n        <button type=\"submit\" name=\"submit\" id=\"submit\" class=\"w-10 p-2.5 ml-2 text-sm font-medium text-white bg-zinc-700 rounded-lg border border-zinc-700 hover:bg-zinc-800 focus:ring-4 focus:outline-none focus:ring-zinc-300 dark:bg-zinc-600 dark:hover:bg-zinc-700 dark:focus:ring-zinc-800\">\n            <svg class=\"w-4 h-4\" aria-hidden=\"true\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewbox=\"0 0 20 20\">\n                <path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z\"\/>\n            <\/svg>\n        <\/button>\n    <\/div>\n  <\/div>\n<input type=\"hidden\" name=\"trp-form-language\" value=\"id\"\/><\/form>\n<!-- opsi1 -->\n<!-- <div class=\"wrapper px-10 w-fit mx-auto grid grid-cols-1 lg:grid-cols-4 md:grid-cols-3 sm-grid-cols-2 justify-items-center justify-center gap-y-20 gap-x-7 mt-10 mb-5 divide-x divide-y\" style=\"padding-top:2rem;padding-bottom:2rem;\">\n<\/div> -->\n<!-- opsi2 -->\n<div class=\"wrapper px-10 w-fit mx-auto grid grid-cols-1 lg:grid-cols-4 md:grid-cols-3 sm-grid-cols-2 justify-items-center justify-center gap-y-20 gap-x-7 mt-10 mb-5\" style=\"padding-top:2rem;padding-bottom:2rem;\">\n<\/div>\n<hr\/>\n<section id=\"products\" class=\"px-10 w-fit mx-auto grid grid-cols-1 lg:grid-cols-4 md:grid-cols-3 sm-grid-cols-2 justify-items-center justify-center gap-y-20 gap-x-7 mt-10 mb-5 divide-x divide-y\">\n<\/section>\n<div class=\"pagination flex justify-center my-5\"><\/div>\n<!-- The Modal -->\n    <div id=\"modal\"\n        class=\"hidden fixed top-0 left-0 z-[100] w-screen h-screen bg-black\/70 flex justify-center items-center\">\n\n        <!-- The close button -->\n        <a class=\"fixed z-[110] top-6 right-8 text-white text-5xl font-bold\" href=\"javascript:void(0)\"\n            onclick=\"closeModal()\">&times;<\/a>\n\n        <!-- A big image will be displayed here -->\n        <img id=\"modal-img\" class=\"max-w-[800px] max-h-[600px] object-cover\" \/>\n    <\/div>\n<script type=\"text\/javascript\">\n\n    \n    var data = JSON.parse(fetchData()).data;\n    \/\/ data = data.data;\n\n    var products = \"\",\n      productz = \"\",\n      ukurans = \"\",\n      warnas = \"\",\n      tipes = \"\";\n\n    for (var i = 0; i < data.length; i++) {\n        \/\/ console.info(\"data[\"+i+\"]\",data[i])\n      var ukuran    = data[i].ukuran ? data[i].ukuran.toUpperCase() : '-',\n          warna     = data[i].warna ? data[i].warna.toUpperCase() : '-',\n          \/\/ warna     = data[i].kode.toUpperCase(),\n          tipe      = data[i].tipe ? data[i].tipe.toUpperCase() : '-',\n          kode      = data[i].kode ? data[i].kode.toUpperCase() : '-',\n          \/\/ image     = data[i].link + data[i].gambar ;\n          image     = \"https:\/\/primagrahakeramindo.com\/server\/upload\/katalog\/\" + data[i].gambar ;\n\n      \/\/opsi1\n      \/*productz += `\n        <div class=\"item w-72 bg-white shadow-xl rounded-xl duration-500 border-1 border-gray-300 hover:shadow-2xl\" data-ukuran=\"${ukuran}\" data-warna=\"${warna}\" data-tipe=\"${tipe}\" onclick=\"showModal('`+image+`');\">\n            <a href=\"#\" role=\"button\" class=\"focus:scale-200\">\n              <img decoding=\"async\" src=\"${image}\" alt=\"Product\" class=\"h-80 w-72 object-cover rounded-t-xl \" \/>\n              <div class=\"px-4 py-3 w-72\">\n                <span class=\"ukuran text-gray-400 mr-3 uppercase text-xs\">${ukuran}<\/span>\n                <h3 class=\"kode text-lg font-bold text-black truncate block capitalize\">${kode}<\/h3>\n                <div class=\"flex items-center\">\n                  <span class=\"tipe text-xs font-semibold inline-block py-1 px-2 uppercase rounded text-zinc-600 bg-zinc-200 uppercase last:mr-0 mr-1\">${tipe}<\/span>\n                  <span class=\"warna text-sm font-medium bg-gray-100 py-1 px-2 rounded text-gray-500 align-middle\">${warna}<\/span>\n                    <!--<p class=\"text-lg font-semibold text-black cursor-auto my-3\">${tipe}<\/p>\n                  <del><p class=\"text-sm text-gray-600 cursor-auto ml-2\">$199<\/p>\n                  <\/del>-->\n                  <!--<div class=\"ml-auto\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" fill=\"currentColor\" class=\"bi bi-bag-plus\" viewBox=\"0 0 16 16\">\n                      <path fill-rule=\"evenodd\" d=\"M8 7.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V12a.5.5 0 0 1-1 0v-1.5H6a.5.5 0 0 1 0-1h1.5V8a.5.5 0 0 1 .5-.5z\" \/>\n                      <path d=\"M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5z\" \/>\n                    <\/svg>\n                  <\/div>-->\n                <\/div>\n              <\/div>\n            <\/a>\n        <\/div>\n      `;*\/\n\n      \/\/opsi2\n      productz += `\n        <div class=\"item w-72 bg-white rounded-xl duration-500\" data-ukuran=\"${ukuran}\" data-warna=\"${warna}\" data-tipe=\"${tipe}\" onclick=\"showModal('`+image+`');\">\n            <a href=\"#\" role=\"button\" class=\"focus:scale-200 m-auto\" style=\"text-decoration:none !important;\">\n              <img decoding=\"async\" src=\"${image}\" alt=\"Product\" class=\"h-80 w-72 object-cover shadow-xl rounded-xl \" \/>\n              <div class=\"px-4 py-3 w-72\">\n                <span class=\"ukuran text-gray-400 mr-3 uppercase text-xs\">${ukuran}<\/span>\n                <h3 class=\"kode text-lg font-bold text-black truncate block capitalize\">${kode}<\/h3>\n                <div class=\"flex items-center\">\n                  <span class=\"tipe text-xs font-semibold inline-block py-1 px-2 uppercase rounded text-zinc-600 bg-zinc-200 uppercase last:mr-0 mr-1\">${tipe}<\/span>\n                  <span class=\"warna text-sm font-medium bg-gray-100 py-1 px-2 rounded text-gray-500 align-middle\">${warna}<\/span>\n                    <!--<p class=\"text-lg font-semibold text-black cursor-auto my-3\">${tipe}<\/p>\n                  <del><p class=\"text-sm text-gray-600 cursor-auto ml-2\">$199<\/p>\n                  <\/del>-->\n                  <!--<div class=\"ml-auto\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" fill=\"currentColor\" class=\"bi bi-bag-plus\" viewBox=\"0 0 16 16\">\n                      <path fill-rule=\"evenodd\" d=\"M8 7.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V12a.5.5 0 0 1-1 0v-1.5H6a.5.5 0 0 1 0-1h1.5V8a.5.5 0 0 1 .5-.5z\" \/>\n                      <path d=\"M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5z\" \/>\n                    <\/svg>\n                  <\/div>-->\n                <\/div>\n              <\/div>\n            <\/a>\n        <\/div>\n      `;\n\n      \/\/create dropdown of ukurans\n      if (ukurans.indexOf(\"<option value='\" + ukuran + \"'>\" + ukuran + \"<\/option>\") == -1) {\n        ukurans += \"<option value='\" + ukuran + \"'>\" + ukuran + \"<\/option>\";\n      }\n      \n      \/\/create dropdown of warnas\n      if (warnas.indexOf(\"<option value='\" + warna+\"'>\" + warna + \"<\/option>\") == -1) {\n        warnas += \"<option value='\" + warna + \"'>\" + warna + \"<\/option>\";\n      }\n      \n      \/\/create dropdown of tipes\n      if (tipes.indexOf(\"<option value='\" + tipe + \"'>\" + tipe + \"<\/option>\") == -1) {\n        tipes += \"<option value='\" + tipe + \"'>\" + tipe + \"<\/option>\";\n      }\n    }\n\n    jQuery(\".wrapper\").html(productz);\n    \/\/ jQuery(\"#products\").html(productz);\n    jQuery(\".filter-ukuran\").append(ukurans);\n    jQuery(\".filter-warna\").append(warnas);\n    jQuery(\".filter-tipe\").append(tipes);\n\n    const wrapper     = document.querySelector(\".wrapper\")\n    const pagination  = document.querySelector(\".pagination\")\n    const items       = Array.from(document.querySelectorAll(\".item\"))\n    \/\/ const items = Array.from(data)\n\n    let filteredItems = items;\n    let currPage = 1;\n\n    \/\/ console.info('items awal',items);\n    \/\/ console.info('filteredItems awal',items);\n\n    filters.addEventListener('submit', e => {\n        e.preventDefault()\n        console.log(e.target);\n        const keyword   = (document.querySelector(\"input[name=keyword]\").value).toUpperCase()\n        \/\/ const type      = document.querySelector(\"select[name=type]\").value\n        const size      = document.querySelector(\"select[name=size]\").value\n        const color     = document.querySelector(\"select[name=color]\").value\n        const tipe      = document.querySelector(\"select[name=tipe]\").value\n\n        filteredItems = items\n        \n        if (keyword) {\n          filteredItems = items.filter(el => {\n            return el.querySelector(\"h3\").innerText.indexOf(keyword) > -1\n          })\n            console.info('filtered Items by Keyword');\n            console.info('filtered Items by Keyword',filteredItems);\n        } \n        if (size) {\n          filteredItems = items.filter(el => {\n            return el.getAttribute(\"data-ukuran\") === size\n          })\n          console.info('filtered Items by Size: ',size);\n          console.info('filtered Items by Ukuran',filteredItems);\n        }\n        if (color) {\n          filteredItems = items.filter(el => {\n            return el.getAttribute(\"data-warna\") === color\n          });\n          console.info('filtered Items by Color: ',color);\n          console.info('filtered Items by Warna',filteredItems);\n        }\n        if (tipe) {\n          filteredItems = items.filter(el => {\n            return el.getAttribute(\"data-tipe\") === tipe\n          })\n          console.info('filtered Items by Tipe: ',tipe);\n          console.info('filtered Items by Tipe',filteredItems);\n        }\n\n        console.info('filteredItems',filteredItems);\n        console.info('items',items);\n\n\n        currPage = 1;\n        if (filteredItems.length !== 0) {\n          pagination.style.display = \"flex\";\n          setHTML(filteredItems)\n        } else {\n          pagination.style.display = \"none\";\n          wrapper.innerHTML = \"<p>No Data Found.<\/p>\"\n        }\n    })\n\n    function paginate(totalItems, currentPage = 1, pageSize = 2, maxPages = 6) {\n        let totalPages = Math.ceil(totalItems \/ pageSize);\n        if (currentPage < 1) {\n          currentPage = 1;\n        } else if (currentPage > totalPages) {\n          currentPage = totalPages;\n        }\n\n        console.info(`totalItems = ${totalItems}, currentPage = ${currentPage}, pageSize = ${pageSize}, maxPages = ${maxPages}`)\n        let startPage, endPage;\n        if (totalPages <= maxPages) {\n          startPage = 1;\n          endPage = totalPages;\n        } else {\n          let maxPagesBeforeCurrentPage = Math.floor(maxPages \/ 2);\n          let maxPagesAfterCurrentPage = Math.ceil(maxPages \/ 2) - 1;\n          if (currentPage <= maxPagesBeforeCurrentPage) {\n            startPage = 1;\n            endPage = maxPages;\n          } else if (currentPage + maxPagesAfterCurrentPage >= totalPages) {\n            startPage = totalPages - maxPages + 1;\n            endPage = totalPages;\n          } else {\n            startPage = currentPage - maxPagesBeforeCurrentPage;\n            endPage = currentPage + maxPagesAfterCurrentPage;\n          }\n        }\n\n        let startIndex = (currentPage - 1) * pageSize;\n        let endIndex = Math.min(startIndex + pageSize - 1, totalItems - 1);\n\n        let pages = Array.from(Array((endPage + 1) - startPage).keys()).map(i => startPage + i);\n\n        return {\n              totalItems: totalItems,\n              currentPage: currentPage,\n              pageSize: pageSize,\n              totalPages: totalPages,\n              startPage: startPage,\n              endPage: endPage,\n              startIndex: startIndex,\n              endIndex: endIndex,\n              pages: pages\n        };\n    }\n\n    function setHTML(items) {\n        wrapper.innerHTML = \"\"\n        pagination.innerHTML = \"\"\n        const { totalItems, currentPage, pageSize, totalPages, startPage, endPage, startIndex, endIndex, pages } = paginate(items.length, currPage, 8, 3)\n\n        const nav = document.createElement(\"nav\")\n        nav.classList.add(...['relative', 'z-0', 'inline-flex', 'rounded-md', 'shadow-sm', '-space-x-px'])\n\n        let paginationHTML = \"\"\n        paginationHTML += `<button ${currentPage === 1 && 'disabled'} class=\"${currentPage === 1 ? 'cursor-not-allowed' : 'prev'} page relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50\" page=${currentPage-1}>\n                      <span class=\"sr-only\">Previous<\/span>\n                      <svg class=\"h-5 w-5 ${currentPage === 1 ? 'cursor-not-allowed' : 'prev'}\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\" page=${currentPage-1}>\n                          <path fill-rule=\"evenodd\" d=\"M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z\" clip-rule=\"evenodd\"><\/path>\n                      <\/svg>\n                  <\/button>`\n\n        pages.forEach(page => {\n          if (currentPage === page) {\n            paginationHTML += `<button class=\"z-10 bg-zinc-50 border-zinc-500 text-zinc-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium\" page=\"${page}\" ${currentPage === page && 'disabled'}>${page}<\/button>`\n          } else {\n            paginationHTML += `<button class=\"page bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium\" page=\"${page}\" ${currentPage === page && 'disabled'}>${page}<\/button>`\n          }\n        })\n\n        paginationHTML += `<button ${currentPage === endPage && 'disabled'} class=\"${currentPage === endPage ? 'cursor-not-allowed' : 'next'} page relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50\" page=${currentPage+1}>\n                      <span class=\"sr-only\">Next<\/span>\n                      <svg class=\"h-5 w-5 ${currentPage === endPage ? 'cursor-not-allowed' : 'next'}\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\" page=${currentPage+1}>\n                          <path fill-rule=\"evenodd\" d=\"M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z\" clip-rule=\"evenodd\"><\/path>\n                      <\/svg>\n                  <\/button>`\n\n        nav.innerHTML = paginationHTML\n        pagination.append(nav)\n\n        const start = (currentPage - 1) * pageSize, end = currentPage * pageSize;\n        items.slice(start, end).forEach(el => {\n          wrapper.append(el)\n        })\n    }\n\n    document.body.addEventListener(\"change\", function (e) {\n        console.log(e.target);\n    })\n\n    document.addEventListener('click', function (e) {\n        const $this = e.target\n        console.log('click',$this);\n        if ($this.classList.contains(\"page\")) {\n          currPage = parseInt($this.getAttribute(\"page\"))\n          setHTML(filteredItems)\n        }\n        if ($this.classList.contains(\"next\")) {\n          currPage = parseInt($this.getAttribute(\"page\"))\n          \/\/ currPage += 1;\n          setHTML(filteredItems)\n        }\n        if ($this.classList.contains(\"prev\")) {\n          currPage = parseInt($this.getAttribute(\"page\"))\n          \/\/ currPage -= 1;\n          setHTML(filteredItems)\n        }\n    });\n\n    setHTML(filteredItems)\n\n    function calls(x){\n        data = x;\n    }\n\n    var modal = document.getElementById(\"modal\");\n\n    \/\/ Get the modal image tag\n    var modalImg = document.getElementById(\"modal-img\");\n\n    \/\/ this function is called when a small image is clicked\n    function showModal(src) {\n        modal.classList.remove('hidden');\n        modalImg.src = src;\n    }\n\n    \/\/ this function is called when the close button is clicked\n    function closeModal() {\n        modal.classList.add('hidden');\n    }\n\n    function fetchData(){\n        return jQuery.ajax({\n          type: \"GET\",\n          async: false,\n          url: \"https:\/\/unoceramics.com\/api\/catalog\",\n          dataType: \"json\"\n        }).responseText;\n    }\n\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Arwana Tiles Arwana floor and wall tiles are our original product line which are aimed at cost-conscious customers. It is specifically formulated to offer, first and foremost, functionality and quality at a very affordable price range. Other features of Arwana tiles include simplicity in design, and flexibility of design applications for your living spaces. SIZE [&hellip;]<\/p>","protected":false},"author":6,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_jet_sm_ready_style":"","_jet_sm_style":"","_jet_sm_controls_values":"","_jet_sm_fonts_collection":"","_jet_sm_fonts_links":"","_vp_format_video_url":"","_vp_image_focal_point":[],"footnotes":""},"class_list":["post-3441","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>- Arwana Ceramics<\/title>\n<meta name=\"description\" content=\"Arwana floor and wall tiles are our original product line which are aimed at cost-conscious customers. It is specifically formulated to offer, first and foremost, functionality and quality at a very affordable price range. Other features of Arwana tiles include simplicity in design, and flexibility of design applications for your living spaces.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/arwanacitra.com\/id\/products-arwana\/\" \/>\n<meta property=\"og:locale\" content=\"id_ID\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"- Arwana Ceramics\" \/>\n<meta property=\"og:description\" content=\"Arwana floor and wall tiles are our original product line which are aimed at cost-conscious customers. It is specifically formulated to offer, first and foremost, functionality and quality at a very affordable price range. Other features of Arwana tiles include simplicity in design, and flexibility of design applications for your living spaces.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/arwanacitra.com\/id\/products-arwana\/\" \/>\n<meta property=\"og:site_name\" content=\"Arwana Ceramics\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-16T11:22:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/arwanacitra.com\/wp-content\/uploads\/5our-brand-arwana\/img-bg.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/arwanacitra.com\/products-arwana\/\",\"url\":\"https:\/\/arwanacitra.com\/products-arwana\/\",\"name\":\"- Arwana Ceramics\",\"isPartOf\":{\"@id\":\"https:\/\/arwanacitra.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/arwanacitra.com\/products-arwana\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/arwanacitra.com\/products-arwana\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/arwanacitra.com\/wp-content\/uploads\/5our-brand-arwana\/img-bg.png\",\"datePublished\":\"2023-07-11T06:29:16+00:00\",\"dateModified\":\"2023-07-16T11:22:25+00:00\",\"description\":\"Arwana floor and wall tiles are our original product line which are aimed at cost-conscious customers. It is specifically formulated to offer, first and foremost, functionality and quality at a very affordable price range. Other features of Arwana tiles include simplicity in design, and flexibility of design applications for your living spaces.\",\"inLanguage\":\"id-ID\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/arwanacitra.com\/products-arwana\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"id-ID\",\"@id\":\"https:\/\/arwanacitra.com\/products-arwana\/#primaryimage\",\"url\":\"https:\/\/arwanacitra.com\/wp-content\/uploads\/5our-brand-arwana\/img-bg.png\",\"contentUrl\":\"https:\/\/arwanacitra.com\/wp-content\/uploads\/5our-brand-arwana\/img-bg.png\"},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/arwanacitra.com\/#website\",\"url\":\"https:\/\/arwanacitra.com\/\",\"name\":\"Arwana Ceramics\",\"description\":\"Official Website of PT Arwana Citramulia Tbk\",\"publisher\":{\"@id\":\"https:\/\/arwanacitra.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/arwanacitra.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"id-ID\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/arwanacitra.com\/#organization\",\"name\":\"PT. Arwana CitraMulia Tbk.\",\"url\":\"https:\/\/arwanacitra.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"id-ID\",\"@id\":\"https:\/\/arwanacitra.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/arwanacitra.com\/wp-content\/uploads\/2023\/07\/Screenshot-2023-06-28-at-13.30.12.png\",\"contentUrl\":\"https:\/\/arwanacitra.com\/wp-content\/uploads\/2023\/07\/Screenshot-2023-06-28-at-13.30.12.png\",\"width\":682,\"height\":616,\"caption\":\"PT. Arwana CitraMulia Tbk.\"},\"image\":{\"@id\":\"https:\/\/arwanacitra.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.instagram.com\/arwana_ceramics\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"- Arwana Ceramics","description":"Arwana floor and wall tiles are our original product line which are aimed at cost-conscious customers. It is specifically formulated to offer, first and foremost, functionality and quality at a very affordable price range. Other features of Arwana tiles include simplicity in design, and flexibility of design applications for your living spaces.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/arwanacitra.com\/id\/products-arwana\/","og_locale":"id_ID","og_type":"article","og_title":"- Arwana Ceramics","og_description":"Arwana floor and wall tiles are our original product line which are aimed at cost-conscious customers. It is specifically formulated to offer, first and foremost, functionality and quality at a very affordable price range. Other features of Arwana tiles include simplicity in design, and flexibility of design applications for your living spaces.","og_url":"https:\/\/arwanacitra.com\/id\/products-arwana\/","og_site_name":"Arwana Ceramics","article_modified_time":"2023-07-16T11:22:25+00:00","og_image":[{"url":"https:\/\/arwanacitra.com\/wp-content\/uploads\/5our-brand-arwana\/img-bg.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/arwanacitra.com\/products-arwana\/","url":"https:\/\/arwanacitra.com\/products-arwana\/","name":"- Arwana Ceramics","isPartOf":{"@id":"https:\/\/arwanacitra.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/arwanacitra.com\/products-arwana\/#primaryimage"},"image":{"@id":"https:\/\/arwanacitra.com\/products-arwana\/#primaryimage"},"thumbnailUrl":"https:\/\/arwanacitra.com\/wp-content\/uploads\/5our-brand-arwana\/img-bg.png","datePublished":"2023-07-11T06:29:16+00:00","dateModified":"2023-07-16T11:22:25+00:00","description":"Arwana floor and wall tiles are our original product line which are aimed at cost-conscious customers. It is specifically formulated to offer, first and foremost, functionality and quality at a very affordable price range. Other features of Arwana tiles include simplicity in design, and flexibility of design applications for your living spaces.","inLanguage":"id-ID","potentialAction":[{"@type":"ReadAction","target":["https:\/\/arwanacitra.com\/products-arwana\/"]}]},{"@type":"ImageObject","inLanguage":"id-ID","@id":"https:\/\/arwanacitra.com\/products-arwana\/#primaryimage","url":"https:\/\/arwanacitra.com\/wp-content\/uploads\/5our-brand-arwana\/img-bg.png","contentUrl":"https:\/\/arwanacitra.com\/wp-content\/uploads\/5our-brand-arwana\/img-bg.png"},{"@type":"WebSite","@id":"https:\/\/arwanacitra.com\/#website","url":"https:\/\/arwanacitra.com\/","name":"Arwana Ceramics","description":"Official Website of PT Arwana Citramulia Tbk","publisher":{"@id":"https:\/\/arwanacitra.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/arwanacitra.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"id-ID"},{"@type":"Organization","@id":"https:\/\/arwanacitra.com\/#organization","name":"PT. Arwana CitraMulia Tbk.","url":"https:\/\/arwanacitra.com\/","logo":{"@type":"ImageObject","inLanguage":"id-ID","@id":"https:\/\/arwanacitra.com\/#\/schema\/logo\/image\/","url":"https:\/\/arwanacitra.com\/wp-content\/uploads\/2023\/07\/Screenshot-2023-06-28-at-13.30.12.png","contentUrl":"https:\/\/arwanacitra.com\/wp-content\/uploads\/2023\/07\/Screenshot-2023-06-28-at-13.30.12.png","width":682,"height":616,"caption":"PT. Arwana CitraMulia Tbk."},"image":{"@id":"https:\/\/arwanacitra.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.instagram.com\/arwana_ceramics\/"]}]}},"_links":{"self":[{"href":"https:\/\/arwanacitra.com\/id\/wp-json\/wp\/v2\/pages\/3441","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/arwanacitra.com\/id\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/arwanacitra.com\/id\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/arwanacitra.com\/id\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/arwanacitra.com\/id\/wp-json\/wp\/v2\/comments?post=3441"}],"version-history":[{"count":0,"href":"https:\/\/arwanacitra.com\/id\/wp-json\/wp\/v2\/pages\/3441\/revisions"}],"wp:attachment":[{"href":"https:\/\/arwanacitra.com\/id\/wp-json\/wp\/v2\/media?parent=3441"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}