<?php

/**
 * Provide a admin area view for the plugin
 *
 * This file is used to markup the admin-facing aspects of the plugin.
 *
 * @link       http://www.techspawn.com
 * @since      1.0.0
 *
 * @package    Wcmlim
 * @subpackage Wcmlim/admin/partials
 */
?>
<style>
    .wcmlim-expandedpreviewwrapper .location-name,
    .wcmlim-expandedpreviewwrapper .location-viewname {
        display: flex;
        align-items: center;
        font-size: 16px;
        font-weight: bold;
        color: #333;
        margin: 0;
    }
    .wcmlim-simplepreviewwrapper .location-stock-item {
        margin-bottom: 15px;
    }
    #location-stock-table-simple {
        width: 100%;
        border-collapse: collapse;
        margin: 20px 0;
    }
    #location-stock-table-simple th, #location-stock-table-simple td {
        text-align: left;
        border-bottom: 1px solid #ddd;
        border: none;
        padding: 1em 1.41575em;
    }
    table:not( .has-background ) tbody td {
        background-color: #fdfdfd;
    }
    #location-stock-table-simple th {
        background-color: #f2f2f2;
        font-weight: bold;
        text-transform: uppercase;
        font-size: 14px;
    }
    .location-stock-list {
        list-style-type: none;
        padding: 0;
        margin: 20px 0;
    }
    .location-list-item {
        background-color: #f9f9f9;
        padding: 15px;
        margin-bottom: 10px;
        border-radius: 5px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        cursor: pointer;
        transition: background-color 0.3s, border 0.3s;
    }
    #wcmlim-drawer_view_btn {
        font-size: 16px;
        cursor: pointer;
        background-color: #eeeeee;
        border-color: #eeeeee;
        color: #333333;
        border: 0;
        border-radius: 0;
        cursor: pointer;
        padding: .6180469716em 1.41575em;
        text-decoration: none;
        font-weight: 600;
        text-shadow: none;
        display: inline-block;
        -webkit-appearance: none;
    }
    .location-name {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
        color: #333;
    }
    .location-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }
    .Wcmlim_box_content.select_location-wrapper {
        padding: 10px;
    }
    .wcmlim-locationname {
        margin: 0;
    }
    .wcmlim-locationname {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
        color: #333;
    }
    .location-stock {
        font-size: 14px;
        color: #555;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .location-header {
        align-items: center;
        padding-bottom: 10px;
    }
    .wcmlim-twocolpreviewwrapper {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .stock-display {
        font-weight: 500;
        background: #a2998c26;
        display: inline-block;
        padding: 5px 0px 5px 0;
        border-radius: 3px;
        font-size: 12px;
        text-transform: capitalize;
        margin-top: 5px;
    }
    .wclim-views_subinfo {
        padding-left: 5px;
        padding-right: 5px;
        font-weight: 400;
    }
    .Wcmlim_box_header {
        margin-bottom: 20px;
    }
    .wcmlim-threecolpreviewwrapper {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 10px;
    }
    .wcmlim-previewcard {
        padding: 10px;
        margin-bottom: 15px;
        border-radius: 5px;
        background-color: #f9f9f9;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
        cursor: pointer;
        transition: all 0.2s ease;
        border: 1px solid #eee;
    }

    .wcmlim-previewcard:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
    .location-stock-card {
        margin-bottom: 20px;
        width: 100%;
        background-color: #f9f9f9;
        padding: 15px;
        border-radius: 5px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        text-align: left;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        cursor: pointer;
        box-sizing: border-box;
    }
</style>
<style>
                            .wcmlim-drawer_view .Wcmlim_box_header {
                                display: flex;
                                align-items: center;
                                justify-content: space-between;
                                padding-top: 0 !important;
                                padding-right: 20px !important;
                                padding-left: 20px !important;
                                background: #e9e9e97a;
                            }
                            .location-header {
                                align-items: center;
                                padding-bottom: 10px;
                            }

                            .location-details .dashicons {
                                width: 24px;
                                height: 24px;
                                font-size: 18px;
                                display: inline;
                                line-height: unset;
                            }
                            .wclim-views_font_size {
                                font-size: 14px;
                                margin: 0;
                            }

                            .location-stock-item {
                                padding: 10px;
                                margin-bottom: 15px;
                                border-radius: 5px;
                                background-color: #f9f9f9;
                                box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
                                cursor: pointer;
                                transition: all 0.2s ease;
                                border: 1px solid #eee;
                            }

                            .location-stock-item:hover {
                                transform: translateY(-2px);
                                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
                            }

                            .location-stock-item.highlighted {
                                border-left: 4px solid #4CAF50;
                                background-color: #e8f5e9;
                            }

                            .location-details p,
                            ..location-details span {
                                margin: 8px 0;
                                font-size: 14px;
                                line-height: 1.4;
                                color: #6d6d6d;
                            }

                            /* Base container styles */
                            .Wcmlim_container.wcmlim_product.wcmlim-twocol_view {
                                width: 100%;
                                max-width: 100%;
                                margin: 0 0 1.5em 0;
                                box-sizing: border-box;
                            }

                            .Wcmlim_box_content {
                                width: <?php echo get_option('wcmlim_preview_stock_width', '90') . '%'; ?>;
                            }
                            .Wcmlim_box_wrapper {
                                margin-bottom: 30px;
                            }

                            /* Location Group Selector Styles */
                            .wcmlim-location-group-selector {
                                margin-bottom: 20px;
                                padding: 15px;
                                background-color: #f7f7f7;
                                border-radius: 5px;
                                border: 1px solid #e0e0e0;
                            }

                            .wcmlim-location-group-selector label {
                                display: block;
                                margin-bottom: 8px;
                                font-weight: 500;
                            }

                            .wcmlim-location-group-dropdown {
                                width: 100%;
                                padding: 10px;
                                border-radius: 4px;
                                border: 1px solid #ddd;
                                background-color: #fff;
                                font-size: 15px;
                                color: #333;
                                height: auto;
                                min-height: 42px;
                            }

                            /* Message Styles */
                            .location-group-message {
                                font-style: italic;
                                color: #666;
                                padding: 15px;
                                text-align: center;
                                background-color: #f8f8f8;
                                border-radius: 5px;
                                margin: 15px 0;
                                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
                            }

                            .drawer-location-container {
                                padding: 20px;
                            }

                            #wcmlim-drawer_view_btn {
                                font-size: 16px;
                                cursor: pointer;
                            }

                            .extra-details p {
                                margin: 0;
                            }

                            .wcmlim-side_popup {
                                height: 100%;
                                width: 0;
                                position: fixed;
                                top: 0; 
                                right: 0;
                                background-color: #ffffff;
                                overflow-x: hidden;
                                transition: 0.5s ease;
                                padding-top: 30px;
                                z-index: 9999;
                                box-shadow: -2px 0px 10px rgba(0, 0, 0, 0.3);
                            }

                            .wcmlim-popup_content {
                                color: #6d6d6d;
                                font-size: 18px;
                                text-align: left;
                                width: 400px;
                            }

                            /* Close button styles */
                            .wcmlim-close_btn {
                                font-size: 36px;
                                color: #000000;
                                border: none;
                                background: none;
                                cursor: pointer;
                                padding: 0;
                            }

                            .wcmlim-close_btn:hover {
                                background-color: #fff;
                                border-color: #fff;
                                color: #333333;
                            }
</style>

