@extends('layout')
@section('title')
    <title>{{ __('translate.My Listing') }}</title>
@endsection
@section('body-content')

<main>


    <!-- dashboard-part-start -->
    <section class="dashboard footer-top-pad ">
        <div class="container">
            <div class="row">
                @include('profile.sidebar')
                <div class=" col-xxl-9 col-xl-8 col-lg-8">
                    @if($has_any_listings)
                        @if ($active_plan && ($promotion_quota['has_slots'] ?? false))
                            <div class="alert alert-info mb-3" role="alert">
                                {{ __('translate.All promotions quota used', ['used' => $promotion_quota['used'], 'total' => $promotion_quota['total'], 'available' => $promotion_quota['available']]) }}
                            </div>
                        @elseif (!$active_plan)
                            <div class="alert alert-warning mb-3" role="alert">
                                {{ __('translate.Please enroll first') }}
                                <a href="{{ route('pricing-plan') }}">{{ __('translate.Subscription Plan') }}</a>
                            </div>
                        @elseif ($active_plan && !($promotion_quota['has_slots'] ?? false))
                            <div class="alert alert-warning mb-3" role="alert">
                                {{ __('translate.Featured listings are not included in this subscription plan') }}
                            </div>
                        @endif
                        @php
                            $myListingsCategoryParams = function (string $category) use ($status_filter) {
                                $params = ['category' => $category];
                                if (! empty($status_filter)) {
                                    $params['status'] = $status_filter;
                                }

                                return $params;
                            };
                        @endphp
                        <div class="row align-items-end g-2">
                            <div class="col-lg-7 col-md-7">
                                <ul class="shaf-filter course-filter my-listings-category-filter">
                                    <li class="{{ ($category_filter ?? 'classified') === 'classified' ? 'active' : '' }}">
                                        <a href="{{ route('user.listing.index', $myListingsCategoryParams('classified')) }}">{{ __('translate.Classified') }}</a>
                                    </li>
                                    <li class="{{ ($category_filter ?? '') === 'real-estate' ? 'active' : '' }}">
                                        <a href="{{ route('user.listing.index', $myListingsCategoryParams('real-estate')) }}">{{ __('translate.Real Estate') }}</a>
                                    </li>
                                    <li class="{{ ($category_filter ?? '') === 'job' ? 'active' : '' }}">
                                        <a href="{{ route('user.listing.index', $myListingsCategoryParams('job')) }}">{{ __('translate.Job Post') }}</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="col-lg-5 col-md-5">
                                @php
                                    $myListingsStatusOptions = [
                                        '' => __('translate.My listings status all'),
                                        'rejected' => __('translate.My listings status rejected'),
                                        'unfinished' => __('translate.My listings status unfinished'),
                                        'published' => __('translate.My listings status published'),
                                        'promoted' => __('translate.My listings status promoted'),
                                    ];
                                @endphp
                                <div class="my-listings-status-filter-wrap">
                                <label class="form-label mb-1 small text-muted" for="myListingsStatusFilter">{{ __('translate.Filter by status') }}</label>
                                <select class="form-select form-select-sm my-listings-status-select" id="myListingsStatusFilter" aria-label="{{ __('translate.Filter by status') }}">
                                    @foreach ($myListingsStatusOptions as $statusValue => $statusLabel)
                                        @php
                                            $statusParams = ['category' => $category_filter];
                                            if ($statusValue !== '') {
                                                $statusParams['status'] = $statusValue;
                                            }
                                        @endphp
                                        <option value="{{ route('user.listing.index', $statusParams) }}" @selected(($status_filter ?? '') === $statusValue)>
                                            {{ $statusLabel }}
                                        </option>
                                    @endforeach
                                </select>
                                </div>
                            </div>
                        </div>

                        <!-- Filter Content -->
                        @if ($listings->count() > 0)
                        <div class="row mt-20px g-3 my-listings-grid">
                            @foreach ($listings as $index => $listing)
                                <div class="col-xxl-4 col-lg-6 col-sm-6{{ $listing->category_id == 3 ? ' job-listing common-class' : '' }}">

                                    @if ($listing->category_id == 3)
                                        <div class="job-listing-item">
                                            <div class="job-listing-item-inner">
                                                <div class="job-listing-img">
                                                    <img src="{{ custom_asset($listing->thumb_image, '315x230') }}" alt="img">

                                                    <div class="job-listing-img-over">
                                                        <div class="text">
                                                            @include('listing::frontend.partials.listing-promoted-badges', ['listing' => $listing])
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="job-listing-img-btn">
                                                    @include('listing::frontend.partials.listing-refresh-badge', ['listing' => $listing])

                                                    @if ($listing->is_urgent == 'enable')
                                                        <span class="txt">{{ __('translate.Urgent') }}</span>
                                                    @endif
                                                </div>
                                            </div>

                                            <div class="job-listing-content">
                                                <p>{{ currency($listing->regular_price) }}/{{ __('translate.m') }}</p>

                                                <a href="{{ listing_url($listing) }}">
                                                    <h3 class="job-listing-content-link">{{ html_decode($listing->title) }}</h3>
                                                </a>
                                                @if ($listing->adminModerationStatus() !== 'approved')
                                                    <p class="small mb-0 mt-1 text-warning">
                                                        @if (($listing->moderation_decision ?? '') === 'queued')
                                                            {{ __('translate.Moderation in progress') }}
                                                        @elseif ($listing->approved_by_admin == 'rejected')
                                                            {{ __('translate.Rejected') }}
                                                        @else
                                                            {{ __('translate.Awaiting') }}
                                                        @endif
                                                    </p>
                                                @endif
                                            </div>

                                            <div class="job-listing-content-btn">
                                                <a href="javascript:;">
                                                    <span>
                                                        <svg width="12" height="14" viewBox="0 0 10 11" fill="none"
                                                            xmlns="http://www.w3.org/2000/svg">
                                                            <path fill-rule="evenodd" clip-rule="evenodd"
                                                                d="M2.97888 0.513554C2.97888 0.298962 2.80492 0.125 2.59032 0.125C2.37573 0.125 2.20177 0.298962 2.20177 0.513554V1.7167C1.35167 2.14527 0.675371 2.86822 0.306805 3.75163H9.0185C8.64993 2.86823 7.97365 2.14529 7.12357 1.71672V0.513554C7.12357 0.298962 6.94961 0.125 6.73501 0.125C6.52042 0.125 6.34646 0.298962 6.34646 0.513554V1.4222C6.02048 1.33638 5.67823 1.29067 5.3253 1.29067H4C3.64709 1.29067 3.30485 1.33638 2.97888 1.42219V0.513554ZM0 5.29067C0 5.03013 0.0249108 4.7754 0.0724807 4.52874H9.25282C9.30039 4.7754 9.3253 5.03013 9.3253 5.29068V6.87501C9.3253 9.08415 7.53444 10.875 5.3253 10.875H4C1.79086 10.875 0 9.08415 0 6.87501V5.29067ZM4.66263 7.76653C4.94876 7.76653 5.18071 7.53458 5.18071 7.24846C5.18071 6.96234 4.94876 6.73039 4.66263 6.73039C4.37651 6.73039 4.14456 6.96234 4.14456 7.24846C4.14456 7.53458 4.37651 7.76653 4.66263 7.76653ZM7.25274 7.24846C7.25274 7.53458 7.02079 7.76653 6.73467 7.76653C6.44854 7.76653 6.21659 7.53458 6.21659 7.24846C6.21659 6.96234 6.44854 6.73039 6.73467 6.73039C7.02079 6.73039 7.25274 6.96234 7.25274 7.24846ZM2.59029 7.76653C2.87641 7.76653 3.10836 7.53458 3.10836 7.24846C3.10836 6.96234 2.87641 6.73039 2.59029 6.73039C2.30417 6.73039 2.07222 6.96234 2.07222 7.24846C2.07222 7.53458 2.30417 7.76653 2.59029 7.76653Z" />
                                                        </svg>
                                                    </span>

                                                    {{ $listing->created_at->diffForHumans() }}
                                                </a>


                                                <a href="javascript:;">
                                                    <span>
                                                        <svg width="12" height="14" viewBox="0 0 10 11" fill="none"
                                                            xmlns="http://www.w3.org/2000/svg">
                                                            <path fill-rule="evenodd" clip-rule="evenodd"
                                                                d="M4.81644 11C6.56164 11 9.47029 7.58895 9.47029 4.88889C9.47029 2.18883 7.38669 0 4.81644 0C2.2462 0 0.162598 2.18883 0.162598 4.88889C0.162598 7.58895 3.07125 11 4.81644 11ZM4.81631 6.59992C5.67306 6.59992 6.36759 5.86119 6.36759 4.94992C6.36759 4.03865 5.67306 3.29992 4.81631 3.29992C3.95956 3.29992 3.26502 4.03865 3.26502 4.94992C3.26502 5.86119 3.95956 6.59992 4.81631 6.59992Z" />
                                                        </svg>
                                                    </span>

                                                    {{ listing_card_location($listing) }}
                                                </a>
                                            </div>

                                            <div class="job-listing-btn two my-listing-job-actions my-listing-card-actions-grid">
                                                @include('listing::frontend.partials.listing-promotion-pay-btn', ['listing' => $listing])
                                                @include('listing::frontend.partials.listing-promote-actions', ['listing' => $listing])
                                                <a class="main-btn my-listing-icon-btn delete" href="javascript:;" onclick="deleteJobList({{ $listing->id }})" title="{{ __('translate.Delete') }}" aria-label="{{ __('translate.Delete') }}">
                                                    <i class="fas fa-trash"></i>
                                                </a>
                                                <a class="main-btn two my-listing-icon-btn" href="{{ listing_url($listing) }}" title="{{ __('translate.Detail Now') }}" aria-label="{{ __('translate.Detail Now') }}">
                                                    <i class="fas fa-eye"></i>
                                                </a>

                                                <form action="{{ route('user.listing.destroy', $listing->id) }}" id="remove_job_listing_{{ $listing->id }}" class="d-none" method="POST">
                                                    @csrf
                                                    @method('DELETE')

                                                </form>


                                            </div>
                                        </div>
                                    @else
                                        <div class="features-single-box ">
                                            <div class="features-thumb">
                                                <img src="{{ custom_asset($listing->thumb_image, '315x230') }}" alt="img">
                                            </div>

                                            <div class="features-single-box-over">
                                                @include('listing::frontend.partials.listing-card-top-badges', ['listing' => $listing])

                                                <div class="text">
                                                    @if (($listing->moderation_decision ?? '') === 'awaiting_promotion_payment')
                                                    <p>{{ __('translate.Listing awaiting promotion payment') }}</p>
                                                    @elseif (($listing->moderation_decision ?? '') === 'queued')
                                                    <p>{{ __('translate.Moderation in progress') }}</p>
                                                    @elseif ($listing->approved_by_admin == 'pending')
                                                    <p>{{ __('translate.Awaiting') }}</p>
                                                    @elseif ($listing->approved_by_admin == 'rejected')
                                                    <p>{{ __('translate.Rejected') }}</p>
                                                    @endif

                                                    @include('listing::frontend.partials.listing-promoted-badges', ['listing' => $listing])
                                                </div>
                                                @php($rejectionReasons = $listing->approved_by_admin == 'rejected' ? listing_rejection_reasons($listing) : [])
                                                @if ($rejectionReasons !== [])
                                                    <div class="moderation-rejection-icon">
                                                        <button type="button" class="moderation-rejection-btn" data-rejection-reasons='@json($rejectionReasons)' onclick="toggleRejectionReason(event, this)" title="{{ __('translate.View rejection reason') }}" aria-label="{{ __('translate.View rejection reason') }}">
                                                            !
                                                        </button>
                                                    </div>
                                                @endif
                                            </div>

                                            <div class="features-single-box-inner">
                                                <div class="features-single-box-inner-txt">
                                                    <p>

                                                        <span>
                                                            <svg width="11" height="12" viewBox="0 0 11 12" fill="none"
                                                                xmlns="http://www.w3.org/2000/svg">
                                                                <path
                                                                    d="M10.9992 3.43661C10.9992 4.03851 11.001 4.63998 10.9984 5.24188C10.9971 5.59777 10.8734 5.90712 10.6216 6.16046C10.253 6.53143 9.88231 6.89981 9.51201 7.26948C8.1817 8.59823 6.8514 9.92699 5.52152 11.2562C5.40297 11.3747 5.27925 11.485 5.11717 11.5405C4.78523 11.6543 4.47658 11.6069 4.21276 11.3772C3.99593 11.1881 3.79548 10.9796 3.59158 10.7762C2.52854 9.71458 1.46636 8.65166 0.405044 7.58874C0.330468 7.51421 0.257184 7.43708 0.192523 7.35393C-0.0816435 6.99977 -0.0622449 6.50946 0.245976 6.18287C0.471862 5.94331 0.708524 5.71367 0.941737 5.48058C2.27248 4.14967 3.60365 2.81919 4.93439 1.48872C5.11415 1.30905 5.29089 1.12594 5.47453 0.949719C5.70904 0.724383 5.99527 0.604606 6.31815 0.602882C7.545 0.597712 8.77142 0.600728 9.99827 0.600728C10.275 0.600728 10.5255 0.673111 10.7251 0.876474C10.8854 1.03977 10.982 1.23494 10.9885 1.46502C10.9971 1.79979 10.9975 2.13457 10.9992 2.46934C11.001 2.79162 10.9992 3.1139 10.9992 3.43618V3.43661ZM9.16327 3.35733C9.1706 2.86228 8.77271 2.45254 8.28603 2.4353C7.76571 2.41678 7.3355 2.82695 7.33075 3.34656C7.32644 3.83773 7.72562 4.24963 8.21059 4.26902C8.72616 4.2897 9.17318 3.86703 9.16327 3.35733Z" />
                                                            </svg>
                                                        </span>
                                                        {{ $listing?->sub_category?->name }}
                                                    </p>

                                                    @include('partials.listing-card-price', ['listing' => $listing])
                                                </div>


                                                <a href="{{ listing_url($listing) }}">
                                                    <h3>{{ html_decode($listing->title) }}</h3>
                                                </a>


                                                <div class="features-single-box-contact">
                                                    <div class="location">
                                                        <p><a href="javascript:;">
                                                                <span>
                                                                    <svg width="11" height="13" viewBox="0 0 11 13" fill="none"
                                                                        xmlns="http://www.w3.org/2000/svg">
                                                                        <path fill-rule="evenodd" clip-rule="evenodd"
                                                                            d="M5.5 13C7.5625 13 11 8.96876 11 5.77778C11 2.5868 8.53757 0 5.5 0C2.46243 0 0 2.5868 0 5.77778C0 8.96876 3.4375 13 5.5 13ZM5.5 7.7999C6.51252 7.7999 7.33333 6.92686 7.33333 5.8499C7.33333 4.77295 6.51252 3.8999 5.5 3.8999C4.48748 3.8999 3.66667 4.77295 3.66667 5.8499C3.66667 6.92686 4.48748 7.7999 5.5 7.7999Z" />
                                                                    </svg>
                                                                </span>
                                                                {{ listing_card_location($listing) }}
                                                            </a>
                                                        </p>
                                                    </div>


                                                    <div class="ad-listing-btn my-listing-card-actions-grid">
                                                        <a class="main-btn my-listing-icon-btn my-listing-gallery-btn" href="{{ route('user.listing-gallery', $listing->id) }}" title="{{ __('translate.Gallery') }}" aria-label="{{ __('translate.Gallery') }}">
                                                            <i class="fas fa-images"></i>
                                                        </a>
                                                        @include('listing::frontend.partials.listing-promotion-pay-btn', ['listing' => $listing])
                                                        @include('listing::frontend.partials.listing-promote-actions', ['listing' => $listing])
                                                        <a class="main-btn edit my-listing-icon-btn" href="{{ route('user.listing.edit', ['listing' => $listing->id, 'lang_code' => admin_lang()] ) }}" title="{{ __('translate.Edit') }}" aria-label="{{ __('translate.Edit') }}">
                                                            <i class="fas fa-edit"></i>
                                                        </a>
                                                        <a class="main-btn delete my-listing-icon-btn" href="javascript:;" onclick="deleteGallery({{ $listing->id }})" title="{{ __('translate.Delete') }}" aria-label="{{ __('translate.Delete') }}">
                                                            <i class="fas fa-trash"></i>
                                                        </a>
                                                        <form action="{{ route('user.listing.destroy', $listing->id) }}" id="remove_listing_{{ $listing->id }}" class="d-none" method="POST">
                                                            @csrf
                                                            @method('DELETE')
                                                        </form>
                                                    </div>

                                                </div>


                                            </div>
                                        </div>
                                    @endif
                                </div>
                            @endforeach
                        </div>
                        @if ($listings->hasPages())
                            <div class="row mt-4">
                                <div class="col-12 d-flex justify-content-center">
                                    {{ $listings->links('pagination_box') }}
                                </div>
                            </div>
                        @endif
                        @else
                            <div class="alert alert-light border mt-4 mb-0" role="alert">
                                {{ __('translate.No listings match your filters') }}
                            </div>
                        @endif
                    @else
                    <div class="row g-3">
                        <div class="col-12">
                            <section class="maintenance common-class">
                                <div class="container">
                                    <div class="row justify-content-center ">
                                        <div class="col-lg-7">
                                            <div class="maintenance-item">
                                                <div class="maintenance-thumb">
                                                    <img src="{{ custom_asset($setting->not_found) }}" alt="thumg">
                                                </div>

                                                <div class="maintenance-item-txt">
                                                    <h2>{{ __('translate.Do not have a Listing') }}</h2>
                                                    <a class="main-btn " href="{{ route('user.select-listing-purpose') }}">
                                                        <div class="btn_m">
                                                            <div class="btn_c">
                                                                <div class="btn_t1">{{ __('translate.Create New Listing') }}</div>
                                                                <div class="btn_t2">{{ __('translate.Create New Listing') }}</div>
                                                            </div>
                                                        </div>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </section>
                        </div>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </section>

    <!-- dashboard-part-end -->

    @include('partials.listing-delete-confirmation-modal')
    @include('profile.logout')
