@extends('layouts.plantilla')
@section('inicio', 'active')
@section('content')


<!-- Slick -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>

<style>

    a{
        text-decoration: none !important;
    }

    .card .foto {
        opacity: 1;
        display: block;
        width: 100%;
        transition: .5s ease;
        backface-visibility: hidden;

    }

    .card:hover .foto {

        opacity: 0.5;
    }

    .foto{
        background-size: cover;
        height: 65vh;
        background-position: center;
        background-repeat: no-repeat;
    }
    
    .categoria .foto{
        height: 100%;
        width: 100%;
    }
    
    .card.categoria .foto{
        border: 1px solid #E1E1E1 !important;
    }

    .carousel-item .titulo{
        font-family: 'Inter';
        font-style: normal;
        font-weight: 600;
        font-size: 53px;
        line-height: 54px;
        color: #FFFFFF;
    }

    .carousel-item p{
        font-family: 'Inter';
        font-style: normal;
        font-weight: 400;
        font-size: 20px;
        line-height: 24px;
        color: #FFFFFF;
    }

    .carouselButton{
        background-color: #FABB8A !important;
        width: 37px !important;
        height: 6px !important;
        border-top: 0px !important;
        border-bottom: 0px !important;
        opacity: 1 !important;
        transition: ease opacity 1ms !important;
    }

    .carouselButton.active{
        background-color: #F38130 !important;
    }

    .productos.titulo{
        font-family: 'Inter';
        font-style: normal;
        font-weight: 600;
        font-size: 32px;
        line-height: 39px;
        color: #4F4F4F;
    }

    .categoria {
        border: none !important;
        border-radius: 0px !important;
        border-bottom: 1px solid #939598 !important;
    }

    .categoria .nombre{
        font-family: 'Inter';
        font-style: normal;
        font-weight: 500;
        font-size: 21px;
        line-height: 25px;
        color: #131313;
    }
    
    .inicio__titulo{
        font-family: 'Inter';
        font-style: normal;
        font-weight: 600;
        font-size: 32px;
        line-height: 50px;
        color: #333333;
    }
    
    .inicio__descripcion{
        font-family: 'Inter';
        font-style: normal;
        font-weight: 400;
        font-size: 18px;
        line-height: 189.5%;
        color: #333333;
    }
    
    .foto_carousel{
        background-size: cover;
        background-position: center;
        height: 75vh;
        background-repeat: no-repeat;
    }
    
    .gris{
        background-color: #F5F5F5 !important;
    }
    
    .foto__empresa{
        height: 100% !important;
    }
    
    .btn__empresa{
        background-color: #F38130 !important;
        border: 1px solid #F38130 !important;
        padding: 13px 32px;
        font-family: 'Inter';
        font-style: normal;
        font-weight: 600;
        font-size: 16px;
        line-height: 19px;
        letter-spacing: 0.03em;
        text-transform: capitalize;
        color: #FFFFFF;
        transition: 0.3s ease all;
    }
    
    .btn__empresa:hover{
        border: 1px solid #F38130 !important;
        background-color: #FFF !important;
        color: #F38130 !important;
    }
    
    h5.novedades{
        font-family: 'Inter';
        font-style: normal;
        font-weight: 600;
        font-size: 32px;
        line-height: 39px;
        color: #4F4F4F;
    }
    
    .novedad .card-title{
        font-family: 'Inter';
        font-style: normal;
        font-weight: 500;
        font-size: 20px;
        line-height: 140%;
        color: #333333;
    }
    
    .novedad .card-subtitle{
        font-family: 'Inter';
        font-style: normal;
        font-weight: 600;
        font-size: 16px;
        line-height: 19px;
        text-transform: uppercase;
        color: #F38130 !important;
    }
    
    .novedad .card-text{
        font-family: 'Inter';
        font-style: normal;
        font-weight: 300;
        font-size: 16px;
        line-height: 19px;
        color: #333333;
    }
    
    .novedad p.fecha{
        font-family: 'Inter';
        font-style: normal;
        font-weight: 300;
        font-size: 16px;
        /*line-height: 19px;*/
        color: #898989;
    }
    
    .card.novedad{
        border-radius: 0px !important;
    }

    @media screen and (max-width: 768px){
        /*.contenido{*/
        /*    display: none !important;*/
        /*}*/
        .contenido .titulo{
            font-size:20px;
        }
        .contenido p{
            font-size:14px;
        }
        .carousel-indicators{
            margin-left: 0 !important;
        }
        .info{
            padding-left: 0 !important;
            padding-right: 0 !important;
        }
        .empresa{
            padding-right: 0 !important;
        }
        .imgEmpresa{
            height: 75vh !important;
        }
        .solicitud{
            height: 75vh;
        }
        .foto{
            height: 60vh !important;
        }
    }
    @media screen and (min-width: 992px){
        .categorias{
            margin-bottom: 48px;
        }
        .container-carousel{
            padding-left: 42px; padding-right: 42px;
        }
        .carousel-indicators{
            margin-left: 0 !important;
            margin-right: 0 !important;
        }
        .alignCenter_md{
                position: absolute;
                top: 50%;
                -ms-transform: translateY(-50%);
                transform: translateY(-50%);
        }
    }
</style>

