@extends('frontend.layouts.app')
@section('title') {{app_name()}} @endsection
@section('content')
<style>
.logo-img {
    height: 200px;
    object-fit: contain;
    padding: 4px;
}
.card-image {
    width: 100%;
    height: 200px; /* fixed height for all cards */
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    overflow: hidden;
}

.card-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* IMPORTANT */
}
.img-box {
    width: 100%;
    height: 120px; /* 👈 fixed height (change as needed) */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #fff;
}

.category-img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 👈 keeps full image visible */
}

.places-box {
    width: 100%;
    height: 160px; /* 👈 adjust as needed */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #fff;
    border-radius: 8px;
}

.places-img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 👈 best for logos */
}
.cat-card {
    width: 100%;
    aspect-ratio: 1 / 1; /* 👈 makes perfect square */
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 15px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
}
.highlight-cat-title {
    font-size: 14px;
    margin-top: 10px;

    display: -webkit-box;
    -webkit-line-clamp: 1; /* 👈 max 2 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cat-card {
    width: 100%;
    height: 120; /* fixed square feel */
}
</style>
    <!-- ================================
                START HERO-WRAPPER AREA
                ================================= -->
    <section class="hero-wrapper">
        <div class="container">
            <div class="row">
                <div class="col-lg-4">
                    <div class="">
                       
                        <div id="carouselExampleAutoplaying" class="carousel slide" data-bs-ride="carousel">
                            <div class="carousel-inner">
                                @foreach($listings as $key => $listing)
                                <div class="carousel-item {{ $key == 0 ? 'active' : '' }}">
                                    <a href="https://{{ $listing['url_slug'] }}.gbusiness.co">
                                        
                                        <img 
                                            src="{{ asset('business_images/'.$listing->business_logo) }}" 
                                            class="d-block w-100 border-banner logo-img" style="border:2px solid #ddd; border-radius:8px; padding:4px;"
                                            alt="{{ $listing->business_name }}"
                                        >

                                    </a>
                                </div>
                            @endforeach
                            </div>
                            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleAutoplaying"
                                data-bs-slide="prev">
                                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                <span class="visually-hidden">Previous</span>
                            </button>
                            <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleAutoplaying"
                                data-bs-slide="next">
                                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                <span class="visually-hidden">Next</span>
                            </button>
                        </div>
                    </div>

                </div>
                
                
                   @foreach($listinglatest as $key => $latest)
                    @if(!empty($latest['business_name']))
                    <div class="col-lg-2">
                        <div class="display-post">
                             <a href="https://{{ $latest['url_slug'] }}.gbusiness.co">
                                <img src="{{ asset('business_images/'.$latest['business_logo']) }}" 
                                    class="side-banner" style="border:2px solid #ddd; border-radius:8px; padding:4px;"
                                    alt="{{ $latest['business_name'] }}">
                            </a>
                        </div>
                        </div>
                    @endif
                @endforeach

            
        </div>

        <!-- end overlay -->
        <div class="container position-relative z-index-2">
            <div class="hero-heading text-center pt-4">
                <h2 class="sec__title text-black cd-headline zoom">
                    Search across
                    <span class="cd-words-wrapper">
                        <b class="is-visible"> 5.9 Crore+' Products & Services</b>
                        <b>4.9 Crore+' Businesses</b>
                    </span>
                </h2>
                <p class="sec__desc text-black">
                    All the top locations - from restaurants and clubs, to galleries,
                    famous places and more...
                </p>
            </div>
            <!-- end hero-heading -->

    <form method="GET" action="{{ url('listings-search') }}">
    <div class="tab-content mt-4" id="myTabContent">
        <div class="tab-pane fade show active" id="places" role="tabpanel">

            <div class="card">
                <div class="card-body row pb-0">

                    <!-- Keyword -->
                    <div class="col-lg-3 pe-lg-0">
                        <div class="form-group">
                            <span class="fal fa-search form-icon"></span>
                            <input 
                                class="form-control form--control"
                                type="text"
                                name="search"   {{-- ✅ added --}}
                                value="{{ request('search') }}"
                                placeholder="What are you looking for?"
                            />
                        </div>
                    </div>

                    <!-- Location -->
                    <div class="col-lg-3 pe-lg-0">
                        <div class="form-group">
                            <span class="fal fa-map-marker-alt form-icon"></span>
                            <input 
                                class="form-control form--control"
                                type="text"
                                name="city"   {{-- ✅ added --}}
                                value="{{ request('city') }}"
                                placeholder="Location"
                            />
                        </div>
                    </div>

                    <!-- Category -->
                    <div class="col-lg-3 pe-lg-0">
                        <div class="form-group select2-container-wrapper">
                            <select 
                                class="select-picker" 
                                name="category"   {{-- ✅ added --}}
                                data-width="100%"
                                data-size="5"
                            >
                                <option value="">Select a Category</option>

                                @foreach($listcatsearch as $cat)
                                    <option 
                                        value="{{ $cat->slug }}"
                                        {{ request('category') == $cat->slug ? 'selected' : '' }}
                                    >
                                        {{ $cat->name }}
                                    </option>
                                @endforeach

                            </select>
                        </div>
                    </div>

                    <!-- Button -->
                    <div class="col-lg-3">
                        <div class="form-group">
                            <button class="theme-btn border-0 w-100" type="submit">
                                Search
                            </button>
                        </div>
                    </div>

                </div>
            </div>

        </div>
    </div>
