@extends('vendor.layouts.app')

@section('title', 'Dispute Management')

@section('style')
@endsection

@section('content')
<main class="dash-content">
<!-- Page header -->
        <div class="sr-page-header d-flex align-items-center justify-content-between flex-wrap">
          <div>
            <h2 class="sr-title">Dispute Management</h2>
            <p class="sr-sub">Resolve payment disputes and chargebacks</p>
          </div>
        </div>

        <!-- Stats row -->
        <div class="stl-stats-row">
          <div class="stl-stat-card">
            <div class="stl-stat-num li-green">3</div>
            <div class="stl-stat-title">Open Disputes</div>
          </div>
          <div class="stl-stat-card">
            <div class="stl-stat-num li-orange">5</div>
            <div class="stl-stat-title">Under Review</div>
          </div>
          <div class="stl-stat-card">
            <div class="stl-stat-num stl-purple">18</div>
            <div class="stl-stat-title">Resolved</div>
          </div>
          <div class="stl-stat-card">
            <div class="stl-stat-num li-amber">$520</div>
            <div class="stl-stat-title">Amount in Dispute</div>
          </div>
        </div>

        <!-- Toolbar: search + filter + export -->
        <!-- <div class="ph-toolbar">
          <div class="ph-search-wrap">
            <svg class="ph-search-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
            <input type="text" class="ph-search-input" placeholder="Search...">
          </div>
          <button class="li-btn-outline">Filter</button>
        </div> -->

        <!-- Refund list -->
        <div class="ph-filter-tabs">
          <button class="ph-filter-tab active" data-status="all">All</button>
          <button class="ph-filter-tab" data-status="pending">open</button>
          <button class="ph-filter-tab" data-status="approved">Under Review</button>
          <button class="ph-filter-tab" data-status="rejected">Resolved</button>
          <button class="ph-filter-tab" data-status="completed">Lost</button>
        </div>

        <div class="rf-list">
          <div class="rf-card" data-status="pending">
            <div class="rf-card-top">
              <div>
                <div class="rf-order-id">DIS-2026-001 • ORD-2026-5678</div>
                <div class="rf-order-meta">Alex Turner • Item not as described</div>
              </div>
              <div class="rf-card-right flex-wrap">
                <div class="rf-amount-block">
                  <div class="rf-amount">$299.99</div>
                  <div class="rf-date">Apr 26, 2026</div>
                </div>
                <div class="rf-status-wrap">
                  <span class="li-status-badge li-status-pending">open</span>
                </div>
              </div>
            </div>
            <div class="rf-card-bottom">
              <div class="rf-reason">Response deadline: <span>May 03, 2026</span></div>
              <div class="rf-actions">
                <button class="rf-btn rf-btn-evidence">Submit Evidence</button>
                <a href="#" class="rf-view-link">View Details</a>
              </div>
            </div>
          </div>

          <div class="rf-card" data-status="approved">
            <div class="rf-card-top">
              <div>
                <div class="rf-order-id">DIS-2026-002 • ORD-2026-5679</div>
                <div class="rf-order-meta">Emma Wilson • Unauthorized charge</div>
              </div>
              <div class="rf-card-right flex-wrap">
                <div class="rf-amount-block">
                  <div class="rf-amount">$149.99</div>
                  <div class="rf-date">Apr 20, 2026</div>
                </div>
                <div class="rf-status-wrap">
                  <span class="li-status-badge li-status-approved">Under Review</span>
                </div>
              </div>
            </div>
            <div class="rf-card-bottom">
              <div class="rf-reason">Response deadline: <span> Apr 27, 2026 </span></div>
              <div class="rf-actions">
                <button class="rf-btn rf-btn-evidence">Submit Evidence</button>
                <a href="#" class="rf-view-link">View Details</a>
              </div>
            </div>
          </div>

          <div class="rf-card" data-status="completed">
            <div class="rf-card-top">
              <div>
                <div class="rf-order-id">DIS-2026-003 • ORD-2026-5680</div>
                <div class="rf-order-meta">David Lee • Item not received</div>
              </div>
              <div class="rf-card-right flex-wrap">
                <div class="rf-amount-block">
                  <div class="rf-amount">$79.99</div>
                  <div class="rf-date">Apr 15, 2026</div>
                </div>
                <div class="rf-status-wrap">
                  <span class="li-status-badge li-status-success">Resolved - Won</span>
                </div>
              </div>
            </div>
          </div>
        </div>
</main>
@endsection

@section('script')
<script>
document.querySelectorAll('.ph-filter-tab').forEach(function (tab) {
      tab.addEventListener('click', function () {
        document.querySelectorAll('.ph-filter-tab').forEach(function (t) { t.classList.remove('active'); });
        tab.classList.add('active');

        const status = tab.dataset.status;
        document.querySelectorAll('.rf-card').forEach(function (card) {
          card.style.display = (status === 'all' || card.dataset.status === status) ? '' : 'none';
        });
      });
    });
</script>
@endsection