<?php
/*
Template Name: Cost Calculator New
*/
get_header('new');
?>
<link rel='stylesheet' id='style-css-css' href='https://warego.co/wp-content/themes/waregowp/assets/css/style.css' type='text/css' media='all' />

<section class="section cost-calculator-section bg-white">
    <div class="container">
        <div class="text-content text-center">
            <h1 class="section-title">Calculate Your Potential Warehouse Savings with WareGo WMS <span>Calculator</span></h1>
            <p class="section-content">
            Estimate your warehouse’s annual savings with a modern WMS ROI calculator that provides accurate results. It will give you a precise output to show exactly how much overhead cost you can eliminate within the first year of deploying a fully functional WMS solution.
            </p>
        </div>

        <div class="cost-calculator-wraper cost-calculator cost-calculator-new">
            <form action="" id="cost-calculator-form">
                <div class="step-lists-wraper">
                    <ul class="step-lists" id="tablistcst">
                        <li class="step active">
                            <a href="javascript:;" id="example-advanced-form-t-0">
                                <span class="step-dot"></span>
                                <span class="step-title">Features</span>
                            </a>
                        </li>
                        <li class="step">
                           <a href="javascript:;">
                                <span class="step-dot"></span>
                                <span class="step-title">Integrations</span>
                            </a>
                        </li>
                        <li class="step">
                            <a href="javascript:;">
                                <span class="step-dot"></span>
                                <span class="step-title">SKU & Users</span>
                            </a>
                        </li>
                        <li class="step">
                            <a href="javascript:;">
                                <span class="step-dot"></span>
                                <span class="step-title">Contact</span>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="fieldset-wraper">

                    <!-- Features Fieldset Start -->
                    <div class="fieldset-box" data-title="Features">
                        <fieldset class="fieldset form-input" id="features">
                           <h2 class="fieldset-title">Select the Features you require</h2>
                           <div class="row g-3">
                               <div class="col-lg-3 col-md-4 col-6">
                                   <div class="checkbox-card">
                                       <div class="icon">
                                           <img src="<?php echo get_template_directory_uri();?>/assets/img/cost-calculator/core-inventory.webp" alt="" loading="lazy" class="img-fluid">
                                       </div>
                                       <input type="checkbox" name="radio-group" id="radio-1" value="Core Inventory Management" class="features-input required">
                                       <label for="radio-1">Core Inventory <br> Management</label>
                                   </div>
                               </div>
                               <div class="col-lg-3 col-md-4 col-6">
                                   <div class="checkbox-card">
                                       <div class="icon">
                                           <img src="<?php echo get_template_directory_uri();?>/assets/img/cost-calculator/order-management.webp" alt="" loading="lazy" class="img-fluid">
                                       </div>
                                       <input type="checkbox" name="radio-group" id="radio-2" value="Order Management" class="features-input required">
                                       <label for="">Order <br> Management</label>
                                   </div>
                               </div>
                               <div class="col-lg-3 col-md-4 col-6">
                                   <div class="checkbox-card">
                                       <div class="icon">
                                           <img src="<?php echo get_template_directory_uri();?>/assets/img/cost-calculator/warehouse.webp" alt="" loading="lazy" class="img-fluid">
                                       </div>
                                       <input type="checkbox" name="radio-group" value="Warehouse Layout & Optimization" class="features-input required">
                                       <label for="">Warehouse <br> Layout & Optimization </label>
                                   </div>
                               </div>
                               <div class="col-lg-3 col-md-4 col-6">
                                   <div class="checkbox-card">
                                       <div class="icon">
                                           <img src="<?php echo get_template_directory_uri();?>/assets/img/cost-calculator/labor.webp" alt="" loading="lazy" class="img-fluid">
                                       </div>
                                       <input type="checkbox" name="radio-group" value="Labor Management" class="features-input required">
                                       <label for="">Labor Management</label>
                                   </div>
                               </div>
                               <div class="col-lg-3 col-md-4 col-6">
                                   <div class="checkbox-card">
                                       <div class="icon">
                                           <img src="<?php echo get_template_directory_uri();?>/assets/img/cost-calculator/counting.webp" alt="" loading="lazy" class="img-fluid">
                                       </div>
                                       <input type="checkbox" name="radio-group" value="Cycle Counting & Inventory Accuracy" class="features-input required">
                                       <label for="">Cycle Counting <br> & Inventory Accuracy</label>
                                   </div>
                               </div>
                               <div class="col-lg-3 col-md-4 col-6">
                                   <div class="checkbox-card">
                                       <div class="icon">
                                           <img src="<?php echo get_template_directory_uri();?>/assets/img/cost-calculator/reporting.webp" alt="" loading="lazy" class="img-fluid">
                                       </div>
                                       <input type="checkbox" name="radio-group" value="Reporting & Analytics " class="features-input required">
                                       <label for="">Reporting & Analytics </label>
                                   </div>
                               </div>
                               <div class="col-lg-3 col-md-4 col-6">
                                   <div class="checkbox-card">
                                       <div class="icon">
                                           <img src="<?php echo get_template_directory_uri();?>/assets/img/cost-calculator/tracking.webp" alt="" loading="lazy" class="img-fluid">
                                       </div>
                                       <input type="checkbox" name="radio-group" value="Batch & Lot Tracking" class="features-input required">
                                       <label for="">Batch & Lot Tracking  </label>
                                   </div>
                               </div>
                               <div class="col-lg-3 col-md-4 col-6">
                                   <div class="checkbox-card">
                                       <div class="icon">
                                           <img src="<?php echo get_template_directory_uri();?>/assets/img/cost-calculator/serial.webp" alt="" loading="lazy" class="img-fluid">
                                       </div>
                                       <input type="checkbox" name="radio-group" value="Serial Number Tracking" class="features-input required">
                                       <label for="">Serial Number Tracking </label>
                                   </div>
                               </div>
                               <div class="col-lg-3 col-md-4 col-6">
                                   <div class="checkbox-card">
                                       <div class="icon">
                                           <img src="<?php echo get_template_directory_uri();?>/assets/img/cost-calculator/docking.webp" alt="" loading="lazy" class="img-fluid">
                                       </div>
                                       <input type="checkbox" name="radio-group" value="Cross-docking" class="features-input required">
                                       <label for="">Cross-docking</label>
                                   </div>
                               </div>
                               <div class="col-lg-3 col-md-4 col-6">
                                   <div class="checkbox-card">
                                       <div class="icon">
                                           <img src="<?php echo get_template_directory_uri();?>/assets/img/cost-calculator/assembly.webp" alt="" loading="lazy" class="img-fluid">
                                       </div>
                                       <input type="checkbox" name="radio-group" value="Kitting & Assembly" class="features-input required">
                                       <label for="">Kitting & Assembly</label>
                                   </div>
                               </div>
                               <div class="col-lg-3 col-md-4 col-6">
                                   <div class="checkbox-card">
                                       <div class="icon">
                                           <img src="<?php echo get_template_directory_uri();?>/assets/img/cost-calculator/rfid-integ.webp" alt="" loading="lazy" class="img-fluid">
                                       </div>
                                       <input type="checkbox" name="radio-group" value="RFID Integration" id="radio-5" value="RFID Integration" class="features-input required">
                                       <label for="radio-1">RFID Integration </label>
                                   </div>
                               </div>
                               <div class="col-lg-3 col-md-4 col-6">
                                   <div class="checkbox-card">
                                       <div class="icon">
                                           <img src="<?php echo get_template_directory_uri();?>/assets/img/cost-calculator/palletization.webp" alt="" loading="lazy" class="img-fluid">
                                       </div>
                                       <input type="checkbox" name="radio-group" value="Palletization" class="features-input required">
                                       <label for="">Palletization</label>
                                   </div>
                               </div>
                           </div>
                       </fieldset>
                    </div>
                    <!-- Features Fieldset End -->

                    <!-- Integration Fieldset Start -->
                    <div class="fieldset-box" id="integrations" data-title="Integrations">
                        <fieldset class="fieldset">
                           <h2 class="fieldset-title">Select the Integrations you require</h2>
                            
                           <div class="integration-tabs">
                            <ul class="nav nav-tabs" id="integrationTabs" role="tablist">
                                <li class="nav-item" role="presentation">
                                  <button class="nav-link active" id="erp-systems-tab" data-bs-toggle="tab" data-bs-target="#erp-systems" type="button" role="tab" aria-controls="erp-systems" aria-selected="true">ERP Systems</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                  <button class="nav-link" id="finance-tools-tab" data-bs-toggle="tab" data-bs-target="#finance-tools" type="button" role="tab" aria-controls="finance-tools" aria-selected="false">Finance Tools</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                  <button class="nav-link" id="CRMS-tab" data-bs-toggle="tab" data-bs-target="#CRMS" type="button" role="tab" aria-controls="CRMS" aria-selected="false">CRMS</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                  <button class="nav-link" id="shipping-tools-tab" data-bs-toggle="tab" data-bs-target="#shipping-tools" type="button" role="tab" aria-controls="shipping-tools" aria-selected="false">Shipping Tools</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                  <button class="nav-link" id="e-commerce-platforms-tab" data-bs-toggle="tab" data-bs-target="#e-commerce-platforms" type="button" role="tab" aria-controls="e-commerce-platforms" aria-selected="false">E-commerce Platforms</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                  <button class="nav-link" id="edi-solutions-tab" data-bs-toggle="tab" data-bs-target="#edi-solutions" type="button" role="tab" aria-controls="edi-solutions" aria-selected="false">EDI Solutions</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                  <button class="nav-link" id="bi-tools-tab" data-bs-toggle="tab" data-bs-target="#bi-tools" type="button" role="tab" aria-controls="bi-tools" aria-selected="false">Business Intelligence (BI) Tools</button>
                                </li>
                              </ul>
                              <div class="tab-content tab-content mt-3 mt-lg-5
 " id="integrationTabsContent">
                                <div class="tab-pane fade show active" id="erp-systems" role="tabpanel" aria-labelledby="erp-systems-tab">
                                    <div class="row g-3">
                                        <div class="col-lg-3 col-md-4 col-6">
                                            <div class="checkbox-card">
                                                <div class="icon">
                                                    <img src="<?php echo get_template_directory_uri();?>/assets/img/cost-calculator/sap.webp" alt="" loading="lazy" class="img-fluid">
                                                </div>
                                                <input type="checkbox" name="radio-group" value="SAP" class="features-input required select_audience">
                                                <label for="">SAP</label>
                                            </div>
                                        </div>
                                        <div class="col-lg-3 col-md-4 col-6">
                                            <div class="checkbox-card">
                                                <div class="icon">
                                                    <img src="<?php echo get_template_directory_uri();?>/assets/img/cost-calculator/oracle.webp" alt="" loading="lazy" class="img-fluid">
                                                </div>
                                                <input type="checkbox" name="radio-group" value="Oracle ERP Cloud" class="features-input required select_audience">
                                                <label for="">Oracle ERP Cloud </label>
                                            </div>
                                        </div>
                                        <div class="col-lg-3 col-md-4 col-6">
                                            <div class="checkbox-card">
                                                <div class="icon">
                                                    <img src="<?php echo get_template_directory_uri();?>/assets/img/cost-calculator/ms-dynamics.webp" alt="" loading="lazy" class="img-fluid">
                                                </div>
                                                <input type="checkbox" name="radio-group" value="Microsoft Dynamics 365 " class="features-input required select_audience">
                                                <label for="">Microsoft <br> Dynamics 365  </label>
                                            </div>
                                        </div>
                                        <div class="col-lg-3 col-md-4 col-6">
                                            <div class="checkbox-card">
                                                <div class="icon">
                                                    <img src="<?php echo get_template_directory_uri();?>/assets/img/cost-calculator/nsuite.webp" alt="" loading="lazy" class="img-fluid">
                                                </div>
                                                <input type="checkbox" name="radio-group" value="NetSuite" class="features-input required select_audience">
                                                <label for="">NetSuite</label>
                                            </div>
                                        </div>
                                        <div class="col-lg-3 col-md-4 col-6">
                                            <div class="checkbox-card">
                                                <div class="icon">
                                                    <img src="<?php echo get_template_directory_uri();?>/assets/img/cost-calculator/quantum.webp" alt="" loading="lazy" class="img-fluid">
                                                </div>
                                                <input type="checkbox" name="radio-group" value="Quantum" class="features-input required select_audience">
                                                <label for="">Quantum</label>
                                            </div>
                                        </div>
                                        <div class="col-lg-3 col-md-4 col-6">
                                            <div class="checkbox-card">
                                                <div class="icon">
                                                    <img src="<?php echo get_template_directory_uri();?>/assets/img/cost-calculator/nova.webp" alt="" loading="lazy" class="img-fluid">
                                                </div>
                                                <input type="checkbox" name="radio-group" value="Nova" class="features-input required select_audience">
                                                <label for="">Nova </label>
                                            </div>
                                        </div>
                                        <div class="col-lg-3 col-md-4 col-6">
                                            <div class="checkbox-card">
                                                <div class="icon">
                                                    <img src="<?php echo get_template_directory_uri();?>/assets/img/cost-calculator/cuelogic.webp" alt="" loading="lazy" class="img-fluid">
                                                </div>
                                                <input type="checkbox" name="radio-group" value="Batch & Lot Tracking" class="features-input required select_audience">
                                                <label for="">Batch & Lot Tracking </label>
                                            </div>
                                        </div>
                                        <div class="col-lg-3 col-md-4 col-6">
                                            <div class="checkbox-card optimix-logo">
                                                <div class="icon">
                                                    <img src="<?php echo get_template_directory_uri();?>/assets/img/cost-calculator/optimix-logo.webp" alt="" loading="lazy" class="img-fluid">
                                                </div>
                                                <input type="checkbox" name="radio-group" value="Optimix" class="features-input required select_audience">
                                                <label for="">Optimix</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="finance-tools" role="tabpanel" aria-labelledby="finance-tools-tab">
                                    <div class="row g-3">
                                        <div class="col-lg-3 col-md-4 col-6">
                                            <div class="checkbox-card">
                                                <div class="icon">
                                                    <img src="<?php echo get_template_directory_uri();?>/assets/img/cost-calculator/quickbooks.webp" alt="" loading="lazy" class="img-fluid">
                                                </div>
                                                <input type="checkbox" name="radio-group" value="QuickBooks" class="features-input required select_audience">
                                                <label for="">QuickBooks</label>
                                            </div>
                                        </div>
                                        <div class="col-lg-3 col-md-4 col-6">
                                            <div class="checkbox-card">
                                                <div class="icon">
                                                    <img src="<?php echo get_template_directory_uri();?>/assets/img/cost-calculator/xero.webp" alt="" loading="lazy" class="img-fluid">
                                                </div>
                                                <input type="checkbox" name="radio-group" value="Xero" class="features-input required select_audience">
                                                <label for="">Xero</label>
                                            </div>
                                        </div>
                                        <div class="col-lg-3 col-md-4 col-6">
                                            <div class="checkbox-card">
                                                <div class="icon">
                                                    <img src="<?php echo get_template_directory_uri();?>/assets/img/cost-calculator/sap.webp" alt="" loading="lazy" class="img-fluid">
                                                </div>
                                                <input type="checkbox" name="radio-group" value="SAP" class="features-input required select_audience">
                                                <label for="">SAP </label>
                                            </div>
                                        </div>
                                        <div class="col-lg-3 col-md-4 col-6">
                                            <div class="checkbox-card">
                                                <div class="icon">
                                                    <img src="<?php echo get_template_directory_uri();?>/assets/img/cost-calculator/sage.webp" alt="" loading="lazy" class="img-fluid">
                                                </div>
                                                <input type="checkbox" name="radio-group" value="Sage" class="features-input required select_audience">
                                                <label for="">Sage</label>
                                            </div>
                                        </div>
                                        <div class="col-lg-3 col-md-4 col-6">
                                            <div class="checkbox-card">
                                                <div class="icon">
                                                    <img src="<?php echo get_template_directory_uri();?>/assets/img/cost-calculator/nsuite.webp" alt="" loading="lazy" class="img-fluid">
                                                </div>
                                                <input type="checkbox" name="radio-group" value="NetSuite" class="features-input required select_audience">
                                                <label for="">NetSuite</label>
                                            </div>
                                        </div>
                                        <div class="col-lg-3 col-md-4 col-6">
                                            <div class="checkbox-card">
                                                <div class="icon">
                                                    <img src="<?php echo get_template_directory_uri();?>/assets/img/cost-calculator/f-logo.webp" alt="" loading="lazy" class="img-fluid">
                                                </div>
                                                <input type="checkbox" name="radio-group" value="FreshBooks" class="features-input required select_audience">
                                                <label for="">FreshBooks</label>
                                            </div>
                                        </div>
                                        <div class="col-lg-3 col-md-4 col-6">
                                            <div class="checkbox-card">
                                                <div class="icon">
                                                    <img src="<?php echo get_template_directory_uri();?>/assets/img/cost-calculator/quick.webp" alt="" loading="lazy" class="img-fluid">
                                                </div>
                                                <input type="checkbox" name="radio-group" value="Quick" class="features-input required select_audience">
                                                <label for="">Quick</label>
                                            </div>
                                        </div>
                                        <div class="col-lg-3 col-md-4 col-6">
                                            <div class="checkbox-card">
                                                <div class="icon">
                                                    <img src="<?php echo get_template_directory_uri();?>/assets/img/cost-calculator/mint.webp" alt="" loading="lazy" class="img-fluid">
                                                </div>
                                                <input type="checkbox" name="radio-group" value="Mint" class="features-input required select_audience">
                                                <label for="">Mint</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="CRMS" role="tabpanel" aria-labelledby="CRMS-tab">
                                    <div class="row g-3">
                                        <div class="col-lg-3 col-md-4 col-6">
                                            <div class="checkbox-card">
                                                <div class="icon">
                                                    <img src="<?php echo get_template_directory_uri();?>/assets/img/cost-calculator/saleforce.webp" alt="" loading="lazy" class="img-fluid">
                                                </div>
                                                <input type="checkbox" name="radio-group" value="Saleforce" class="features-input required select_audience">
                                                <label for="">Saleforce</label>
                                            </div>
                                        </div>
                                        <div class="col-lg-3 col-md-4 col-6">
                                            <div class="checkbox-card">
                                                <div class="icon">
                                                    <img src="<?php echo get_template_directory_uri();?>/assets/img/cost-calculator/ms-dynamics.webp" alt="" loading="lazy" class="img-fluid">
                                                </div>
                                                <input type="checkbox" name="radio-group" value="Microsoft Dynamics 365" class="features-input required select_audience">
                                                <label for=""> Microsoft <br> Dynamics 365  </label>
                                            </div>
                                        </div>
                                        <div class="col-lg-3 col-md-4 col-6">
                                            <div class="checkbox-card">
                                                <div class="icon">
                                                    <img src="<?php echo get_template_directory_uri();?>/assets/img/cost-calculator/hubspot.webp" alt="" loading="lazy" class="img-fluid">
                                                </div>
                                                <input type="checkbox" name="radio-group" value="HubSpot" class="features-input required select_audience">
                                                <label for="">HubSpot </label>
                                            </div>
                                        </div>
                                        <div class="col-lg-3 col-md-4 col-6">
                                            <div class="checkbox-card">
                                                <div class="icon">
                                                    <img src="<?php echo get_template_directory_uri();?>/assets/img/cost-calculator/odoo.webp" alt="" loading="lazy" class="img-fluid">
                                                </div>
                                                <input type="checkbox" name="radio-group" value="Odoo" class="features-input required select_audience">
                                                <label for="">Odoo</label>
                                            </div>
                                        </div>
                                        <div class="col-lg-3 col-md-4 col-6">
                                            <div class="checkbox-card">
                                                <div class="icon">
                                                    <img src="<?php echo get_template_directory_uri();?>/assets/img/cost-calculator/circle-logo.webp" alt="" loading="lazy" class="img-fluid">
                                                </div>
                                                <input type="checkbox" name="radio-group" value="Bitrix" class="features-input required select_audience">
                                                <label for="">Bitrix</label>
                                            </div>
                                        </div>
                                        <div class="col-lg-3 col-md-4 col-6">
                                            <div class="checkbox-card">
                                                <div class="icon">
                                                    <img src="<?php echo get_template_directory_uri();?>/assets/img/cost-calculator/apetito.webp" alt="" loading="lazy" class="img-fluid">
                                                </div>
                                                <input type="checkbox" name="radio-group" value="Apetito" class="features-input required select_audience">
                                                <label for="">Apetito</label>
                                            </div>
                                        </div>
                                        <div class="col-lg-3 col-md-4 col-6">
                                            <div class="checkbox-card">
                                                <div class="icon">
                                                    <img src="<?php echo get_template_directory_uri();?>/assets/img/cost-calculator/pipedrive.webp" alt="" loading="lazy" class="img-fluid">
                                                </div>
                                                <input type="checkbox" name="radio-group" value="Pipedrive" class="features-input required select_audience">
                                                <label for="">Pipedrive</label>
                                            </div>
                                        </div>
                                        <div class="col-lg-3 col-md-4 col-6">
                                            <div class="checkbox-card">
                                                <div class="icon">
                                                    <img src="<?php echo get_template_directory_uri();?>/assets/img/cost-calculator/creatio.webp" alt="" loading="lazy" class="img-fluid">
                                                </div>
                                                <input type="checkbox" name="radio-group" value="Creatio" class="features-input required select_audience">
                                                <label for="">Creatio </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="shipping-tools" role="tabpanel" aria-labelledby="shipping-tools-tab">
                                    <div class="row g-3">
                                        <div class="col-lg-3 col-md-4 col-6">
                                            <div class="checkbox-card">
                                                <div class="icon">
                                                    <img src="<?php echo get_template_directory_uri();?>/assets/img/cost-calculator/box-logo.webp" alt="" loading="lazy" class="img-fluid">
                                                </div>
                                                <input type="checkbox" name="radio-group" value="AfterShip" class="features-input required select_audience">
                                                <label for="">AfterShip</label>
                                            </div>
                                        </div>
                                        <div class="col-lg-3 col-md-4 col-6">
                                            <div class="checkbox-card">
                                                <div class="icon">
                                                    <img src="<?php echo get_template_directory_uri();?>/assets/img/cost-calculator/ship-station.webp" alt="" loading="lazy" class="img-fluid">
                                                </div>
                                                <input type="checkbox" name="radio-group" value="ShipStation" class="features-input required select_audience">
                                                <label for="">ShipStation </label>
                                            </div>
                                        </div>
                                        <div class="col-lg-3 col-md-4 col-6">
                                            <div class="checkbox-card">
                                                <div class="icon">
                                                    <img src="<?php echo get_template_directory_uri();?>/assets/img/cost-calculator/dhl.webp" alt="" loading="lazy" class="img-fluid">
                                                </div>
                                                <input type="checkbox" name="radio-group" value="DHL" class="features-input required select_audience">
                                                <label for="">DHL</label>
                                            </div>
                                        </div>
                                        <div class="col-lg-3 col-md-4 col-6">
                                            <div class="checkbox-card">
                                                <div class="icon">
                                                    <img src="<?php echo get_template_directory_uri();?>/assets/img/cost-calculator/ups-logo.webp" alt="" loading="lazy" class="img-fluid">
                                                </div>
                                                <input type="checkbox" name="radio-group" value="UPS" class="features-input required select_audience">
                                                <label for="">UPS</label>
                                            </div>
                                        </div>
                                        <div class="col-lg-3 col-md-4 col-6">
                                            <div class="checkbox-card">
                                                <div class="icon">
                                                    <img src="<?php echo get_template_directory_uri();?>/assets/img/cost-calculator/fedex.webp" alt="" loading="lazy" class="img-fluid">
                                                </div>
                                                <input type="checkbox" name="radio-group" value="Fedex" class="features-input required select_audience">
                                                <label for="">Fedex</label>
                                            </div>
                                        </div>
                                        <div class="col-lg-3 col-md-4 col-6">
                                            <div class="checkbox-card">
                                                <div class="icon">
                                                    <img src="<?php echo get_template_directory_uri();?>/assets/img/cost-calculator/express.webp" alt="" loading="lazy" class="img-fluid">
                                                </div>
                                                <input type="checkbox" name="radio-group" value="Express" class="features-input required select_audience">
                                                <label for="">Express</label>
                                            </div>
                                        </div>
                                        <div class="col-lg-3 col-md-4 col-6">
                                            <div class="checkbox-card">
                                                <div class="icon">
                                                    <img src="<?php echo get_template_directory_uri();?>/assets/img/cost-calculator/usps-logo.webp" alt="" loading="lazy" class="img-fluid">
                                                </div>
                                                <input type="checkbox" name="radio-group" value="USPS" class="features-input required select_audience">
                                                <label for="">USPS</label>
                                            </div>
                                        </div>
                                        <div class="col-lg-3 col-md-4 col-6">
                                            <div class="checkbox-card">
                                                <div class="icon">
                                                    <img src="<?php echo get_template_directory_uri();?>/assets/img/cost-calculator/aramex.webp" alt="" loading="lazy" class="img-fluid">
                                                </div>
                                                <input type="checkbox" name="radio-group" value="Aramex" class="features-input required select_audience">
                                                <label for="">Aramex</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="e-commerce-platforms" role="tabpanel" aria-labelledby="e-commerce-platforms-tab">
                                    <div class="row g-3">
                                        <div class="col-lg-3 col-md-4 col-6">
                                            <div class="checkbox-card">
                                                <div class="icon">
                                                    <img src="<?php echo get_template_directory_uri();?>/assets/img/cost-calculator/amazon.webp" alt="" loading="lazy" class="img-fluid">
                                                </div>
                                                <input type="checkbox" name="radio-group" value="Amazon" class="features-input required select_audience">
                                                <label for="">Amazon</label>
                                            </div>
                                        </div>
                                        <div class="col-lg-3 col-md-4 col-6">
                                            <div class="checkbox-card">
                                                <div class="icon">
                                                    <img src="<?php echo get_template_directory_uri();?>/assets/img/cost-calculator/ebay.webp" alt="" loading="lazy" class="img-fluid">
                                                </div>
                                                <input type="checkbox" name="radio-group" value="eBay" class="features-input required select_audience">
                                                <label for="">eBay</label>
                                            </div>
                                        </div>
                                        <div class="col-lg-3 col-md-4 col-6">
                                            <div class="checkbox-card">
                                                <div class="icon">
                                                    <img src="<?php echo get_template_directory_uri();?>/assets/img/cost-calculator/walmart.webp" alt="" loading="lazy" class="img-fluid">
                                                </div>
                                                <input type="checkbox" name="radio-group" value="Walmart" class="features-input required select_audience">
                                                <label for="">Walmart </label>
                                            </div>
                                        </div>
                                        <div class="col-lg-3 col-md-4 col-6">
                                            <div class="checkbox-card">
                                                <div class="icon">
                                                    <img src="<?php echo get_template_directory_uri();?>/assets/img/cost-calculator/etsy.webp" alt="" loading="lazy" class="img-fluid">
                                                </div>
                                                <input type="checkbox" name="radio-group" value="Etsy" class="features-input required select_audience">
                                                <label for="">Etsy</label>
                                            </div>
                                        </div>
                                        <div class="col-lg-3 col-md-4 col-6">
                                            <div class="checkbox-card">
                                                <div class="icon">
                                                    <img src="<?php echo get_template_directory_uri();?>/assets/img/cost-calculator/shopify.webp" alt="" loading="lazy" class="img-fluid">
                                                </div>
                                                <input type="checkbox" name="radio-group" value="Shopify" class="features-input required select_audience">
                                                <label for="">Shopify</label>
                                            </div>
                                        </div>
                                        <div class="col-lg-3 col-md-4 col-6">
                                            <div class="checkbox-card">
                                                <div class="icon">
                                                    <img src="<?php echo get_template_directory_uri();?>/assets/img/cost-calculator/rakuten.webp" alt="" loading="lazy" class="img-fluid">
                                                </div>
                                                <input type="checkbox" name="radio-group" value="Rakuten" class="features-input required select_audience">
                                                <label for="">Rakuten</label>
                                            </div>
                                        </div>
                                        <div class="col-lg-3 col-md-4 col-6">
                                            <div class="checkbox-card">
                                                <div class="icon">
                                                    <img src="<?php echo get_template_directory_uri();?>/assets/img/cost-calculator/chewy.webp" alt="" loading="lazy" class="img-fluid">
                                                </div>
                                                <input type="checkbox" name="radio-group" value="Chewy" class="features-input required select_audience">
                                                <label for="">Chewy </label>
                                            </div>
                                        </div>
                                        <div class="col-lg-3 col-md-4 col-6">
                                            <div class="checkbox-card">
                                                <div class="icon">
                                                    <img src="<?php echo get_template_directory_uri();?>/assets/img/cost-calculator/alibaba.webp" alt="" loading="lazy" class="img-fluid">
                                                </div>
                                                <input type="checkbox" name="radio-group" value="Alibaba" class="features-input required select_audience">
                                                <label for="">Alibaba</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="edi-solutions" role="tabpanel" aria-labelledby="edi-solutions-tab">
                                    <div class="row g-3">
                                        <div class="col-lg-3 col-md-4 col-6">
                                            <div class="checkbox-card">
                                                <div class="icon">
                                                    <img src="<?php echo get_template_directory_uri();?>/assets/img/cost-calculator/Informatica.webp" alt="" loading="lazy" class="img-fluid">
                                                </div>
                                                <input type="checkbox" name="radio-group" value="Informatica" class="features-input required select_audience">
                                                <label for="">Informatica</label>
                                            </div>
                                        </div>
                                        <div class="col-lg-3 col-md-4 col-6">
                                            <div class="checkbox-card">
                                                <div class="icon">
                                                    <img src="<?php echo get_template_directory_uri();?>/assets/img/cost-calculator/sync-coe.webp" alt="" loading="lazy" class="img-fluid">
                                                </div>
                                                <input type="checkbox" name="radio-group" value="Syncrofy" class="features-input required select_audience">
                                                <label for="">Syncrofy</label>
                                            </div>
                                        </div>
                                        <div class="col-lg-3 col-md-4 col-6">
                                            <div class="checkbox-card">
                                                <div class="icon">
                                                    <img src="<?php echo get_template_directory_uri();?>/assets/img/cost-calculator/logicbroker.webp" alt="" loading="lazy" class="img-fluid">
                                                </div>
                                                <input type="checkbox" name="radio-group" value="Logicbroker" class="features-input required select_audience">
                                                <label for="">Logicbroker </label>
                                            </div>
                                        </div>
                                        <div class="col-lg-3 col-md-4 col-6">
                                            <div class="checkbox-card">
                                                <div class="icon">
                                                    <img src="<?php echo get_template_directory_uri();?>/assets/img/cost-calculator/connect-pointz.webp" alt="" loading="lazy" class="img-fluid">
                                                </div>
                                                <input type="checkbox" name="radio-group" value="ConnectPointz" class="features-input required select_audience">
                                                <label for="">ConnectPointz</label>
                                            </div>
                                        </div>
                                        <div class="col-lg-3 col-md-4 col-6">
                                            <div class="checkbox-card">
                                                <div class="icon">
                                                    <img src="<?php echo get_template_directory_uri();?>/assets/img/cost-calculator/babelway.webp" alt="" loading="lazy" class="img-fluid">
                                                </div>
                                                <input type="checkbox" name="radio-group" value="Babelway" class="features-input required select_audience">
                                                <label for="">Babelway</label>
                                            </div>
                                        </div>
                                        <div class="col-lg-3 col-md-4 col-6">
                                            <div class="checkbox-card">
                                                <div class="icon">
                                                    <img src="<?php echo get_template_directory_uri();?>/assets/img/cost-calculator/edisource.webp" alt="" loading="lazy" class="img-fluid">
                                                </div>
                                                <input type="checkbox" name="radio-group" value="1 EDI Source" class="features-input required select_audience">
                                                <label for="">1 EDI Source </label>
                                            </div>
                                        </div>
                                        <div class="col-lg-3 col-md-4 col-6">
                                            <div class="checkbox-card">
                                                <div class="icon">
                                                    <img src="<?php echo get_template_directory_uri();?>/assets/img/cost-calculator/cleo.webp" alt="" loading="lazy" class="img-fluid">
                                                </div>
                                                <input type="checkbox" name="radio-group" value="Cleo" class="features-input required select_audience">
                                                <label for="">Cleo </label>
                                            </div>
                                        </div>
                                        <div class="col-lg-3 col-md-4 col-6">
                                            <div class="checkbox-card">
                                                <div class="icon">
                                                    <img src="<?php echo get_template_directory_uri();?>/assets/img/cost-calculator/adeptia.webp" alt="" loading="lazy" class="img-fluid">
                                                </div>
                                                <input type="checkbox" name="radio-group" value="Adeptia" class="features-input required select_audience">
                                                <label for="">Adeptia</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="bi-tools" role="tabpanel" aria-labelledby="bi-tools-tab">
                                    <div class="row g-3">
                                        <div class="col-lg-3 col-md-4 col-6">
                                            <div class="checkbox-card">
                                                <div class="icon">
                                                    <img src="<?php echo get_template_directory_uri();?>/assets/img/cost-calculator/zoho-inventory.webp" alt="" loading="lazy" class="img-fluid">
                                                </div>
                                                <input type="checkbox" name="radio-group" value="Zoho Inventory" class="features-input required select_audience">
                                                <label for="">Zoho Inventory</label>
                                            </div>
                                        </div>
                                        <div class="col-lg-3 col-md-4 col-6">
                                            <div class="checkbox-card">
                                                <div class="icon">
                                                    <img src="<?php echo get_template_directory_uri();?>/assets/img/cost-calculator/good-data.webp" alt="" loading="lazy" class="img-fluid">
                                                </div>
                                                <input type="checkbox" name="radio-group" value="GoodData" class="features-input required select_audience">
                                                <label for="">GoodData </label>
                                            </div>
                                        </div>
                                        <div class="col-lg-3 col-md-4 col-6">
                                            <div class="checkbox-card">
                                                <div class="icon">
                                                    <img src="<?php echo get_template_directory_uri();?>/assets/img/cost-calculator/inetsoft.webp" alt="" loading="lazy" class="img-fluid">
                                                </div>
                                                <input type="checkbox" name="radio-group" value="Inetsoft" class="features-input required select_audience">
                                                <label for="">Inetsoft </label>
                                            </div>
                                        </div>
                                        <div class="col-lg-3 col-md-4 col-6">
                                            <div class="checkbox-card">
                                                <div class="icon">
                                                    <img src="<?php echo get_template_directory_uri();?>/assets/img/cost-calculator/dundas.webp" alt="" loading="lazy" class="img-fluid">
                                                </div>
                                                <input type="checkbox" name="radio-group" value="Dundas" class="features-input required select_audience">
                                                <label for="">Dundas</label>
                                            </div>
                                        </div>
                                        <div class="col-lg-3 col-md-4 col-6">
                                            <div class="checkbox-card">
                                                <div class="icon">
                                                    <img src="<?php echo get_template_directory_uri();?>/assets/img/cost-calculator/oracle.webp" alt="" loading="lazy" class="img-fluid">
                                                </div>
                                                <input type="checkbox" name="radio-group" value="Oracle" class="features-input required select_audience">
                                                <label for="">Oracle</label>
                                            </div>
                                        </div>
                                        <div class="col-lg-3 col-md-4 col-6">
                                            <div class="checkbox-card">
                                                <div class="icon">
                                                    <img src="<?php echo get_template_directory_uri();?>/assets/img/cost-calculator/sas-viya.webp" alt="" loading="lazy" class="img-fluid">
                                                </div>
                                                <input type="checkbox" name="radio-group" value="SAS Viya" class="features-input required select_audience">
                                                <label for="">SAS Viya </label>
                                            </div>
                                        </div>
                                        <div class="col-lg-3 col-md-4 col-6">
                                            <div class="checkbox-card">
                                                <div class="icon">
                                                    <img src="<?php echo get_template_directory_uri();?>/assets/img/cost-calculator/ms-strategy.webp" alt="" loading="lazy" class="img-fluid">
                                                </div>
                                                <input type="checkbox" name="radio-group" value="MicroStrategy" class="features-input required select_audience">
                                                <label for="">MicroStrategy</label>
                                            </div>
                                        </div>
                                        <div class="col-lg-3 col-md-4 col-6">
                                            <div class="checkbox-card">
                                                <div class="icon">
                                                    <img src="<?php echo get_template_directory_uri();?>/assets/img/cost-calculator/tibc.webp" alt="" loading="lazy" class="img-fluid">
                                                </div>
                                                <input type="checkbox" name="radio-group" value="Spotfire" class="features-input required select_audience">
                                                <label for="">Spotfire</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                              </div>
                           </div>


                       </fieldset>
                    </div>
                    <!-- Integration Fieldset End -->

                    <!-- SKUs Fieldset Start -->
                    <div class="fieldset-box" data-title="Users and SKUs">
                        <fieldset class="fieldset">
                           <h2 class="fieldset-title">Input the amount of Users and SKUs that you require</h2>
                           
                           <div class="skus-box">
                                <h3 class="title">Enter the number of SKUs and users</h3>
                                <div class="form-group">
                                    <label for="num-of-sku">Number of SKUs</label>
                                    <input type="number" id="num-of-sku" class="form-control required">
                                </div>
                                <div class="form-group">
                                    <label for="num-of-users">Number of Users</label>
                                    <input type="number" id="num-of-users" class="form-control required">
                                </div>
                           </div>
                       </fieldset>
                    </div>
                    <!-- SKUs Fieldset End -->