<?php $location_view = get_option("wcmlim_backend_display_stock_view", true); ?>
<div class="wrap">
    <?php
    if (get_option('wcmlim_license') == '' || get_option('wcmlim_license') == 'invalid') {
    ?>
        <script>
            window.location.href = "?page=multi-location-inventory-management";
        </script>
    <?php
    }
    ?>
    <h1><?php esc_html_e('MULTILOCA - WooCommerce Multi Locations Inventory Management', 'wcmlim'); ?></h1>
    <?php settings_errors(); ?>
    <ul class="nav nav-tabs">
        <li class="wcmlim-admin-menu-tab-li active"><a href="#tab-1"><?php esc_html_e('Display Settings', 'wcmlim'); ?></a></li>
    </ul>
    <div class="tab-content">
        <div id="tab-1" class="tab-pane active">
            <div class="wcmlim_flex_container">
                <div class="wcmlim_flex_box">
                    <form action="options.php" method="post">
                        <div style="height: 690px;overflow-y: scroll;">
                        <?php
                        settings_fields('wcmlim_display_settings');
                        do_settings_sections('wcmlim_display_settings');
                        ?>
                        </div>
                        <?php
                        submit_button();
                        ?>
                    </form>
                </div>
                <!-- Design Preview @since 1.1.5 -->
                <div class="wcmlim_flex_box">
                    <h2 style="margin-left:20px"><?php _e('Design Preview', 'wcmlim'); ?></h2>
                    <?php
                    /**
                     * Group related settings for better organization
                     */
                    // General appearance settings
                    $appearance_settings = [
                        'stockbox_color' => get_option("wcmlim_preview_stock_bgcolor", true),
                        'color_separator' => get_option("wcmlim_separator_linecolor", true),
                        'display_separator' => get_option("wcmlim_display_separator_line", true),
                    ];

                    // Text and information display settings
                    $text_display_settings = [
                        'txt_stock_inf' => get_option("wcmlim_location_display_heading_setting", true),
                        'txtcolor_stock_inf' => get_option("wcmlim_txtcolor_stock_info", true),
                        'display_stock_inf' => get_option("wcmlim_display_stock_info", true),
                        'txt_preferred' => get_option("wcmlim_location_display_heading_setting", true),
                        'txtcolor_preferred' => get_option("wcmlim_txtcolor_preferred_loc", true),
                        'display_preferred' => get_option("wcmlim_display_preferred_loc", true),
                        'txt_nearest' => get_option("wcmlim_txt_nearest_stock_loc", true),
                        'txtcolor_nearest' => get_option("wcmlim_txtcolor_nearest_stock", true),
                        'display_nearest' => get_option("wcmlim_display_nearest_stock", true),
                    ];


                    // Button appearance settings
                    $button_settings = [
                        'oncheck_btntxt' => get_option("wcmlim_oncheck_button_text", true),
                        'oncheck_btnbgcolor' => get_option("wcmlim_oncheck_button_color", true),
                        'oncheck_btntxtcolor' => get_option("wcmlim_oncheck_button_text_color", true),
                        'oncheck_radius' => get_option("wcmlim_oncheck_borderradius", true),
                        
                        'soldout_btntxt' => get_option("wcmlim_soldout_button_text", true),
                        'soldout_btnbgcolor' => get_option("wcmlim_soldout_button_color", true),
                        'soldout_btntxtcolor' => get_option("wcmlim_soldout_button_text_color", true),
                        'soldout_radius' => get_option("wcmlim_soldout_borderradius", true),
                        
                        'instock_btntxt' => get_option("wcmlim_instock_button_text", true),
                        'instock_btnbgcolor' => get_option("wcmlim_instock_button_color", true),
                        'instock_btntxtcolor' => get_option("wcmlim_instock_button_text_color", true),
                        'instock_radius' => get_option("wcmlim_instock_borderradius", true),
                    ];

                    // Border radius settings for various elements
                    $border_radius_settings = [
                        'refborder_radius' => get_option("wcmlim_refbox_borderradius", true),
                        'input_radius' => get_option("wcmlim_input_borderradius", true),
                    ];
                    ?>
                    <style>
                        /* Layout styles */
                        .wcmlim_flex_container { 
                            display: flex;
                            flex-wrap: wrap;
                        }
                        .wcmlim_flex_box {
                            flex: 50%;
                        }
                        
                        /* Container styles */
                        .Wcmlim_container {
                            background-color: <?php echo $appearance_settings['stockbox_color']; ?>;
                                /* border settings removed */
                        }
                        
                        /* Text color styles */
                        .Wcmlim_box_title {
                            color: <?php echo $text_display_settings['txtcolor_stock_inf']; ?>;
                        }
                        .loc_dd {
                            color: <?php echo $text_display_settings['txtcolor_preferred']; ?>;
                        }
                        .postcode-checker-title {
                            color: <?php echo $text_display_settings['txtcolor_nearest']; ?>;
                        }
                        
                        /* Form elements styles */
                        .loc_dd.Wcmlim_prefloc_sel {
                            border-radius: <?php echo $border_radius_settings['refborder_radius']; ?>;
                        }
                        .postcode-checker-div input[type="text"] {
                            border-radius: <?php echo $border_radius_settings['input_radius']; ?>;
                        }
                        
                        /* Button styles */
                        #submit_postcode_product {
                            border-radius: <?php echo $button_settings['oncheck_radius']; ?>;
                            color: <?php echo $button_settings['oncheck_btntxtcolor']; ?>;
                            background-color: <?php echo $button_settings['oncheck_btnbgcolor']; ?>;
                        }
                        .Wcmlim_have_stock {
                            border-radius: <?php echo $button_settings['instock_radius']; ?>;
                            color: <?php echo $button_settings['instock_btntxtcolor']; ?>;
                            background-color: <?php echo $button_settings['instock_btnbgcolor']; ?>;
                        }
                        .Wcmlim_over_stock {
                            border-radius: <?php echo $button_settings['soldout_radius']; ?>;
                            color: <?php echo $button_settings['soldout_btntxtcolor']; ?>;
                            background-color: <?php echo $button_settings['soldout_btnbgcolor']; ?>;
                        }
                        
                        /* Separator */
                        .Wcmlim_line_seperator {
                            background-color: <?php echo $appearance_settings['color_separator']; ?>;
                        }
                        <?php if ($appearance_settings['display_separator'] == "on") : ?>
                        .Wcmlim_line_seperator {
                            border: none;
                        }
                        <?php endif; ?>
                        
                        /* Display toggles */
                        <?php if ($text_display_settings['display_stock_inf'] == "on") : ?>
                        .Wcmlim_box_header {
                            display: none;
                        }
                        <?php endif; ?>
                        
                        <?php if ($text_display_settings['display_preferred'] == "on") : ?>
                        .Wcmlim_sloc_label {
                            display: none;
                        }
                        <?php endif; ?>
                        
                        <?php if ($text_display_settings['display_nearest'] == "on") : ?>
                        .postcode-checker-title {
                            display: none;
                        }
                        <?php endif; ?>
                    </style>
                    <style>
                            .wcmlim-popup_view .Wcmlim_box_header {
                                display: flex;
                                align-items: center;
                                justify-content: space-between;
                                padding-top: 0 !important;
                                padding-right: 20px !important;
                                padding-left: 20px !important;
                                background: #e9e9e97a;
                            }
                            .location-header {
                                align-items: center;
                                padding-bottom: 10px;
                            }

                            .location-details .dashicons {
                                width: 24px;
                                height: 24px;
                                font-size: 18px;
                                display: inline;
                                line-height: unset;
                            }
                            
                            .wclim-views_font_size {
                                font-size: 14px;
                            }

                            #popup-location-container {
                                padding: 20px;
                            }

                            .location-details p,
                            ..location-details span {
                                margin: 8px 0;
                                font-size: 14px;
                                line-height: 1.4;
                                color: #6d6d6d;
                            }

                            /* Base container styles */
                            .Wcmlim_container.wcmlim_product.wcmlim-twocol_view {
                                width: 100%;
                                max-width: 100%;
                                margin: 0 0 1.5em 0;
                                box-sizing: border-box;
                            }
                            .Wcmlim_box_wrapper {
                                margin-bottom: 30px;
                            }

                            /* Location Group Selector Styles */
                            .wcmlim-location-group-selector {
                                margin-bottom: 20px;
                                padding: 15px;
                                background-color: #f7f7f7;
                                border-radius: 5px;
                                border: 1px solid #e0e0e0;
                            }

                            .wcmlim-location-group-selector label {
                                display: block;
                                margin-bottom: 8px;
                                font-weight: 500;
                            }

                            .wcmlim-location-group-dropdown {
                                width: 100%;
                                padding: 10px;
                                border-radius: 4px;
                                border: 1px solid #ddd;
                                background-color: #fff;
                                font-size: 15px;
                                color: #333;
                                height: auto;
                                min-height: 42px;
                            }

                            /* Message Styles */
                            .location-group-message {
                                font-style: italic;
                                color: #666;
                                padding: 15px;
                                text-align: center;
                                background-color: #f8f8f8;
                                border-radius: 5px;
                                margin: 15px 0;
                                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
                            }

                            #wcmlim-popup_view_btn {
                                font-size: 16px;
                                cursor: pointer;
                                background-color: #d5d5d5;
                                border-color: #d5d5d5;
                                color: #333333;
                                padding: .6180469716em 1.41575em;
                                text-decoration: none;
                                font-weight: 600;
                                text-shadow: none;
                                display: inline-block;
                                -webkit-appearance: none;
                                border: 0;
                                border-radius: 0;
                            }

                            .extra-details p {
                                margin: 0;
                            }

                            .wcmlim-modal_popup {
                                display: none; 
                                position: fixed;
                                top: 0;
                                left: 0;
                                width: 100%;
                                height: 100%;
                                background-color: rgba(0, 0, 0, 0.5); 
                                z-index: 999999;
                                justify-content: center;
                                align-items: center;
                            }

                            .wcmlim-modal_content {
                                background-color: white;
                                width: 80%; 
                                max-width: 600px;
                                max-height: 90%;
                                overflow-y: auto; 
                                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
                            }

                            .wcmlim-close_btn {
                                font-size: 36px;
                                color: #000;
                                border: none;
                                background: none;
                                padding: 0;
                                cursor: pointer;
                            }


                            .wcmlim-close_btn:hover {
                                background-color: #fff;
                                border-color: #fff;
                                color: #333333;
                            }
                        </style>
                        <?php
                        $stock_bg = get_option('wcmlim_instock_button_color');
                        $stock_bgcolor = get_option('wcmlim_instock_button_text_color');
                        $stock_radius = get_option('wcmlim_instock_borderradius');
                        ?>
                    <div id="wcmlim-previewcontainer">
                        <div class="Wcmlim_container wcmlim_product" id="wcmlim-viewsolder" style="width: 80%;box-sizing: border-box;position: -webkit-sticky; position: sticky;  top: 0;margin-left:20px; display: <?php echo $location_view == "drawer_view" || $location_view == "popup_view" ? 'none' : 'block'; ?>;">
                            <div class="Wcmlim_box_wrapper">
                                <div class="Wcmlim_box_content select_location-wrapper">
                                    <div class="Wcmlim_prefloc_box">
                                        <div class="Wcmlim_box_header">
                                            <h4 class="Wcmlim_box_title" style="font-size: 18px;"><?php echo $text_display_settings['txt_stock_inf']; ?></h4>
                                        </div>
                                        
                                        <div class="wcmlim-twocolpreviewwrapper" style="display: <?php echo $location_view == "twocol_view" ? 'grid' : 'none'; ?>;">
                                            <div class="wcmlim-previewcard">
                                                <div class="location-header">
                                                    <h3 class="wcmlim-locationname">New York</h3>
                                                    <span class="stock-display" style="background-color: <?php echo $stock_bg; ?>; color: <?php echo $stock_bgcolor; ?>; border-radius: <?php echo $stock_radius; ?>;">
                                                        <span class="wclim-views_subinfo"> <span class="wcmlim-stock_no"> 758</span> <span class="wcmlim-stock_status">In Stock </span></span>
                                                    </span>
                                                </div>
                                                <div class="location-details">
                                                    <div class="location-detail-item location_address_fields">
                                                        <i class="dashicons dashicons-admin-home" style="vertical-align: sub;"></i> 
                                                        <span><span class="location_street"> 242</span><span class="location_route"> Broadway</span><span class="location_locality"> New York,</span> <span class="location_postcode">10001</span> <span class='location_country'>United States</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_contact_fields">
                                                        <i class="dashicons dashicons-email" style="vertical-align: sub;"></i> <span><span class="location_email"> contact@nylocation.com</span>  <span class="location_phone">2125551234</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_time_fields">
                                                        <i class="dashicons dashicons-clock" style="vertical-align: sub;"></i> <span><span class='location_start_time'>10:00</span>  <span class='location_end_time'>02:00</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_distance_fields">
                                                        <i class="dashicons dashicons-location" style="vertical-align: sub;"></i> 
                                                        <span class="location_distance"> 5 Kms Away</span>
                                                    </div> 
                                                    <div class="location-detail-item location_note_fields">
                                                        <i class="dashicons dashicons-welcome-write-blog" style="vertical-align: sub;"></i> 
                                                        <span class="location_note"> Open weekdays only.</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="wcmlim-previewcard">
                                                <div class="location-header">
                                                    <h3 class="wcmlim-locationname">Los Angeles</h3>
                                                    <span class="stock-display sold-out-display" style="background-color: <?php echo get_option('wcmlim_soldout_button_color', '#dc3545'); ?>; color: <?php echo get_option('wcmlim_soldout_button_text_color', '#ffffff'); ?>; border-radius: <?php echo get_option('wcmlim_soldout_borderradius', '0px'); ?>;">
                                                        <span class="wclim-views_subinfo"> <span class="wcmlim-stock_status sold-out-status"><?php echo get_option('wcmlim_soldout_button_text', 'Sold Out'); ?></span></span>
                                                    </span>
                                                </div>
                                                <div class="location-details">
                                                    <div class="location-detail-item location_address_fields">
                                                        <i class="dashicons dashicons-admin-home" style="vertical-align: sub;"></i> 
                                                        <span><span class='location_street'>323</span><span class="location_route"> Sunset Boulevard</span><span class="location_locality"> Los Angeles,</span> <span class="location_postcode">90028</span> <span class='location_country'>United States</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_contact_fields">
                                                        <i class="dashicons dashicons-email" style="vertical-align: sub;"></i> <span><span class="location_email">info@lastore.com</span>  <span class="location_phone">3235559876</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_time_fields">
                                                        <i class="dashicons dashicons-clock" style="vertical-align: sub;"></i> <span><span class='location_start_time'>08:00</span>  <span class='location_end_time'>20:00</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_distance_fields">
                                                        <i class="dashicons dashicons-location" style="vertical-align: sub;"></i> 
                                                        <span class='location_distance'>8.5 Kms Away</span>
                                                    </div> 
                                                     <div class="location-detail-item location_note_fields">
                                                        <i class="dashicons dashicons-welcome-write-blog" style="vertical-align: sub;"></i> 
                                                        <span class='location_note'>Located in Hollywood district.</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="wcmlim-previewcard">
                                                <div class="location-header">
                                                    <h3 class="wcmlim-locationname">Chicago</h3>
                                                    <span class="stock-display backorder-display" style="background-color: <?php echo get_option('wcmlim_onbackorder_button_color', '#ffc107'); ?>; color: <?php echo get_option('wcmlim_instock_button_text_color', '#ffffff'); ?>; border-radius: <?php echo get_option('wcmlim_onbackorder_borderradius', '0px'); ?>;">
                                                        <span class="wclim-views_subinfo"><span class="wcmlim-stock_status backorder-status"><?php echo get_option('wcmlim_onbackorder_button_text', 'Available on backorder'); ?></span></span>
                                                    </span>
                                                </div> 
                                                <div class="location-details">
                                                    <div class="location-detail-item location_address_fields">
                                                        <i class="dashicons dashicons-admin-home" style="vertical-align: sub;"></i> 
                                                        <span><span class='location_street'>456</span><span class="location_route"> North Michigan Avenue</span><span class="location_locality"> Chicago,</span> <span class="location_postcode">60611</span> <span class='location_country'>United States</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_contact_fields">
                                                        <i class="dashicons dashicons-email" style="vertical-align: sub;"></i> <span><span class="location_email">support@chicagostore.com</span>  <span class="location_phone">3125554567</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_time_fields">
                                                        <i class="dashicons dashicons-clock" style="vertical-align: sub;"></i> <span><span class='location_start_time'>09:30</span>  <span class='location_end_time'>18:30</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_distance_fields">
                                                        <i class="dashicons dashicons-location" style="vertical-align: sub;"></i> 
                                                        <span class='location_distance'>12 Kms Away</span>
                                                    </div> 
                                                     <div class="location-detail-item location_note_fields">
                                                        <i class="dashicons dashicons-welcome-write-blog" style="vertical-align: sub;"></i> 
                                                        <span class='location_note'>Near Millennium Park.</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="wcmlim-previewcard">
                                                <div class="location-header">
                                                    <h3 class="wcmlim-locationname">Miami</h3>
                                                    <span class="stock-display backorder-display" style="background-color: <?php echo get_option('wcmlim_onbackorder_button_color', '#ffc107'); ?>; color: <?php echo get_option('wcmlim_onbackorder_button_text_color', '#212529'); ?>; border-radius: <?php echo get_option('wcmlim_onbackorder_borderradius', '0px'); ?>;">
                                                        <span class="wclim-views_subinfo"> <span class="wcmlim-stock_status backorder-status"><?php echo get_option('wcmlim_onbackorder_button_text', 'Available on backorder'); ?></span></span>
                                                    </span>
                                                </div>
                                                <div class="location-details">
                                                    <div class="location-detail-item location_address_fields">
                                                        <i class="dashicons dashicons-admin-home" style="vertical-align: sub;"></i> 
                                                        <span><span class='location_street'>789</span><span class="location_route"> Ocean Drive</span><span class="location_locality"> Miami Beach,</span> <span class="location_postcode">33139</span> <span class='location_country'>United States</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_contact_fields">
                                                        <i class="dashicons dashicons-email" style="vertical-align: sub;"></i> <span><span class="location_email">hello@miamistore.com</span>  <span class="location_phone">3055558901</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_time_fields">
                                                        <i class="dashicons dashicons-clock" style="vertical-align: sub;"></i> <span><span class='location_start_time'>07:00</span>  <span class='location_end_time'>22:00</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_distance_fields">
                                                        <i class="dashicons dashicons-location" style="vertical-align: sub;"></i> 
                                                        <span class='location_distance'>15 Kms Away</span>
                                                    </div> 
                                                     <div class="location-detail-item location_note_fields">
                                                        <i class="dashicons dashicons-welcome-write-blog" style="vertical-align: sub;"></i> 
                                                        <span class='location_note'>Beachfront location.</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="wcmlim-threecolpreviewwrapper" style="display: <?php echo $location_view == "threecol_view" ? 'grid' : 'none'; ?>;">
                                            <div class="wcmlim-previewcard">
                                                <div class="location-header">
                                                    <h3 class="wcmlim-locationname">New York</h3>
                                                    <span class="stock-display" style="background-color: <?php echo $stock_bg; ?>; color: <?php echo $stock_bgcolor; ?>; border-radius: <?php echo $stock_radius; ?>;">
                                                        <span class="wclim-views_subinfo"> <span class="wcmlim-stock_no">98</span> <span class="wcmlim-stock_status">In Stock </span></span>
                                                    </span>
                                                </div> 
                                                <div class="location-details">
                                                    <div class="location-detail-item location_address_fields">
                                                        <i class="dashicons dashicons-admin-home" style="vertical-align: sub;"></i> 
                                                        <span><span class='location_street'>123</span><span class="location_route"> Broadway</span><span class="location_locality"> New York,</span> <span class="location_postcode">10001</span> <span class='location_country'>United States</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_contact_fields">
                                                        <i class="dashicons dashicons-email" style="vertical-align: sub;"></i> <span><span class="location_email">contact@nylocation.com</span>  <span class="location_phone">2125551234</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_time_fields">
                                                        <i class="dashicons dashicons-clock" style="vertical-align: sub;"></i> <span><span class='location_start_time'>09:00</span>  <span class='location_end_time'>17:00</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_distance_fields">
                                                        <i class="dashicons dashicons-location" style="vertical-align: sub;"></i> 
                                                        <span class='location_distance'>2 Kms Away</span>
                                                    </div> 
                                                     <div class="location-detail-item location_note_fields">
                                                        <i class="dashicons dashicons-welcome-write-blog" style="vertical-align: sub;"></i> 
                                                        <span class='location_note'>Open weekdays only.</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="wcmlim-previewcard">
                                                <div class="location-header">
                                                    <h3 class="wcmlim-locationname">Los Angeles</h3>
                                                    <span class="stock-display sold-out-display" style="background-color: <?php echo get_option('wcmlim_soldout_button_color', '#dc3545'); ?>; color: <?php echo get_option('wcmlim_soldout_button_text_color', '#ffffff'); ?>; border-radius: <?php echo get_option('wcmlim_soldout_borderradius', '0px'); ?>;">
                                                        <span class="wclim-views_subinfo"> <span class="wcmlim-stock_status sold-out-status"><?php echo get_option('wcmlim_soldout_button_text', 'Sold Out'); ?></span></span>
                                                    </span>
                                                </div>
                                                <div class="location-details">
                                                    <div class="location-detail-item location_address_fields">
                                                        <i class="dashicons dashicons-admin-home" style="vertical-align: sub;"></i> 
                                                        <span><span class='location_street'>316</span><span class="location_route"> Sunset Boulevard</span><span class="location_locality"> Los Angeles,</span> <span class="location_postcode">90028</span> <span class='location_country'>United States</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_contact_fields">
                                                        <i class="dashicons dashicons-email" style="vertical-align: sub;"></i> <span><span class="location_email">info@lastore.com</span>  <span class="location_phone">3235559876</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_time_fields">
                                                        <i class="dashicons dashicons-clock" style="vertical-align: sub;"></i> <span><span class='location_start_time'>08:00</span>  <span class='location_end_time'>20:00</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_distance_fields">
                                                        <i class="dashicons dashicons-location" style="vertical-align: sub;"></i> 
                                                        <span class='location_distance'>8.5 Kms Away</span>
                                                    </div> 
                                                     <div class="location-detail-item location_note_fields">
                                                        <i class="dashicons dashicons-welcome-write-blog" style="vertical-align: sub;"></i> 
                                                        <span class='location_note'>Located in Hollywood district.</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="wcmlim-previewcard">
                                                <div class="location-header">
                                                    <h3 class="wcmlim-locationname">Chicago</h3>
                                                    <span class="stock-display backorder-display" style="background-color: <?php echo get_option('wcmlim_onbackorder_button_color', '#ffc107'); ?>; color: <?php echo get_option('wcmlim_onbackorder_button_text_color', '#212529'); ?>; border-radius: <?php echo get_option('wcmlim_onbackorder_borderradius', '0px'); ?>;">
                                                        <span class="wclim-views_subinfo"> <span class="wcmlim-stock_status backorder-status"><?php echo get_option('wcmlim_onbackorder_button_text', 'Available on backorder'); ?></span></span>
                                                    </span>
                                                </div> 
                                                <div class="location-details">
                                                    <div class="location-detail-item location_address_fields">
                                                        <i class="dashicons dashicons-admin-home" style="vertical-align: sub;"></i> 
                                                        <span><span class='location_street'>456</span><span class="location_route"> North Michigan Avenue</span><span class="location_locality"> Chicago,</span> <span class="location_postcode">60611</span> <span class='location_country'>United States</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_contact_fields">
                                                        <i class="dashicons dashicons-email" style="vertical-align: sub;"></i> <span><span class="location_email">support@chicagostore.com</span>  <span class="location_phone">3125554567</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_time_fields">
                                                        <i class="dashicons dashicons-clock" style="vertical-align: sub;"></i> <span><span class='location_start_time'>09:30</span>  <span class='location_end_time'>18:30</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_distance_fields">
                                                        <i class="dashicons dashicons-location" style="vertical-align: sub;"></i> 
                                                        <span class='location_distance'>12 Kms Away</span>
                                                    </div>
                                                     <div class="location-detail-item location_note_fields">
                                                        <i class="dashicons dashicons-welcome-write-blog" style="vertical-align: sub;"></i> 
                                                        <span class='location_note'>Near Millennium Park.</span>
                                                    </div> 
                                                </div>
                                            </div>
                                            <div class="wcmlim-previewcard">
                                                <div class="location-header">
                                                    <h3 class="wcmlim-locationname">Miami</h3>
                                                    <span class="stock-display backorder-display" style="background-color: <?php echo get_option('wcmlim_onbackorder_button_color', '#ffc107'); ?>; color: <?php echo get_option('wcmlim_onbackorder_button_text_color', '#212529'); ?>; border-radius: <?php echo get_option('wcmlim_onbackorder_borderradius', '0px'); ?>;">
                                                        <span class="wclim-views_subinfo"> <span class="wcmlim-stock_status backorder-status"><?php echo get_option('wcmlim_onbackorder_button_text', 'Available on backorder'); ?></span></span>
                                                    </span>
                                                </div>
                                                <div class="location-details">
                                                    <div class="location-detail-item location_address_fields">
                                                        <i class="dashicons dashicons-admin-home" style="vertical-align: sub;"></i> 
                                                        <span><span class='location_street'>789</span><span class="location_route"> Ocean Drive</span><span class="location_locality"> Miami Beach,</span> <span class="location_postcode">33139</span> <span class='location_country'>United States</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_contact_fields">
                                                        <i class="dashicons dashicons-email" style="vertical-align: sub;"></i> <span><span class="location_email">hello@miamistore.com</span>  <span class="location_phone">3055558901</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_time_fields">
                                                        <i class="dashicons dashicons-clock" style="vertical-align: sub;"></i> <span><span class='location_start_time'>07:00</span>  <span class='location_end_time'>22:00</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_distance_fields">
                                                        <i class="dashicons dashicons-location" style="vertical-align: sub;"></i> 
                                                        <span class='location_distance'>15 Kms Away</span>
                                                    </div> 
                                                     <div class="location-detail-item location_note_fields">
                                                        <i class="dashicons dashicons-welcome-write-blog" style="vertical-align: sub;"></i> 
                                                        <span class='location_note'>Beachfront location.</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="wcmlim-listpreviewwrapper" style="display: <?php echo $location_view == "list_view" ? 'block' : 'none'; ?>;">
                                            <div class="wcmlim_radio_option location-stock-item" data-location-id="17" data-location-key="0" style="border: 1px solid #ddd; padding: 10px; margin: 5px 0; cursor: pointer; display: flex; flex-direction: column; align-items: flex-start;">
                                                
                                                <div style="display: flex; align-items: center; width: 100%;">
                                                    <input type="radio" name="select_location" style="margin-right: 10px;">
                                                                
                                                    <label for="select_location_0" style="width: 100%; display: flex; justify-content: space-between;">
                                                        <span><strong>New York</strong></span>
                                                        <span class="stock-display" style="background-color: <?php echo $stock_bg; ?>; color: <?php echo $stock_bgcolor; ?>; border-radius: <?php echo $stock_radius; ?>;">
                                                            <span class="wclim-views_subinfo"> <span class="wcmlim-stock_no">98</span> <span class="wcmlim-stock_status">In Stock </span></span>
                                                            </span>
                                                    </label>
                                                </div>
                                                
                                                <div class="location-details">
                                                    <div class="location-detail-item location_address_fields">
                                                        <i class="dashicons dashicons-admin-home" style="vertical-align: sub;"></i> 
                                                        <span><span class='location_street'>123</span><span class="location_route"> Broadway</span><span class="location_locality"> New York,</span> <span class="location_postcode">10001</span> <span class='location_country'>United States</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_contact_fields">
                                                        <i class="dashicons dashicons-email" style="vertical-align: sub;"></i> <span><span class="location_email">contact@nylocation.com</span>  <span class="location_phone">2125551234</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_time_fields">
                                                        <i class="dashicons dashicons-clock" style="vertical-align: sub;"></i> <span><span class='location_start_time'>09:00</span>  <span class='location_end_time'>17:00</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_distance_fields">
                                                        <i class="dashicons dashicons-location" style="vertical-align: sub;"></i> 
                                                        <span class='location_distance'>2 Kms Away</span>
                                                    </div> 
                                                     <div class="location-detail-item location_note_fields">
                                                        <i class="dashicons dashicons-welcome-write-blog" style="vertical-align: sub;"></i> 
                                                        <span class='location_note'>Open weekdays only.</span>
                                                    </div>
                                                </div>                    
                                            </div>
                                            <div class="wcmlim_radio_option location-stock-item" data-location-id="17" data-location-key="0" style="border: 1px solid #ddd; padding: 10px; margin: 5px 0; cursor: pointer; display: flex; flex-direction: column; align-items: flex-start;">
                                                
                                                <div style="display: flex; align-items: center; width: 100%;">
                                                    <input type="radio" name="select_location" id="" style="margin-right: 10px;">
                                                                
                                                    <label for="select_location_0" style="width: 100%; display: flex; justify-content: space-between;">
                                                        <span><strong>Los Angeles</strong></span>
                                                        <span class="stock-display sold-out-display" style="background-color: <?php echo get_option('wcmlim_soldout_button_color', '#dc3545'); ?>; color: <?php echo get_option('wcmlim_soldout_button_text_color', '#ffffff'); ?>; border-radius: <?php echo get_option('wcmlim_soldout_borderradius', '0px'); ?>;">
                                                            <span class="wclim-views_subinfo"> <span class="wcmlim-stock_status sold-out-status"><?php echo get_option('wcmlim_soldout_button_text', 'Sold Out'); ?></span></span>
                                                            </span>
                                                    </label>
                                                </div>
                                                
                                                <div class="location-details">
                                                    <div class="location-detail-item location_address_fields">
                                                        <i class="dashicons dashicons-admin-home" style="vertical-align: sub;"></i> 
                                                        <span><span class='location_street'>316</span><span class="location_route"> Sunset Boulevard</span><span class="location_locality"> Los Angeles,</span> <span class="location_postcode">90028</span> <span class='location_country'>United States</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_contact_fields">
                                                        <i class="dashicons dashicons-email" style="vertical-align: sub;"></i> <span><span class="location_email">info@lastore.com</span>  <span class="location_phone">3235559876</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_time_fields">
                                                        <i class="dashicons dashicons-clock" style="vertical-align: sub;"></i> <span><span class='location_start_time'>08:00</span>  <span class='location_end_time'>20:00</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_distance_fields">
                                                        <i class="dashicons dashicons-location" style="vertical-align: sub;"></i> 
                                                        <span class='location_distance'>8.5 Kms Away</span>
                                                    </div> 
                                                     <div class="location-detail-item location_note_fields">
                                                        <i class="dashicons dashicons-welcome-write-blog" style="vertical-align: sub;"></i> 
                                                        <span class='location_note'>Located in Hollywood district.</span>
                                                    </div>
                                                </div>                    
                                            </div>
                                            <div class="wcmlim_radio_option location-stock-item" data-location-id="17" data-location-key="0" style="border: 1px solid #ddd; padding: 10px; margin: 5px 0; cursor: pointer; display: flex; flex-direction: column; align-items: flex-start;">
                                                
                                                <div style="display: flex; align-items: center; width: 100%;">
                                                    <input type="radio" name="select_location" style="margin-right: 10px;">
                                                                
                                                    <label for="select_location_0" style="width: 100%; display: flex; justify-content: space-between;">
                                                        <span><strong>Chicago</strong></span>
                                                        <span class="stock-display" style="background-color: <?php echo $stock_bg; ?>; color: <?php echo $stock_bgcolor; ?>; border-radius: <?php echo $stock_radius; ?>;">
                                                                <span class="wclim-views_subinfo"> <span class="wcmlim-stock_no">15</span> <span class="wcmlim-stock_status">In Stock </span></span>
                                                            </span>
                                                    </label>
                                                </div>
                                                
                                                <div class="location-details">
                                                    <div class="location-detail-item location_address_fields">
                                                        <i class="dashicons dashicons-admin-home" style="vertical-align: sub;"></i> 
                                                        <span><span class='location_street'>456</span><span class="location_route"> North Michigan Avenue</span><span class="location_locality"> Chicago,</span> <span class="location_postcode">60611</span> <span class='location_country'>United States</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_contact_fields">
                                                        <i class="dashicons dashicons-email" style="vertical-align: sub;"></i> <span><span class="location_email">support@chicagostore.com</span>  <span class="location_phone">3125554567</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_time_fields">
                                                        <i class="dashicons dashicons-clock" style="vertical-align: sub;"></i> <span><span class='location_start_time'>09:30</span>  <span class='location_end_time'>18:30</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_distance_fields">
                                                        <i class="dashicons dashicons-location" style="vertical-align: sub;"></i> 
                                                        <span class='location_distance'>12 Kms Away</span>
                                                    </div> 
                                                     <div class="location-detail-item location_note_fields">
                                                        <i class="dashicons dashicons-welcome-write-blog" style="vertical-align: sub;"></i> 
                                                        <span class='location_note'>Near Millennium Park.</span>
                                                    </div>
                                                </div>                       
                                            </div>
                                            <div class="wcmlim_radio_option location-stock-item" data-location-id="17" data-location-key="0" style="border: 1px solid #ddd; padding: 10px; margin: 5px 0; cursor: pointer; display: flex; flex-direction: column; align-items: flex-start;">
                                                
                                                <div style="display: flex; align-items: center; width: 100%;">
                                                    <input type="radio" name="select_location" style="margin-right: 10px;">
                                                                
                                                    <label for="select_location_0" style="width: 100%; display: flex; justify-content: space-between;">
                                                        <span><strong>Miami</strong></span>
                                                        <span class="stock-display backorder-display" style="background-color: <?php echo get_option('wcmlim_onbackorder_button_color', '#ffc107'); ?>; color: <?php echo get_option('wcmlim_onbackorder_button_text_color', '#212529'); ?>; border-radius: <?php echo get_option('wcmlim_onbackorder_borderradius', '0px'); ?>;">
                                                                <span class="wclim-views_subinfo"> <span class="wcmlim-stock_status backorder-status"><?php echo get_option('wcmlim_onbackorder_button_text', 'Available on backorder'); ?></span></span>
                                                            </span>
                                                    </label>
                                                </div>
                                                
                                                <div class="location-details">
                                                    <div class="location-detail-item location_address_fields">
                                                        <i class="dashicons dashicons-admin-home" style="vertical-align: sub;"></i> 
                                                        <span><span class='location_street'>789</span><span class="location_route"> Ocean Drive</span><span class="location_locality"> Miami Beach,</span> <span class="location_postcode">33139</span> <span class='location_country'>United States</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_contact_fields">
                                                        <i class="dashicons dashicons-email" style="vertical-align: sub;"></i> <span><span class="location_email">hello@miamistore.com</span>  <span class="location_phone">3055558901</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_time_fields">
                                                        <i class="dashicons dashicons-clock" style="vertical-align: sub;"></i> <span><span class='location_start_time'>07:00</span>  <span class='location_end_time'>22:00</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_distance_fields">
                                                        <i class="dashicons dashicons-location" style="vertical-align: sub;"></i> 
                                                        <span class='location_distance'>15 Kms Away</span>
                                                    </div> 
                                                     <div class="location-detail-item location_note_fields">
                                                        <i class="dashicons dashicons-welcome-write-blog" style="vertical-align: sub;"></i> 
                                                        <span class='location_note'>Beachfront location.</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="wcmlim-cardpreviewwrapper" style="display: <?php echo $location_view == 'card_view' ? 'block' : 'none'; ?>;">
                                            <!-- New York Location (In Stock) -->
                                            <div class="location-stock-card location-stock-item" data-location-id="18" data-location-key="2" style="">
                                                <div class="location-icon-name">
                                                    <div class="location-stock">
                                                        <div>
                                                            <i class="dashicons dashicons-location"></i>
                                                            <span class="location-name">New York</span>
                                                        </div>
                                                        <span class="stock-display" style="background-color: <?php echo $stock_bg; ?>; color: <?php echo $stock_bgcolor; ?>; border-radius: <?php echo $stock_radius; ?>;">
                                                            <span class="wclim-views_subinfo"> <span class="wcmlim-stock_no">150</span> <span class="wcmlim-stock_status">In Stock</span></span>
                                                        </span>
                                                    </div>
                                                </div>
                                                <div class="location-details">
                                                    <div class="location-detail-item location_address_fields">
                                                        <i class="dashicons dashicons-admin-home" style="vertical-align: sub;"></i> 
                                                        <span><span class='location_street'>123</span><span class="location_route"> Broadway</span><span class="location_locality"> New York,</span> <span class="location_postcode">10001</span> <span class='location_country'>United States</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_contact_fields">
                                                        <i class="dashicons dashicons-email" style="vertical-align: sub;"></i> <span><span class="location_email">contact@nylocation.com</span> <span class="location_phone">2125551234</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_time_fields">
                                                        <i class="dashicons dashicons-clock" style="vertical-align: sub;"></i> <span><span class='location_start_time'>09:00</span> <span class='location_end_time'>17:00</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_distance_fields">
                                                        <i class="dashicons dashicons-location" style="vertical-align: sub;"></i> 
                                                        <span class='location_distance'>2 Kms Away</span>
                                                    </div>
                                                    <div class="location-detail-item location_note_fields">
                                                        <i class="dashicons dashicons-welcome-write-blog" style="vertical-align: sub;"></i> 
                                                        <span class='location_note'>Open weekdays only.</span>
                                                    </div>
                                                </div>
                                            </div>
                                                                
                                            <!-- London Location (In Stock) -->
                                            <div class="location-stock-card location-stock-item" data-location-id="18" data-location-key="2" style="">
                                                <div class="location-icon-name">
                                                    <div class="location-stock">
                                                        <div>
                                                            <i class="dashicons dashicons-location"></i>
                                                            <span class="location-name">London</span>
                                                        </div>
                                                        <span class="stock-display sold-out-display" style="background-color: <?php echo get_option('wcmlim_soldout_button_color', '#dc3545'); ?>; color: <?php echo get_option('wcmlim_soldout_button_text_color', '#ffffff'); ?>; border-radius: <?php echo get_option('wcmlim_soldout_borderradius', '0px'); ?>;">
                                                            <span class="wclim-views_subinfo"> <span class="wcmlim-stock_status sold-out-status"><?php echo get_option('wcmlim_soldout_button_text', 'Sold Out'); ?></span></span>
                                                        </span>
                                                    </div>
                                                </div>
                                                <div class="location-details">
                                                    <div class="location-detail-item location_address_fields">
                                                        <i class="dashicons dashicons-admin-home" style="vertical-align: sub;"></i> 
                                                        <span><span class='location_street'>221B</span><span class="location_route"> Baker Street</span><span class="location_locality"> London,</span> <span class="location_postcode">NW1 6XE</span> <span class='location_country'>United Kingdom</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_contact_fields">
                                                        <i class="dashicons dashicons-email" style="vertical-align: sub;"></i> <span><span class="location_email">london.office@example.co.uk</span> <span class="location_phone">02079460000</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_time_fields">
                                                        <i class="dashicons dashicons-clock" style="vertical-align: sub;"></i> <span><span class='location_start_time'>08:30</span> <span class='location_end_time'>18:00</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_distance_fields">
                                                        <i class="dashicons dashicons-location" style="vertical-align: sub;"></i> 
                                                        <span class='location_distance'>3.5 Kms Away</span>
                                                    </div>
                                                    <div class="location-detail-item location_note_fields">
                                                        <i class="dashicons dashicons-welcome-write-blog" style="vertical-align: sub;"></i> 
                                                        <span class='location_note'>Landmark: near Regents Park.</span>
                                                    </div>
                                                </div>
                                            </div>
                                                                
                                            <!-- Chicago Location (Out of Stock) -->
                                            <div class="location-stock-card location-stock-item" data-location-id="18" data-location-key="2" style="">
                                                <div class="location-icon-name">
                                                    <div class="location-stock">
                                                        <div>
                                                            <i class="dashicons dashicons-location"></i>
                                                            <span class="location-name">Chicago</span>
                                                        </div>
                                                        <span class="stock-display sold-out-display" style="background-color: <?php echo get_option('wcmlim_soldout_button_color', '#dc3545'); ?>; color: <?php echo get_option('wcmlim_soldout_button_text_color', '#ffffff'); ?>; border-radius: <?php echo get_option('wcmlim_soldout_borderradius', '0px'); ?>;">
                                                            <span class="wclim-views_subinfo"> <span class="wcmlim-stock_status sold-out-status"><?php echo get_option('wcmlim_soldout_button_text', 'Sold Out'); ?></span></span>
                                                        </span>
                                                    </div>
                                                </div>
                                                <div class="location-details">
                                                    <div class="location-detail-item location_address_fields">
                                                        <i class="dashicons dashicons-admin-home" style="vertical-align: sub;"></i> 
                                                        <span><span class='location_street'>789</span><span class="location_route"> Michigan Ave</span><span class="location_locality"> Chicago,</span> <span class="location_postcode">60611</span> <span class='location_country'>United States</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_contact_fields">
                                                        <i class="dashicons dashicons-email" style="vertical-align: sub;"></i> <span><span class="location_email">info@chicagostore.com</span> <span class="location_phone">3125556789</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_time_fields">
                                                        <i class="dashicons dashicons-clock" style="vertical-align: sub;"></i> <span><span class='location_start_time'>10:00</span> <span class='location_end_time'>16:00</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_distance_fields">
                                                        <i class="dashicons dashicons-location" style="vertical-align: sub;"></i> 
                                                        <span class='location_distance'>7 Kms Away</span>
                                                    </div>
                                                    <div class="location-detail-item location_note_fields">
                                                        <i class="dashicons dashicons-welcome-write-blog" style="vertical-align: sub;"></i> 
                                                        <span class='location_note'>Currently restocking.</span>
                                                    </div>
                                                </div>
                                            </div>
                                                                
                                            <!-- Manchester Location (Available on Backorder) -->
                                            <div class="location-stock-card location-stock-item" data-location-id="18" data-location-key="2" style="">
                                                <div class="location-icon-name">
                                                    <div class="location-stock">
                                                        <div>
                                                            <i class="dashicons dashicons-location"></i>
                                                            <span class="location-name">Manchester</span>
                                                        </div>
                                                        <span class="stock-display backorder-display" style="background-color: <?php echo get_option('wcmlim_onbackorder_button_color', '#ffc107'); ?>; color: <?php echo get_option('wcmlim_onbackorder_button_text_color', '#212529'); ?>; border-radius: <?php echo get_option('wcmlim_onbackorder_borderradius', '0px'); ?>;">
                                                            <span class="wclim-views_subinfo"> <span class="wcmlim-stock_status backorder-status"><?php echo get_option('wcmlim_onbackorder_button_text', 'Available on backorder'); ?></span></span>
                                                        </span>
                                                    </div>
                                                </div>
                                                <div class="location-details">
                                                    <div class="location-detail-item location_address_fields">
                                                        <i class="dashicons dashicons-admin-home" style="vertical-align: sub;"></i> 
                                                        <span><span class='location_street'>42</span><span class="location_route"> Oldham Street</span><span class="location_locality"> Manchester,</span> <span class="location_postcode">M1 1AB</span> <span class='location_country'>United Kingdom</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_contact_fields">
                                                        <i class="dashicons dashicons-email" style="vertical-align: sub;"></i> <span><span class="location_email">support@manchesterlocation.co.uk</span> <span class="location_phone">0161 555 316</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_time_fields">
                                                        <i class="dashicons dashicons-clock" style="vertical-align: sub;"></i> <span><span class='location_start_time'>09:30</span> <span class='location_end_time'>18:30</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_distance_fields">
                                                        <i class="dashicons dashicons-location" style="vertical-align: sub;"></i> 
                                                        <span class='location_distance'>6 Kms Away</span>
                                                    </div>
                                                    <div class="location-detail-item location_note_fields">
                                                        <i class="dashicons dashicons-welcome-write-blog" style="vertical-align: sub;"></i> 
                                                        <span class='location_note'>Expect delayed shipping.</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                                                
                                        <div class="wcmlim-selectpreviewwrapper" style="display: <?php echo $location_view == "select_view" ? 'block' : 'none'; ?>;">
                                            <select>
                                                <option value="0">New York</option>
                                                <option value="1">Los Angeles</option>
                                                <option value="2">Chicago</option>
                                                <option value="3">Miami</option>
                                            </select>
                                        </div>
                                        <div class="wcmlim-tablepreviewwrapper" style="display: <?php echo $location_view == "table_view" ? 'block' : 'none'; ?>;">
                                            <table id="location-stock-table-simple" class="location-stock-table" style="width: 100%; ">
                                                <thead>
                                                    <tr>
                                                        <th>Location</th>
                                                        <th>Details</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr class="location-stock-row" data-location-id="17" data-location-key="0">
                                                        <td>
                                                            <div class="location-header">
                                                                <h3 class="location-name">New York</h3>
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <div>
                                                                <span class="stock-display" style="background-color: <?php echo $stock_bg; ?>; color: <?php echo $stock_bgcolor; ?>; border-radius: <?php echo $stock_radius; ?>;">
                                                                    <span class="wclim-views_subinfo"> <span class="wcmlim-stock_no">98</span> <span class="wcmlim-stock_status">In Stock </span></span>
                                                                </span>
                                                            </div>
                                                            <div class="location-details">
                                                                <div class="location-detail-item location_address_fields">
                                                                    <i class="dashicons dashicons-admin-home" style="vertical-align: sub;"></i> 
                                                                    <span><span class='location_street'>123</span><span class="location_route"> Broadway</span><span class="location_locality"> New York,</span> <span class="location_postcode">10001</span> <span class='location_country'>United States</span></span>
                                                                </div>
                                                                <div class="location-detail-item location_contact_fields">
                                                                    <i class="dashicons dashicons-email" style="vertical-align: sub;"></i> <span><span class="location_email">contact@nylocation.com</span>  <span class="location_phone">2125551234</span></span>
                                                                </div>
                                                                <div class="location-detail-item location_time_fields">
                                                                    <i class="dashicons dashicons-clock" style="vertical-align: sub;"></i> <span><span class='location_start_time'>09:00</span>  <span class='location_end_time'>17:00</span></span>
                                                                </div>
                                                                <div class="location-detail-item location_distance_fields">
                                                                    <i class="dashicons dashicons-location" style="vertical-align: sub;"></i> 
                                                                    <span class='location_distance'>2 Kms Away</span>
                                                                </div> 
                                                                 <div class="location-detail-item location_note_fields">
                                                        <i class="dashicons dashicons-welcome-write-blog" style="vertical-align: sub;"></i> 
                                                        <span class='location_note'>Open weekdays only.</span>
                                                    </div>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    <tr class="location-stock-row" data-location-id="17" data-location-key="0">
                                                        <td>
                                                            <div class="location-header">
                                                                <h3 class="location-name">Los Angeles</h3>
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <div>
                                                                <span class="stock-display sold-out-display" style="background-color: <?php echo get_option('wcmlim_soldout_button_color', '#dc3545'); ?>; color: <?php echo get_option('wcmlim_soldout_button_text_color', '#ffffff'); ?>; border-radius: <?php echo get_option('wcmlim_soldout_borderradius', '0px'); ?>;">
                                                                    <span class="wclim-views_subinfo"> <span class="wcmlim-stock_status sold-out-status"><?php echo get_option('wcmlim_soldout_button_text', 'Sold Out'); ?></span></span>
                                                                </span>
                                                            </div>
                                                            <div class="location-details">
                                                    <div class="location-detail-item location_address_fields">
                                                        <i class="dashicons dashicons-admin-home" style="vertical-align: sub;"></i> 
                                                        <span><span class='location_street'>316</span><span class="location_route"> Sunset Boulevard</span><span class="location_locality"> Los Angeles,</span> <span class="location_postcode">90028</span> <span class='location_country'>United States</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_contact_fields">
                                                        <i class="dashicons dashicons-email" style="vertical-align: sub;"></i> <span><span class="location_email">info@lastore.com</span>  <span class="location_phone">3235559876</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_time_fields">
                                                        <i class="dashicons dashicons-clock" style="vertical-align: sub;"></i> <span><span class='location_start_time'>08:00</span>  <span class='location_end_time'>20:00</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_distance_fields">
                                                        <i class="dashicons dashicons-location" style="vertical-align: sub;"></i> 
                                                        <span class='location_distance'>8.5 Kms Away</span>
                                                    </div> 
                                                     <div class="location-detail-item location_note_fields">
                                                        <i class="dashicons dashicons-welcome-write-blog" style="vertical-align: sub;"></i> 
                                                        <span class='location_note'>Located in Hollywood district.</span>
                                                    </div>
                                                </div>
                                                        </td>
                                                    </tr>
                                                    <tr class="location-stock-row" data-location-id="17" data-location-key="0">
                                                        <td>
                                                            <div class="location-header">
                                                                <h3 class="location-name">Chicago</h3>
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <div>
                                                                <span class="stock-display" style="background-color: <?php echo $stock_bg; ?>; color: <?php echo $stock_bgcolor; ?>; border-radius: <?php echo $stock_radius; ?>;">
                                                                    <span class="wclim-views_subinfo"> <span class="wcmlim-stock_no">98</span> <span class="wcmlim-stock_status">In Stock </span></span>
                                                                </span>
                                                            </div>
                                                            <div class="location-details">
                                                    <div class="location-detail-item location_address_fields">
                                                        <i class="dashicons dashicons-admin-home" style="vertical-align: sub;"></i> 
                                                        <span><span class='location_street'>456</span><span class="location_route"> North Michigan Avenue</span><span class="location_locality"> Chicago,</span> <span class="location_postcode">60611</span> <span class='location_country'>United States</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_contact_fields">
                                                        <i class="dashicons dashicons-email" style="vertical-align: sub;"></i> <span><span class="location_email">support@chicagostore.com</span>  <span class="location_phone">3125554567</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_time_fields">
                                                        <i class="dashicons dashicons-clock" style="vertical-align: sub;"></i> <span><span class='location_start_time'>09:30</span>  <span class='location_end_time'>18:30</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_distance_fields">
                                                        <i class="dashicons dashicons-location" style="vertical-align: sub;"></i> 
                                                        <span class='location_distance'>12 Kms Away</span>
                                                    </div> 
                                                     <div class="location-detail-item location_note_fields">
                                                        <i class="dashicons dashicons-welcome-write-blog" style="vertical-align: sub;"></i> 
                                                        <span class='location_note'>Near Millennium Park.</span>
                                                    </div>
                                                </div>
                                                        </td>
                                                    </tr>
                                                    <tr class="location-stock-row" data-location-id="17" data-location-key="0">
                                                        <td>
                                                            <div class="location-header">
                                                                <h3 class="location-name">Miami</h3>
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <div>
                                                                <span class="stock-display backorder-display" style="background-color: <?php echo get_option('wcmlim_onbackorder_button_color', '#ffc107'); ?>; color: <?php echo get_option('wcmlim_onbackorder_button_text_color', '#212529'); ?>; border-radius: <?php echo get_option('wcmlim_onbackorder_borderradius', '0px'); ?>;">
                                                                    <span class="wclim-views_subinfo"> <span class="wcmlim-stock_status backorder-status"><?php echo get_option('wcmlim_onbackorder_button_text', 'Available on backorder'); ?></span></span>
                                                                </span>
                                                            </div>
                                                            <div class="location-details">
                                                    <div class="location-detail-item location_address_fields">
                                                        <i class="dashicons dashicons-admin-home" style="vertical-align: sub;"></i> 
                                                        <span><span class='location_street'>789</span><span class="location_route"> Ocean Drive</span><span class="location_locality"> Miami Beach,</span> <span class="location_postcode">33139</span> <span class='location_country'>United States</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_contact_fields">
                                                        <i class="dashicons dashicons-email" style="vertical-align: sub;"></i> <span><span class="location_email">hello@miamistore.com</span>  <span class="location_phone">3055558901</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_time_fields">
                                                        <i class="dashicons dashicons-clock" style="vertical-align: sub;"></i> <span><span class='location_start_time'>07:00</span>  <span class='location_end_time'>22:00</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_distance_fields">
                                                        <i class="dashicons dashicons-location" style="vertical-align: sub;"></i> 
                                                        <span class='location_distance'>15 Kms Away</span>
                                                    </div> 
                                                     <div class="location-detail-item location_note_fields">
                                                        <i class="dashicons dashicons-welcome-write-blog" style="vertical-align: sub;"></i> 
                                                        <span class='location_note'>Beachfront location.</span>
                                                    </div>
                                                </div>
                                                        </td>
                                                    </tr>                                          
                                                </tbody>
                                            </table>
                                        </div>
                                        <div class="wcmlim-expandedpreviewwrapper" style="display: <?php echo $location_view == "expanded_view" ? 'block' : 'none'; ?>;">
                                            <ul id="location-stock-list" class="location-stock-list">
                                                <li class="location-list-item location-stock-item">
                                                    <div class="location-name" style="cursor: pointer;">
                                                        <i class="dashicons dashicons-plus-alt2"></i>
                                                        <div class="location-header">
                                                            <h3 class="location-viewname">New York</h3>
                                                            <span class="stock-display" style="background-color: <?php echo $stock_bg; ?>; color: <?php echo $stock_bgcolor; ?>; border-radius: <?php echo $stock_radius; ?>;">
                                                                <span class="wclim-views_subinfo"> <span class="wcmlim-stock_no">98</span> <span class="wcmlim-stock_status">In Stock </span></span>
                                                            </span>
                                                        </div>
                                                    </div>
                                                    <div class="extra-details" style="padding-left: 20px; display: none;">
                                                    <div class="location-details">
                                                    <div class="location-detail-item location_address_fields">
                                                        <i class="dashicons dashicons-admin-home" style="vertical-align: sub;"></i> 
                                                        <span><span class='location_street'>123</span><span class="location_route"> Broadway</span><span class="location_locality"> New York,</span> <span class="location_postcode">10001</span> <span class='location_country'>United States</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_contact_fields">
                                                        <i class="dashicons dashicons-email" style="vertical-align: sub;"></i> <span><span class="location_email">contact@nylocation.com</span>  <span class="location_phone">2125551234</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_time_fields">
                                                        <i class="dashicons dashicons-clock" style="vertical-align: sub;"></i> <span><span class='location_start_time'>09:00</span>  <span class='location_end_time'>17:00</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_distance_fields">
                                                        <i class="dashicons dashicons-location" style="vertical-align: sub;"></i> 
                                                        <span class='location_distance'>2 Kms Away</span>
                                                    </div> 
                                                     <div class="location-detail-item location_note_fields">
                                                        <i class="dashicons dashicons-welcome-write-blog" style="vertical-align: sub;"></i> 
                                                        <span class='location_note'>Open weekdays only.</span>
                                                    </div>
                                                </div>
                                                </div>
                                                </li>
                                                <li class="location-list-item location-stock-item">
                                                    <div class="location-name" style="cursor: pointer;">
                                                        <i class="dashicons dashicons-plus-alt2"></i>
                                                        <div class="location-header">
                                                            <h3 class="location-viewname">Los Angeles</h3>
                                                            <span class="stock-display sold-out-display" style="background-color: <?php echo get_option('wcmlim_soldout_button_color', '#dc3545'); ?>; color: <?php echo get_option('wcmlim_soldout_button_text_color', '#ffffff'); ?>; border-radius: <?php echo get_option('wcmlim_soldout_borderradius', '0px'); ?>;">
                                                                <span class="wclim-views_subinfo"> <span class="wcmlim-stock_status sold-out-status"><?php echo get_option('wcmlim_soldout_button_text', 'Sold Out'); ?></span></span>
                                                            </span>
                                                        </div>
                                                    </div>
                                                    <div class="extra-details" style="padding-left: 20px; display: none;">
                                                    <div class="location-details">
                                                    <div class="location-detail-item location_address_fields">
                                                        <i class="dashicons dashicons-admin-home" style="vertical-align: sub;"></i> 
                                                        <span><span class='location_street'>316</span><span class="location_route"> Sunset Boulevard</span><span class="location_locality"> Los Angeles,</span> <span class="location_postcode">90028</span> <span class='location_country'>United States</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_contact_fields">
                                                        <i class="dashicons dashicons-email" style="vertical-align: sub;"></i> <span><span class="location_email">info@lastore.com</span>  <span class="location_phone">3235559876</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_time_fields">
                                                        <i class="dashicons dashicons-clock" style="vertical-align: sub;"></i> <span><span class='location_start_time'>08:00</span>  <span class='location_end_time'>20:00</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_distance_fields">
                                                        <i class="dashicons dashicons-location" style="vertical-align: sub;"></i> 
                                                        <span class='location_distance'>8.5 Kms Away</span>
                                                    </div> 
                                                     <div class="location-detail-item location_note_fields">
                                                        <i class="dashicons dashicons-welcome-write-blog" style="vertical-align: sub;"></i> 
                                                        <span class='location_note'>Located in Hollywood district.</span>
                                                    </div>
                                                </div>
                                                </div>
                                                </li>
                                                <li class="location-list-item location-stock-item">
                                                    <div class="location-name" style="cursor: pointer;">
                                                        <i class="dashicons dashicons-plus-alt2"></i>
                                                        <div class="location-header">
                                                            <h3 class="location-viewname">Chicago</h3>
                                                            <span class="stock-display" style="background-color: <?php echo $stock_bg; ?>; color: <?php echo $stock_bgcolor; ?>; border-radius: <?php echo $stock_radius; ?>;">
                                                                <span class="wclim-views_subinfo"> <span class="wcmlim-stock_no">98</span> <span class="wcmlim-stock_status">In Stock </span></span>
                                                            </span>
                                                        </div>
                                                    </div>
                                                    <div class="extra-details" style="padding-left: 20px; display: none;">
                                                    <div class="location-details">
                                                    <div class="location-detail-item location_address_fields">
                                                        <i class="dashicons dashicons-admin-home" style="vertical-align: sub;"></i> 
                                                        <span><span class='location_street'>456</span><span class="location_route"> North Michigan Avenue</span><span class="location_locality"> Chicago,</span> <span class="location_postcode">60611</span> <span class='location_country'>United States</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_contact_fields">
                                                        <i class="dashicons dashicons-email" style="vertical-align: sub;"></i> <span><span class="location_email">support@chicagostore.com</span>  <span class="location_phone">3125554567</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_time_fields">
                                                        <i class="dashicons dashicons-clock" style="vertical-align: sub;"></i> <span><span class='location_start_time'>09:30</span>  <span class='location_end_time'>18:30</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_distance_fields">
                                                        <i class="dashicons dashicons-location" style="vertical-align: sub;"></i> 
                                                        <span class='location_distance'>12 Kms Away</span>
                                                    </div> 
                                                     <div class="location-detail-item location_note_fields">
                                                        <i class="dashicons dashicons-welcome-write-blog" style="vertical-align: sub;"></i> 
                                                        <span class='location_note'>Near Millennium Park.</span>
                                                    </div>
                                                </div>
                                                </div>
                                                </li>
                                                <li class="location-list-item location-stock-item">
                                                    <div class="location-name" style="cursor: pointer;">
                                                        <i class="dashicons dashicons-plus-alt2"></i>
                                                        <div class="location-header">
                                                            <h3 class="location-viewname">Miami</h3>
                                                            <span class="stock-display backorder-display" style="background-color: <?php echo get_option('wcmlim_onbackorder_button_color', '#ffc107'); ?>; color: <?php echo get_option('wcmlim_onbackorder_button_text_color', '#212529'); ?>; border-radius: <?php echo get_option('wcmlim_onbackorder_borderradius', '0px'); ?>;">
                                                                <span class="wclim-views_subinfo"> <span class="wcmlim-stock_status backorder-status"><?php echo get_option('wcmlim_onbackorder_button_text', 'Available on backorder'); ?></span></span>
                                                            </span>
                                                        </div>
                                                    </div>
                                                    <div class="extra-details" style="padding-left: 20px; display: none;">
                                                    <div class="location-details">
                                                    <div class="location-detail-item location_address_fields">
                                                        <i class="dashicons dashicons-admin-home" style="vertical-align: sub;"></i> 
                                                        <span><span class='location_street'>789</span><span class="location_route"> Ocean Drive</span><span class="location_locality"> Miami Beach,</span> <span class="location_postcode">33139</span> <span class='location_country'>United States</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_contact_fields">
                                                        <i class="dashicons dashicons-email" style="vertical-align: sub;"></i> <span><span class="location_email">hello@miamistore.com</span>  <span class="location_phone">3055558901</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_time_fields">
                                                        <i class="dashicons dashicons-clock" style="vertical-align: sub;"></i> <span><span class='location_start_time'>07:00</span>  <span class='location_end_time'>22:00</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_distance_fields">
                                                        <i class="dashicons dashicons-location" style="vertical-align: sub;"></i> 
                                                        <span class='location_distance'>15 Kms Away</span>
                                                    </div> 
                                                     <div class="location-detail-item location_note_fields">
                                                        <i class="dashicons dashicons-welcome-write-blog" style="vertical-align: sub;"></i> 
                                                        <span class='location_note'>Beachfront location.</span>
                                                    </div>
                                                </div>
                                                </div>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="wcmlim-simplepreviewwrapper" style="display: <?php echo $location_view == "simple_text_view" ? 'block' : 'none'; ?>;">
                                            <div class="">
                                                <div class="location-header">
                                                    <h3 class="location-name">New York</h3>
                                                    <span class="stock-display" style="background-color: <?php echo $stock_bg; ?>; color: <?php echo $stock_bgcolor; ?>; border-radius: <?php echo $stock_radius; ?>;">
                                                        <span class="wclim-views_subinfo"> <span class="wcmlim-stock_no">98</span> <span class="wcmlim-stock_status">In Stock </span></span>
                                                    </span>
                                                </div>
                                                <div class="location-details">
                                                    <div class="location-detail-item location_address_fields">
                                                        <i class="dashicons dashicons-admin-home" style="vertical-align: sub;"></i> 
                                                        <span><span class='location_street'>123</span><span class="location_route"> Broadway</span><span class="location_locality"> New York,</span> <span class="location_postcode">10001</span> <span class='location_country'>United States</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_contact_fields">
                                                        <i class="dashicons dashicons-email" style="vertical-align: sub;"></i> <span><span class="location_email">contact@nylocation.com</span>  <span class="location_phone">2125551234</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_time_fields">
                                                        <i class="dashicons dashicons-clock" style="vertical-align: sub;"></i> <span><span class='location_start_time'>09:00</span>  <span class='location_end_time'>17:00</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_distance_fields">
                                                        <i class="dashicons dashicons-location" style="vertical-align: sub;"></i> 
                                                        <span class='location_distance'>2 Kms Away</span>
                                                    </div> 
                                                     <div class="location-detail-item location_note_fields">
                                                        <i class="dashicons dashicons-welcome-write-blog" style="vertical-align: sub;"></i> 
                                                        <span class='location_note'>Open weekdays only.</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="">
                                                <div class="location-header">
                                                    <h3 class="location-name">Los Angeles</h3>
                                                    <span class="stock-display" style="background-color: <?php echo $stock_bg; ?>; color: <?php echo $stock_bgcolor; ?>; border-radius: <?php echo $stock_radius; ?>;">
                                                        <span class="wclim-views_subinfo"> <span class="wcmlim-stock_no">98</span> <span class="wcmlim-stock_status">In Stock </span></span>
                                                    </span>
                                                </div>
                                                <div class="location-details">
                                                    <div class="location-detail-item location_address_fields">
                                                        <i class="dashicons dashicons-admin-home" style="vertical-align: sub;"></i> 
                                                        <span><span class='location_street'>316</span><span class="location_route"> Sunset Boulevard</span><span class="location_locality"> Los Angeles,</span> <span class="location_postcode">90028</span> <span class='location_country'>United States</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_contact_fields">
                                                        <i class="dashicons dashicons-email" style="vertical-align: sub;"></i> <span><span class="location_email">info@lastore.com</span>  <span class="location_phone">3235559876</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_time_fields">
                                                        <i class="dashicons dashicons-clock" style="vertical-align: sub;"></i> <span><span class='location_start_time'>08:00</span>  <span class='location_end_time'>20:00</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_distance_fields">
                                                        <i class="dashicons dashicons-location" style="vertical-align: sub;"></i> 
                                                        <span class='location_distance'>8.5 Kms Away</span>
                                                    </div> 
                                                     <div class="location-detail-item location_note_fields">
                                                        <i class="dashicons dashicons-welcome-write-blog" style="vertical-align: sub;"></i> 
                                                        <span class='location_note'>Located in Hollywood district.</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="">
                                                <div class="location-header">
                                                    <h3 class="location-name">Chicago</h3>
                                                    <span class="stock-display" style="background-color: <?php echo $stock_bg; ?>; color: <?php echo $stock_bgcolor; ?>; border-radius: <?php echo $stock_radius; ?>;">
                                                        <span class="wclim-views_subinfo"> <span class="wcmlim-stock_no">98</span> <span class="wcmlim-stock_status">In Stock </span></span>
                                                    </span>
                                                </div>
                                                <div class="location-details">
                                                    <div class="location-detail-item location_address_fields">
                                                        <i class="dashicons dashicons-admin-home" style="vertical-align: sub;"></i> 
                                                        <span><span class='location_street'>456</span><span class="location_route"> North Michigan Avenue</span><span class="location_locality"> Chicago,</span> <span class="location_postcode">60611</span> <span class='location_country'>United States</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_contact_fields">
                                                        <i class="dashicons dashicons-email" style="vertical-align: sub;"></i> <span><span class="location_email">support@chicagostore.com</span>  <span class="location_phone">3125554567</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_time_fields">
                                                        <i class="dashicons dashicons-clock" style="vertical-align: sub;"></i> <span><span class='location_start_time'>09:30</span>  <span class='location_end_time'>18:30</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_distance_fields">
                                                        <i class="dashicons dashicons-location" style="vertical-align: sub;"></i> 
                                                        <span class='location_distance'>12 Kms Away</span>
                                                    </div> 
                                                     <div class="location-detail-item location_note_fields">
                                                        <i class="dashicons dashicons-welcome-write-blog" style="vertical-align: sub;"></i> 
                                                        <span class='location_note'>Near Millennium Park.</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="">
                                                <div class="location-header">
                                                    <h3 class="location-name">Miami</h3>
                                                    <span class="stock-display" style="background-color: <?php echo $stock_bg; ?>; color: <?php echo $stock_bgcolor; ?>; border-radius: <?php echo $stock_radius; ?>;">
                                                        <span class="wclim-views_subinfo"> <span class="wcmlim-stock_no">98</span> <span class="wcmlim-stock_status">In Stock </span></span>
                                                    </span>
                                                </div>
                                                <div class="location-details">
                                                    <div class="location-detail-item location_address_fields">
                                                        <i class="dashicons dashicons-admin-home" style="vertical-align: sub;"></i> 
                                                        <span><span class='location_street'>789</span><span class="location_route"> Ocean Drive</span><span class="location_locality"> Miami Beach,</span> <span class="location_postcode">33139</span> <span class='location_country'>United States</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_contact_fields">
                                                        <i class="dashicons dashicons-email" style="vertical-align: sub;"></i> <span><span class="location_email">hello@miamistore.com</span>  <span class="location_phone">3055558901</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_time_fields">
                                                        <i class="dashicons dashicons-clock" style="vertical-align: sub;"></i> <span><span class='location_start_time'>07:00</span>  <span class='location_end_time'>22:00</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_distance_fields">
                                                        <i class="dashicons dashicons-location" style="vertical-align: sub;"></i> 
                                                        <span class='location_distance'>15 Kms Away</span>
                                                    </div> 
                                                     <div class="location-detail-item location_note_fields">
                                                        <i class="dashicons dashicons-welcome-write-blog" style="vertical-align: sub;"></i> 
                                                        <span class='location_note'>Beachfront location.</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="Wcmlim_container wcmlim_product wcmlim-drawer_view" style="display: <?php echo $location_view == "drawer_view" ? 'block' : 'none'; ?>;">
                            <div class="Wcmlim_box_wrapper">
                                <div class="Wcmlim_box_content drawer_text_location-wrapper">
                                    <div class="wcmlim-drawer_content_sec">
                                        <button type="button" id="wcmlim-drawer_view_btn">Location Information</button>
                                    </div>
                                    <div id="wcmlim-sidePopup" class="wcmlim-side_popup" style="width: 400px;">
                                        <div class="wcmlim-popup_content">
                                            <div class="Wcmlim_box_header">
                                                <h4 class="Wcmlim_box_title">
                                                    Location Information                        
                                                </h4>
                                                <button type="button" class="wcmlim-close_btn">×</button>
                                            </div>
                                        
                                            <div id="drawer-location-container" class="drawer-location-container">
                                                <div class="">                                    
                                                    <div class="location-stock-item">

                                                        <div class="location-header">
                                                            <h3 class="location-name">New York</h3>
                                                            <span class="stock-display" style="background-color: <?php echo $stock_bg; ?>; color: <?php echo $stock_bgcolor; ?>; border-radius: <?php echo $stock_radius; ?>;">
                                                                <span class="wclim-views_subinfo"> <span class="wcmlim-stock_no">98</span> <span class="wcmlim-stock_status">In Stock </span></span>
                                                            </span> 
                                                        </div>
                                                        
                                                        <div class="drawer-details">
                                                        <div class="location-details">
                                                    <div class="location-detail-item location_address_fields">
                                                        <i class="dashicons dashicons-admin-home" style="vertical-align: sub;"></i> 
                                                        <span><span class='location_street'>123</span><span class="location_route"> Broadway</span><span class="location_locality"> New York,</span> <span class="location_postcode">10001</span> <span class='location_country'>United States</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_contact_fields">
                                                        <i class="dashicons dashicons-email" style="vertical-align: sub;"></i> <span><span class="location_email">contact@nylocation.com</span>  <span class="location_phone">2125551234</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_time_fields">
                                                        <i class="dashicons dashicons-clock" style="vertical-align: sub;"></i> <span><span class='location_start_time'>09:00</span>  <span class='location_end_time'>17:00</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_distance_fields">
                                                        <i class="dashicons dashicons-location" style="vertical-align: sub;"></i> 
                                                        <span class='location_distance'>2 Kms Away</span>
                                                    </div> 
                                                     <div class="location-detail-item location_note_fields">
                                                        <i class="dashicons dashicons-welcome-write-blog" style="vertical-align: sub;"></i> 
                                                        <span class='location_note'>Open weekdays only.</span>
                                                    </div>
                                                </div>                                       
                                                        </div>
                                                    </div>
                                                    <div class="location-stock-item">

                                                        <div class="location-header">
                                                            <h3 class="location-name">Los Angeles</h3>
                                                            <span class="stock-display" style="background-color: <?php echo $stock_bg; ?>; color: <?php echo $stock_bgcolor; ?>; border-radius: <?php echo $stock_radius; ?>;">
                                                                <span class="wclim-views_subinfo"> <span class="wcmlim-stock_no">98</span> <span class="wcmlim-stock_status">In Stock </span></span>
                                                            </span> 
                                                        </div>
                                                        
                                                        <div class="drawer-details">
                                                        <div class="location-details">
                                                    <div class="location-detail-item location_address_fields">
                                                        <i class="dashicons dashicons-admin-home" style="vertical-align: sub;"></i> 
                                                        <span><span class='location_street'>316</span><span class="location_route"> Sunset Boulevard</span><span class="location_locality"> Los Angeles,</span> <span class="location_postcode">90028</span> <span class='location_country'>United States</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_contact_fields">
                                                        <i class="dashicons dashicons-email" style="vertical-align: sub;"></i> <span><span class="location_email">info@lastore.com</span>  <span class="location_phone">3235559876</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_time_fields">
                                                        <i class="dashicons dashicons-clock" style="vertical-align: sub;"></i> <span><span class='location_start_time'>08:00</span>  <span class='location_end_time'>20:00</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_distance_fields">
                                                        <i class="dashicons dashicons-location" style="vertical-align: sub;"></i> 
                                                        <span class='location_distance'>8.5 Kms Away</span>
                                                    </div> 
                                                     <div class="location-detail-item location_note_fields">
                                                        <i class="dashicons dashicons-welcome-write-blog" style="vertical-align: sub;"></i> 
                                                        <span class='location_note'>Located in Hollywood district.</span>
                                                    </div>
                                                </div>                                     
                                                        </div>
                                                    </div>
                                                    <div class="location-stock-item">

                                                        <div class="location-header">
                                                            <h3 class="location-name">Chicago</h3>
                                                            <span class="stock-display" style="background-color: <?php echo $stock_bg; ?>; color: <?php echo $stock_bgcolor; ?>; border-radius: <?php echo $stock_radius; ?>;">
                                                                <span class="wclim-views_subinfo"> <span class="wcmlim-stock_no">98</span> <span class="wcmlim-stock_status">In Stock </span></span>
                                                            </span> 
                                                        </div>
                                                        
                                                        <div class="drawer-details">
                                                        <div class="location-details">
                                                    <div class="location-detail-item location_address_fields">
                                                        <i class="dashicons dashicons-admin-home" style="vertical-align: sub;"></i> 
                                                        <span><span class='location_street'>456</span><span class="location_route"> North Michigan Avenue</span><span class="location_locality"> Chicago,</span> <span class="location_postcode">60611</span> <span class='location_country'>United States</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_contact_fields">
                                                        <i class="dashicons dashicons-email" style="vertical-align: sub;"></i> <span><span class="location_email">support@chicagostore.com</span>  <span class="location_phone">3125554567</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_time_fields">
                                                        <i class="dashicons dashicons-clock" style="vertical-align: sub;"></i> <span><span class='location_start_time'>09:30</span>  <span class='location_end_time'>18:30</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_distance_fields">
                                                        <i class="dashicons dashicons-location" style="vertical-align: sub;"></i> 
                                                        <span class='location_distance'>12 Kms Away</span>
                                                    </div> 
                                                     <div class="location-detail-item location_note_fields">
                                                        <i class="dashicons dashicons-welcome-write-blog" style="vertical-align: sub;"></i> 
                                                        <span class='location_note'>Near Millennium Park.</span>
                                                    </div>
                                                </div>                                      
                                                        </div>
                                                    </div>
                                                    <div class="location-stock-item">

                                                        <div class="location-header">
                                                            <h3 class="location-name">Miami</h3>
                                                            <span class="stock-display" style="background-color: <?php echo $stock_bg; ?>; color: <?php echo $stock_bgcolor; ?>; border-radius: <?php echo $stock_radius; ?>;">
                                                                <span class="wclim-views_subinfo"> <span class="wcmlim-stock_no">98</span> <span class="wcmlim-stock_status">In Stock </span></span>
                                                            </span> 
                                                        </div>
                                                        <div class="location-details">
                                                    <div class="location-detail-item location_address_fields">
                                                        <i class="dashicons dashicons-admin-home" style="vertical-align: sub;"></i> 
                                                        <span><span class='location_street'>789</span><span class="location_route"> Ocean Drive</span><span class="location_locality"> Miami Beach,</span> <span class="location_postcode">33139</span> <span class='location_country'>United States</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_contact_fields">
                                                        <i class="dashicons dashicons-email" style="vertical-align: sub;"></i> <span><span class="location_email">hello@miamistore.com</span>  <span class="location_phone">3055558901</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_time_fields">
                                                        <i class="dashicons dashicons-clock" style="vertical-align: sub;"></i> <span><span class='location_start_time'>07:00</span>  <span class='location_end_time'>22:00</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_distance_fields">
                                                        <i class="dashicons dashicons-location" style="vertical-align: sub;"></i> 
                                                        <span class='location_distance'>15 Kms Away</span>
                                                    </div> 
                                                     <div class="location-detail-item location_note_fields">
                                                        <i class="dashicons dashicons-welcome-write-blog" style="vertical-align: sub;"></i> 
                                                        <span class='location_note'>Beachfront location.</span>
                                                    </div>
                                                </div>
                                                    </div>
                                                </div>                   
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="Wcmlim_container wcmlim_product wcmlim-popup_view" style="display: <?php echo $location_view == "popup_view" ? 'block' : 'none'; ?>;">
                            <div class="Wcmlim_box_wrapper">
                                <div class="Wcmlim_box_content popup_text_location-wrapper">
                                    <div class="wcmlim-popup_content_sec">
                                        <button type="button" id="wcmlim-popup_view_btn">Location Information</button>
                                    </div>
                                    <div id="wcmlim-modalPopup" class="wcmlim-modal_popup">
                                        <div class="wcmlim-modal_content">
                                            <div class="Wcmlim_box_header">
                                                <h4 class="Wcmlim_box_title">
                                                    Location Information                        </h4>
                                                <button type="button"  class="wcmlim-close_btn">×</button>
                                            </div>
                                            <div id="popup-location-container" class="popup-location-container">
                                                <div class="">                                    
                                                    <div class="location-stock-item">
                                                        <div class="location-header">
                                                            <h3 class="location-name">New York</h3>
                                                            <span class="stock-display" style="background-color: <?php echo $stock_bg; ?>; color: <?php echo $stock_bgcolor; ?>; border-radius: <?php echo $stock_radius; ?>;">
                                                                <span class="wclim-views_subinfo"> <span class="wcmlim-stock_no">98</span> <span class="wcmlim-stock_status">In Stock </span></span>
                                                            </span>
                                                        </div>
                                                        <div class="location-details">
                                                    <div class="location-detail-item location_address_fields">
                                                        <i class="dashicons dashicons-admin-home" style="vertical-align: sub;"></i> 
                                                        <span><span class='location_street'>123</span><span class="location_route"> Broadway</span><span class="location_locality"> New York,</span> <span class="location_postcode">10001</span> <span class='location_country'>United States</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_contact_fields">
                                                        <i class="dashicons dashicons-email" style="vertical-align: sub;"></i> <span><span class="location_email">contact@nylocation.com</span>  <span class="location_phone">2125551234</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_time_fields">
                                                        <i class="dashicons dashicons-clock" style="vertical-align: sub;"></i> <span><span class='location_start_time'>09:00</span>  <span class='location_end_time'>17:00</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_distance_fields">
                                                        <i class="dashicons dashicons-location" style="vertical-align: sub;"></i> 
                                                        <span class='location_distance'>2 Kms Away</span>
                                                    </div> 
                                                     <div class="location-detail-item location_note_fields">
                                                        <i class="dashicons dashicons-welcome-write-blog" style="vertical-align: sub;"></i> 
                                                        <span class='location_note'>Open weekdays only.</span>
                                                    </div>
                                                </div>
                                                    </div>
                                                    <div class="location-stock-item">
                                                        <div class="location-header">
                                                            <h3 class="location-name">Los Angeles</h3>
                                                            <span class="stock-display" style="background-color: <?php echo $stock_bg; ?>; color: <?php echo $stock_bgcolor; ?>; border-radius: <?php echo $stock_radius; ?>;">
                                                                <span class="wclim-views_subinfo"> <span class="wcmlim-stock_no">98</span> <span class="wcmlim-stock_status">In Stock </span></span>
                                                            </span>
                                                        </div>
                                                        <div class="location-details">
                                                    <div class="location-detail-item location_address_fields">
                                                        <i class="dashicons dashicons-admin-home" style="vertical-align: sub;"></i> 
                                                        <span><span class='location_street'>316</span><span class="location_route"> Sunset Boulevard</span><span class="location_locality"> Los Angeles,</span> <span class="location_postcode">90028</span> <span class='location_country'>United States</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_contact_fields">
                                                        <i class="dashicons dashicons-email" style="vertical-align: sub;"></i> <span><span class="location_email">info@lastore.com</span>  <span class="location_phone">3235559876</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_time_fields">
                                                        <i class="dashicons dashicons-clock" style="vertical-align: sub;"></i> <span><span class='location_start_time'>08:00</span>  <span class='location_end_time'>20:00</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_distance_fields">
                                                        <i class="dashicons dashicons-location" style="vertical-align: sub;"></i> 
                                                        <span class='location_distance'>8.5 Kms Away</span>
                                                    </div> 
                                                     <div class="location-detail-item location_note_fields">
                                                        <i class="dashicons dashicons-welcome-write-blog" style="vertical-align: sub;"></i> 
                                                        <span class='location_note'>Located in Hollywood district.</span>
                                                    </div>
                                                </div>
                                                    </div>
                                                    <div class="location-stock-item">
                                                        <div class="location-header">
                                                            <h3 class="location-name">Chicago</h3>
                                                            <span class="stock-display" style="background-color: <?php echo $stock_bg; ?>; color: <?php echo $stock_bgcolor; ?>; border-radius: <?php echo $stock_radius; ?>;">
                                                                <span class="wclim-views_subinfo"> <span class="wcmlim-stock_no">98</span> <span class="wcmlim-stock_status">In Stock </span></span>
                                                            </span>
                                                        </div>
                                                        <div class="location-details">
                                                    <div class="location-detail-item location_address_fields">
                                                        <i class="dashicons dashicons-admin-home" style="vertical-align: sub;"></i> 
                                                        <span><span class='location_street'>456</span><span class="location_route"> North Michigan Avenue</span><span class="location_locality"> Chicago,</span> <span class="location_postcode">60611</span> <span class='location_country'>United States</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_contact_fields">
                                                        <i class="dashicons dashicons-email" style="vertical-align: sub;"></i> <span><span class="location_email">support@chicagostore.com</span>  <span class="location_phone">3125554567</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_time_fields">
                                                        <i class="dashicons dashicons-clock" style="vertical-align: sub;"></i> <span><span class='location_start_time'>09:30</span>  <span class='location_end_time'>18:30</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_distance_fields">
                                                        <i class="dashicons dashicons-location" style="vertical-align: sub;"></i> 
                                                        <span class='location_distance'>12 Kms Away</span>
                                                    </div> 
                                                     <div class="location-detail-item location_note_fields">
                                                        <i class="dashicons dashicons-welcome-write-blog" style="vertical-align: sub;"></i> 
                                                        <span class='location_note'>Near Millennium Park.</span>
                                                    </div>
                                                </div>
                                                    </div>
                                                    <div class="location-stock-item">
                                                        <div class="location-header">
                                                            <h3 class="location-name">Miami</h3>
                                                            <span class="stock-display" style="background-color: <?php echo $stock_bg; ?>; color: <?php echo $stock_bgcolor; ?>; border-radius: <?php echo $stock_radius; ?>;">
                                                                <span class="wclim-views_subinfo"> <span class="wcmlim-stock_no">98</span> <span class="wcmlim-stock_status">In Stock </span></span>
                                                            </span>
                                                        </div>
                                                        <div class="location-details">
                                                    <div class="location-detail-item location_address_fields">
                                                        <i class="dashicons dashicons-admin-home" style="vertical-align: sub;"></i> 
                                                        <span><span class='location_street'>789</span><span class="location_route"> Ocean Drive</span><span class="location_locality"> Miami Beach,</span> <span class="location_postcode">33139</span> <span class='location_country'>United States</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_contact_fields">
                                                        <i class="dashicons dashicons-email" style="vertical-align: sub;"></i> <span><span class="location_email">hello@miamistore.com</span>  <span class="location_phone">3055558901</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_time_fields">
                                                        <i class="dashicons dashicons-clock" style="vertical-align: sub;"></i> <span><span class='location_start_time'>07:00</span>  <span class='location_end_time'>22:00</span></span>
                                                    </div>
                                                    <div class="location-detail-item location_distance_fields">
                                                        <i class="dashicons dashicons-location" style="vertical-align: sub;"></i> 
                                                        <span class='location_distance'>15 Kms Away</span>
                                                    </div> 
                                                     <div class="location-detail-item location_note_fields">
                                                        <i class="dashicons dashicons-welcome-write-blog" style="vertical-align: sub;"></i> 
                                                        <span class='location_note'>Beachfront location.</span>
                                                    </div>
                                                </div>
                                                    </div>
                                                </div>                   
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                     </div>
                    </div>
                </div>
            </div>
        </div>
