@extends('layouts.public.app-home')

@section('content')
    <div class="">
        <div class="home-hero">
            <div class="video-container d-flex align-items-center justify-content-center">
                {{-- <img src="/assets/img/cover.jpg" alt="cover">
                <div class="background-tint"></div> --}}
                <div class="home-hero-text">
                    <div class="d-flex justify-content-center mb-3">
                        <div class="text-container">
                            <h1 class="heading">Search Products & Suppliers</h1>
                            {{--
                            <p class="d-none">Our global B2B marketplace connects trusted suppliers with vetted
                                buyers
                                of industrial chemicals.</p> --}}

                            <p class="p">Are you a supplier?
                                @guest
                                    <a href="#" onclick="getLoginRegister('register'); return false;"
                                        class="text-white btn-link open-register-as-seller">Add
                                        your listing
                                    </a>
                                @endguest
                                @auth
                                    @if (Auth::user()->trade_role == '2' || Auth::user()->trade_role == '3')
                                        <a href="{{ route('public.sellerlogin', [Auth::user()->id]) }}"
                                            class="text-white btn-link">Add
                                            your listing
                                        </a>
                                    @else
                                        <a href="#" onclick="getLoginRegister('register'); return false;"
                                            class="text-white btn-link">Add
                                            your listing
                                        </a>
                                    @endif
                                @endauth
                            </p>
                        </div>
                    </div>
                    <form action="{{ route('public.search_session') }}" method="POST" autocomplete="off"
                        id="homesearchForm">
                        @csrf
                        <div class="home-hero-search mb-3">
                            @php
                                $session = @Common::public_search_session();
                            @endphp
                            <select name="type" class="select" id="homeSearchType" aria-label="Search">
                                <option value="product" {{ @$session['type'] == 'product' ? 'selected' : '' }}>Product
                                </option>
                                <option value="supplier" {{ @$session['type'] == 'supplier' ? 'selected' : '' }}>Supplier
                                </option>
                                <option value="document" {{ @$session['type'] == 'document' ? 'selected' : '' }}>Document
                                </option>
                            </select>

                            <div class="autocomplete">
                                <input type="text" name="keyword" id="keyword_home" class="form-control keyword"
                                    placeholder="Search" onkeyup="getSuggestions(this,'homesearchSuggestions')">
                                <div id="homesearchSuggestions" class="autocomplete-items" data-ref="homesearchForm"></div>
                            </div>
                            <button class="hero-search-btn" type="submit" aria-label="Search">
                                <div class="d-flex align-items-center">
                                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-search my-1" viewBox="0 0 16 16">
                                    <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/>
                                  </svg>
                                <span class="d-none d-md-inline ms-md-2">Search</span>
                                </div>
                            </button>
                        </div>
                    </form>
                    {{--
                    <div class="d-none">
                        <p class="p"><a class="text-white"><i class="bi bi-search me-2"></i>Search by Location</a></p>
                    </div>
                    --}}
                </div>
            </div>
        </div>
    </div>
    <div class="category-section pt-4 pb-lg-5 pt-lg-5 bg-white">
        <div class="container-fluid">
            <h2 class="home-header pb-3 pb-lg-4 text-center">
                Explore 50,000+ Chemicals<br> from Vetted Suppliers
            </h2>
            <div class="category-container">
                <div class="row justify-content-center px-3">
                    @foreach ($categories as $category)
                        <div class="col-lg-2 col-md-4 col-6">
                            <a href="{{ route('public.search_type', ['category', $category->slug]) }}">
                                <div class="category-card">
                                    <img src="{{ $category->getimage->path ?? '/assets/img/category-placeholder.png' }}" alt="category-img"
                                        onerror="src='/assets/img/category-placeholder.png'">

                                    <div class="category-card-text">
                                        <div class="title text-dark">{{ $category->name }}</div>
                                    </div>
                                </div>
                            </a>
                            
                        </div>
                    @endforeach
                </div>
                <div class="d-flex justify-content-center">
                    <a href="{{ route('public.categories') }}" class="btn-viewall mt-3 mb-3"
                        style="width: 360px; max-width: 100%;">See All Categories</a>
                </div>
            </div>
        </div>
    </div>
    {{--
    <div class="quick-about">
        <div class="container-fluid">
            <div class="row d-flex align-items-center">
                <div class="col-lg-5 d-flex justify-content-center order-2 order-lg-1">
                    <img src="/assets/img/founder.png" alt="founder" class="img-fluid founder-img">
                </div>
                <div class="col-lg-7 order-1 order-lg-2">
                    <div class="quick-about-text">
                        <h1 class="heading">
                            Two Decades of Established Trust in the Chemical Sector
                        </h1>
                        <p class="p py-lg-4 py-3">
                            Celebrating 20 years of unwavering trust, our legacy in the chemical industry stands
                            as a testament to reliability, quality, and enduring partnerships. Join us in
                            commemorating two decades of steadfast commitment to excellence and innovation,
                            as we continue to shape a sustainable and trusted future in the realm of chemicals.
                        </p>
                        <div class="quick-about-glance pt-4">
                            <div class="glance-card gc-br">
                                <h4 class="glance-card-title">
                                    50,000+
                                </h4>
                                <p class="p">Chemical Products</p>
                            </div>
                            <div class="glance-card gc-br">
                                <h4 class="glance-card-title">
                                    100%
                                </h4>
                                <p class="p">Perfect Order Rate</p>
                            </div>
                            <div class="glance-card">
                                <h4 class="glance-card-title">
                                    4 Days
                                </h4>
                                <p class="p">Average Fulfilment Time</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
--}}

    {{--
    <div class="our-best-selling bg-white mb-5">
        <div class="container-fluid">
            <h2 class="heading text-center pt-lg-5 pb-lg-4 pt-4 pb-2">Our Best Selling Products</h2>
            <div class="tag-cloud text-center">
                @if (!empty($categories) && count($categories) > 0)
                    <a class="tag-item" id="cat0" onclick="updateCat(0)">All</a>
                @endif
                @foreach (@$categories->take(6) as $cat)
                    <a class="tag-item" id="cat{{ @$cat['id'] }}"
                        onclick="updateCat({{ @$cat['id'] }})">{{ @$cat['name'] }}</a>
                @endforeach
            </div>
            <div class="product-card-container">

                <input type="text" name="page" value="0" id="filterpage" onchange="homefilter()" hidden>
                <input type="text" name="page" value="0" id="category_id" onchange="homefilter()" hidden>
                <div class="d-flex justify-content-center">
                    <img src="/assets/img/icons/loading.gif" alt="loading..." style="width: 100px" class="mb-4"
                        id="homefilter-loading">
                </div>
                <div id="homefilter">

                </div>
            </div>
            <div class="d-flex justify-content-center">
                <a href="{{ route('public.search_keyword', 'all') }}" class="btn-viewall"
                    style="width: 360px; max-width: 100%;">View All Products</a>
            </div>
        </div>
    </div> --}}

    <div class="pb-lg-0">
        <div class="container">
            <h2 class="heading text-center pt-2 pb-4">Chemicals by Application</h2>
            <div class="row mb-4">
                @foreach ($product_application as $application)
                    <div class="col-lg-2 col-md-4 col-6">
                        <a href="{{ route('public.search_type', ['application', $application['slug']]) }}">
                            <div class="application-card">
                                <img src="{{ @$application->getimage->path }}" alt="Application"
                                    onerror="src='/assets/img/application/6.png'" loading="lazy">
                                <p class="application-card-title">{{ $application['name'] }}</p>
                            </div>
                        </a>
                    </div>
                @endforeach

            </div>
            <div class="d-flex justify-content-center">
                <a href="{{ route('public.applications') }}" class="btn-viewall"
                    style="width: 360px; max-width: 100%;">View All Applications</a>
            </div>
        </div>
    </div>

    <div class="pt-5">
        <div class="container">
            <div class="row d-flex justify-content-center align-items-center">
                <div class="col-lg-5 col-md-12">
                    <div class="feature-1-img mb-lg-0 mb-4">
                        <img src="/assets/img/ai-search.png" alt="aisearch" class="img-fluid"
                            loading="lazy">
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="feature-1-text">
                        <h3 class="title">AI Search for Start Up Businesses</h3>
                        <p class="p py-lg-2 pt-0 pb-4">Starting a new business and need help? Use our AI Search to learn what chemicals are needed when manufacturing your products and find where to source them all in one search.
                        </p>
                    </div>
                    <div class="d-flex justify-content-lg-start justify-content-center pt-2">
                        <a href="{{ route('public.aisearch') }}"
                            class="btn-viewall btn-lg" style="width: 360px; max-width: 100%;">
                           <img src="{{ asset('assets/img/icons/stars-light.svg') }}" alt="stars" height="25" width="25">
                           Start AI Search
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="pt-5">
        <div class="container">
            <div class="row d-flex justify-content-center align-items-center">
                <div class="col-lg-6 order-2 order-lg-1">
                    <div class="feature-1-text">
                        <h3 class="title">Register your Business</h3>
                        <p class="p py-lg-2 pt-0 pb-4">Sign up for free to create your business profile on Chemical
                            Wholesale.
                            Create
                            your supplier profile, add your products and begin receiving leads from qualified buyers of
                            wholesale chemicals.
                        </p>
                    </div>
                    <div class="d-flex justify-content-lg-start justify-content-center pt-2">
                        @auth
                            @if (Auth::user()->trade_role == '2' || Auth::user()->trade_role == '3')
                                <a href="{{ route('public.sellerlogin', [Auth::user()->id]) }}" class="btn-viewall btn-lg"
                                    style="width: 360px; max-width: 100%;">
                                    Register as a Supplier
                                </a>
                            @else
                                <a href="#" data-bs-toggle="modal" data-bs-target="#buyer-register-as-supplier"
                                    class="btn-viewall btn-lg" style="width: 360px; max-width: 100%;" role="button">
                                    Register as a Supplier
                                </a>
                            @endif
                        @endauth
                        @guest
                            <a href="#" onclick="getLoginRegister('register'); return false;"
                                class="btn-viewall btn-lg open-register-as-seller" style="width: 360px; max-width: 100%;">
                                Register as a Supplier
                            </a>
                        @endguest
                    </div>
                </div>
                <div class="col-lg-5 col-md-12 order-1 order-lg-2">
                    <div class="feature-1-img mb-lg-0 mb-4">
                        <img src="/assets/img/register-as-supplier.png" alt="register-as-supplier" class="img-fluid"
                            loading="lazy">
                    </div>
                </div>
            </div>
        </div>
    </div>

    @if (!empty($suppliers) && count($suppliers) > 0)
        <div class="pt-5">
            <div class="container-fluid">
                <h2 class="heading text-center pt-lg-3 pt-0 pb-4">Featured Suppliers</h2>
                <div class="row g-2 supplier-scroll d-flex justify-content-center">
                    @foreach ($suppliers as $supplier)
                        <div class="col-xxl-2 col-lg-3 col-md-4 col-6">
                            <div class="supplier-card">
                                <a href="{{ route('public.supplier.profile', @$supplier['slug']) }}"
                                    class="supplier-link">
                                    <div class="supplier-card-img">
                                        <img src="{{ @$supplier['getLogo']['path'] }}" alt="supplier" class="img-fluid"
                                            onerror="src='/assets/img/supplier_noimg.jpg'" loading="lazy">
                                    </div>
                                    <p class="suppliername">{{ @$supplier['company'] }}</p>
                                    <span class="btn-outline w-100">
                                        See More Details
                                    </span>
                                </a>
                            </div>
                        </div>
                    @endforeach
                </div>

                <div class="d-flex justify-content-center">
                    <a href="{{ route('public.supplier.all') }}" class="btn-viewall mt-3"
                        style="width: 360px; max-width: 100%;">See All
                        Suppliers</a>
                </div>
            </div>
        </div>
    @endif

    <div class="pb-5 pt-lg-4 pt-2">
        <div class="container">
            <h2 class="heading text-center pt-5">Why Chemical Wholesale?</h2>
            <div class="d-flex justify-content-center">
                <p class="subheading text-center" style="max-width: 600px">
                    See why chemical suppliers of all sizes prefer Chemical Wholesale as their preferred online selling
                    marketplace.
                </p>
            </div>
            <div class="row pt-5 d-flex justify-content-around align-items-center">
                <div class="col-lg-6">
                    <div class="point mb-5">
                        <img src="/assets/img/icons/send.png" alt="send" loading="lazy">
                        <div class="point-info">
                            <div class="title">Trusted Network</div>
                            <p class="p py-2">Our chemical products boast state-of-the-art formulations that are
                                designed
                                to deliver superior performance, setting new
                                standards in the industry.</p>
                            <a href="" class="learnmore-link">Learn More
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right" viewBox="0 0 16 16">
                                    <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8"/>
                                </svg>
                            </a>
                        </div>
                    </div>
                    <div class="point mb-5">
                        <img src="/assets/img/icons/blub.png" alt="send" loading="lazy">
                        <div class="point-info">
                            <div class="title">Built by Industry Experts</div>
                            <p class="p py-2">Our chemical solutions are highly versatile, catering to a wide range
                                of applications across various industries,
                                providing customers with flexibility and adaptability to meet their unique needs.
                            </p>
                            <a href="" class="learnmore-link">Learn More 
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right" viewBox="0 0 16 16">
                                    <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8"/>
                                </svg>
                            </a>
                        </div>
                    </div>
                    <div class="point">
                        <img src="/assets/img/icons/pie.png" alt="send" loading="lazy">
                        <div class="point-info">
                            <div class="title">Designed for the Chemical Trade</div>
                            <p class="p py-2">Our commitment to quality is unwavering. Our products undergo rigorous
                                testing and quality control measures to ensure
                                they meet the highest standards, giving our customers peace of mind and confidence
                                in their purchase.</p>
                            <a href="" class="learnmore-link">Learn More 
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right" viewBox="0 0 16 16">
                                    <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8"/>
                                </svg>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 mt-3 mt-lg-0">
                    <img src="/assets/img/left.png" alt="img" class="w-100" loading="lazy">
                </div>
            </div>
        </div>
    </div>

    <div class="dark-greybg pt-0 pt-lg-5">
        <div class="container-fluid">
            <h2 class="heading text-center pt-3 pb-2">What Our Customers Say</h2>
            <div class="d-flex justify-content-center">
                <p class="subheading text-center">
                    Organically grow the holistic world view of disruptive innovation via workplace diversity and
                    empowerment. Bring to the
                    table win-win strategies to ensure domination.
                </p>
            </div>
            <div class="row py-5">
                <div class="col-lg-3 col-sm-6">
                    <div class="testimonial">
                        <div class="testimonial-user">
                            <img src="/assets/img/user/1.png" alt="User" loading="lazy">
                            <div class="user-info">
                                <p class="testimonial-username">Dave Jone</p>
                                <p class="testimonial-usertype">Premium User</p>
                            </div>
                        </div>
                        <div class="testimonial-body py-4">
                            <p>
                                “Thank you for making it painless, and pleasant and most of all hassle free! I love
                                Chemical store. I can't say enough
                                about Chemical store.”
                            </p>
                        </div>
                        <div class="rating">
                            <img src="/assets/img/user/stars.png" alt="rating" loading="lazy">
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-sm-6">
                    <div class="testimonial">
                        <div class="testimonial-user">
                            <img src="/assets/img/user/2.png" alt="User" loading="lazy">
                            <div class="user-info">
                                <p class="testimonial-username">Andrew Drue</p>
                                <p class="testimonial-usertype">Premium User</p>
                            </div>
                        </div>
                        <div class="testimonial-body py-4">
                            <p>
                                “Wow what great service, I love it! Chemical store is great. Chemical store has
                                surpassed our expectations. I use
                                Chemical store often.”
                            </p>
                        </div>
                        <div class="rating">
                            <img src="/assets/img/user/stars.png" alt="rating" loading="lazy">
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-sm-6">
                    <div class="testimonial">
                        <div class="testimonial-user">
                            <img src="/assets/img/user/3.png" alt="User" loading="lazy">
                            <div class="user-info">
                                <p class="testimonial-username">Olivia Manson</p>
                                <p class="testimonial-usertype">Premium User</p>
                            </div>
                        </div>
                        <div class="testimonial-body py-4">
                            <p>
                                “I could probably go into sales for you. The service was excellent. The service was
                                excellent. Great job, I will
                                definitely again!”
                            </p>
                        </div>
                        <div class="rating">
                            <img src="/assets/img/user/stars.png" alt="rating" loading="lazy">
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-sm-6">
                    <div class="testimonial">
                        <div class="testimonial-user">
                            <img src="/assets/img/user/4.png" alt="User" loading="lazy">
                            <div class="user-info">
                                <p class="testimonial-username">Travis Ryan</p>
                                <p class="testimonial-usertype">Premium User</p>
                            </div>
                        </div>
                        <div class="testimonial-body py-4">
                            <p>
                                “Message then already cc uat. Me optimal on agile lean our key. Last solutions guys
                                version goalposts close. Social
                                supervisor fured.”
                            </p>
                        </div>
                        <div class="rating">
                            <img src="/assets/img/user/stars.png" alt="rating" loading="lazy">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="py-2 pb-4">
        <div class="container-fluid">
            <h2 class="heading text-center py-lg-4 py-3">Chemicals by Industry</h2>
            <div class="row">

                @foreach ($product_industries as $industry)
                    <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6">
                        <div class="card-type-1">
                            <p class="card-type1-title py-2 py-lg-3">{{ $industry['name'] }}</p>
                            <div class="card-type-1-img-container lazy-background"
                                data-src="{{ asset(@$industry->getimage->path ?: '/assets/img/industries/industry.jpg') }}">
                                <a href="{{ route('public.search_type', ['industry', $industry['slug']]) }}"
                                    class="btn-cardt1">Explore Now</a>
                                <div class="img-overlay"></div>
                            </div>
                        </div>
                    </div>
                @endforeach

            </div>
            <div class="d-flex justify-content-center">
                <a href="{{ route('public.industries') }}" class="btn-viewall mt-3"
                    style="width: 360px; max-width: 100%;">See All Industries</a>
            </div>
        </div>
    </div>

    @if (count($blogs) > 0 && $blogs)
        <div class="greybg pt-0 pb-5">
            <div class="container-fluid">
                <h2 class="heading text-center pt-4 py-lg-4 pb-3">Latest From Our Blog</h2>

                <div class="row justify-content-center">
                    @foreach ($blogs as $blog)
                        <div class="col-xl-3 col-md-6">
                            <div class="blog-card">
                                <div class="blog-img">
                                    <a href="{{ route('public.blog', @$blog['slug']) }}">
                                        <img src="/{{ @$blog['image'] }}" alt="blog-img" class="img-fluid"
                                            onerror="src='/assets/img/noimg.jpg'" loading="lazy">
                                    </a>
                                </div>
                                <div class="blog-content">
                                    <div class="title">
                                        <a href="{{ route('public.blog', @$blog['slug']) }}" class="text-dark">
                                            {{ @$blog['name'] }}</a>
                                    </div>
                                    <p>
                                        {{ @$blog['short_description'] }}
                                    </p>
                                    <button type="button" class="blog-link" onclick="window.location.href='{{ route('public.blog', @$blog['slug']) }}'"
                                    aria-label="Learn more about {{ @$blog['name'] }}">
                                        Learn More 
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right" viewBox="0 0 16 16">
                                            <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8"/>
                                        </svg>
                                    </button>
                                </div>
                            </div>
                        </div>
                    @endforeach

                </div>

                <div class="d-flex justify-content-center">
                    <a href="{{ route('public.blogs') }}" class="btn-viewall mt-3"
                        style="width: 360px; max-width: 100%;">See All Blogs</a>
                </div>
            </div>
        </div>
    @endif
