<?php

namespace Elementor;

if ( ! defined( 'ABSPATH' ) ) exit; // Prevent direct access if accessed outside WordPress

// Ensure Elementor is loaded before executing this code
if ( ! did_action( 'elementor/loaded' ) ) {
    return;
}

/**
 * Related Products Widget
 * Displays related products based on user-selected product slugs
 */
class Estimator_Widget extends Widget_Base {

    /**
     * Define widget name, used internally by Elementor.
     * @return string Unique widget name
     */
    public function get_name() {
        return 'estimator';
    }

    /**
     * Define widget title, shown in the Elementor editor.
     * @return string Displayed widget title
     */
    public function get_title() {
        return __( 'Palmer Estimator', 'estimator_widget' );
    }

    /**
     * Define widget icon in Elementor editor.
     * @return string Icon CSS class
     */
    public function get_icon() {
        return 'eicon-post-content';
    }

    /**
     * Define widget categories.
     * @return array Widget categories for organization in Elementor
     */
    public function get_categories() {
        return [ 'vistaar-widgets']; // Adjust category as needed
    }


    protected function register_controls() {
        // Begin control section for related products settings
        $this->start_controls_section(
            'content_section',
            [
                'label' => __( 'Content', 'estimator-widget' ),
                'tab' => Controls_Manager::TAB_CONTENT,
            ]
        );
    
        // Add Category Control
        $category_options = [];
        $categories = get_terms([
            'taxonomy'   => 'estimator-category',
            'hide_empty' => false,
        ]);
    
        if (!empty($categories) && !is_wp_error($categories)) {
            foreach ($categories as $category) {
                $category_options[$category->slug] = $category->name; // Use slug as the key
            }
        }
    
        $this->add_control(
            'selected_category',
            [
                'label'   => __('Estimator Category', 'text-domain'),
                'type'    => Controls_Manager::SELECT,
                'options' => $category_options,
                'default' => array_key_first($category_options),
            ]
        );
    
        // Add Estimator Slug Control
        $estimator_options = [];
        $query_args = [
            'post_type'      => 'estimator',
            'posts_per_page' => -1,
            'post_status'    => 'publish',
        ];
    
        $query = new \WP_Query($query_args);
    
        if ($query->have_posts()) {
            while ($query->have_posts()) {
                $query->the_post();
                $estimator_options[get_permalink()] = get_the_title();
            }
        }
        wp_reset_postdata();
    
        $this->add_control(
            'estimator_slug',
            [
                'label'   => __('Estimator', 'text-domain'),
                'type'    => Controls_Manager::SELECT,
                'options' => $estimator_options,
                'default' => array_key_first($estimator_options),
            ]
        );
    
        $this->end_controls_section();
    }
    

