@extends('layouts.app')

@section('content')
    <div class="section_general bg-plomo">
        {{-- CATALOGO 1 --}}
        <div class="section1n nosotros1">
            <div class="section1n-bg catalogo_banner animated fadeIn">
                <div class="bgh text-white animated fadeInLeft">
                    <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 animated fadeInUp">
            <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">
        
        {{-- CATALOGO 2 --}}
        <div class="section3p catalogo2">
            <div class="sec3p bg-white">
                <div class="container">
                    <div class="row mx-0 sec3-btn animated fadeInLeft">
                        <div class="col-12 col-md-3">
                            <a href="{{url('catalogo')}}" 
                                class="btn btn-outline-primary btn-a-sec3p w-100 {{($categoriaActive == 0) ? 'active':''}}"
                            >{{app()->getLocale() == 'es' ? 'Todo':'All'}}</a>
                        </div>
                        @foreach($categorias as $categoria)
                        <div class="col-12 col-md-3">
                            <a href="{{url('catalogo?cat='.$categoria->id)}}" 
                                class="btn btn-outline-primary btn-a-sec3p w-100 {{($categoria->id == $categoriaActive)?'active':''}}"
                            >{{app()->getLocale() == 'es' ? $categoria->nombre_es:$categoria->nombre_en}}</a>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
        
        {{-- CATALOGO 3 --}}
        <div class="section4p animated fadeInUp">
            <div class="col-12 col-md-10 col-lg-9 mx-auto">
                <div class="row mx-0 px-0">
                    @foreach($productos as $producto)
                    <div class="col-12 col-md-6">
                        <a href="{{url('detalle?prod='.$producto->id)}}" class="d-block producto-item">
                            <div class="sec4-prod mb-4">
                                <div class="producto-img" style="background-image: url({{asset('img/productosWeb/'.$producto->imagen1)}})"></div>
                                <div class="prod-tit">
                                    <h2>{{app()->getLocale() == 'es' ? $producto->nombre_es:$producto->nombre_en}}</h2>
                                    <span>{{app()->getLocale() == 'es' ? $producto->categoria->nombre_es:$producto->categoria->nombre_en}}</span>
                                </div>
                            </div>
                        </a>
                    </div>
                    @endforeach
                </div>
            </div>
            <div class="container mt-5">
                <div class="col-12 mt-5 catalogo-pagination">
                    {{ $productos->withQueryString()->links() }}
                </div>
            </div>
        </div>
    
        {{-- CATALOGO 4 --}}
        <div class="home7 bg-white">
            <div class="row mx-0 px-3 px-lg-5 align-items-md-center">
                <div class="col-12 col-md-4 col-lg-3 col-xl-4 scrollflow -slide-right">
                    <h3>{{app()->getLocale() == 'es' ? 'Aliados estratégicos':'Strategic allies'}}</h3>
                </div>
                <div class="col-12 col-md-8 col-lg-9 col-xl-8 d-md-flex align-items-center scrollflow -slide-left">
                    <div class="p-4 p-md-2 p-xl-3 text-center">
                        <img src="{{asset('img/inicio/aliado1-.png')}}" 
                        onmouseover="this.src='{{asset('img/inicio/aliado1.png')}}'" 
                        onmouseout="this.src='{{asset('img/inicio/aliado1-.png')}}'" 
                        class="img-fluid">
                    </div>
                    <div class="p-4 p-md-2 p-xl-3 text-center">
                        <img src="{{asset('img/inicio/aliado2-.png')}}"
                        onmouseover="this.src='{{asset('img/inicio/aliado2.png')}}'" 
                        onmouseout="this.src='{{asset('img/inicio/aliado2-.png')}}'"
                        class="img-fluid">
                    </div>
                    <div class="p-4 p-md-2 p-xl-3 text-center">
                        <img src="{{asset('img/inicio/aliado3-.png')}}" 
                        onmouseover="this.src='{{asset('img/inicio/aliado3.png')}}'" 
                        onmouseout="this.src='{{asset('img/inicio/aliado3-.png')}}'"
                        class="img-fluid">
                    </div>
                    <div class="p-4 p-md-2 p-xl-3 text-center">
                        <img src="{{asset('img/inicio/aliado4-.png')}}"
                        onmouseover="this.src='{{asset('img/inicio/aliado4.png')}}'" 
                        onmouseout="this.src='{{asset('img/inicio/aliado4-.png')}}'"
                        class="img-fluid">
                    </div>
                    <div class="p-4 p-md-2 p-xl-3 text-center">
                        <img src="{{asset('img/inicio/aliado5-.png')}}"
                        onmouseover="this.src='{{asset('img/inicio/aliado5.png')}}'" 
                        onmouseout="this.src='{{asset('img/inicio/aliado5-.png')}}'" 
                        class="img-fluid">
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection