@extends('motomel.plantilla')
@section('breadcrumb')
    <div class="row">
        <div class="col-12">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="/inicio">Inicio</a></li>
                @if(Session::get('vista_menu_predeterminado') == "grilla")
                    <li class="breadcrumb-item"><a href="/nuevo-pedido">Cat&aacute;logo</a></li>
                @else
                    <li class="breadcrumb-item"><a href="/catalogo-grilla">Cat&aacute;logo</a></li>
                @endif
                <li class="breadcrumb-item active">Producto</li>
            </ol>
        </div>
    </div>
@endsection
@section('contenido')
<style>

@media (min-width: 992px) and (max-width: 1199px) {

    .section-1-box .section-1-box-icon { width: 60px; height: 60px; font-size: 32px; line-height: 60px; }
    
}

@media (min-width: 768px) and (max-width: 991px) {
    
    .navbar-expand-md .navbar-nav .nav-link { padding-left: 0.6rem; padding-right: 0.6rem; }

    .section-description p { padding: 0; }
    
    .section-1-box .section-1-box-icon { width: 50px; height: 50px; font-size: 26px; line-height: 50px; }
    
    .section-3-box .section-3-box-icon { width: 50px; height: 50px; font-size: 26px; line-height: 50px; }

}

@media (max-width: 767px) {

    .navbar-dark .navbar-toggler { border-color: #444; }
    .navbar-dark .navbar-toggler:focus { background: #333; outline: 0; }
    .navbar-expand-md .navbar-nav .nav-link { padding-top: 0.3rem; padding-bottom: 0.3rem; }
    
    .section-description p { padding: 0; }
    
    .section-1-container { padding-bottom: 60px; }
    .section-1-box { text-align: center; }
    .section-1-box h3 { margin-top: 20px; padding-top: 10px; }
    
    .section-3-box { text-align: center; }
    .section-3-box h3 { margin-top: 20px; padding-top: 10px; }
    
}

@media (max-width: 415px) {
    
    h1, h2 { font-size: 32px; }

}


/* Retina-ize images/icons */

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) {
    
    /* logo */
    .navbar-brand {
        background-image: url(../img/logo@2x.png) !important; background-repeat: no-repeat !important; background-size: 123px 34px !important;
    }
    
}
/*

CC 2.0 License Iatek LLC 2018
Attribution required

*/


@media (min-width: 768px) and (max-width: 991px) {
  /* Show 4th slide on md  if col-md-4*/
    .carousel-inner .active.col-md-4.carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: absolute;
        top: 0;
        right: -33.3333%;  /*change this with javascript in the future*/
        z-index: -1;
        display: block;
        visibility: visible;
    }

}

@media (min-width: 576px) and (max-width: 768px) {
  /* Show 3rd slide on sm  if col-sm-6*/
    .carousel-inner .active.col-sm-6.carousel-item + .carousel-item + .carousel-item {
        position: absolute;
        top: 0;
        right: -50%;  /*change this with javascript in the future*/
        z-index: -1;
        display: block;
        visibility: visible;
    }

}
@media (min-width: 576px) {
    
    .carousel-item {
        margin-right: 0;
    }

    /* show 2 items */
    .carousel-inner .active + .carousel-item {
        display: block;
    }
    
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item {
        transition: none;
    }

    .carousel-inner .carousel-item-next {
      position: relative;
      transform: translate3d(0, 0, 0);
    }
    
    /* left or forward direction */
    .active.carousel-item-left + .carousel-item-next.carousel-item-left,
    .carousel-item-next.carousel-item-left + .carousel-item,
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    } 
    
    /* farthest right hidden item must be abso position for animations */
    .carousel-inner .carousel-item-prev.carousel-item-right {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        display: block;
        visibility: visible;
    }
    
    /* right or prev direction */
    .active.carousel-item-right + .carousel-item-prev.carousel-item-right,
    .carousel-item-prev.carousel-item-right + .carousel-item,
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
    }

}

/*MD*/
@media (min-width: 768px) {

    /* show 3rd of 3 item slide */
  .carousel-inner .active + .carousel-item + .carousel-item {
        display: block;
    }
 
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item {
        transition: none;
    }
  
    
    .carousel-inner .carousel-item-next {
      position: relative;
      transform: translate3d(0, 0, 0);
    }
    
    
    /* left or forward direction */
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
    
    /* right or prev direction */
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
    }

}