<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="true">
    <div class="carousel-inner">
        <?php foreach($slider as $index => $s){ ?>
            <?php if($index == 0){ ?>
                <div class="carousel-item active">
                    <div class="container-fluid foto_carousel" style="background-image: url('{{asset(Storage::url($s->imagen))}}')">
                        <div class="row" style="height:100%;">
                            <div class="col-12" style="height:100%;">
                                <div class="container" style="height:100%;">
                                    <div class="row" style="height:100%;">
                                        <div class="col-md-6 col-sm-12 alignCenter_md">
                                            <div class="float-start contenido">
                                                <h5 class="titulo"><?= $s->titulo ?></h5>
                                                <?php if($s->descripcion){ ?>
                                                    <p class="subtitulo"><?= $s->descripcion ?></p>
                                                <?php } ?>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- <div class="fotoCarousel" style="background-image: url('{{ asset(Storage::url($s->imagen)) }}')"></div> -->
                </div>
            <?php } else { ?>
                <div class="carousel-item">
                    <div class="container-fluid foto_carousel" style="background-image: url('{{asset(Storage::url($s->imagen))}}')">
                        <div class="row" style="height:100%;">
                            <div class="col-12" style="height:100%;">
                                <div class="container" style="height:100%;">
                                    <div class="row" style="height:100%;">
                                        <div class="col-md-6 col-sm-12 alignCenter_md">
                                            <div class="float-start contenido">
                                                <h5 class="titulo"><?= $s->titulo ?></h5>
                                                <?php if($s->descripcion){ ?>
                                                    <p class="subtitulo"><?= $s->descripcion ?></p>
                                                <?php } ?>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            <?php } ?>
        <?php } ?>
    </div>
    <div class="carousel-indicators pb-md-4 pb-sm-2">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="container">
                        <div class="row">
                            <div class="col-12">
                                <?php foreach($slider as $index => $s){ ?>
                                    <?php if($index == 0){ ?>
                                        <button type="button" class="carouselButton active" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="<?= $index ?>" aria-label="Slide <?= $index + 1 ?>"></button>
                                    <?php } else { ?>
                                        <button type="button" class="carouselButton" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="<?= $index ?>" aria-label="Slide <?= $index + 1 ?>"></button>
                                    <?php } ?>
                                <?php } ?>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container py-5">
    <div class="row">
        <div class="col-12 mb-3">
            <h5 class="productos titulo mb-0">Productos</h5>
        </div>
    </div>
    <div class="row">
        <?php foreach($categorias as $categoria){ ?>
            <div class="col-md-3 col-sm-12">
                <div class="card categoria my-3">
                    <a href="<?= route('categoria', $categoria->id) ?>">
                        <img src="{{ asset(Storage::url($categoria->foto)) }}" class="foto">
                    </a>
                    <div class="card-body px-0 py-2">
                        <a href="<?= route('categoria', $categoria->id) ?>">
                            <h5 class="card-title mb-0 nombre"><?= $categoria->nombre ?></h5>
                        </a>
                    </div>
                </div>
            </div>
        <?php } ?>
    </div>
</div>


<div class="container-fluid pt-3">
    <div class="row">
        <div class="col-md-6 col-sm-12 px-0">
            <div class="foto foto__empresa" style="background-image: url('{{asset(Storage::url($inicio->foto))}}')"></div>
        </div>
        <div class="col-md-6 col-sm-12 p-md-5 gris">
            <div class="row">
                <div class="col-sm-12 col-md-10 px-md-4 py-5 offset-md-1">
                    <div>
                        <h5 class="inicio__titulo mb-4"><?= $inicio->titulo ?></h5>
                        <!-- <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6> -->
                        <p class="inicio__descripcion"><?= $inicio->descripcion ?></p>

                        <a class="btn__empresa mt-4" href="<?= route('empresa') ?>">Mas informaci&oacute;n</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container mt-4">
    <div class="row pt-4">
        <div class="col-12">
            <h5 class="novedades">Novedades</h5>
        </div>
    </div>
    <div class="row py-4 multiple-items">
        <?php foreach($novedades as $novedad){ ?>
            <div class="col-md-4 px-3">
                <div class="card novedad">
                    <img src="{{ asset(Storage::url($novedad->foto)) }}" class="card-img-top">
                    <div class="card-body py-4">
                        <h6 class="card-subtitle mb-2 text-muted"><?= $novedad->Categoria->nombre ?></h6>
                        <h5 class="card-title"><?= $novedad->titulo ?></h5>
                        <p class="card-text"><?= $novedad->descripcion_corta ?></p>
                        <div class="d-flex justify-content-between mt-4">
                            <p class="fecha mb-0"><?= $novedad->fechaParsed ?></p>
                            <a href="<?= route('showNovedad', $novedad->id) ?>">
                                <img src="{{ asset('images/flecha.png') }}">
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        <?php } ?>
    </div>
</div>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('#carousel-example-generic').on('slid.bs.carousel', function () {
            var holder = $( "div.carousel-indicators button.active" );
            holder.removeClass('active');
            var idx = $('div.active').index('div.carousel-item');
            $('div.carousel-indicators button[data-bs-slide-to="'+ idx +'"]').addClass('active');

        });
        $('div.carousel-indicators button').on("click",function(){
            $('div.carousel-indicators button.active').removeClass("active");
            $(this).addClass("active");
        });
        $('.multiple-items').slick({
            infinite: true,
            slidesToShow: 3,
            autoplay: true,
            autoplaySpeed: 3000,
            slidesToScroll: 1,
            dots: false,
            speed: 300,
            arrows: false,
            responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
    // You can unslick at a given breakpoint now by adding:
    // settings: "unslick"
    // instead of a settings object
  ]
        });
    });
</script>

@endsection