</main>

@endsection

@include('partials.listing-delete-confirmation-script')

@push('js_section')
<script>
    "use strict";

    function deleteGallery(id) {
        confirmListingDelete('remove_listing_' + id);
    }

    function deleteJobList(id) {
        confirmListingDelete('remove_job_listing_' + id);
    }

        function toggleRejectionReason(event, button) {
            event.preventDefault();
            event.stopPropagation();

            let target = document.getElementById('globalRejectionReasonPopover');
            if (!target) {
                let reasons = [];
                try {
                    reasons = JSON.parse(button.getAttribute('data-rejection-reasons') || '[]');
                } catch (e) {
                    reasons = [];
                }

                target = document.createElement('div');
                target.id = 'globalRejectionReasonPopover';
                target.className = 'moderation-rejection-popover';
                target.setAttribute('role', 'status');
                document.body.appendChild(target);
            }

            if (!target) {
                return;
            }

            let reasons = [];
            try {
                reasons = JSON.parse(button.getAttribute('data-rejection-reasons') || '[]');
            } catch (e) {
                reasons = [];
            }

            const listItems = reasons.map(function(reason) {
                return '<li>' + $('<div>').text(reason).html() + '</li>';
            }).join('');
            target.innerHTML = '<button type="button" class="moderation-rejection-popover-close" onclick="closeRejectionReason(event)" aria-label="{{ __('translate.Close') }}">&times;</button><strong>{{ __('translate.Rejection reason') }}</strong><ul>' + listItems + '</ul>';

            const isVisibleForButton = target.classList.contains('is-visible') && target.dataset.sourceButton === button.getAttribute('data-popover-source');
            if (isVisibleForButton) {
                target.classList.remove('is-visible');
                return;
            }

            if (!button.getAttribute('data-popover-source')) {
                button.setAttribute('data-popover-source', 'rejection-' + Math.random().toString(36).slice(2));
            }
            target.dataset.sourceButton = button.getAttribute('data-popover-source');

            const rect = button.getBoundingClientRect();
            const width = 320;
            target.style.width = width + 'px';
            target.style.left = '0px';
            target.style.top = '0px';
            target.style.right = 'auto';
            target.style.bottom = 'auto';
            target.classList.add('is-visible');

            const height = target.offsetHeight;
            const left = Math.max(12, Math.min(window.innerWidth - width - 12, rect.right - width));
            const top = Math.max(12, rect.top + window.scrollY - height - 12);

            target.style.left = left + 'px';
            target.style.top = top + 'px';
        }

        function closeRejectionReason(event) {
            if (event) {
                event.preventDefault();
                event.stopPropagation();
            }

            const target = document.getElementById('globalRejectionReasonPopover');
            if (target) {
                target.classList.remove('is-visible');
                target.dataset.sourceButton = '';
            }
        }

        document.addEventListener('click', function(event) {
            if (!event.target.closest('.moderation-rejection-icon') && !event.target.closest('.moderation-rejection-popover')) {
                document.querySelectorAll('.moderation-rejection-popover.is-visible').forEach(function(popover) {
                    popover.classList.remove('is-visible');
                });
            }
        });

        const myListingsStatusFilter = document.getElementById('myListingsStatusFilter');
        if (myListingsStatusFilter) {
            myListingsStatusFilter.addEventListener('change', function() {
                if (this.value) {
                    window.location.href = this.value;
                }
            });
        }

    </script>


@endpush