<!doctype html>
<html class="no-js" lang="en" dir="ltr">
<head>
    {% include "theme::partials/metadata" %}
    {{ asset_add("build.css", "theme::css/scroll.css") }}
    {{ asset_add("build.css", "theme::css/slider.css") }}
    {{ asset_add("build.css", "theme::css/owlc.css") }}
    {{ asset_style("build.css", ["min"]) }}

    <link rel="stylesheet" media="screen and (min-device-width: 320px) and (max-device-width: 860px)" href="{{ asset_url("theme::css/hamburgers.css") }}">

    <style>
    @media only screen and (max-width: 640px){
        .sessionForm {
            top: 10%;
            left: 10%;
            width: 80%;
            display: table;
            margin: 0;
        }
    }
    </style>
</head>
<body class="bgEb">

{% include "theme::partials/navigation" %}

{% if session_has('success') %}
    <ul class="sessionForm successForm">
        <li>{{ session_get('success') }}</li>
        <span class="close">{{ trans('theme::page.close') }} X</span>
    </ul>
    <div class="bg-session"></div>
{% endif %}
{% if session_has('errorBundling') %}
    <ul class="sessionForm errorForm">
        <li>{{ session_get('errorBundling') }}</li>
        <span class="close">{{ trans('theme::page.close') }} X</span>
    </ul>
    <div class="bg-session"></div>
{% endif %}

<section class="grid-container full columns">
    <section class="grid-x">
        <section class="cell bannerDetailOffer no-padding columns">
            <img src="{{ image(specialOffer.banner_image.cropped()).resize(1920,1137).quality(100).url() }}"
                 alt="{{ specialOffer.banner_title }}"/>
            <div class="caption">
                <div class="sizeCenterElm">
                    <div class="sizeCaption">
                        <span class="titlefeature ">{{ specialOffer.banner_featured_title }}</span>
                        <h2 class="titleCaption">
                            {{ specialOffer.banner_title }}
                        </h2>
                        <p>
                            {{ specialOffer.banner_short_description }}
                        </p>
                    </div>
                </div>
            </div>
        </section><!-- END detailOffer -->
        <section class="specialPage cell columns">
            <section class="sizeCenterElm">
                <div class="mainContent grid-x grid-margin-x">
                    <div class="stepOffer cell medium-4 columns">
                        <h2 class="titleOffers">
                            {{ trans('theme::special-offer.how_to_get') }}
                        </h2>
                        <br/>
                        <ol>
                            <li class="active">{{ trans('theme::special-offer.choose_product_bundling') }} <a href="#">{{ trans('theme::page.terms') }}</a>
                            </li>
                            <li>{{ trans('theme::special-offer.fill_the_form') }}</li>
                            <li>{{ trans('theme::special-offer.print_voucher') }}</li>
                        </ol>
                    </div>
                    <div class="contens cell medium-8 columns">
                        <h2 class="titleOffers">
                            {{ trans("theme::page.terms") }}
                        </h2>

                        <br/>
                        <div class="mainwyswyg">

                            {{ specialOffer.terms_content.render()|raw }}

                            <div class="term-box">
                                <input type="checkbox" id="terms" name="" value="terms" checked=""/><label for="terms">{{ trans('theme::special-offer.agree') }}</label>
                                <span class="terms-red" style="display:none;">{{ trans('theme::special-offer.must_agree') }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </section><!-- END contens -->
        <section class="bundling cell">
            <div class="sizeCenterElm columns">
                <h2 class="titleHomeCategory">
                    {{ trans('theme::special-offer.choose_bundling') }}
                </h2>
            </div>
            <div class="cell columns">
                <div class="fuji-bundling owl-theme">

                    {% for bundling in bundlings %}
                        <div class="item">
                            <div class="i-camera">
                                <img src="{{ image(bundling.bundling_image.cropped()).url() }}"
                                     alt="{{ bundling.name }}"/>
                            </div>
                            <div class="caption columns">
                                <div class="boxleft small-6">
                                    <h2 class="nameProduct">{{ bundling.name }}</h2>
                                </div>
                                <div class="boxright small-6">
                                    <span class="noteOffers">{{ trans("theme::page.price")}}</span>
                                    <span class="price">{{ trans('theme::special-offer.idr') }} {{ bundling.price.format() }}</span>
                                </div>
                                {% if bundling.quantity.value > 0 %}
                                    <a href="{{ url('special-offer/get/' ~ specialOffer.slug ~ '/bundling/' ~ bundling.slug) }}" class="link disabledHref">select</a>
                                {% else %}
                                    <a class="link outstock">{{ trans('theme::special-offer.out_of_stock') }}</a>
                                {% endif %}
                            </div><!-- END CAPTION -->
                        </div>
                    {% endfor %}

                </div><!-- END fuji-bundling -->
            </div>
        </section><!-- END bundling -->
        
    </section>
</section>
{% include "theme::partials/footer" %}
{% include "theme::partials/scripts" %}

<script src="{{ asset_url("theme::js/owlc.js") }}"></script>
<script src="{{ asset_url("theme::js/scroll.min.js") }}"></script>

<script type="text/javascript">
    global();
    $(document).ready(function () {
        $('.fuji-carousel').owlCarousel({
            // stagePadding: 120,
            items: 4,
            loop: true,
            margin: 25,
            smartSpeed: 1000,
            nav: true,
            dots: false,

        });

        //set initial state.

        $('#terms').change(function () {
            $('.fuji-bundling .item a.link').addClass('disabledHref')
            if (this.checked) {
                $('.fuji-bundling .item a.link').removeClass('disabledHref');
                $('.term-box').removeClass('failed');
                $('.terms-red').fadeOut();
            }
        });

        $('.fuji-bundling .item a.link').click(function (e) {
            if ($(this).hasClass('disabledHref')) {
                e.preventDefault();
                $('.term-box').addClass('failed');
                $('.terms-red').fadeIn();
                $('html, body').animate({
                    scrollTop: $("#terms").offset().top + -250
                }, 1000);
            }
        });
        $('body').click(function(){
            $('.sessionForm').fadeOut();
            $('.bg-session').fadeOut();
        });


    });
    $(window).load(function () {
        $("#terms").removeAttr('checked');
    });
</script>
</body>
</html>
