@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-colombia') }} </h2>
                            <div class="text"> {!! nl2br(__('messages.div-colombia-home-about-text-description')) !!} <br> <br> <span
                                    class="font-weight-bold">{{ __('messages.div-colombia-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-colombia-home-about-text-green') }}"</h2>
                                </div>
                            </div>
                        </div>
                        <div class="image">
                            <img src="{{ asset('images/colombia/home/Imagenes-Fotos-21-v2.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 -->

    <!-- 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>



    <!-- 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/colombia/home/ITG Colombia.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->colombia->url }}">{{ __('messages.division-colombia') }}
                                        </a>
                                    </h3>
                                    {{-- <div class="designation">{{ __('Puebla') }} </div> --}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

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

    @include('components.testimonials')



    <!-- 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;
        }
    </style>
@endpush