<!doctype html>
<html class="no-js" lang="en" dir="ltr">
<head>
    {% include "theme::partials/metadata" %}
    {{ asset_add("theme.css", "theme::css/scroll.css") }}

    <link rel="stylesheet" media="screen and (min-device-width: 320px) and (max-device-width: 860px)" href="{{ asset_url("theme::css/hamburgers.css") }}">
</head>
<body>

{% include "theme::partials/navigation" %}

<section class="grid-container first-section-fixer full columns">
    <section class="grid-x">

        <section class="cell fujiInspiring no-padding columns">
            <section class="grid-x">
                {% set specialOffer = entries('so', 'special_offer')
                    .where('is_enabled', true)
                    .where('starting_date', '<', carbon())
                    .where('ending_date', '>', carbon())
                    .where('is_private', false)
                    .orderBy('id', 'desc')
                    .first()
                %}
                {% if specialOffer %}
                    <div class="specialBanner nopaci heightMid columns small-12 cell">
                        <img src="{{ image(specialOffer.promo_banner_image.cropped()).resize(1920,1054).url() }}"
                             alt="{{ specialOffer.promo_banner_title }}"/>
                        <div class="captionbanner">
                            <div class="midleheight">
                                <div class="sizeCenterElm">
                                    <div class="sizeCaption wordCenter">
                                        <h2 class="titleCaption">
                                            {{ specialOffer.promo_banner_title }}
                                        </h2>
                                        <p style="color: {{ specialOffer.promo_banner_caption_color }}">
                                            {{ specialOffer.promo_banner_short_description }}
                                        </p>
                                        <span class="notes" style="color: {{ specialOffer.promo_banner_caption_color }}">
                                        {{ trans('theme::special-offer.valid_through') }} {{ specialOffer.starting_date.format('d M Y') }}
                                            / {{ specialOffer.ending_date.format('d M Y') }}
                                        </span>
                                        <a href="{{ url("special-offer/get/" ~ specialOffer.slug) }}" class="link"> get it now</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {#<div class="caption">#}
                            {#<div class="sizeCenterElm">#}
                                {#<div class="boxSize">#}

                                    {#<h2 class="titleCaption">#}
                                        {#X Tra Gifts#}
                                    {#</h2>#}
                                    {#<p>#}
                                        {#Get extra with product purchase#}
                                    {#</p>#}
                                {#</div>#}
                            {#</div>#}
                        {#</div>#}
                    </div>
                {% else %}

                {% set featured = entries('promo', 'product').where('is_featured', true).first() %}
                    <div class="specialBanner columns small-6 cell">
                        <img src="{{ image(featured.featured_banner_image.cropped()).quality(100).url() }}"
                             alt="{{ featured.featured_banner_title}}"/>{# .resize(683,750) #}
                        <div class="caption">
                            <span class="titlefeature">{{ trans('theme::special-offer.feature_promo') }}</span>
                            <a href="{{ url("special-offer/promo/" ~ featured.slug) }}">
                                <h2 class="titleCaption">
                                    {{ featured.featured_banner_title }}
                                </h2></a>
                            <p>
                                {{ featured.featured_banner_description }}
                            </p>
                        </div>
                    </div>
                    {# END specialBanner //Banner Pertama #}
                    <div class="columns small-6 cell">
                        <section class="grid-x">
                            {%
                                for highlight in entries('promo', 'product')
                                    .where('is_highlight', true)
                                    .take(2)
                                    .get()
                            %}
                                <div class="specialBanner specialHighlight columns cell">
                                    <img src="{{ image(highlight.highlight_banner_image.cropped()).quality(100).url() }}"
                                         alt="{{ highlight.highlight_banner_title }}"/>{# .resize(683,375) #}
                                    <div class="caption">
                                        <a href="{{ url("special-offer/promo/" ~ featured.slug) }}">
                                            <h2 class="titleCaption">
                                                {{ highlight.highlight_banner_title }}
                                            </h2></a>
                                        <p>
                                            {{ highlight.highlight_banner_description }}
                                        </p>
                                    </div>
                                </div>
                            {% endfor %}
                        </section>
                    </div>
                {% endif %}
            </section>
        </section>

        <section class="contentGallery gridSO cell">
            <div class="sizeCenterElm">
                <div class="grid-x">
                    <div class="headOffers small-12 cell">
                        <h2 class="titleHomeCategory">{{ trans('theme::special-offer.see_latest_promo') }}</h2>
                        <div class="cell">
                            <div class="sideRight">
                                <span class="showTitle">{{ trans('theme::special-offer.filter_by') }}</span>
                                <div class="select">
                                    <select name="" id="">
                                        <option value="0">{{ trans('theme::special-offer.choose_camera') }}</option>
                                        {% for camera in entries('promo', 'product').groupBy('camera_product_id').get() %}
                                            <option value="{{ camera.camera_product.slug }}" ajaxUrlCat="{{ camera.camera_product.slug }}">{{ camera.camera_product.title }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>
                            <div class="sideRight">
                                
                            </div>
                        </div>
                    </div>
                    {# should be request ajax to url('special-offer/latest-promo')#}
                    {% include "templates::special-offer/promo" %}

                </div>
            </div>
        </section><!-- END homeNewsEvent -->

    </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 type="text/javascript">
    global();
    $(document).ready(function () {
        offers();

        // ajax load content
        $('#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("special-offer/latest-promo") }}',
            type: 'get',
            success: function (data) {
                $('#ajax-content').html(data);
                $('#ajax-content').removeClass('loader');
            },
            error: function () {
                alert("Please try again");
            },
            complete: function () {
                $('.loadingAnim').fadeIn();
            }
        });

        /*$('.pagination ul li a').click(function(e){
            e.preventDefault();
            var urlnya = $(this).attr('ajaxurl');
            alert(urlnya);
            $.ajax({
                  url:urlnya,
                  type: 'post',
                  success: function (data) {
                     $('#ajax-content').html(data);
                     $('#ajax-content').removeClass('loader');
                  },
                  error: function () {
                     alert("Please try again");
                  },
                  complete: function() {
                     $('.loadingAnim').fadeIn();
                  }
               });
         });*/
         $('body').click(function(){
            $('.sessionForm').fadeOut();
            $('.bg-session').fadeOut();
        });
    });
    hecent();

    function promoPage(elm) {
        var urlnya = $(elm).attr('ajaxurl');
        $('#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: urlnya,
            type: 'get',
            success: function (data) {
                $('#ajax-content').html(data);
                $('#ajax-content').removeClass('loader');
            },
            error: function () {
                alert("Please try again");
            },
            complete: function () {
                $('.loadingAnim').fadeIn();
            }
        });
    }

    $('.categoryList li a').click(function () {
        var siurl = $(this).attr('ajaxUrlCat');
        $('#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("special-offer") }}/promo-product/' + 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>');
                }
            },
            error: function () {
                alert("Please try again");
            },
            complete: function () {
                $('.loadingAnim').fadeIn();
            }
        });
    });

    $('.sideRight .select select').change(function() {
        var siurl = $(this).val();
        var getUrl = '';
        if (siurl == '0'){
            getUrl = '{{ url("special-offer/latest-promo") }}';
        } else {
            getUrl = '{{ url("special-offer") }}/promo-product/' + siurl + '/';
        }

        $('#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: getUrl,
            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>');
                }
            },
            error: function () {
                alert("Please try again");
            },
            complete: function () {
                $('.loadingAnim').fadeIn();
            }
        });
    });
</script>
</body>
</html>
