@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 $key => $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">
                            @if ($key == 'slider3')
                                <div class="inner-column">
                                    <div class="text">
                                        <p class="h4"> {!! __($slider->title1) !!} </p>
                                    </div>
                                    <h2 class="text-uppercase text-white">{{ __($slider->title2) }} </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>
                            @else
                                <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>
                            @endif
                        </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.about-company-subtitle') }} </h2>
                            <div class="text">{{ __('messages.about-company-text') }} <br> <br> <span
                                    class="font-weight-bold">{{ __('messages.about-company-text2') }} </span></div>
                        </div>

                        <!-- Lower Box -->
                        <div class="lower-box clearfix">
                            <div class="button-box">
                                <a class="btn-style-one theme-btn bg-green3"
                                    href="{{ route('about.index') }}#people"><span
                                        class="txt">{{ __('messages.our-people') }} <i
                                            class="arrow fa fa-angle-right"></i></span></a>
                            </div>
                            <div class="phone-box">
                            </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-lg-6 col-md-6 col-sm-12">
                                    <h2><span class="odometer" data-count="7"></span>
                                        {{ __('messages.text-home-about-title1') }}
                                    </h2>
                                    <div class="counter-text">{{ __('messages.text-home-about-description1') }}</div>
                                </div>
                                <!-- Counter Column -->
                                <div class="counter-column col-lg-6 col-md-6 col-sm-12">
                                    <h2><span class="odometer" data-count="50"></span> +
                                        {{ __('messages.text-home-about-title2') }}
                                    </h2>
                                    <div class="counter-text">{{ __('messages.text-home-about-description2') }}</div>
                                </div>
                            </div>
                        </div>
                        <div class="image">
                            <img src="{{ asset('images/resource/about.png') }}" 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>

    @include('components.testimonials')


    <!-- End Project Section -->

    <!-- Products Section -->
    <section class="products-section">
        <div class="pattern-layer" style="background-image:url(images/background/pattern-5.png)"></div>
        <div class="pattern-layer-two" style="background-image:url(images/background/pattern-9.png)"></div>
        <div class="pattern-layer-three" style="background-image:url(images/background/pattern-7.png)"></div>
        <div class="pattern-layer-four" style="background-image:url(images/background/pattern-8.png)"></div>
        <div class="pattern-layer-five" style="background-image:url(images/background/pattern-11.png)"></div>
        <div class="auto-container">

            {{-- POPULAR PRODUCTS --}}
            <div class="centered">
                <h2 class="title text-title2 text-uppercase color-blue1 py-3 ">{{ __('messages.popular-product') }} </h2>
                <div class="px-5 d-flex justify-content-center">
                    <h3 class="text-white w-50  h4 font-weight-bold text-center">
                        {{ __('messages.popuplar-product-subtitle') }} </h3>
                </div>
            </div>
            <div class="products-carousel owl-carousel owl-theme">
                {{-- carousel --}}
                @foreach ($util->popularProductsHome as $key => $popularProduct)
                    <!-- Product Block -->
                    <div class="product-block">
                        <div class="inner-box">
                            <div class="color-layer"></div>
                            <div class="image-box">
                                <div class="image">
                                    <a href="{{ $popularProduct->url }}"><img src="{{ $popularProduct->img }}"
                                            alt="Popular product image" /></a>
                                </div>
                            </div>
                            <div class="lower-box clearfix mt-4 m-0">
                                <h4><a class="color-black1 text-capitalize"
                                        href="{{ $popularProduct->url }}">{{ __('messages.products-' . $key) }} </h4>
                            </div>
                            <div class="btn-box text-center">
                                <a class="read-more bg-green3 text-uppercase"
                                    href="{{ $popularProduct->url }}">{{ __('messages.order-now') }} <span
                                        class="flaticon-next-3"></span></a>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
            {{-- END POPULAR PRODUCTS --}}

            {{-- TEXTILE MACHINERY --}}
            <div class="sec-title centered mt-5">
                <div class="title text-title2 text-uppercase color-green3">{{ __('messages.machinery-title-home') }}
                </div>
                <div class="px-5 d-flex justify-content-center">
                    <h4 class="text-white w-50  h4 font-weight-bold text-center">
                        {{ __('messages.machinery-subtitle-home') }} </h4>
                </div>
            </div>
            <div class="products-carousel owl-carousel owl-theme">
                {{-- carousel --}}
                @foreach ($util->machineryHome as $key => $machinery)
                    <!-- Product Block -->
                    <div class="product-block">
                        <div class="inner-box">
                            <div class="color-layer"></div>
                            <div class="image-box">
                                <div class="image">
                                    <a href="{{ $machinery->url }}"><img src="{{ $machinery->img }} "
                                            alt="Machinery image" /></a>
                                </div>
                            </div>
                            <div class="lower-box clearfix mt-4 m-0">
                                <h4><a class="color-black1 text-capitalize"
                                        href="{{ $machinery->url }}">{{ __('messages.machinery-' . $key) }} </h3>
                            </div>
                            <div class="btn-box text-center">
                                <a class="read-more bg-green3"
                                    href="{{ $machinery->url }}">{{ __('messages.order-now') }}<span
                                        class="flaticon-next-3"></span></a>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
            {{-- END TEXTILE MACHINERY --}}
        </div>
    </section>
    <!-- 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.our-nat-division') }} </h2>
            </div>
            <div class="team-carousel owl-carousel owl-theme">

                @foreach ($util->divisionsHome as $key => $divisions)
                    <!-- Team Block -->
                    <div class="team-block">
                        <div class="inner-box">
                            <div class="image">
                                <a href="{{ route('contact.index') }}"><img src="{{ $divisions->img }} "
                                        alt="Division image" /></a>
                            </div>
                            <div class="lower-content">
                                <span class="gear-icon"></span>
                                <h3 class="_h4"><a class="text-dark" href="{{ $divisions->url }}">{{ __('messages.division-' . $key) }} </a>
                                </h3>
                                <div class="designation">{{ __('messages.division') }} </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </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;
        }
    </style>
@endpush