@extends('vendor.layouts.app')

@section('title', 'Settlement Dashboard')

@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">Settlement Dashboard</h2>
            <p class="sr-sub">Track your earnings and payouts</p>
          </div>
        </div>

        <!-- Stats row -->
        <div class="stl-stats-row">
          <div class="stl-stat-card">
            <div class="stl-stat-num li-green">$45,250</div>
            <div class="stl-stat-title">Total Earnings</div>
            <div class="stl-stat-sub">This Month</div>
          </div>
          <div class="stl-stat-card">
            <div class="stl-stat-num li-orange">$8,450</div>
            <div class="stl-stat-title">Pending Settlement</div>
            <div class="stl-stat-sub">Next: Apr 30</div>
          </div>
          <div class="stl-stat-card">
            <div class="stl-stat-num stl-purple">$36,800</div>
            <div class="stl-stat-title">Paid Out</div>
            <div class="stl-stat-sub">Last 30 days</div>
          </div>
          <div class="stl-stat-card">
            <div class="stl-stat-num li-amber">$520</div>
            <div class="stl-stat-title">In Disputes</div>
            <div class="stl-stat-sub">3 cases</div>
          </div>
        </div>

        <!-- Settlement Timeline & Revenue Breakdown -->
        <div class="stl-grid-2">
          <div class="row">
            <div class="col-md-6">
              <div class="li-panel">
                <h3 class="li-panel-title">Settlement Timeline</h3>
                <div class="stl-chart-box">
                  <canvas id="settlementChart"></canvas>
                </div>
                <div class="stl-chart-caption">Next payout scheduled for <strong>April 30, 2026</strong></div>
              </div>
            </div>

            <div class="col-md-6">
              <div class="li-panel">
                <h3 class="li-panel-title">Revenue Breakdown</h3>
                <div class="order-status-list">
                  <div class="order-status-item">
                    <div class="dot-title">
                      <span class="os-label">Product Sales</span>
                      <span class="os-count">$42,100</span>
                    </div>
                    <div class="prograce-count">
                      <div class="os-bar-wrap"><div class="os-bar os-bar--orange" style="width:90%"></div></div>
                    </div>
                  </div>
                  <div class="order-status-item">
                    <div class="dot-title">
                      <span class="os-label">Shipping Fees</span>
                      <span class="os-count">$2,150</span>
                    </div>
                    <div class="prograce-count">
                      <div class="os-bar-wrap"><div class="os-bar os-bar--orange" style="width:10%"></div></div>
                    </div>
                  </div>
                  <div class="order-status-item">
                    <div class="dot-title">
                      <span class="os-label">Promotions</span>
                      <span class="os-count">$1,000</span>
                    </div>
                    <div class="prograce-count">
                      <div class="os-bar-wrap"><div class="os-bar os-bar--orange" style="width:5%"></div></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>


            <!-- Recent Settlements -->
            <div class="col-md-12">
              <div class="li-panel last">
                <div class="li-panel-header flex-wrap">
                  <h3 class="li-panel-title">Recent Settlements</h3>
                  <button class="li-btn-outline">View All</button>
                </div>
                <div class="stl-settlement-list">
                  <div class="stl-settlement-row">
                    <div class="stl-settlement-info">
                      <div class="stl-settlement-date">Apr 15, 2026</div>
                      <div class="stl-settlement-orders">45 orders</div>
                    </div>
                    <div class="stl-settlement-amount">$12,450</div>
                    <div class="li-status-badge li-status-success">Completed</div>
                    <a href="#" class="stl-settlement-details">Details</a>
                  </div>
                  <div class="stl-settlement-row">
                    <div class="stl-settlement-info">
                      <div class="stl-settlement-date">Apr 01, 2026</div>
                      <div class="stl-settlement-orders">38 orders</div>
                    </div>
                    <div class="stl-settlement-amount">$11,230</div>
                    <div class="li-status-badge li-status-success">Completed</div>
                    <a href="#" class="stl-settlement-details">Details</a>
                  </div>
                  <div class="stl-settlement-row">
                    <div class="stl-settlement-info">
                      <div class="stl-settlement-date">Mar 15, 2026</div>
                      <div class="stl-settlement-orders">52 orders</div>
                    </div>
                    <div class="stl-settlement-amount">$13,120</div>
                    <div class="li-status-badge li-status-success">Completed</div>
                    <a href="#" class="stl-settlement-details">Details</a>
                  </div>
                  <div class="stl-settlement-row">
                    <div class="stl-settlement-info">
                      <div class="stl-settlement-date">Mar 01, 2026</div>
                      <div class="stl-settlement-orders">41 orders</div>
                    </div>
                    <div class="stl-settlement-amount">$10,890</div>
                    <div class="li-status-badge li-status-success">Completed</div>
                    <a href="#" class="stl-settlement-details">Details</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
</main>
@endsection

@section('script')
<script>
const settlementCtx = document.getElementById('settlementChart').getContext('2d');
    new Chart(settlementCtx, {
      type: 'bar',
      data: {
        labels: ['Mar 01', 'Mar 15', 'Apr 01', 'Apr 15', 'Apr 20', 'Apr 25'],
        datasets: [{
          data: [10890, 13120, 11230, 12450, 9200, 11800],
          backgroundColor: '#F2701D',
          borderRadius: 4,
          maxBarThickness: 36
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          legend: { display: false },
          tooltip: {
            callbacks: {
              label: ctx => '$' + ctx.parsed.y.toLocaleString()
            }
          }
        },
        scales: {
          x: {
            grid: { display: false },
            border: { display: false },
            ticks: { display: false }
          },
          y: {
            display: false,
            grid: { display: false },
            border: { display: false }
          }
        }
      }
    });
</script>
@endsection