<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <link rel="apple-touch-icon" sizes="76x76" href="../plantilla/img/apple-icon.png">
    <link rel="icon" type="image/png" href="../plantilla/img/favicon.png">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>PetiShop</title>
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
    <meta name="csrf-token" content="<?php echo e(csrf_token()); ?>" />

    <link rel="canonical" href="https://www.creative-tim.com/product/material-kit-pro" />

    <link rel="stylesheet" type="text/css"
        href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" />

    <link href="../plantilla/css/bootstrap.min.css" rel="stylesheet" />
    <link href="../plantilla/css/material-kit.css?v=1.3.0" rel="stylesheet" />
    <!-- peti_puntitos-->
    <link href="../css/peti_puntitos.css" rel="stylesheet">

    <!-- PNotify -->
    <link href="../vendors/pnotify/dist/pnotify.css" rel="stylesheet">
    <link href="../vendors/pnotify/dist/pnotify.buttons.css" rel="stylesheet">
    <link href="../vendors/pnotify/dist/pnotify.nonblock.css" rel="stylesheet">


</head>

<body class="ecommerce-page">

    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NKDMSK6" height="0" width="0"
            style="display:none;visibility:hidden"></iframe></noscript>
    <div id='loading' style='display: none;'>
        <div class='spinner'>
            <img src="http://poa.zitacuaro.tecnm.mx/docs/img/Petirrojos.jpg" class='imgPeti'
                style='width:70px; height:70px;' />
            <div class='bounce1'></div>
            <div class='bounce2'></div>
            <div class='bounce3'></div>
        </div>
    </div>

    <nav class="navbar navbar-default navbar-transparent navbar-fixed-top navbar-color-on-scroll" color-on-scroll="100"
        id="sectionsNav">
        <div class="container">

            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/">PetiShop</a>
            </div>
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li class="">
                        <a onclick="mostrarReferencia();" class="btn btn-info btn-round" aria-expanded="false">
                            <i class="material-icons">view_carousel</i> referencias
                        </a>
                    </li>
                    <li class="button-container">
                        <a class="btn btn-danger btn-round" onclick="carritoPrimeraVes();">
                            <i class="material-icons">shopping_cart</i> Comprar
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <?php
    $imagenPortada = 'portada.jpg';
    $textoPortada = 'Bienvenidos a tu página PetiShop, espero que encuentres lo que estas buscando.';
    if ($portada != null) {
        $imagenPortada = $portada->imagen;
        $textoPortada = $portada->texto;
    }
    ?>
    <div class="page-header header-filter header-small" data-parallax="true"
        style="background-image: url('../img/portada/<?php echo e($imagenPortada); ?>');">
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-md-offset-2">
                    <div class="brand">
                        <h1 class="title">PetiShop!</h1>
                        <h4><?php echo e($textoPortada); ?></h4>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="contenedorPrincipal">

        <div class="main main-raised">

            <div class="section">
                <div class="container">
                    <h2 class="section-title">Encuentra lo que buscas</h2>
                    <div class="row">
                        <div class="col-md-3">
                            <div class="card card-refine card-plain">
                                <div class="card-content">
                                    <h4 class="card-title">
                                        FILTRO
                                        <button class="btn btn-default btn-fab btn-fab-mini btn-simple pull-right"
                                            rel="tooltip" title="Buscar" onclick="productosFiltrosPrincipal();">
                                            <i class="bi bi-search"><svg xmlns="http://www.w3.org/2000/svg"
                                                    width="16" height="16" fill="currentColor"
                                                    class="bi bi-search" viewBox="0 0 16 16">
                                                    <path
                                                        d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
                                                </svg></i>
                                        </button>
                                        <a class="btn btn-default btn-fab btn-fab-mini btn-simple pull-right"
                                            href="/" rel="tooltip" title="Limpiar Filtros">
                                            <i class="material-icons">cached</i>
                                        </a>
                                    </h4>
                                    <div class="panel panel-default panel-rose">
                                        <div class="panel-heading" role="tab" id="headingOne">
                                            <a class="collapsed" role="button" data-toggle="collapse"
                                                data-parent="#accordion" href="#collapseOne" aria-expanded="false"
                                                aria-controls="collapseOne">
                                                <h4 class="panel-title">Precio</h4>
                                                <i class="material-icons">keyboard_arrow_down</i>
                                            </a>
                                        </div>
                                        <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel"
                                            aria-labelledby="headingOne">
                                            <div class="panel-body panel-refine">
                                                <input type="hidden" name="price-leftaHidden" id="price-leftaHidden"
                                                    value="<?php echo e($minPrecio); ?>">
                                                <input type="hidden" name="price-rightHidden" id="price-rightHidden"
                                                    value="<?php echo e($maxPrecio); ?>">

                                                <span id="price-left" class="price-left pull-left"
                                                    data-currency="&dollar;"><?php echo e($minPrecio); ?></span>
                                                <span id="price-right" class="price-right pull-right"
                                                    data-currency="&dollar;"><?php echo e($maxPrecio); ?></span>
                                                <div class="clearfix"></div>
                                                <div id="sliderRefine" class="slider slider-danger"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="panel panel-default panel-rose">
                                        <div class="panel-heading" role="tab" id="headingTwo">
                                            <a class="collapsed" role="button" data-toggle="collapse"
                                                data-parent="#accordion" href="#collapseTwo" aria-expanded="false"
                                                aria-controls="collapseTwo">
                                                <h4 class="panel-title">Categoría</h4>
                                                <i class="material-icons">keyboard_arrow_down</i>
                                            </a>
                                        </div>
                                        <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel"
                                            aria-labelledby="headingTwo">
                                            <div class="panel-body">
                                                <div class="radio-inline">
                                                    <label> <input type="radio" name="categoria" id="categoria"
                                                            value="0" checked>Todos</label>

                                                </div>
                                                <?php $__currentLoopData = $categorias; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $categoria): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                    <div>
                                                        <label> <input type="radio" name="categoria"
                                                                id="categoria<?php echo e($loop->iteration); ?>"
                                                                value="<?php echo e($categoria->id); ?>">
                                                            <?php echo e($categoria->nombre); ?></label>

                                                    </div>
                                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

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

                                </div>
                            </div>
                        </div>
                        <div id="contenedor">
                            <?php echo $__env->make('productos', compact('productos'), \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    <div class="subscribe-line subscribe-line-image" data-parallax="true"
        style="background-image: url('../plantilla/img/examples/ecommerce-header.jpg');">
        <div class="container">
            <div class="row">
                <div class="col-md-6 col-md-offset-3">
                    <div class="text-center">
                        <h3 class="title">Registrate</h3>
                        <p class="description">

                        </p>
                    </div>
                    <div class="card card-raised card-form-horizontal">
                        <div class="card-content">
                            <form method="" action="">
                                <div class="row">
                                    <div class="col-sm-8">
                                        <div class="input-group">
                                            <span class="input-group-addon">
                                                <i class="material-icons">Correo</i>
                                            </span>
                                            <div class="form-group is-empty"><input type="email" value=""
                                                    placeholder="Tu correo..." class="form-control"><span
                                                    class="material-input"></span></div>
                                        </div>
                                    </div>
                                    <div class="col-sm-4">
                                        <button type="button" class="btn btn-danger btn-block">Registrate</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade bs-example-modal-lg" id="modal-detalles-producto-principal" tabindex="-1" role="dialog"
        aria-hidden="true" style="display: none;">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="">
                    <?php $producto = $productos[0]; ?>
                    <div id="modal-contenido-producto"></div>

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

    <footer class="footer footer-black footer-big">
        <div class="container">
            <div class="content">
                <div class="row">
                    <div class="col-md-4">
                        <h5>About Us</h5>
                        <p>Creative Tim is a startup that creates design tools that make the web development process
                            faster and easier. </p>
                        <p>We love the web and care deeply for how users interact with a digital product. We power
                            businesses and individuals to create better looking web projects around the world. </p>
                    </div>
                    <div class="col-md-4">
                        <h5>Social Feed</h5>
                        <div class="social-feed">
                            <div class="feed-line">
                                <i class="fa fa-twitter"></i>
                                <p>How to handle ethical disagreements with your clients.</p>
                            </div>
                            <div class="feed-line">
                                <i class="fa fa-twitter"></i>
                                <p>The tangible benefits of designing at 1x pixel density.</p>
                            </div>
                            <div class="feed-line">
                                <i class="fa fa-facebook-square"></i>
                                <p>A collection of 25 stunning sites that you can use for inspiration.</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <h5>Instagram Feed</h5>
                        <div class="gallery-feed">
                            <img src="../plantilla/img/faces/card-profile6-square.jpg"
                                class="img img-raised img-rounded" alt="" />
                            <img src="../plantilla/img/faces/christian.jpg" class="img img-raised img-rounded"
                                alt="" />
                            <img src="../plantilla/img/faces/card-profile4-square.jpg"
                                class="img img-raised img-rounded" alt="" />
                            <img src="../plantilla/img/faces/card-profile1-square.jpg"
                                class="img img-raised img-rounded" alt="" />
                            <img src="../plantilla/img/faces/marc.jpg" class="img img-raised img-rounded"
                                alt="" />
                            <img src="../plantilla/img/faces/kendall.jpg" class="img img-raised img-rounded"
                                alt="" />
                            <img src="../plantilla/img/faces/card-profile5-square.jpg"
                                class="img img-raised img-rounded" alt="" />
                            <img src="../plantilla/img/faces/card-profile2-square.jpg"
                                class="img img-raised img-rounded" alt="" />
                        </div>
                    </div>
                </div>
            </div>
            <hr />
            <ul class="pull-left">
                <li>
                    <a href="#pablo">
                        Blog
                    </a>
                </li>
                <li>
                    <a href="#pablo">
                        Presentation
                    </a>
                </li>
                <li>
                    <a href="#pablo">
                        Discover
                    </a>
                </li>
                <li>
                    <a href="#pablo">
                        Payment
                    </a>
                </li>
                <li>
                    <a href="#pablo">
                        Contact Us
                    </a>
                </li>
            </ul>
            <div class="copyright pull-right">
                Copyright &copy;
                <script>
                    document.write(new Date().getFullYear())
                </script> Creative Tim All Rights Reserved.
            </div>
        </div>
    </footer>
</body>

<script src="../js/controlador.js"></script>


<script src="../plantilla/js/jquery.min.js" type="text/javascript"></script>
<script src="../plantilla/js/bootstrap.min.js" type="text/javascript"></script>
<script src="../plantilla/js/material.min.js"></script>

<script src="../plantilla/js/moment.min.js"></script>

<script src="../plantilla/js/nouislider.min.js" type="text/javascript"></script>

<script src="../plantilla/js/bootstrap-datetimepicker.js" type="text/javascript"></script>

<script src="../plantilla/js/bootstrap-selectpicker.js" type="text/javascript"></script>

<script src="../plantilla/js/bootstrap-tagsinput.js"></script>

<script src="../plantilla/js/jasny-bootstrap.min.js"></script>

<script type="text/javascript"
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAFPQibxeDaLIUHsC6_KqDdFaUdhrbhZ3M"></script>

<script src="../plantilla/js/material-kit.js?v=1.3.0" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {

        var slider2 = document.getElementById('sliderRefine');
        var minHidden = document.getElementById('price-leftaHidden').value;
        var maxHidden = document.getElementById('price-rightHidden').value;
        noUiSlider.create(slider2, {
            start: [minHidden * 1, maxHidden * 1],
            connect: true,
            range: {
                'min': [minHidden * 1],
                'max': [maxHidden * 1]
            }
        });

        var limitFieldMin = document.getElementById('price-left');
        var limitFieldMax = document.getElementById('price-right');

        slider2.noUiSlider.on('update', function(values, handle) {
            if (handle) {
                limitFieldMax.innerHTML = $('#price-right').data('currency') + Math.round(values[
                    handle]);
            } else {
                limitFieldMin.innerHTML = $('#price-left').data('currency') + Math.round(values[
                    handle]);

            }
        });
    });

    // 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>
<!-- PNotify -->
<script src="../vendors/pnotify/dist/pnotify.js"></script>
<script src="../vendors/pnotify/dist/pnotify.buttons.js"></script>
<script src="../vendors/pnotify/dist/pnotify.nonblock.js"></script>
<noscript>
    <img height="1" width="1" style="display:none"
        src="https://www.facebook.com/tr?id=111649226022273&ev=PageView&noscript=1" />
</noscript>

</html>
<?php /**PATH C:\xampp\htdocs\htdocs\petiShop\resources\views/principal.blade.php ENDPATH**/ ?>