
<?php $__env->startSection('productos','active'); ?>
<?php $__env->startSection('content'); ?>

<style type="text/css">
    ul{
        list-style: none;
    }
   li.categoria a{
        font-family: 'Inter';
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        line-height: 35px;
        color: #333333;
    }
    a{
        text-decoration: none;
    }
    li.categoria:first-child{
        /*opacity: 0.65;*/
        border-top: 1px solid #E5E5E5;
    }
    li.categoria{
        border-bottom: 1px solid #E5E5E5;
    }
    /*li.categoria a.active{*/
    /*    color: #131313 !important;*/
    /*    line-height: 23px;*/
    /*}*/
    li.categoria.active a{
        /*background-color: #F5F5F5 !important;*/
        font-weight: 600 !important;
    }
    .producto {
        border: none !important;
        border-radius: 0px !important;
        border-bottom: 1px solid #939598 !important;
    }

    .producto .nombre{
        font-family: 'Inter';
        font-style: normal;
        font-weight: 500;
        font-size: 21px;
        line-height: 25px;
        color: #131313;
    }
    .card .foto {
        opacity: 1;
        display: block;
        /* width: 100%; */
        transition: .5s ease;
        backface-visibility: hidden;
        border: 1px solid #E1E1E1;
    }

    .card:hover .foto {
        opacity: 0.5;
    }
    .foto{
        /*background-size: cover;
        background-position: center;*/
        /* background-size: contain; */
        /* height: 216px; */
        /* height: 306px; */
        /*height: 261px;*/
        height: 100%;
        width: 100%;
        /* background-repeat: no-repeat; */
    }
    
    .titulo{
        font-family: 'Inter';
        font-style: normal;
        font-weight: 400;
        font-size: 42px;
        line-height: 51px;
        color: #131313;
    }
    
    .header{
        /* background-color: #F5F5F5; */
        background: rgba(147, 149, 152, 0.2);
    }
    .breadcrumb li a{
        font-family: 'Inter';
        font-style: normal;
        font-weight: 300;
        font-size: 13px;
        line-height: 16px;
        color: #000000;
        text-decoration: none !important;
    }
    .breadcrumb li.active a{
        font-weight: 400 !important;
    }
    

    
    @media  screen and (max-width: 768px){
        .container-fluid ul{
            padding-left: 0 !important;
        }
        .foto{
            height: 100% !important;
            width: 100% !important;
        }
    }
    @media  screen and (min-width: 992px){
        .menu > .container-fluid{
            align-items: flex-end !important;
        }
    }
</style>

<div class="header">
    <div class="container mb-5">
        <nav class="breadcrumb-menu pb-3" style="--bs-breadcrumb-divider: '|';" aria-label="breadcrumb" style="color: #2B2E39;">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="<?= route('home') ?>">Inicio</a></li>
                <li class="breadcrumb-item" aria-current="page"><a href="<?= route('categorias') ?>">Productos</a></li>
                <li class="breadcrumb-item active" aria-current="page"><a href="<?= route('categoria' , $id) ?>">Productos</a></li>
            </ol>
        </nav>
        <h1 class="titulo pb-4">Productos</h1>
    </div>
</div>

<div class="container my-5">
    <div class="row">
        <div class="col-md-3 col-sm-12">
            <ul class="px-0">
                <?php foreach($categorias as $categoria){ ?>
                    <?php if($categoria->id == $id){ ?>
                        <li class="categoria active px-2 py-2">
                            <a class="active" href="<?= route('categoria', [ 'id' => $id ]) ?>"><?= $categoria->nombre ?></a>
                        </li>
                    <?php } else { ?>
                        <li class="categoria px-2 py-2">
                            <a href="<?= route('categoria', [ 'id' => $categoria->id ]) ?>"><?= $categoria->nombre ?></a>
                        </li>
                    <?php } ?>
                <?php } ?>
            </ul>
        </div>
        <div class="col-md-9 col-sm-12">
            <div class="row">
                <?php foreach($productos as $producto){ ?>
                    <div class="col-md-4 col-sm-12">
                        <div class="card producto mb-4">
                            <a href="<?php echo e(route('producto', $producto->id)); ?>">
                                <img src="<?php echo e(asset(Storage::url($producto->foto))); ?>" class="foto">
                            </a>
                            <div class="card-body px-0 py-2">
                                <a href="<?php echo e(route('producto', $producto->id)); ?>">
                                    <h5 class="card-title nombre"><?= $producto->nombre ?></h5>
                                </a>
                            </div>
                        </div>
                    </div>
                <?php } ?>
            </div>
        </div>
    </div>
</div>

<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.plantilla', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/d11osolecom/public_html/grupohelmont/resources/views/front/categoria.blade.php ENDPATH**/ ?>