    protected function render() {
        // Retrieve the current settings from Elementor controls
        $settings = $this->get_settings_for_display();
    
        // Selected category slug and estimator slug
        $selected_category_slug = $settings['selected_category']; // Holds the category slug
        $selected_url           = $settings['estimator_slug'];
    
        // Extract slug from the selected URL
        $selected_slug = basename(parse_url($selected_url, PHP_URL_PATH));
    
        // Fetch the estimator post
        $post = get_page_by_path($selected_slug, OBJECT, 'estimator');
    
        if ($post) {
            // Verify if the post belongs to the selected category using slug
            $categories = wp_get_post_terms($post->ID, 'estimator-category', ['fields' => 'slugs']);
            if (!is_wp_error($categories) && in_array($selected_category_slug, $categories)) {
                // Handle different categories
                if ($selected_category_slug === 'sink-legs') {
                    // Fetch specific ACF fields for sink-leg
                    
                    // Enqueue the required assets
                    $this->enqueue_estimator_sink_leg_assets();

                    $splash_text = get_field('splash_text', $post->ID);
                    $what_we_can_help = get_field('what_we_can_help', $post->ID);
                    $step_1 = get_field('step_1', $post->ID);
                    $step_2 = get_field('step_2', $post->ID);
                    $step_3 = get_field('step_3', $post->ID);
                    $step_4 = get_field('step_4', $post->ID);
                    $step_5 = get_field('step_5', $post->ID);
                    $step_6 = get_field('step_6', $post->ID);
                    $step_7 = get_field('step_7', $post->ID);
                    $today = date('m/d/Y');
                    ?>
                    

                        <section class="vanity-section">
                            <div class="vanity-form-inner">                               
                                <form id="vanity_order-form" method="POST" class="vanity-order-form" enctype="multipart/form-data">
                                
                                <a href="#popup-24664" class="palmer-popup-link">
                                </a>
                                <div id="popup-24664" class="mfp-hide">
                                    <button class="mfp-close" title="Close">×</button>
                                    <div class="popup-inner-content">
                                        <div class="product-estimator-popup">
                                            <img src="<?php echo home_url(); ?>/wp-content/plugins/custom-elementor-widgets/assets/images/vanity-product/dealer-dustomer-pop-up.png">
                                        </div>
                                    </div>
                                </div>

                                <!-- progress bar -->

                                    <div class="vanity-form-box dealer-job" id="step-1">
                                        <div class="steps-1"></div>
                                        <div class="step-progress desktop-progress-bar">
                                            <div class="steps-progress active">1</div>
                                            <div class="steps-progress">2</div>
                                            <div class="steps-progress">3</div>
                                            <div class="steps-progress">4</div>
                                            <div class="steps-progress">5</div>
                                            <div class="steps-progress">6</div>
                                            <div class="steps-progress">7</div>
                                        </div>
                                        
                                        <div class="mobile-step-progress">
                                            <div class="steps-progress active">1</div>
                                            <p>1/7</p>
                                        </div>

                                        <div class="step-progress-four desktop-progress-bar">
                                            <div class="steps-progress active">1</div>
                                            <div class="steps-progress">2</div>
                                            <div class="steps-progress">3</div>
                                            <div class="steps-progress">4</div>
                                        </div>

                                        <div class="mobile-step-progress-four">
                                            <div class="steps-progress active">1</div>
                                            <p>1/4</p>
                                        </div>

                                         <h2 class="test">Your Information</h2>
                                        <div class="row visitor_customer_dealer">
                                            <div class="col-md-6 col-sm-8">
                                                <div class="form-group rdo-btn visitor-rdo-btn" title="">
                                                     <div class="authorized-dealer-popup">
                                                    <label>
                                                        <input type="radio" name="visitor_order_type" value="C" id="visitor_customer" class="visitor_order_type  ghost_step_1" checked="checked">
                                                        <span> <div class="dealer-customer"> I'm a Customer</div></span>
                                                    </label>
                                                    </div>
													 <label>
                                                        <input type="radio" name="visitor_order_type" value="D" id="visitor_dealer" class="visitor_order_type ghost_step_1">
                                                        <span> <div class="dealer-customer">
                                                            I'm an Authorized Palmer Dealer </div></span>
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="col-md-6 col-sm-4 date-field">
                                                <div class="form-group">
                                                    <input type="text" class="form-control ghost_step_1" tabindex="2" name="Date_1" id="Date_1" placeholder="Date" title="Date" value="<?php echo $today; ?>">
                                                    <span class="error"></span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row visitor_customer_form">
                                            <div class="col-md-12 col-sm-12">
                                                <div class="form-group lbl-top d-none">
                                                    <input type="text" class="form-control" tabindex="1" name="Dealer_1" id="Dealer_1" title="Dealer">
                                                    <label class="lbl-txt">Authorized Palmer Dealer Name</label>
                                                    <span class="error"></span>
                                                </div>
                                            </div>

                                            <div class="col-md-6 col-sm-6">
                                                <div class="form-group lbl-top">
                                                    <input type="text" class="form-control ghost_step_1" tabindex="3" name="first_name_1" id="first_name_1" title="First Name">
                                                    <label class="lbl-txt">First Name</label>
                                                    <span class="error"></span>
                                                </div>
                                            </div>
                                            <div class="col-md-6 col-sm-6">
                                                <div class="form-group lbl-top">
                                                    <input type="text" class="form-control ghost_step_1" tabindex="4" name="last_name_1" id="last_name_1" title="Last Name">
                                                    <label class="lbl-txt">Last Name</label>
                                                    <span class="error"></span>
                                                </div>
                                            </div>
                                            <div class="col-md-6 col-sm-8">
                                                <div class="form-group lbl-top">
                                                    <input type="text" class="form-control ghost_step_1" tabindex="5" name="customer_name_1" id="customer_name_1" title="Customer Name or Project ID">
                                                    <label class="lbl-txt">Customer Name or Project ID</label>
                                                    <span class="error"></span>
                                                </div>
                                            </div>
                                            <div class="col-md-6 col-sm-4">
                                                <div class="form-group lbl-top">
                                                    <input type="tel" class="form-control ghost_step_1" tabindex="6" name="phone_1" id="phone_1" maxlength="12" placeholder="" title="Phone # XXX-XXX-XXXX">
                                                    <label class="lbl-txt">Phone # XXX-XXX-XXXX</label>
                                                    <span class="error"></span>
                                                </div>
                                            </div>
                                            <div class="col-md-6 col-sm-6">
                                                <div class="form-group lbl-top">
                                                    <input type="email" class="form-control ghost_step_1" tabindex="7" name="email_1" id="email_1" title="Email Address">
                                                    <label class="lbl-txt">Email Address</label>
                                                    <span class="error"></span>
                                                </div>
                                            </div>
                                            <div class="col-md-6 col-sm-6">
                                                <div class="form-group confirm-email lbl-top">
                                                    <input type="email" class="form-control ghost_step_1" tabindex="8" name="confirm_email_1" id="confirm_email_1" autocomplete="off" title="Confirm Email Address">
                                                    <label class="lbl-txt">Confirm Email Address</label>
                                                    <span class="error"></span>
                                                </div>
                                            </div>
                                            <div class="col-md-6 col-sm-6">
                                                <div class="form-group drop-ship" tabindex="12">
                                                    <a href="#drop_ship_popup" class="palmer-popup-link popup-modal-img"></a>
                                                    <label for="drop-ship">
                                                        Drop-Ship to Consumer </label>
                                                    
                                                    <div class="checkshadow">
                                                        <input type="checkbox" class="form-control" value="Drop-Ship to Consumer" name="drop_ship_1" id="drop_ship_1">
                                                    </div>
                                                    <span class="error"></span>
                                                </div>
                                                <div class="tooltip-content d-none" style="display: none;">
                                                    <div class="tooltip-header">
                                                        <h5>Attention !</h5>
                                                    </div>
                                                    <p>You have entered data into this form.</p>
                                                    <p style="margin-bottom: 20px;"> If you Un-Check this Box Your Drop-Ship Data Will Be Erased....</p>
                                                </div>
                                            </div>
                                            <div class="drop-ship-details d-none">
                                                <div class="drop-ship-form">
                                                    <div class="col-md-12 col-sm-12 pl-0 pr-0">
                                                        <div class="form-group lbl-top">
                                                            <input type="text" class="form-control" tabindex="13" name="customer_name" id="customer_name" placeholder="" title="Customer Name">
                                                            <label class="lbl-txt">Customer Name</label>
                                                            <span class="error"></span>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-12 col-sm-12 pl-0 pr-0">
                                                        <div class="form-group lbl-top">
                                                            <input type="text" class="form-control" tabindex="14" name="drop_ship_street_address" id="drop-ship_street-address" placeholder="" title="Drop-Ship Street Address">
                                                            <label class="lbl-txt">Drop-Ship Street Address</label>
                                                            <span class="error"></span>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-12 col-sm-12 pl-0 pr-0">
                                                        <div class="form-group lbl-top">
                                                            <input type="text" class="form-control" tabindex="15" name="address_2" id="address_2" placeholder="" title="Address 2">
                                                            <label class="lbl-txt">Address 2</label>
                                                            <span class="error"></span>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-8 col-sm-8 pl-0 pr-0">
                                                        <div class="form-group lbl-top">
                                                            <input type="text" class="form-control" tabindex="16" name="city" id="city" placeholder="" title="City">
                                                            <label class="lbl-txt">City</label>
                                                            <span class="error"></span>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-4 col-sm-4 pl-0 pr-0">

                                                        <div class="form-group v-state">
                                                            <select id="state" name="state" class="form-control" autocomplete="off" tabindex="17" title="State">
                                                                <optgroup>
                                                                    <option value="select">State</option>
                                                                    <option value="Alabama">Alabama</option>
                                                                    <option value="Alaska">Alaska</option>
                                                                    <option value="Arizona">Arizona</option>
                                                                    <option value="Arkansas">Arkansas</option>
                                                                    <option value="California">California</option>
                                                                    <option value="Colorado">Colorado</option>
                                                                    <option value="Connecticut">Connecticut</option>
                                                                    <option value="Delaware">Delaware</option>
                                                                    <option value="Florida">Florida</option>
                                                                    <option value="Georgia">Georgia</option>
                                                                    <option value="Hawaii">Hawaii</option>
                                                                    <option value="Idaho">Idaho</option>
                                                                    <option value="Illinois">Illinois</option>
                                                                    <option value="Indiana">Indiana</option>
                                                                    <option value="Iowa">Iowa</option>
                                                                    <option value="Kansas">Kansas</option>
                                                                    <option value="Kentucky">Kentucky</option>
                                                                    <option value="Louisiana">Louisiana</option>
                                                                    <option value="Maine">Maine</option>
                                                                    <option value="Maryland">Maryland</option>
                                                                    <option value="Massachusetts">Massachusetts</option>
                                                                    <option value="Michigan">Michigan</option>
                                                                    <option value="Minnesota">Minnesota</option>
                                                                    <option value="Mississippi">Mississippi</option>
                                                                    <option value="Missouri">Missouri</option>
                                                                    <option value="Montana">Montana</option>
                                                                    <option value="Nebraska">Nebraska</option>
                                                                    <option value="Nevada">Nevada</option>
                                                                    <option value="New Hampshire">New Hampshire</option>
                                                                    <option value="New Jersey">New Jersey</option>
                                                                    <option value="New Mexico">New Mexico</option>
                                                                    <option value="New York">New York</option>
                                                                    <option value="North Carolina">North Carolina</option>
                                                                    <option value="North Dakota">North Dakota</option>
                                                                    <option value="Ohio">Ohio</option>
                                                                    <option value="Oklahoma">Oklahoma</option>
                                                                    <option value="Oregon">Oregon</option>
                                                                    <option value="Pennsylvania">Pennsylvania</option>
                                                                    <option value="Puerto Rico">Puerto Rico</option>
                                                                    <option value="Rhode Island">Rhode Island</option>
                                                                    <option value="South Carolina">South Carolina</option>
                                                                    <option value="South Dakota">South Dakota</option>
                                                                    <option value="Tennessee">Tennessee</option>
                                                                    <option value="Texas">Texas</option>
                                                                    <option value="Utah">Utah</option>
                                                                    <option value="Vermont">Vermont</option>
                                                                    <option value="Virginia">Virginia</option>
                                                                    <option value="Washington">Washington</option>
                                                                    <option value="West Virginia">West Virginia</option>
                                                                    <option value="Wisconsin">Wisconsin</option>
                                                                    <option value="Wyoming">Wyoming</option>
                                                                    <option value="DC">DC</option>
                                                                </optgroup>
                                                                <optgroup>
                                                                    <option value="Alberta">Alberta</option>
                                                                    <option value="British Columbia">British Columbia</option>
                                                                    <option value="Manitoba">Manitoba</option>
                                                                    <option value="New Brunswick">New Brunswick</option>
                                                                    <option value="Newfoundland">Newfoundland</option>
                                                                    <option value="Northwest Territories">Northwest Territories</option>
                                                                    <option value="Nova Scotia">Nova Scotia</option>
                                                                    <option value="Nunavut">Nunavut</option>
                                                                    <option value="Ontario">Ontario</option>
                                                                    <option value="Prince Edward Island">Prince Edward Island</option>
                                                                    <option value="Quebec">Quebec</option>
                                                                    <option value="Saskatchewan">Saskatchewan</option>
                                                                    <option value="Yukon">Yukon</option>
                                                                </optgroup>
                                                                <optgroup>
                                                                    <option value="Other - please enter">Other - please enter</option>
                                                                </optgroup>
                                                            </select>
                                                            <span class="state_error error"></span>
                                                        </div>
                                                        <div class="form-group d-none lbl-top">
                                                            <input type="text" class="form-control" id="state_other_note" tabindex="18" name="state_other_note" placeholder="" title="Please enter “Other” here…">
                                                            <label class="lbl-txt">Please enter “Other” here…</label>
                                                            <span class="error"></span>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-4 col-sm-4 pl-0 pr-0">
                                                        <div class="form-group lbl-top">
                                                            <input type="text" class="form-control" name="postal_code" tabindex="19" id="postal_code" placeholder="" title="Postal Code">
                                                            <label class="lbl-txt">Postal Code</label>
                                                            <span class="error"></span>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-8 col-sm-8 pl-0 pr-0">
                                                        <div class="form-group lbl-top">
                                                            <input type="email" name="email" class="form-control" tabindex="20" id="email" placeholder="" title="eMail">
                                                            <label class="lbl-txt">Email</label>
                                                            <span class="error"></span>
                                                        </div>
                                                    </div>
                                                    <p><?php echo $step_1['drop_ship_below_text']; ?></p>
                                                </div>
                                            </div>                                         
                                            <div class="col-md-6 col-sm-6">
                                                <div class="form-group lbl-top">
                                                    <input type="hidden" name="latitude" class="field" id="latitude" value="">
                                                    <input type="hidden" name="longitude" class="field" id="longitude" value="">
                                                    <input type="text" class="form-control ghost_step_1" tabindex="11" name="dealer_zip_1" id="dealer_zip_1" title="Dealer Zip Code">
                                                    <label class="lbl-txt">Zip Code</label>
                                                    <span class="error"></span>
                                                </div>
                                            </div>
                                            <div class="col-md-6 col-sm-4">
                                                <div id="file-upload-form" class="uploader files" tabindex="22">
                                                    <input id="file-upload" type="file" name="fileUpload[]" hidden="hidden" multiple>

                                                    <label id="file-drag" class="file-drag">
                                                        <span>Attach File(s) (16MB Limit)</span>
                                                        <div id="start">
                                                            <a id="custom-button" class="btn palmer-button">UPLOAD FILE <i class="hnice-icon- hnice-icon-chevron-right"></i></a>
                                                        </div>
                                                    </label>
                                                    <ul class="fileList"></ul>

                                                </div>
                                            </div>
                                            <div class="col-md-12 col-sm-8">
                                                <div class="form-group v-mb-0" tabindex="21">
                                                    <a href="#notes_popup" class="palmer-popup-link popup-modal-img"></a>
                                                    <input name="projectnote" id="notes_1" cols="30" rows="10" maxlength="5000" spellcheck="true" class="textarea form-control" placeholder="Notes and Special Instructions" title="Notes and Special Instructions (5,000 character limit)">
                                                </div>
                                            </div>
                                            
                                        </div>

                                        <div class="steps-paginations">
                                            <div class="next-step-forms">
                                                <a href="#" class="next-step-out next-step-2 step-next" id="btn-nxt-1">

                                                    <div class="next-btn vanity-next-btnn palmer-button palmer-primary-btn">
                                                        <button type="submit" name="btn_submit" id="">Next <i aria-hidden="true" class="hnice-icon- hnice-icon-chevron-right"></i></button>
                                                    </div>
                                                </a>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="vanity-form-box help d-none" id="what-can-help">
                                        <div class="step-progress desktop-progress-bar">
                                            <div class="steps-progress">1</div>
                                            <div class="steps-progress active">2</div>
                                            <div class="steps-progress">3</div>
                                            <div class="steps-progress">4</div>
                                            <div class="steps-progress">5</div>
                                            <div class="steps-progress">6</div>
                                            <div class="steps-progress">7</div>
                                        </div>

                                        <div class="mobile-step-progress">
                                            <div class="steps-progress active">2</div>
                                            <p>2/7</p>
                                        </div>

                                        <div class="step-progress-four desktop-progress-bar">
                                            <div class="steps-progress">1</div>
                                            <div class="steps-progress active">2</div>
                                            <div class="steps-progress">3</div>
                                            <div class="steps-progress">4</div>
                                        </div>

                                        <div class="mobile-step-progress-four">
                                            <div class="steps-progress active">2</div>
                                            <p>2/4</p>
                                        </div>


                                    <h2 class="test">Product Information</h2>
                                        <div class="row">
                                            <div class="col-md-4 col-sm-4">
                                                <div class="form-group rdo-btn" title="Vanity Leg System">
                                                    <a href="#help_leg_system_popup" class="palmer-popup-link popup-modal-img"></a>
                                                    <label>
                                                        <input type="radio" name="help_radio_btn" value="Help Leg System" id="help_leg_system">
                                                        <span> <div class="dealer-customer"> Vanity Leg System 
                                                        </div></span>

                                                    </label>
                                                </div>
                                            </div>
                                            <div class="col-md-4 col-sm-4">
                                                <div class="form-group rdo-btn" title="Quick-Ship Program">
                                                    <a href="<?php echo $step_3['qickship_program_pdf']; ?>" target="_blank" class="popup-icon popup-modal-img"></a>
                                                    <label>
                                                        <input type="radio" name="help_radio_btn" value="Help Quick-Ship Program" id="help_quick_ship_program">
                                                        <span> <div class="dealer-customer"> Quick-Ship Program 
                                                        </div></span>
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="col-md-4 col-sm-4">
                                                <div class="form-group rdo-btn" title="Single Legs Only">
                                                    <a href="#help_single_leg_popup" class="palmer-popup-link popup-modal-img"></a>
                                                    <label>
                                                        <input type="radio" name="help_radio_btn" value="Help Single Leg System" id="help_single_leg_system">
                                                        <span> <div class="dealer-customer"> Single Legs Only 
                                                        </div></span>
                                                    </label>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="steps-paginations">
                                            <div class="back-step-forms">
												<div class="prev-btn vanity-next-btnn palmer-button" id="go-back-step-1"><button type="submit" class="btn-go-back palmer-b-button palmer-secondary-btn"><i aria-hidden="true" class="hnice icon- hnice-icon-chevron-left"></i>Go Back</button>
												</div>
                                            </div>
                                            <div class="next-step-forms">
                                            </div>
                                        </div>
                                    </div>


                                    <div class="vanity-form-box counter-sink-top d-none" id="step-2">
                                        <div class="steps-2"></div>
                                        <div class="step-progress desktop-progress-bar">
                                            <div class="steps-progress">1</div>
                                            <div class="steps-progress">2</div>
                                            <div class="steps-progress active">3</div>
                                            <div class="steps-progress">4</div>
                                            <div class="steps-progress">5</div>
                                            <div class="steps-progress">6</div>
                                            <div class="steps-progress">7</div>
                                        </div>

                                        <div class="mobile-step-progress">
                                            <div class="steps-progress active">3</div>
                                            <p>3/7</p>
                                        </div>

                                        <div class="step-progress-four desktop-progress-bar">
                                            <div class="steps-progress">1</div>
                                            <div class="steps-progress">2</div>
                                            <div class="steps-progress active">3</div>
                                            <div class="steps-progress">4</div>
                                        </div>

                                        <div class="mobile-step-progress-four">
                                            <div class="steps-progress active">3</div>
                                            <p>3/4</p>
                                        </div>


                                        <h2 class="test">Countertop / Sinktop</h2>
                                        <p id="stp2_other_msg" class="d-none">You fit the Countertop to the Room... Palmer fits the Leg System to your Countertop</p>
                                        <div class="row countertop">
                                            <div class="col-md-6 col-sm-6">
                                                <div class="form-group" tabindex="23">
                                                    <a href="#countertop_materials_popup" class="palmer-popup-link popup-modal-img"></a>
                                                    <select name="countertop_select_2_1" id="countertop_select_2_1" class="form-control ghost_step_2" title="Select Countertop Material & Construction">
                                                        <option value="select">Select Countertop Material</option>
                                                        <option value="Stone or other Solid Material - 1.25” thick" title="Select Countertop Material & Construction">Stone or other Solid Material 1.25"(3cm) thick</option>
                                                        <option value="Stone or other Solid Material - 0.75” thick" title="Select Countertop Material & Construction">Stone or other Solid Material 0.75”(2cm) thick</option>
                                                        <option value="Solid Material with Mitered Aprons" title="Select Countertop Material & Construction">Solid Material with Mitered Aprons</option>
                                                        <option value="Stone Forest Sink Top" title="Select Countertop Material & Construction">Stone Forest Sink Top</option>
                                                        <option value="Wall Mounted China Sink - Specify in Notes" title="Select Countertop Material & Construction">Wall Mounted China Sink - Specify in Notes</option>
                                                        <option value="Other - Please explain in Notes" title="Select Countertop Material & Construction">Other - Please explain in Notes</option>
                                                    </select>
                                                    <span class="error countertop_select_2_1"></span>
                                                </div>
                                            </div>
                                            <div class="col-md-6 col-sm-6">
                                                <div class="form-group lbl-top popup-link contertop-show-lbl">
                                                    <a href="#apparent_thickness_popup" class="palmer-popup-link popup-modal-cont"></a>
                                                    <input type="text" class="form-control ghost_step_2" tabindex="24" name="apparent_thickness_2" id="apparent_thickness_2" placeholder="" title="Apparent Thickness of Countertop">
                                                    <label class="lbl-txt">Apparent Thickness of Countertop 
                                                    </label>
                                                    <span class="error"></span>
                                                </div>
                                            </div>
                                            <div class="add-hint-popup-popup white-popup vanity-popup add-hint-popup-error">
                                                <div class="popup-inner contertop-thickness">
                                                    <h6>PLEASE ENTER DIMENSIONS IN INCHES ONLY!</h6>
                                                    <p>decimals are good, but fractions, symbols, feet, and metric won't work</p>
                                                    <p>Good Example: <span class="green">38.25 </span>Bad Examples:<span class="red">38.25"</span> or <span class="red">3' 2-1/4" </span> or <span class="red">922cm</span></p>
                                                </div>
                                            </div>
                                            <div class="stone-forest-details d-none">
                                                <div class="stone-forest-inner">
                                                    <h3>Select your Stone Forest Console Top & Leg Style</h3>
                                                    <p>Please call Palmer at (401) 421-1730 if you do not find your Stone Forest Console Top & Palmer Leg Style</p>
                                                    <div class="form-group rdo-btn lbl-show-mb3" title="C75 Bordeaux  36.5">
                                                        <label>
                                                            <input class="stone-radio" type="radio" name="stone_radio" value="C75 Bordeaux 36.5">
                                                            <span>C75 Bordeaux 36.5”</span>
                                                            <h5>Decorative Collar</h5>
                                                            <h5>36.5”w x 24”d x 6”h</h5>
                                                        </label>
                                                    </div>

                                                    <div class="form-group rdo-btn lbl-show-mb3" title="C90-27SK Vintage  27">
                                                        <label>
                                                            <input class="stone-radio" type="radio" name="stone_radio" value="C90-27SK Vintage 27 Essex">
                                                            <span>C90-27SK Vintage 27”</span>
                                                            <h5>Essex</h5>
                                                            <h5>27”w x 22”d x 2”h</h5>
                                                        </label>
                                                    </div>
                                                    <div class="form-group rdo-btn lbl-show-mb3" title="C90-27SK Vintage  27">
                                                        <label>
                                                            <input class="stone-radio" type="radio" name="stone_radio" value="C90-27SK Vintage 27 Capital">
                                                            <span>C90-27SK Vintage 27”</span>
                                                            <h5>Capital</h5>
                                                            <h5>27”w x 22”d x 2”h</h5>
                                                        </label>
                                                    </div>
                                                    <div class="form-group rdo-btn lbl-show-mb3" title="C90-27SK Vintage Wall  27">
                                                        <label>
                                                            <input class="stone-radio" type="radio" name="stone_radio" value="C90-27SK Vintage Wall 27">
                                                            <span>C90-27SK Vintage Wall 27”</span>
                                                            <h5>Apex</h5>
                                                            <h5>27”w x 22”d x 2”h</h5>
                                                        </label>
                                                    </div>
                                                    <div class="form-group rdo-btn lbl-show-mb3" title="C98-36 Cortina  36">
                                                        <label>
                                                            <input class="stone-radio" type="radio" name="stone_radio" value="C98-36 Cortina 36">
                                                            <span>C98-36 Cortina 36”</span>
                                                            <h5>Minimal</h5>
                                                            <h5>36”w x 18”d x 1”h</h5>
                                                        </label>
                                                    </div>
                                                    <div class="form-group rdo-btn lbl-show-mb3" title="C92-42 Renaissance  42">
                                                        <label>
                                                            <input class="stone-radio" type="radio" name="stone_radio" value="C92-42 Renaissance 42">
                                                            <span>C92-42 Renaissance 42”</span>
                                                            <h5>Renaissance</h5>
                                                            <h5>42”w x 22.5”d x 2.5”h</h5>
                                                        </label>
                                                    </div>
                                                    <div class="form-group rdo-btn lbl-show-mb3" title="C92-WL30 Petite Ren 2 Leg  30">
                                                        <label>
                                                            <input class="stone-radio" type="radio" name="stone_radio" value="C92-WL30 Petite Ren 2 Leg 30">
                                                            <span>C92-WL30 Petite Ren 2 Leg 30”</span>
                                                            <h5>Petite Renaissance</h5>
                                                            <h5>30”w x 22.5”d x 1.25”h</h5>
                                                        </label>
                                                    </div>
                                                    <div class="form-group rdo-btn lbl-show-mb3" title="C92-WL30 Petite Ren Wall  30">
                                                        <label>
                                                            <input class="stone-radio" type="radio" name="stone_radio" value="C92-WL30 Petite Ren Wall 30">
                                                            <span>C92-WL30 Petite Ren Wall 30”</span>
                                                            <h5>Regency</h5>
                                                            <h5>30”w x 22.5”d x 1.25”h</h5>
                                                        </label>
                                                    </div>
                                                    <div class="form-group rdo-btn lbl-show-mb3" title="C94-24 Harbor  24">
                                                        <label>
                                                            <input class="stone-radio" type="radio" name="stone_radio" value="C94-24 Harbor 24">
                                                            <span>C94-24 Harbor 24”</span>
                                                            <h5>Jamestown</h5>
                                                            <h5>24"w x 20"d x 5.25"h</h5>
                                                        </label>
                                                    </div>
                                                    <div class="form-group rdo-btn lbl-show-mb3" title="C96-47 Bayonne  47">
                                                        <label>
                                                            <input class="stone-radio" type="radio" name="stone_radio" value="C96-47 Bayonne 47 Bayonne">
                                                            <span>C96-47 Bayonne 47”</span>
                                                            <h5>Bayonne</h5>
                                                            <h5>47”w x 24.5”d x 2.5”h</h5>
                                                        </label>
                                                    </div>
                                                    <div class="form-group rdo-btn lbl-show-mb3" title="C96-47 Bayonne  47">
                                                        <label>
                                                            <input class="stone-radio" type="radio" name="stone_radio" value="C96-47 Bayonne 47 Franklin">
                                                            <span>C96-47 Bayonne 47”</span>
                                                            <h5>Franklin</h5>
                                                            <h5>47”w x 24.5”d x 2.5”h</h5>
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-6 col-sm-4">
                                                <div class="form-group lbl-top popup-link mbl-countertop-width">
                                                    <a href="#counter_w_d_popup" class="palmer-popup-link popup-modal-cont"></a>
                                                    <input type="text" class="form-control ghost_step_2" tabindex="25" name="countertop_width_2" id="countertop_width_2" title="Countertop Width" placeholder="">
                                                    <label class="lbl-txt">Countertop Width 
                                                    </label>
                                                    <span class="error"></span>
                                                </div>
                                            </div>
                                            <div class="add-hint-popup-popup white-popup vanity-popup add-hint-popup-error countertop-error">
                                                <div class="popup-inner countertop-width">
                                                    <h6>PLEASE ENTER DIMENSIONS IN INCHES ONLY!</h6>
                                                    <p>decimals are good, but fractions, symbols, feet, and metric won't work</p>
                                                    <p>Good Example: <span class="green">38.25 </span>Bad Examples:<span class="red">38.25"</span> or <span class="red">3' 2-1/4" </span> or <span class="red">922cm</span></p>
                                                </div>
                                            </div>
                                            <div class="col-md-6 col-sm-4">
                                                <div class="form-group lbl-top popup-link">
                                                    <a href="#counter_w_d_popup" class="palmer-popup-link popup-modal-cont"></a>
                                                    <input type="text" class="form-control ghost_step_2" tabindex="26" name="countertop_depth_2" id="countertop_depth_2" placeholder="" title="Countertop Depth">
                                                    <label class="lbl-txt">Countertop Depth 
                                                    </label>
                                                    <span class="error"></span>
                                                </div>
                                            </div>
                                            <div class="add-hint-popup-popup white-popup vanity-popup add-hint-popup-error  counterdepth-error">
                                                <div class="popup-inner countertop-depth">
                                                    <h6>PLEASE ENTER DIMENSIONS IN INCHES ONLY!</h6>
                                                    <p>decimals are good, but fractions, symbols, feet, and metric won't work</p>
                                                    <p>Good Example: <span class="green">38.25 </span>Bad Examples:<span class="red">38.25"</span> or <span class="red">3' 2-1/4" </span> or <span class="red">922cm</span></p>
                                                </div>
                                            </div>
                                            <div class="col-md-6 col-sm-4">
                                                <div class="form-group countertop-height lbl-top popup-link">
                                                    <a href="#counter_w_d_popup" class="palmer-popup-link popup-modal-cont"></a>
                                                    <input type="text" class="form-control ghost_step_2" tabindex="27" name="finished_countertop_height_2" id="finished_countertop_height_2" title="Finished Countertop Height" placeholder="">
                                                    <label class="lbl-txt">Finished Countertop Height 
                                                    </label>
                                                    <span class="error"></span>

                                                </div>
                                            </div>
                                            <div class="add-hint-popup-popup white-popup vanity-popup add-hint-popup-error counterheight-error">
                                                <div class="popup-inner countertop-height">
                                                    <h6>PLEASE ENTER DIMENSIONS IN INCHES ONLY!</h6>
                                                    <p>decimals are good, but fractions, symbols, feet, and metric won't work</p>
                                                    <p>Good Example: <span class="green">38.25 </span>Bad Examples:<span class="red">38.25"</span> or <span class="red">3' 2-1/4" </span> or <span class="red">922cm</span></p>
                                                </div>
                                            </div>
                                            <div class="col-md-6 col-sm-8">
                                                <div class="form-group v-mb-0" tabindex="28">
                                                    <a href="#countertop_overhang_popup" class="palmer-popup-link popup-modal-img"></a>
                                                    <select name="countertop_select_2_2" class="form-control ghost_step_2" id="countertop_select_2_2" title="Select Countertop Overhang (Leg set-back)">
                                                        <option value="select">Select Countertop Overhang </option>
                                                        <option value="1.75”">1.75” Recommended Overhang for your console size</option>
                                                        <option value="0.75”">0.75”</option>
                                                        <option value="1.00”">1.00”</option>
                                                        <option value="1.25”">1.25”</option>
                                                        <option value="1.50”">1.50”</option>
                                                        <option value="1.75”">1.75”</option>
                                                        <option value="2.00”">2.00”</option>
                                                        <option value="Other: Please type inches & decimals only - no symbols">Other: Please type inches & decimals only - no symbols</option>
                                                    </select>
                                                    
                                                    <span class="error countertop_select_2_2"></span>
                                                </div>
                                                <div class="form-group d-none lbl-top">
                                                    <input type="text" class="form-control" tabindex="29" id="countertop_overhang_other" name="countertop_overhang_other" placeholder="" title="Please enter “Other” here…">
                                                    <label class="lbl-txt">Please enter “Other” here…</label>
                                                    <span class="error"></span>
                                                </div>

                                            </div>
                                            <div class="col-md-6 col-sm-4">
                                                <div class="form-group v-mb-0" tabindex="30">
                                                    <a href="#number_of_sinks_popup" class="palmer-popup-link popup-modal-img"></a>
                                                    <select name="select_number_of" class="form-control ghost_step_2" id="select_number_of" title="Select Number of Sinks">
                                                        <option value="select">Number of Sinks </option>
                                                        <option value="One Sink">One Sink</option>
                                                        <option value="Two Sinks">Two Sinks</option>
                                                        <option value="Other - please enter">Other - please enter</option>
                                                    </select>
                                                    
                                                    <span class="error select_number_of"></span>
                                                </div>
                                                <div class="form-group d-none lbl-top">
                                                    <input type="text" class="form-control" tabindex="31" id="number_of_sinks_other" name="number_of_sinks_other" placeholder="" title="Please enter “Other” here…">
                                                    <label class="lbl-txt">Please enter “Other” here…</label>
                                                    <span class="error"></span>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="steps-paginations">
                                            <div class="back-step-forms">
												<div class="prev-btn vanity-next-btnn palmer-button" id="go-back-step-2"><button type="submit" class="btn-go-back palmer-b-button palmer-secondary-btn"><i aria-hidden="true" class="hnice icon- hnice-icon-chevron-left"></i>Go Back</button>
												</div>
                                            </div>
                                            <div class="next-step-forms">
                                            <a href="#" class="next-step-out next-step-3 step-next">
                                                <div class="next-btn vanity-next-btnn palmer-button palmer-primary-btn">
                                                    <button type="submit" name="btn_submit" id="">Next <i aria-hidden="true" class="hnice-icon- hnice-icon-chevron-right"></i></button>
                                                </div>
                                            </a>
                                            <a href="#" class="next-step-out next-step-3-1 step-next">
                                                <div class="next-btn vanity-next-btnn palmer-button palmer-primary-btn">
                                                    <button type="submit" name="btn_submit" id="">Next <i aria-hidden="true" class="hnice-icon- hnice-icon-chevron-right"></i></button>
                                                </div>
                                            </a>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="vanity-form-box leg-system d-none" id="step-3">
                                        <div class="steps-3"></div>
                                        <div class="step-progress desktop-progress-bar">
                                            <div class="steps-progress">1</div>
                                            <div class="steps-progress">2</div>
                                            <div class="steps-progress">3</div>
                                            <div class="steps-progress active">4</div>
                                            <div class="steps-progress">5</div>
                                            <div class="steps-progress">6</div>
                                            <div class="steps-progress">7</div>
                                        </div>

                                        <div class="mobile-step-progress">
                                            <div class="steps-progress active">4</div>
                                            <p>4/7</p>
                                        </div>

                                        <div class="step-progress-four desktop-progress-bar">
                                            <div class="steps-progress">1</div>
                                            <div class="steps-progress">2</div>
                                            <div class="steps-progress">3</div>
                                            <div class="steps-progress active">4</div>
                                        </div>

                                        <div class="mobile-step-progress-four">
                                            <div class="steps-progress active">4</div>
                                            <p>4/4</p>
                                        </div>


                                        <h2 class="test">Leg System</h2>
                                        <div class="row countertop">

                                            <div class="col-md-6 col-sm-6">
                                                <div class="form-group countertop" tabindex="32">
                                                    <a href="<?php echo $step_3['leg_style_url']; ?>" target="_blank" class="popup-modal-img"></a>
                                                    <select name="leg_style" class="form-control ghost_step_3" id="leg_style" data-placeholder="Leg Style" title="Leg Style">
                                                        <optgroup label="CLASSIC:">
                                                            <option value="select">Leg Style</option>
                                                            <option data-style="BL" value="Ball Foot - 1.5” dia" data-img="<?php echo $step_4['classic']['ball_foot']['sizes']['medium']; ?>">Ball Foot - 1.5” dia</option>
                                                            <option data-style="1BL" value="Ball Foot - 1.0” dia" data-img="<?php echo $step_4['classic']['ball_foot']['sizes']['medium']; ?>">Ball Foot - 1.0” dia</option>
                                                            <option data-style="B" value="Bun Foot - 1.5” dia" data-img="<?php echo $step_4['classic']['bun_foot']['sizes']['medium']; ?>">Bun Foot - 1.5” dia</option>
                                                            <option data-style="1B" value="Bun Foot - 1.0” dia" data-img="<?php echo $step_4['classic']['bun_foot']['sizes']['medium']; ?>">Bun Foot - 1.0” dia</option>
                                                            <option data-style="C" value="Decor Collar - 1.5”" data-img="<?php echo $step_4['classic']['decor_collar']['sizes']['medium']; ?>">Decor Collar - 1.5”</option>
                                                            <option data-style="1C" value="Decor Collar - 1.0”" data-img="<?php echo $step_4['classic']['decor_collar']['sizes']['medium']; ?>">Decor Collar - 1.0”</option>
                                                            <option data-style="T" value="Tapered Foot - 1.5”" data-img="<?php echo $step_4['classic']['tapered_foot']['sizes']['medium']; ?>">Tapered Foot - 1.5”</option>
                                                            <option data-style="1T" value="Tapered Foot - 1.0”" data-img="<?php echo $step_4['classic']['tapered_foot']['sizes']['medium']; ?>">Tapered Foot - 1.0”</option>
                                                        </optgroup>
                                                        <optgroup label="TRADITIONAL:">
                                                            <option data-style="LS4BAY" value="Bayonne" data-img="<?php echo $step_4['traditional']['bayonne']['sizes']['medium']; ?>">Bayonne</option>
                                                            <option data-style="CAP" value="Capital" data-img="<?php echo $step_4['traditional']['capital']['sizes']['medium']; ?>">Capital</option>
                                                            <option data-style="LS2EM" value="Embry" data-img="<?php echo $step_4['traditional']['embry']['sizes']['medium']; ?>">Embry</option>
                                                            <option data-style="E" value="Essex" data-img="<?php echo $step_4['traditional']['essex']['sizes']['medium']; ?>">Essex</option>
                                                            <option data-style="LS4FR" value="Franklin" data-img="<?php echo $step_4['traditional']['franklin']['sizes']['medium']; ?>">Franklin</option>
                                                            <option data-style="K" value="Kingston" data-img="<?php echo $step_4['traditional']['kingston']['sizes']['medium']; ?>">Kingston</option>
                                                            <option data-style="N" value="Newport" data-img="<?php echo $step_4['traditional']['newport']['sizes']['medium']; ?>">Newport</option>
                                                            <option data-style="P" value="Providence" data-img="<?php echo $step_4['traditional']['providence']['sizes']['medium']; ?>">Providence</option>
                                                            <option data-style="LS21REN" value="Petite Renaissance" data-img="<?php echo $step_4['traditional']['petite_renaissance']['sizes']['medium']; ?>">Petite Renaissance</option>
                                                            <option data-style="LS41REN" value="Renaissance" data-img="<?php echo $step_4['traditional']['renaissance']['sizes']['medium']; ?>">Renaissance</option>
                                                            <option data-style="LS2SH" value="Soho" data-img="<?php echo $step_4['traditional']['soho']['sizes']['medium']; ?>">Soho</option>
                                                            <option data-style="LS41V" value="Victorian" data-img="<?php echo $step_4['traditional']['victorian']['sizes']['medium']; ?>">Victorian</option>
                                                            <option data-style="W" value="Westport" data-img="<?php echo $step_4['traditional']['westport']['sizes']['medium']; ?>">Westport</option>
                                                        </optgroup>
                                                        <optgroup label="MODERN:">
                                                            <option data-style="LS2BR" value="Bristol" data-img="<?php echo $step_4['modern']['bristol']['sizes']['medium']; ?>">Bristol</option>
                                                            <option data-style="LS2J" value="Jamestown" data-img="<?php echo $step_4['modern']['jamestown']['sizes']['medium']; ?>">Jamestown</option>
                                                            <option data-style="LS41L" value="Linear" data-img="<?php echo $step_4['modern']['linear']['sizes']['medium']; ?>">Linear</option>
                                                            <option data-style="MET" value="Metro - 1.5” dia" data-img="<?php echo $step_4['modern']['metro']['sizes']['medium']; ?>">Metro - 1.5” dia</option>
                                                            <option data-style="1MET" value="Metro - 1.0” dia" data-img="<?php echo $step_4['modern']['metro']['sizes']['medium']; ?>">Metro - 1.0” dia</option>
                                                            <option data-style="M" value="Minimal" data-img="<?php echo $step_4['modern']['minimal']['sizes']['medium']; ?>">Minimal</option>
                                                            <option data-style="MOD" value="Modern" data-img="<?php echo $step_4['modern']['modern']['sizes']['medium']; ?>">Modern</option>
                                                            <option data-style="SQ" value="Square" data-img="<?php echo $step_4['modern']['square']['sizes']['medium']; ?>">Square</option>
                                                            <option data-style="S" value="Studio - 1.5” dia" data-img="<?php echo $step_4['modern']['studio']['sizes']['medium']; ?>">Studio - 1.5” dia</option>
                                                            <option data-style="1S" value="Studio - 1.0” dia" data-img="<?php echo $step_4['modern']['studio']['sizes']['medium']; ?>">Studio - 1.0” dia</option>
															<option data-style="34S" value="Studio - 3/4” dia" data-img="<?php echo $step_4['modern']['studio']['sizes']['medium']; ?>">Studio - 3/4” dia</option>
                                                        </optgroup>
                                                        <optgroup label="WALL MOUNT:">
                                                            <option data-style="WMA" value="Apex w/o Collars" data-img="<?php echo $step_4['wall_mount']['apex_wo_collars']['sizes']['medium']; ?>">Apex w/o Collars</option>
                                                            <option data-style="WMA" value="Apex w/ Collars" data-img="<?php echo $step_4['wall_mount']['apex']['sizes']['medium']; ?>">Apex w/ Collars</option>
                                                            <option data-style="WMREG" value="Regency" data-img="<?php echo $step_4['wall_mount']['regency']['sizes']['medium']; ?>">Regency</option>
                                                            <option data-style="WMSG" value="Signature" data-img="<?php echo $step_4['wall_mount']['signature']['sizes']['medium']; ?>">Signature</option>
                                                        </optgroup>
                                                    </select>
                                                </div>
                                            </div>

                                            <div class="col-md-6 col-sm-6">
                                                <div class="form-group lbl-show-mb1" tabindex="33">
                                                    <a href="<?php echo $step_3['finish_url']; ?>" target="_blank" class="popup-modal-img"></a>
                                                    <select name="select_finish_3" class="form-control ghost_step_3" id="select_finish_3" title="Select Finish">
                                                        <optgroup label="PLATED:">
                                                            <option value="select">Select Finish</option>
                                                            <option value="Polished Chrome (PC)" data-img=" <?php echo $step_3['plated']['pc_image']['sizes']['medium_large']; ?>" data-time="<?php echo $step_3['plated']['polished_chrome_pc']; ?>" data-rush_time="<?php echo $step_3['plated']['rush_polished_chrome_pc']; ?>" data-hammered_time="<?php echo $step_3['plated']['hammered_polished_chrome_pc']; ?>">Polished Chrome (PC)</option>
                                                            <option value="Polished Nickel (PN)" data-img="<?php echo $step_3['plated']['pn_image']['sizes']['medium_large']; ?>" data-time="<?php echo $step_3['plated']['polished_nickel_pn']; ?>" data-rush_time="<?php echo $step_3['plated']['rush_polished_nickel_pn']; ?>" data-hammered_time="<?php echo $step_3['plated']['hammered_polished_nickel_pn']; ?>">Polished Nickel (PN)</option>
                                                            <option value="Satin Nickel (SN)" data-img="<?php echo $step_3['plated']['sn_image']['sizes']['medium_large']; ?>" data-time="<?php echo $step_3['plated']['satin_nickel_sn']; ?>" data-rush_time="<?php echo $step_3['plated']['rush_satin_nickel_sn']; ?>" data-hammered_time="<?php echo $step_3['plated']['hammered_satin_nickel_sn']; ?>">Satin Nickel (SN)</option>
                                                        </optgroup>
                                                        <optgroup label="LIVING:">
                                                            <option value="Polished Brass Un-Lacquered (PBUL)" data-img="<?php echo $step_3['living']['pbul_image']['sizes']['medium_large']; ?>" data-time="<?php echo $step_3['living']['polished_brass_un-lacquered_pbul']; ?>" data-hammered_time="<?php echo $step_3['living']['hammered_polished_brass_un-lacquered_pbul']; ?>">Polished Brass Un-Lacquered (PBUL)</option>
                                                            <option value="Aged Brass Un-Lacquered (ABUL)" data-img="<?php echo $step_3['living']['abul_image']['sizes']['medium_large']; ?>" data-time="<?php echo $step_3['living']['aged_brass_un-lacquered_abul']; ?>" data-rush_time="<?php echo $step_3['living']['rush_aged_brass_un-lacquered_abul']; ?>" data-hammered_time="<?php echo $step_3['living']['hammered_aged_brass_un-lacquered_abul']; ?>">Aged Brass Un-Lacquered (ABUL)</option>
                                                            <option value="Oil Rubbed Bronze (ORB)" data-img="<?php echo $step_3['living']['orb_image']['sizes']['medium_large']; ?>" data-time="<?php echo $step_3['living']['oil_rubbed_bronze_orb']; ?>" data-rush_time="<?php echo $step_3['living']['rush_oil_rubbed_bronze_orb']; ?>" data-hammered_time="<?php echo $step_3['living']['hammered_oil_rubbed_bronze_orb']; ?>">Oil Rubbed Bronze (ORB)</option>
                                                        </optgroup>
                                                        <optgroup label="PVD:">
                                                            <option value="Polished Brass PVD (PBPVD)" data-img="<?php echo $step_3['pvd']['pbpvd_image']['sizes']['medium_large']; ?>" data-time="<?php echo $step_3['pvd']['polished_brass_pvd_pbpvd']; ?>" data-rush_time="<?php echo $step_3['pvd']['rush_polished_brass_pvd_pbpvd']; ?>" data-hammered_time="<?php echo $step_3['pvd']['hammered_polished_brass_pvd_pbpvd']; ?>">Polished Brass PVD (PBPVD)</option>
                                                            <option value="Satin Brass PVD (SBPVD)" data-img="<?php echo $step_3['pvd']['sbpvd_image']['sizes']['medium_large']; ?>" data-time="<?php echo $step_3['pvd']['satin_brass_pvd_sbpvd']; ?>" data-rush_time="<?php echo $step_3['pvd']['rush_satin_brass_pvd_sbpvd']; ?>" data-hammered_time="<?php echo $step_3['pvd']['hammered_satin_brass_pvd_sbpvd']; ?>">Satin Brass PVD (SBPVD)</option>
                                                            <option value="Polished Gold PVD (PGPVD)" data-img="<?php echo $step_3['pvd']['pgpvd_image']['sizes']['medium_large']; ?>" data-time="<?php echo $step_3['pvd']['polished_gold_pvd_pgpvd']; ?>" data-rush_time="<?php echo $step_3['pvd']['rush_polished_gold_pvd_pgpvd']; ?>" data-hammered_time="<?php echo $step_3['pvd']['hammered_polished_gold_pvd_pgpvd']; ?>">Polished Gold PVD (PGPVD)</option>
                                                            <option value="Satin Gold PVD (SGPVD)" data-img="<?php echo $step_3['pvd']['sgpvd_image']['sizes']['medium_large']; ?>" data-time="<?php echo $step_3['pvd']['satin_gold_pvd_sgpvd']; ?>" data-rush_time="<?php echo $step_3['pvd']['rush_satin_gold_pvd_sgpvd']; ?>" data-hammered_time="<?php echo $step_3['pvd']['hammered_satin_gold_pvd_sgpvd']; ?>">Satin Gold PVD (SGPVD)</option>
                                                        </optgroup>
                                                        <optgroup label="OTHER:">
                                                            <option value="Aged Brass Lacquered (ABL)" data-img="<?php echo $step_3['other']['abl_image']['sizes']['medium_large']; ?>" data-time="<?php echo $step_3['other']['aged_brass_lacquered_abl']; ?>" data-rush_time="<?php echo $step_3['other']['rush_aged_brass_lacquered_abl']; ?>" data-hammered_time="<?php echo $step_3['other']['hammered_aged_brass_lacquered_abl']; ?>">Aged Brass Lacquered (ABL)</option>
                                                            <option value="Aged Nickel Un-Lacquered (AN)" data-img="<?php echo $step_3['other']['an_image']['sizes']['medium_large']; ?>" data-time="<?php echo $step_3['other']['aged_nickel_un-lacquered_an']; ?>" data-rush_time="<?php echo $step_3['other']['rush_aged_nickel_un-lacquered_an']; ?>" data-hammered_time="<?php echo $step_3['other']['hammered_aged_nickel_un-lacquered_an']; ?>">Aged Nickel Un-Lacquered (AN)</option>
                                                            <option value="Polished Brass Lacquered (PBL)" data-img="<?php echo $step_3['other']['pbl_image']['sizes']['medium_large']; ?>" data-time="<?php echo $step_3['other']['polished_brass_lacquered_pbl']; ?>" data-rush_time="<?php echo $step_3['other']['rush_polished_brass_lacquered_pbl']; ?>" data-hammered_time="<?php echo $step_3['other']['hammered_polished_brass_lacquered_pbl']; ?>">Polished Brass Lacquered (PBL)</option>
                                                            <option value="Satin Brass Lacquered (SBL)" data-img="<?php echo $step_3['other']['sbl_image']['sizes']['medium_large']; ?>" data-time="<?php echo $step_3['other']['satin_brass_lacquered_sbl']; ?>" data-rush_time="<?php echo $step_3['other']['rush_satin_brass_lacquered_sbl']; ?>" data-hammered_time="<?php echo $step_3['other']['hammered_satin_brass_lacquered_sbl']; ?>">Satin Brass Lacquered (SBL)</option>
                                                            <option value="Satin Brass Waxed (SBW)" data-img="<?php echo $step_3['other']['sbw_image']['sizes']['medium_large']; ?>" data-time="<?php echo $step_3['other']['satin_brass_waxed_sbw']; ?>" data-rush_time="<?php echo $step_3['other']['hammered_satin_brass_waxed_sbw']; ?>" data-hammered_time="<?php echo $step_3['other']['rush_satin_brass_waxed_sbw']; ?>">Satin Brass Waxed (SBW)</option>
                                                            <option value="Powder Coat Semi-Matte Black (MB)" data-img="<?php echo $step_3['other']['mb_image']['sizes']['medium_large']; ?>" data-time="<?php echo $step_3['other']['powder_coat_semi-matte_black_mb']; ?>" data-rush_time="<?php echo $step_3['other']['rush_powder_coat_semi-matte_black_mb']; ?>" data-hammered_time="<?php echo $step_3['other']['hammered_powder_coat_semi-matte_black_mb']; ?>">Matte Black (MB)</option>
                                                        </optgroup>
                                                    </select>
                                                    <span class="error select_finish_3"></span>
                                                </div>
                                            </div>

                                            <div class="col-md-6 col-sm-6 col-quick_ship">
                                                <div class="form-group" tabindex="35">
                                                    <a href="<?php echo $step_3['qickship_program_pdf']; ?>" target="_blank" class="popup-modal-img"></a>
                                                    <select name="select_quick_ship" class="form-control" id="select_quick_ship" title="Quick Ship Program - selected styles only">
                                                        <optgroup label="TAPERED FOOT:">
                                                            <option value="select">Quick Ship Program - selected styles only </option>
                                                            <option value="LS2T - PC">LS2T - PC</option>
                                                            <option value="LS2T - PN">LS2T - PN</option>
                                                            <option value="LS2TNR - PC">LS2TNR - PC</option>
                                                            <option value="LS2TNR - PN">LS2TNR - PN</option>
                                                            <option value="LS21T - PC">LS21T - PC</option>
                                                            <option value="LS21T - PN">LS21T - PN</option>
                                                            <option value="LS21TNR - PC">LS21TNR - PC</option>
                                                            <option value="LS21TNR - PN">LS21TNR - PN</option>
                                                        </optgroup>
                                                        <optgroup label="STUDIO:">
                                                            <option value="LS2S - PC">LS2S - PC</option>
                                                            <option value="LS2S - PN">LS2S - PN</option>
                                                            <option value="LS2SNR - PC">LS2SNR - PC</option>
                                                            <option value="LS2SNR - PN">LS2SNR - PN</option>
                                                            <option value="LS21S - PC">LS21S - PC</option>
                                                            <option value="LS21S - PN">LS21S - PN</option>
                                                            <option value="LS21SNR - PC">LS21SNR - PC</option>
                                                            <option value="LS21SNR - PN">LS21SNR - PN</option>
                                                        </optgroup>
                                                        <optgroup label="None of the Above"></optgroup>

                                                    </select>
                                                    <span class="error select_quick_ship"></span>
                                                </div>
                                            </div>

                                            <div class="col-md-6 col-sm-6 col-quick_ship">
                                                <div class="form-group lbl-show-mb2" tabindex="36">
                                                    <a href="#ordering_more_then_one_popup" class="palmer-popup-link popup-modal-img"></a>
                                                    <select name="select_identical_leg_system" class="form-control ghost_step_3" id="select_identical_leg_system" title="Ordering More than 1 Identical Leg System ? ">
                                                        <option value="select">Quantity of Systems</option>
                                                        <option value="Just 1 Leg System">Just 1 Leg System</option>
                                                        <option value="2 Identical Leg Systems">2 Identical Leg Systems</option>
                                                        <option value="3 Identical Leg Systems">3 Identical Leg Systems</option>
                                                        <option value="4 Identical Leg Systems">4 Identical Leg Systems</option>
                                                        <option value="Other - please enter">Other - please enter</option>
                                                    </select>
                                                    <span class="error select_identical_leg_system"></span>
                                                </div>
                                                <div class="form-group d-none lbl-top">
                                                    <input type="text" class="form-control" tabindex="34" id="select_identical_leg_system_other" name="select_identical_leg_system_other" placeholder="" title="Please enter “Other” here…">
                                                    <label class="lbl-txt">Please enter “Other” here…</label>
                                                    <span class="error"></span>
                                                </div>
                                            </div>

                                            <div class="col-md-6 col-sm-4">
                                                <div class="form-group" tabindex="37">
                                                    <a href="#number_of_front_legs_popup" class="palmer-popup-link popup-modal-img"></a>
                                                    <select name="select_front_legs_3" class="form-control ghost_step_3" id="select_front_legs_3" title="Number of FRONT LEGS">
                                                        <option value="select">Number of Front Legs</option>
                                                        <option value="Single Leg">Single Leg(s)</option>
                                                        <option value="2 Legs">2 Front Legs</option>
                                                        <option value="3 Legs">3 Front Legs</option>
                                                        <option value="4 Legs">4 Front Legs</option>
                                                        <option value="Other - please enter">Other - please enter</option>
                                                    </select>
                                                    <span class="error select_front_legs_3"></span>
                                                </div>
                                                <div class="form-group d-none lbl-top">
                                                    <input type="text" class="form-control" tabindex="38" id="number_of_front_legs_other" name="number_of_front_legs_other" placeholder="" title="Please enter “Other” here…">
                                                    <label class="lbl-txt">Please enter “Other” here…</label>
                                                    <span class="error"></span>
                                                </div>
                                            </div>
                                            <div class="col-md-6 col-sm-4">
                                                <div class="form-group rdo-btn lbl-show-mb3" tabindex="39" title="Optional REAR LEGS">
                                                    <a href="#optional_rear_legs_popup" class="palmer-popup-link popup-modal-img"></a>
                                                    <label>
                                                        <input id="optional_rear_leg_3" class="condition-radio" type="radio" name="optional_rear" value="Optional REAR LEGS" />
                                                        <span><div class="dealer-customer"> Optional Rear Legs 
                                                        </div></span>
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="col-md-6 col-sm-4">
                                                <div class="form-group rdo-btn optional_rear_risers lbl-show-mb4" tabindex="40" title="Optional Rear Risers">
                                                    <a href="#rear_riser_popup" class="palmer-popup-link popup-modal-img"></a>
                                                    <label>
                                                        <input id="optional_rear_risers_3" class="condition-radio" type="radio" name="optional_rear" value="Optional Rear Risers" />
                                                        <span><div class="dealer-customer"> Optional Rear Risers 
                                                        </div></span>
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="col-md-6 col-sm-4 diameter-rdo-btn">
                                                <div class="form-group rdo-btn v-mb-0" tabindex="41" title="Split Diameter Tubing">
                                                    <a href="#split_diameter_popup" class="palmer-popup-link popup-modal-img"></a>
                                                    <label>
                                                        <input id="split_diameter_tubing_3" class="condition-radio" type="checkbox" name="split_diameter_tubing_3" value="Split Diameter Tubing" data-img="<?php echo home_url(); ?>/wp-content/plugins/custom-elementor-widgets/assets/images/vanity-product/split-diameter-PU.png" title="Split Diameter Tubing" />
                                                        <span><div class="dealer-customer">Split Diameter Tubing 
                                                        </div></span>
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="col-md-6 col-sm-4 d-none single-legs-dropdown">
                                                <div class="form-group" tabindex="42">

                                                    <select name="select_single_legs" class="form-control" id="select_single_legs" title="Number of Single LEGS">
                                                        <option value="select">Number of Single Legs</option>
                                                        <option value="1 Single Leg">1 Single Leg</option>
                                                        <option value="2 Single Legs">2 Single Legs</option>
                                                        <option value="3 Single Legs">3 Single Legs</option>
                                                        <option value="4 Single Legs">4 Single Legs</option>
                                                        <option value="Other - please enter">Other - please enter</option>
                                                        <option value="None">None</option>
                                                    </select>
                                                    <span class="error select_single_legs"></span>
                                                </div>
                                                <div class="form-group d-none lbl-top">
                                                    <input type="text" class="form-control" tabindex="43" id="number_of_single_legs_other" name="number_of_single_legs_other" placeholder="" title="Please enter “Other” here…">
                                                    <label class="lbl-txt">Please enter “Other” here…</label>
                                                    <span class="error"></span>
                                                </div>
                                            </div>
                                            <div class="col-md-6 col-sm-4 curved_front_crossbar">
                                                <div class="form-group rdo-btn v-mb-0" tabindex="44" title="Curved Front Crossbar">
                                                    <a href="#curver_crossbar_popup" class="palmer-popup-link popup-modal-img"></a>
                                                    <label>
                                                        <input id="curved_front_crossbar_3" class="condition-radio" type="checkbox" name="curved_front_crossbar_3" value="Curved Front Crossbar" data-img="<?php echo home_url(); ?>/wp-content/plugins/custom-elementor-widgets/assets/images/vanity-product/Curved-Crossbar-PU280.jpg" />
                                                        <span><div class="dealer-customer">Curved Front Crossbar 
                                                        </div></span>
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="col-md-6 col-sm-4 ada-compliant">
                                                <div class="form-group rdo-btn v-mb-0" tabindex="46" title="ADA  Compliant">
                                                    <a href="#ada_popup" class="palmer-popup-link popup-modal-img"></a>
                                                    <label>
                                                        <input id="ada_compliant_3" class="condition-radio" type="checkbox" name="ada_compliant_3" value="ADA Compliant" data-img="<?php echo home_url(); ?>/wp-content/plugins/custom-elementor-widgets/assets/images/vanity-product/ADA-PU280.jpg" />
                                                        <span><div class="dealer-customer">ADA Compliant 
                                                        </div></span>
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="col-md-6 col-sm-4 d-none decorative_sliders">
                                                <div class="form-group rdo-btn v-mb-0" tabindex="45" title="Decorative Slider(s)">
                                                    <a href="#decorative_sliders_popup" class="palmer-popup-link popup-modal-img"></a>
                                                    <label>
                                                        <input id="decorative_sliders" class="condition-radio" type="checkbox" name="decorative_sliders" value="Decorative Slider(s)" />
                                                        <span>Decorative Slider(s)</span>
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="col-md-6 col-sm-4 d-none total-length-leg">
                                                <div class="form-group lbl-top popup-link" tabindex="47">
                                                    <a href="#total_length_of_leg_popup" class="palmer-popup-link popup-modal-cont"></a>
                                                    <input type="text" class="form-control" name="total_length_of_leg" id="total_length_of_leg" placeholder="" title="Total Length of Leg">
                                                    <label class="lbl-txt">Total Length of Leg </label>
                                                    <span class="error"></span>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="steps-paginations">
                                            <div class="back-step-forms">
												<div class="prev-btn vanity-next-btnn palmer-button" id="go-back-step-3"><button type="submit" class="btn-go-back palmer-b-button palmer-secondary-btn"><i aria-hidden="true" class="hnice icon- hnice-icon-chevron-left"></i>Go Back</button>
												</div>
                                            </div>
                                            <div class="next-step-forms">
                                                <a href="#" class="next-step-out next-step-4 step-next">
                                                    <div class="next-btn vanity-next-btnn palmer-button palmer-primary-btn">
                                                        <button type="submit" name="btn_submit" id="">Next <i aria-hidden="true" class="hnice-icon- hnice-icon-chevron-right"></i></button>
                                                    </div>                                                    
                                                </a>
                                                <a href="#" class="next-step-out next-step-4-1 step-next">
                                                    <div class="next-btn vanity-next-btnn palmer-button palmer-primary-btn">
                                                        <button type="submit" name="btn_submit" id="">Next <i aria-hidden="true" class="hnice-icon- hnice-icon-chevron-right"></i></button>
                                                    </div>
                                                </a>
                                            </div>
                                        </div>

                                    </div>

                                    <div class="vanity-form-box materials-options d-none" id="step-4">
                                        <div class="steps-4"></div>
                                        <div class="step-progress desktop-progress-bar">
                                            <div class="steps-progress">1</div>
                                            <div class="steps-progress">2</div>
                                            <div class="steps-progress">3</div>
                                            <div class="steps-progress">4</div>
                                            <div class="steps-progress active">5</div>
                                            <div class="steps-progress">6</div>
                                            <div class="steps-progress">7</div>
                                        </div>

                                        <div class="mobile-step-progress">
                                            <div class="steps-progress active">5</div>
                                            <p>5/7</p>
                                        </div>

                                        <h2 class="test">Material Options</h2>
                                        <div class="row">
                                            <div class="col-md-4 col-sm-4">
                                                <div class="form-group" tabindex="48">
                                                    <a href="#acrylic_rod_popup" class="palmer-popup-link popup-modal-img"></a>
                                                    <select name="select_acrylic_rod_4" class="form-control" id="select_acrylic_rod_4" title="Select Acrylic Rod">
                                                        <option value="select">Select Acrylic Rod</option>
                                                        <option value="None">None</option>
                                                        <option value="Legs & Horizontals" data-img="<?php echo home_url(); ?>/wp-content/plugins/custom-elementor-widgets/assets/images/vanity-product/Acrylic-PU280.png">Legs & Horizontals</option>
                                                        <option value="Legs Only" data-img="<?php echo home_url(); ?>/wp-content/plugins/custom-elementor-widgets/assets/images/vanity-product/Acrylic-PU280.png">Legs Only</option>
                                                        <option value="Horizontals Only" data-img="<?php echo home_url(); ?>/wp-content/plugins/custom-elementor-widgets/assets/images/vanity-product/Acrylic-PU280.png">Horizontals Only</option>
                                                    </select> 
                                                    <span class="error select_acrylic_rod_4"></span>
                                                </div>
                                            </div>
                                            <div class="col-md-4 col-sm-4">
                                                <div class="form-group" tabindex="49">
                                                    <a href="#reeded_tubing_popup" class="palmer-popup-link popup-modal-img"></a>
                                                    <select name="select_reeded_tubing_4" class="form-control" id="select_reeded_tubing_4" title="Select Reeded Tubing">
                                                        <option value="select">Select Reeded Tubing</option>
                                                        <option value="None">None</option>
                                                        <option value="Legs & Horizontals" data-img="<?php echo home_url(); ?>/wp-content/plugins/custom-elementor-widgets/assets/images/vanity-product/Reeded-PU280.png">Legs & Horizontals</option>
                                                        <option value="Legs Only" data-img="<?php echo home_url(); ?>/wp-content/plugins/custom-elementor-widgets/assets/images/vanity-product/Reeded-PU280.png">Legs Only</option>
                                                        <option value="Horizontals Only" data-img="<?php echo home_url(); ?>/wp-content/plugins/custom-elementor-widgets/assets/images/vanity-product/Reeded-PU280.png">Horizontals Only</option>
                                                    </select>
                                                    <span class="error select_reeded_tubing_4"></span>
                                                </div>
                                            </div>
                                            <div class="col-md-4 col-sm-4">

                                                <div class="form-group" tabindex="50">
                                                    <a href="#hammered_balls_popup" class="palmer-popup-link popup-modal-img"></a>
                                                    <select name="hammered_tubing_4" class="form-control" id="hammered_tubing_4" title="Hammered Balls">
                                                        <option value="select">Hammered Balls</option>
                                                        <option value="None">None</option>
                                                        <option value="Balls on Front Legs Only" data-img="<?php echo home_url(); ?>/wp-content/plugins/custom-elementor-widgets/assets/images/vanity-product/Hammered-Balls-PU280.png">Balls on Front Legs Only</option>
                                                        <option value="All Balls" data-img="<?php echo home_url(); ?>/wp-content/plugins/custom-elementor-widgets/assets/images/vanity-product/Hammered-Balls-PU280.png">All Balls</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="steps-paginations">
                                            <div class="back-step-forms">
												<div class="prev-btn vanity-next-btnn palmer-button" id="go-back-step-4"><button type="submit" class="btn-go-back palmer-b-button palmer-secondary-btn"><i aria-hidden="true" class="hnice icon- hnice-icon-chevron-left"></i>Go Back</button>
												</div>
                                            </div>
                                            <div class="next-step-forms">
                                                <a href="#" class="next-step-out next-step-5 step-next">
                                                    <div class="next-btn vanity-next-btnn palmer-button palmer-primary-btn">
                                                        <button type="submit" name="btn_submit" id="">Next <i aria-hidden="true" class="hnice-icon- hnice-icon-chevron-right"></i></button>
                                                    </div>
                                                </a>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="vanity-form-box shelving-options d-none" id="step-5">
                                        <div class="steps-5"></div>
                                        <div class="step-progress desktop-progress-bar">
                                            <div class="steps-progress">1</div>
                                            <div class="steps-progress">2</div>
                                            <div class="steps-progress">3</div>
                                            <div class="steps-progress">4</div>
                                            <div class="steps-progress">5</div>
                                            <div class="steps-progress active">6</div>
                                            <div class="steps-progress">7</div>
                                        </div>

                                        <div class="mobile-step-progress">
                                            <div class="steps-progress active">6</div>
                                            <p>6/7</p>
                                        </div>

                                        <h2 class="test">Shelving Options</h2>
                                        <div class="row countertop">
                                            <div class="col-md-6 col-sm-6">
                                                <div class="form-group" tabindex="51">
                                                    <a href="<?php echo $step_5['shelving_type_url']; ?>" target="_blank" class="popup-modal-img"></a>
                                                    <select name="select_shelving_type_5" class="form-control" id="select_shelving_type_5" title="Select a Shelving Type">
                                                        <option value="select">Select a Shelving Type</option>
                                                        <option value="None">None</option>
                                                        <option value="Hotel Style Tubular Metal Shelf" data-img="<?php echo home_url(); ?>/wp-content/plugins/custom-elementor-widgets/assets/images/vanity-product/Hotel-Shelf-PU280.png">Hotel Style Tubular Metal Shelf</option>
                                                        <option value="Glass Shelf - Standard Clear" data-img="<?php echo home_url(); ?>/wp-content/plugins/custom-elementor-widgets/assets/images/vanity-product/Glass-Shelf-PU280.png">Glass Shelf - Standard Clear</option>
                                                        <option value="Glass Shelf - Low Iron" data-img="<?php echo home_url(); ?>/wp-content/plugins/custom-elementor-widgets/assets/images/vanity-product/Glass-Shelf-PU280.png">Glass Shelf - Low Iron</option>
                                                        <option value="Teak Wood Shelf" data-img="<?php echo home_url(); ?>/wp-content/plugins/custom-elementor-widgets/assets/images/vanity-product/Teak-Wood-PU280.png">Teak Wood Shelf</option>
                                                        <option value="Shelving Provided by Others">Shelving Provided by Others</option>
                                                    </select>
                                                    <span class="error select_shelving_type_5"></span>
                                                </div>
                                            </div>
                                            <div class="col-md-6 col-sm-6">
                                                <div class="form-group" tabindex="52">
                                                    <a href="<?php echo $step_5['shelf_support_url']; ?>" target="_blank" class="popup-modal-img"></a>
                                                    <select name="select_shelf_support_5" class="form-control" id="select_shelf_support_5" title="Select a Shelf Support">
                                                        <option value="select">Select a Shelf Support</option>
                                                        <option value="None">None</option>
                                                        <option value="Rail Style Shelf Support" data-img="<?php echo home_url(); ?>/wp-content/plugins/custom-elementor-widgets/assets/images/vanity-product/Rail-SS-PU280.png">Rail Style Shelf Support</option>
                                                        <option value="Low Profile Shelf Support" data-img="<?php echo home_url(); ?>/wp-content/plugins/custom-elementor-widgets/assets/images/vanity-product/Low-Profile-SS-PU280.png">Low Profile Shelf Support</option>
                                                        <option value="Clip Style Shelf Support" data-img="<?php echo home_url(); ?>/wp-content/plugins/custom-elementor-widgets/assets/images/vanity-product/Clip-SS-PU280.jpg">Clip Style Shelf Support</option>
                                                        <option value="Split-Collar Shelf Support" data-img="<?php echo home_url(); ?>/wp-content/plugins/custom-elementor-widgets/assets/images/vanity-product/Split-Collar-SS-PU280.png">Split-Collar Shelf Support</option>
                                                    </select>
                                                    <span class="error select_shelf_support_5"></span>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="steps-paginations">
                                            <div class="back-step-forms">
												<div class="prev-btn vanity-next-btnn palmer-button" id="go-back-step-5"><button type="submit" class="btn-go-back palmer-b-button palmer-secondary-btn"><i aria-hidden="true" class="hnice icon- hnice-icon-chevron-left"></i>Go Back</button>
												</div>
                                            </div>
                                            <div class="next-step-forms">
                                                <a href="#" class="next-step-out next-step-6 step-next">
                                                    <div class="next-btn vanity-next-btnn palmer-button palmer-primary-btn">
                                                        <button type="submit" name="btn_submit" id="">Next <i aria-hidden="true" class="hnice-icon- hnice-icon-chevron-right"></i></button>
                                                    </div>
                                                </a>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="vanity-form-box optional-accessories d-none" id="step-6">
                                        <div class="steps-6"></div>
                                        <div class="step-progress desktop-progress-bar">
                                            <div class="steps-progress">1</div>
                                            <div class="steps-progress">2</div>
                                            <div class="steps-progress">3</div>
                                            <div class="steps-progress">4</div>
                                            <div class="steps-progress">5</div>
                                            <div class="steps-progress">6</div>
                                            <div class="steps-progress active">7</div>
                                        </div>

                                        <div class="mobile-step-progress">
                                            <div class="steps-progress active">7</div>
                                            <p>7/7</p>
                                        </div>

                                        <h2 class="test">Optional Accessories</h2>
                                        <div class="row countertop">
                                            <div class="col-md-6 col-sm-6">
                                                <div class="form-group" tabindex="53">
                                                    <a href="#front_risers_popup_step_six" class="palmer-popup-link popup-modal-img"></a>
                                                    <select name="select_front_risers_6" class="form-control" id="select_front_risers_6" title="Select Front Risers">
                                                        <option value="select">Select Front Risers</option>
                                                        <option value="None">None</option>
                                                        <option value="1 Front Riser - Centered" data-img="<?php echo home_url(); ?>/wp-content/plugins/custom-elementor-widgets/assets/images/vanity-product/Front-Riser-PU280.png">1 Front Riser - Centered</option>
                                                        <option value="2 Front Risers - left & right of Sink" data-img="<?php echo home_url(); ?>/wp-content/plugins/custom-elementor-widgets/assets/images/vanity-product/Front-Riser-PU280.png">2 Front Risers - left & right of Sink</option>
                                                    </select>
                                                    <span class="error select_front_risers_6"></span>
                                                </div>
                                            </div>
                                            <div class="col-md-6 col-sm-6">
                                                <div class="form-group" tabindex="54">
                                                    <a href="#wall_brackets_pu_popup" class="palmer-popup-link popup-modal-img"></a>
                                                    <select name="select_wall_bracket_6" class="form-control" id="select_wall_bracket_6" title="Select Wall Bracket Options">
                                                        <option value="select">Select Wall Bracket Options</option>
                                                        <option value="None">None</option>
                                                        <option value="Standard Aluminum Bracket - Included" data-img="<?php echo home_url(); ?>/wp-content/plugins/custom-elementor-widgets/assets/images/vanity-product/Wall-Brackets-PU280.png">Standard Aluminum Bracket - Included</option>
                                                        <option value="Brass Bracket Plated to match your finish" data-img="<?php echo home_url(); ?>/wp-content/plugins/custom-elementor-widgets/assets/images/vanity-product/Wall-Brackets-PU280.png">Brass Bracket Plated to match your finish</option>
                                                        <option value="Heavy-Duty Aluminum Bracket" data-img="<?php echo home_url(); ?>/wp-content/plugins/custom-elementor-widgets/assets/images/vanity-product/Wall-Brackets-PU280.png">Heavy-Duty Aluminum Bracket</option>
                                                        <option value="Exclude Wall Bracket" data-img="<?php echo home_url(); ?>/wp-content/plugins/custom-elementor-widgets/assets/images/vanity-product/Wall-Brackets-PU280.png">Exclude Wall Bracket</option>
                                                    </select>
                                                    <span class="error select_wall_bracket_6"></span>
                                                </div>
                                            </div>
                                            <div class="col-md-6 col-sm-6">
                                                <div class="form-group" tabindex="55">
                                                    <a href="#tp_holder_popup" class="palmer-popup-link popup-modal-img"></a>
                                                    <select name="select_toilet_paper_6" class="form-control" id="select_toilet_paper_6" title="Select Toilet Paper Holder">
                                                        <option value="select">Select Toilet Paper Holder</option>
                                                        <option value="None">None</option>
                                                        <option value="TP Holder mounted on Right side" data-img="<?php echo home_url(); ?>/wp-content/plugins/custom-elementor-widgets/assets/images/vanity-product/TP-Holder-PU280.png">TP Holder mounted on Right side</option>
                                                        <option value="TP Holder mounted on Left side" data-img="<?php echo home_url(); ?>/wp-content/plugins/custom-elementor-widgets/assets/images/vanity-product/TP-Holder-PU280.png">TP Holder mounted on Left side</option>
                                                    </select>
                                                    <span class="error select_toilet_paper_6"></span>
                                                </div>
                                            </div>
                                            <div class="col-md-6 col-sm-6">
                                                <div class="form-group" tabindex="56">
                                                    <a href="#aux_towel_rail_pu_popup" class="palmer-popup-link popup-modal-img"></a>
                                                    <select name="select_auxilliary_towel_6" class="form-control" id="select_auxilliary_towel_6" title="Select Auxiliary Towel Rail">
                                                        <option value="select">Select Auxiliary Towel Rail</option>
                                                        <option value="None">None</option>
                                                        <option value="Mounted on Right Side" data-img="<?php echo home_url(); ?>/wp-content/plugins/custom-elementor-widgets/assets/images/vanity-product/Aux-Towel-Rail-PU280.jpg">Mounted on Right Side</option>
                                                        <option value="Mounted on Left Side" data-img="<?php echo home_url(); ?>/wp-content/plugins/custom-elementor-widgets/assets/images/vanity-product/Aux-Towel-Rail-PU280.jpg">Mounted on Left Side</option>
                                                        <option value="(2) Mounted on both Sides" data-img="<?php echo home_url(); ?>/wp-content/plugins/custom-elementor-widgets/assets/images/vanity-product/Aux-Towel-Rail-PU280.jpg">(2) Mounted on both Sides</option>
                                                    </select>
                                                    <span class="error select_auxilliary_towel_6"></span>
                                                </div>
                                                <div class="form-group lbl-top popup-link mbl-countertop-width single-countertop d-none">
                                                    <a href="#counter_w_d_popup" class="palmer-popup-link popup-modal-cont"></a>
                                                    <input type="text" class="form-control" name="single_countertop_width" id="single_countertop_width" title="Countertop Width" placeholder="">
                                                    <label class="lbl-txt">Countertop Width - needed to size Wall Bracket</label>
                                                    <span class="error"></span>
                                                </div>



                                            </div>
                                        </div>

                                        <div class="steps-paginations">
                                            <div class="back-step-forms">
												<div class="prev-btn vanity-next-btnn palmer-button" id="go-back-step-6"><button type="submit" class="btn-go-back palmer-b-button palmer-secondary-btn"><i aria-hidden="true" class="hnice icon- hnice-icon-chevron-left"></i>Go Back</button>
												</div>
                                            </div>
                                            <div class="next-step-forms">
                                                <a href="#" class="next-step-out next-step-7 step-next">
                                                    <div class="next-btn vanity-next-btnn palmer-button palmer-primary-btn">
                                                        <button type="submit" name="btn_submit" id="">Next <i aria-hidden="true" class="hnice-icon- hnice-icon-chevron-right"></i></button>
                                                    </div>
                                                </a>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="vanity-form-box expeditting-services d-none vanity-footer-form" id="step-7">
                                        <div class="steps-7"></div>
                                        <h2 class="test">Expediting Services</h2>
                                        <div class="step-seven-show-1 cong d-none">
                                            <div class="row">
                                                <div style="padding: 0 0 0 85px;">
                                                    <h3 style="color:#d01212">Congratulations...</h3>
                                                </div>
                                                <p><span class="select-leg-lead-time">Your selected Leg Style and Finish combination qualifies for our Promotional Reduced Lead Time!<br></span>
                                                    The Estimated Production Lead Time for your selected style and finish is: 3 - 4 Weeks</p>
                                            </div>
                                        </div>
                                        <div class="step-seven-show-2">
                                            <div class="row">
                                                <div class="col-md-6 col-sm-6">
                                                    
                                                    <p id="production_time" name="production_time">The Estimated Production Lead Time for <br> your selected finish is: <span>7 - 8 Weeks</span></p>

                                                </div>
                                                <div class="col-md-6 col-sm-6">
                                                    <div class="form-group rdo-btn" tabindex="57" title="Paid RUSH SERVICE Request">
                                                       
                                                        <label>
                                                            <input type="checkbox" name="paid_rush_service_7" value="Paid RUSH SERVICE Request" id="paid_rush_service_7" />
                                                            <span><div class="dealer-customer">Paid Rush Service Request 
                                                            </div></span>

                                                        </label>
                                                    </div>
                                                </div>
                                                <p id="rush_weeks" class="d-none" name="rush_weeks"><span>Paid Rush Service </span>will reduce your production lead time <span class="rush-weeks">1 / 2 for Estimated Production Lead Time</span></p>
                                            </div>
                                        </div>

                                    </div>
                                    
                                    <div class="form-footer vanity-footer-form d-none">
                                       <div class="steps-paginations-submit">
                                            <div class="form-footer-right">
												<div class="prev-btn vanity-next-btnn palmer-button" id="go-back-step-7"><button type="submit" class="btn-go-back palmer-b-button palmer-secondary-btn"><i aria-hidden="true" class="hnice icon- hnice-icon-chevron-left"></i>Go Back</button>
												</div>
												<div class="prev-btn vanity-next-btnn palmer-button" id="go-back-step-7-1"><button type="submit" class="btn-go-back palmer-b-button palmer-secondary-btn"><i aria-hidden="true" class="hnice icon- hnice-icon-chevron-left"></i>Go Back</button>
												</div>

                                                <div class="submit-btn vanity-btnn palmer-button">
                                                    <input type="hidden" name="ContactSubmit" value="1">

                                                    <button type="submit" name="btn_submit" id="btn_submit" class="palmer-primary-btn" value="Submit">Submit <i aria-hidden="true" class="hnice-icon- hnice-icon-chevron-right"></i></button>
                                                </div>                                               
                                            </div>
                                        </div>
										<div class="custom-recaptcha-wrap">
                                            [cf7sr-recaptcha]
                                        </div>
                                        <div class="form-footer-note">
                                            <p class="info_sent d-none">Your information has been received.</p>
                                            
                                            <div class="vanity-info-footer-form">
                                            <p>Palmer offers a Paid Rush Service that can reduce your production lead time up to 50%. <br> <br> 
                                            *Our paid rush service will typically increase your net cost by around 25% depending on the shop workload.<br><br> 
                                            *The paid rush service may not always be available depending on your selected finish choice and the workload of the production team.<br><br> 
                                            *The paid rush service is not available for PVD finishes.</p></div>
                                        </div>
                                        <a href="#submit_attention_popup" id="submit_attention_popup_aTag" class="palmer-popup-link" style="display: none;">test</a>
                                        <div id="submit_attention_popup" class="mfp-hide">
                                            <button class="mfp-close mfp-close-mobile" title="Close">×</button>
                                            <div class="popup-inner-content">
                                                <div class="product-sink-leg-estimator-popup">
                                                    <div class="product-estimator-popup">
                                                        <p>Your data has been submitted to Palmer Industries <br> if you do not receive an email reply within 5 minutes <br> an error has occurred - please contact Palmer for assistance.</p>
                                                    </div>
                                                    <span class="mfp-close-desktop mfp-close">×</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div class="vanity-form-inner-right">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="leg-style-show">
                                            <img id="style_image" name="side_image" src="<?php echo home_url(); ?>/wp-content/plugins/custom-elementor-widgets/assets/images/vanity-product/Ball-Foot-PBUL-PU280.png">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="finish-style-show">
                                            <img id="finish_image" name="finish_side_image" class="finish-side-image" src="<?php echo home_url(); ?>/wp-content/plugins/custom-elementor-widgets/assets/images/vanity-product/PBL-16w.jpg">
                                            <span id="finish-esti-time"></span>
                                        </div>
                                    </div>

                                    <div class="col-md-12 slof-style-img-col">
                                        <div class="slof-style-show">
                                            <img id="slof_image" name="slof_side_image" src="<?php echo home_url(); ?>/wp-content/plugins/custom-elementor-widgets/assets/images/SLOF-images/Custom-config.jpg">
                                        </div>
                                    </div>
                                </div>

                                <div class="row second"></div>
                            </div>
                        </section>

                        <div id="purchase_order_popup" class="white-popup mfp-hide vanity-popup">
                            <div class="popup-inner">
                                <?php echo wp_get_attachment_image($step_1['puchase_order_image'], "");  ?><br>
                                <button title="Close (Esc)" type="button" class="mfp-close"></button>
                            </div>
                        </div>

                        <div id="counter_w_d_popup" class="mfp-hide">
                            <button class="mfp-close mfp-close-mobile" title="Close">×</button>
                            <div class="popup-inner-content">
                                <div class="product-sink-leg-estimator-popup">
                                    <div class="product-estimator-popup">
                                        <?php echo wp_get_attachment_image($step_2['countertop_width_depthhight_popup_image'], "");  ?><br>
                                    </div>
                                    <span class="mfp-close-desktop mfp-close">×</span>
                                </div>
                            </div>
                        </div>

                        <div id="apparent_thickness_popup" class="mfp-hide">
                            <button class="mfp-close mfp-close-mobile" title="Close">×</button>
                            <div class="popup-inner-content">
                                <div class="product-sink-leg-estimator-popup">
                                    <div class="product-estimator-popup">
                                        <?php echo wp_get_attachment_image($step_2['apparent_thickness'], "");  ?><br>
                                    </div>
                                    <span class="mfp-close-desktop mfp-close">×</span>
                                </div>
                            </div>
                        </div>

                        <div id="countertop_materials_popup" class="mfp-hide">
                            <button class="mfp-close mfp-close-mobile" title="Close">×</button>
                            <div class="popup-inner-content">
                                <div class="product-sink-leg-estimator-popup">
                                    <div class="product-estimator-popup">
                                        <div class="span-countertop">
                                            <h2>“Span” of the Countertop:</h2>
                                            <p>Because this piece of stone or other material is supported only by the legs <br> and the Wall Bracket, the “Span”, the distance between the legs, needs to be considered</p>
                                            <p>Especially because the sink usually cuts a big hole in the middle of the countertop,<br>often leaving only a narrow strip of stone at the front. </p>
                                            <p>How much weight this can support depends on the type of stone, the thickness, etc.<br>So, this is a question best answered by your local stone fabricator.</p>
                                        </div>
                                        <div class="china-sinktop">
                                            <h2>China Sink Tops:</h2>
                                            <p>The concern with China & Porcelain Sink Tops is where the top of the legs <br>meet the bottom of the sink top: </p>
                                            <p class="legs-to-rest">Is there a sufficiently large and flat area for the legs to rest on?</p>
                                            <div class="china-sinktop-inner">
                                                <p>We have a “DataBase” of sinks that we have successfully worked with in the past.</p>
                                                <p>If your sink model is on this list then you are “Good-to-Go”</p>
                                                <p>If your sink is not listed then you should discuss the sink compatibility with a </p>
                                                <p>Palmer SinkLegs specialist at 401-421-1730</p>
                                            </div>
                                            <a href="<?php echo home_url(); ?>/sinks" target="_blank"><i>Please view our China Sink DataBase here.</i></a>
                                        </div>
                                    </div>
                                    <span class="mfp-close-desktop mfp-close">×</span>
                                </div>
                            </div>
                        </div>

                        <div id="countertop_overhang_popup" class="mfp-hide">
                            <button class="mfp-close mfp-close-mobile" title="Close">×</button>
                            <div class="popup-inner-content">
                                <div class="product-sink-leg-estimator-popup">
                                    <div class="product-estimator-popup">
                                        <?php echo wp_get_attachment_image($step_2['countertop_overhang'], "");  ?><br>
                                    </div>
                                    <span class="mfp-close-desktop mfp-close">×</span>
                                </div>
                            </div>
                        </div>

                        <div id="drop_ship_popup" class="mfp-hide">
                            <button class="mfp-close mfp-close-mobile" title="Close">×</button>
                            <div class="popup-inner-content">
                                <div class="product-sink-leg-estimator-popup">
                                    <div class="product-estimator-popup">
                                        <?php echo wp_get_attachment_image($step_1['drop_ship_popup_image'], "");  ?>
                                    </div>
                                    <span class="mfp-close-desktop mfp-close">×</span>
                                </div>
                            </div>
                        </div>

                        <div id="number_of_sinks_popup" class="mfp-hide">
                            <button class="mfp-close mfp-close-mobile" title="Close">×</button>
                            <div class="popup-inner-content">
                                <div class="product-sink-leg-estimator-popup">
                                    <div class="product-estimator-popup">
                                        <?php echo wp_get_attachment_image($step_2['number_of_sinks'], "");  ?><br>
                                    </div>
                                    <span class="mfp-close-desktop mfp-close">×</span>
                                </div>
                            </div>
                        </div>
                        
                        <div id="ordering_more_then_one_popup" class="mfp-hide">
                            <button class="mfp-close mfp-close-mobile" title="Close">×</button>
                            <div class="popup-inner-content">
                                <div class="product-sink-leg-estimator-popup">
                                    <div class="product-estimator-popup">
                                        <?php echo wp_get_attachment_image($step_3['ordering_more_than_1'], "");  ?><br>
                                    </div>
                                    <span class="mfp-close-desktop mfp-close">×</span>
                                </div>
                            </div>
                        </div>
                        
                        <div id="number_of_front_legs_popup" class="mfp-hide">
                            <button class="mfp-close mfp-close-mobile" title="Close">×</button>
                            <div class="popup-inner-content">
                                <div class="product-sink-leg-estimator-popup">
                                    <div class="product-estimator-popup">
                                        <?php echo wp_get_attachment_image($step_3['number_of_front_legs_image'], "");  ?><br>
                                    </div>
                                    <span class="mfp-close-desktop mfp-close">×</span>
                                </div>
                            </div>
                        </div>
                        
                        <div id="optional_rear_legs_popup" class="mfp-hide">
                            <button class="mfp-close mfp-close-mobile" title="Close">×</button>
                            <div class="popup-inner-content">
                                <div class="product-sink-leg-estimator-popup">
                                    <div class="product-estimator-popup">
                                        <?php echo wp_get_attachment_image($step_3['optional_rear_legs_image'], "");  ?><br>
                                    </div>
                                    <span class="mfp-close-desktop mfp-close">×</span>
                                </div>
                            </div>
                        </div>
                        
                        <div id="rear_riser_popup" class="mfp-hide">
                            <button class="mfp-close mfp-close-mobile" title="Close">×</button>
                            <div class="popup-inner-content">
                                <div class="product-sink-leg-estimator-popup">
                                    <div class="product-estimator-popup">
                                        <?php echo wp_get_attachment_image($step_3['optional_rear_risers'], "");  ?><br>
                                    </div>
                                    <span class="mfp-close-desktop mfp-close">×</span>
                                </div>
                            </div>
                        </div>
                        
                        <div id="split_diameter_popup" class="mfp-hide">
                            <button class="mfp-close mfp-close-mobile" title="Close">×</button>
                            <div class="popup-inner-content">
                                <div class="product-sink-leg-estimator-popup">
                                    <div class="product-estimator-popup">
                                        <?php echo wp_get_attachment_image($step_3['split_diameter_tubing_image'], "");  ?><br>
                                    </div>
                                    <span class="mfp-close-desktop mfp-close">×</span>
                                </div>
                            </div>
                        </div>

                        <div id="number_of_single_legs_popup" class="white-popup mfp-hide vanity-popup">
                            <div class="popup-inner">
                                <?php echo wp_get_attachment_image($step_3['number_of_single_legs_image'], "");  ?><br>
                                <button title="Close (Esc)" type="button" class="mfp-close"></button>
                            </div>
                        </div>
                        
                        <div id="curver_crossbar_popup" class="mfp-hide">
                            <button class="mfp-close mfp-close-mobile" title="Close">×</button>
                            <div class="popup-inner-content">
                                <div class="product-sink-leg-estimator-popup">
                                    <div class="product-estimator-popup">
                                        <?php echo wp_get_attachment_image($step_3['curved_front_crossbar_image'], "");  ?><br>
                                    </div>
                                    <span class="mfp-close-desktop mfp-close">×</span>
                                </div>
                            </div>
                        </div>
                        
                        <div id="ada_popup" class="mfp-hide">
                            <button class="mfp-close mfp-close-mobile" title="Close">×</button>
                            <div class="popup-inner-content">
                                <div class="product-sink-leg-estimator-popup">
                                    <div class="product-estimator-popup">
                                        <?php echo wp_get_attachment_image($step_3['ada_compliant_image'], "");  ?><br>
                                    </div>
                                    <span class="mfp-close-desktop mfp-close">×</span>
                                </div>
                            </div>
                        </div>

                        <div id="total_length_of_leg_popup" class="mfp-hide">
                            <button class="mfp-close mfp-close-mobile" title="Close">×</button>
                            <div class="popup-inner-content">
                                <div class="product-sink-leg-estimator-popup">
                                    <div class="product-estimator-popup product-total-length-popup">
                                        <?php echo wp_get_attachment_image($step_3['total_length_of_leg_image'], "");  ?><br>
                                    </div>
                                    <span class="mfp-close-desktop mfp-close">×</span>
                                </div>
                            </div>
                        </div>

                        <!-- <div id="decorative_sliders_popup" class="white-popup mfp-hide vanity-popup">
                            <div class="popup-inner">
                                <1?php echo wp_get_attachment_image($step_3['decorative_sliders_image'], "");  ?><br>
                                <button title="Close (Esc)" type="button" class="mfp-close"></button>
                            </div>
                        </div> -->
                        <div id="decorative_sliders_popup" class="mfp-hide">
                            <button class="mfp-close mfp-close-mobile" title="Close">×</button>
                            <div class="popup-inner-content">
                                <div class="product-sink-leg-estimator-popup">
                                    <div class="product-estimator-popup product-total-length-popup">
                                        <?php echo wp_get_attachment_image($step_3['decorative_sliders_image'], "");  ?><br>
                                    </div>
                                    <span class="mfp-close-desktop mfp-close">×</span>
                                </div>
                            </div>
                        </div>
                        
                        <div id="acrylic_rod_popup" class="mfp-hide">
                            <button class="mfp-close mfp-close-mobile" title="Close">×</button>
                            <div class="popup-inner-content">
                                <div class="product-sink-leg-estimator-popup">
                                    <div class="product-estimator-popup">
                                        <?php echo wp_get_attachment_image($step_4['acrylic_rod_image'], "");  ?><br>
                                    </div>
                                    <span class="mfp-close-desktop mfp-close">×</span>
                                </div>
                            </div>
                        </div>
                        
                        <div id="reeded_tubing_popup" class="mfp-hide">
                            <button class="mfp-close mfp-close-mobile" title="Close">×</button>
                            <div class="popup-inner-content">
                                <div class="product-sink-leg-estimator-popup">
                                    <div class="product-estimator-popup">
                                        <?php echo wp_get_attachment_image($step_4['reeded_tubing_image'], "");  ?><br>
                                    </div>
                                    <span class="mfp-close-desktop mfp-close">×</span>
                                </div>
                            </div>
                        </div>
                        
                        <div id="hammered_balls_popup" class="mfp-hide">
                            <button class="mfp-close mfp-close-mobile" title="Close">×</button>
                            <div class="popup-inner-content">
                                <div class="product-sink-leg-estimator-popup">
                                    <div class="product-estimator-popup">
                                        <?php echo wp_get_attachment_image($step_4['hammered_balls_image'], "");  ?><br>
                                    </div>
                                    <span class="mfp-close-desktop mfp-close">×</span>
                                </div>
                            </div>
                        </div>
                        
                        <div id="front_risers_popup_step_six" class="mfp-hide">
                            <button class="mfp-close mfp-close-mobile" title="Close">×</button>
                            <div class="popup-inner-content">
                                <div class="product-sink-leg-estimator-popup">
                                    <div class="product-estimator-popup">
                                        <?php echo wp_get_attachment_image($step_6['front_risers_image'], "");  ?><br>
                                    </div>
                                    <span class="mfp-close-desktop mfp-close">×</span>
                                </div>
                            </div>
                        </div>
                        
                        <div id="wall_brackets_pu_popup" class="mfp-hide">
                            <button class="mfp-close mfp-close-mobile" title="Close">×</button>
                            <div class="popup-inner-content">
                                <div class="product-sink-leg-estimator-popup">
                                    <div class="product-estimator-popup">
                                        <?php echo wp_get_attachment_image($step_6['wall_bracket_options_image'], "");  ?><br>
                                    </div>
                                    <span class="mfp-close-desktop mfp-close">×</span>
                                </div>
                            </div>
                        </div>

                        <div id="aux_towel_rail_pu_popup" class="mfp-hide">
                            <button class="mfp-close mfp-close-mobile" title="Close">×</button>
                            <div class="popup-inner-content">
                                <div class="product-sink-leg-estimator-popup">
                                    <div class="product-estimator-popup">
                                        <?php echo wp_get_attachment_image($step_6['auxiliary_towel_rail_image'], "");  ?><br>
                                    </div>
                                    <span class="mfp-close-desktop mfp-close">×</span>
                                </div>
                            </div>
                        </div>

                        <div id="tp_holder_popup" class="mfp-hide">
                            <button class="mfp-close mfp-close-mobile" title="Close">×</button>
                            <div class="popup-inner-content">
                                <div class="product-sink-leg-estimator-popup">
                                    <div class="product-estimator-popup">
                                        <?php echo wp_get_attachment_image($step_6['toilet_paper_holder_image'], "");  ?><br>
                                    </div>
                                    <span class="mfp-close-desktop mfp-close">×</span>
                                </div>
                            </div>
                        </div>
                        
                        <div id="paid_rush_servise_popup" class="mfp-hide">
                            <button class="mfp-close mfp-close-mobile" title="Close">×</button>
                            <div class="popup-inner-content">
                                <div class="product-sink-leg-estimator-popup">
                                    <div class="product-estimator-popup">
                                        <?php echo wp_get_attachment_image($step_7['paid_rush_service_request_image'], "");  ?><br>
                                    </div>
                                    <span class="mfp-close-desktop mfp-close">×</span>
                                </div>
                            </div>
                        </div>

                        <div id="attention_popup" class="mfp-hide">
                            <button class="mfp-close mfp-close-mobile" title="Close">×</button>
                            <div class="popup-inner-content">
                                <div class="product-sink-leg-estimator-popup">
                                    <div class="product-estimator-popup">
                                        <div class="attention-content">
                                            <p>The <b>Regency</b> style is only available for 30” wide Countertops. with a depth of 22.5“</p>
                                            <p>We have changed your Countertop Width to 24” & Depth to 22.5”</p>
                                            <span class="call-for"> Call for custom sizing.</span>
                                        </div>
                                    </div>
                                    <span class="mfp-close-desktop mfp-close">×</span>
                                </div>
                            </div>
                        </div>

                        <div id="help_leg_system_popup" class="mfp-hide">
                            <button class="mfp-close mfp-close-mobile" title="Close">×</button>
                            <div class="popup-inner-content">
                                <div class="product-sink-leg-estimator-popup">
                                    <div class="product-estimator-popup">
                                        <?php echo wp_get_attachment_image($what_we_can_help['vanity_leg_system_image'], ''); ?><br>
                                        <!--<a href="<?php echo home_url(); ?>/product-category/products/leg-systems/shelf-supports/" target="_blank">Shelf Support</a>-->
                                    </div>
                                    <span class="mfp-close-desktop mfp-close">×</span>
                                </div>
                            </div>
                        </div>

                        <div id="help_quick_ship_popup" class="white-popup mfp-hide vanity-popup">
                            <div class="popup-inner">
                                <?php echo wp_get_attachment_image($what_we_can_help['help_quick-ship_program_image'], ''); ?><br>

                                <a href="<?php echo home_url(); ?>/product-category/products/leg-systems/shelf-supports/" target="_blank">Shelf Support</a>
                                <button title="Close (Esc)" type="button" class="mfp-close"></button>
                            </div>
                        </div>

                        <div id="help_single_leg_popup" class="mfp-hide">
                            <button class="mfp-close mfp-close-mobile" title="Close">×</button>
                            <div class="popup-inner-content">
                                <div class="product-sink-leg-estimator-popup">
                                    <div class="product-estimator-popup">
                                        <?php echo wp_get_attachment_image($what_we_can_help['single_leg_system_image'], ''); ?><br>
                                        <a href="<?php echo home_url(); ?>/product-category/products/leg-systems/shelf-supports/" target="_blank">Shelf Support</a>
                                    </div>
                                    <span class="mfp-close-desktop mfp-close">×</span>
                                </div>
                            </div>
                        </div>
                        <div id="notes_popup" class="mfp-hide">
                            <button class="mfp-close mfp-close-mobile" title="Close">×</button>
                            <div class="popup-inner-content">
                                <div class="product-sink-leg-estimator-popup">
                                    <div class="product-estimator-popup">
                                        <p>If you leave a note, it will have to be read by a human,<br>and that will delay your quote</p>
                                    </div>
                                    <span class="mfp-close-desktop mfp-close">×</span>
                                </div>
                            </div>
                        </div>

                        <div id="attachment_popup" class="white-popup attention-popup mfp-hide vanity-popup">
                            <div class="popup-inner">
                                <span></span>
                                <div class="attention-content">
                                    <p>“If you Attach a File, it will have to be read by a human,<br>…and that will delay your quote”</p>
                                </div>
                                <button title="Close (Esc)" type="button" class="mfp-close"></button>
                            </div>
                        </div>

                        <div id="visitor_customer_dealer_popup" class="mfp-hide">
                            <button class="mfp-close mfp-close-mobile" title="Close">×</button>
                            <div class="popup-inner-content">
                                <div class="product-sink-leg-estimator-popup">
                                    <div class="product-estimator-popup">
                                        <img src="<?php echo home_url(); ?>/wp-content/plugins/custom-elementor-widgets/assets/images/vanity-product/dealer-dustomer-pop-up.png">
                                    </div>
                                    <span class="mfp-close-desktop mfp-close">×</span>
                                </div>
                            </div>
                        </div>  

   <!-- /*21-12-2020 pos code functionality */ -->
   <!-- HTML code we have replace how to  buy page code as per requirments 5 listed dealer-->
   <div class="vanity-dealer-list">
      <h5 id="current_postcode"></h5>
      <h2 id="fetch_message"></h2>
      <ul class="vanityorder_form_dealers_list">
      </ul>
   </div>
   <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD7KSky_HISeoGV-LT5q6tqvfm-42rsfog&libraries=places&callback=initAutocomplete"></script>
   <!-- /*21-12-2020 pos code functionality */ -->

                    <?php

										
                }
                elseif ($selected_category_slug === 'shelving') {
                    // Enqueue the required assets
                    $this->enqueue_estimator_shelving_assets();

                    if ($selected_category_slug === 'shelving' && strpos($post->post_name, 'studio') !== false) {
                        $this->enqueue_studio_shelving_estimator_assets();
                    } elseif ($selected_category_slug === 'shelving' && strpos($post->post_name, 'ball') !== false) {
                        $this->enqueue_ball_shelving_estimator_assets();
                    } elseif ($selected_category_slug === 'shelving' && strpos($post->post_name, 'metro') !== false) {
                        $this->enqueue_metro_shelving_estimator_assets();
                    } elseif ($selected_category_slug === 'shelving' && strpos($post->post_name, 'split-collar') !== false) {
                        $this->enqueue_splitcollar_shelving_estimator_assets();
                    } elseif ($selected_category_slug === 'shelving' && strpos($post->post_name, 'rack') !== false) {
                        $this->enqueue_rack_shelving_estimator_assets();
                    }

                    $shortcode = get_field('shortcode', $post->ID);
                    echo $shortcode;
                }
                elseif ($selected_category_slug === 'closet-systems') {
                    // Enqueue the required assets
                    $this->enqueue_estimator_closet_system_assets();

                    $shortcode = get_field('shortcode', $post->ID);
                    echo $shortcode;
                } else {
                    echo '<p>Category-specific logic for "' . esc_html($selected_category_slug) . '" is not defined.</p>';
                }
            } else {
                echo '<p>The selected category does not match the selected estimator.</p>';
            }
        } else {
            echo '<p>Estimator not found.</p>';
        }
    }
    
    
    public function enqueue_estimator_sink_leg_assets()
    {
        wp_enqueue_style(
            'estimater-sink-legs-styles',
            plugin_dir_url(__FILE__) . 'assets/css/sinklegs_estimator.css',
            [],
            '1.0.0'
        );

        // Select2 css
        wp_enqueue_style(
            'estimater-sink-legs-select2-styles',
            plugin_dir_url(__FILE__) . 'assets/css/select2.min.css',
            [],
            '1.0.0'
        );

        // Bootstrap css
        wp_enqueue_style(
            'estimater-sink-legs-bootstrap-styles',
            plugin_dir_url(__FILE__) . 'assets/css/bootstrap-classes-for-estimator.css',
            [],
            '1.0.0'
        );

        wp_enqueue_script(
            'estimater-sink-legs-scripts',
            plugin_dir_url(__FILE__) . 'assets/js/sinklegs_estimator.js',
            ['jquery'],
            '1.0.0',
            true
        );

        // Localize the script with PHP data
        wp_localize_script('estimater-sink-legs-scripts', 'vanity_sinklegs_order_form_v3', [
            'ajaxurl' => admin_url('admin-ajax.php'),
            'slof_image_path' => plugin_dir_url(__FILE__) . 'assets/images/SLOF-images/',
        ]);

        // select 2 js
        wp_enqueue_script(
            'estimater-sink-legs-select2-scripts',
            plugin_dir_url(__FILE__) . 'assets/js/select2.min.js',
            ['jquery'],
            '1.0.0',
            true
        );
    }
    