</div>
<script>
    jQuery(document).ready(function($) {





        jQuery('.wcmlim-admin-menu-tab-li').on('click', function() {
            jQuery('.wcmlim-admin-menu-tab-li').removeClass('active');
            jQuery(this).addClass('active');
            var tabId = jQuery(this).find('a').attr('href');
            jQuery('.tab-pane').removeClass('active');
            jQuery(tabId).addClass('active');
        });
        
        jQuery('.location-stock-item').on('click', function () {
            var $this = jQuery(this);
            var isAlreadySelected = $this.hasClass('selected');

            // Close all items
            jQuery('.location-stock-item').removeClass('selected')
                .find('.extra-details').slideUp();
            jQuery('.location-stock-item .location-name i')
                .addClass('dashicons-plus-alt2').removeClass('dashicons-minus');

            // Only open if it wasn't already open
            if (!isAlreadySelected) {
                $this.find('.extra-details').slideDown();
                $this.find('.location-name i')
                    .removeClass('dashicons-plus-alt2').addClass('dashicons-minus');
            }
        });

        jQuery('#wcmlim_backend_display_stock_view').change(function() {
            var selectedValue = jQuery(this).val();
            // hide and show all the divs based on the views selected
            if(selectedValue == 'twocol_view') {
                jQuery('.wcmlim-twocolpreviewwrapper').show();
                jQuery('.wcmlim-threecolpreviewwrapper').hide();
                jQuery('.wcmlim-listpreviewwrapper').hide();
                jQuery('.wcmlim-cardpreviewwrapper').hide();
                jQuery('.wcmlim-selectpreviewwrapper').hide();
                jQuery('.wcmlim-tablepreviewwrapper').hide();
                jQuery('.wcmlim-expandedpreviewwrapper').hide();
                jQuery('.wcmlim-simplepreviewwrapper').hide();
                jQuery('#wcmlim-viewsolder').show();
                jQuery('.wcmlim-popup_view').hide();
                jQuery('.wcmlim-drawer_view').hide();
            } else if(selectedValue == 'threecol_view') {
                jQuery('.wcmlim-twocolpreviewwrapper').hide();
                jQuery('.wcmlim-threecolpreviewwrapper').show();
                jQuery('.wcmlim-listpreviewwrapper').hide();
                jQuery('.wcmlim-cardpreviewwrapper').hide();
                jQuery('.wcmlim-selectpreviewwrapper').hide();
                jQuery('.wcmlim-tablepreviewwrapper').hide();
                jQuery('.wcmlim-expandedpreviewwrapper').hide();
                jQuery('.wcmlim-simplepreviewwrapper').hide();
                jQuery('#wcmlim-viewsolder').show();
                jQuery('.wcmlim-popup_view').hide();
                jQuery('.wcmlim-drawer_view').hide();
            } else if(selectedValue == 'list_view') {
                jQuery('.wcmlim-twocolpreviewwrapper').hide();
                jQuery('.wcmlim-threecolpreviewwrapper').hide();
                jQuery('.wcmlim-listpreviewwrapper').show();
                jQuery('.wcmlim-cardpreviewwrapper').hide();
                jQuery('.wcmlim-selectpreviewwrapper').hide();
                jQuery('.wcmlim-tablepreviewwrapper').hide();
                jQuery('.wcmlim-expandedpreviewwrapper').hide();
                jQuery('.wcmlim-simplepreviewwrapper').hide();
                jQuery('#wcmlim-viewsolder').show();
                jQuery('.wcmlim-popup_view').hide();
                jQuery('.wcmlim-drawer_view').hide();
            } else if(selectedValue == 'card_view') {
                jQuery('.wcmlim-twocolpreviewwrapper').hide();
                jQuery('.wcmlim-threecolpreviewwrapper').hide();
                jQuery('.wcmlim-listpreviewwrapper').hide();
                jQuery('.wcmlim-cardpreviewwrapper').show();
                jQuery('.wcmlim-selectpreviewwrapper').hide();
                jQuery('.wcmlim-tablepreviewwrapper').hide();
                jQuery('.wcmlim-expandedpreviewwrapper').hide();
                jQuery('.wcmlim-simplepreviewwrapper').hide(); 
                jQuery('#wcmlim-viewsolder').show();
                jQuery('.wcmlim-popup_view').hide();
                jQuery('.wcmlim-drawer_view').hide();
            } else if(selectedValue == 'select_view') {
                jQuery('.wcmlim-twocolpreviewwrapper').hide();
                jQuery('.wcmlim-threecolpreviewwrapper').hide();
                jQuery('.wcmlim-listpreviewwrapper').hide();
                jQuery('.wcmlim-cardpreviewwrapper').hide(); 
                jQuery('.wcmlim-selectpreviewwrapper').show(); 
                jQuery('.wcmlim-tablepreviewwrapper').hide(); 
                jQuery('.wcmlim-expandedpreviewwrapper').hide(); 
                jQuery('.wcmlim-simplepreviewwrapper').hide(); 
                jQuery('#wcmlim-viewsolder').show();
                jQuery('.wcmlim-popup_view').hide();
                jQuery('.wcmlim-drawer_view').hide();
            } else if(selectedValue == 'table_view') {
                jQuery('.wcmlim-twocolpreviewwrapper').hide();
                jQuery('.wcmlim-threecolpreviewwrapper').hide();    
                jQuery('.wcmlim-listpreviewwrapper').hide();
                jQuery('.wcmlim-cardpreviewwrapper').hide();
                jQuery('.wcmlim-selectpreviewwrapper').hide();
                jQuery('.wcmlim-tablepreviewwrapper').show();
                jQuery('.wcmlim-expandedpreviewwrapper').hide();
                jQuery('.wcmlim-simplepreviewwrapper').hide();
                jQuery('#wcmlim-viewsolder').show();
                jQuery('.wcmlim-popup_view').hide();
                jQuery('.wcmlim-drawer_view').hide();
            } else if(selectedValue == 'expanded_view') {
                jQuery('.wcmlim-twocolpreviewwrapper').hide();
                jQuery('.wcmlim-threecolpreviewwrapper').hide();    
                jQuery('.wcmlim-listpreviewwrapper').hide();
                jQuery('.wcmlim-cardpreviewwrapper').hide();
                jQuery('.wcmlim-selectpreviewwrapper').hide();
                jQuery('.wcmlim-tablepreviewwrapper').hide();
                jQuery('.wcmlim-expandedpreviewwrapper').show(); 
                jQuery('.wcmlim-simplepreviewwrapper').hide(); 
                jQuery('#wcmlim-viewsolder').show();
                jQuery('.wcmlim-popup_view').hide();
                jQuery('.wcmlim-drawer_view').hide();
            } else if(selectedValue == 'simple_text_view') {
                jQuery('.wcmlim-twocolpreviewwrapper').hide();
                jQuery('.wcmlim-threecolpreviewwrapper').hide();    
                jQuery('.wcmlim-listpreviewwrapper').hide();
                jQuery('.wcmlim-cardpreviewwrapper').hide();
                jQuery('.wcmlim-selectpreviewwrapper').hide();
                jQuery('.wcmlim-tablepreviewwrapper').hide();
                jQuery('.wcmlim-expandedpreviewwrapper').hide(); 
                jQuery('.wcmlim-simplepreviewwrapper').show();
                jQuery('#wcmlim-viewsolder').show();
                jQuery('.wcmlim-popup_view').hide();
                jQuery('.wcmlim-drawer_view').hide();
            } else if(selectedValue == 'drawer_view') {
                jQuery('.wcmlim-twocolpreviewwrapper').hide();
                jQuery('.wcmlim-threecolpreviewwrapper').hide();    
                jQuery('.wcmlim-listpreviewwrapper').hide();
                jQuery('.wcmlim-cardpreviewwrapper').hide();
                jQuery('.wcmlim-selectpreviewwrapper').hide();
                jQuery('.wcmlim-tablepreviewwrapper').hide();
                jQuery('.wcmlim-expandedpreviewwrapper').hide(); 
                jQuery('.wcmlim-simplepreviewwrapper').show();
                jQuery('#wcmlim-viewsolder').hide();
                jQuery('.wcmlim-popup_view').hide();
                jQuery('.wcmlim-drawer_view').show();
            } else if(selectedValue == 'popup_view') {
                jQuery('.wcmlim-twocolpreviewwrapper').hide();
                jQuery('.wcmlim-threecolpreviewwrapper').hide();    
                jQuery('.wcmlim-listpreviewwrapper').hide();
                jQuery('.wcmlim-cardpreviewwrapper').hide();
                jQuery('.wcmlim-selectpreviewwrapper').hide();
                jQuery('.wcmlim-tablepreviewwrapper').hide();
                jQuery('.wcmlim-expandedpreviewwrapper').hide(); 
                jQuery('.wcmlim-simplepreviewwrapper').show();
                jQuery('#wcmlim-viewsolder').hide();
                jQuery('.wcmlim-popup_view').show();
                jQuery('.wcmlim-drawer_view').hide();
            }
        });

        jQuery('#wcmlim-drawer_view_btn').on('click', function () {
            jQuery('#wcmlim-sidePopup').css('width', '400px');
        });

        jQuery('.wcmlim-close_btn').on('click', function () {
            jQuery('#wcmlim-sidePopup').css('width', '0');
            jQuery('#wcmlim-modalPopup').css('display', 'none');
        });

        jQuery('#wcmlim-popup_view_btn').on('click', function () {
            jQuery('#wcmlim-modalPopup').css('display', 'flex');
        });

        jQuery(window).on('click', function (event) {
            if (event.target === jQuery('#wcmlim-modalPopup')[0]) {
                jQuery('#wcmlim-modalPopup').css('display', 'none');
            }
        });

        jQuery('#wcmlim_location_display_heading_setting').change(function() {
            jQuery('.Wcmlim_box_title').text(jQuery(this).val());
            jQuery('.wcmlim-popup_view .Wcmlim_box_title').text(jQuery(this).val());
            jQuery('.wcmlim-drawer_view .Wcmlim_box_title').text(jQuery(this).val());
            jQuery('#wcmlim-drawer_view_btn').text(jQuery(this).val());
            jQuery('#wcmlim-popup_view_btn').text(jQuery(this).val());
        });

        jQuery('#wcmlim_instock_button_text').change(function() {
            jQuery('.wcmlim-stock_status').text(jQuery(this).val());
        });

        // Function to update preview based on checkbox states and section order
        function updatePreviewDisplay() {
            let emailChecked = false; let phoneChecked = false; let startchecked = false; let endchecked = false; 
            let dischecked = false; let streetchecked = false; let routechecked = false; let localitychecked = false; 
            let postchecked = false; let countrychecked = false; let notechecked = false;
            
            // Check all checkbox states
            jQuery('.wcmlim-location_fields_display').each(function() {
                let value = jQuery(this).val();
                let isChecked = jQuery(this).is(':checked');
                
                if(value == 'email') {
                    emailChecked = isChecked;
                }
                if(value == 'phone') {
                    phoneChecked = isChecked;
                }
                if(value == 'start_time') {
                    startchecked = isChecked;
                } 
                if(value == 'end_time') {
                    endchecked = isChecked;
                }
                if(value == 'distance') {
                    dischecked = isChecked;
                }
                if(value == 'street_number') {
                    streetchecked = isChecked;
                }
                if(value == 'route') {
                    routechecked = isChecked;
                }
                if(value == 'locality') {
                    localitychecked = isChecked;
                }
                if(value == 'postcode') {
                    postchecked = isChecked;
                }
                if(value == 'country') {
                    countrychecked = isChecked;
                }
                if(value == 'location_note') {
                    notechecked = isChecked;
                }
            });
            
            // Update field content based on checkbox states
            if(!emailChecked) {
                jQuery('.location_email').hide();
            } else {
                jQuery('.location_email').show();
            }
            
            if(!phoneChecked) {
                jQuery('.location_phone').hide();
            } else {
                jQuery('.location_phone').show();
            }
            
            if(!startchecked) {
                jQuery('.location_start_time').hide();
            } else {
                jQuery('.location_start_time').show();
            }
            
            if(!endchecked) {
                jQuery('.location_end_time').hide();
            } else {
                jQuery('.location_end_time').show();
            }
            
            if(!streetchecked) {
                jQuery('.location_street').hide();
            } else {
                jQuery('.location_street').show();
            }
            
            if(!routechecked) {
                jQuery('.location_route').hide();
            } else {
                jQuery('.location_route').show();
            }
            
            if(!localitychecked) {
                jQuery('.location_locality').hide();
            } else {
                jQuery('.location_locality').show();
            }
            
            if(!postchecked) {
                jQuery('.location_postcode').hide();
            } else {
                jQuery('.location_postcode').show();
            }
            
            if(!countrychecked) {
                jQuery('.location_country').hide();
            } else {
                jQuery('.location_country').show();
            }
            
            // Show/hide grouped sections based on checkbox states
            if(!streetchecked && !routechecked && !localitychecked && !postchecked && !countrychecked) {
                jQuery('.location_address_fields').hide();
            } else {
                jQuery('.location_address_fields').show();
            }
            
            if(!emailChecked && !phoneChecked) {
                jQuery('.location_contact_fields').hide();
            } else {
                jQuery('.location_contact_fields').show();
            }
            
            if(!startchecked && !endchecked) {
                jQuery('.location_time_fields').hide();
            } else {
                jQuery('.location_time_fields').show();
            }
            
            if(!dischecked) {
                jQuery('.location_distance_fields').hide();
            } else {
                jQuery('.location_distance_fields').show();
            }
            
            if(!notechecked) {
                jQuery('.location_note_fields').hide();
            } else {
                jQuery('.location_note_fields').show();
            }
            
            // Update section order in preview cards
            updatePreviewSectionOrder();
        }

        // Function to update section order in preview cards based on admin settings
        function updatePreviewSectionOrder() {
            // Get the current section order from the sortable list in admin
            let currentOrder = [];
            if (window.parent && window.parent.document) {
                // Try to get order from parent window (admin settings)
                window.parent.jQuery('#wcmlim-fields-sections-sortable li').each(function() {
                    let sectionKey = window.parent.jQuery(this).data('section');
                    if (sectionKey) {
                        currentOrder.push(sectionKey);
                    }
                });
            }
            
            // If no order found, use default order
            if (currentOrder.length === 0) {
                currentOrder = ['general', 'address', 'location_note', 'contact', 'business_hours'];
            }
            
            // Section mapping for preview
            let sectionMap = {
                'general': '.location_distance_fields',  // General section contains distance field
                'address': '.location_address_fields', 
                'location_note': '.location_note_fields',
                'contact': '.location_contact_fields',
                'business_hours': '.location_time_fields'
            };
            
            // Reorder sections in all preview cards
            jQuery('.wcmlim-previewcard .location-details, .location-stock-item .location-details').each(function() {
                let $container = jQuery(this);
                let $sections = {};
                
                // Store all sections
                Object.keys(sectionMap).forEach(function(key) {
                    let selector = sectionMap[key];
                    $sections[key] = $container.find(selector).detach();
                });
                
                // Add sections back in the new order
                currentOrder.forEach(function(sectionKey) {
                    if ($sections[sectionKey] && $sections[sectionKey].length > 0) {
                        $container.append($sections[sectionKey]);
                    }
                });
            });
        }

        // Listen to checkbox changes (existing functionality)
        jQuery(document).on('change', '.wcmlim-location_fields_display', function() {
            updatePreviewDisplay();
        });

        // Listen to toggle changes (new functionality for toggle compatibility)
        jQuery(document).on('change', '.wcmlim-section-toggle', function() {
            // Small delay to ensure checkboxes are updated first by toggle logic
            setTimeout(function() {
                updatePreviewDisplay();
            }, 100);
        });

        // Listen to section order changes (new functionality for sequence compatibility)
        if (window.parent && window.parent.document) {
            // Monitor changes to the sortable list in parent window
            window.parent.jQuery(document).on('sortstop', '#wcmlim-fields-sections-sortable', function() {
                setTimeout(function() {
                    updatePreviewSectionOrder();
                }, 200);
            });
            
            // Also listen for manual updates to hidden inputs
            window.parent.jQuery(document).on('change', 'input[name*="backend_display_feilds_settings_order"]', function() {
                setTimeout(function() {
                    updatePreviewSectionOrder();
                }, 100);
            });
        }

        // Initial preview update on page load
        jQuery(document).ready(function() {
            updatePreviewDisplay();
            
            // Initial section order update with slight delay to ensure DOM is ready
            setTimeout(function() {
                updatePreviewSectionOrder();
            }, 500);
        });



        jQuery("#wcmlim_hide_stock_count").change(function() {
            if (jQuery(this).is(':checked')) {
                jQuery('.wcmlim-stock_no').hide();
            } else {
                jQuery('.wcmlim-stock_no').show();
            }
        });

        // Handle Box Width input changes for Wcmlim_box_content elements
        jQuery(document).on('input', 'input[name*="_preview_stock_width"]', function() {
            var value = jQuery(this).val();
            if (value && value > 0) {
                jQuery('.Wcmlim_box_content').css('width', value + '%');
            }
        });

        // Handle background color changes for preview box
        jQuery(document).on('change', 'input[name*="_preview_stock_bgcolor"]', function() {
            var value = jQuery(this).val();
            if (value) {
                jQuery('.Wcmlim_box_content').css('background-color', value);
            }
        });

        // Handle header title toggle
        jQuery(document).on('change', 'input[name*="_display_stock_info"]', function() {
            if (jQuery(this).is(':checked')) {
                jQuery('.Wcmlim_box_title').hide();
            } else {
                jQuery('.Wcmlim_box_title').show();
            }
        });

        // Handle header title color changes
        jQuery(document).on('change', 'input[name*="_txtcolor_stock_info"]', function() {
            var value = jQuery(this).val();
            if (value) {
                jQuery('.Wcmlim_box_title').css('color', value);
            }
        });

        // Handle sold out button text changes
        jQuery(document).on('change', 'input[name*="_soldout_button_text"]', function() {
            var value = jQuery(this).val();
            if (value) {
                jQuery('.sold-out-status').text(value);
            }
        });

        // Handle sold out button background color changes
        jQuery(document).on('change', 'input[name*="_soldout_button_color"]', function() {
            var value = jQuery(this).val();
            if (value) {
                jQuery('.sold-out-display').css('background-color', value);
            }
        });

        // Handle sold out button text color changes
        jQuery(document).on('change', 'input[name*="_soldout_button_text_color"]', function() {
            var value = jQuery(this).val();
            if (value) {
                jQuery('.sold-out-display').css('color', value);
            }
        });

        // Handle sold out button radius changes
        jQuery(document).on('change', 'input[name*="_soldout_borderradius"]', function() {
            var value = jQuery(this).val();
            if (value) {
                jQuery('.sold-out-display').css('border-radius', value);
            }
        });

        // Handle in stock button background color changes
        jQuery(document).on('change', 'input[name*="_instock_button_color"]', function() {
            var value = jQuery(this).val();
            if (value) {
                jQuery('.stock-display:not(.sold-out-display):not(.backorder-display)').css('background-color', value);
                jQuery('.backorder-display').css('background-color', value);
            }
        });

        // Handle in stock button text color changes
        jQuery(document).on('change', 'input[name*="_instock_button_text_color"]', function() {
            var value = jQuery(this).val();
            if (value) {
                jQuery('.stock-display:not(.sold-out-display):not(.backorder-display)').css('color', value);
                jQuery('.backorder-display').css('color', value);
            }
        });

        // Handle in stock button radius changes
        jQuery(document).on('change', 'input[name*="_instock_borderradius"]', function() {
            var value = jQuery(this).val();
            if (value) {
                jQuery('.stock-display:not(.sold-out-display):not(.backorder-display)').css('border-radius', value);
                jQuery('.backorder-display').css('border-radius', value);
            }
        });

        // Handle backorder button text changes
        jQuery(document).on('change', 'input[name*="_onbackorder_button_text"]', function() {
            var value = jQuery(this).val();
            if (value) {
                jQuery('.backorder-status').text(value);
            }
        });
    });  
</script>