</form>
            <!-- end tab-content -->
        </div>
        <!-- end container -->
    </section>
    <!-- end hero-wrapper -->
    <!-- ================================
                END HERO-WRAPPER AREA
                ================================= -->

    <!-- ================================
                START CATEGORY
                ================================= -->
    <section class="category-area bg-gray section--padding">
        <div class="container">
            <h2 class="sec__title text-center">What do you need to find?</h2>

            <div class="row mt-5 custom-grid">
                <!-- Box 1 -->
                  @foreach($listcatsmain as $key => $cat)
                    @if(!empty($cat['name']))
                <div class="cat-box">
                    <a href="{{ url('listingsubcategories/'.$cat['slug']) }}" class="highlight-category highlight-category-3">
                        <span class="{{ $cat['image'] ? $cat['image'] : 'fal fa-building' }} icon-element icon-element-bg-slim-1 d-block mx-auto mb-2"></span>
                       <div class="cat-card">
                            
                            <span class="highlight-cat-title">{{ $cat['name'] }}</span>
                        </div>
                        <span class="badge badge-pill">12 Listings</span>
                    </a>
                </div>
                @endif
                @endforeach
                <div class="text-center">
                <a href="{{ url('listingcategories') }}" class="theme-btn">View all</a>
             </div>
            </div>
            
        </div>
    </section>

    <!-- end category-area -->
    <!-- ================================
                END CATEGORY
                ================================= -->



    <section class="category-area section--padding">
        <div class="container">

            <div class="row">
    @foreach($listcats as $cat)
        <div class="col-lg-6">
            <div class="border-category">
                
                <h4 class="text-left">{{ $cat->name }}</h4>

                <div class="row mt-3">
                    
                    @foreach($cat->listings as $list)
                        <div class="col-lg-4 col-md-6">
                            <a href="https://{{ $list['url_slug'] }}.gbusiness.co" class="category-item d-block hover-y">
                                <div class="overlay"></div>

                                <div class="img-box">
                                    <img src="{{ $list->business_logo 
                                        ? asset('business_images/'.$list->business_logo) 
                                        : asset('assets/front/images/default.jpg') }}"
                                        class="category-img lazy"
                                        alt="{{ $list->business_name }}">
                                </div>

                                <div class="category-content d-flex align-items-center justify-content-center">
                                    <div>
                                        <h4 class="cat-title mt-2">
                                            {{ $list->business_name }}
                                        </h4>
                                    </div>
                                </div>
                            </a>
                        </div>
                    @endforeach

                </div>

            </div>
        </div>
    @endforeach