    public function enqueue_estimator_shelving_assets()
    {

        // Required CSS & JS for Shelving estimator
            // Bootstrap css
            wp_enqueue_style(
                'estimater-shelving-bootstrap-styles',
                plugin_dir_url(__FILE__) . 'assets/css/bootstrap-classes-for-estimator.css',
                [],
                '1.0.0'
            );

            // Select2 css
            wp_enqueue_style(
                'estimater-shelving-select2-styles',
                plugin_dir_url(__FILE__) . 'assets/css/select2.min.css',
                [],
                '1.0.0'
            );

            // select 2 js
            wp_enqueue_script(
                'estimater-shelving-select2-scripts',
                plugin_dir_url(__FILE__) . 'assets/js/select2.min.js',
                ['jquery'],
                '1.0.0',
                true
            );

            // shelving estimator css
            wp_enqueue_style(
                'estimater-shelving_estimator-styles',
                plugin_dir_url(__FILE__) . 'assets/css/shelving_estimator/shelving_estimator.css',
                [],
                '1.0.0'
            );

            // shelving estimator js
            wp_enqueue_script(
                'estimater-shelving_estimator-scripts',
                plugin_dir_url(__FILE__) . 'assets/js/shelving_estimator/shelving_estimator.js',
                ['jquery'],
                '1.0.0',
                true
            );
        // Required CSS & JS for Shelving estimator
    }
    
