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

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

<!-- jQuery 1.8 or later, 33 KB -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<!-- Fotorama from CDNJS, 19 KB -->
<link  href="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script>

<style type="text/css">
    ul{
        list-style: none;
    }
    a{
        text-decoration: none !important;
    }
    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;
    }
    .header{
        margin-bottom: 40px;
    }
    .contenido{
        margin-bottom: 40px;
    }
    .nombre{
        font-family: 'Inter';
        font-style: normal;
        font-weight: 400;
        font-size: 28px;
        line-height: 34px;
        letter-spacing: -0.01em;
        color: #020202;
    }
    .descripcion{
        font-family: 'Inter';
        font-style: normal;
        font-weight: 300;
        font-size: 16px;
        line-height: 25px;
        color: #000000;
    }
    .fotorama__thumb{
        border:1px solid #E5E5E5;
        padding: 10px;
    }
    .fotorama__stage {
        border: 0.5px solid #E5E5E5;
    }

    .fotorama__thumb-border{
        border: 2px solid #DC9724 !important;
    }
    .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;
    }
    .titulo{
        font-family: 'Inter';
        font-style: normal;
        font-weight: 400;
        font-size: 42px;
        line-height: 51px;
        color: #131313;
    }
    
    h4.caracteristicas{
        font-family: 'Inter';
        font-style: normal;
        font-weight: 400;
        font-size: 24px;
        line-height: 29px;
        letter-spacing: -0.01em;
        color: #020202;
    }
    
    .caracteristicas.texto{
        font-family: 'Inter';
        font-style: normal;
        font-weight: 300;
        font-size: 16px;
        line-height: 25px;
        color: #000000;
    }

    .presupuesto{
        padding: 13px 32px;
        background: #F38130;
        border-radius: 0px !important;
        border: 1px solid #F38130;
        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: all .3s ease;
    }

    .presupuesto:hover{
        background: #FFF !important;
        border: 1px solid #F38130 !important;
        transition: all .3s ease;
        color: #F38130 !important;
    }
    
    .fichaTecnica{
        padding: 13px 32px;
        background: #FFF !important;
        border: 1px solid #F38130 !important;
        color: #F38130 !important;
        border-radius: 0px !important;
        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: all .3s ease;
    }
    
    .datos_electricos .titulo, .datos_tecnicos .titulo{
        font-family: 'Inter';
        font-style: normal;
        font-weight: 400;
        font-size: 24px;
        line-height: 29px;
        letter-spacing: -0.01em;
        color: #020202;
    }
    
    .datos_tecnicos table{
        border: 0px !important;
    }
    .datos_tecnicos tr{
        border-left: 0px !important;
        border-right: 0px !important;
    }
    
    .datos_tecnicos tr:first-child{
        border-top: 1px solid #D8D8D8;
    }
    
    .datos_tecnicos tr{
        border-bottom: 1px solid #D8D8D8;
    }
    
    .datos_tecnicos tr td:first-child{
        font-family: 'Inter';
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        line-height: 30px;
        color: #333333;
        opacity: 0.96;
    }
    
    .datos_tecnicos tr td:last-child{
        font-family: 'Inter';
        font-style: normal;
        font-weight: 600;
        font-size: 16px;
        line-height: 30px;
        text-align: right;
        color: #333333;
        opacity: 0.96;
    }
    
    .datos_electricos tr td:first-child{
        font-family: 'Inter';
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        line-height: 30px;
        color: #333333;
        opacity: 0.96;
    }
    
    .datos_electricos tr td:last-child{
        font-family: 'Inter';
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        line-height: 30px;
        text-align: right;
        color: #333333;
        opacity: 0.96;
    }

    
    .foto{
         background-size: contain;
        background-position: center;
        /* height: 20vh; */
        height: 216px;
        background-repeat: no-repeat;
    }
    .card .foto {
        opacity: 1;
        display: block;
        /* width: 100%; */
        transition: .5s ease;
        backface-visibility: hidden;
    }

    .card:hover .foto {
        opacity: 0.5;
    }
    .card{
        border: none !important;
    }
    
    .fotorama__nav{
        text-align: left !important;
    }
    
    div.descripcion p{
        font-family: 'Inter';
        font-style: normal;
        font-weight: 300;
        font-size: 16px;
        line-height: 25px;
        color: #000000;
    }

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

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

    </div>
</div>

