@include('site.header')
<style>
    .you-may-like {
        color: #333333;
    }

    .you-may-like h3 {
        color: #000000;
        font-weight: bold;
        font-size: 18px;
    }

    .category-blk {
        width: 100%;
        height: 100px;
        margin-bottom: 5px;
    }

    .category-blk img {
        width: 100px;
        height: 100px;
        float: left;
    }

    .category-blk .titles {
        width: 180px;
        height: 90px;
        float: left;
        padding: 5px;
    }

    .category-blk a {
        color: #333333 !important;
    }

    .titles strong {
        color:
    }

    .trending-boxes {
        padding: 5px;
        margin-top: 10px;
    }

    .tbox {
        width: 33%;
        float: left;
    }

    .trending-boxes .card .card-body {
        height: 80px;
        background: #fff5f6;
        box-shadow: 3px 3px 10px #cccccc;
    }

    .trending-boxes h2 {
        text-transform: capitalize !important;
        text-align: center;
    }

    h2 {
        text-transform: capitalize !important;
    }

    .locations {
        padding: 30px;
        background: whitesmoke;
    }

    .city-box {
        text-align: center;
        margin-bottom: 20px;
    }

    .city-box img {
        width: 100%;
        height: 100px;
    }

    .city-box h6 {
        color: #333333;
        font-weight: bold;
    }

    .locations h2 {
        color: #333333;
        font-weight: bold;
        margin-bottom: 20px;
    }

    .locations h6 {
        color: #333333;
        font-weight: bold;
    }

    .locations a {
        color: #333333;
    }

    .locations a:hover {
        color: #333333;
    }

    .city-box {
        position: relative;
        height: 200px;
        background-size: cover;
        background-position: center;
        border-radius: 8px;
        overflow: hidden;
    }

    .city-box a {
        display: block;
        height: 100%;
        width: 100%;
        text-decoration: none;
        color: white;
        position: relative;
    }

    .city-box h6 {
        position: absolute;
        bottom: 0;
        margin: 0;
        width: 100%;
        background-color: #333333;
        color: #ffffff;
        padding: 10px;
        text-align: center;
        font-weight: bold;
        font-size: 16px;
    }

    .row {
        display: flex;
        flex-wrap: wrap;
    }

    .product-box.card {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .front img {
        height: 100px;
    }

    .section-title {
        padding: 5px 30px;
    }

    .container-fluid {
        width: 99%;
    }
    .category-sections {
        padding: 30px 0;
    }
</style>
<!-- Home slider -->
<section class="pt-0 slider">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6">
                <div>
                    <div class="carousel slide" data-bs-ride="carousel" id="carouselExample2">
                        <div class="carousel-inner">
                            {{-- <div class="carousel-item active">
                                    <img alt="img" class="d-block w-100" src="{{asset('uploads/banners/banner3.jpeg')}}" loading="lazy">
                                </div> --}}
                            @foreach ($home_banners as $row)
                                <div class="carousel-item">
                                    <img alt="img" class="d-block w-100"
                                        src="{{ asset('uploads/home_banners/' . $row->image) }}" loading="lazy">
                                </div>
                            @endforeach
                        </div>
                        <a class="carousel-control-prev" href="#carouselExample2" role="button" data-bs-slide="prev">
                            <i class="fa fa-angle-left fs-30" aria-hidden="true"></i>
                        </a>
                        <a class="carousel-control-next" href="#carouselExample2" role="button" data-bs-slide="next">
                            <i class="fa fa-angle-right fs-30" aria-hidden="true"></i>
                        </a>
                    </div>
                </div>
            </div>
            <div class="pt-1 col-md-6 you-may-like desktop">
                <h3>You May Like</h3>
                <div class="trending-categories row">
                    @foreach ($trending_categories as $category)
                        <div class="col-md-6">
                            <a href="/category/{{ $category->id }}/{{ Str::slug($category->name) }}">
                                <div class="category-blk">
                                    @if ($category->image != null)
                                        <img src="{{ asset('uploads/categories/' . $category->image) }}" alt=""
                                            loading="lazy">
                                    @else
                                        <img src="{{ asset('uploads/blank_image.png') }}" alt="" loading="lazy">
                                    @endif
                                    <div class="titles">
                                        <strong>{{ $category->name }}</strong>
                                        <p>100+ Products</p>
                                    </div>
                                </div>
                            </a>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Home slider end -->

<section class="category-sections">
    <div class="container-fluid">
        @foreach ($category_sections as $section)
            <div class="mb-4">
                <h2 class="section-title">{{ $section->title }}</h2>
                {{-- <div class="card-body"> --}}
                <div class="mb-3 row">
                    @foreach ($section->subCategories as $row)
                        <div class="row10">
                            <div class="product-box card">
                                <div class="img-wrapper">
                                    <div class="front">
                                        <a
                                            href="/subcategory/companies/{{ $row->id }}/{{ Str::slug($row->name)?? '' }}">
                                            @if ($row->image != null)
                                                <img src="{{ asset('uploads/subcategories/' . $row->image) }}"
                                                    class="img-fluid" alt="" loading="lazy">
                                            @else
                                                <img src="{{ asset('uploads/blank_image.png') }}" class="img-fluid"
                                                    alt="" loading="lazy">
                                            @endif
                                        </a>
                                    </div>
                                </div>
                                <div class="product-detail card-text">
                                    <div>
                                        <a
                                            href="/subcategory/companies/{{ $row->id }}/{{ Str::slug($row->name)?? '' }}">
                                            <h6>{{ $row->name }}</h6>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
                {{-- </div> --}}
            </div>
        @endforeach
    </div>
</section>

<section class="pt-0 products">
    <div class="container-fluid">
        <h2>Popular Categories</h2>
        <div class="row">
            @foreach ($categories as $row)
                <div class="row10">
                    <div class="product-box card">
                        {{-- <div class="card-body"> --}}
                        <div class="img-wrapper">
                            <div class="front">
                                <a href="/subcategory/companies/{{ $row->id }}/{{ Str::slug($row->name)?? '' }}">
                                    @if ($row->image != null)
                                        <img src="{{ asset('uploads/categories/' . $row->image) }}" class="img-fluid"
                                            alt="" loading="lazy">
                                    @else
                                        <img src="{{ asset('uploads/blank_image.png') }}" class="img-fluid"
                                            alt="" loading="lazy">
                                    @endif
                                </a>
                            </div>
                        </div>
                        <div class="product-detail card-text">
                            <div>
                                <a href="/subcategory/companies/{{ $row->id }}/{{ Str::slug($row->name)?? '' }}">
                                    <h6>{{ $row->name }}</h6>
                                </a>
                            </div>
                        </div>
                        {{-- </div> --}}
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</section>

<section class="products">
    <div class="container-fluid">
        <h2>Trending Products</h2>
        <div class="row">
            @foreach ($trending_products as $row)
                <div class="row10">
                    <div class="product-box card">
                        <div class="img-wrapper">
                            <div class="front">
                                <a href="/product/{{ $row->product->id }}/{{ Str::slug($row->product->name).'-'.Str::slug($row->product->company->city?? '') }}">
                                    @if ($row->product->image != null)
                                        <img src="{{ asset('uploads/products/' . $row->product->image) }}" class="img-fluid"
                                            alt="" loading="lazy">
                                    @else
                                        <img src="{{ asset('theme/images/resource/vy/Common-Medicines-Drugs.png') }}"
                                            class="img-fluid" alt="" loading="lazy">
                                    @endif
                                </a>
                            </div>
                        </div>
                        <div class="product-detail">
                            <a href="/product/{{ $row->product->id }}/{{ Str::slug($row->product->name).'-'.Str::slug($row->product->company->city?? '') }}">
                                <h6>{{ $row->product->name }}</h6>
                            </a>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</section>

<section class="pb-4 products">
    <div class="container-fluid">
        <h2>New Arrivals</h2>
        <div class="row">
            @foreach ($new_arrivals as $row)
                <div class="row10">
                    <div class="product-box card">
                        <div class="img-wrapper">
                            <div class="front">
                                <a href="/product/{{ $row->product->id }}/{{ Str::slug($row->product->name).'-'.Str::slug($row->product->company->city?? '') }}">
                                    @if ($row->product->image != null)
                                        <img src="{{ asset('uploads/products/' . $row->product->image) }}" class="img-fluid"
                                            alt="" loading="lazy">
                                    @else
                                        <img src="{{ asset('theme/images/resource/vy/Common-Medicines-Drugs.png') }}"
                                            class="img-fluid" alt="" loading="lazy">
                                    @endif
                                </a>
                            </div>
                        </div>
                        <div class="product-detail">
                            <a href="/product/{{ $row->product->id }}/{{ Str::slug($row->product->name).'-'.Str::slug($row->product->company->city?? '') }}">
                                <h6>{{ $row->product->name }}</h6>
                            </a>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</section>

<section class="locations">
    <div class="container">
        <div class="row">
            <h2>Suppliers from top cities</h2>
        </div>
        <div class="row">
            <div class="mb-3 col-md-2 col-6">
                <div class="city-box"
                    style="background-image: url('https://tradevyapar.com/uploads/cities/hyderabad.jpg');">
                    <a href="/location/hyderabad">
                        <h6>Hyderabad</h6>
                    </a>
                </div>
            </div>
            <div class="mb-3 col-md-2 col-6">
                <div class="city-box"
                    style="background-image: url('https://tradevyapar.com/uploads/cities/chennai.jpg');">
                    <a href="/location/chennai">
                        <h6>Chennai</h6>
                    </a>
                </div>
            </div>
            <div class="mb-3 col-md-2 col-6">
                <div class="city-box"
                    style="background-image: url('https://tradevyapar.com/uploads/cities/delhi.jpg');">
                    <a href="/location/delhi">
                        <h6>Delhi</h6>
                    </a>
                </div>
            </div>
            <div class="mb-3 col-md-2 col-6">
                <div class="city-box"
                    style="background-image: url('https://tradevyapar.com/uploads/cities/mumbai.jpg');">
                    <a href="/location/mumbai">
                        <h6>Mumbai</h6>
                    </a>
                </div>
            </div>
            <div class="mb-3 col-md-2 col-6">
                <div class="city-box"
                    style="background-image: url('https://tradevyapar.com/uploads/cities/kolkata.jpg');">
                    <a href="/location/kolkata">
                        <h6>Kolkata</h6>
                    </a>
                </div>
            </div>
            <div class="mb-3 col-md-2 col-6">
                <div class="city-box"
                    style="background-image: url('https://tradevyapar.com/uploads/cities/bengaluru.jpg');">
                    <a href="/location/bengaluru">
                        <h6>Bengaluru</h6>
                    </a>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="mb-3 col-md-2 col-6">
                <div class="city-box"
                    style="background-image: url('https://tradevyapar.com/uploads/cities/pune.jpg');">
                    <a href="/location/pune">
                        <h6>Pune</h6>
                    </a>
                </div>
            </div>
            <div class="mb-3 col-md-2 col-6">
                <div class="city-box"
                    style="background-image: url('https://tradevyapar.com/uploads/cities/surat.jpg');">
                    <a href="/location/surat">
                        <h6>Surat</h6>
                    </a>
                </div>
            </div>
            <div class="mb-3 col-md-2 col-6">
                <div class="city-box"
                    style="background-image: url('https://tradevyapar.com/uploads/cities/ahmadabad.jpg');">
                    <a href="/location/ahmadabad">
                        <h6>Ahmadabad</h6>
                    </a>
                </div>
            </div>
            <div class="mb-3 col-md-2 col-6">
                <div class="city-box"
                    style="background-image: url('https://tradevyapar.com/uploads/cities/jaipur.jpg');">
                    <a href="/location/jaipur">
                        <h6>Jaipur</h6>
                    </a>
                </div>
            </div>
            <div class="mb-3 col-md-2 col-6">
                <div class="city-box"
                    style="background-image: url('https://tradevyapar.com/uploads/cities/vijayawada.jpg');">
                    <a href="/location/vijayawada">
                        <h6>Vijayawada</h6>
                    </a>
                </div>
            </div>
            <div class="mb-3 col-md-2 col-6">
                <div class="city-box"
                    style="background-image: url('https://tradevyapar.com/uploads/cities/meerut.jpg');">
                    <a href="/location/meerut">
                        <h6>Meerut</h6>
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>
@include('site.footer')

<script src="resources/assets/js/carousel.js"></script>

<script>
    $(document).ready(function() {
        $('.carousel-item').first().addClass('active');
        $('.carousel-indicators li').first().addClass('active');
    });

    // let sectionIndex = 1;
    // let loading = false;
    // let finished = false;

    // function loadNextSection() {
    //     if (loading || finished) return;
    //     loading = true;
    //     $('#loading-message').show();

    //     $.get('/load-section', { section: sectionIndex }, function (response) {
    //         if (response.done) {
    //             finished = true;
    //             $('#loading-message').hide();
    //             return;
    //         }

    //         $('#sections-container').append(response.html);
    //         sectionIndex++;
    //         loading = false;
    //         $('#loading-message').hide();
    //     });
    // }

    // window.addEventListener('scroll', () => {
    //     if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight - 200) {
    //         loadNextSection();
    //     }
    // });
</script>

<!-- Modal Popup -->
<div id="popupModal" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%;
    background: rgba(0,0,0,0.5); z-index:9999; justify-content:center; align-items:center;">
    <div style="position:relative; max-width: 90%; max-height: 90%;">
        <img src="{{ asset('uploads/goal.jpeg') }}" alt="Promo" style="width:100%; height:auto;">
        <button onclick="document.getElementById('popupModal').style.display='none'"
                style="position:absolute; top:10px; right:10px; background:red; color:white; border:none; padding:5px 10px; cursor:pointer;">X</button>
    </div>
</div>

<script>
    window.onload = function () {
        const popup = document.getElementById('popupModal');
        popup.style.display = 'flex';
    };
</script>