@extends('vendor.layouts.app')

@section('title', 'Refund 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">Refund Management</h2>
            <p class="sr-sub">Track and process refunds</p>
          </div>
        </div>

        <!-- Stats row -->
        <div class="stl-stats-row">
          <div class="stl-stat-card">
            <div class="stl-stat-num li-green">12</div>
            <div class="stl-stat-title">Pending Refunds</div>
          </div>
          <div class="stl-stat-card">
            <div class="stl-stat-num li-orange">45</div>
            <div class="stl-stat-title">Completed</div>
          </div>
          <div class="stl-stat-card">
            <div class="stl-stat-num stl-purple">$1,245</div>
            <div class="stl-stat-title">Refunded This Month</div>
          </div>
          <div class="stl-stat-card">
            <div class="stl-stat-num li-amber">2.1%</div>
            <div class="stl-stat-title">Refund Rate</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">Pending</button>
          <button class="ph-filter-tab" data-status="approved">Approved</button>
          <button class="ph-filter-tab" data-status="rejected">Rejected</button>
          <button class="ph-filter-tab" data-status="completed">Completed</button>
        </div>

        <div class="rf-list">
          <div class="rf-card" data-status="pending">
            <div class="rf-card-top">
              <div>
                <div class="rf-order-id">ORD-2026-1234</div>
                <div class="rf-order-meta">John Smith &bull; Wireless Headphones Pro</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 25, 2026</div>
                </div>
                <div class="rf-status-wrap">
                  <span class="li-status-badge li-status-pending">Pending Approval</span>
                </div>
              </div>
            </div>
            <div class="rf-card-bottom">
              <div class="rf-reason">Reason: Defective product</div>
              <div class="rf-actions flex-wrap">
                <button class="rf-btn rf-btn-reject">Reject</button>
                <button class="rf-btn rf-btn-approve">Approve</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">ORD-2026-1235</div>
                <div class="rf-order-meta">Sarah Johnson &bull; Smart Watch Ultra</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 24, 2026</div>
                </div>
                <div class="rf-status-wrap">
                  <span class="li-status-badge li-status-approved">Approved</span>
                </div>
              </div>
            </div>
            <div class="rf-card-bottom">
              <div class="rf-reason">Reason: Wrong item received</div>
              <div class="rf-actions flex-wrap">
                <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">ORD-2026-1236</div>
                <div class="rf-order-meta">Mike Davis &bull; Bluetooth Speaker</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 23, 2026</div>
                </div>
                <div class="rf-status-wrap">
                  <span class="li-status-badge li-status-success">Completed</span>
                </div>
              </div>
            </div>
            <div class="rf-card-bottom">
              <div class="rf-reason">Reason: Changed mind</div>
              <div class="rf-actions flex-wrap">
                <a href="#" class="rf-view-link">View Details</a>
              </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