{"id":61,"date":"2026-08-15T06:49:17","date_gmt":"2026-08-15T06:49:17","guid":{"rendered":"https:\/\/vertexoperations.pl\/?page_id=61"},"modified":"2026-08-16T08:11:47","modified_gmt":"2026-08-16T08:11:47","slug":"sprawdz-status-zgloszenia","status":"publish","type":"page","link":"https:\/\/vertexoperations.pl\/index.php\/sprawdz-status-zgloszenia\/","title":{"rendered":"Sprawd\u017a status zg\u0142oszenia"},"content":{"rendered":"\n<div id=\"vertex-status-app\">\n\n<style>\n#vertex-status-app{\n    --navy:#061f38;\n    --navy2:#0b3659;\n    --blue:#2da8ff;\n    --blue2:#0b82e6;\n    --light:#eef5fb;\n    --text:#0a1726;\n    --muted:#718399;\n    --green:#20b875;\n    --orange:#f3a72f;\n    --red:#e64b4b;\n    --purple:#8068e8;\n\n    font-family:Arial,Helvetica,sans-serif;\n    max-width:1000px;\n    margin:0 auto;\n    border-radius:20px;\n    overflow:hidden;\n    background:#fff;\n    box-shadow:0 20px 60px rgba(4,31,55,.10);\n}\n\n#vertex-status-app *{\n    box-sizing:border-box;\n}\n\n\/* ===============================\n   G\u00d3RA\n================================ *\/\n\n#vertex-status-app .vs-hero{\n    position:relative;\n    overflow:hidden;\n    padding:58px 52px 54px;\n\n    background:\n        radial-gradient(\n            circle at 90% 5%,\n            rgba(45,168,255,.13),\n            transparent 28%\n        ),\n        linear-gradient(\n            120deg,\n            var(--navy),\n            #073050\n        );\n\n    color:#fff;\n}\n\n#vertex-status-app .vs-hero:after{\n    content:\"\";\n    position:absolute;\n    width:230px;\n    height:230px;\n    border:1px solid rgba(45,168,255,.18);\n    border-radius:50%;\n    right:-80px;\n    top:-100px;\n}\n\n#vertex-status-app .vs-system{\n    display:flex;\n    align-items:center;\n    gap:10px;\n    color:#42b5ff;\n    font-size:11px;\n    letter-spacing:3px;\n    font-weight:800;\n    margin-bottom:34px;\n}\n\n#vertex-status-app .vs-system:before{\n    content:\"\";\n    width:25px;\n    height:2px;\n    background:#39b5ff;\n}\n\n#vertex-status-app .vs-hero-grid{\n    display:grid;\n    grid-template-columns:1.15fr .85fr;\n    gap:50px;\n    align-items:center;\n}\n\n#vertex-status-app h1{\n    color:#fff;\n    font-size:42px;\n    line-height:1.02;\n    letter-spacing:-1.7px;\n    margin:0 0 20px;\n}\n\n#vertex-status-app .vs-description{\n    color:#c8d8e7;\n    line-height:1.8;\n    font-size:14px;\n    max-width:520px;\n}\n\n\/* ===============================\n   CENTRUM OPERACYJNE\n================================ *\/\n\n#vertex-status-app .vs-center{\n    border:1px solid rgba(54,176,255,.38);\n    background:rgba(17,69,107,.45);\n    padding:20px 22px;\n    border-radius:14px;\n}\n\n#vertex-status-app .vs-center-top{\n    display:flex;\n    align-items:center;\n    justify-content:space-between;\n    gap:15px;\n    font-size:13px;\n    font-weight:700;\n}\n\n#vertex-status-app .vs-online{\n    display:flex;\n    align-items:center;\n    gap:6px;\n    border:1px solid rgba(53,178,255,.4);\n    background:rgba(45,168,255,.12);\n    padding:5px 9px;\n    border-radius:20px;\n    color:#7bcaff;\n    font-size:8px;\n    letter-spacing:1.4px;\n}\n\n#vertex-status-app .vs-online-dot{\n    width:7px;\n    height:7px;\n    border-radius:50%;\n    background:#32b7ff;\n    box-shadow:0 0 0 0 rgba(50,183,255,.6);\n    animation:vertexPulse 1.7s infinite;\n}\n\n#vertex-status-app .vs-line{\n    height:4px;\n    margin-top:20px;\n    border-radius:20px;\n    overflow:hidden;\n    background:rgba(255,255,255,.08);\n}\n\n#vertex-status-app .vs-line span{\n    display:block;\n    width:18%;\n    height:100%;\n    border-radius:20px;\n    background:linear-gradient(\n        90deg,\n        #188ae5,\n        #5fc7ff\n    );\n    animation:vertexScan 2.5s ease-in-out infinite;\n}\n\n\/* ===============================\n   FORMULARZ\n================================ *\/\n\n#vertex-status-app .vs-body{\n    padding:45px 50px 48px;\n    text-align:center;\n}\n\n#vertex-status-app .vs-eyebrow{\n    color:#158bea;\n    font-size:10px;\n    font-weight:800;\n    letter-spacing:2.5px;\n    margin-bottom:12px;\n}\n\n#vertex-status-app h2{\n    margin:0 0 12px;\n    color:var(--text);\n    font-size:27px;\n}\n\n#vertex-status-app .vs-help{\n    color:var(--muted);\n    font-size:13px;\n    margin-bottom:30px;\n}\n\n#vertex-status-app .vs-form{\n    max-width:650px;\n    margin:0 auto;\n    display:flex;\n    padding:8px;\n    border:1px solid #cbdceb;\n    background:#f6faff;\n    border-radius:13px;\n    gap:9px;\n    box-shadow:0 9px 30px rgba(8,83,139,.08);\n}\n\n#vertex-status-app #vertexTicket{\n    flex:1;\n    min-width:0;\n    border:1px solid #c7d8e7;\n    background:#fff;\n    border-radius:7px;\n    padding:0 15px;\n    height:48px;\n    outline:none;\n    font-size:15px;\n    font-weight:700;\n    color:#10243a;\n    text-transform:uppercase;\n}\n\n#vertex-status-app #vertexTicket:focus{\n    border-color:#32aaff;\n    box-shadow:0 0 0 3px rgba(45,168,255,.12);\n}\n\n#vertex-status-app #vertexCheck{\n    position:relative;\n    min-width:165px;\n    border:0;\n    border-radius:8px;\n    background:linear-gradient(\n        135deg,\n        #31aaff,\n        #0d82df\n    );\n    color:#fff;\n    font-size:11px;\n    font-weight:800;\n    cursor:pointer;\n    padding:0 20px;\n    transition:.2s ease;\n    overflow:hidden;\n}\n\n#vertex-status-app #vertexCheck:hover{\n    transform:translateY(-1px);\n    box-shadow:0 9px 22px rgba(30,151,239,.27);\n}\n\n#vertex-status-app #vertexCheck:disabled{\n    cursor:wait;\n    opacity:.8;\n}\n\n\/* ===============================\n   \u0141ADOWANIE\n================================ *\/\n\n#vertex-status-app .vs-loader{\n    display:none;\n    max-width:650px;\n    margin:28px auto 0;\n    padding:28px;\n    border:1px solid #d9e7f2;\n    border-radius:14px;\n    background:#f9fcff;\n}\n\n#vertex-status-app .vs-loader.active{\n    display:block;\n    animation:vertexFade .35s ease;\n}\n\n#vertex-status-app .vs-radar{\n    width:68px;\n    height:68px;\n    margin:0 auto 17px;\n    position:relative;\n}\n\n#vertex-status-app .vs-radar-core{\n    position:absolute;\n    width:16px;\n    height:16px;\n    background:#24a8ff;\n    border-radius:50%;\n    left:26px;\n    top:26px;\n    box-shadow:0 0 18px rgba(36,168,255,.7);\n}\n\n#vertex-status-app .vs-radar:before,\n#vertex-status-app .vs-radar:after{\n    content:\"\";\n    position:absolute;\n    inset:0;\n    border:2px solid #2da8ff;\n    border-radius:50%;\n    animation:vertexRadar 1.6s ease-out infinite;\n}\n\n#vertex-status-app .vs-radar:after{\n    animation-delay:.8s;\n}\n\n#vertex-status-app .vs-loader-title{\n    font-size:16px;\n    font-weight:800;\n    color:#11283e;\n}\n\n#vertex-status-app .vs-loader-text{\n    color:#75879a;\n    font-size:12px;\n    margin-top:7px;\n}\n\n#vertex-status-app .vs-progress{\n    height:4px;\n    background:#e3edf5;\n    border-radius:10px;\n    overflow:hidden;\n    margin-top:20px;\n}\n\n#vertex-status-app .vs-progress span{\n    display:block;\n    width:35%;\n    height:100%;\n    background:#28a7ff;\n    animation:vertexProgress 1.1s ease-in-out infinite;\n}\n\n#vertex-status-app .vs-loader-steps{\n    display:grid;\n    grid-template-columns:repeat(3,1fr);\n    gap:7px;\n    margin-top:17px;\n}\n\n#vertex-status-app .vs-loader-step{\n    padding:8px;\n    border:1px solid #e0eaf2;\n    border-radius:7px;\n    background:#fff;\n    color:#8a9baa;\n    font-size:8px;\n    font-weight:750;\n    letter-spacing:.4px;\n}\n\n#vertex-status-app .vs-loader-step.active{\n    color:#168ae5;\n    border-color:#bfe2fa;\n    background:#eef8ff;\n}\n\n\/* ===============================\n   WYNIK\n================================ *\/\n\n#vertex-status-app .vs-result{\n    display:none;\n    max-width:700px;\n    margin:28px auto 0;\n    text-align:left;\n}\n\n#vertex-status-app .vs-result.active{\n    display:block;\n    animation:vertexResult .45s cubic-bezier(.2,.8,.2,1);\n}\n\n#vertex-status-app .vs-result-card{\n    border:1px solid #d6e5f1;\n    border-radius:15px;\n    overflow:hidden;\n    background:#fff;\n    box-shadow:0 12px 35px rgba(7,45,78,.08);\n}\n\n\/* HEADER WYNIKU *\/\n\n#vertex-status-app .vs-result-top{\n    display:flex;\n    justify-content:space-between;\n    align-items:center;\n    gap:15px;\n    padding:22px 24px;\n    background:#071f37;\n}\n\n#vertex-status-app .vs-ticket-small{\n    font-size:9px;\n    color:#56b8f6;\n    letter-spacing:1.5px;\n    font-weight:800;\n}\n\n#vertex-status-app .vs-ticket-id{\n    font-size:22px;\n    font-weight:900;\n    color:#fff;\n    margin-top:5px;\n}\n\n\/* ===============================\n   STATUS\n================================ *\/\n\n#vertex-status-app .vs-status{\n    display:inline-flex;\n    align-items:center;\n    gap:8px;\n    padding:9px 14px;\n    border-radius:30px;\n    font-size:11px;\n    font-weight:900;\n    letter-spacing:.4px;\n}\n\n#vertex-status-app .vs-status-dot{\n    width:8px;\n    height:8px;\n    border-radius:50%;\n    background:currentColor;\n    animation:vertexStatusPulse 1.5s infinite;\n}\n\n#vertex-status-app .status-new{\n    color:#7d5bd8;\n    background:#f1ecff;\n}\n\n#vertex-status-app .status-progress{\n    color:#147bc2;\n    background:#e7f5ff;\n}\n\n#vertex-status-app .status-sent{\n    color:#c17a09;\n    background:#fff4dc;\n}\n\n#vertex-status-app .status-verification{\n    color:#b77a08;\n    background:#fff3ce;\n}\n\n#vertex-status-app .status-finished{\n    color:#16895a;\n    background:#e8f8f0;\n}\n\n#vertex-status-app .status-complaint{\n    color:#d33f3f;\n    background:#ffe9e9;\n}\n\n#vertex-status-app .status-closed{\n    color:#46515c;\n    background:#edf0f2;\n}\n\n#vertex-status-app .status-unknown{\n    color:#687786;\n    background:#edf2f5;\n}\n\n\/* ===============================\n   DANE\n================================ *\/\n\n#vertex-status-app .vs-details{\n    display:grid;\n    grid-template-columns:1.4fr 1fr 1fr;\n    gap:10px;\n    padding:20px 18px 12px;\n}\n\n#vertex-status-app .vs-detail{\n    min-height:100px;\n    padding:15px;\n    border:1px solid #dfe9f1;\n    background:#f8fbfd;\n    border-radius:11px;\n    transition:.25s ease;\n}\n\n#vertex-status-app .vs-detail:hover{\n    transform:translateY(-2px);\n    border-color:#b9ddf6;\n    box-shadow:0 9px 24px rgba(30,110,170,.07);\n}\n\n#vertex-status-app .vs-detail-icon{\n    display:flex;\n    align-items:center;\n    justify-content:center;\n    width:27px;\n    height:27px;\n    border-radius:8px;\n    background:#e5f5ff;\n    color:#168de8;\n    font-size:13px;\n    margin-bottom:10px;\n}\n\n#vertex-status-app .vs-detail-label{\n    color:#8193a4;\n    font-size:8px;\n    font-weight:800;\n    letter-spacing:1px;\n    margin-bottom:7px;\n}\n\n#vertex-status-app .vs-detail-value{\n    color:#11273d;\n    font-size:13px;\n    line-height:1.45;\n    font-weight:800;\n}\n\n\/* ===============================\n   O\u015a POST\u0118PU\n================================ *\/\n\n#vertex-status-app .vs-progress-wrap{\n    padding:7px 20px 22px;\n}\n\n#vertex-status-app .vs-progress-title{\n    display:flex;\n    align-items:center;\n    gap:11px;\n    margin:10px 0 18px;\n    color:#168ce7;\n    font-size:8px;\n    font-weight:850;\n    letter-spacing:1.2px;\n}\n\n#vertex-status-app .vs-progress-title:before,\n#vertex-status-app .vs-progress-title:after{\n    content:\"\";\n    height:1px;\n    flex:1;\n    background:#dbe9f3;\n}\n\n#vertex-status-app .vs-timeline{\n    display:grid;\n    grid-template-columns:repeat(5,1fr);\n}\n\n#vertex-status-app .vs-stage{\n    position:relative;\n    text-align:center;\n}\n\n#vertex-status-app .vs-stage:not(:last-child):after{\n    content:\"\";\n    position:absolute;\n    top:15px;\n    left:58%;\n    width:84%;\n    height:2px;\n    background:#dbe6ef;\n    z-index:0;\n}\n\n#vertex-status-app .vs-stage.done:not(:last-child):after{\n    background:#29a8ff;\n}\n\n#vertex-status-app .vs-stage-dot{\n    position:relative;\n    z-index:2;\n\n    display:flex;\n    align-items:center;\n    justify-content:center;\n\n    width:32px;\n    height:32px;\n\n    margin:0 auto 9px;\n\n    border:2px solid #cad9e5;\n    border-radius:50%;\n\n    background:#fff;\n\n    color:#91a0ae;\n    font-size:11px;\n    font-weight:900;\n}\n\n#vertex-status-app .vs-stage.done .vs-stage-dot{\n    color:#fff;\n    border-color:#28a7ff;\n    background:#28a7ff;\n}\n\n#vertex-status-app .vs-stage.current .vs-stage-dot{\n    color:#fff;\n    border-color:#21b979;\n    background:#21b979;\n    animation:vertexCurrentStage 1.6s infinite;\n}\n\n#vertex-status-app .vs-stage-name{\n    padding:0 3px;\n    color:#8193a2;\n    font-size:8px;\n    line-height:1.35;\n    font-weight:750;\n}\n\n#vertex-status-app .vs-stage.current .vs-stage-name{\n    color:#168a5b;\n}\n\n\/* REKLAMACJA *\/\n\n#vertex-status-app .vs-complaint{\n    display:none;\n    margin:0 20px 20px;\n    padding:15px 17px;\n    border:1px solid #ffd1d1;\n    border-radius:10px;\n    background:#fff2f2;\n    color:#c13c3c;\n    font-size:11px;\n    line-height:1.55;\n    font-weight:700;\n}\n\n#vertex-status-app .vs-complaint.active{\n    display:block;\n    animation:vertexFade .3s ease;\n}\n\n\/* FOOT *\/\n\n#vertex-status-app .vs-result-info{\n    margin:0 20px 20px;\n    border:1px solid #d7e8f4;\n    border-radius:9px;\n    padding:13px 15px;\n    background:#f2f9ff;\n    color:#64778b;\n    font-size:10px;\n    line-height:1.6;\n}\n\n\/* ===============================\n   B\u0141\u0104D\n================================ *\/\n\n#vertex-status-app .vs-error{\n    display:none;\n    max-width:650px;\n    margin:25px auto 0;\n    padding:17px 20px;\n    background:#fff1f1;\n    border:1px solid #ffd0d0;\n    border-radius:11px;\n    color:#b63232;\n    font-size:13px;\n    font-weight:700;\n}\n\n#vertex-status-app .vs-error.active{\n    display:block;\n    animation:vertexFade .3s ease;\n}\n\n\/* ===============================\n   ANIMACJE\n================================ *\/\n\n@keyframes vertexPulse{\n    0%{\n        box-shadow:0 0 0 0 rgba(50,183,255,.55);\n    }\n\n    70%{\n        box-shadow:0 0 0 9px rgba(50,183,255,0);\n    }\n\n    100%{\n        box-shadow:0 0 0 0 rgba(50,183,255,0);\n    }\n}\n\n@keyframes vertexScan{\n    0%{\n        transform:translateX(-120%);\n    }\n\n    50%{\n        transform:translateX(250%);\n    }\n\n    100%{\n        transform:translateX(600%);\n    }\n}\n\n@keyframes vertexRadar{\n    0%{\n        transform:scale(.2);\n        opacity:1;\n    }\n\n    100%{\n        transform:scale(1.15);\n        opacity:0;\n    }\n}\n\n@keyframes vertexProgress{\n    0%{\n        transform:translateX(-120%);\n    }\n\n    100%{\n        transform:translateX(320%);\n    }\n}\n\n@keyframes vertexFade{\n    from{\n        opacity:0;\n        transform:translateY(6px);\n    }\n\n    to{\n        opacity:1;\n        transform:translateY(0);\n    }\n}\n\n@keyframes vertexResult{\n    from{\n        opacity:0;\n        transform:translateY(12px) scale(.98);\n    }\n\n    to{\n        opacity:1;\n        transform:translateY(0) scale(1);\n    }\n}\n\n@keyframes vertexStatusPulse{\n    0%,100%{\n        opacity:1;\n        transform:scale(1);\n    }\n\n    50%{\n        opacity:.35;\n        transform:scale(.7);\n    }\n}\n\n@keyframes vertexCurrentStage{\n    0%{\n        box-shadow:\n            0 0 0 0 rgba(33,185,121,.45);\n    }\n\n    70%{\n        box-shadow:\n            0 0 0 10px rgba(33,185,121,0);\n    }\n\n    100%{\n        box-shadow:\n            0 0 0 0 rgba(33,185,121,0);\n    }\n}\n\n\/* ===============================\n   MOBILE\n================================ *\/\n\n@media(max-width:700px){\n\n    #vertex-status-app .vs-hero{\n        padding:38px 25px;\n    }\n\n    #vertex-status-app .vs-hero-grid{\n        grid-template-columns:1fr;\n        gap:28px;\n    }\n\n    #vertex-status-app h1{\n        font-size:34px;\n    }\n\n    #vertex-status-app .vs-body{\n        padding:36px 20px;\n    }\n\n    #vertex-status-app .vs-form{\n        flex-direction:column;\n    }\n\n    #vertex-status-app #vertexTicket{\n        width:100%;\n        box-sizing:border-box;\n    }\n\n    #vertex-status-app #vertexCheck{\n        height:48px;\n    }\n\n    #vertex-status-app .vs-result-top{\n        align-items:flex-start;\n        flex-direction:column;\n    }\n\n    #vertex-status-app .vs-details{\n        grid-template-columns:1fr;\n    }\n\n    #vertex-status-app .vs-timeline{\n        grid-template-columns:1fr;\n        gap:10px;\n    }\n\n    #vertex-status-app .vs-stage{\n        display:flex;\n        align-items:center;\n        gap:10px;\n        text-align:left;\n    }\n\n    #vertex-status-app .vs-stage-dot{\n        margin:0;\n        flex:0 0 32px;\n    }\n\n    #vertex-status-app .vs-stage:not(:last-child):after{\n        display:none;\n    }\n\n    #vertex-status-app .vs-loader-steps{\n        grid-template-columns:1fr;\n    }\n}\n<\/style>\n\n\n<!-- ===============================\n     HERO\n================================ -->\n\n<div class=\"vs-hero\">\n\n    <div class=\"vs-system\">\n        VERTEX SYSTEM\n    <\/div>\n\n    <div class=\"vs-hero-grid\">\n\n        <div>\n\n            <h1>\n                Sprawd\u017a status<br>\n                zg\u0142oszenia.\n            <\/h1>\n\n            <div class=\"vs-description\">\n                Wprowad\u017a numer zg\u0142oszenia otrzymany po zg\u0142oszeniu usterki.\n                System Vertex sprawdzi aktualny etap realizacji bezpo\u015brednio\n                w rejestrze operacyjnym.\n            <\/div>\n\n        <\/div>\n\n        <div class=\"vs-center\">\n\n            <div class=\"vs-center-top\">\n\n                <span>\n                    Centrum operacyjne\n                <\/span>\n\n                <span class=\"vs-online\">\n\n                    <span class=\"vs-online-dot\"><\/span>\n\n                    SYSTEM ONLINE\n\n                <\/span>\n\n            <\/div>\n\n            <div class=\"vs-line\">\n                <span><\/span>\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n<\/div>\n\n\n<!-- ===============================\n     BODY\n================================ -->\n\n<div class=\"vs-body\">\n\n    <div class=\"vs-eyebrow\">\n        STATUS ZG\u0141OSZENIA\n    <\/div>\n\n    <h2>\n        Wprowad\u017a numer zg\u0142oszenia\n    <\/h2>\n\n    <div class=\"vs-help\">\n        Numer znajdziesz w potwierdzeniu zg\u0142oszenia.\n        Przyk\u0142ad: VO-0023\n    <\/div>\n\n\n    <!-- FORM -->\n\n    <div class=\"vs-form\">\n\n        <input\n            id=\"vertexTicket\"\n            type=\"text\"\n            placeholder=\"NP. VO-0023\"\n            autocomplete=\"off\"\n        >\n\n        <button\n            id=\"vertexCheck\"\n            type=\"button\"\n        >\n            SPRAWD\u0179 STATUS\n        <\/button>\n\n    <\/div>\n\n\n    <!-- LOADER -->\n\n    <div\n        id=\"vertexLoader\"\n        class=\"vs-loader\"\n    >\n\n        <div class=\"vs-radar\">\n            <div class=\"vs-radar-core\"><\/div>\n        <\/div>\n\n        <div\n            class=\"vs-loader-title\"\n            id=\"vertexLoaderTitle\"\n        >\n            \u0141\u0105czenie z systemem Vertex&#8230;\n        <\/div>\n\n        <div\n            class=\"vs-loader-text\"\n            id=\"vertexLoaderText\"\n        >\n            Inicjalizacja zapytania\n        <\/div>\n\n        <div class=\"vs-progress\">\n            <span><\/span>\n        <\/div>\n\n        <div class=\"vs-loader-steps\">\n\n            <div class=\"vs-loader-step active\">\n                IDENTYFIKACJA ID\n            <\/div>\n\n            <div class=\"vs-loader-step\">\n                WERYFIKACJA REJESTRU\n            <\/div>\n\n            <div class=\"vs-loader-step\">\n                ODCZYT STATUSU\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n\n    <!-- RESULT -->\n\n    <div\n        id=\"vertexResult\"\n        class=\"vs-result\"\n    >\n\n        <div class=\"vs-result-card\">\n\n\n            <!-- HEADER -->\n\n            <div class=\"vs-result-top\">\n\n                <div>\n\n                    <div class=\"vs-ticket-small\">\n                        NUMER ZG\u0141OSZENIA\n                    <\/div>\n\n                    <div\n                        id=\"vertexResultId\"\n                        class=\"vs-ticket-id\"\n                    >\n                        \u2014\n                    <\/div>\n\n                <\/div>\n\n\n                <div\n                    id=\"vertexStatus\"\n                    class=\"vs-status status-unknown\"\n                >\n\n                    <span class=\"vs-status-dot\"><\/span>\n\n                    <span id=\"vertexStatusText\">\n                        \u2014\n                    <\/span>\n\n                <\/div>\n\n            <\/div>\n\n\n            <!-- DODATKOWE DANE -->\n\n            <div class=\"vs-details\">\n\n                <div class=\"vs-detail\">\n\n                    <div class=\"vs-detail-icon\">\n                        \u25a3\n                    <\/div>\n\n                    <div class=\"vs-detail-label\">\n                        OBIEKT\n                    <\/div>\n\n                    <div\n                        id=\"vertexObject\"\n                        class=\"vs-detail-value\"\n                    >\n                        Brak danych\n                    <\/div>\n\n                <\/div>\n\n\n                <div class=\"vs-detail\">\n\n                    <div class=\"vs-detail-icon\">\n                        \u2699\n                    <\/div>\n\n                    <div class=\"vs-detail-label\">\n                        KATEGORIA\n                    <\/div>\n\n                    <div\n                        id=\"vertexCategory\"\n                        class=\"vs-detail-value\"\n                    >\n                        Brak danych\n                    <\/div>\n\n                <\/div>\n\n\n                <div class=\"vs-detail\">\n\n                    <div class=\"vs-detail-icon\">\n                        \u25f7\n                    <\/div>\n\n                    <div class=\"vs-detail-label\">\n                        DATA PRZYJ\u0118CIA\n                    <\/div>\n\n                    <div\n                        id=\"vertexDate\"\n                        class=\"vs-detail-value\"\n                    >\n                        Brak danych\n                    <\/div>\n\n                <\/div>\n\n            <\/div>\n\n\n            <!-- TIMELINE -->\n\n            <div class=\"vs-progress-wrap\">\n\n                <div class=\"vs-progress-title\">\n                    POST\u0118P REALIZACJI\n                <\/div>\n\n\n                <div class=\"vs-timeline\">\n\n                    <div\n                        class=\"vs-stage\"\n                        data-step=\"0\"\n                    >\n\n                        <div class=\"vs-stage-dot\">\n                            \u2713\n                        <\/div>\n\n                        <div class=\"vs-stage-name\">\n                            NOWE\n                        <\/div>\n\n                    <\/div>\n\n\n                    <div\n                        class=\"vs-stage\"\n                        data-step=\"1\"\n                    >\n\n                        <div class=\"vs-stage-dot\">\n                            \u2192\n                        <\/div>\n\n                        <div class=\"vs-stage-name\">\n                            WYS\u0141ANE DO WYKONAWCY\n                        <\/div>\n\n                    <\/div>\n\n\n                    <div\n                        class=\"vs-stage\"\n                        data-step=\"2\"\n                    >\n\n                        <div class=\"vs-stage-dot\">\n                            \u25cf\n                        <\/div>\n\n                        <div class=\"vs-stage-name\">\n                            W REALIZACJI\n                        <\/div>\n\n                    <\/div>\n\n\n                    <div\n                        class=\"vs-stage\"\n                        data-step=\"3\"\n                    >\n\n                        <div class=\"vs-stage-dot\">\n                            \u2713\n                        <\/div>\n\n                        <div class=\"vs-stage-name\">\n                            WERYFIKACJA\n                        <\/div>\n\n                    <\/div>\n\n\n                    <div\n                        class=\"vs-stage\"\n                        data-step=\"4\"\n                    >\n\n                        <div class=\"vs-stage-dot\">\n                            \u2713\n                        <\/div>\n\n                        <div class=\"vs-stage-name\">\n                            ZAKO\u0143CZONE\n                        <\/div>\n\n                    <\/div>\n\n                <\/div>\n\n            <\/div>\n\n\n            <!-- REKLAMACJA -->\n\n            <div\n                id=\"vertexComplaint\"\n                class=\"vs-complaint\"\n            >\n                \u26a0 Zg\u0142oszenie posiada status REKLAMACJA.\n                Sprawa znajduje si\u0119 poza standardow\u0105 \u015bcie\u017ck\u0105 realizacji\n                i wymaga ponownej weryfikacji.\n            <\/div>\n\n\n            <!-- FOOT -->\n\n            <div\n                id=\"vertexResultInfo\"\n                class=\"vs-result-info\"\n            >\n                Status oraz dane zg\u0142oszenia zosta\u0142y pobrane\n                bezpo\u015brednio z rejestru operacyjnego Vertex Operations.\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n\n    <!-- ERROR -->\n\n    <div\n        id=\"vertexError\"\n        class=\"vs-error\"\n    ><\/div>\n\n<\/div>\n\n\n<script>\n(function(){\n\n    \/* ===============================================\n       DZIA\u0141AJ\u0104CY WEBHOOK MAKE\n    =============================================== *\/\n\n    const WEBHOOK_URL =\n        \"https:\/\/hook.eu1.make.com\/g40brhvcqbmxfwraxp41h6jc7ss9j91y\";\n\n\n    \/* ===============================================\n       ELEMENTY\n    =============================================== *\/\n\n    const input =\n        document.getElementById(\"vertexTicket\");\n\n    const button =\n        document.getElementById(\"vertexCheck\");\n\n    const loader =\n        document.getElementById(\"vertexLoader\");\n\n    const loaderTitle =\n        document.getElementById(\"vertexLoaderTitle\");\n\n    const loaderText =\n        document.getElementById(\"vertexLoaderText\");\n\n    const loaderSteps =\n        document.querySelectorAll(\n            \"#vertex-status-app .vs-loader-step\"\n        );\n\n    const result =\n        document.getElementById(\"vertexResult\");\n\n    const resultId =\n        document.getElementById(\"vertexResultId\");\n\n    const statusBox =\n        document.getElementById(\"vertexStatus\");\n\n    const statusText =\n        document.getElementById(\"vertexStatusText\");\n\n    const objectBox =\n        document.getElementById(\"vertexObject\");\n\n    const categoryBox =\n        document.getElementById(\"vertexCategory\");\n\n    const dateBox =\n        document.getElementById(\"vertexDate\");\n\n    const complaintBox =\n        document.getElementById(\"vertexComplaint\");\n\n    const errorBox =\n        document.getElementById(\"vertexError\");\n\n\n    \/* ===============================================\n       CZYSZCZENIE ID\n    =============================================== *\/\n\n    function cleanId(value){\n\n        return String(value || \"\")\n            .trim()\n            .toUpperCase()\n            .replace(\/\\s+\/g,\"\");\n\n    }\n\n\n    \/* ===============================================\n       FORMAT DATY\n    =============================================== *\/\n\n    function formatDate(value){\n\n        if(!value){\n            return \"Brak danych\";\n        }\n\n        const raw =\n            String(value).trim();\n\n        const normalized =\n            raw.replace(\" \",\"T\");\n\n        const date =\n            new Date(normalized);\n\n        if(isNaN(date.getTime())){\n            return raw;\n        }\n\n        return new Intl.DateTimeFormat(\n            \"pl-PL\",\n            {\n                day:\"2-digit\",\n                month:\"2-digit\",\n                year:\"numeric\",\n                hour:\"2-digit\",\n                minute:\"2-digit\"\n            }\n        ).format(date);\n\n    }\n\n\n    \/* ===============================================\n       KOLOR STATUSU\n    =============================================== *\/\n\n    function getStatusClass(status){\n\n        const s =\n            String(status || \"\")\n            .toLowerCase();\n\n        if(s.includes(\"reklamac\")){\n            return \"status-complaint\";\n        }\n\n        if(s.includes(\"zamkni\u0119\")){\n            return \"status-closed\";\n        }\n\n        if(s.includes(\"zako\u0144cz\")){\n            return \"status-finished\";\n        }\n\n        if(s.includes(\"weryfik\")){\n            return \"status-verification\";\n        }\n\n        if(s.includes(\"realiz\")){\n            return \"status-progress\";\n        }\n\n        if(\n            s.includes(\"wys\u0142ane\") ||\n            s.includes(\"wykonaw\")\n        ){\n            return \"status-sent\";\n        }\n\n        if(s.includes(\"nowe\")){\n            return \"status-new\";\n        }\n\n        return \"status-unknown\";\n\n    }\n\n\n    \/* ===============================================\n       KT\u00d3RY ETAP?\n    =============================================== *\/\n\n    function getStatusStep(status){\n\n        const s =\n            String(status || \"\")\n            .toLowerCase();\n\n        \/*\n         REKLAMACJA NIE JEST NORMALNYM\n         ETAPEM LINIOWEGO PROCESU.\n        *\/\n\n        if(!s){\n            return -1;\n        }\n\n        if(s.includes(\"reklamac\")){\n            return -1;\n        }\n\n        if(\n            s.includes(\"zako\u0144cz\") ||\n            s.includes(\"zamkni\u0119\")\n        ){\n            return 4;\n        }\n\n        if(s.includes(\"weryfik\")){\n            return 3;\n        }\n\n        if(s.includes(\"realiz\")){\n            return 2;\n        }\n\n        if(\n            s.includes(\"wys\u0142ane\") ||\n            s.includes(\"wykonaw\")\n        ){\n            return 1;\n        }\n\n        if(s.includes(\"nowe\")){\n            return 0;\n        }\n\n        return -1;\n\n    }\n\n\n    \/* ===============================================\n       TIMELINE\n    =============================================== *\/\n\n    function setTimeline(status){\n\n        const activeStep =\n            getStatusStep(status);\n\n        const stages =\n            document.querySelectorAll(\n                \"#vertex-status-app .vs-stage\"\n            );\n\n        stages.forEach(function(stage){\n\n            const step =\n                Number(stage.dataset.step);\n\n            stage.classList.remove(\n                \"done\",\n                \"current\"\n            );\n\n\n            \/*\n             Je\u015bli status jest np.\n             REKLAMACJA albo nieznany,\n             nie zaznaczamy \u017cadnego etapu.\n            *\/\n\n            if(activeStep === -1){\n                return;\n            }\n\n\n            if(step < activeStep){\n                stage.classList.add(\"done\");\n            }\n\n            if(step === activeStep){\n                stage.classList.add(\"current\");\n            }\n\n        });\n\n    }\n\n\n    \/* ===============================================\n       REKLAMACJA\n    =============================================== *\/\n\n    function setComplaint(status){\n\n        const s =\n            String(status || \"\")\n            .toLowerCase();\n\n        if(s.includes(\"reklamac\")){\n\n            complaintBox.classList.add(\n                \"active\"\n            );\n\n        }else{\n\n            complaintBox.classList.remove(\n                \"active\"\n            );\n\n        }\n\n    }\n\n\n    \/* ===============================================\n       LOADER\n    =============================================== *\/\n\n    function resetLoaderSteps(){\n\n        loaderSteps.forEach(\n            function(step,index){\n\n                step.classList.toggle(\n                    \"active\",\n                    index === 0\n                );\n\n            }\n        );\n\n    }\n\n\n    function hideEverything(){\n\n        loader.classList.remove(\"active\");\n\n        result.classList.remove(\"active\");\n\n        errorBox.classList.remove(\"active\");\n\n        complaintBox.classList.remove(\"active\");\n\n    }\n\n\n    \/* ===============================================\n       B\u0141\u0104D\n    =============================================== *\/\n\n    function showError(message){\n\n        loader.classList.remove(\"active\");\n\n        result.classList.remove(\"active\");\n\n        errorBox.textContent =\n            message;\n\n        errorBox.classList.add(\"active\");\n\n        button.disabled = false;\n\n        button.textContent =\n            \"SPRAWD\u0179 STATUS\";\n\n    }\n\n\n    \/* ===============================================\n       WYNIK\n    =============================================== *\/\n\n    function showResult(data,requestedId){\n\n        loader.classList.remove(\"active\");\n\n        errorBox.classList.remove(\"active\");\n\n\n        const returnedId =\n            data.id || requestedId;\n\n\n        const returnedStatus =\n            data.status || \"Brak statusu\";\n\n\n        resultId.textContent =\n            returnedId;\n\n\n        statusText.textContent =\n            String(returnedStatus)\n            .toUpperCase();\n\n\n        statusBox.className =\n            \"vs-status \" +\n            getStatusClass(\n                returnedStatus\n            );\n\n\n        \/*\n         Te pola zaczn\u0105 automatycznie dzia\u0142a\u0107,\n         kiedy dodamy je ponownie w Make.\n        *\/\n\n        objectBox.textContent =\n            data.obiekt ||\n            \"Brak danych\";\n\n\n        categoryBox.textContent =\n            data.kategoria ||\n            \"Brak danych\";\n\n\n        dateBox.textContent =\n            formatDate(\n                data.data\n            );\n\n\n        setTimeline(\n            returnedStatus\n        );\n\n\n        setComplaint(\n            returnedStatus\n        );\n\n\n        result.classList.add(\n            \"active\"\n        );\n\n\n        button.disabled = false;\n\n        button.textContent =\n            \"SPRAWD\u0179 PONOWNIE\";\n\n    }\n\n\n    \/* ===============================================\n       G\u0141\u00d3WNA FUNKCJA\n    =============================================== *\/\n\n    async function checkVertexStatus(){\n\n        const ticketId =\n            cleanId(\n                input.value\n            );\n\n\n        hideEverything();\n\n        resetLoaderSteps();\n\n\n        if(!ticketId){\n\n            showError(\n                \"Wprowad\u017a numer zg\u0142oszenia, np. VO-0023.\"\n            );\n\n            return;\n\n        }\n\n\n        button.disabled = true;\n\n        button.textContent =\n            \"SPRAWDZANIE...\";\n\n\n        loaderTitle.textContent =\n            \"\u0141\u0105czenie z systemem Vertex...\";\n\n        loaderText.textContent =\n            \"Identyfikacja numeru zg\u0142oszenia\";\n\n\n        loader.classList.add(\n            \"active\"\n        );\n\n\n        \/* ETAP 2 *\/\n\n        const stage2 =\n            setTimeout(function(){\n\n                if(loaderSteps[1]){\n                    loaderSteps[1]\n                        .classList.add(\n                            \"active\"\n                        );\n                }\n\n                loaderTitle.textContent =\n                    \"Weryfikacja zg\u0142oszenia...\";\n\n                loaderText.textContent =\n                    \"Przeszukiwanie rejestru operacyjnego\";\n\n            },650);\n\n\n        \/* ETAP 3 *\/\n\n        const stage3 =\n            setTimeout(function(){\n\n                if(loaderSteps[2]){\n                    loaderSteps[2]\n                        .classList.add(\n                            \"active\"\n                        );\n                }\n\n                loaderTitle.textContent =\n                    \"Odczytywanie aktualnego statusu...\";\n\n                loaderText.textContent =\n                    \"Synchronizacja danych\";\n\n            },1350);\n\n\n        const startTime =\n            Date.now();\n\n\n        try{\n\n            const separator =\n                WEBHOOK_URL.includes(\"?\")\n                ? \"&#038;\"\n                : \"?\";\n\n\n            const requestUrl =\n                WEBHOOK_URL +\n                separator +\n                \"id=\" +\n                encodeURIComponent(\n                    ticketId\n                );\n\n\n            const response =\n                await fetch(\n                    requestUrl,\n                    {\n                        method:\"GET\",\n                        mode:\"cors\",\n                        cache:\"no-store\",\n                        headers:{\n                            \"Accept\":\"application\/json\"\n                        }\n                    }\n                );\n\n\n            if(!response.ok){\n\n                throw new Error(\n                    \"HTTP \" +\n                    response.status\n                );\n\n            }\n\n\n            \/*\n             Najpierw pobieramy odpowied\u017a jako TEKST.\n             Dzi\u0119ki temu \u0142atwiej wykry\u0107 b\u0142\u0105d JSON.\n            *\/\n\n            const rawResponse =\n                await response.text();\n\n\n            let data;\n\n\n            try{\n\n                data =\n                    JSON.parse(\n                        rawResponse\n                    );\n\n            }catch(jsonError){\n\n                console.error(\n                    \"Vertex RAW RESPONSE:\",\n                    rawResponse\n                );\n\n                throw jsonError;\n\n            }\n\n\n            if(\n                !data ||\n                data.success !== true\n            ){\n\n                throw new Error(\n                    \"Nie znaleziono zg\u0142oszenia\"\n                );\n\n            }\n\n\n            \/*\n             Minimalny czas animacji,\n             \u017ceby efekt wygl\u0105da\u0142 profesjonalnie.\n            *\/\n\n            const elapsed =\n                Date.now() -\n                startTime;\n\n\n            const minimumAnimation =\n                2100;\n\n\n            if(\n                elapsed <\n                minimumAnimation\n            ){\n\n                await new Promise(\n                    function(resolve){\n\n                        setTimeout(\n                            resolve,\n                            minimumAnimation -\n                            elapsed\n                        );\n\n                    }\n                );\n\n            }\n\n\n            clearTimeout(stage2);\n\n            clearTimeout(stage3);\n\n\n            showResult(\n                data,\n                ticketId\n            );\n\n\n        }catch(error){\n\n            clearTimeout(stage2);\n\n            clearTimeout(stage3);\n\n\n            console.error(\n                \"Vertex Status Error:\",\n                error\n            );\n\n\n            showError(\n                \"Nie uda\u0142o si\u0119 pobra\u0107 zg\u0142oszenia. Sprawd\u017a numer i spr\u00f3buj ponownie.\"\n            );\n\n        }\n\n    }\n\n\n    \/* ===============================================\n       KLIK\n    =============================================== *\/\n\n    button.addEventListener(\n        \"click\",\n        checkVertexStatus\n    );\n\n\n    \/* ===============================================\n       ENTER\n    =============================================== *\/\n\n    input.addEventListener(\n        \"keydown\",\n        function(event){\n\n            if(\n                event.key ===\n                \"Enter\"\n            ){\n\n                event.preventDefault();\n\n                checkVertexStatus();\n\n            }\n\n        }\n    );\n\n})();\n<\/script>\n\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>VERTEX SYSTEM Sprawd\u017a status zg\u0142oszenia. Wprowad\u017a numer zg\u0142oszenia otrzymany po zg\u0142oszeniu usterki. System Vertex sprawdzi aktualny etap realizacji bezpo\u015brednio w rejestrze operacyjnym. Centrum operacyjne SYSTEM ONLINE STATUS ZG\u0141OSZENIA Wprowad\u017a numer zg\u0142oszenia Numer znajdziesz w potwierdzeniu zg\u0142oszenia. Przyk\u0142ad: VO-0023 SPRAWD\u0179 STATUS \u0141\u0105czenie z systemem Vertex&#8230; Inicjalizacja zapytania IDENTYFIKACJA ID WERYFIKACJA REJESTRU ODCZYT STATUSU NUMER ZG\u0141OSZENIA \u2014&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-61","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/vertexoperations.pl\/index.php\/wp-json\/wp\/v2\/pages\/61","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vertexoperations.pl\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/vertexoperations.pl\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/vertexoperations.pl\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vertexoperations.pl\/index.php\/wp-json\/wp\/v2\/comments?post=61"}],"version-history":[{"count":6,"href":"https:\/\/vertexoperations.pl\/index.php\/wp-json\/wp\/v2\/pages\/61\/revisions"}],"predecessor-version":[{"id":80,"href":"https:\/\/vertexoperations.pl\/index.php\/wp-json\/wp\/v2\/pages\/61\/revisions\/80"}],"wp:attachment":[{"href":"https:\/\/vertexoperations.pl\/index.php\/wp-json\/wp\/v2\/media?parent=61"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}