<?php $v->layout("_theme");
$v->insert("views/page-title", ["pageTitle" => $pageTitle, "breadcrumb" => $breadcrumb]);
?>
    <section id="content">

        <div class="content-wrap">
            <div class="container">


                <div class="row justify-content-between col-mb-30 mt-4 mb-5">
                    <div class="col-md-5">
                        <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/". $service->cover); ?>"><a href="<?= url("storage/" . $service->cover); ?>" title="<?= $service->title ?>" data-lightbox="gallery-item"><img src="<?= image($service->cover, 600)?>" title="<?= $service->title ?>" alt="<?= $service->title ?>"> </a></div>
                                        <?php
                                        if($gallery):

                                            foreach ($gallery as $g):
                                                ?>
                                                <div class="slide" data-thumb="<?= image($g->gallery, 200, 200)?>"><a href="<?= url("storage/" . $g->gallery) ?>" title="<?= $product->title ?>" data-lightbox="gallery-item"><img src="<?= image($g->gallery, 600)?>" title="<?= $service->title ?>" alt="<?= $service->title ?>"></a></div>
                                            <?php
                                            endforeach;

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


                    </div>
                    <div class="col-md-7">

                        <div class="heading-block">
                            <h3><?= $service->title; ?></h3>
                        </div>
<!--                        <img class="mb-5" src="--><?//= image($service->cover, 1200, 400) ?><!--">-->

                        <div class=" text-justify">
                            <p><!--<img class="mb-5 float-left mr-4 rounded mt-2"  src="<?= image($service->cover, 600) ?>">--><?= str_replace(["<ul>", "<li>"], ["<ul class='iconlist'>", "<li><i class='icon-genderless color-2'></i> "], $service->content) ?></p>
                            <?php if($service->subtitle != "") :?>

                                <a href="<?= $service->subtitle ?>" target="_blank" class="button nomargin button-circle mt-0">Comprar agora <i class="icon icon-shop"></i></a>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>

            </div>
            <hr>

            <?php $v->insert("views/newsletter-widget-2"); ?>

    </section><!-- #content end -->
<?php $v->start("scripts"); ?>
    <script src="<?= url("/shared/scripts/hover3d.js"); ?>"></script>

    <script>

        jQuery(document).ready(function () {

            if (!jQuery('body').hasClass('device-touch')) {

                var lFollowX = 0,
                    lFollowY = 0,
                    x = 0,
                    y = 0,
                    friction = 1 / 30;

                function moveBackground() {
                    x += (lFollowX - x) * friction;
                    y += (lFollowY - y) * friction;

                    translate = 'translate(' + x + 'px, ' + y + 'px) scale(1.1)';

                    jQuery('.move-bg').css({
                        '-webit-transform': translate,
                        '-moz-transform': translate,
                        'transform': translate
                    });

                    window.requestAnimationFrame(moveBackground);
                }

                jQuery(window).on('mousemove click', function (e) {

                    var lMouseX = Math.max(-100, Math.min(100, jQuery(window).width() / 2 - e.clientX));
                    var lMouseY = Math.max(-100, Math.min(100, jQuery(window).height() / 2 - e.clientY));
                    lFollowX = (10 * lMouseX) / 100; // 100 : 12 = lMouxeX : lFollow
                    lFollowY = (10 * lMouseY) / 100;

                });

                moveBackground();

                jQuery(".book-wrap").hover3d({
                    selector: ".book-card",
                    shine: false,
                });

            }

        });

    </script>
<?php $v->end(); ?>