@extends('layouts.guest.general')

{{-- @section('title', 'Página de Inicio') --}}

@section('preloader')
            <!-- Preloader -->
            <div class="loader-wrap">
                <div class="preloader">
                    <div class="preloader-close">x</div>
                    <div id="handle-preloader" class="handle-preloader">
                        <div class="animation-preloader">
                            <div class="spinner"></div>
                            <div class="txt-loading">
                                <span data-text-preloader="I" class="letters-loading">
                                    I
                                </span>
                                <span data-text-preloader="T" class="letters-loading">
                                    T
                                </span>
                                <span data-text-preloader="G" class="letters-loading pr-3">
                                    G
                                </span>
                                <span data-text-preloader="G" class="letters-loading">
                                    G
                                </span>
                                <span data-text-preloader="R" class="letters-loading">
                                    R
                                </span>
                                <span data-text-preloader="O" class="letters-loading">
                                    O
                                </span>
                                <span data-text-preloader="U" class="letters-loading">
                                    U
                                </span><span data-text-preloader="P" class="letters-loading">
                                    P
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Preloader End -->
@endsection


@section('main_content')
    <!-- Vertical Lines Start -->
    <div class="vertical-lines-wrapper">
        <div class="vertical-lines">
            <div class="vertical-effect"></div>
            <div class="vertical-effect"></div>
            <div class="vertical-effect"></div>
            <div class="vertical-effect"></div>
            <div class="vertical-effect"></div>
            <div class="vertical-effect"></div>
        </div>
    </div>
    <!-- End Vertical Lines Start -->
    <!-- Main Slider Section -->
    <section class="main-slider">
        <h1 class="d-none">ITG Group - Weaving success together</h1>
        <div class="main-slider-carousel owl-theme owl-carousel">
            @foreach ($util->sliderHome as $slider)
                <div class="slide">
                    <div class="pattern-layer" style="background-image:url({{ asset($slider->img) }} )"></div>
                    <div class="pattern-layer-two"
                        style="background-image:url( {{ asset('images/resource/home-slider/pattern-2.png') }} )">
                    </div>
                    <div class="auto-container">
                        <!-- Content Column -->
                        <div class="content-column">
                            <div class="inner-column">
                                <h2 class="text-uppercase text-white">{{ __($slider->title1) }}<span
                                        style="color: var(--color-jet-stream)"> {{ __($slider->title2) }}</span> </h2>
                                <div class="text">
                                    <p class="h4"> {!! __($slider->text1)  !!} </p>
                                </div>
                                <div class="button-box">
                                    <a class="btn-style-one theme-btn" href="{{ route('about.index') }}"><span
                                            class="txt">{{ __('messages.who-whe-are') }} <i
                                                class="arrow fa fa-angle-right"></i></span></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </section>
    <!-- End Main Slider Section -->

    <!-- Service Section -->
    <section class="service-section">
        <div class="auto-container">
            <div class="inner-container">
                <div class="row clearfix">

                    <!-- Service Block -->
                    <div class="service-block col-lg-4 col-md-6 col-sm-12">
                        <div class="inner-box wow fadeInLeft" data-wow-delay="0ms" data-wow-duration="1500ms">
                            <div class="shape-one" style="background-image:url(images/icons/shape-1.png)"></div>
                            <div class="shape-two" style="background-image:url(images/icons/shape-2.png)"></div>
                            <div class="image-layer" style="background-image:url(images/resource/service.jpg)"></div>
                            <div class="icon">
                                <img src="/images/icons/icon-product-textil.png" alt="Image product textile">
                            </div>
                            <h3><a href="javascript:void(0);">{{ __('messages.txt-title-card1') }} </a></h3>
                            <a class="read-more" href="{{ route('products.index') }}"">{{ __('messages.btn-card1') }}
                                <span class="flaticon-right-arrow"></span></a>
                        </div>
                    </div>

                    <!-- Service Block -->
                    <div class="service-block col-lg-4 col-md-6 col-sm-12">
                        <div class="inner-box wow fadeInUp" data-wow-delay="0ms" data-wow-duration="1500ms">
                            <div class="shape-one" style="background-image:url(images/icons/shape-1.png)"></div>
                            <div class="shape-two" style="background-image:url(images/icons/shape-2.png)"></div>
                            <div class="image-layer" style="background-image:url(images/resource/service.jpg)"></div>
                            <div class="icon">
                                <img src="/images/icons/icon-maquina.png" alt="Image product machinery">
                            </div>
                            <h3><a href="javascript:void(0);">{{ __('messages.txt-title-card2') }} </a></h3>
                            <a class="read-more"
                                href="{{ route('machinery.new-machinery') }}">{{ __('messages.btn-card1') }} <span
                                    class="flaticon-right-arrow"></span></a>
                        </div>
                    </div>

                    <!-- Service Block -->
                    <div class="service-block col-lg-4 col-md-6 col-sm-12">
                        <div class="inner-box wow fadeInRight" data-wow-delay="0ms" data-wow-duration="1500ms">
                            <div class="shape-one" style="background-image:url(images/icons/shape-1.png)"></div>
                            <div class="shape-two" style="background-image:url(images/icons/shape-2.png)"></div>
                            <div class="image-layer" style="background-image:url(images/resource/service.jpg)"></div>
                            <div class="icon">
                                <img src="/images/icons/icon-hilo.png" alt="Image product yarn">
                            </div>
                            <h3><a href="javascript:void(0);">{{ __('messages.txt-title-card3') }} </a></h3>
                            <a class="read-more"
                                href="{{ route('products.sector', 'yarn') }}">{{ __('messages.btn-card1') }}
                                <span class="flaticon-right-arrow"></span></a>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </section>
    <!-- End Service Section -->

    <!-- About Section -->
    <section class="about-section">
        <div class="auto-container">
            <div class="row clearfix">

                <!-- Content Column -->
                <div class="content-column col-lg-7 col-md-12 col-sm-12">
                    <div class="inner-column">
                        <div class="sec-title">
                            <div class="big-text">{{ __('messages.about-us') }} </div>
                            <div class="title color-green2">{{ __('messages.about-company') }} </div>
                            <h2>{{ __('messages.division-argentina') }} </h2>
                            <div class="text"> {!! nl2br(__('messages.div-argentina-home-about-text-description')) !!} <br> <br> <span
                                    class="font-weight-bold">{{ __('messages.div-argentina-home-about-text-footer') }}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Image Column -->
                <div class="image-column col-lg-5 col-md-12 col-sm-12">
                    <div class="inner-column">
                        <!-- Counter Box -->
                        <div class="counter-box">
                            <div class="row clearfix">
                                <!-- Counter Column -->
                                <div class="counter-column col-md-12 col-sm-12">
                                    <h2>"{{ __('messages.div-argentina-home-about-text-green') }}"</h2>
                                </div>
                            </div>
                        </div>
                        <div class="image">
                            <img src="{{ asset('images/argentina/home/Imagenes-Fotos-20.jpg') }}" alt="Image about us" />
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>
    <!-- End About Section -->

    <!-- PARTNETS-->
    <section class="service-section-two">
        {{-- <div class="image-layer" style="background-image:url(images/background/1.jpg)"></div> --}}
        <div class="pattern-layer-one" style="background-image:url(images/background/pattern-1.png)"></div>
        <div class="pattern-layer-two" style="background-image:url(images/background/pattern-2.png)"></div>
        <div class="pattern-layer-three" style="background-image:url(images/background/pattern-3.png)"></div>
        <div class="auto-container">
            <div class="centered">
                <h2 class="title text-title2 color-yellow1  text-uppercase py-3">
                    {{ __('messages.our-partner') }}
                </h2>
                <div class="d-flex justify-content-center">
                    <h3 class="text-white w-50  h4 font-weight-bold text-center">{{ __('messages.partner-text-home') }}
                    </h3>
                </div>
            </div>
            <div class="three-item-carousel owl-carousel owl-theme">
                @include('components.partners-home')
            </div>
        </div>
    </section>
    <!-- End Service Section -->

    @include('components.testimonials')

    <!-- OUR PRODUCTS-->
    <section class="project-section">
        <div class="auto-container aut-container2">

            <!--Product Tabs-->
            <div class="prod-tabs tabs-box">
                {{-- <div class="gear-pattern-layer" style="background-image:url(images/background/pattern-4.png)"></div> --}}
                <!-- Tab Btns -->
                <div class="btns-outer">
                    <div class="btns-pattern-layer" style="background-image:url(images/background/tela.png)"></div>
                    <div class="title-box">
                        <h2 class="text-uppercase color-yellow1">{{ __('messages.our-products') }} </h2>
                    </div>
                    <ul class="tab-btns tab-buttons clearfix">
                        <li data-tab="#prod-weaving" class="tab-btn active-btn">{{ __('messages.weaving') }} </li>
                        <li data-tab="#prod-knitting" class="tab-btn">{{ __('messages.knitting') }} </li>
                        <li data-tab="#prod-braiding" class="tab-btn">{{ __('messages.braiding') }} </li>
                        <li data-tab="#prod-yarn" class="tab-btn">{{ __('messages.yarn') }} </li>
                        <li data-tab="#prod-machinery" class="tab-btn">{{ __('messages.machinery') }} </li>
                    </ul>
                </div>

                <!--Tabs Container-->
                <div class="tabs-content">

                    <!-- Tab  -->
                    @foreach ($util->productsHome as $product)
                        <div class="tab{{ $product->active ? ' active-tab' : '' }}" id="{{ $product->id }}">
                            <div class="image">
                                <img src="{{ $product->img }}" alt="product image" />
                                <div class="content">
                                    <a class="arrow flaticon-right-arrow" href="{{ $product->url }}"></a>
                                </div>
                            </div>
                        </div>
                    @endforeach




                </div>
            </div>

        </div>
    </section>
    <!-- End Project Section -->

    {{-- SECTION BANNER --}}
    <div class="container-fluid text-white section-banner-home"
        style="background-image: url('images/argentina/home/Ofertas Especiales.png'); background-size: cover;  background-position: center;">
        <div class="row justify-content-center">
            <div class="col-md-8 text-center">
                <h3 class="text-uppercase mt-3 text-white text-uppercase">
                    {{ __('messages.div-argentina-section-special-description') }} : </h3>
                <br>
                <hp class="text-white " style="font-size: 24px;">{!! nl2br(__('messages.div-argentina-section-special-text')) !!} </hp>
                <br>
                <h4 class="text-uppercase mt-3 text-white text-uppercase font-weight-bold">
                    {{ __('messages.div-argentina-section-special-text2') }} : </h4>
                <br>
                <h5 class="text-white font-weight-bold">{{ __('messages.div-argentina-section-special-text3') }} </h5>

                <div class="text-center mt-5 mb-5">
                    <div class="row align-items-center justify-content-center">
                        <div class="col-6 col-sm-3">
                            <img src="{{ asset('images/argentina/home/Titan 1.png') }}" alt="Titan Textile Machines"
                                class="img-fluid">
                        </div>
                        <div class="col-6 col-sm-3">
                            <img src="{{ asset('images/argentina/home/Molyh 1.png') }}" alt="Vanguard Molyguard"
                                class="img-fluid">
                        </div>
                        <div class="col-6 col-sm-3">
                            <img src="{{ asset('images/argentina/home/Iro-Roj 1.png') }}" alt="Compagnia Lubrificanti"
                                class="img-fluid">
                        </div>
                    </div>
                </div>
                <a href="#" class="btn btn-success mt-3">{{ __('messages.contacts-us') }} > </a>
            </div>

        </div>
    </div>





    <!-- End Products Section -->
    <!-- OUR NATIONAL DIVISIONS  -->
    <section class="team-section" id="our-nat-division">
        <div class="auto-container">
            <div class="sec-title">
                <h2 class="text-uppercase">{{ __('messages.contacts-us') }} </h2>
            </div>
            <div class="col 12">
                <div class="row">
                    <div class="col-6 col-md-3">
                        <div class="team-block">
                            <div class="inner-box">
                                <div class="image">
                                    <a href="{{ route('contact.index') }}"><img
                                            src="{{ asset('/images/argentina/home/Argentina-Quilmes.jpg') }}" alt="Division image" /></a>
                                </div>
                                <div class="lower-content">
                                    <span class="gear-icon"></span>
                                    <h3 class="_h4"><a class="text-dark" href="{{ $util->divisionsHome->argentina->url }}">{{ __('messages.division-argentina') }}
                                        </a>
                                    </h3>
                                    <div class="designation">{{ __('Quilmes') }} </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-6 col-md-3">
                        <div class="team-block">
                            <div class="inner-box">
                                <div class="image">
                                    <a href="{{ route('contact.index') }}"><img
                                            src="{{ asset('images/argentina/home/Argentina-Lujan.jpg') }}"
                                            alt="Division image" /></a>
                                </div>
                                <div class="lower-content">
                                    <span class="gear-icon"></span>
                                    <h3 class="_h4"><a class="text-dark" href="{{ $util->divisionsHome->argentina->url }}">{{ __('messages.division-argentina') }}
                                        </a>
                                    </h3>
                                    <div class="designation">{{ __('Lujan') }} </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </section>
    <!-- End OUR NATIONAL DIVISIONS -->

    <!-- News Section -->
    @include('components.blogs-carousel')


    <!-- End News Section -->
@endsection

@push('styles')
    <style>
        .icon-partner {
            object-fit: contain;
            margin: auto;
            width: 75px !important;
            height: 48px !important;
        }

        .owl-carousel .owl-item img {
            position: relative;
            /* top: 35px; */
        }

        .text-truncate-multiline {
            color: white;
            font-size: 20px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
            -webkit-line-clamp: 2;
            /* Número de líneas que deseas mostrar */
            max-height: calc(1.2em * 2);
            /* Altura máxima basada en el número de líneas y la altura de línea */
            line-height: 1.2em;
            position: relative;
            /* Necesario para el pseudo-elemento */
        }

        .text-truncate-multiline::after {
            content: '...';
            position: absolute;
            padding-left: 2px;
        }

        .section-banner-home {
            position: relative;
            z-index: 2;
            padding-top: 150px;
            padding-bottom: 150px;
        }
    </style>
@endpush