{"id":650,"date":"2025-11-21T00:44:04","date_gmt":"2025-11-20T21:44:04","guid":{"rendered":"https:\/\/www.dgl-tr.com\/?page_id=650"},"modified":"2025-12-03T01:10:25","modified_gmt":"2025-12-02T22:10:25","slug":"denizyolu-takip","status":"publish","type":"page","link":"https:\/\/www.dgl-tr.com\/index.php\/denizyolu-takip\/","title":{"rendered":"Denizyolu Takip"},"content":{"rendered":"\n<div class=\"wp-block-group is-content-justification-center is-layout-flex wp-container-core-group-is-layout-5cbff320 wp-block-group-is-layout-flex\" style=\"padding-top:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40)\">\n    <div class=\"modaltrans-wrapper\">\n        <form id=\"modaltrans-tracking-form\" class=\"modaltrans-form\">\n            <h2 class=\"modaltrans-title\">G\u00f6nderi Takip Sorgulamas\u0131<\/h2>\n\n            <div class=\"modaltrans-field\">\n                <label for=\"tracking_number\">Takip Numaras\u0131<\/label>\n                <input type=\"text\" id=\"tracking_number\" required>\n            <\/div>\n\n            <div class=\"modaltrans-field\">\n                <label for=\"tracking_by\">Takip T\u00fcr\u00fc<\/label>\n                <select id=\"tracking_by\">\n                    <option value=\"BL\">Kon\u015fimento (BL)<\/option>\n                    <option value=\"CT\">Konteyner (CT)<\/option>\n                <\/select>\n            <\/div>\n\n            <button type=\"submit\" class=\"modaltrans-btn\">\n                <span class=\"btn-text\">Sorgula<\/span>\n                <span class=\"btn-loader\"><\/span>\n            <\/button>\n        <\/form>\n\n        <div id=\"modaltrans-result\" class=\"modaltrans-result\"><\/div>\n    <\/div>\n\n    <style>\n    .modaltrans-wrapper {\n        max-width: 620px;\n        margin: 20px auto;\n        padding: 20px;\n        background: #ffffff;\n        border-radius: 10px;\n        box-shadow: 0 3px 14px rgba(0,0,0,0.08);\n        font-family: Arial, sans-serif;\n        color: #000;\n    }\n\n    .modaltrans-title {\n        text-align: center;\n        margin-bottom: 20px;\n        color: #cc0000;\n    }\n\n    .modaltrans-form label {\n        font-weight: bold;\n        margin-bottom: 5px;\n        display: block;\n        color: #000;\n    }\n\n    .modaltrans-field {\n        margin-bottom: 15px;\n    }\n\n    .modaltrans-form input,\n    .modaltrans-form select {\n        width: 100%;\n        padding: 10px;\n        border: 1px solid #aaa;\n        border-radius: 5px;\n        font-size: 14px;\n        color: #000;\n    }\n\n    .modaltrans-btn {\n        width: 100%;\n        background: #cc0000;\n        color: white;\n        padding: 12px;\n        border: none;\n        border-radius: 5px;\n        font-size: 16px;\n        cursor: pointer;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        position: relative;\n    }\n    .modaltrans-btn:hover {\n        background: #a80000;\n    }\n\n    .btn-loader {\n        width: 18px;\n        height: 18px;\n        border: 3px solid #fff;\n        border-top: 3px solid transparent;\n        border-radius: 50%;\n        animation: spin 0.7s linear infinite;\n        display: none;\n        margin-left: 10px;\n    }\n\n    .loading .btn-text {\n        opacity: 0.4;\n    }\n    .loading .btn-loader {\n        display: inline-block;\n    }\n\n    @keyframes spin {\n        from { transform: rotate(0deg) }\n        to   { transform: rotate(360deg) }\n    }\n\n    .modaltrans-result {\n        margin-top: 20px;\n        font-size: 14px;\n        color: #000;\n    }\n\n    .tracking-table {\n        border-collapse: collapse;\n        width: 100%;\n        margin-top: 15px;\n        background: #fff;\n        border-radius: 8px;\n        overflow: hidden;\n        color: #000;\n    }\n\n    .tracking-table th {\n        background: #cc0000;\n        color: #fff;\n        padding: 10px;\n        text-align: left;\n    }\n\n    .tracking-table td {\n        padding: 10px;\n        border-bottom: 1px solid #ddd;\n    }\n\n    .tracking-table tr:nth-child(even) {\n        background: #f9f9f9;\n    }\n\n    .container-header-row td {\n        background: #ffd1d1;\n        font-weight: bold;\n        text-align: center;\n        color: #000;\n    }\n\n    .error-msg {\n        color: #a80000;\n        background: #ffe5e5;\n        border-left: 4px solid #a80000;\n        padding: 10px;\n        border-radius: 5px;\n    }\n    <\/style>\n\n    <script>\n    document.addEventListener(\"DOMContentLoaded\", function() {\n\n        const form = document.getElementById('modaltrans-tracking-form');\n        const btn = form.querySelector('.modaltrans-btn');\n        const resultDiv = document.getElementById('modaltrans-result');\n\n        form.addEventListener('submit', function(e) {\n            e.preventDefault();\n\n            const trackingNumber = document.getElementById('tracking_number').value.trim();\n            const trackingBy = document.getElementById('tracking_by').value;\n\n            resultDiv.innerHTML = \"\";\n            btn.classList.add(\"loading\");\n\n            fetch(\n                \"https:\/\/www.dgl-tr.com\/wp-admin\/admin-ajax.php?action=modaltrans_track\" +\n                \"&tracking=\" + encodeURIComponent(trackingNumber) +\n                \"&tracking_by=\" + encodeURIComponent(trackingBy)\n            )\n            .then(r => r.json())\n            .then(data => {\n                btn.classList.remove(\"loading\");\n\n                if (data.error) {\n                    resultDiv.innerHTML = `<div class=\"error-msg\">${data.error}<\/div>`;\n                    return;\n                }\n\n                if (data.success) {\n                    let html = '<h3>Takip Detaylar\u0131<\/h3>';\n                    html += '<table class=\"tracking-table\">';\n\n                    for (const [key, value] of Object.entries(data.data)) {\n\n                        const fieldNames = {\n                            \"Status\": \"Durum\",\n                            \"Carrier\": \"Ta\u015f\u0131y\u0131c\u0131\",\n                            \"Estimated Time of Departure\": \"Tahmini Kalk\u0131\u015f Zaman\u0131\",\n                            \"Actual Time of Departure\": \"Ger\u00e7ekle\u015fen Kalk\u0131\u015f Zaman\u0131\",\n                            \"Estimated Time of Arrival\": \"Tahmini Var\u0131\u015f Zaman\u0131\",\n                            \"Actual Time of Arrival\": \"Ger\u00e7ekle\u015fen Var\u0131\u015f Zaman\u0131\",\n                        };\n\n                        if (key === 'Containers' && Array.isArray(value)) {\n                            html += `<tr><th colspan=\"2\">Konteynerler<\/th><\/tr>`;\n                            value.forEach(container => {\n                                html += `<tr class=\"container-header-row\"><td colspan=\"2\">Konteyner<\/td><\/tr>`;\n                                for (const [ck, cv] of Object.entries(container)) {\n                                    const containerNames = {\n                                        \"Container Number\": \"Konteyner Numaras\u0131\",\n                                        \"Status\": \"Durum\",\n                                        \"Last Update\": \"Son G\u00fcncelleme\"\n                                    };\n                                    html += `<tr><td>${containerNames[ck] || ck}<\/td><td>${cv}<\/td><\/tr>`;\n                                }\n                            });\n                        } else {\n                            html += `<tr><td>${fieldNames[key] || key}<\/td><td>${value}<\/td><\/tr>`;\n                        }\n                    }\n\n                    html += '<\/table>';\n                    resultDiv.innerHTML = html;\n                } else {\n                    resultDiv.innerHTML = `<div class=\"error-msg\">Beklenmeyen API yan\u0131t\u0131 al\u0131nd\u0131.<\/div>`;\n                }\n            })\n            .catch(() => {\n                btn.classList.remove(\"loading\");\n                resultDiv.innerHTML = `<div class=\"error-msg\">API iste\u011fi ba\u015far\u0131s\u0131z oldu.<\/div>`;\n            });\n        });\n    });\n    <\/script>\n\n    \n<\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-650","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.dgl-tr.com\/index.php\/wp-json\/wp\/v2\/pages\/650","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dgl-tr.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.dgl-tr.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.dgl-tr.com\/index.php\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dgl-tr.com\/index.php\/wp-json\/wp\/v2\/comments?post=650"}],"version-history":[{"count":30,"href":"https:\/\/www.dgl-tr.com\/index.php\/wp-json\/wp\/v2\/pages\/650\/revisions"}],"predecessor-version":[{"id":731,"href":"https:\/\/www.dgl-tr.com\/index.php\/wp-json\/wp\/v2\/pages\/650\/revisions\/731"}],"wp:attachment":[{"href":"https:\/\/www.dgl-tr.com\/index.php\/wp-json\/wp\/v2\/media?parent=650"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}