@extends('layout.app')
@section('content')
    <style>
        .top-slider-banner {
            top: 0;
            left: 0;
            width: 100%;
            background: linear-gradient(90deg, #32CD32 0%, #9BE7FF 50%, #32CD32 100%);
            color: #fff;
            overflow: hidden;
            height: 40px;
            display: flex;
            align-items: center;
            font-size: 16px;
            font-weight: bold;
            border-radius: 10px;
        }

        .slider-content {
            display: inline-block;
            white-space: nowrap;
            padding-left: 100%;
            animation: slide-left 80s linear infinite;
            cursor: pointer;
        }

        @keyframes slide-left {
            0% { transform: translateX(0); }
            100% { transform: translateX(-100%); }
        }

    </style>
    <!-- Floating Advertisement Banner -->
    <div class="top-slider-banner" >
        <div class="slider-content">
            📢 Want More Customers? Promote Your Business Here — Advertise Now & Reach Thousands! 🚀 &nbsp;&nbsp;&nbsp;&nbsp;
            📢 $50/for 2 weeks; $75/for month. There is a 20% discount for small businesses with < 20 employees. 🚀 &nbsp;&nbsp;&nbsp;&nbsp;
        </div>
    </div>
    <section class="friend-request-sec">

        <div class="container">

            <div class="row">

                <div class="col-lg-12">
                    <div class="friend-request-content text-center mb-5">
                        <h4 class="mainHead">Market Place for IT Products & Services (Except Jobs & Training) </h4>
                        <p>Advertise products such as computer hardware, gaming gear, and Computer furniture, as well as
                            services such as consulting. We have a separate page for "IT-training" and "IT-related
                            jobs". Approval of ad can take time, kindly allow upto 48 hours for ad to appear after
                            placing it.</p>
                    </div>
                </div>

                <div class="container-fluid">
                    <div class="row">

                        <!-- Left Sidebar: Search + Ads -->
{{--                        <div class="col-lg-3">--}}
{{--                            <div class="post-flex mb-4">--}}
{{--                                @if (Auth::check() && \Illuminate\Support\Facades\Auth::user()->hasRole('user'))--}}
{{--                                <a href="{{route('market.place.training.create')}}" class="themeBtn w-100" style="margin-top: 17px">--}}
{{--                                    Create Listing--}}
{{--                                </a>--}}
{{--                                @else--}}
{{--                                    <a href="{{route('guest.user')}}" class="themeBtn w-100" style="margin-top: 17px">--}}
{{--                                        Create Listing--}}
{{--                                    </a>--}}
{{--                                @endif--}}
{{--                            </div>--}}

{{--                            <!-- Search Card -->--}}
{{--                            <div class="suggestion-card mt-4">--}}
{{--                                <div class="d-flex justify-content-between align-items-center">--}}
{{--                                    <h5 class="mb-0">Search</h5>--}}
{{--                                    <div class="dropdown">--}}
{{--                                        <button class="btn btn-sm btn-light dropdown-toggle" type="button"--}}
{{--                                                id="searchDropdown"--}}
{{--                                                data-bs-toggle="dropdown" aria-expanded="false">--}}
{{--                                            <i class="far fa-ellipsis-v"></i>--}}
{{--                                        </button>--}}

{{--                                    </div>--}}
{{--                                </div>--}}
{{--                                <div class="search-container">--}}
{{--                                    <input type="text" placeholder="Search..." id="searchMarketPlace">--}}
{{--                                </div>--}}
{{--                            </div>--}}
{{--                            <div id="searchResults" class="mt-3"></div>--}}
{{--                            <!-- Ad Card -->--}}
{{--                            @include('components.view-advertisement')--}}
{{--                            <div class="help-card">--}}
{{--                                <ul>--}}
{{--                                    <li>--}}
{{--                                        <a href="{{route('newsPage')}}">News</a>--}}
{{--                                        <a href="#">About</a>--}}
{{--                                        <a href="#">Privacy Policy</a>--}}
{{--                                    </li>--}}
{{--                                    <li>--}}
{{--                                        <a href="{{route('contact')}}">Contact</a>--}}
{{--                                        <a href="#">Cookies Policy</a>--}}
{{--                                    </li>--}}
{{--                                    <li>--}}
{{--                                        <a href="#">Career</a>--}}
{{--                                        <a href="#">Language</a>--}}
{{--                                        <a href="#">Copyright Policy</a>--}}
{{--                                    </li>--}}
{{--                                </ul>--}}
{{--                                <div class="copyrght-chat">--}}
{{--                                    <a href="#" class="cht-bold">404 Chats</a>--}}
{{--                                    <span><i class="fas fa-copyright"></i>Copyright 2025</span>--}}
{{--                                </div>--}}
{{--                            </div>--}}
{{--                        </div>--}}

                        <!-- Right Content: Marketplace Posts -->
{{--                        <div class="col-lg-9">--}}
{{--                            <div class="row" id="postsWrapper">--}}
{{--                                @if($markets->isEmpty())--}}
{{--                                    <h3 id="noMarket">No Listing Found!</h3>--}}
{{--                                @else--}}
{{--                                    @foreach($markets as $market)--}}
{{--                                        <div class="col-lg-4 col-md-6 mb-4">--}}
{{--                                            <div class="friend-request-box marketplace-box h-100">--}}
{{--                                                <div class="friend-request-box-top">--}}
{{--                                                    <div class="epic-flex justify-content-between">--}}
{{--                                                        <div class="loc-flex d-block">--}}
{{--                                                            <h6>{{ $market->user->name ?? '' }}</h6>--}}
{{--                                                            <p style="    font-size: 18px;--}}
{{--    font-weight: bold;">{{ $market->title ?? '' }}</p>--}}
{{--                                                            <div class="loc-flex">--}}
{{--                                                                <a href="#"><img src="{{asset('images/loc-icon.png')}}"--}}
{{--                                                                                 class="img-fluid"--}}
{{--                                                                                 alt="img">{{$market->location ?? ''}}--}}
{{--                                                                </a>--}}
{{--                                                            </div>--}}
{{--                                                        </div>--}}
{{--                                                        <div class="bokmark">--}}
{{--                                                            <button type="button" class="btn btn-light bookmark-btn"--}}
{{--                                                                    style="border-radius: 50%; padding: 6px;">--}}
{{--                                                                <i class="fal fa-bookmark"></i>--}}
{{--                                                            </button>--}}
{{--                                                        </div>--}}

{{--                                                    </div>--}}
{{--                                                    <img--}}
{{--                                                        src="{{ $market->getFirstMediaUrl('market_image') ?: asset('images/no-image.png') }}"--}}

{{--                                                        class="img-fluid"--}}
{{--                                                        style="border-radius: 134px;    height: 236px;margin-top: 42px;--}}
{{--                                                     margin-bottom: 30px"/>--}}
{{--                                                    <ul class="friend-request-list">--}}
{{--                                                        <li>--}}
{{--                                                            <button>${{ $market->price ?? '' }}</button>--}}
{{--                                                        </li>--}}
{{--                                                        <li>--}}
{{--                                                            <button>Add To Cart</button>--}}
{{--                                                        </li>--}}
{{--                                                    </ul>--}}
{{--                                                </div>--}}
{{--                                                <div class="friend-request-box-bottom text-center">--}}
{{--                                                    <a href="{{route('single.market.place.details',$market->id)}}">Read--}}
{{--                                                        More</a>--}}
{{--                                                </div>--}}
{{--                                            </div>--}}
{{--                                        </div>--}}
{{--                                    @endforeach--}}
{{--                                @endif--}}
{{--                            </div>--}}
{{--                        </div>--}}
                        <section class="tabular-section" style="padding: 2rem!important;">
                            <div class="container">

                                <div class="row align-items-center">
                                    <div class="col-md-4 col-md-3 mb-3">
                                        <!-- Action Buttons -->
                                        <div class="suggestion-card p-3 shadow-sm mb-4 rounded bg-white">
                                            <div class="row g-2">
                                                <div class="col-6">
                                                    @if (Auth::check() && Auth::user()->hasRole('user'))
                                                        <a class="btn btn-primary w-100" href="{{route('market.place.training.create')}}">
                                                            <i class="fas fa-edit me-2"></i> Create Listing
                                                        </a>
                                                    @else
                                                        <a class="btn btn-primary w-100" href="{{ route('guest.user') }}">
                                                            <i class="fas fa-edit me-2"></i> Create Listing
                                                        </a>
                                                    @endif
                                                </div>
                                                <div class="col-6">
                                                    <a class="btn btn-warning w-100" href="{{ route('addInfo') }}">
                                                        <i class="fas fa-plus-circle me-2"></i> Add Info
                                                    </a>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- Links -->
                                        <div class="help-card p-3 shadow-sm rounded bg-light">
                                            <ul class="list-unstyled mb-3">
                                                <li class="d-flex justify-content-between">
                                                    <a href="{{ route('newsPage') }}">News</a>
                                                    <a href="#">About</a>
                                                    <a href="#">Privacy Policy</a>
                                                </li>
                                                <li class="d-flex justify-content-between">
                                                    <a href="{{ route('contact') }}">Contact</a>
                                                    <a href="#">Cookies Policy</a>
                                                </li>
                                                <li class="d-flex justify-content-between">
                                                    <a href="#">Career</a>
                                                    <a href="#">Language</a>
                                                    <a href="#">Copyright Policy</a>
                                                </li>
                                            </ul>
                                            <div class="copyrght-chat text-center border-top pt-2">
                                                <a href="#" class="fw-bold text-dark">404 Chats</a>
                                                <div class="small text-muted">
                                                    <i class="fas fa-copyright"></i> Copyright 2025
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-4">
                                        <div class="quarter-wrap">

                                            <figure class="quarteimg">
                                                <img src="{{asset('images/quarterimg3.png')}}" class="img-fluid" alt="">
                                                <a href="javascript:;" class="bookmarks"><i class="fal fa-bookmark"></i></a>
                                            </figure>
                                            <div class="quratercntnt">
                                                <h3>Lorem Ipsum is simply dummy</h3>
                                                <div class="loc">
                                                    <a href=""> <span><i class="fas fa-location-circle"></i></span>Location</a>
                                                </div>
                                                <h4>Price : <span>$256</span> <strong>/Month</strong></h4>
                                                <ul class="quraterlist1">
                                                    <li>Ad Type: <span> Offered</span></li>
                                                    <li>Gender: <span>Male</span></li>
                                                </ul>
                                                <ul class="quraterlist2">
                                                    <li>Room <span class="span1"> 404 CHEATS</span></li>
                                                    <li>Avid From: <span>15 Aug 2025</span></li>
                                                </ul>
                                                <div class="graphicquarter">
                                                    <div class="garphicimage">
                                                        <figure>
                                                            <img src="images/nayaimg1.png" class="img-fluid" alt="">
                                                        </figure>
                                                        <h3>Naya <span>Graphic Designer</span></h3>
                                                    </div>
                                                    <a href="{{route('response.page')}}" class="themeBtn">Respond</a>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="quarter-wrap">

                                            <figure class="quarteimg">
                                                <img src="{{asset('images/quarterimg3.png')}}" class="img-fluid" alt="">
                                                <a href="javascript:;" class="bookmarks"><i class="fal fa-bookmark"></i></a>
                                            </figure>
                                            <div class="quratercntnt">
                                                <h3>Lorem Ipsum is simply dummy</h3>
                                                <div class="loc">
                                                    <a href=""> <span><i class="fas fa-location-circle"></i></span>Location</a>
                                                </div>
                                                <h4>Price : <span>$256</span> <strong>/Month</strong></h4>
                                                <ul class="quraterlist1">
                                                    <li>Ad Type: <span> Offered</span></li>
                                                    <li>Gender: <span>Male</span></li>
                                                </ul>
                                                <ul class="quraterlist2">
                                                    <li>Room <span class="span1"> 404 CHEATS</span></li>
                                                    <li>Avid From: <span>15 Aug 2025</span></li>
                                                </ul>
                                                <div class="graphicquarter">
                                                    <div class="garphicimage">
                                                        <figure>
                                                            <img src="images/nayaimg1.png" class="img-fluid" alt="">
                                                        </figure>
                                                        <h3>Naya <span>Graphic Designer</span></h3>
                                                    </div>
                                                    <a href="{{route('response.page')}}" class="themeBtn">Respond</a>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="quarter-wrap">

                                            <figure class="quarteimg">
                                                <img src="{{asset('images/quarterimg3.png')}}" class="img-fluid" alt="">
                                                <a href="javascript:;" class="bookmarks"><i class="fal fa-bookmark"></i></a>
                                            </figure>
                                            <div class="quratercntnt">
                                                <h3>Lorem Ipsum is simply dummy</h3>
                                                <div class="loc">
                                                    <a href=""> <span><i class="fas fa-location-circle"></i></span>Location</a>
                                                </div>
                                                <h4>Price : <span>$256</span> <strong>/Month</strong></h4>
                                                <ul class="quraterlist1">
                                                    <li>Ad Type: <span> Offered</span></li>
                                                    <li>Gender: <span>Male</span></li>
                                                </ul>
                                                <ul class="quraterlist2">
                                                    <li>Room <span class="span1"> 404 CHEATS</span></li>
                                                    <li>Avid From: <span>15 Aug 2025</span></li>
                                                </ul>
                                                <div class="graphicquarter">
                                                    <div class="garphicimage">
                                                        <figure>
                                                            <img src="images/nayaimg1.png" class="img-fluid" alt="">
                                                        </figure>
                                                        <h3>Naya <span>Graphic Designer</span></h3>
                                                    </div>
                                                    <a href="{{route('response.page')}}" class="themeBtn">Respond</a>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="quarter-wrap">

                                            <figure class="quarteimg">
                                                <img src="{{asset('images/quarterimg3.png')}}" class="img-fluid" alt="">
                                                <a href="javascript:;" class="bookmarks"><i class="fal fa-bookmark"></i></a>
                                            </figure>
                                            <div class="quratercntnt">
                                                <h3>Lorem Ipsum is simply dummy</h3>
                                                <div class="loc">
                                                    <a href=""> <span><i class="fas fa-location-circle"></i></span>Location</a>
                                                </div>
                                                <h4>Price : <span>$256</span> <strong>/Month</strong></h4>
                                                <ul class="quraterlist1">
                                                    <li>Ad Type: <span> Offered</span></li>
                                                    <li>Gender: <span>Male</span></li>
                                                </ul>
                                                <ul class="quraterlist2">
                                                    <li>Room <span class="span1"> 404 CHEATS</span></li>
                                                    <li>Avid From: <span>15 Aug 2025</span></li>
                                                </ul>
                                                <div class="graphicquarter">
                                                    <div class="garphicimage">
                                                        <figure>
                                                            <img src="images/nayaimg1.png" class="img-fluid" alt="">
                                                        </figure>
                                                        <h3>Naya <span>Graphic Designer</span></h3>
                                                    </div>
                                                    <a href="{{route('response.page')}}" class="themeBtn">Respond</a>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="quarter-wrap">

                                            <figure class="quarteimg">
                                                <img src="{{asset('images/quarterimg3.png')}}" class="img-fluid" alt="">
                                                <a href="javascript:;" class="bookmarks"><i class="fal fa-bookmark"></i></a>
                                            </figure>
                                            <div class="quratercntnt">
                                                <h3>Lorem Ipsum is simply dummy</h3>
                                                <div class="loc">
                                                    <a href=""> <span><i class="fas fa-location-circle"></i></span>Location</a>
                                                </div>
                                                <h4>Price : <span>$256</span> <strong>/Month</strong></h4>
                                                <ul class="quraterlist1">
                                                    <li>Ad Type: <span> Offered</span></li>
                                                    <li>Gender: <span>Male</span></li>
                                                </ul>
                                                <ul class="quraterlist2">
                                                    <li>Room <span class="span1"> 404 CHEATS</span></li>
                                                    <li>Avid From: <span>15 Aug 2025</span></li>
                                                </ul>
                                                <div class="graphicquarter">
                                                    <div class="garphicimage">
                                                        <figure>
                                                            <img src="images/nayaimg1.png" class="img-fluid" alt="">
                                                        </figure>
                                                        <h3>Naya <span>Graphic Designer</span></h3>
                                                    </div>
                                                    <a href="{{route('response.page')}}" class="themeBtn">Respond</a>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="quarter-wrap">

                                            <figure class="quarteimg">
                                                <img src="{{asset('images/quarterimg3.png')}}" class="img-fluid" alt="">
                                                <a href="javascript:;" class="bookmarks"><i class="fal fa-bookmark"></i></a>
                                            </figure>
                                            <div class="quratercntnt">
                                                <h3>Lorem Ipsum is simply dummy</h3>
                                                <div class="loc">
                                                    <a href=""> <span><i class="fas fa-location-circle"></i></span>Location</a>
                                                </div>
                                                <h4>Price : <span>$256</span> <strong>/Month</strong></h4>
                                                <ul class="quraterlist1">
                                                    <li>Ad Type: <span> Offered</span></li>
                                                    <li>Gender: <span>Male</span></li>
                                                </ul>
                                                <ul class="quraterlist2">
                                                    <li>Room <span class="span1"> 404 CHEATS</span></li>
                                                    <li>Avid From: <span>15 Aug 2025</span></li>
                                                </ul>
                                                <div class="graphicquarter">
                                                    <div class="garphicimage">
                                                        <figure>
                                                            <img src="images/nayaimg1.png" class="img-fluid" alt="">
                                                        </figure>
                                                        <h3>Naya <span>Graphic Designer</span></h3>
                                                    </div>
                                                    <a href="{{route('response.page')}}" class="themeBtn">Respond</a>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </section>
                    </div>

                </div>


                @include('components.advertisement')

            </div>

        </div>
    </section>
    <div class="modal fade" id="marketplaceModal" tabindex="-1" aria-labelledby="marketplaceModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content shadow-lg rounded-4">
                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title" id="marketplaceModalLabel">Post New <span>Listing</span></h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                            aria-label="Close"></button>
                </div>

                <form id="marketplaceForm" enctype="multipart/form-data">
                    <div class="modal-body">

                        <div class="mb-3">
                            <label class="form-label">What are you posting?</label>
                            <select class="form-select" name="type_selector" required>
                                <option value="" disabled selected>Select an option</option>
                                <option value="product">Product</option>
                                <option value="service">Service</option>
                            </select>
                        </div>

                        <!-- Common Fields -->
                        <div class="mb-3">
                            <label class="form-label">Title</label>
                            <input type="text" class="form-control" name="title" required
                                   placeholder="Enter product/service title">
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Category</label>
                            <select class="form-select" name="category" required>
                                <option value="" disabled selected>Select a category</option>
                                <option value="technology">Technology</option>
                                <option value="design">Design</option>
                                <option value="education">Education</option>
                                <option value="health">Health</option>
                                <option value="business">Business</option>
                                <option value="other">Other</option>
                            </select>
                        </div>

                        <!-- Location -->
                        <div class="mb-3">
                            <label class="form-label">Location</label>
                            <input type="text" class="form-control" name="location" required
                                   placeholder="e.g. New York, Remote, etc.">
                        </div>

                        <!-- Price -->
                        <div class="mb-3">
                            <label class="form-label">Price (USD)</label>
                            <input type="number" class="form-control" name="price" min="0" step="0.01"
                                   placeholder="Enter price">
                        </div>

                        <!-- Description -->
                        <div class="mb-3">
                            <label class="form-label">Description</label>
                            <textarea class="form-control" name="description" rows="4" required
                                      placeholder="Describe the product or service in detail..."></textarea>
                        </div>

                        <!-- Upload (for products/services) -->
                        <div class="mb-3">
                            <label class="form-label">Upload Images (optional)</label>
                            <input type="file" class="form-control" name="images[]" multiple accept="image/*">
                            <small class="text-muted">You can upload up to 5 images.</small>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary w-100">Post Listing</button>
                    </div>
                </form>
            </div>
        </div>
    </div>




@endsection
@push('script')

    <script>
        $('#marketplaceForm').on('submit', function (e) {
            e.preventDefault();

            let form = $(this)[0];
            let formData = new FormData(form);

            $.ajax({
                url: '{{route('market.place.store')}}',
                method: 'POST',
                data: formData,
                processData: false, // Required for FormData
                contentType: false, // Required for FormData

                success: function (response) {
                    if (response.success) {
                        showToast(response.message);
                        $('#postsWrapper .loading-spinner').remove();
                        $('#noMarket').hide();
                        const postHtml = generatePostHtml(response.data, response.user, response.image);
                        $('#postsWrapper').prepend(postHtml);

                        $('#marketplaceForm')[0].reset();
                        $('#marketplaceModal').modal('hide');
                    }
                },

                error: function (xhr) {
                    if (xhr.status === 422) {
                        let errors = xhr.responseJSON.errors;
                        let errorMessages = '';

                        for (let field in errors) {
                            errorMessages += errors[field][0] + '\n';
                        }

                        alert(errorMessages); // Show all validation errors
                    } else {
                        alert('Something went wrong. Please try again.');
                    }
                }
            });
        });

        function showToast(message, type = 'success') {
            $('#liveToast').removeClass('bg-success bg-danger').addClass('bg-' + type);
            $('#toastMessage').html(message);
            const toast = new bootstrap.Toast(document.getElementById('liveToast'));
            toast.show();
        }

        function generatePostHtml(market, userName, imageUrl) {
            const image = imageUrl; // fallback image
            const title = market.title || '';
            const price = market.price || '0';
            const location = market.location || 'No-location';
            const user = userName || 'Anonymous';
            const fallbackImage = "{{ asset('images/no-image.png') }}";

            return `
                                            <div class="col-lg-4 col-md-6 mb-4">
                                        <div class="friend-request-box marketplace-box h-100">
                                            <div class="friend-request-box-top">
                                                <div class="epic-flex justify-content-between">
                                                    <div class="loc-flex d-block">
                                                        <h6>${user}</h6>
                                                        <p style="    font-size: 18px;
    font-weight: bold;">${title}</p>
                                                        <div class="loc-flex">
                                                            <a href="#"><img src="{{asset('images/loc-icon.png')}}"
                                                                             class="img-fluid"
                                                                             alt="img">${location}</a>
                                                        </div>
                                                    </div>
                                                    <div class="bokmark">
                                                        <a href="javascript:;"><i class="fal fa-bookmark"></i></a>
                                                    </div>
                                                </div>
                                                <img
                                                    src="${image ? image : fallbackImage}"

                                                    class="img-fluid"
                                                    style="border-radius: 134px;    height: 236px;margin-top: 42px;
                                                     margin-bottom: 30px"/>
                                                <ul class="friend-request-list">
                                                    <li>
                                                        <button>$${price}</button>
                                                    </li>
                                                    <li>
                                                        <button>Add To Cart</button>
                                                    </li>
                                                </ul>
                                            </div>
                                            <div class="friend-request-box-bottom text-center">
                                                <a href="#">Read More</a>
                                            </div>
                                        </div>
                                    </div>
    `;
        }

        $(document).ready(function () {
            // Live search as user types
            $('#searchMarketPlace').on('keyup', function () {
                let query = $(this).val().trim();

                if (query.length < 2) {
                    $('#searchResults').html('');
                    return;
                }

                $.ajax({
                    url: "{{ route('marketplace.search') }}",
                    method: "GET",
                    data: {query: query},
                    success: function (response) {
                        let suggestions = response.suggestions;
                        let html = '';

                        if (suggestions.length === 0) {
                            html = '<p class="text-muted">No results found.</p>';
                        } else {
                            html = '<ul class="list-group">';
                            suggestions.forEach(post => {
                                html += `
                            <li class="list-group-item" data-id="${post.id}">
                                <strong>${post.title}</strong><br>
                                <small>${post.type} – ${post.location}</small>
                                <small>${post.description} – ${post.category}</small>
                            </li>`;
                            });
                            html += '</ul>';
                        }

                        $('#searchResults').html(html);
                    }
                });
            });

            // When a suggestion is clicked
            $('#searchResults').on('click', '.list-group-item', function () {
                const postId = $(this).data('id');

                if (!postId) return;

                $.ajax({
                    url: `{{asset('/market/preview/')}}/${postId}`,
                    method: 'GET',
                    success: function (res) {
                        $('#postsWrapper').html(res.html);
                        $('#searchResults').empty(); // Clear suggestions
                        $('#searchMarketPlace').val(''); // Clear input (optional)
                    },
                    error: function () {
                        $('#searchResults').html('<p class="text-danger">Failed to load preview.</p>');
                    }
                });
            });
        });

        document.addEventListener('click', function (e) {
            if (e.target.closest('.bookmark-btn')) {
                const btn = e.target.closest('.bookmark-btn');
                const icon = btn.querySelector('i');

                if (!btn.classList.contains('bookmarked')) {
                    btn.classList.add('animate');
                    icon.classList.remove('fal', 'fa-bookmark');
                    icon.classList.add('fas', 'fa-bookmark'); // Solid bookmark icon
                    btn.classList.add('bookmarked');

                    setTimeout(() => {
                        btn.classList.remove('animate');
                    }, 300);
                } else {
                    btn.classList.remove('bookmarked');
                    icon.classList.remove('fas', 'fa-bookmark');
                    icon.classList.add('fal', 'fa-bookmark');
                }
            }
        });
    </script>
@endpush