</form>
                    <!-- Contact Form Fieldset Start -->
                    <!-- Contact Form Fieldset Start -->


<!-- Contact Form Fieldset End -->
                    <!-- Contact Form Fieldset End -->
            
                </div> 
                 <div class="fieldset-box">
                        <fieldset class="fieldset">
                           <h2 class="fieldset-title text-center">Enter your contact details</h2>
                           
                           <div class="steps-contact-form">
                               <h3 class="title">Almost there! Please provide your contact  information to <span>receive <br>
                                your personalized  cost estimate via email.</span></h3>
                                <div class="row gx-lg-5 align-items-center">
                                    <div class="col-md-6">
                                     <?php echo do_shortcode('[contact-form-7 id="fe048df" title="Cost Page Form"]'); ?>
</div>
                                     <div class="col-md-6">
                                        <div class="img-box">
                                            <img src="<?php echo get_template_directory_uri();?>/assets/img/cost-calculator/contact-img.webp" alt="" class="img-fluid">
                                        </div>
                                    </div>
                                </div>
                           </div>
                       </fieldset>
                    </div>

  
                <div class="actions-btn-wraper">
                    <a href="javascript:;" class="prev-btn">
                        <svg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M14.7421 7.00979C14.7413 7.58166 14.277 8.04458 13.7051 8.04375L3.77946 8.02941L7.80456 12.0662C8.20835 12.4711 8.2074 13.1267 7.80244 13.5305C7.39749 13.9343 6.74188 13.9334 6.33809 13.5284L0.54791 7.72147C0.144123 7.31651 0.145071 6.6609 0.550026 6.25711L6.35696 0.466931C6.76191 0.0631443 7.41753 0.0640916 7.82132 0.469047C8.2251 0.874002 8.22416 1.52962 7.8192 1.9334L3.78246 5.9585L13.7081 5.97284C14.28 5.97367 14.7429 6.43793 14.7421 7.00979Z" fill="white"/>
                        </svg>
                        Previous
                    </a>
                    <a href="javascript:;" class="next-btn">
                        Next
						<svg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.00987377 6.85354C0.0107 7.42541 0.474959 7.88833 1.04683 7.8875L10.9725 7.87316L6.94739 11.9099C6.54361 12.3149 6.54455 12.9705 6.94951 13.3743C7.35446 13.7781 8.01008 13.7771 8.41386 13.3721L14.204 7.56521C14.6078 7.16026 14.6069 6.50465 14.2019 6.10086L8.39499 0.310681C7.99004 -0.0931057 7.33442 -0.0921584 6.93064 0.312797C6.52685 0.717752 6.5278 1.37337 6.93275 1.77715L10.9695 5.80225L1.04383 5.81659C0.471967 5.81742 0.00904754 6.28168 0.00987377 6.85354Z" fill="white"/>
