<?php
/**
 *
 * @package LZ Restaurant Premium 
 */
?>
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/theme.css" />
<?php
if(get_theme_mod('lz_fitness_instagram_section_disable') != 'on' ){ ?>
<section id="instagram-section">
	<div class="lightbox">
	<div class="instagram-main-section">
		<?php	
		$instagramTitle = get_theme_mod('lz_fitness_instagram_title', 'Instagram');
		//$iframe = get_theme_mod('lz_fitness_instagram_section_embade', 'Add your instagram embed code in customizer');
		?>
		<div class="ht-section-title-tagline">
			 <h2 class="ht-section-title lz-instagram-heading"><?php echo ($instagramTitle); ?></h2>
			 <div class="clearfix"></div>
		</div>
		<div class="instagram-sec textcenter">
			<!-- <?php// echo $iframe; ?> -->
		 </div>
		 <div class="uk-container uk-container-center">
    <div id="tm-middle" class="main-box" data-uk-grid-match="" data-uk-grid-margin="">
        <div class="tm-main uk-width-medium-1-1 uk-row-first">
            <main id="tm-content" class="tm-content">
                <!-- <div style="height: 54px;" class="uk-sticky-placeholder"> -->
                    <!-- <div style="margin: 0px;" class="button-group filter-button-group" data-uk-sticky="{top:70}">
                        <div class="uk-container uk-container-center">
                            <button class="active" data-filter="*"></button>
                        </div>
                    </div> -->
                <!-- </div> -->
                <div id="PhotosDiv">
                    <div class="uk-grid uk-grid-collapse grid data-uk-grid-match" id="PhotosIGDiv">
                    </div>
                    </div>
</main>
        </div>
    </div>
</div>
<script>
//Get photos
        function GetInstagramPhotos() {
            $("#PhotosUL").html("");
            $.ajax({
                type: "GET",
                async: true,
                contentType: "application/json; charset=utf-8",
                url: "https://api.instagram.com/v1/users/self/media/recent/?access_token=4327394317.1677ed0.aa358c91dc0b4977b772c6a5a849b486",
                dataType: "jsonp",
                cache: false,
                beforeSend: function () {
                    $("#loading").show();
                },
                success: function (data) {
                    $("#loading").hide();
                    if (data == "") {
                        $("#PhotosDiv").hide();
                    } else {

                        $("#PhotosDiv").show();
                        for (var i = 0; i < data["data"].length; i++) {
                          
                            $("#PhotosIGDiv").append("<div class='uk-width-1-1 uk-width-medium-1-2 uk-width-large-1-4 grid-item'><div class='gallery-album'>"+
                            "<a href=" + data.data[i].images.low_resolution.url + " data-uk-lightbox='{group:'my-group'}' class='img-0'><img src=" + data.data[i].images.standard_resolution.url + " ></a><div class='titles'><div class='title'>  </div><div class='sub-title'></div>  </div> </div> ");

                        }

                    }
                }

            });
        }
</script>
<!-- <script src="<?php //echo get_template_directory_uri(); ?>/Scripts/jquery-1.10.2.min.js" type="text/javascript"  ></script> -->
<script type="text/javascript">

        $(document).ready(function () {
            GetInstagramPhotos();
        });
</script>
		 <div class="clearfix"></div>
	</div>
</div>
</section>
<?php }