@php($rid = 'report-' . $type . '-' . $id)
<div class="report-listing" id="{{ $rid }}" style="position:relative;display:inline-block;">
    <button type="button" class="report-listing-toggle" aria-label="{{ __('messages.report_listing') }}"
            style="background:none;border:1px solid #ddd;border-radius:50%;width:34px;height:34px;line-height:1;cursor:pointer;">⋯</button>
    <div class="report-listing-menu" style="display:none;position:absolute;right:0;top:40px;z-index:50;background:#fff;border:1px solid #ddd;border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,.12);white-space:nowrap;">
        <button type="button" class="report-listing-open" style="background:none;border:0;padding:10px 16px;cursor:pointer;">
            <i class="fa-regular fa-flag"></i> {{ __('messages.report_listing') }}
        </button>
    </div>

    <div class="report-listing-modal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:9999;align-items:center;justify-content:center;padding:16px;overflow-y:auto;">
        <form class="report-listing-form" style="background:#fff;width:100%;max-width:460px;margin:auto;padding:24px;border-radius:10px;">
            @csrf
            <input type="hidden" name="item_type" value="{{ $type }}">
            <input type="hidden" name="item_id" value="{{ $id }}">
            <h4 style="margin-bottom:15px;">{{ __('messages.report_listing') }}</h4>
            <div class="report-listing-body">
                <label style="display:block;margin-bottom:6px;font-weight:600;">{{ __('messages.report_reason') }}</label>
                @foreach(\App\Models\ListingReport::REASONS as $r)
                    <label style="display:block;margin-bottom:4px;cursor:pointer;">
                        <input type="radio" name="reason" value="{{ $r }}" required> {{ __('messages.report_reason_' . $r) }}
                    </label>
                @endforeach
                <textarea name="description" rows="3" maxlength="2000" style="width:100%;margin-top:12px;border:1px solid #ccc;border-radius:6px;padding:8px;"
                          placeholder="{{ __('messages.report_description_optional') }}"></textarea>
            </div>
            <div class="report-listing-message" style="margin:10px 0;"></div>
            <div style="display:flex;gap:10px;justify-content:flex-end;">
                <button type="button" class="report-listing-close rts-btn btn-primary" style="background:#999;">{{ __('messages.report_close') }}</button>
                <button type="submit" class="rts-btn btn-primary report-listing-submit">{{ __('messages.report_send') }}</button>
            </div>
        </form>
    </div>
</div>
<script>
(function () {
    var root = document.getElementById(@json($rid));
    var menu = root.querySelector('.report-listing-menu');
    var modal = root.querySelector('.report-listing-modal');
    document.body.appendChild(modal); // évite qu'un parent transformé décentre le fixed
    var form = modal.querySelector('.report-listing-form');
    var msg = modal.querySelector('.report-listing-message');
    root.querySelector('.report-listing-toggle').addEventListener('click', function (e) {
        e.stopPropagation();
        menu.style.display = menu.style.display === 'none' ? 'block' : 'none';
    });
    document.addEventListener('click', function () { menu.style.display = 'none'; });
    root.querySelector('.report-listing-open').addEventListener('click', function () {
        menu.style.display = 'none';
        modal.style.display = 'flex';
    });
    modal.querySelector('.report-listing-close').addEventListener('click', function () { modal.style.display = 'none'; });
    form.addEventListener('submit', function (e) {
        e.preventDefault();
        var btn = form.querySelector('.report-listing-submit');
        btn.disabled = true;
        fetch(@json(route('listing.report')), {
            method: 'POST',
            headers: {'Accept': 'application/json', 'X-CSRF-TOKEN': form.querySelector('[name=_token]').value},
            body: new FormData(form)
        }).then(function (r) { return r.json().then(function (j) { return {ok: r.ok, j: j}; }); })
          .then(function (res) {
              if (res.ok) {
                  form.querySelector('.report-listing-body').style.display = 'none';
                  btn.style.display = 'none';
                  msg.style.color = 'green';
                  msg.textContent = res.j.message;
              } else {
                  btn.disabled = false;
                  msg.style.color = 'red';
                  msg.textContent = res.j.message || @json(__('messages.report_error'));
              }
          }).catch(function () {
              btn.disabled = false;
              msg.style.color = 'red';
              msg.textContent = @json(__('messages.report_error'));
          });
    });
})();
</script>