    protected function enqueue_studio_shelving_estimator_assets()
    {
        wp_enqueue_style(
            'estimater-custom_shelving_estimator-styles',
            plugin_dir_url(__FILE__) . 'assets/css/shelving_estimator/custom_studio_shelving_estimator.css',
            [],
            '1.0.0'
        );

        wp_enqueue_script(
            'estimater-custom_shelving_estimator-scripts',
            plugin_dir_url(__FILE__) . 'assets/js/shelving_estimator/custom_studio_shelving_estimator.js',
            ['jquery'],
            '1.0.0',
            true
        );
    }
    
    protected function enqueue_ball_shelving_estimator_assets()
    {
        wp_enqueue_style(
            'estimater-custom_shelving_estimator-styles',
            plugin_dir_url(__FILE__) . 'assets/css/shelving_estimator/custom_ball_shelving_estimator.css',
            [],
            '1.0.0'
        );

        wp_enqueue_script(
            'estimater-custom_shelving_estimator-scripts',
            plugin_dir_url(__FILE__) . 'assets/js/shelving_estimator/custom_ball_shelving_estimator.js',
            ['jquery'],
            '1.0.0',
            true
        );
    }
    
    protected function enqueue_metro_shelving_estimator_assets()
    {
        wp_enqueue_style(
            'estimater-custom_shelving_estimator-styles',
            plugin_dir_url(__FILE__) . 'assets/css/shelving_estimator/custom_metro_shelving_estimator.css',
            [],
            '1.0.0'
        );

        wp_enqueue_script(
            'estimater-custom_shelving_estimator-scripts',
            plugin_dir_url(__FILE__) . 'assets/js/shelving_estimator/custom_metro_shelving_estimator.js',
            ['jquery'],
            '1.0.0',
            true
        );
    }
    