</div>

            <!-- end row -->
        </div>
        <!-- end container -->
    </section>




    <!-- ================================
                START CARD AREA
                ================================= -->
    <section class="card-area section-padding">
        <div class="container">
            <div class="text-center">
                <h2 class="sec__title mb-3">Trending Searches Near You </h2>
                <p class="sec__desc">
                    Stay updated with the latest local trends.
                </p>
            </div>
            
            <div class="card-carousel owl-carousel owl-theme mt-5">
                @foreach($trendinglist as $item)
                <div class="card mb-0 hover-y slide-box">

                    <a href="https://{{ $item['url_slug'] }}.gbusiness.co"  class="card-image">
                        <img src="{{ asset('business_images/'.$item->business_logo) }}"
                            class="card-img-top img-top-business"
                            alt="{{ $item->business_name }}" />

                        <span class="badge text-bg-success badge-pill">New</span>
                    </a>

                    <div class="card-body position-relative">

                        <div class="d-flex align-items-center mb-1">
                            <h4 class="card-title mb-0">
                                <a href="https://{{ $item['url_slug'] }}.gbusiness.co">
                                    {{ $item->business_name }}
                                </a>
                            </h4>

                            <i class="fa fa-check-circle ms-1 text-success"
                            data-bs-toggle="tooltip"
                            title="Claimed"></i>
                        </div>

                        <!-- Optional: Address -->
                        <p class="mb-1">
                            <i class="fa fa-map-marker"></i>
                            {{ $item->address }}
                        </p>

                    </div>

                    <div class="card-footer bg-transparent border-top-gray d-flex align-items-center justify-content-between">

                        <a href="https://{{ $item['url_slug'] }}.gbusiness.co" class="btn btn-danger">
                            Explore
                        </a>

                        <!-- Optional Call -->
                        <a href="tel:{{ preg_replace('/[^0-9+]/','',$item->business_phone) }}"
                        class="btn btn-success">
                            Call
                        </a>

                    </div>

                </div>
                @endforeach
                <!-- end card -->
            </div>
            <!-- end card-carousel -->
        </div>
        <!-- end container -->
    </section>
    <!-- end card-area -->
    <!-- ================================
                END CARD AREA
                ================================= -->

    <hr class="border-top-gray my-0" />

    <!-- ================================
                START CAT AREA
                ================================= -->
    <section class="cat-area section--padding">
        <div class="container">
            <div class="text-center">
                <h2 class="sec__title mb-3">Explore Top Business List</h2>
                <p class="sec__desc">Explore most popular business list and places</p>
            </div>
            <!-- end section-heading -->
            <div class="row mt-5">


                @foreach($popularlist as $item)
                    <div class="col-lg-3 col-md-6">

                        <a href="https://{{ $item['url_slug'] }}.gbusiness.co" class="category-item d-block text-start overflow-hidden">
                            
                            <div class="overlay"></div>

                            <div class="img-box places-box">
                                <img src="{{ $item->business_logo 
                                    ? asset('business_images/'.$item->business_logo) 
                                    : asset('assets/front/images/default.jpg') }}"
                                    alt="{{ $item->business_name }}"
                                    class="category-img places-img">
                            </div>

                            <div class="category-content">
                                <div class="category-content-inner">

                                    <!-- City Name -->
                                    <h4 class="cat-title mb-2">
                                        {{ $item->city }}
                                    </h4>

                                    <!-- Optional Business Name -->
                                    <small class="text-white">
                                        {{ $item->business_name }}
                                    </small>

                                    <br>

                                    <span class="badge badge-2 badge-pill">Explore</span>

                                </div>
                            </div>

                        </a>

                    </div>
                    @endforeach
            </div>
            <!-- end row -->
        </div>
        <!-- end container -->
    </section>
    <!-- end cat-area -->
    <!-- ================================
                END CAT AREA
                ================================= -->


    <!-- ================================
                START CARD AREA
                ================================= -->
    <section class="card-area section-padding">
    <div class="container">
        <div class="text-center">
            <h2 class="sec__title mb-3">Popular Searches with location</h2>
        </div>

        <div class="card-carousel owl-carousel owl-theme mt-5">

            @foreach($listwithlocation as $item)
            <div class="card mb-0 hover-y">

                <a href="https://{{ $item['url_slug'] }}.gbusiness.co" class="card-image">
                    <img src="{{ asset('business_images/'.$item->business_logo) }}"
                         class="card-img-top places-img"
                         alt="{{ $item->business_name }}" />
                </a>

                <div class="card-body position-relative">

                    <div class="d-flex align-items-center mb-1">
                        <h4 class="card-title mb-0">
                            <a href="https://{{ $item['url_slug'] }}.gbusiness.co">
                                {{ $item->business_name }}
                            </a>
                        </h4>
                    </div>

                    <!-- Location -->
                    <p class="mb-0 text-muted">
                        <i class="fa fa-map-marker"></i>
                        {{ $item->city }}
                    </p>

                </div>

                <div class="card-footer bg-transparent border-top-gray d-flex align-items-center justify-content-between">
                    <a href="{{ url('listing/'.$item->url_slug) }}" class="btn btn-danger">
                        Explore
                    </a>
                </div>

            </div>
            @endforeach

        </div>
    </div>
