@extends('vendor.layouts.app')

@section('title', 'Product Performance')

@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">Product Performance</h2>
            <p class="sr-sub">Analyze individual product metrics</p>
          </div>
        </div>

        <!-- Toolbar: search + filter + export -->
        <div class="pp-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 by Category</button>
          <button class="li-btn-outline">Export Report</button>
        </div>

        <!-- Stats row -->
        <div class="stl-stats-row">
          <div class="stl-stat-card">
            <div class="stl-stat-num li-orange">234</div>
            <div class="stl-stat-title">Active Products</div>
          </div>
          <div class="stl-stat-card">
            <div class="stl-stat-num li-green">89%</div>
            <div class="stl-stat-title">Avg Sell-Through</div>
          </div>
          <div class="stl-stat-card">
            <div class="stl-stat-num stl-purple">4.6</div>
            <div class="stl-stat-title">Avg Rating</div>
          </div>
          <div class="stl-stat-card">
            <div class="stl-stat-num li-red">2.1%</div>
            <div class="stl-stat-title">Return Rate</div>
          </div>
        </div>

        <!-- Product performance list -->
        <div class="pp-list">
          <div class="pp-card">
            <div class="pp-card-top">
              <div class="pp-thumb"></div>
              <div class="pp-info">
                <div class="pp-name">Wireless Headphones Pro</div>
                <div class="pp-meta">
                  <span>2,345 views</span>
                  <span>856 clicks</span>
                  <span class="pp-rating">4.8?</span>
                </div>
              </div>
              <div class="pp-stats-block">
                <div class="pp-amount li-green">$8,450</div>
                <div class="pp-units">56 units sold</div>
              </div>
            </div>
            <div class="pp-card-bottom">
              <div>
                <div class="pp-metric-label">Conversion</div>
                <div class="pp-metric-value">6.5%</div>
              </div>
              <div>
                <div class="pp-metric-label">Click Rate</div>
                <div class="pp-metric-value">36.5%</div>
              </div>
              <div>
                <div class="pp-metric-label">Avg Price</div>
                <div class="pp-metric-value">$150.89</div>
              </div>
              <a href="#" class="pp-view-link">View Details</a>
            </div>
          </div>

          <div class="pp-card">
            <div class="pp-card-top">
              <div class="pp-thumb"></div>
              <div class="pp-info">
                <div class="pp-name">Smart Watch Ultra</div>
                <div class="pp-meta">
                  <span>1,890 views</span>
                  <span>623 clicks</span>
                  <span class="pp-rating">4.7?</span>
                </div>
              </div>
              <div class="pp-stats-block">
                <div class="pp-amount li-green">$6,230</div>
                <div class="pp-units">21 units sold</div>
              </div>
            </div>
            <div class="pp-card-bottom">
              <div>
                <div class="pp-metric-label">Conversion</div>
                <div class="pp-metric-value">3.4%</div>
              </div>
              <div>
                <div class="pp-metric-label">Click Rate</div>
                <div class="pp-metric-value">33.0%</div>
              </div>
              <div>
                <div class="pp-metric-label">Avg Price</div>
                <div class="pp-metric-value">$296.67</div>
              </div>
              <a href="#" class="pp-view-link">View Details</a>
            </div>
          </div>

          <div class="pp-card">
            <div class="pp-card-top">
              <div class="pp-thumb"></div>
              <div class="pp-info">
                <div class="pp-name">Bluetooth Speaker</div>
                <div class="pp-meta">
                  <span>3,120 views</span>
                  <span>1,234 clicks</span>
                  <span class="pp-rating">4.5?</span>
                </div>
              </div>
              <div class="pp-stats-block">
                <div class="pp-amount li-green">$4,890</div>
                <div class="pp-units">61 units sold</div>
              </div>
            </div>
            <div class="pp-card-bottom">
              <div>
                <div class="pp-metric-label">Conversion</div>
                <div class="pp-metric-value">4.9%</div>
              </div>
              <div>
                <div class="pp-metric-label">Click Rate</div>
                <div class="pp-metric-value">39.6%</div>
              </div>
              <div>
                <div class="pp-metric-label">Avg Price</div>
                <div class="pp-metric-value">$80.16</div>
              </div>
              <a href="#" class="pp-view-link">View Details</a>
            </div>
          </div>

          <div class="pp-card">
            <div class="pp-card-top">
              <div class="pp-thumb"></div>
              <div class="pp-info">
                <div class="pp-name">USB-C Cable 6ft</div>
                <div class="pp-meta">
                  <span>4,567 views</span>
                  <span>2,012 clicks</span>
                  <span class="pp-rating">4.9?</span>
                </div>
              </div>
              <div class="pp-stats-block">
                <div class="pp-amount li-green">$2,340</div>
                <div class="pp-units">180 units sold</div>
              </div>
            </div>
            <div class="pp-card-bottom">
              <div>
                <div class="pp-metric-label">Conversion</div>
                <div class="pp-metric-value">8.9%</div>
              </div>
              <div>
                <div class="pp-metric-label">Click Rate</div>
                <div class="pp-metric-value">44.1%</div>
              </div>
              <div>
                <div class="pp-metric-label">Avg Price</div>
                <div class="pp-metric-value">$13.00</div>
              </div>
              <a href="#" class="pp-view-link">View Details</a>
            </div>
          </div>
        </div>
</main>
@endsection