<div class="container">
    <div class="row contenido">
        <div class="col-md-3 col-sm-12">
            <ul class="px-0">
                <?php foreach($categorias as $categoria){ ?>
                    <?php if($categoria->id == $producto->categoria_id){ ?>
                        <li class="active categoria px-2 py-2">
                            <a class="active" href="<?= route('categoria', [ 'id' => $producto->categoria_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">
                    <div class="col-md-7">


                            <div class="fotorama" data-nav="thumbs" data-arrows="true" data-click="true"
                            data-height="500" data-width="100%" data-thumbmargin="20" data-thumbwidth="100" data-thumbheight="100" data-loop="true">


                                <img src="{{asset(Storage::url($producto->foto))}}" class="img-thumbnail mt-4 mx-2 shadow" style="width:200px; ">
                              <?php if($producto->foto2){ ?>
                                <img src="{{asset(Storage::url($producto->foto2))}}" class="img-thumbnail mt-4 mx-2 shadow" style="width:200px; ">
        
                                <?php } ?>
                                <?php if($producto->foto3){ ?>
                                    <img src="{{asset(Storage::url($producto->foto3))}}" class="img-thumbnail mt-4 mx-2 shadow" style="width:200px; ">
        
                                <?php } ?>
                                <?php if($producto->foto4){ ?>
                                    <img src="{{asset(Storage::url($producto->foto4))}}" class="img-thumbnail mt-4 mx-2 shadow" style="width:200px; ">
        
                                <?php } ?>
                                <?php if($producto->foto5){ ?>
                                    <img src="{{asset(Storage::url($producto->foto5))}}" class="img-thumbnail mt-4 mx-2 shadow" style="width:200px; ">
                                <?php } ?>
                            </div>
                        </div>
                <div class="col-md-5">
                    <div class="h-100">
                        <div>
                            <h3 class="nombre pb-3"><?= $producto->nombre ?></h3>
                            <?php if($producto->descripcion){ ?>
                                <div class="descripcion">
                                    <?= $producto->descripcion ?>
                                </div>
                            <?php } ?>
                        </div>
                        <div>
                            <div class="d-grid gap-2 d-md-block">
                                <a href="<?= route('presupuesto', $producto->id) ?>" type="button" class="btn btn-primary presupuesto me-md-1">Consultar</a>
                                <?php if($producto->ficha_tecnica){ ?>
                                    <a href="<?= route('descargarFicha', $producto->id) ?>" type="button" class="btn btn-primary fichaTecnica">Ficha T&eacute;cnica</a>
                                <?php } ?>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <?php if($producto->texto_izq || $producto->texto_der){ ?>
                <div class="row mt-3">
                    <div class="col-12">
                        <h4 class="caracteristicas">Caracter&iacute;sticas generales</h4>
                    </div>
                    <?php if($producto->texto_izq){ ?>
                        <div class="col-6">
                            <p class="caracteristicas texto"><?= $producto->texto_izq ?></p>
                        </div>
                    <?php } ?>
                    <?php if($producto->texto_der){ ?>
                        <div class="col-6">
                            <p class="caracteristicas texto"><?= $producto->texto_der ?></p>
                        </div>
                    <?php } ?>
                </div>
            <?php } ?>
            <div class="row mt-3">
                <div class="col-md-6 col-sm-12">
                    <div class="row">
                        <?php if($producto->datos_electricos){ ?>
                            <div class="col-12">
                                <div class="datos_electricos">
                                    <h4 class="titulo">Datos el&eacute;ctricos</h4>
                                    <?= $producto->datos_electricos ?>
                                </div>
                            </div>
                        <?php } ?>
                        <?php if($producto->foto_circuito){ ?>
                            <div class="col-12">
                                <img src="{{asset(Storage::url($producto->foto_circuito))}}" class="img-thumbnail mt-4 mx-2" style="width:100%;">
                            </div>
                        <?php } ?>
                    </div>
                    
                </div>
                <?php if($producto->datos_tecnicos){ ?>
                    <div class="col-6">
                        <div class="datos_tecnicos">
                            <h4 class="titulo mb-3">Datos t&eacute;cnicos</h4>
                            <?= $producto->datos_tecnicos ?>
                        </div>
                    </div>
                <?php } ?>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    function obtenerProductosLocalStorage(){
        let productos;
        //Revisamos los valores de localstorage
        if(localStorage.getItem('productos')===null){
            productos=[]
        }else{
            productos=JSON.parse(localStorage.getItem('productos'));
        }
        return productos;
    }
    $(document).ready(function(){
        $('table').addClass('table').removeClass('table-bordered');
        $('.table').css('width', '100%');
        let prod = <?php echo $producto; ?>;
        let productos = obtenerProductosLocalStorage();
        $('button.presupuesto').click(function(){
            let cantidad_apariciones = 0;
            productos.forEach(function(producto,index){
                if(prod.id==producto.id){
                    cantidad_apariciones++;
                }
            });
            if(cantidad_apariciones == 0){
                productos.push(prod);
            }
            localStorage.setItem('productos', JSON.stringify(productos));
            window.location = '<?= route('presupuesto'); ?>';
        });
    });
</script>

@endsection