</svg>

                    </a>
                </div>
            

            <!-- Selected List Start -->
             <div class="selected-steps-data">
                <div class="container px-lg-0">
                    <div class="main-title">
                        <h2 class="title">Summary of Selection</h2>
                    </div>
                    <div class="row gy-4 gy-md-0 gx-3 gx-xxl-4 list-wraper">
                        <div class="col-md-4">
                            <div class="selected-lists-box" id="features-lists">
                                <h3>Features</h3>
                                <ul class="selected-lists">
                                </ul>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="selected-lists-box" id="integrations-lists">
                                <h3>Integrations</h3>
                                <ul class="selected-lists">
                                </ul>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="selected-lists-box" id="sku-lists">
                                <h3>SKU & Users</h3>
                                <ul class="selected-lists">
                                    <li data-value="sku"></li>
                                    <li data-value="users"></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
             </div>
            <!-- Selected List End -->

        </div>

    </div>
</section>

<?php if ( get_field( 'cc_section__content' ) ) : ?>
    <!-- Content Section Start -->
    <section class="section calculator-content pt-0 bg-white">
        <div class="container">
            <?php echo wp_kses_post( get_field( 'cc_section__content' ) ); ?>
        </div>
    </section>
    <!-- Content Section End -->
<?php endif; ?>


