@extends('frontend.layouts.app')
@section('title', $title)
@section('meta')
    <meta property="og:title" content="{{ $og_title ?? '' }}" />
    <meta property="og:description" content="{{ $og_description ?? '' }}" />

    <meta property="og:image" content="{{ getSeoImage($og_image) }}" />
    {{--
    <meta property="og:image" content="{{getSeoImage( $og_image) }}" /> --}}
    <meta name="description" content="{{ $meta_description ?? '' }}">
    <meta name="keywords" content="{{ $meta_keyword }}">
@endsection
@section('content')
                <style>
                    .search-hero .hero-content {
                        background-image: url({{ asset('assets/images/hero-home-new.jpg') }});
                    }
                </style>
                <!-- ======================= Banner Start  ============================ -->
                <div class="search-hero mt-3 mb-4">
                    <div class="container">
                        {{-- Only Visible Large Device --}}
                        <div class="hero-content d-none d-lg-flex justify-content-center align-items-center">
                            <div class="col-10 mx-auto">
                                <h4 class="mb-4"> The best place to  buy and sell anything or find jobs in ghana for free. Ɛyɛ Fallaa !! </h4>

                                
                                
                <div class="search-tab-content p-3 pmd-4 rounded-3 text-light">
    <div class="d-block d-lg-flex align-items-center gap-2 mb-3">
        <div class="fw-bold fs-6 me-md-4 mb-3 mb-md-0 text-nowrap text-center text-md-start">
            Searching in
        </div>

        <ul class="nav nav-pills d-flex justify-content-between w-100 text-nowrap" id="search-tab" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link rounded-pill active" id="tab-all" data-bs-toggle="pill"
                    data-bs-target="#content-all" type="button" role="tab" aria-controls="content-all"
                    aria-selected="true">All</button>
            </li>

            <li class="nav-item" role="presentation">
                <button class="nav-link rounded-pill" id="tab-vehicles" data-bs-toggle="pill"
                    data-bs-target="#content-vehicles" type="button" role="tab"
                    aria-controls="content-vehicles" aria-selected="false">Vehicles</button>
            </li>

            <li class="nav-item" role="presentation">
                <button class="nav-link rounded-pill" id="tab-mobiles" data-bs-toggle="pill"
                    data-bs-target="#content-mobiles" type="button" role="tab"
                    aria-controls="content-mobiles" aria-selected="false">Mobiles</button>
            </li>

            <li class="nav-item" role="presentation">
                <button class="nav-link rounded-pill" id="tab-electronics" data-bs-toggle="pill"
                    data-bs-target="#content-electronics" type="button" role="tab"
                    aria-controls="content-electronics" aria-selected="false">Electronics</button>
            </li>

            <li class="nav-item" role="presentation">
                <button class="nav-link rounded-pill" id="tab-jobs" data-bs-toggle="pill"
                    data-bs-target="#content-jobs" type="button" role="tab"
                    aria-controls="content-jobs" aria-selected="false">Jobs</button>
            </li>

            <li class="nav-item" role="presentation">
                <button class="nav-link rounded-pill" id="tab-property" data-bs-toggle="pill"
                    data-bs-target="#content-property" type="button" role="tab"
                    aria-controls="content-property" aria-selected="false">Property</button>
            </li>
        </ul>
    </div>

    <div class="tab-content" id="search-tabContent">
        <div class="tab-pane fade show active" id="content-all" role="tabpanel" aria-labelledby="tab-all" tabindex="0">
            @include('frontend.partials.search_form', ['placeholder' => 'Search for anything...'])
        </div>

        <div class="tab-pane fade" id="content-vehicles" role="tabpanel" aria-labelledby="tab-vehicles" tabindex="0">
            @include('frontend.partials.search_form', ['placeholder' => 'Search vehicles...', 'type' => 'vehicles'])
        </div>

        <div class="tab-pane fade" id="content-mobiles" role="tabpanel" aria-labelledby="tab-mobiles" tabindex="0">
            @include('frontend.partials.search_form', ['placeholder' => 'Search mobiles...', 'type' => 'mobile-phones-tablets'])
        </div>

        <div class="tab-pane fade" id="content-electronics" role="tabpanel" aria-labelledby="tab-electronics" tabindex="0">
            @include('frontend.partials.search_form', ['placeholder' => 'Search electronics...', 'type' => 'electronics'])
        </div>

        <div class="tab-pane fade" id="content-jobs" role="tabpanel" aria-labelledby="tab-jobs" tabindex="0">
            @include('frontend.partials.search_form', ['placeholder' => 'Search jobs...', 'type' => 'jobs'])
        </div>

        <div class="tab-pane fade" id="content-property" role="tabpanel" aria-labelledby="tab-property" tabindex="0">
            @include('frontend.partials.search_form', ['placeholder' => 'Search property...', 'type' => 'property'])
        </div>
    </div>