    protected function enqueue_splitcollar_shelving_estimator_assets()
    {
        wp_enqueue_style(
            'estimater-custom_shelving_estimator-styles',
            plugin_dir_url(__FILE__) . 'assets/css/shelving_estimator/custom_splitcollar_shelving_estimator.css',
            [],
            '1.0.0'
        );

        wp_enqueue_script(
            'estimater-custom_shelving_estimator-scripts',
            plugin_dir_url(__FILE__) . 'assets/js/shelving_estimator/custom_splitcollar_shelving_estimator.js',
            ['jquery'],
            '1.0.0',
            true
        );
    }
    
    protected function enqueue_rack_shelving_estimator_assets()
    {
        wp_enqueue_style(
            'estimater-custom_shelving_estimator-styles',
            plugin_dir_url(__FILE__) . 'assets/css/shelving_estimator/custom_rack_shelving_estimator.css',
            [],
            '1.0.0'
        );

        wp_enqueue_script(
            'estimater-custom_shelving_estimator-scripts',
            plugin_dir_url(__FILE__) . 'assets/js/shelving_estimator/custom_rack_shelving_estimator.js',
            ['jquery'],
            '1.0.0',
            true
        );
    }

    protected function enqueue_estimator_closet_system_assets()
    {

        // Required CSS & JS for closet system estimator
            // Bootstrap css
            wp_enqueue_style(
                'estimater-closet-system-bootstrap-styles',
                plugin_dir_url(__FILE__) . 'assets/css/bootstrap-classes-for-estimator.css',
                [],
                '1.0.0'
            );

            // Select2 css
            wp_enqueue_style(
                'estimater-closet-system-select2-styles',
                plugin_dir_url(__FILE__) . 'assets/css/select2.min.css',
                [],
                '1.0.0'
            );

            // select 2 js
            wp_enqueue_script(
                'estimater-closet-system-select2-scripts',
                plugin_dir_url(__FILE__) . 'assets/js/select2.min.js',
                ['jquery'],
                '1.0.0',
                true
            );

            // closet-system estimator css
            wp_enqueue_style(
                'estimater-closet-system_estimator-styles',
                plugin_dir_url(__FILE__) . 'assets/css/closet-system_estimator/custom_closet_system_estimator.css',
                [],
                '1.0.0'
            );

            // closet-system estimator js
            wp_enqueue_script(
                'estimater-closet-system_estimator-scripts',
                plugin_dir_url(__FILE__) . 'assets/js/closet-system_estimator/custom_closet_system_estimator.js',
                ['jquery'],
                '1.0.0',
                true
            );
        // Required CSS & JS for closet system estimator
    }
    
}