/*LG */
@media (min-width: 991px) {

    /* show 4th item */
    .carousel-inner .active + .carousel-item + .carousel-item + .carousel-item {
        display: block;
    }
    
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item + .carousel-item {
        transition: none;
    }
    
    /* Show 5th slide on lg if col-lg-3 */
    .carousel-inner .active.col-lg-3.carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: absolute;
        top: 0;
        right: -25%;  /*change this with javascript in the future*/
        z-index: -1;
        display: block;
        visibility: visible;
    }
    
    /* left or forward direction */
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
    
    /* right or prev direction //t - previous slide direction last item animation fix */
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
    }

}
</style>
<form id="form1" method="post">
<input type="hidden" name="_token" value="{{ csrf_token() }}"></input>
    <div class="row px-1">
        <div class="col-12">
            <h2>Producto</h2>
        </div>
    </div>
    @if(isset($msg) && $msg)
    <div class="row">
        <div class="col-12">
            <div class="alert alert-success" role="alert"> 
            {{$msg["MSG"]}}
            </div>
        </div>
    </div>
    @endif 
    @if($producto)
        <div class="row m-1 p-2 shadow" id="bloqueDescripcion">
            <div class="col-sm-6 col-12 " id="colizquierda">
                <div class="row ">
                @if(count($producto->imagen) == 1)
                    <div class="col-12 p-4">
                        <img id="imagenPrincipalDescripcion" class="img-fluid" src="/motomel/images/{{$array_producto_colores[0]->imagen[0]}}">
                    </div>
                @else
                    <div class="col-12 p-4">
                        <img id="imagenPrincipalDescripcion" class="img-fluid" src="/motomel/images/{{$array_producto_colores[0]->imagen[0]}}">
                    </div>
                    <div class="col-12 pl-4">
                        <div class="row">
                            @if(isset($array_producto_colores) && $array_producto_colores)
                                @for($i=0;$i < count($array_producto_colores); $i++)
                                    <div class="col-sm-2 col-4 my-1 linkFotoCatalogo">
                                        <img class="img-fluid" id="imagen_{{$i}}" onclick="$('#imagenPrincipalDescripcion').prop('src','/motomel/images/{{$array_producto_colores[$i]->imagen[0]}}');" src="/motomel/images/{{$array_producto_colores[$i]->imagen[0]}}">             
                                    </div>
                                @endfor
                            @endif
                        </div>
                    </div>
                @endif
            </div>
        </div>
            <div class="col-sm-6 col-12 ">
                <div class="row ">
                    <div class="col-12 pt-3">
                        <h1>{{$producto->nombre}}</h1>
                        <hr>
                    </div> 
                </div>
                <!-- tipo -->
                <div class="row">
                    @if(Session::get('grupo_id') != GRUPO_SUZUKI_REPUESTOS)
                        <div class="col-6 pt-2 text-left">
                            @if(Session::get('grupo_id') == GRUPO_BICICLETA)
                                <h3>Talle:</h3>
                            @else
                                <h3>Tipo:</h3> 
                            @endif
                        </div>
                        <div class="col-6 text-right">
                            <select class="form-control" id="lstTipo" name="lstTipo" onchange="fCambiarTipo()">
                                @if(isset($array_talles_tipos) && $array_talles_tipos)
                                    @for($i = 0; $i < count($array_talles_tipos); $i++)
                                        @if($array_talles_tipos[$i]->idtipo == $_REQUEST["tipo"])
                                            <option selected value="{{$array_talles_tipos[$i]->idtipo}}">{{$array_talles_tipos[$i]->nombre}}</option>
                                        @else
                                            <option value="{{$array_talles_tipos[$i]->idtipo}}">{{$array_talles_tipos[$i]->nombre}}</option>
                                        @endif
                                    @endfor
                                @endif
                            <select>
                        </div>
                    @endif
                </div>
                <!--cantidad color -->
                <div class="row py-4 mt-2">
                    @if(isset($array_producto_colores) && $array_producto_colores)
                        @foreach($array_producto_colores as $color)
                            <div class="col-6 mb-1">
                                @if(isset($color->cod_colorhexa) && $color->cod_colorhexa)
                                    <a href="/catalogo/{{$color->idproducto}}?tipo={{$color->fk_idtipo}}"><span style="background-image: linear-gradient({{$color->cod_colorhexa}});" class="span-color mx-2"></span></a>
                                @endif
                                <input type="hidden" id="cantidadEnStock_{{$color->idproducto}}" value="{{$color->cantidad}}">
                                <input class="form-control" type="number" id="txtCantidad_{{$color->idproducto}}" onchange="fVerifivarCantidad({{$color->idproducto}})" name="txtCantidad[{{$color->idproducto}}]" value="0" disabled>
                                <span id="spanStock_{{$color->idproducto}}" style="color:red;"></span>
                                @if($color->stockcritico < $color->cantidad)
                                    <span class="pl-1 descripcionStock" id="spanStockDescripcion">Hay stock</span>
                                @elseif($color->cantidad > 0 && $color->cantidad <= $color->stockcritico)
                                    <span class="pl-1 descripcionStock" id="spanStockDescripcion">Consultar stock mínimo</span>
                                @else
                                    <span class="pl-1 descripcionStock" id="spanStockDescripcion">Sin stock</span>
                                @endif
                            </div>
                        @endforeach
                    @endif
                </div>
                <div class="row rowSeparadora">
                    <!--Espacio en blanco-->
                </div>
                <div class="row rowBotonesDescripcion mb-3">
                    <div class="col-12 text-right mb-1">
                        <h2>${{ number_format($producto->importe,2,",",".") }}</h2>
                    </div>
                    <div class="col-6 text-left">
                        <a class="btn btn-catalogo " href="/nuevo-pedido">VOLVER AL CAT&Aacute;LAGO</a>
                    </div>
                    <div class="col-6 text-right">
                        <button type="submit" name="btnAgregarCarrito" id="btnAgregarCarrito" class="btn buttonCarrito" disabled>AÑADIR AL CARRITO</a>
                    </div>
                </div>
            </div>
        </div>
        <!-- hasta aca descripcion --> 
        <div class="row mx-2 mt-3">
            <div class="col-sm-6 col-12 mt-2">
                <div class="row mt-2">
                    <div class="col-12 my-1">
                        <h3>SOBRE EL PRODUCTO</h3>
                    </div>
                    <div class="col-12 p-2 mt-1">
                        <p>{{$producto->descripcion}}</p>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-12 mt-2">
                <div class="row mt-2" id="datos">
                    <div class="col-12 my-1">
                        <h3>FICHA T&Eacute;CNICA</h3>
                    </div>
                    <div class="col-6 my-3">
                        <div>
                            DATO 1
                        </div>
                    </div>
                    <div class="col-6 my-3">
                        <div>
                            Abcde
                        </div>
                    </div>
                    <div class="col-6 my-3">
                        <div>
                            DATO 2
                        </div>
                    </div>
                    <div class="col-6 my-3">
                        <div>
                            Abcde
                        </div>
                    </div>
                    <div class="col-6 my-3">
                        <div>
                            DATO 3
                        </div>
                    </div>
                    <div class="col-6 my-3">
                        <div>
                            Abcde
                        </div>
                    </div>
                    <div class="col-6 my-3">
                        <div>
                            DATO 4
                        </div>
                    </div>
                    <div class="col-6 my-3">
                        <div>
                            Abcde
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--
        <div class="row my-2 p-3" id="comboMotomel">
            <div class="col-12">
                <h3>¡LLEVALOS JUNTOS!</h3>
            </div>
            @if(count($producto->imagen) == 1)
                <div class="col-3 shadow bg-white text-center">
                    <img class="img-fluid text-left" src="/motomel/images/{{$producto->imagen[0]}}">
                </div>
            @else
                @for($i = 0; $i < (count($producto->imagen)-1); $i++)
                    <div class="col-3 shadow bg-white text-center">
                        <img class="img-fluid text-left" src="/motomel/images/{{$producto->imagen[$i]}}">
                    </div>
                @endfor
            @endif
            <div class="col-1 pt-5 mx-2">
                <i class="fa fa-plus" aria-hidden="true"></i>
            </div>
            <div class="col-3 shadow bg-white text-center">
                <img class="img-fluid text-center" src="/motomel/images/casco.jpg">
            </div>
            <div class="col-1 pt-5 mx-2">
                <i class="fa fa-plus" aria-hidden="true"></i>
            </div>
            <div class="col-3 shadow bg-white text-center">
                <img class="img-fluid text-right" src="/motomel/images/casco.jpg">
            </div>
            <div class="col-4 my-5">
                <h2>Producto t&iacute;tulo</h2>
                <p>$299</p>
            </div>
            <div class="col-4 my-5">
                <h2>Producto t&iacute;tulo</h2>
                <p>$299</p>
            </div>
            <div class="col-4 my-5">
                <h2>Producto t&iacute;tulo</h2>
                <p>$299</p>
            </div>
            <div class="col-12">
                <hr>
            </div>
            <div class="col-6 my-3 totalProducto text-left">
                <h2>Total</h2>
            </div>
            <div class="col-6 my-3 totalProducto text-right">
                <p>$1,299</p>
            </div>
            <div class="col-12 text-right my-2">
                <a href="/pedidos" class="btn text-right buttonCarrito" type="button">AÑADIR SELECCI&Oacute;N AL CARRITO</a>
            </div>
        </div>
        -->
         @if(isset($array_productos_relacionados) && count($array_productos_relacionados) > 0)
        <div class="row p-3">
            <div class="col-12">
                <h3>Productos sustitutos</h3>
            </div>
        </div> 
        <div class="top-content row p-3">
            <div class="container-fluid">
                <div id="carousel-moto" class="carousel slide" data-ride="carousel">
                    <div class="carousel-inner row" role="listbox" style="width:1200px;">
                            @for($i=0;$i < count($array_productos_relacionados); $i++)
                            <div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-3 active text-center" alt="{{$i}}">
                            <div id="productoMoto" class="mx-auto d-block shadow p-2 bg-white">
                                @if($array_productos_relacionados[$i]->stockcritico > 10)
                                    <div class="col-sm-6 haystock my-1" id="mensajeStock">HAY STOCK</div>
                                @elseif($array_productos_relacionados[$i]->stockcritico > 0 && $producto->stockcritico <= 10)
                                    <div class="col-sm-6 pocostock my-1" id="mensajeStock">CONSULTAR STOCK M&Iacute;NIMO</div>
                                @else
                                    <div class="col-sm-6 sinstock my-1" id="mensajeStock">SIN STOCK</div>
                                @endif
                                <div class="col-12 my-1 linkFotoCatalogo">
                                    <a href="https://motomel.depcsuite.com/catalogo/{{$array_productos_relacionados[$i]->idproducto}}" ><img class="img-fluid" src="/motomel/images/{{$array_productos_relacionados[$i]->imagen[0]}}"></a>
                                    <hr>
                                </div>
                                <div class="col-12 my-3">
                                    <a  href="https://motomel.depcsuite.com/catalogo/{{$producto->idproducto}}"><p><strong>{{$array_productos_relacionados[$i]->nombre}}</strong></p></a>
                                    <hr>
                                </div>
                                <div class="col-12 my-3">
                                    @if(Session::get('grupo_id') == GRUPO_SUZUKI_REPUESTOS)
                                        {{$array_productos_relacionados[$i]->modelo}}
                                    @else
                                        {{$array_productos_relacionados[$i]->nombre_tipo}}
                                    @endif
                                </div>
                                <div class="col-12 my-3">
                                    <h2>${{$array_productos_relacionados[$i]->importe}}</h2>
                                </div>
                                <div class="col-12 my-3">
                                    @if(Session::get('grupo_id') != GRUPO_SUZUKI_REPUESTOS)
                                        {{$array_productos_relacionados[$i]->nombre_tipo}}
                                    @endif
                                </div>
                                <div class="col-12 my-3">
                                    <button class="btn" onclick="fAgregarAlCarrito({{$array_productos_relacionados[$i]->idproducto}})">AÑADIR AL CARRITO</button>
                                </div>
                            </div>
                            </div>
                            @endfor
                    </div>
                    <a class="carousel-control-prev" href="#carousel-moto" role="button" data-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="carousel-control-next" href="#carousel-moto" role="button" data-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
            </div>
        </div>
    @endif
    @endif
    
 
