{"id":84,"date":"2025-09-28T16:48:36","date_gmt":"2025-09-28T16:48:36","guid":{"rendered":"https:\/\/puneva.com\/usta2\/?page_id=84"},"modified":"2025-09-29T22:55:44","modified_gmt":"2025-09-29T22:55:44","slug":"hizmet-takip","status":"publish","type":"page","link":"https:\/\/puneva.com\/usta2\/hizmet-takip\/","title":{"rendered":"Hizmet Takip"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"84\" class=\"elementor elementor-84\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-5e0c544 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"5e0c544\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-686966e\" data-id=\"686966e\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\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-e842b63 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"e842b63\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-f72b727\" data-id=\"f72b727\" 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-9af0ca3 elementor-widget elementor-widget-shortcode\" data-id=\"9af0ca3\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">        <div class=\"hst-wrap\" data-ajax=\"https:\/\/puneva.com\/usta2\/wp-admin\/admin-ajax.php\" data-nonce=\"5e08d2aab5\">\n            <style>\n                .hst-wrap{--bg:#ffffff;--card:#0f172a;--muted:#64748b;--line:#e5e7eb;--accent:#2563eb;--ok:#16a34a;--warn:#f59e0b;--err:#ef4444;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,\"Helvetica Neue\",Arial,sans-serif}\n                .hst-container{max-width:900px;margin:auto;padding:clamp(14px,3vw,24px);width:100%}\n                .hst-card{background:var(--bg);border:1px solid var(--line);border-radius:16px;box-shadow:0 10px 24px rgba(0,0,0,.08);padding:18px}\n                .hst-title{font-size:clamp(20px,2.6vw,28px);margin:0 0 6px}\n                .hst-desc{color:var(--muted);margin:0 0 12px}\n                .hst-inputs{display:flex;gap:10px;flex-wrap:wrap}\n                .hst-inputs input{flex:1;min-width:220px;border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:16px}\n                .hst-btn{background:var(--accent);color:#fff;border:0;border-radius:12px;padding:12px 16px;font-weight:600;cursor:pointer}\n                .hst-btn:disabled{opacity:.6;cursor:not-allowed}\n                .hst-result{margin-top:16px}\n                .hst-badge{display:inline-block;border-radius:999px;padding:6px 10px;background:#eef2ff;color:#1e3a8a;font-weight:600;font-size:13px}\n\n                \/* Progress \u2014 ta\u015fma \u00f6nleme *\/\n                .hst-progress{position:relative;display:flex;gap:14px;overflow:hidden;padding:8px 2px;margin:10px 0}\n                .hst-step{display:grid;justify-items:center;flex:1 1 0;min-width:0}\n                .hst-dot{width:18px;height:18px;border-radius:50%;border:3px solid var(--line);background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.08)}\n                .hst-label{margin-top:8px;font-size:12px;text-align:center;color:#0f172a;white-space:normal;word-break:break-word;hyphens:auto;line-height:1.2}\n                .hst-step.is-done .hst-dot{border-color:var(--accent);background:var(--accent)}\n                .hst-step.is-current .hst-dot{border-color:var(--accent);background:#fff}\n                .hst-bar{position:absolute;top:16px;left:0;right:0;height:3px;background:var(--line);z-index:0}\n                .hst-bar-fill{position:absolute;top:16px;left:0;height:3px;background:var(--accent);z-index:1;width:0;transition:width .3s ease}\n\n                .hst-rows{display:grid;grid-template-columns:1fr;gap:10px}\n                .hst-info{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}\n                @media (max-width:640px){\n                    .hst-info{grid-template-columns:1fr}\n                    .hst-label{font-size:11px}\n                }\n                .hst-kv{border:1px solid var(--line);border-radius:12px;padding:10px;min-width:0}\n                .hst-kv b{display:block;margin-bottom:4px;font-size:12px;color:var(--muted)}\n\n                .hst-empty{border:1px dashed var(--line);border-radius:12px;padding:14px;background:#fafafa;color:#334155}\n            <\/style>\n\n            <div class=\"hst-container\">\n                <div class=\"hst-card\">\n                    <h2 class=\"hst-title\">Servis Takip<\/h2>\n                    <p class=\"hst-desc\"><strong>Servis personeli taraf\u0131ndan size verilen takip kodunuzu giriniz.<\/strong><\/p>\n                    <div class=\"hst-inputs\">\n                        <input type=\"text\" inputmode=\"text\" id=\"hst_code\" placeholder=\"\u00d6rn: H8XYZ123\">\n                        <button class=\"hst-btn\" id=\"hst_btn\">Sorgula<\/button>\n                    <\/div>\n                    <div class=\"hst-result\" id=\"hst_result\">\n                        <div class=\"hst-empty\">Takip kodunu girip <b>Sorgula<\/b>\u2019ya t\u0131klay\u0131n.<\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <script>\n            (function(){\n                const $ = (s,el=document)=>el.querySelector(s);\n                const ajax  = document.querySelector('.hst-wrap').dataset.ajax;\n                const nonce = document.querySelector('.hst-wrap').dataset.nonce;\n                const btn   = $('#hst_btn');\n                const input = $('#hst_code');\n                const out   = $('#hst_result');\n\n                function esc(s){ return (s||'').toString().replace(\/[&<>\"']\/g, m=>({ '&':'&amp;','<':'&lt;','>':'&gt;','\"':'&quot;',\"'\":'&#39;' }[m])); }\n\n                function render(data){\n                    const statuses = data.statuses || [];\n                    const idx = Math.max(0, Math.min(data.status_index||0, statuses.length-1));\n                    const pct = statuses.length>1 ? (idx\/(statuses.length-1))*100 : 0;\n\n                    let steps = '';\n                    statuses.forEach((name,i)=>{\n                        const cls = (i<idx?'is-done ':'') + (i===idx?'is-current ':'');\n                        steps += `\n                          <div class=\"hst-step ${cls}\">\n                            <div class=\"hst-dot\"><\/div>\n                            <div class=\"hst-label\">${esc(name)}<\/div>\n                          <\/div>`;\n                    });\n\n                    out.innerHTML = `\n                        <div class=\"hst-rows\">\n                            <div>\n                                <div class=\"hst-progress\">\n                                    <div class=\"hst-bar\"><\/div>\n                                    <div class=\"hst-bar-fill\" style=\"width:${pct}%\"><\/div>\n                                    ${steps}\n                                <\/div>\n                                <span class=\"hst-badge\">Mevcut Durum: ${esc(statuses[idx]||'-')}<\/span>\n                            <\/div>\n                            <div class=\"hst-info\">\n                                <div class=\"hst-kv\"><b>Takip Kodu<\/b>${esc(data.tracking)}<\/div>\n                                <div class=\"hst-kv\"><b>M\u00fc\u015fteri<\/b>${esc(data.customer||'-')}<\/div>\n                                <div class=\"hst-kv\"><b>Telefon<\/b>${esc(data.phone||'-')}<\/div>\n                                <div class=\"hst-kv\"><b>Adres<\/b>${esc(data.address||'-')}<\/div>\n                                <div class=\"hst-kv\"><b>Cihaz \/ Model<\/b>${esc(data.device||'-')}<\/div>\n                                <div class=\"hst-kv\"><b>Kay\u0131t Tarihi<\/b>${esc(data.created||'-')}<\/div>\n                                <div class=\"hst-kv\"><b>G\u00fcncelleme<\/b>${esc(data.updated||'-')}<\/div>\n                                ${data.note ? `<div class=\"hst-kv\" style=\"grid-column:1\/-1\"><b>Not<\/b>${esc(data.note)}<\/div>`:''}\n                            <\/div>\n                        <\/div>`;\n                }\n\n                function loading(state){\n                    btn.disabled = state;\n                    btn.textContent = state ? 'Sorgulan\u0131yor...' : 'Sorgula';\n                }\n\n                function query(){\n                    const code = (input.value||'').trim();\n                    if(!code){ input.focus(); return; }\n                    loading(true);\n                    fetch(ajax,{\n                        method:'POST',\n                        headers:{'Content-Type':'application\/x-www-form-urlencoded'},\n                        body:new URLSearchParams({action:'hst_query', nonce:nonce, code:code})\n                    }).then(r=>r.json())\n                      .then(j=>{\n                        loading(false);\n                        if(j && j.ok){ render(j.data); }\n                        else{\n                            out.innerHTML = `<div class=\"hst-empty\">Kay\u0131t bulunamad\u0131 veya kod hatal\u0131.<\/div>`;\n                        }\n                      })\n                      .catch(_=>{\n                        loading(false);\n                        out.innerHTML = `<div class=\"hst-empty\">Bir hata olu\u015ftu. L\u00fctfen daha sonra tekrar deneyin.<\/div>`;\n                      });\n                }\n\n                btn.addEventListener('click', query);\n                input.addEventListener('keydown', e=>{ if(e.key==='Enter') query(); });\n            })();\n            <\/script>\n        <\/div>\n        <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-32e9e65 elementor-widget elementor-widget-heading\" data-id=\"32e9e65\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Demo Test: HYG2VP6RH<\/h2>\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>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Demo Test: HYG2VP6RH<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-84","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/puneva.com\/usta2\/wp-json\/wp\/v2\/pages\/84","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/puneva.com\/usta2\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/puneva.com\/usta2\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/puneva.com\/usta2\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/puneva.com\/usta2\/wp-json\/wp\/v2\/comments?post=84"}],"version-history":[{"count":10,"href":"https:\/\/puneva.com\/usta2\/wp-json\/wp\/v2\/pages\/84\/revisions"}],"predecessor-version":[{"id":443,"href":"https:\/\/puneva.com\/usta2\/wp-json\/wp\/v2\/pages\/84\/revisions\/443"}],"wp:attachment":[{"href":"https:\/\/puneva.com\/usta2\/wp-json\/wp\/v2\/media?parent=84"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}