<!-- Faqs section -->
<?php
    $args = [
        'category'  => 'cost-calculator-faqs',
        'class'  => 'bg-white'
    ];
    get_template_part('templates-parts/pages/faqs-new', null, $args);
?>




<?php get_footer(); ?>  
 
    <script>
        
       $(document).ready(function () {
    function featuresCheckInputFunc() {
        const $list = $('#features-lists .selected-lists');

        $('#features .features-input').off('change').on('change', function () {
            const value = $(this).val().trim();
            $list.find('li').filter(function () {
                return $(this).text().trim() === value;
            }).remove();

            if ($(this).is(':checked')) {
                $list.append('<li>' + value + '</li>');
            }

            if ($list.children('li').length === 0) {
                $('#features-lists').hide();
            } else {
                $('#features-lists').show();
            }
        });
    }

    function integrationCheckInputFunc() {
        const $list = $('#integrations-lists .selected-lists');

        $('#integrations .features-input').off('change').on('change', function () {
            const value = $(this).val().trim();
            const $existingItem = $list.find('li').filter(function () {
                return $(this).text().trim() === value;
            });

            // Remove the existing item if it exists
            $existingItem.remove();

            if ($(this).is(':checked')) {
                if (!$list.find('li:contains("' + value + '")').length) {
                    $list.append('<li data-value="' + value + '">' + value + '</li>');
                }
            }

            if ($list.children('li').length === 0) {
                $('#integrations-lists').hide();
            } else {
                $('#integrations-lists').show();
            }
        });
    }

    function updateSkuUserList() {
        const skuVal = $('#num-of-sku').val().trim();
        const userVal = $('#num-of-users').val().trim();

        $('#sku-lists .selected-lists li[data-value="sku"]').text(skuVal ? `SKUs: ${skuVal}` : '');
        $('#sku-lists .selected-lists li[data-value="users"]').text(userVal ? `Users: ${userVal}` : '');

        if (skuVal === '' && userVal === '') {
            $('#sku-lists').hide();
        } else {
            $('#sku-lists').show();
        }
    }

    $('#num-of-sku, #num-of-users').on('input', updateSkuUserList);
    $('#sku-lists').hide();
    
    featuresCheckInputFunc();
    integrationCheckInputFunc();
});

