<?php 
/**
 * @version    1.7
 * @package    EcoHosting
 * @author     Themelooks <support@themelooks.com>
 *
 * Websites: http://www.themelooks.com
 *
 */

     // Overlay 
    if( ecohost_meta_id('datacenter_overlay') ){
        $overlay = ' class="bg--overlay"';
    }else{
        $overlay = '';
    }
 
?>
<!-- Datacenter Locations Area Start -->
<div id="datacenterLocations" <?php echo ecohost_section_bg('datacenter-bg'). $overlay; ?>>
    <div class="container">
        <?php 
        // Section Title
        echo ecohost_section_heading('datacenter-title');

        ?>
        <div class="datacenter-locations">
        <?php 
        // map image
        
        if( ecohost_meta_id('datacenter-mapimg') ){
            echo '<img src="'.esc_url( ecohost_meta_id('datacenter-mapimg') ).'" alt="'.esc_attr__( 'map image', 'ecohosting' ).'" class="img-responsive">';
        }
        
        // location 
        $loactions = ecohost_meta_id('datacenter-map-content');
        if( is_array( $loactions ) ){
            $i = 1;
            foreach( $loactions as $loaction ){ 
            if( $loaction ){
                echo '<div class="datacenter-location-marker" style="top: '.esc_html( $loaction['_eco_datacenter-location-postop'] ).'; left: '.esc_html( $loaction['_eco_datacenter-location-posleft'] ).';" >';
                    echo '<i class="fa fa-map-marker" data-toggle="tooltip" data-placement="top" title="'.esc_html( $loaction['_eco_datacenter-location-name'] ).'"></i>';
                echo '</div>';
            }
            $i++;
            }
        }
        
        ?>
        
        </div>
    </div>
</div>
<!-- Datacenter Locations Area End -->