<!doctype html>
<html class="no-js" lang="en" dir="ltr">
<head>
    {% include "theme::partials/metadata" %}
    {{ asset_add("slider.css", "theme::css/slider.css") }}
    {{ asset_add("slider.css", "theme::css/owlc.css") }}
    {{ asset_style("slider.css", ["min"]) }}

    {# <link rel="stylesheet" media="screen and (min-device-width: 320px) and (max-device-width: 640px)" href="{{ asset_url("theme::css/slicknav.css") }}"> #}
    <link rel="stylesheet" media="screen and (min-device-width: 320px) and (max-device-width: 900px)" href="{{ asset_url("theme::css/hamburgers.css") }}">

</head>
<body>
{% include "theme::partials/navigation" %}

<section class="bgBlack grid-container full columns">
    <section class="grid-x">
        <section class="cell homeSlide containers no-padding columns">
            <ul class="slides">

                {% for banner in entries('home', 'banner').where('is_enabled', true).get() %}
                    <li>
                        <section class="mainslide">
                            <div class="layerimg">
                                <img
                                     src="{{ image(banner.banner_image).resize(1920,1124).quality(100).url() }}"
                                     alt="{{ banner.banner_title }}"/>

                            </div>
                            <section class="caption">
                                <section class="sizeCenterElm">
                                    <div class="sizeCaption">
                                        <div class="iconProduct">
                                            <img src="{{ image(banner.banner_product_logo).url() }}"
                                                 alt="{{ banner.banner_title }}" style="height:23px;" />
                                        </div>
                                        <h1>{{ banner.banner_title }}</h1>
                                        <p>{{ banner.banner_description }}</p>
                                        <a href="{{ banner.banner_link }}" class="link">{{ trans("theme::page.learn-more")}}</a>
                                    </div>
                                </section>
                            </section>
                        </section>
                    </li>
                {% endfor %}

            </ul>
        </section>

        {% set productCategories = entries('products', 'categories').get() %}

        <section class="categoryCamera cell">
            <div class="modelCamera sizeCenterElm columns no-padding">
                <h2 class="title-model columns no-padding">{{ trans("theme::page.cameras")}}</h2>
                <ul class="menu-model small-10 columns no-padding">
                    {% for productCategory in productCategories %}
                        <li>
                            <a data-link="{{ productCategory.id }}" class="menuShortcut {% if productCategory.id == 1 %} current {% endif %}">
                                {{ productCategory.title }}
                            </a>
                        </li>
                    {% endfor %}
                </ul>
            </div><!-- END modelCamera -->
            {% include "templates::home-product/product-categories" %}
        </section><!-- END categoryCamera -->
        <section class="homeNewsEvent cell">
            <div class="sizeCenterElm columns">
                <h2 class="titleHomeCategory">
                    {{ trans("theme::page.events-update")}}
                </h2>
            </div>
            <div class="cell columns">
                <div class="sizeCenterElm">
                    <div class="fuji-carousel owl-theme">
                        {% for event in entries('studio_event', 'events')
                            .where('is_enabled', true)
                            .orderBy('id', 'desc')
                            .take(5)
                            .get()
                        %}
                            <div class="item">
                                <img src="{{ image(event.event_image.cropped()).fit(538,207).url() }}"
                                     alt="{{ event.event.name }}"/>
                                <div class="caption">
                                    <div class="posBot">
                                        <span class="event-location">{{ event.location }}</span>
                                        <span class="event-date">{{ event.starting_date.format('d F Y') }}</span>
                                        <h4 class="title">{{ event.name }}</h4>
                                        {#<p>#}
                                            {#{{ str_truncate(event.event_content|striptags)|raw }}#}
                                        {#</p>#}
                                    </div>
                                    <a href="{{ url('event/' ~ event.slug) }}" class="goArrow"></a>
                                </div>
                            </div>
                        {% endfor %}
                    </div><!-- END fuji-carousel -->
                </div>
            </div>
            <div class="sizeCenterElm columns">
                <a href="{{ url('event') }}" class="viewall">
                    {{ trans("theme::page.view-all")}}
                </a>
            </div>
        </section><!-- END homeNewsEvent -->

        {% set chooseCamera = entries('home', 'choose_camera').first() %}
        <section class="homeCYC heightMid cell imageFull columns">
            <img src="{{ image(chooseCamera.choose_camera_image).resize(1920,745).quality(100).url() }}"
                 alt="{{ chooseCamera.title}}"/>
            <div class="caption poscapRight">
                <div class="midleheight">
                    {#<div class="columns icons">#}
                        {#<span class="ic-camera"></span>#}
                    {#</div>#}
                    <h2 class="titleHomeCategory">
                        {{ chooseCamera.title }}
                    </h2>
                    <p>
                        {{ chooseCamera.description }}
                    </p>
                     <a href="{{ chooseCamera.link_url }}" class="link">{{ trans("theme::page.search-now")}}</a>
                </div>
            </div>
        </section><!-- END homeCYC -->
        
        {# {% set campaign = entries('home', 'campaign').first() %}
        <section class="homeCampaign cell columns">
            <div class="layerImg">
                <img src="{{ image(campaign.background_image.cropped()).resize(1366,567).url() }}"
                     alt="{{ campaign.campaign_image_title }} {{ campaign.campaign_image_description }}">
                <div class="caption">
                    <div class="sizeCaption">
                        <h2 class="titleHomeCategory">{{ campaign.campagin_image_title }}</h2>
                        <p>{{ campaign.campagin_image_description }}</p>
                    </div>
                </div><!-- END caption -->
                <div class="productCampaign">
                    {{ img('theme::img/remove/home-campaignproduk.png') }}
                </div><!-- END productCampaign -->
            </div><!-- END layerImg -->
            <div class="sizeCaption captionBot">
                <a href="{{ campaign.campaign_url }}" class="ic-download"></a>
                <h2 class="titleHomeCategory">{{ campaign.campagin_content_title }}</h2>
                <p>
                    {{ campaign.campaign_content }}
                </p>
            </div>
        </section> #}
        <!-- END homeCampaign -->

        <section class="homeSocial cell columns">
            <div class="sizeCenterElm columns">
                <div class="headtitle columns">
                    <span class="noteHast">#Fujifilm_id</span>
                    <h2 class="titleHomeCategory">
                        {{ trans("theme::page.social-stream")}}
                    </h2>
                </div>
                <div class="gridSocial columns small-12">
                    <ul class="grid">
                        <li class="ig-feeds-01"></li>
                        <li class="ig-feeds-02"></li>
                        <li class="ig-feeds-03"></li>
                        <li class="ig-feeds-04"></li>
                        <li class="ig-feeds-05"></li>
                        <li class="ig-feeds-06"></li>
                        <li class="ig-feeds-07"></li>
                        <li class="ig-feeds-08"></li>
                    </ul>
                </div>
            </div>
        </section><!-- END homeSocial -->
    </section>
</section>

{% include "theme::partials/footer" %}
{% include "theme::partials/scripts" %}
<script src="{{ asset_url("theme::js/slider.js") }}"></script>
<script src="{{ asset_url("theme::js/owlc.js") }}"></script>
{# <script src="{{ asset_url("theme::js/jquery.slicknav.js") }}"></script> #}
<script type="text/javascript">
    global();
    home();
    $('#ajax-content').html('<div class="loader loadernya"> <img src="{{ image('theme::img/loader_seq.gif').url() }}" width="200" height="200" id="loader-img" align="center"></div>');
        $.ajax({
            url: '{{ url("home-product/product-categories") }}',
            type: 'get',
            success: function (data) {
                $('#ajax-content').html(data);
                $('#ajax-content').removeClass('loader');
                homeProduct();
            },
            error: function () {
                alert("Please try again");
            },
            complete: function () {
                $('.loadingAnim').fadeIn();
            }
        });
    $(document).ready(function(){
        $('.menu-model li a').on('click', function() {
            $('.menu-model li a').removeClass('current');
            $(this).addClass('current');
            var siurl = $(this).attr('data-link');
            $('#ajax-content').html('<div class="loader loadernya"> <img src="{{ image('theme::img/loader_seq.gif').url() }}" width="200" height="200" id="loader-img" align="center"></div>');
            $.ajax({
                url: '{{ url("home-product") }}/product-categories/' + siurl + '/',
                type: 'get',
                success: function (data) {
                    $('#ajax-content').html(data);
                    $('#ajax-content').removeClass('loader');
                    // if ($('.grid li').length == 0) {
                    //     $('#ajax-content').html('<div class=""> <h3>Data yang anda cari tidak dapat ditemukan</h3></div>');
                    // }
                    homeProduct();
                },
                error: function () {
                    alert("Please try again");
                },
                complete: function () {
                    $('.loadingAnim').fadeIn();
                }
            });
            
        });

        var token = '399795700.3a18674.52b5e0c1196447b393bf939bfb265540', // learn how to obtain it below
            userid = 399795700, // User ID - get it in source HTML of your Instagram profile or look at the next example :)
            num_photos = 8; // how much photos do you want to get
        $.ajax({
            url: 'https://api.instagram.com/v1/users/' + userid + '/media/recent', // or /users/self/media/recent for Sandbox
            dataType: 'jsonp',
            type: 'GET',
            data: {access_token: token, count: num_photos},
            success: function(data){
               console.log(data);
               $('.ig-feeds-01').append(
                                '<a href="'+ data.data[0].link+'" target="_blank">'+
                                    '<span class="icons fa fa-instagram"></span>' + 
                                    '<img src="'+data.data[0].images.standard_resolution.url+'">'+
                                '</a>');
               $('.ig-feeds-02').append(
                                '<a href="'+ data.data[1].link+'" target="_blank">'+
                                    '<span class="icons fa fa-instagram"></span>' + 
                                    '<img src="'+data.data[1].images.standard_resolution.url+'">'+
                                '</a>');
               $('.ig-feeds-03').append(
                                '<a href="'+ data.data[2].link+'" target="_blank">'+
                                    '<span class="icons fa fa-instagram"></span>' + 
                                    '<img src="'+data.data[2].images.standard_resolution.url+'">'+
                                '</a>');
               $('.ig-feeds-04').append(
                                '<a href="'+ data.data[3].link+'" target="_blank">'+
                                    '<span class="icons fa fa-instagram"></span>' + 
                                    '<img src="'+data.data[3].images.standard_resolution.url+'">'+
                                '</a>');
               $('.ig-feeds-05').append(
                                '<a href="'+ data.data[4].link+'" target="_blank">'+
                                    '<span class="icons fa fa-instagram"></span>' + 
                                    '<img src="'+data.data[4].images.standard_resolution.url+'">'+
                                '</a>');
               $('.ig-feeds-06').append(
                                '<a href="'+ data.data[5].link+'" target="_blank">'+
                                    '<span class="icons fa fa-instagram"></span>' + 
                                    '<img src="'+data.data[5].images.standard_resolution.url+'">'+
                                '</a>');
               $('.ig-feeds-07').append(
                                '<a href="'+ data.data[6].link+'" target="_blank">'+
                                    '<span class="icons fa fa-instagram"></span>' + 
                                    '<img src="'+data.data[6].images.standard_resolution.url+'">'+
                                '</a>');
               $('.ig-feeds-08').append(
                                '<a href="'+ data.data[7].link+'" target="_blank">'+
                                    '<span class="icons fa fa-instagram"></span>' + 
                                    '<img src="'+data.data[7].images.standard_resolution.url+'">'+
                                '</a>');
            },
            error: function(data){
               console.log(data); // send the error notifications to console
            }
         });
    });
    
</script>
</body>
</html>
