{"id":43450,"date":"2026-06-19T15:25:57","date_gmt":"2026-06-19T12:25:57","guid":{"rendered":"https:\/\/arkantech.net\/?page_id=43450"},"modified":"2026-06-19T15:37:50","modified_gmt":"2026-06-19T12:37:50","slug":"repairs-section","status":"publish","type":"page","link":"https:\/\/arkantech.net\/en\/repairs-section\/","title":{"rendered":"Repairs Section"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"43450\" class=\"elementor elementor-43450\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0c96d4a e-con-full e-flex e-con e-parent\" data-id=\"0c96d4a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-10dd773 elementor-widget__width-inherit elementor-widget elementor-widget-shortcode\" data-id=\"10dd773\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">        <div class=\"wc-repair-tracking-widget w-full max-w-4xl mx-auto my-12\" dir=\"ltr\" x-data=\"repairTracking()\">\n            <!-- Form State -->\n            <div x-show=\"results.length === 0\" class=\"bg-white rounded-2xl shadow-2xl overflow-hidden\" x-transition:enter=\"transition ease-out duration-300\" x-transition:enter-start=\"opacity-0 transform scale-95\" x-transition:enter-end=\"opacity-100 transform scale-100\">\n                <div class=\"md:flex\">\n                    <div class=\"md:w-1\/2 bg-blue-600 p-10 text-white flex flex-col justify-center\">\n                        <h2 class=\"text-3xl font-extrabold mb-4\">Track Your Device<\/h2>\n                        <p class=\"text-blue-100 text-lg mb-8\">Enter your phone number to check the live status of your repair, view details, and complete your payment securely.<\/p>\n                        <div class=\"hidden md:block\">\n                            <svg class=\"w-32 h-32 text-blue-400 opacity-50\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z\"><\/path><\/svg>\n                        <\/div>\n                    <\/div>\n                    <div class=\"md:w-1\/2 p-10 lg:p-14 bg-gray-50 flex flex-col justify-center\">\n                        <form @submit.prevent=\"trackRepair\" class=\"space-y-6\">\n                            <div>\n                                <label class=\"block text-sm font-bold text-gray-700 mb-2 uppercase tracking-wide\">Phone Number<\/label>\n                                <div class=\"relative\">\n                                    <div class=\"absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none\">\n                                        <svg class=\"h-6 w-6 text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z\"><\/path><\/svg>\n                                    <\/div>\n                                    <input type=\"text\" x-model=\"phone\" required class=\"block w-full pl-12 pr-4 py-4 border-2 border-gray-200 rounded-xl leading-5 bg-white placeholder-gray-400 focus:outline-none focus:ring-4 focus:ring-blue-100 focus:border-blue-500 sm:text-lg transition duration-150 ease-in-out\" placeholder=\"05XXXXXXXX\">\n                                <\/div>\n                            <\/div>\n                            <button type=\"submit\" :disabled=\"loading\" class=\"w-full flex justify-center py-4 px-4 border border-transparent text-lg font-extrabold rounded-xl text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-4 focus:ring-blue-300 transition duration-150 ease-in-out shadow-lg hover:shadow-xl transform hover:-translate-y-0.5\">\n                                <span x-show=\"!loading\">Check Status<\/span>\n                                <svg x-show=\"loading\" class=\"animate-spin h-6 w-6 text-white\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\"><circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"><\/circle><path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"><\/path><\/svg>\n                            <\/button>\n                            <div x-show=\"error\" class=\"bg-red-50 border-l-4 border-red-500 p-4 rounded-md shadow-sm\">\n                                <div class=\"flex\">\n                                    <div class=\"flex-shrink-0\"><svg class=\"h-5 w-5 text-red-400\" viewBox=\"0 0 20 20\" fill=\"currentColor\"><path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z\" clip-rule=\"evenodd\" \/><\/svg><\/div>\n                                    <div class=\"ml-3\"><p class=\"text-sm font-medium text-red-800\" x-text=\"error\"><\/p><\/div>\n                                <\/div>\n                            <\/div>\n                        <\/form>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- Result State -->\n            <div x-show=\"results.length > 0\" class=\"space-y-6\" style=\"display: none;\" x-transition:enter=\"transition ease-out duration-500\" x-transition:enter-start=\"opacity-0 transform translate-y-4\" x-transition:enter-end=\"opacity-100 transform translate-y-0\">\n                \n                <!-- Header -->\n                <div class=\"bg-white rounded-2xl shadow-sm border border-gray-100 p-6 flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0\">\n                    <div class=\"flex items-center space-x-4\">\n                        <div class=\"bg-blue-100 p-3 rounded-full text-blue-600\">\n                            <svg class=\"w-8 h-8\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\"><\/path><\/svg>\n                        <\/div>\n                        <div>\n                            <h3 class=\"text-2xl font-extrabold text-gray-900\">Repair Status<\/h3>\n                            <p class=\"text-gray-500 font-medium\">Found <span x-text=\"results.length\"><\/span> repairs for this number<\/p>\n                        <\/div>\n                    <\/div>\n                    <button @click=\"resetForm\" class=\"inline-flex items-center px-4 py-2 border border-gray-300 rounded-lg shadow-sm text-sm font-bold text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition\">\n                        <svg class=\"w-4 h-4 mr-2\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M10 19l-7-7m0 0l7-7m-7 7h18\"><\/path><\/svg>\n                        Track Another                    <\/button>\n                <\/div>\n\n                <!-- Loop through results -->\n                <template x-for=\"(result, index) in results\" :key=\"result.id\">\n                    <div class=\"bg-white rounded-2xl shadow-xl overflow-hidden border border-gray-100 relative\">\n                        <!-- 'New' Badge for first item -->\n                        <div x-show=\"index === 0\" class=\"absolute top-0 right-0 bg-blue-500 text-white text-xs font-bold px-3 py-1 rounded-bl-lg rounded-tr-lg z-10 shadow-sm uppercase tracking-wide\">\n                            Latest                        <\/div>\n\n                        <div class=\"p-6 md:p-10\">\n                            <div class=\"flex justify-between items-center mb-8 pb-4 border-b border-gray-100\">\n                                <div>\n                                    <h4 class=\"text-xl font-bold text-gray-900\" x-text=\"result.device_model\"><\/h4>\n                                    <p class=\"text-sm text-gray-400 font-medium\">#<span x-text=\"result.id\"><\/span><\/p>\n                                <\/div>\n                            <\/div>\n\n                            <!-- Progress Tracker -->\n                            <div class=\"mb-12 relative\">\n                                <div class=\"overflow-hidden h-3 mb-4 text-xs flex rounded-full bg-gray-200\">\n                                    <div :style=\"'width: ' + getProgressPercentage(result.raw_status) + '%'\" class=\"shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-blue-500 transition-all duration-1000 ease-in-out\"><\/div>\n                                <\/div>\n                                <div class=\"flex justify-between text-xs sm:text-sm font-bold text-gray-500 mt-2\">\n                                    <div :class=\"{'text-blue-600': ['pending', 'in_progress', 'waiting_parts', 'ready', 'delivered'].includes(result.raw_status)}\">Received<\/div>\n                                    <div :class=\"{'text-blue-600': ['in_progress', 'waiting_parts', 'ready', 'delivered'].includes(result.raw_status)}\" class=\"text-center\">In Progress<\/div>\n                                    <div :class=\"{'text-blue-600': ['ready', 'delivered'].includes(result.raw_status)}\" class=\"text-center\">Ready<\/div>\n                                    <div :class=\"{'text-blue-600': ['delivered'].includes(result.raw_status)}\" class=\"text-right\">Delivered<\/div>\n                                <\/div>\n                            <\/div>\n\n                            <div class=\"grid grid-cols-1 md:grid-cols-3 gap-8\">\n                                <!-- Details Grid -->\n                                <div class=\"md:col-span-2 space-y-6\">\n                                    <div class=\"bg-gray-50 rounded-xl p-6 border border-gray-100\">\n                                        <h4 class=\"text-sm uppercase tracking-wider font-bold text-gray-500 mb-4\">Status Details<\/h4>\n                                        <div class=\"flex items-center\">\n                                            <span class=\"inline-flex items-center px-4 py-2 rounded-full text-md font-bold shadow-sm\"\n                                                :class=\"{\n                                                    'bg-yellow-100 text-yellow-800': result.raw_status === 'pending',\n                                                    'bg-blue-100 text-blue-800': result.raw_status === 'in_progress',\n                                                    'bg-orange-100 text-orange-800': result.raw_status === 'waiting_parts',\n                                                    'bg-green-100 text-green-800': result.raw_status === 'ready',\n                                                    'bg-gray-100 text-gray-800': result.raw_status === 'delivered',\n                                                }\">\n                                                <span class=\"w-2 h-2 rounded-full mr-2\" \n                                                    :class=\"{\n                                                        'bg-yellow-400': result.raw_status === 'pending',\n                                                        'bg-blue-400': result.raw_status === 'in_progress',\n                                                        'bg-orange-400': result.raw_status === 'waiting_parts',\n                                                        'bg-green-400': result.raw_status === 'ready',\n                                                        'bg-gray-400': result.raw_status === 'delivered',\n                                                    }\"><\/span>\n                                                <span x-text=\"result.status\"><\/span>\n                                            <\/span>\n                                        <\/div>\n                                    <\/div>\n                                <\/div>\n\n                                <!-- Payment & Total Card -->\n                                <div class=\"md:col-span-1\">\n                                    <div class=\"bg-gray-900 rounded-xl p-6 shadow-lg text-white h-full flex flex-col justify-between transform transition duration-300 hover:scale-105\">\n                                        <div>\n                                            <h4 class=\"text-sm uppercase tracking-wider font-bold text-gray-400 mb-2\">Payment Summary<\/h4>\n                                            <div class=\"flex items-end space-x-2 mt-4\">\n                                                <span class=\"text-4xl font-black text-white\" x-text=\"result.total_price\"><\/span>\n                                                <span class=\"text-xl font-bold text-gray-400 pb-1\">\u0631.\u0633<\/span>\n                                            <\/div>\n                                            <div class=\"mt-4 flex items-center\">\n                                                <span class=\"text-sm font-bold px-2 py-1 rounded\" :class=\"result.payment_status === 'paid' ? 'bg-green-500\/20 text-green-400' : 'bg-red-500\/20 text-red-400'\" x-text=\"result.payment_status === 'paid' ? 'Paid' : 'Unpaid'\"><\/span>\n                                            <\/div>\n                                        <\/div>\n                                        \n                                        <div class=\"mt-8\" x-show=\"result.raw_status === 'ready' && result.payment_status === 'unpaid' && result.checkout_url\">\n                                            <a :href=\"result.checkout_url\" class=\"w-full block text-center bg-gradient-to-r from-green-400 to-green-600 hover:from-green-500 hover:to-green-700 text-white font-extrabold py-4 px-6 rounded-lg shadow-xl hover:shadow-2xl transition duration-200\">\n                                                Pay Securely Now                                            <\/a>\n                                        <\/div>\n\n                                        <div class=\"mt-8 text-center\" x-show=\"result.raw_status === 'ready' && result.payment_status === 'paid'\">\n                                            <div class=\"inline-flex items-center justify-center w-full bg-green-500\/20 border border-green-500\/30 text-green-400 font-bold py-3 px-4 rounded-lg\">\n                                                <svg class=\"w-5 h-5 mr-2\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\"><\/path><\/svg>\n                                                Payment Completed                                            <\/div>\n                                        <\/div>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/template>\n            <\/div>\n        <\/div>\n\n        <script>\n        function repairTracking() {\n            return {\n                phone: '',\n                loading: false,\n                results: [],\n                error: '',\n                trackRepair() {\n                    this.loading = true;\n                    this.error = '';\n                    jQuery.post('https:\/\/arkantech.net\/wp-admin\/admin-ajax.php', {\n                        action: 'wc_repair_track',\n                        phone: this.phone\n                    }, (response) => {\n                        this.loading = false;\n                        if (response.success && response.data.length > 0) {\n                            this.results = response.data;\n                        } else {\n                            this.error = response.data.message || 'No repairs found for this number.';\n                        }\n                    }).fail(() => {\n                        this.loading = false;\n                        this.error = 'An error occurred. Please try again.';\n                    });\n                },\n                resetForm() {\n                    this.results = [];\n                    this.phone = '';\n                },\n                getProgressPercentage(status) {\n                    const map = {\n                        'pending': 10,\n                        'in_progress': 50,\n                        'waiting_parts': 50,\n                        'ready': 90,\n                        'delivered': 100\n                    };\n                    return map[status] || 0;\n                }\n            }\n        }\n        <\/script>\n        <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":30,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-43450","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/arkantech.net\/en\/wp-json\/wp\/v2\/pages\/43450","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/arkantech.net\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/arkantech.net\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/arkantech.net\/en\/wp-json\/wp\/v2\/users\/30"}],"replies":[{"embeddable":true,"href":"https:\/\/arkantech.net\/en\/wp-json\/wp\/v2\/comments?post=43450"}],"version-history":[{"count":7,"href":"https:\/\/arkantech.net\/en\/wp-json\/wp\/v2\/pages\/43450\/revisions"}],"predecessor-version":[{"id":43458,"href":"https:\/\/arkantech.net\/en\/wp-json\/wp\/v2\/pages\/43450\/revisions\/43458"}],"wp:attachment":[{"href":"https:\/\/arkantech.net\/en\/wp-json\/wp\/v2\/media?parent=43450"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}