</div>

                                            </div>
                                        </div>

                                        {{-- Only Visible Mobile Device --}}
                                        <div class="mobile-hero-content d-block d-lg-none text-center">
                                            <div class="logo mb-3">
                                                <a href="{{ route('home') }}">
                                                    <img src="{{ asset($setting->site_logo) }}" alt="fallaagh logo" class="img-fluid">
                                                </a>
                                            </div>
                                            <form action="#!" method="get">
                                                <div class="text-center">
                                                    <div class="input-group mb-3 mb-md-0">
                                                        <div class="input-group-prepend">
                                                            <div class="hero-icon-slider-container">
                                                                <div class="hero-icon-slider">
                                                                    <div class="hero-icon"><img
                                                                            src="https://static.dubizzle.com/frontend-web/static-resources/assets/category-icons/home-appliances.svg"
                                                                            alt="image icon"></div>
                                                                    <div class="hero-icon"><img
                                                                            src="https://static.dubizzle.com/frontend-web/static-resources/assets/category-icons/classified.svg"
                                                                            alt="image icon"></div>
                                                                    <div class="hero-icon"><img
                                                                            src="https://static.dubizzle.com/frontend-web/static-resources/assets/category-icons/property-for-sale-offplan.svg"
                                                                            alt="image icon"></div>
                                                                    <div class="hero-icon"><img
                                                                            src="https://static.dubizzle.com/frontend-web/static-resources/assets/category-icons/community.svg"
                                                                            alt="image icon"></div>
                                                                    <div class="hero-icon"><img
                                                                            src="https://static.dubizzle.com/frontend-web/static-resources/assets/category-icons/furniture-home-garden.svg"
                                                                            alt="image icon"></div>
                                                                    <div class="hero-icon"><img
                                                                            src="https://static.dubizzle.com/frontend-web/static-resources/assets/category-icons/jobs.svg"
                                                                            alt="image icon"></div>
                                                                    <div class="hero-icon"><img
                                                                            src="https://static.dubizzle.com/frontend-web/static-resources/assets/category-icons/rooms-for-rent-flatmates.svg"
                                                                            alt="image icon"></div>
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <input type="text" name="search" class="form-control shadow-none rounded-pill px-4" required
                                                            placeholder="Search for anything...">

                                                        <button type="submit" class="btn rounded-pill">
                                                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
                                                                fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"
                                                                stroke-linejoin="round" class="lucide lucide-search-icon lucide-search">
                                                                <path d="m21 21-4.34-4.34" />
                                                                <circle cx="11" cy="11" r="8" />
                                                            </svg>
                                                        </button>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>



                                <div class="container">
                                    <div class="row">
                                        <div class="col-lg-3 d-none d-lg-block" style="position: relative; z-index: 99">
                                            {{-- Sidebar --}}
                                            <div class="sidebar-category mb-4">
                                                <div class="category-header">
                                                    <i class="fas fa-list me-2"></i> All Categories
                                                </div>
                                                <ul class="category-list">
                                                     @foreach ($categories as $category)
                                                             <li class="category-item">
                                                                 <a href="{{ route('frontend.category', $category->slug) }}" class="category-link">
                                                                     @if ($category->image)
                                                                         <div class="category-icon">
                                                                             <img src="{{ asset($category->image) }}" height="40" alt="" srcset="">
                                                                         </div>
                                                                     @endif
                                                                <div class="category-text">
                                                                    <div class="category-name">{{ $category->name }}</div>
                                                                    <div class="category-count">{{ $category->ads_count }} ads</div>
                                                                </div>
                                                                <div class="category-arrow">
                                                                    <i class="fas fa-chevron-right"></i>
                                                                </div>
                                                            </a>
                                                            <div class="subcategory-menu">
                                                                    @foreach ($category->subCategory as $subCat)
                                                                            <div class="subcategory-item">

                                                                            <a href="{{ route('frontend.category', [$category->slug, $subCat->slug]) }}" class="subcategory-link">
                                                                                @if ($subCat->image)
                                                                                    <div class="subcategory-icon">
                                                                                        <img src="{{ asset($subCat->image) }}" height="40" alt="" srcset="">
                                                                                    </div>
                                                                                @endif
                                                                                <div class="subcategory-text">
                                                                                    <div class="subcategory-name">{{ $subCat->name }}</div>
                                                                                    <span class="subcategory-count">{{ $subCat->ads_count }} ads</span>
                                                                                </div>
                                                                            </a>
                                                                        </div>
                                                                    @endforeach
                                                            </div>
                                                        </li>
                                                    @endforeach
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="col-12 d-lg-none mb-4">
                                            <div class="row row-cols-3 row-cols-sm-4 row-cols-md-6 g-3">
                                                <div class="category-card">
                                                    <a href="{{ route('user.ads.create') }}" class="stretched-link"></a>
                                                    <div class="icon-box">
                                                        <i class="fas fa-plus"></i>
                                                    </div>
                                                    <p>Post ad</p>
                                                </div>
                                                <div class="category-card">
                                                    <a href="{{ route('ads.search') }}?sort_by=total_views" class="stretched-link"></a>
                                                    <div class="icon-box">
                                                        <i class="fas fa-fire"></i>
                                                    </div>
                                                    <p>Trending</p>
                                                </div>
                                                @foreach ($categories as $category)
                                                    <div class="category-card">
                                                        <a href="{{route('frontend.category', $category->slug)}}" class="stretched-link"></a>
                                                        @if ($category->image)
                                                            <div class="icon-box">
                                                                <img src="{{ asset($category->image) }}" alt="{{ $category->name }}" height="50" srcset="">
                                                            </div>
                                                        @endif

                                                        <p>{{ $category->name }}</p>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                        <div class="col-lg-9">
                                            {{-- Trending ads --}}
                                            @if ($residentialRents->count() > 0)
                                                {{-- Popular in Residential for Rent - Start --}}
                                                <div class="card-wise-products mb-4">
                                                    <div class="container">
                                                        <div class="header-title d-flex align-items-center justify-content-between mb-2">
                                                            <h2 class="section-title m-0"> Trending ads </h2>
                                                            <a href="{{ route('ads.search') }}?sort_by=total_views" class="btn p-0 d-lg-none border-0">
                                                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
                                                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                                                    stroke-linejoin="round" class="lucide lucide-move-right-icon lucide-move-right">
                                                                    <path d="M18 8L22 12L18 16" />
                                                                    <path d="M2 12H22" />
                                                                </svg>
                                                            </a>
                                                        </div>

                                                        <div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-4 g-3 mobile-cards">
                                                            @foreach ($residentialRents as $ad)
                                                                <div class="col">
                                                                    @include('frontend.ads.list-item-two')

                                                                </div>
                                                            @endforeach

                                                            {{-- Static Btn --}}
                                                            <div class="col">
                                                                <div class="card pro-card position-relative">
                                                                    <a href="{{ route('ads.search') }}"
                                                                        class="stretched-link"></a>
                                                                    <div class="d-block text-center position-absolute top-50 start-50 translate-middle shadow p-2 rounded-circle bg-white"
                                                                        style="height: 80px; width: 80px">
                                                                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
                                                                            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                                                            stroke-linecap="round" stroke-linejoin="round"
                                                                            class="lucide lucide-move-right-icon lucide-move-right mt-2">
                                                                            <path d="M18 8L22 12L18 16" />
                                                                            <path d="M2 12H22" />
                                                                        </svg>
                                                                        <span class="d-block"> View All </span>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>

                                @include('frontend.layouts.includes.location_modal')
@endsection

@push('scripts')
    <script>
        $(document).ready(function() {
            // Keep submenu open when hovering over it
            // $('.subcategory-menu').hover(function() {
            //     $(this).show();
            // }, function() {
            //     $(this).hide();
            // });

            function toggleBodyClass() {
                // Check if ANY .subcategory-menu is visible
                if ($('.subcategory-menu:visible').length > 0) {
                    // Add class to body if at least one is visible
                    $('body').addClass('show-subcategory');
                } else {
                    // Remove class from body if none are visible
                    $('body').removeClass('show-subcategory');
                }
            }

            // Check on page load
            toggleBodyClass();

            // Continuously check every 200ms in case display changes
            setInterval(toggleBodyClass, 200);
        });
    </script>


@endpush