@endsection
@push('css')
    <style>
        #homefilter{display:none!important}
        #homefilter.active{display:block!important}
        .btn-viewall{padding:8px 25px;border-radius:50px;width:auto!important}
        .btn-viewall.btn-lg{padding:8px 25px;border-radius:50px;font-size:16px}
        .point .point-info .title{font-size:22px}
        .point .point-info .p{font-size:17px}
    </style>
@endpush
@push('js')
    <script>
        $(document).ready(function() {
            homefilter();
        });
    </script>

    <script>
        function homefilter() {
            $(".active").removeClass("active");
            $("#cat" + $('#category_id').val()).addClass("active");
            $('#homefilter-loading').show();

            $.ajax({
                headers: {
                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                },
                url: "/homefilter",
                type: "POST",

                data: {
                    category_id: $("#category_id").val(),
                    page: $('#filterpage').val(),
                },

                context: this,
                success: function(data) {
                    $("#homefilter").html(data);
                    $("#filterpage").val(0);
                    $('#homefilter-loading').hide();
                    $('#homefilter').addClass('active');

                },
            });
        }

        function updateCat(id) {
            $("#category_id").val(id);
            $("#filterpage").val(0);
            homefilter();
        }
    </script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const lazyBackgrounds = document.querySelectorAll('.lazy-background');

            const loadImage = (entry, observer) => {
                const target = entry.target;
                const imgPath = target.getAttribute('data-src');

                if (entry.isIntersecting && imgPath) {
                    target.style.backgroundImage =
                        `linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)), url('${imgPath}')`;
                    observer.unobserve(target);
                }
            };

            const observer = new IntersectionObserver((entries, observer) => {
                entries.forEach(entry => loadImage(entry, observer));
            }, {
                threshold: 0.1
            });

            lazyBackgrounds.forEach(element => observer.observe(element));
        });
    </script>
@endpush