{"id":873,"date":"2025-10-10T12:07:59","date_gmt":"2025-10-10T12:07:59","guid":{"rendered":"https:\/\/orangeworkx.com\/vdp-wp\/?page_id=873"},"modified":"2025-11-04T12:01:17","modified_gmt":"2025-11-04T12:01:17","slug":"project","status":"publish","type":"page","link":"https:\/\/orangeworkx.com\/vdp-wp\/project\/","title":{"rendered":"Project"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"873\" class=\"elementor elementor-873\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7bc5384 e-flex e-con-boxed e-con e-parent\" data-id=\"7bc5384\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f2a0dd8 elementor-widget elementor-widget-elementskit-heading\" data-id=\"f2a0dd8\" data-element_type=\"widget\" data-widget_type=\"elementskit-heading.default\">\n\t\t\t\t\t<div class=\"ekit-wid-con\" ><div class=\"ekit-heading elementskit-section-title-wraper text_left   ekit_heading_tablet-   ekit_heading_mobile-\"><h2 class=\"ekit-heading--title elementskit-section-title \">Projects<\/h2>\t\t\t\t<div class='ekit-heading__description'>\n\t\t\t\t\t<p><a href=\"https:\/\/orangeworkx.com\/vdp-wp\">Home<\/a> \/ Projects<\/p>\n\t\t\t\t<\/div>\n\t\t\t<\/div><\/div>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7963d76 e-con-full e-flex e-con e-parent\" data-id=\"7963d76\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e0b2811 elementor-widget elementor-widget-shortcode\" data-id=\"e0b2811\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">\n    <section class=\"projects-section\">\n        <h1 class=\"display-5 mb-5\">Our Projects<\/h1>\n\n        <!-- Tabs -->\n        <div class=\"tabs\">\n            <button class=\"tab active\" data-tab=\"completed\">Completed<\/button><button class=\"tab \" data-tab=\"ongoing\">OnGoing<\/button>        <\/div>\n\n        <!-- Filters (will be loaded dynamically) -->\n        <div class=\"filters\">\n            <button class=\"filter active\" data-filter=\"all\">All<\/button>\n        <\/div>\n\n        <!-- AJAX container -->\n        <div id=\"projects-container\">\n            <div class=\"loading\" style=\"display:none;\">Loading...<\/div>\n            <div class=\"projects-grid\"><\/div>\n            <div class=\"pagination\"><\/div>\n        <\/div>\n\n    <\/section>\n\n    <script>\njQuery(document).ready(function($) {\n\n    let currentTab = $('.tab.active').data('tab') || 'all';\n    let currentFilter = 'all';\n    let currentPage = 1;\n\n    function loadProjects(tabType = '', filterType = 'all', page = 1) {\n        $('#projects-container .loading').show();\n        $('#projects-container .projects-grid').hide();\n\n        $.ajax({\n            url: 'https:\/\/orangeworkx.com\/vdp-wp\/wp-admin\/admin-ajax.php',\n            type: 'POST',\n            dataType: 'json',\n            data: {\n                action: 'load_filtered_projects',\n                tab: tabType,\n                filter: filterType,\n                paged: page,\n            },\n            success: function(response) {\n                \/\/ Replace project grid & pagination\n                $('#projects-container .projects-grid').html(response.html).fadeIn();\n                $('#projects-container .pagination').html(response.pagination);\n                $('#projects-container .loading').hide();\n\n                \/\/ === Always rebuild category filters (to show them consistently)\n                if (response.filters && response.filters.length > 0) {\n                    let filtersHTML = '<button class=\"filter\" data-filter=\"all\">All<\/button>';\n                    response.filters.forEach(cat => {\n                        filtersHTML += '<button class=\"filter\" data-filter=\"' + cat.slug + '\">' + cat.name + '<\/button>';\n                    });\n                    $('.filters').html(filtersHTML);\n                }\n\n                \/\/ Maintain active states\n                $('.filters .filter').removeClass('active');\n                $('.filters .filter[data-filter=\"' + currentFilter + '\"]').addClass('active');\n\n                $('.tabs .tab').removeClass('active');\n                $('.tabs .tab[data-tab=\"' + currentTab + '\"]').addClass('active');\n            },\n            error: function() {\n                $('#projects-container .loading').hide();\n                $('#projects-container .projects-grid').html('<p>Error loading projects.<\/p>').fadeIn();\n            }\n        });\n    }\n\n    \/\/ === Initial load\n    loadProjects(currentTab, currentFilter, currentPage);\n\n    \/\/ === Tab Click ===\n    $(document).on('click', '.tab', function() {\n        $('.tab').removeClass('active');\n        $(this).addClass('active');\n        currentTab = $(this).data('tab');\n        currentFilter = 'all';\n        currentPage = 1;\n        loadProjects(currentTab, currentFilter, currentPage);\n    });\n\n    \/\/ === Filter Click ===\n    $(document).on('click', '.filter', function() {\n        $('.filter').removeClass('active');\n        $(this).addClass('active');\n        currentFilter = $(this).data('filter');\n        currentPage = 1;\n        loadProjects(currentTab, currentFilter, currentPage);\n    });\n\n    \/\/ === Pagination Click ===\n    $(document).on('click', '.ajax-page', function(e) {\n        e.preventDefault();\n        currentPage = $(this).data('page');\n        loadProjects(currentTab, currentFilter, currentPage);\n    });\n});\n<\/script>\n\n\n    <style>\n    .tabs, .filters { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-bottom:20px; }\n    .tab, .filter {\n        background:#f5f5f5; border:none; padding:10px 20px; border-radius:30px;\n        cursor:pointer; transition:all .3s; font-weight:500;\n    }\n    .tab.active, .filter.active { background:#ff6600; color:#fff; }\n    .projects-grid {\n        display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:20px;\n    }\n    .project-card { border-radius:10px; overflow:hidden; box-shadow:0 4px 15px rgba(0,0,0,0.1); transition:transform .3s; }\n    .project-card:hover { transform:translateY(-5px); }\n    .project-card img { width:100%; height:200px; object-fit:cover; }\n    .project-info { padding:15px; text-align:left; }\n    .pagination-links { margin-top:30px; }\n    .pagination-links a { padding:8px 15px; background:#eee; border-radius:5px; margin:0 3px; text-decoration:none; }\n    .pagination-links a.active, .pagination-links a:hover { background:#ff6600; color:#fff; }\n    <\/style>\n\n    \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":"<p>Projects Home \/ Projects<\/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-873","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/orangeworkx.com\/vdp-wp\/wp-json\/wp\/v2\/pages\/873","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/orangeworkx.com\/vdp-wp\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/orangeworkx.com\/vdp-wp\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/orangeworkx.com\/vdp-wp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/orangeworkx.com\/vdp-wp\/wp-json\/wp\/v2\/comments?post=873"}],"version-history":[{"count":26,"href":"https:\/\/orangeworkx.com\/vdp-wp\/wp-json\/wp\/v2\/pages\/873\/revisions"}],"predecessor-version":[{"id":2891,"href":"https:\/\/orangeworkx.com\/vdp-wp\/wp-json\/wp\/v2\/pages\/873\/revisions\/2891"}],"wp:attachment":[{"href":"https:\/\/orangeworkx.com\/vdp-wp\/wp-json\/wp\/v2\/media?parent=873"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}