{"id":3988,"date":"2025-05-23T19:47:11","date_gmt":"2025-05-23T19:47:11","guid":{"rendered":"https:\/\/grckainternet.com\/?page_id=3988"},"modified":"2025-08-30T13:07:28","modified_gmt":"2025-08-30T11:07:28","slug":"podrzani-uredjaji","status":"publish","type":"page","link":"https:\/\/grckainternet.com\/en\/podrzani-uredjaji\/","title":{"rendered":"Podr\u017eani ure\u0111aji"},"content":{"rendered":"<section class=\"bde-section-3988-100 bde-section\">\n  \n  \n\t\n\n\n\n<div class=\"section-container\"><h1 class=\"bde-heading-3988-141 bde-heading\">\nProverite da li va\u0161 ure\u0111aj podr\u017eava eSIM\n<\/h1><div class=\"bde-code-block-3988-140 bde-code-block\">\n\n  <div id=\"esim-device-viewer\">\n  <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/fuse.js\/dist\/fuse.min.js\"><\/script>\n  <style>\n    #esim-device-viewer {\n      color: #334155;\n      width: 100%;\n      margin: auto;\n    }\n    #esim-device-viewer * { box-sizing: border-box; }\n\n    #esim-device-viewer .card {\n      background: #ffffff;\n      border: 1px solid #e2e8f0;\n      border-radius: 8px;\n      overflow: hidden;\n      box-shadow: 0 1px 3px rgba(0,0,0,0.05);\n      margin-bottom: 24px;\n    }\n\n    #esim-device-viewer .header { padding: 16px; border-bottom: 1px solid #e2e8f0; }\n    #esim-device-viewer h1 { margin: 0 0 4px; font-size: 20px; font-weight: 500; }\n    #esim-device-viewer p.sub { margin: 0; color: #64748b; font-size: 14px; }\n\n    #esim-device-viewer .search-wrap { padding: 16px; }\n    #esim-device-viewer .search {\n      position: relative;\n    }\n    #esim-device-viewer .search input {\n      width: 100%;\n      padding: 10px 10px 10px 36px;\n      background: #f8fafc;\n      border: 1px solid #e2e8f0;\n      border-radius: 6px;\n      color: #334155;\n      outline: none;\n      font-size: 15px;\n    }\n    #esim-device-viewer .search input:focus { border-color: #0ea5e9; box-shadow: 0 0 0 2px rgba(14,165,233,0.1); }\n    #esim-device-viewer .search .icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: #64748b; }\n\n    #esim-device-viewer .results-info { padding: 8px 16px; color: #64748b; font-size: 13px; border-top: 1px solid #e2e8f0; }\n    #esim-device-viewer .search-results .row {\n        display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 12px 16px;\n        border-bottom: 1px solid #e2e8f0; cursor: pointer;\n    }\n    #esim-device-viewer .search-results .row:last-child { border-bottom: none; }\n    #esim-device-viewer .search-results .row:hover { background: rgba(14,165,233,0.04); }\n    #esim-device-viewer .search-results .brand { color: #64748b; font-size: 12px; }\n    #esim-device-viewer .search-results .device { font-weight: 500; }\n    #esim-device-viewer .search-results .badge {\n        font-size: 12px; padding: 3px 8px; border-radius: 4px; border: 1px solid #e2e8f0;\n        color: #059669; border-color: rgba(5,150,105,0.2); background: rgba(5,150,105,0.05);\n    }\n\n    #esim-device-viewer .device-grid h2 {\n      font-size: 18px;\n      font-weight: 500;\n      padding-bottom: 8px;\n      border-bottom: 1px solid #e2e8f0;\n      margin: 24px 0 16px;\n    }\n\n    #esim-device-viewer .grid-container {\n      display: grid;\n      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n      gap: 16px;\n    }\n\n    #esim-device-viewer .grid-item {\n      background: #ffffff;\n      border: 1px solid #e2e8f0;\n      border-radius: 6px;\n      padding: 12px;\n      font-size: 14px;\n      text-align: center;\n      box-shadow: 0 1px 2px rgba(0,0,0,0.04);\n      transition: background-color 0.2s;\n    }\n    #esim-device-viewer .grid-item.supported {\n      background-color: rgba(5, 150, 105, 0.05);\n      border-color: rgba(5, 150, 105, 0.2);\n      cursor: pointer;\n    }\n    #esim-device-viewer .grid-item.maybe {\n      background-color: rgba(217, 119, 6, 0.05);\n      border-color: rgba(217, 119, 6, 0.2);\n      cursor: pointer;\n    }\n    #esim-device-viewer .grid-item.supported:hover,\n    #esim-device-viewer .grid-item.maybe:hover {\n      background-color: rgba(14, 165, 233, 0.08);\n    }\n    .badge.maybe { color: #d97706; border-color: rgba(217,119,6,0.2); background: rgba(217,119,6,0.05); }\n\n    \/* Modal *\/\n    .overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.2); display: none; place-items: center; padding: 16px; z-index: 9999; }\n    .overlay.show { display: grid; }\n    .modal { width: min(480px, 100%); background: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }\n    .modal .m-head { padding: 16px 16px 0 16px; }\n    .modal .m-head h2 { margin: 0; font-size: 18px; font-weight: 500; }\n    .modal .m-body { padding: 16px; color: #334155; }\n    .modal .m-foot { padding: 12px 16px; display: flex; justify-content: flex-end; border-top: 1px solid #e2e8f0; }\n    .modal .btn { padding: 8px 12px; border-radius: 6px; border: 1px solid #e2e8f0; background: #f8fafc; color: #334155; cursor: pointer; font-size: 14px; }\n  <\/style>\n\n  <div class=\"card\">\n    <div class=\"header\">\n      <h1>eSIM Pretraga Ure\u0111aja<\/h1>\n    <\/div>\n    <div class=\"search-wrap\">\n      <div class=\"search\">\n        <span class=\"icon\" aria-hidden>\ud83d\udd0e<\/span>\n        <input class=\"esim-search-q\" type=\"search\" placeholder=\"Unesite model va\u0161eg ure\u0111aja (npr., iPhone 15, Galaxy S24)\" autocomplete=\"off\" \/>\n      <\/div>\n    <\/div>\n    <div class=\"results-info\" style=\"display:none;\"><\/div>\n    <div class=\"search-results\"><\/div>\n  <\/div>\n\n  <div class=\"device-grid\"><\/div>\n\n  <div id=\"esim-viewer-overlay\" class=\"overlay\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"esim-viewer-modalTitle\">\n    <div class=\"modal\">\n      <div class=\"m-head\">\n        <h2 id=\"esim-viewer-modalTitle\"><\/h2>\n      <\/div>\n      <div class=\"m-body\">\n        <p id=\"esim-viewer-modalMsg\"><\/p>\n      <\/div>\n      <div class=\"m-foot\">\n        <button class=\"btn\" id=\"esim-viewer-closeBtn\">Zatvori<\/button>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <script>\n    (function(){\n      const component = document.getElementById('esim-device-viewer');\n      const DATA_URL = '\/wp-admin\/admin-ajax.php?action=fetch_esim_devices';\n      const state = { devices: [], fuse: null };\n\n      const searchInput = component.querySelector('.esim-search-q');\n      const searchResultsList = component.querySelector('.search-results');\n      const searchResultsInfo = component.querySelector('.results-info');\n      const deviceListContainer = component.querySelector('.device-grid');\n\n      const overlay = component.querySelector('#esim-viewer-overlay');\n      const modalTitle = component.querySelector('#esim-viewer-modalTitle');\n      const modalMsg = component.querySelector('#esim-viewer-modalMsg');\n      const closeBtn = component.querySelector('#esim-viewer-closeBtn');\n\n      async function init() {\n        try {\n          const response = await fetch(DATA_URL);\n          if (!response.ok) throw new Error(`HTTP ${response.status}`);\n          const data = await response.json();\n          state.devices = data;\n\n          state.fuse = new Fuse(state.devices, {\n            keys: ['brand', 'device'],\n            includeScore: true,\n            threshold: 0.3,\n            ignoreLocation: true,\n          });\n\n          renderDeviceGrid(state.devices);\n          searchInput.addEventListener('input', handleSearch);\n        } catch (err) {\n          console.error('Failed to load device data:', err);\n          deviceListContainer.innerHTML = '<p>Gre\u0161ka pri u\u010ditavanju liste ure\u0111aja.<\/p>';\n        }\n      }\n\n      function handleSearch(event) {\n        const query = event.target.value.trim();\n        if (!query) {\n          searchResultsInfo.style.display = 'none';\n          searchResultsInfo.style.display = 'none';\n          searchResultsList.innerHTML = '';\n          deviceListContainer.style.display = 'block';\n          return;\n        }\n\n        const results = state.fuse.search(query);\n        const filteredDevices = results.map(result => result.item);\n        \n        deviceListContainer.style.display = 'none';\n        searchResultsInfo.style.display = 'block';\n        searchResultsInfo.textContent = `${filteredDevices.length} rezultat${filteredDevices.length === 1 ? '' : 'a'} prona\u0111eno.`;\n        renderSearchResults(filteredDevices);\n      }\n\n      function renderSearchResults(devices) {\n        if (devices.length === 0) {\n          searchResultsList.innerHTML = '<div style=\"padding: 16px; text-align: center; color: #64748b;\">Nema rezultata<\/div>';\n          return;\n        }\n        const html = devices.slice(0, 50).map(d => {\n          const badgeClass = d.esim === 1 ? 'ok' : (d.esim === 2 ? 'maybe' : '');\n          const badgeText = d.esim === 1 ? 'eSIM podr\u017ean' : (d.esim === 2 ? 'Delimi\u010dna podr\u0161ka' : '');\n          return `\n          <div class=\"row\" data-esim=\"${d.esim || 0}\" data-device=\"${escapeHtml(d.device)}\">\n            <div>\n              <div class=\"device\">${escapeHtml(d.device)}<\/div>\n              <div class=\"brand\">${escapeHtml(d.brand)}<\/div>\n            <\/div>\n            ${badgeText ? `<div class=\"badge ${badgeClass}\">${badgeText}<\/div>` : ''}\n          <\/div>\n        `}).join('');\n        searchResultsList.innerHTML = html;\n      }\n\n      function renderDeviceGrid(devices) {\n        const groupedByBrand = devices.reduce((acc, device) => {\n          const brand = device.brand || 'Other';\n          if (!acc[brand]) {\n            acc[brand] = [];\n          }\n          acc[brand].push(device);\n          return acc;\n        }, {});\n\n        const sortedBrands = Object.keys(groupedByBrand).sort();\n\n        let gridHtml = '';\n        for (const brand of sortedBrands) {\n          gridHtml += `<h2>${escapeHtml(brand)}<\/h2>`;\n          gridHtml += '<div class=\"grid-container\">';\n          const sortedDevices = groupedByBrand[brand].sort((a, b) => a.device.localeCompare(b.device));\n          gridHtml += sortedDevices.map(d => {\n            const esimClass = d.esim === 2 ? 'maybe' : (d.esim === 1 ? 'supported' : '');\n            return `<div class=\"grid-item ${esimClass}\" data-esim=\"${d.esim || 0}\" data-device=\"${escapeHtml(d.device)}\">${escapeHtml(d.device)}<\/div>`\n          }).join('');\n          gridHtml += '<\/div>';\n        }\n        deviceListContainer.innerHTML = gridHtml;\n      }\n\n      function openModal(title, message) {\n        modalTitle.textContent = title;\n        modalMsg.textContent = message;\n        overlay.classList.add('show');\n      }\n\n      function closeModal() { overlay.classList.remove('show'); }\n\n      function handleDeviceClick(event) {\n        const target = event.target.closest('[data-esim]');\n        if (!target) return;\n\n        const esim = Number(target.dataset.esim);\n        const device = target.dataset.device;\n\n        if (esim === 1) {\n          openModal(device, \"Va\u0161 ure\u0111aj u potpunosti podr\u017eava eSIM tehnologiju.\");\n        } else if (esim === 2) {\n          openModal(device, \"Neki modeli ovog ure\u0111aja podr\u017eavaju eSIM, dok drugi ne. Da biste proverili da li va\u0161 ure\u0111aj podr\u017eava eSIM, idite u Pode\u0161avanja i potra\u017eite Menad\u017eer SIM kartica ili Mobilna mre\u017ea, pa proverite da li imate opciju da dodate eSIM\");\n        }\n      }\n\n      closeBtn.addEventListener('click', closeModal);\n      overlay.addEventListener('click', e => { if (e.target === overlay) closeModal(); });\n      searchResultsList.addEventListener('click', handleDeviceClick);\n      deviceListContainer.addEventListener('click', handleDeviceClick);\n\n      function escapeHtml(str) {\n        return String(str).replace(\/[&<>'\"\/]\/g, s => ({'&': '&amp;', '<': '&lt;', '>': '&gt;', '\"': '&quot;', \"'\": '&#39;', '\/': '&#x2F;'})[s]);\n      }\n\n      init();\n    })();\n  <\/script>\n<\/div>\n\n\n\n<\/div><\/div>\n<\/section>","protected":false},"excerpt":{"rendered":"<p>Proverite da li va\u0161 ure\u0111aj podr\u017eava eSIM eSIM Pretraga Ure\u0111aja \ud83d\udd0e Zatvori<\/p>","protected":false},"author":33,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"bwfblock_default_font":"","_breakdance_hide_in_design_set":false,"_breakdance_tags":"","footnotes":""},"class_list":["post-3988","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/grckainternet.com\/en\/wp-json\/wp\/v2\/pages\/3988","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/grckainternet.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/grckainternet.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/grckainternet.com\/en\/wp-json\/wp\/v2\/users\/33"}],"replies":[{"embeddable":true,"href":"https:\/\/grckainternet.com\/en\/wp-json\/wp\/v2\/comments?post=3988"}],"version-history":[{"count":0,"href":"https:\/\/grckainternet.com\/en\/wp-json\/wp\/v2\/pages\/3988\/revisions"}],"wp:attachment":[{"href":"https:\/\/grckainternet.com\/en\/wp-json\/wp\/v2\/media?parent=3988"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}