@extends('layouts.app')

@section('content')
    <div class="section_general bg-plomo">
        {{-- CATALOGO 1 --}}
        <div class="section1n nosotros1">
            <div class="section1n-bg catalogo_banner">
                <div class="bgh text-white">
                    <h2 class="text-center">{{app()->getLocale() == 'es' ? 'Nuestros productos':'Our Products'}}</h2>
                    <p class="text-center">{{app()->getLocale() == 'es' ? 'Entregamos productos con los más altos estándares de calidad':'We deliver products with the highest quality standards'}}</p>
                </div>
            </div>
        </div>
        <div class="nosotros2 py-3">
            <h3 class="sec-h31 mb-0 text-center">{{app()->getLocale() == 'es' ? 'Bienvenidos':'Welcome'}} <span class="sec-span1">/ {{app()->getLocale() == 'es' ? 'Productos':'Products'}}</span></h3>
        </div>
        <hr class="my-0">

        {{-- DETALLE 1 --}}
        <div class="detalle1 container">
            <div class="row sec4displ justify-content-center mx-0">
                <div class="col-12 detalle1-2 d-md-none">
                    <h2 class="mb-0 py-4 px-3 text-center bg-white">{{app()->getLocale() == 'es' ? $producto->nombre_es:$producto->nombre_en}}</h2>
                </div>
                <div class="col-12 col-md-6 col-xl-5 sec4col1">
                    <div class="sec4-pd">
                        <div class="sec4-pd-ti p-3">
                            <div id="carouselDetalle" class="carousel slide" data-ride="carousel">
                                <div class="carousel-inner">
                                    <div class="carousel-item active">
                                        <img src="{{asset('img/productosWeb/'.$producto->imagen1)}}" class="img-fluid">
                                    </div>
                                    @if($producto->imagen2)
                                    <div class="carousel-item">
                                        <img src="{{asset('img/productosWeb/'.$producto->imagen2)}}" class="img-fluid">
                                    </div>
                                    @endif
                                    @if($producto->imagen3)
                                    <div class="carousel-item">
                                        <img src="{{asset('img/productosWeb/'.$producto->imagen3)}}" class="img-fluid">
                                    </div>
                                    @endif
                                </div>
                                <a class="carousel-control-prev" href="#carouselDetalle" 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="#carouselDetalle" 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>
                </div>
                <div class="col-12 col-md-6 col-xl-5 detalle1-2">
                    <div class="sec4-pd2">
                        <div class="titl d-none d-md-block">
                            <h2 class="mb-5">{{app()->getLocale() == 'es' ? $producto->nombre_es:$producto->nombre_en}}</h2>
                            {{-- <h3 class="mb-5">500Gr</h3> --}}
                        </div>
                        <div class="text-detalle">
                            {!! app()->getLocale() == 'es' ? $producto->descripcion_es:$producto->descripcion_en !!}
                        </div>
                    </div>
                    <div class="text-right pt-4">
                        <a href="{{url('catalogo')}}" class="btn">
                            <img src="{{asset('img/catalogo/icon_back.svg')}}">
                            {{app()->getLocale() == 'es' ? 'Regresar':'Back'}}
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection