@extends('backend.layout.master-tailwind')
@section('title', __('User Reports'))

@section('admin_styles')
<style>
.reports-layout {
    display: grid;
    grid-template-columns: 420px 1fr;
    border-top: 1px solid var(--border);
    height: calc(100vh - var(--topbar-h, 48px) - 90px);
}
.reports-list-pane {
    border-right: 1px solid var(--border);
    overflow: auto;
    background: var(--bg-elev);
}
.reports-detail-pane {
    overflow: auto;
    padding: 24px;
    position: relative;
}
.back-to-list {
    display: none;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-2);
    background: none;
    border: none;
    padding: 0;
    margin-bottom: 14px;
    cursor: pointer;
}
.back-to-list:hover { color: var(--text); }

@media (max-width: 768px) {
    .reports-layout {
        grid-template-columns: 1fr;
        height: auto;
        min-height: calc(100vh - var(--topbar-h, 48px) - 80px);
    }
    .reports-list-pane { border-right: none; }
    .reports-detail-pane { display: none; padding: 16px; }
    .reports-detail-pane.mob-show { display: block; }
    .reports-list-pane.mob-hide { display: none; }
    .back-to-list { display: flex; }
}
</style>
@endsection

@section('content')
<div class="page" style="padding:0;max-width:none">
  <div class="page-head" style="padding:18px 24px 12px;margin:0">
    <div>
      <h1 class="page-title">{{ __('User Reports') }}</h1>
      <p class="page-sub">{{ $all_reports->total() }} {{ __('reports total') }}</p>
    </div>
  </div>

  <div class="reports-layout">

    <!-- Left Pane (List) -->
    <div class="reports-list-pane">
      @forelse($all_reports as $index => $report)
        <div class="report-list-item"
             data-target="report-detail-{{ $report->id }}"
             style="padding:12px 14px;border-bottom:1px solid var(--border);cursor:pointer;background:transparent;border-left:2px solid transparent">
          <div style="display:flex;align-items:center;gap:8px;margin-bottom:4px">
            @if($report->status == 0)
                <span class="tag warn">{{ __('In Review') }}</span>
            @elseif($report->status == 1)
                <span class="tag success">{{ __('Closed') }}</span>
            @else
                <span class="tag danger">{{ __('Rejected') }}</span>
            @endif
            <span style="font-family:var(--font-mono);font-size:11.5px;color:var(--text-3)">#{{ $report->id }}</span>
            <span style="margin-left:auto;font-size:11px;color:var(--text-3)">{{ $report->created_at->diffForHumans(null, true, true) }}</span>
          </div>
          <div style="font-size:13px;font-weight:500;margin-bottom:3px">{{ $report->title }}</div>
          <div style="font-size:11.5px;color:var(--text-3)">{{ ucfirst($report->reporter) }} report</div>
          <div style="display:flex;align-items:center;gap:8px;margin-top:6px">
            <span style="font-family:var(--font-mono);font-size:11.5px">Order #{{ $report->order_id }}</span>
          </div>
        </div>
      @empty
        <div style="padding:24px;text-align:center;color:var(--text-3)">{{ __('No reports found.') }}</div>
      @endforelse
      <div style="padding:12px;display:flex;justify-content:center">
        @include('backend.layout.partials.paginator', ['paginator' => $all_reports, 'label' => 'reports'])
      </div>
    </div>

    <!-- Right Pane (Details) -->
    <div class="reports-detail-pane">
      <button type="button" class="back-to-list" id="back-to-list-btn">
        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" style="width:16px;height:16px"><path d="M19 12H5"/><path d="m12 19-7-7 7-7"/></svg>
        {{ __('Back to list') }}
      </button>

      @forelse($all_reports as $index => $report)
        <div class="report-detail-panel hidden" id="report-detail-{{ $report->id }}">
          <div style="display:flex;align-items:center;gap:10px;margin-bottom:6px;flex-wrap:wrap">
            <span style="font-family:var(--font-mono);font-size:11.5px;color:var(--text-3)">#{{ $report->id }} · Order #{{ $report->order_id }}</span>
            @if($report->status == 0)
                <span class="tag warn">{{ __('In Review') }}</span>
            @elseif($report->status == 1)
                <span class="tag success">{{ __('Closed') }}</span>
            @else
                <span class="tag danger">{{ __('Rejected') }}</span>
            @endif
          </div>
          <h2 style="margin:0;font-size:18px;letter-spacing:-0.015em;word-break:break-word">{{ $report->title }}</h2>
          <div style="color:var(--text-3);font-size:13px;margin-top:4px">{{ __('Reported by') }} {{ ucfirst($report->reporter) }}</div>

          <div class="page-actions" style="margin-top:14px;flex-wrap:wrap">
            <button class="btn primary update-status-btn" data-id="{{ $report->id }}" data-status="{{ $report->status }}" data-note="{{ $report->note }}">{{ __('Update Status') }}</button>
            <a href="{{ route('admin.order.details', $report->order_id) }}" class="btn">{{ __('View Order') }}</a>
          </div>

          <div class="grid grid-12" style="margin-top:18px">
            <div class="card span-12">
              <div class="card-head"><div class="card-title">{{ __('Description') }}</div></div>
              <div class="card-body" style="font-size:13px;line-height:1.5">
                {!! strip_tags($report->description) !!}
              </div>
            </div>
          </div>

          <div class="grid grid-12" style="margin-top:18px">
            <div class="card span-12">
              <div class="card-head"><div class="card-title">{{ __('Admin Note') }}</div></div>
              <div class="card-body" style="font-size:13px;line-height:1.5;color:var(--text-2)">
                {{ $report->note ?: __('No note provided yet.') }}
              </div>
            </div>
          </div>
        </div>
      @empty
      @endforelse
    </div>

  </div>
</div>

<!-- Update Status Modal -->
<div class="modal-wrap" id="edit-request-modal" style="display:none;position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,0.5);z-index:9999;align-items:center;justify-content:center">
    <div class="modal-content" style="background:var(--bg-elev);border:1px solid var(--border);border-radius:12px;padding:24px;width:400px;max-width:90%">
        <form method="POST" action="{{ route('admin.user.report.update') }}">
            @csrf
            <input type="hidden" name="report_id" id="modal_report_id">
            <div style="font-weight:600;font-size:16px;margin-bottom:16px">{{ __('Update Report Status') }}</div>

            <div style="margin-bottom:16px">
                <label style="display:block;font-size:13px;font-weight:500;margin-bottom:6px">{{ __('Status') }}</label>
                <select name="status" id="modal_status" style="width:100%;padding:8px 12px;border-radius:6px;border:1px solid var(--border);background:var(--bg);color:var(--text);font-size:13px">
                    <option value="0">{{ __('In Review') }}</option>
                    <option value="1">{{ __('Closed') }}</option>
                    <option value="2">{{ __('Rejected') }}</option>
                </select>
            </div>

            <div style="margin-bottom:24px">
                <label style="display:block;font-size:13px;font-weight:500;margin-bottom:6px">{{ __('Note') }}</label>
                <textarea name="note" id="modal_note" rows="4" style="width:100%;padding:8px 12px;border-radius:6px;border:1px solid var(--border);background:var(--bg);color:var(--text);font-size:13px;box-sizing:border-box"></textarea>
            </div>

            <div style="display:flex;gap:12px;justify-content:flex-end">
                <button type="button" class="btn close-modal-btn">{{ __('Cancel') }}</button>
                <button type="submit" class="btn primary">{{ __('Update') }}</button>
            </div>
        </form>
    </div>
</div>
@endsection

@section('script')
<script>
document.addEventListener('DOMContentLoaded', function () {
    var listPane   = document.querySelector('.reports-list-pane');
    var detailPane = document.querySelector('.reports-detail-pane');
    var backBtn    = document.getElementById('back-to-list-btn');

    function isMobile() { return window.innerWidth <= 768; }

    function activateItem(item, switchPane) {
        // Reset all items
        document.querySelectorAll('.report-list-item').forEach(function (el) {
            el.classList.remove('active');
            el.style.background = 'transparent';
            el.style.borderLeftColor = 'transparent';
        });
        // Activate clicked item
        item.classList.add('active');
        item.style.background = 'var(--hover)';
        item.style.borderLeftColor = 'var(--accent)';

        // Hide all detail panels, show target
        document.querySelectorAll('.report-detail-panel').forEach(function (el) {
            el.classList.add('hidden');
        });
        var target = document.getElementById(item.getAttribute('data-target'));
        if (target) target.classList.remove('hidden');

        sessionStorage.setItem('selected_report_target', item.getAttribute('data-target'));

        // On mobile: switch to detail pane
        if (switchPane && isMobile()) {
            listPane.classList.add('mob-hide');
            detailPane.classList.add('mob-show');
        }
    }

    // List item click
    document.querySelectorAll('.report-list-item').forEach(function (item) {
        item.addEventListener('click', function () {
            activateItem(item, true);
        });
    });

    // Back button
    if (backBtn) {
        backBtn.addEventListener('click', function () {
            detailPane.classList.remove('mob-show');
            listPane.classList.remove('mob-hide');
        });
    }

    // Auto-select on load (no pane switch — just highlight + show panel)
    var savedTarget = sessionStorage.getItem('selected_report_target');
    var itemToSelect = savedTarget
        ? document.querySelector('.report-list-item[data-target="' + savedTarget + '"]')
        : null;
    if (!itemToSelect) {
        itemToSelect = document.querySelector('.report-list-item');
    }
    if (itemToSelect) {
        activateItem(itemToSelect, false);
    }

    // Modal
    var modal = document.getElementById('edit-request-modal');
    document.querySelectorAll('.update-status-btn').forEach(function (btn) {
        btn.addEventListener('click', function () {
            document.getElementById('modal_report_id').value = btn.getAttribute('data-id');
            document.getElementById('modal_status').value    = btn.getAttribute('data-status');
            document.getElementById('modal_note').value      = btn.getAttribute('data-note') || '';
            modal.style.display = 'flex';
        });
    });
    document.querySelectorAll('.close-modal-btn').forEach(function (btn) {
        btn.addEventListener('click', function () { modal.style.display = 'none'; });
    });
});
</script>
@endsection