</section>
    <!-- end card-area -->
    <!-- ================================
                END CARD AREA
                ================================= -->

    <hr class="border-top-gray my-0" />

    <!-- ================================
                START BLOG AREA
                ================================= -->
    <section class="blog-area section-padding">
        <div class="container">
            <div class="text-center">
                <h2 class="sec__title mb-3">Recent Blogs Activity</h2>

            </div>
            <div class="row mt-5">
                @foreach($posts as $post)
                <div class="col-lg-4 col-md-6">
                    <div class="card hover-y slide-box">

                        <!-- Image -->
                        <a href="{{ url('blogs/'.$post->slug) }}" class="card-image">
                            <img src="{{ asset('post_images/'.$post->featured_image) }}" 
                                alt="{{ $post->name }}" 
                                class="card-img-top" />
                        </a>

                        <div class="card-body">

                            <!-- Title -->
                            <h4 class="card-title">
                                <a href="{{ url('blogs/'.$post->slug) }}">{{ $post->name }}</a>
                            </h4>

                            <!-- WhatsApp Button -->
                            <a href="https://wa.me/{{ $post->user_id }}" class="btn btn-success">
                                <i class="fab fa-whatsapp icon me-2"></i>Whatsapp
                            </a>

                            <!-- Description -->
                            <p class="card-text mt-3">
                                {{ $post->intro ?? 'No description available' }}
                            </p>

                            <!-- Static Stars -->
                            <div>
                                <i class="far fa-star"></i>
                                <i class="far fa-star"></i>
                                <i class="far fa-star"></i>
                                <i class="far fa-star"></i>
                                <i class="far fa-star"></i>
                            </div>

                            <!-- Author -->
                            <div class="post-author d-flex align-items-center justify-content-between mt-3">
                                <div>
                                    <img src="{{ asset('assets/front/images/logo2.png') }}" alt="" />
                                    <a href="#">{{ $post->created_by_name ?? 'Admin' }}</a>
                                </div>

                                <!-- Explore Button -->
                                <a href="{{ url('blogs/'.$post->slug) }}" class="btn btn-sm btn-danger text-white">
                                    Explore
                                </a>
                            </div>

                        </div>
                    </div>
                </div>
                @endforeach
                
            </div>
            <!-- end row -->
            <div class="text-center">
                <a href="{{ url('blogs') }}" class="theme-btn">View all</a>
            </div>
        </div>
        <!-- end container -->
    </section>
    <!-- end blog-area -->
    <!-- ================================
                START BLOG AREA
                ================================= -->
    <hr class="border-top-gray my-0" />
@endsection