document.addEventListener('DOMContentLoaded', function () {
    const checkboxes = document.querySelectorAll('.features-input');
    const skuInput = document.querySelector('#num-of-sku');
    const usersInput = document.querySelector('#num-of-users');
    const featuresList = document.querySelector('#features-lists .selected-lists');
    const integrationsList = document.querySelector('#integrations-lists .selected-lists');
    const skuList = document.querySelector('#sku-lists .selected-lists');
    let hiddenInput = document.querySelector('#selected-data');
    const cf7Form = document.querySelector('.wpcf7-form');

    if (cf7Form && !hiddenInput) {
        hiddenInput = document.createElement('input');
        hiddenInput.type = 'hidden';
        hiddenInput.id = 'selected-data';
        hiddenInput.name = 'selected-data';
        cf7Form.appendChild(hiddenInput);
        console.log('Added hidden input for selected-data');
    }

    function updateSelectedData() {
        const selectedFeatures = [];
        const selectedIntegrations = [];
        const skuValue = skuInput ? skuInput.value.trim() : '';
        const usersValue = usersInput ? usersInput.value.trim() : '';

        checkboxes.forEach(checkbox => {
            if (checkbox.checked) {
                const value = checkbox.value;
                if (checkbox.closest('#features')) {
                    selectedFeatures.push(value);
                } else if (checkbox.closest('#integrations')) {
                    selectedIntegrations.push(value);
                }
            }
        });

        if (featuresList) {
            featuresList.innerHTML = selectedFeatures.map(item => `<li>${item}</li>`).join('');
        }
        if (integrationsList) {
            integrationsList.innerHTML = selectedIntegrations.map(item => `<li>${item}</li>`).join('');
        }
        if (skuList) {
            const skuEl = skuList.querySelector('[data-value="sku"]');
            const userEl = skuList.querySelector('[data-value="users"]');
            if (skuEl) skuEl.textContent = skuValue ? `SKUs: ${skuValue}` : '';
            if (userEl) userEl.textContent = usersValue ? `Users: ${usersValue}` : '';
        }

        let readableOutput = `Selected Data:\n\n`;

        if (selectedFeatures.length) {
            readableOutput += `Features:\n${selectedFeatures.map(f => `- ${f}`).join('\n')}\n\n`;
        }

        if (selectedIntegrations.length) {
            readableOutput += `Integrations:\n${selectedIntegrations.map(i => `- ${i}`).join('\n')}\n\n`;
        }

        if (skuValue) {
            readableOutput += `SKUs: ${skuValue}\n`;
        }

        if (usersValue) {
            readableOutput += `Users: ${usersValue}\n`;
        }

        if (hiddenInput) {
            hiddenInput.value = readableOutput.trim();
        }

        console.log('Updated selected-data:', hiddenInput ? hiddenInput.value : 'Hidden input not found');
    }

    if (checkboxes.length) {
        checkboxes.forEach(checkbox => {
            checkbox.addEventListener('change', updateSelectedData);
        });
    }
    if (skuInput) skuInput.addEventListener('input', updateSelectedData);
    if (usersInput) usersInput.addEventListener('input', updateSelectedData);

    let currentStep = 0;
    const steps = document.querySelectorAll('.fieldset-box');
    const stepTabs = document.querySelectorAll('.step');

    function showStep(step) {
        steps.forEach(s => s.style.display = 'none');
        steps[step].style.display = 'block';
        stepTabs.forEach((tab, index) => {
            tab.classList.remove('active', 'completed');
            if (index < step) tab.classList.add('completed');
            else if (index === step) tab.classList.add('active');
        });
        updateSelectedData();
    }

    showStep(currentStep);

    document.querySelectorAll('.next-btn').forEach(btn => {
        btn.addEventListener('click', () => {
            const currentFieldset = steps[currentStep];
            const requiredInputs = currentFieldset.querySelectorAll('.required');
            let isValid = true;

            requiredInputs.forEach(input => {
                input.classList.remove('is-invalid');
                
                if (input.type === 'text' || input.type === 'number') {
                    if (!input.value.trim() || input.value <= 0) {
                        input.classList.add('is-invalid');
                        isValid = false;
                    }
                }
                if (input.type === 'checkbox') {
                    const name = input.name;
                    const checkboxes = currentFieldset.querySelectorAll(`input[name="${name}"].required`);
                    if (!Array.from(checkboxes).some(cb => cb.checked)) {
                        checkboxes.forEach(cb => cb.classList.add('is-invalid'));
                        isValid = false;
                    }
                }
            });

            if (currentFieldset.querySelector('#num-of-sku')) {
                const skuVal = skuInput.value.trim();
                const usersVal = usersInput.value.trim();
                
                if (!skuVal || skuVal <= 0) {
                    skuInput.classList.add('is-invalid');
                    isValid = false;
                }
                if (!usersVal || usersVal <= 0) {
                    usersInput.classList.add('is-invalid');
                    isValid = false;
                }
            }

            // if (!isValid) {
            //     alert('Please fill in all required fields with valid values.');
            //     return;
            // }
            if (!isValid) {
                const errorTitle = currentFieldset.getAttribute('data-title') || 'this section';
                console.log(errorTitle);

                alert(`Please fill in all required fields for ${errorTitle} with valid values.`);
                return;
            }

            if (currentStep < steps.length - 1) {
                currentStep++;
                showStep(currentStep);
            }
        });
    });

    document.querySelectorAll('.prev-btn').forEach(btn => {
        btn.addEventListener('click', () => {
            if (currentStep > 0) {
                currentStep--;
                showStep(currentStep);
            }
        });
    });

    if (cf7Form) {
        cf7Form.addEventListener('submit', function () {
            updateSelectedData();
            console.log('Submitting with selected-data:', hiddenInput ? hiddenInput.value : 'Hidden input not found');
        });

        document.addEventListener('wpcf7submit', function () {
            updateSelectedData();
            console.log('CF7 submission - selected-data:', hiddenInput ? hiddenInput.value : 'Hidden input not found');
        });
    } else {
        console.error('CF7 form not found');
    }

    updateSelectedData();
});
function showStep(stepIndex) {
    steps.forEach((step, index) => {
        step.style.display = index === stepIndex ? 'block' : 'none';
    });

    // Show/hide Next button
    const nextBtns = document.querySelectorAll('.next-btn');
    nextBtns.forEach(btn => {
        btn.style.display = (stepIndex === steps.length - 1) ? 'none' : 'inline-block';
    });
}
</script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    const steps = document.querySelectorAll('#tablistcst .step');
    const nextBtn = document.querySelector('.next-btn');

    function checkLastStepActive() {
        const lastStep = steps[steps.length - 1];
        if (lastStep.classList.contains('active')) {
            nextBtn.style.display = 'none';
        } else {
            nextBtn.style.display = '';
        }
    }

    // Initial check
    checkLastStepActive();

    // Re-check on each next or previous button click
    document.querySelectorAll('.next-btn, .prev-btn').forEach(btn => {
        btn.addEventListener('click', function () {
            setTimeout(checkLastStepActive, 100); // Wait for DOM update
        });
    });
});
</script>
<style>
    .calculator-content h2 {
    font-size: 26px;
    font-weight: 600;
}

.calculator-content h3 {
    font-size: 22px;
    font-weight: 600;
}

.calculator-content h4 {
    font-size: 20px;
    font-weight: 600;
}

.cost-calculator-wraper .steps-contact-form .submit-btn {
        margin-top: 0;
        font-size: 20px;
        padding-block: 13px;
    }
    textarea.wpcf7-form-control.wpcf7-textarea.form-control {
    height: 80px !important;
}
    .step-lists li.step:last-child.active ~ .actions-btn-wraper .next-btn {
    display: none !important;
}
.optimix-logo:hover .icon img,
.optimix-logo:has(.features-input:checked) .icon img {
    filter: invert(1) brightness(100) !important;
}
    </style>
