@extends('admin.layouts.app')

@section('title', 'Pending Payouts')

@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">Pending Payouts</h2>
            <p class="sr-sub">Track upcoming settlements</p>
          </div>
        </div>

        <!-- Stats row -->
        <div class="stl-stats-row pp">
          <div class="stl-stat-card">
            <div class="stl-stat-num li-orange">$8,450</div>
            <div class="stl-stat-title">Next Payout</div>
            <div class="stl-stat-sub">Apr 30, 2026</div>
          </div>
          <div class="stl-stat-card">
            <div class="stl-stat-num stl-purple">$3,120</div>
            <div class="stl-stat-title">In Review</div>
            <div class="stl-stat-sub">2-3 business days</div>
          </div>
          <div class="stl-stat-card">
            <div class="stl-stat-num li-green">68</div>
            <div class="stl-stat-title">Orders Pending</div>
            <div class="stl-stat-sub">Last 15 days</div>
          </div>
        </div>

        <!-- Recent Settlements -->
        <div class="col-md-12">
          <div class="li-panel">
            <div class="li-panel-header">
              <h3 class="li-panel-title">Payout Schedule</h3>
              <!-- <button class="li-btn-outline">View All</button> -->
            </div>
            <div class="stl-settlement-list pp">
              <div class="stl-settlement-row">
                <div class="stl-settlement-info">
                  <div class="stl-settlement-date">Apr 16 - Apr 30, 2026</div>
                  <div class="stl-settlement-orders">32 orders • Payout on Apr 30</div>
                </div>
                <div class="stl-settlement-amount">$8,450.00</div>
                <div class="li-status-badge li-status-success">Processing</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">May 01 - May 15, 20266</div>
                  <div class="stl-settlement-orders">15 orders • Payout on May 15</div>
                </div>
                <div class="stl-settlement-amount">$3,120.00</div>
                <div class="li-status-badge li-status-success">In Review</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">May 16 - May 31, 2026</div>
                  <div class="stl-settlement-orders">8 orders • Payout on May 31</div>
                </div>
                <div class="stl-settlement-amount">$1,890.00</div>
                <div class="li-status-badge li-status-success">Pending</div>
                <a href="#" class="stl-settlement-details">Details</a>
              </div>
            </div>
          </div>
        </div>

        <!-- Payout Breakdown -->
         <div class="col-md-12">
          <div class="li-panel last">
            <h3 class="li-panel-title">Payout Breakdown</h3>
            <div class="pb-table">
              <div class="pb-row pb-row-head">
                <div class="pb-desc">Description</div>
                <div class="pb-amount">Amount</div>
              </div>
              <div class="pb-row">
                <div class="pb-desc">Gross Sales</div>
                <div class="pb-amount">$9,200.00</div>
              </div>
              <div class="pb-row">
                <div class="pb-desc">Platform Commission (8%)</div>
                <div class="pb-amount pb-amount-neg">-$736.00</div>
              </div>
              <div class="pb-row">
                <div class="pb-desc">Payment Processing Fee</div>
                <div class="pb-amount pb-amount-neg">-$92.00</div>
              </div>
              <div class="pb-row">
                <div class="pb-desc">Shipping Reimbursement</div>
                <div class="pb-amount pb-amount-pos">+$78.00</div>
              </div>
              <div class="pb-row pb-row-total">
                <div class="pb-desc">Net Payout</div>
                <div class="pb-amount pb-amount-pos">$8,450.00</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