</form>
<script>
    function fCambiarTipo(){
        idTipo = $("#lstTipo option:selected").val();
        location.href = "?tipo=" + idTipo;
    }
    function fVerifivarCantidad(idProducto){
        cantidad = parseInt($("#cantidadEnStock_" + idProducto).val());
        cantidadQuerida = $("#txtCantidad_" + idProducto).val();
        if(cantidad < cantidadQuerida){
            $("#spanStock_" + idProducto).html("Stock insuficiente");
            $("#btnAgregarCarrito").prop("disabled", true);
        }
        if(cantidad >= cantidadQuerida){
            $("#spanStock_" + idProducto).html("");
            $("#btnAgregarCarrito").prop("disabled", false);
        }
        if(cantidadQuerida <= 0){
            $("#btnAgregarCarrito").prop("disabled", true);
        }
        $.ajax({
            type: "GET",
            url: "{{ asset('/descripcion/verificarCupo') }}",
            data: { id:idProducto,
                    cantidadQuerida:cantidadQuerida },
            async: true,
            dataType: "json",
            success: function (data) {
                if (data.ESTADO != "success") {
                    $("#spanStock_"+idProducto).html(data.MSG);
                    $("#btnAgregarCarrito").prop("disabled", true);
                    $("#spanStockDescripcion").css("display","none");
                }
                else{
                    $("#spanStock_"+idProducto).html("");
                    $("#btnAgregarCarrito").prop("disabled", false);
                    $("#spanStockDescripcion").css("display","inline");
                }
            }
        });
    }
    function fCambiarFoto(nombreImagen){
        $("#imagenPrincipalDescripcion").prop("src",nombreImagen);
    } 
</script>
@endsection