
<script>
    (function(w, d, s, l, i) {
        w[l] = w[l] || [];
        w[l].push({
            'gtm.start': new Date().getTime(),
            event: 'gtm.js'
        });
        var f = d.getElementsByTagName(s)[0],
            j = d.createElement(s),
            dl = l != 'dataLayer' ? '&l=' + l : '';
        j.async = true;
        j.src =
            'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
        f.parentNode.insertBefore(j, f);
    })(window, document, 'script', 'dataLayer', 'GTM-NKDMSK6');
</script>

<?php
function cerosCantidad($cantidad) {
    if (!str_contains($cantidad,".")){
        return $cantidad.".0";
    }
    return $cantidad;
}
?>

<div class="product-page">

    <div class="section section-gray">
        <div class="container">
            <div class="main main-product">
                <div class="" style="width: 73%;">
                    <div class="col-md-6 col-sm-6">
                        <?php $imagenes = explode(',',$producto->imagenes);?>
                        <div class="tab-content">
                            <div class="tab-pane" id="product-page1">
                                <img src="../img/productos/{{ $producto->portada }}" />
                            </div>
                            <div class="tab-pane active" id="product-page2">
                                <img src="../img/productos/{{ $imagenes[0] }}" />
                            </div>
                            <div class="tab-pane" id="product-page3">
                                <img src="../img/productos/{{ $imagenes[1] }}" />
                            </div>
                            <div class="tab-pane" id="product-page4">
                                <img src="../img/productos/{{ $imagenes[2] }}" />
                            </div>
                        </div>
                        <ul class="nav flexi-nav" role="tablist" id="flexiselDemo1" style="display: inline-flex;">
                            <li>
                                <a href="#product-page1" role="tab" data-toggle="tab" aria-expanded="false">
                                    <img src="../img/productos/{{ $producto->portada }}" />
                                </a>
                            </li>
                            <li class="active">
                                <a href="#product-page2" role="tab" data-toggle="tab" aria-expanded="false">
                                    <img src="../img/productos/{{ $imagenes[0] }}" />
                                </a>
                            </li>
                            <li>
                                <a href="#product-page3" role="tab" data-toggle="tab" aria-expanded="false">
                                    <img src="../img/productos/{{ $imagenes[1] }}" />
                                </a>
                            </li>
                            <li>
                                <a href="#product-page4" role="tab" data-toggle="tab" aria-expanded="true">
                                    <img src="../img/productos/{{ $imagenes[2] }}" />
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="col-md-6 col-sm-6">
                        <h2 class="title"> {{ $producto->nombre }} </h2>
                        <h3 class="main-price">${{ cerosCantidad( $producto->precio) }}</h3>
                        <div id="acordeon">
                            <div class="panel-group" id="accordion">
                                <div class="panel panel-border panel-default">
                                    <div class="panel-heading" role="tab" id="headingOne">
                                        <a role="button" data-toggle="collapse" data-parent="#accordion"
                                            href="#collapseThree" aria-controls="collapseOne">
                                            <h4 class="panel-title" onclick="claseIn('collapseThreeModal')">
                                                Descripción
                                                <i class="material-icons">keyboard_arrow_down</i>
                                            </h4>
                                        </a>
                                    </div>
                                    <div id="collapseThreeModal" class="panel-collapse collapse">
                                        <div class="panel-body">
                                            {{ $producto->descripcion }}
                                        </div>
                                    </div>
                                    <input type="hidden" id="cantidad" name="cantidad" value="1">

                                </div>
                            </div>
                        </div>
                        <div class="row text-right">
                            <button class="btn btn-info btn-round" data-dismiss="modal">Cerrar &nbsp;<i
                                class="fa fa-close"></i></button>
                            <button class="btn btn-danger btn-round" onclick="cargar_carrito_compra({{ $producto->id}});">Agregar &nbsp;<i
                                    class="material-icons">shopping_cart</i></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>








<script type="text/javascript">
    $(document).ready(function() {
        $("#flexiselDemo1").flexisel({
            visibleItems: 4,
            itemsToScroll: 1,
            animationSpeed: 400,
            enableResponsiveBreakpoints: true,
            responsiveBreakpoints: {
                portrait: {
                    changePoint: 480,
                    visibleItems: 3
                },
                landscape: {
                    changePoint: 640,
                    visibleItems: 3
                },
                tablet: {
                    changePoint: 768,
                    visibleItems: 3
                }
            }
        });
    });

    // Facebook Pixel Code Don't Delete
    ! function(f, b, e, v, n, t, s) {
        if (f.fbq) return;
        n = f.fbq = function() {
            n.callMethod ?
                n.callMethod.apply(n, arguments) : n.queue.push(arguments)
        };
        if (!f._fbq) f._fbq = n;
        n.push = n;
        n.loaded = !0;
        n.version = '2.0';
        n.queue = [];
        t = b.createElement(e);
        t.async = !0;
        t.src = v;
        s = b.getElementsByTagName(e)[0];
        s.parentNode.insertBefore(t, s)
    }(window,
        document, 'script', '//connect.facebook.net/en_US/fbevents.js');

    try {
        fbq('init', '111649226022273');
        fbq('track', "PageView");

    } catch (err) {
        console.log('Facebook Track Error:', err);
    }
</script>

