@extends('layouts.front.front')

{{-- main content --}}
@section('content')
    <main id="home">

        <!-- Header -->
        @if ($banners->isNotEmpty())
            <section class="topbanner-carousel">
                <div id="banner-carousel" class="carousel slide" data-bs-ride="carousel">
                    <div class="carousel-indicators">
                        @foreach ($banners as $key => $banner)
                            <button type="button" data-bs-target="#banner-carousel" data-bs-slide-to="{{ $key }}"
                                @if ($key == 1) class="active"
                        aria-current="true" @endif
                                aria-label="Slide {{ $key }}"></button>
                        @endforeach
                    </div>

                    <div class="carousel-inner">
                        @foreach ($banners as $key => $banner)
                            <div class="carousel-item @if ($key == 0) active @endif"
                                style="background-image: url('{{ asset('storage/files/banner/' . $banner->banner) }}');"
                                data-bs-interval="25000">
                                <div class="container d-flex align-items-center">
                                    <div class="top-content text-sm-end text-center w-100">
                                        <h1 data-aos="fade-up" data-aos-delay="600">{{ $banner->title }}</h1>
                                        <h2 data-aos="fade-up" data-aos-delay="700">{{ $banner->sub_title }}</h2>
                                        <div data-aos="fade-up" data-aos-delay="1200">
                                            <a href="{{ route('about') }}" class="link-btn">Learn More</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    <div class="controls">
                        <button class="carousel-control-prev" type="button" data-bs-target="#banner-carousel"
                            data-bs-slide="prev">
                            <!--<img style="height: 40px; width: auto;" src="./assets/images/left.svg" alt="">-->
                            <span class="fa fa-angle-left"></span>
                        </button>
                        <button class="carousel-control-next" type="button" data-bs-target="#banner-carousel"
                            data-bs-slide="next">
                            <!--<img style="height: 40px; width: auto;" src="./assets/images/right.svg" alt="">-->
                            <span class="fa fa-angle-right"></span>
                        </button>
                    </div>
                </div>
            </section>
        @else
            <section class="topbanner-carousel">
                <div id="banner-carousel" class="carousel slide" data-bs-ride="carousel">
                    <div class="carousel-indicators">
                        <button type="button" data-bs-target="#banner-carousel" data-bs-slide-to="0" class="active"
                            aria-current="true" aria-label="Slide 1"></button>
                        <button type="button" data-bs-target="#banner-carousel" data-bs-slide-to="1"
                            aria-label="Slide 2"></button>
                        <button type="button" data-bs-target="#banner-carousel" data-bs-slide-to="2"
                            aria-label="Slide 3"></button>
                    </div>

                    <div class="carousel-inner">
                        <div class="carousel-item active"
                            style="background-image: url('./assets/images/page-banners/hero__banner__1.svg');"
                            data-bs-interval="25000">
                            <div class="container d-flex align-items-center">
                                <div class="top-content text-sm-end text-center w-100">
                                    <h1 data-aos="fade-up" data-aos-delay="600"><span>Connecting to the</span> <br> World
                                    </h1>
                                    <h2 data-aos="fade-up" data-aos-delay="700">We brings to you solutions engineered to the
                                        highest technical standards and tested by rigorous world class benchmarks. </h2>
                                    <div data-aos="fade-up" data-aos-delay="1200">
                                        <a href="/products" class="link-btn">Learn More</a>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="controls">
                        <button class="carousel-control-prev" type="button" data-bs-target="#banner-carousel"
                            data-bs-slide="prev">
                            <!--<img style="height: 40px; width: auto;" src="./assets/images/left.svg" alt="">-->
                            <span class="fa fa-angle-left"></span>
                        </button>
                        <button class="carousel-control-next" type="button" data-bs-target="#banner-carousel"
                            data-bs-slide="next">
                            <!--<img style="height: 40px; width: auto;" src="./assets/images/right.svg" alt="">-->
                            <span class="fa fa-angle-right"></span>
                        </button>
                    </div>
                </div>
            </section>
        @endif

        <div class="text-center mt-2">
            <!-- <p>Copper prices goes down due to the bla bla</p> -->
            <div id="carousel-news" class="carousel slide" data-bs-ride="carousel">
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <p>Copper prices goes down due to the bla bla</p>
                    </div>
                    <div class="carousel-item">
                        <p>Copper prices goes down due to the bla bla</p>
                    </div>
                    <div class="carousel-item">
                        <p>Copper prices goes down due to the bla bla</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Short Info Wrapper -->
        <section class="services-wrap">
            <div class="container">
                <div class="row services-wrap-inner">
                    <div class="col-md-4">
                        <div class="service" data-aos="fade-up" data-aos-delay="400">
                            <!--<i class="fa fa-th-large icon"></i>-->
                            <img src="assets/images/icons/product.png" class="img-fluid position-absolute"
                                alt="rating-Icon" />
                            <div class="content">
                                <span>See New</span>
                                <h3 class="lead fw-light my-0">Products</h3>
                                <a href="/products" class="more__link">Read more <i
                                        class="fa fa-chevron-circle-right"></i></a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="service" data-aos="fade-up" data-aos-delay="600">
                            <img src="assets/images/icons/distributor.png" class="img-fluid position-absolute"
                                alt="Distributor-Icon" />
                            <div class="content">
                                <span>Find A</span>
                                <h3 class="lead fw-light my-0">Distributor</h3>
                                <a href="/partner-locator" class="more__link">Read more <i
                                        class="fa fa-chevron-circle-right"></i></a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="service" data-aos="fade-up" data-aos-delay="800">
                            <img src="assets/images/icons/rating.png" class="img-fluid position-absolute"
                                alt="rating-Icon" />
                            <div class="content">
                                <span>Talk With An</span>
                                <h3 class="lead fw-light my-0">Expert</h3>
                                <a href="/contact" class="more__link">Read more <i
                                        class="fa fa-chevron-circle-right"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!--feathered products-->
        <section class="featured-section-wrap py-5 my-xl-5">
            <div class="container">
                <h3 class="header-lg border-bottom fw-medium mb-lg-5 mb-3 pb-1">Featured Products</h3>

                <div class="owl-carousel featuredProducts py-4">
                    @if ($feature_products->isNotEmpty())
                        @foreach ($feature_products as $feature_product)
                            <div class="product__card bg-white rounded-lg shadow-sm">
                                <figure class="pro__img">
                                    <img src="{{ asset('storage/files/product/images/' . $feature_product->product_thumbnail) }}"
                                        alt="feathered products" class="img-fluid">
                                </figure>
                                <div class="details p-3">
                                    <a href="{{ route('product.details', ['product_slug' => $feature_product->slug]) }}"
                                        class="title__link ellipsis-2">{{ $feature_product->name }}</a>
                                    <small class="d-block text-primary mt-1">{{ $feature_product->category->name }}</small>
                                    <div class="text-muted mt-2 mb-3 small ellipsis-2">{{ $feature_product->sub_title }}
                                    </div>
                                    <a href="{{ route('product.details', ['product_slug' => $feature_product->slug]) }}"
                                        class="btn-brand">Detail</a>
                                </div>
                            </div>
                        @endforeach
                    @endif

                    @empty($feature_products)
                        <div class="product__card bg-white rounded-lg shadow-sm">
                            <figure class="pro__img">
                                <img src="{{ asset('assets/images/products/p-6.jpg') }}" alt="feathered products"
                                    class="img-fluid">
                            </figure>
                            <div class="details p-3">
                                <a href="javascript:void(0)" class="title__link">FGS-CD9E-B</a>
                                <small class="d-block text-primary">simplex</small>
                                <div class="text-muted mb-1">Variant of FGS-CD9E</div>
                                <a href="javascript:void(0)" class="btn-brand">Detail</a>
                            </div>
                        </div>
                    @endempty
                </div>

            </div>
        </section>

        <section class="pb-5 pt-lg-5 bg-white">
            <div class="container py-lg-5">
                <div class="row g-4">
                    <div class="col-lg-7">
                        <h2 class="header-lg">Who we are</h2>
                        <p class="mt-3">
                            Established in 2004, we have been providing industry leaders with quality products for years and have earned a reputation in the industry as the leading provider of Structured cabling, Fiber cabling, Racks, Field closures & UPS. In 2017, we expanded our product line to accommodate monitoring devices and other intelligent solutions. Regardless of your needs, we make the quality products to meet your standard.
                        </p>
                         
                        <div class="mt-3 mt-lg-4">
                            <a href="/about" class="btn btn-outline-dark btn-lg">Know More</a>
                        </div>
                    </div>
                    <!--.//col-->
                    <div class="col-lg-5">
                        <img src="{{ asset('assets/images/company_moto/our_history.jpg') }}" class="img-fluid"
                            alt="banner">
                    </div>
                </div>
                <!--.//row-->
            </div>
            <!--container-->
        </section>
        <!-- Who We Are Wrapper Start -->

        @if ($home_resources->isNotEmpty())
        <section class="py-3 py-lg-4 py-xl-5">
            <div class="container">
                <h3 class="header-lg border-bottom fw-medium mb-3 mb-lg-4 mb-xl-5 pb-1">Resource</h3>

                <div class="owl-carousel catalogueSlider">
                    @foreach ($home_resources as $home_resource)
                        <div class="product__card bg-white rounded-lg shadow-sm">
                            <figure class="pro__img">
                                <img src="{{ asset('storage/files/resource/images/' . $home_resource->resource_thumbnail) }}"
                                    alt="feathered products" class="img-fluid">
                            </figure>
                            <div class="details p-3 position-relative">
                                <a href="javascript:void(0)"
                                    class="title__link ellipsis-2">{{ $home_resource->name }}</a>
                                <small
                                    class="d-block text-muted mb-2 ellipsis-2">{{ $home_resource->sub_title }}</small>
                                {{-- <a href="product-detail.php" class="btn-brand">Detail</a> --}}
                                @if ($home_resource->files)
                                    <!-- <a href="{{ route('pdf', ['id' => $home_resource->files->id]) }}" class="btn btn-fab eye"><i class="fa fa-eye"></i></a> -->
                                    <a href="{{ $home_resource->files->get_download_link('storage/files/resource/document/') }}"
                                        class="btn btn-fab" download><i class="fa fa-download"></i></a>
                                @endif
                            </div>
                        </div>
                    @endforeach
                    
                </div>
                
            </div>
        </section>
        @endif

        @if($blogs->isNotEmpty())
        <!--News Slider-->
        <section class="featured-section-wrap py-4 py-md-5"> 
            <div class="container">
                <h3 class="header-lg border-bottom fw-medium mb-3 mb-sm-3 mb-md-4 mb-xl-5 pb-1">News</h3>

                <div class="row g-4 g-xxl-5">
                    @foreach($blogs as $blog)
                    <!--  -->
                    <div class="col-lg-4 col-md-6 col-sm-12">
                        <div class="card blog__item rounded">
                            <figure class="mb-0 overflow-hidden">
                                <img src="{{asset('storage/files/blog/'.$blog->image)}}" class="img-fluid w-100 hover-scale"
                                    alt="blog-image">
                            </figure>
                            <div class="content bg-white d-flex">
                                <div class="date">
                                    {{$blog->created_at->format('d')}} <span>{{$blog->created_at->format('M')}}</span>
                                </div>
                                <div class="caption">
                                    <a href="{{route("blog.details", ['slug' => $blog->slug])}}" class="lead fw-normal">{{$blog->title}}</a>
                                    <p>{{$blog->short_description}}</p>
                                    <a href="{{route("blog.details", ['slug' => $blog->slug])}}" class="more__link">Read more <i
                                            class="fa fa-chevron-circle-right"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach 
                </div>
                <div class="pt-4 pt-lg-4 text-center">
                    <a href="{{route('blog')}}" class="btn btn-brand">See All Blog</a>
                </div> 
            </div>
        </section>
        @endif

        @if ($youtubes->isNotEmpty())
            <section class="main-video"
                style="background:url(./assets/images/bg_pattern.jpg) no-repeat center center / cover;">
                <section class="video-section">
                    <div class="container">
                        <h3 class="mb-0 header-lg">Videos</h3>
                        <span class="d-block mb-4">Watch our selected videos</span>
                        <div id="video-carousel" class="carousel slide" data-bs-ride="carousel">
                            <div class="carousel-indicators d-sm-none">
                                @foreach ($youtubes as $key => $youtube)
                                    <button type="button" data-bs-target="#video-carousel" data-bs-slide-to="{{$key}}"
                                        class="@if ($key == 0) active @endif" aria-current="true"
                                        aria-label="Slide {{ $key }}"></button>
                                @endforeach
                            </div>
                            <div class="carousel-inner">
                                @foreach ($youtubes as $key => $youtube)
                                                                        <div class="carousel-item @if ($key == 0) active @endif"
                                        data-bs-interval="50000">
                                        <div class="video">
                                            <iframe class="video-iframe"
                                                src="https://www.youtube.com/embed/{{ $id }}" frameborder="0"
                                                allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                                                allowfullscreen=""></iframe>
                                        </div>
                                        <h1>{{ $youtube->title }}</h1>
                                        <span>{{ $youtube->sub_title }}</span>
                                    </div>
                                @endforeach

                            </div>
                            <button class="carousel-control-prev" type="button" data-bs-target="#video-carousel"
                                data-bs-slide="prev">
                                <img src="./assets/images/icons/angle-left.png" alt="angle-left-icon">
                                <span class="visually-hidden">Previous</span>
                            </button>
                            <button class="carousel-control-next" type="button" data-bs-target="#video-carousel"
                                data-bs-slide="next">
                                <img src="./assets/images/icons/angle-right.png" alt="angle-right-icon">
                                <span class="visually-hidden">Next</span>
                            </button>
                        </div>
                    </div>
                </section>
            </section>
        @else
            <section class="main-video"
                style="background:url(./assets/images/bg_pattern.jpg) no-repeat center center / cover;">
                <section class="video-section">
                    <div class="container">
                        <h3 class="mb-0 header-lg">Videos</h3>
                        <span class="d-block mb-4">Watch our selected videos</span>
                        <div id="video-carousel" class="carousel slide" data-bs-ride="carousel">
                            <div class="carousel-indicators d-sm-none">
                                <button type="button" data-bs-target="#video-carousel" data-bs-slide-to="0"
                                    class="active" aria-current="true" aria-label="Slide 1"></button>
                                <button type="button" data-bs-target="#video-carousel" data-bs-slide-to="1"
                                    aria-label="Slide 2"></button>
                                <button type="button" data-bs-target="#video-carousel" data-bs-slide-to="2"
                                    aria-label="Slide 3"></button>
                            </div>
                            <div class="carousel-inner">
                                <div class="carousel-item active" data-bs-interval="50000">
                                    <div class="video">
                                        <iframe class="video-iframe" src="https://www.youtube.com/embed/-UdxJUPbYcE"
                                            frameborder="0"
                                            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                                            allowfullscreen=""></iframe>
                                    </div>
                                    <h1>Connecting to the world</h1>
                                    <span>Series of Cabnet</span>
                                </div>
                                <div class="carousel-item" data-bs-interval="50000">
                                    <div class="video">
                                        <iframe class="video-iframe" src="https://www.youtube.com/embed/n33xWdVqpSQ"
                                            frameborder="0"
                                            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                                            allowfullscreen=""></iframe>
                                    </div>
                                    <h1>Connecting to the world</h1>
                                    <span>Series of Cabnet</span>
                                </div>
                                <div class="carousel-item" data-bs-interval="50000">
                                    <div class="video">
                                        <iframe class="video-iframe" src="https://www.youtube.com/embed/n33xWdVqpSQ"
                                            frameborder="0"
                                            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                                            allowfullscreen=""></iframe>
                                    </div>
                                    <h1>Connecting to the world</h1>
                                    <span>Series of Cabnet</span>
                                </div>
                            </div>
                            <button class="carousel-control-prev" type="button" data-bs-target="#video-carousel"
                                data-bs-slide="prev">
                                <img src="./assets/images/icons/angle-left.png" alt="angle-left-icon">
                                <span class="visually-hidden">Previous</span>
                            </button>
                            <button class="carousel-control-next" type="button" data-bs-target="#video-carousel"
                                data-bs-slide="next">
                                <img src="./assets/images/icons/angle-right.png" alt="angle-right-icon">
                                <span class="visually-hidden">Next</span>
                            </button>
                        </div>
                    </div>
                </section>
            </section>
        @endif
    </main>
@endsection