@extends('layout.app')
@section('content')
    <style>
        .bookmark-btn.bookmarked i {
            color: green;
            transition: transform 0.3s ease, color 0.3s ease;
        }

        .bookmark-btn.animate i {
            transform: scale(1.3);
        }
    </style>
    <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">
                        <h2 class="mainHead">Marketplace</h2>
                    </div>
                </div>
                @include('components.advertisement')
                <div class="container-fluid">
                    <div class="row">

                        <!-- Left Sidebar: Search + Ads -->
                        <div class="col-lg-3">
                            <div class="post-flex mb-4">
                                <a href="#" class="themeBtn w-100" data-bs-toggle="modal" style="margin-top: 17px"
                                   data-bs-target="#marketplaceModal">
                                    Place Listing
                                </a>
                            </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>
                    @php
                        $images = $market->getMedia('market_image');
                    @endphp
                        <!-- Right Content: Marketplace Posts -->
                        <div class="col-lg-9">
                            <div class="row" id="postsWrapper">

                                <div class="col-lg-12 col-md-12 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>

                                            <div id="marketCarousel{{ $market->id }}" class="carousel slide mt-4 mb-4" data-bs-ride="carousel">
                                                <div class="carousel-inner">
                                                    @forelse($images as $index => $image)
                                                        <div class="carousel-item {{ $index == 0 ? 'active' : '' }}">
                                                            <img src="{{ $image->getUrl() }}" class="d-block mx-auto img-fluid"
                                                                >
                                                        </div>
                                                    @empty
                                                        <div class="carousel-item active">
                                                            <img src="{{ asset('images/no-image.png') }}" class="d-block mx-auto img-fluid"
                                                               >
                                                        </div>
                                                    @endforelse
                                                </div>
                                                @if(count($images) > 1)
                                                    <button class="carousel-control-prev" type="button" data-bs-target="#marketCarousel{{ $market->id }}" data-bs-slide="prev">
                                                        <span class="carousel-control-prev-icon"></span>
                                                    </button>
                                                    <button class="carousel-control-next" type="button" data-bs-target="#marketCarousel{{ $market->id }}" data-bs-slide="next">
                                                        <span class="carousel-control-next-icon"></span>
                                                    </button>
                                                @endif
                                            </div>

                                            <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">
                                            <div class="epic-flex justify-content-between">
                                                <div class="loc-flex d-block text-start mb-2 ms-2">
                                                    <h4 class="mb-1">{{ $market->type ?? '' }}</h4>
                                                    <h6 class="text-muted">{{ $market->category ?? '' }}</h6>
                                                </div>
                                            </div>

                                            <p class="text-start ms-2" style="font-size: 15px;">
                                                {{ $market->description ?? '' }}
                                            </p>
                                        </div>


                                    </div>
                                </div>

                            </div>
                        </div>

                    </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