<?php
$this->layout("_theme");
$this->insert("views/page-title", ["pageTitle" => $pageTitle]);
?>
<section id="content">
    <div class="content-wrap">
        <div class="container clearfix">
            <div class="single-product product-page">
                <div class="col_two_fifth">
                    <!-- Product Single - Gallery
                    ============================================= -->
                    <div class="product-image">

                        <div class="fslider" data-pagi="false" data-arrows="false" data-thumbs="true">
                            <div class="flexslider">
                                <div class="slider-wrap" data-lightbox="gallery">
                                    <div class="slide" data-thumb="<?= url("storage/". $product->cover); ?>"><a href="<?= url("storage/" . $product->cover); ?>" title="<?= $product->title ?>" data-lightbox="gallery-item"><img src="<?= image($product->cover, 600)?>" title="<?= $product->title ?>" alt="<?= $product->title ?>"> </a></div>
                                    <?php
                                    if($gallery):
                                        foreach ($gallery as $g):
                                            ?>
                                            <div class="slide" data-thumb="<?= url("storage/". $g->gallery) ?>"><a href="<?= url("storage/" . $g->gallery) ?>" title="<?= $product->title ?>" data-lightbox="gallery-item"><img src="<?= image($g->gallery, 600)?>" title="<?= $product->title ?>" alt="<?= $product->title ?>"></a></div>
                                        <?php
                                        endforeach;
                                    endif;
                                    ?>
                                </div>
                            </div>
                        </div>
                        <?= ($destaque == 1 ? '<div class="sale-flash">EM DESTAQUE</div>': ''); ?>
                    </div><!-- Product Single - Gallery End -->
                </div>
                <div class="col_three_fifth col_last product-desc">
                    <!-- Product Single - Price
                    ============================================= -->
                    <div class="heading-block topmargin">
                        <h2><?= $product->title ?></h2>
                        <span class="theme-text"><?= $product->subtitle ?></span>

                    </div>
                    <!-- Product Single - Short Description
                    ============================================= -->
                    <p><?= $product->content ?></p>
                    <!-- Product Single - Meta
                    ============================================= -->

                    <div class="line"></div>
                    <?php if(!empty($product->manual)):?>

                        <div class="section nobottommargin notopmargin rounded bg-dark-gray" style="padding: 5px !important;">
                            <div class="container dark" style="padding: 5px !important;">
                                <div class="row justify-content-between mt-5">
                                    <!-- Heading Title
                                    ============================================= -->
                                    <div class="col-md-12" style="padding-left:30px; padding-right: 30px ">
                                        <small class="text-muted uppercase t300 ls3 d-block">Catálogo de produto</small>
                                        <h2 class="t700 ls0 mb-3" style="font-size: 27px; line-height: 1.2">Cadastre-se para baixar</h2>
                                        <p class="text-muted" style="font-size: 16px;">Para baixar o catálogo cadastre seu email abaixo!</p>
                                        <input type="text" placeholder="Seu melhor email" class="form-control gradient-border rounded j_email" style="border:3px #555 solid; padding: 20px">
                                        <div class="d-flex align-items-center mt-2 mb-4">
                                            <?php if(!empty($product->manual)): ?>
                                                <a class="button button-change nott button-large bg-dark-gray t300 gradient-border ml-0 mt-4 mb-0 j_cta"
                                                   style="width: 50%"
                                                   data-url="<?= url("produto/cta"); ?>"
                                                   data-action="catalogo"
                                                   data-id="<?= $product->id?>"
                                                >
                                                    <span> Catálogo</span>
                                                    <span><i class="fal fa-download"></i></span>
                                                </a>
                                            <?php endif; ?>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    <?php endif; ?>

                    <!-- Product Single - Share
                    ============================================= -->
<!--                    --><?//= $this->insert("views/sharebox"); ?>

                </div>
            </div>
        </div>


<!--        <div class="line"></div>-->
<!--        <div class="container clearfix">-->

<!--            --><?php //if($related):?>
<!--                <div class="fancy-title title-dotted-border mt-4 mb-1 title-center">-->
<!--                    <h4>Produtos em Destaque</h4>-->
<!--                </div>-->
<!--                <div id="oc-products" class="owl-carousel products-carousel carousel-widget" data-margin="20" data-loop="true" data-autoplay="5000" data-nav="true" data-pagi="false" data-items-xs="1" data-items-sm="2" data-items-md="3" data-items-lg="4" data-items-xl="5">-->

<!--                    --><?php
//                    foreach ($related as $prod):
//                        $this->insert("views/product-item", ["product" => $prod, "class"=>"oc-item", "url"=>"tintas"]);
//                    endforeach;
//                    ?>
<!--                </div>-->
<!--            --><?php
//                else:
//                    echo '<div class="fancy-title title-dotted-border mt-4 mb-1 title-center"><h4>No momento não possuímos produtos em destaque!</h4></div>';
//            endif;
//            ?>
<!--        </div>-->
    </div>
    <?= $this->insert("views/cta", ["title"=>"Quer as melhores tintas do mercado?", "product"=>$product->title])?>

</section><!-- #content end -->

<?php $this->start("scripts"); ?>
    <script type="text/javascript">
        var ajaxResponseBaseTime = 5;
        var ajaxResponseRequestError = "<div class='message error icon-warning'>Desculpe mas não foi possível processar sua requisição...</div>";
        // AJAX RESPONSE
        function ajaxMessage(message, time) {
            var ajaxMessage = $(message);
            ajaxMessage.append("<div class='message_time'></div>");
            ajaxMessage.find(".message_time").animate({"width": "100%"}, time * 1000, function () {
                $(this).parents(".message").fadeOut(200);
            });
            $(".ajax_response").append(ajaxMessage);
            ajaxMessage.effect("bounce");
        }

        $(".j_cta").on("click", function (e) {
            e.preventDefault();
            var clicked = $(this);
            var data = clicked.data();
            data.email = $(".j_email").val();
            var load = $(".ajax_load");
            $.ajax({
                url: data.url,
                type: "POST",
                data: data,
                dataType: "json",
                beforeSend: function () {
                    load.fadeIn(200).css("display", "flex");
                },
                success: function (response) {
                    //message
                    if (response.message) {
                        ajaxMessage(response.message, ajaxResponseBaseTime);
                        load.fadeOut();
                    }
                },
                error: function () {
                    ajaxMessage(ajaxResponseRequestError, 5);
                    load.fadeOut();
                }
            });
        });
    </script>
<?php $this->end(); ?>