@extends('admin.layouts.app')

@section('title', 'Sales Analytics')

@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">Sales Analytics</h2>
            <p class="sr-sub">Track and analyze your sales performance</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 Revenue</div>
            <div class="stl-stat-sub li-green">+18.5% vs last month</div>
          </div>
          <div class="stl-stat-card">
            <div class="stl-stat-num li-orange">234</div>
            <div class="stl-stat-title">Orders</div>
            <div class="stl-stat-sub li-orange">+12.3% vs last month</div>
          </div>
          <div class="stl-stat-card">
            <div class="stl-stat-num stl-purple">$193.38</div>
            <div class="stl-stat-title">Avg Order Value</div>
            <div class="stl-stat-sub stl-purple">+5.4% vs last month</div>
          </div>
          <div class="stl-stat-card">
            <div class="stl-stat-num li-amber">3.2%</div>
            <div class="stl-stat-title">Conversion Rate</div>
            <div class="stl-stat-sub li-amber">+0.4% vs last month</div>
          </div>
        </div>

        <!-- Revenue Trend -->
        <div class="row">
          <div class="col-md-6">
            <div class="li-panel">
              <div class="li-panel-header flex-wrap">
                <h3 class="li-panel-title">Revenue Trend</h3>
                <div class="rt-range-tabs">
                  <button class="rt-range-btn active" data-range="30d">30 Days</button>
                  <button class="rt-range-btn" data-range="90d">90 Days</button>
                  <button class="rt-range-btn" data-range="1y">1 Year</button>
                </div>
              </div>
              <div class="stl-chart-box">
                <canvas id="revenueTrendChart"></canvas>
              </div>
            </div>
          </div>

          <div class="col-md-6">
            <div class="li-panel ">
              <h3 class="li-panel-title pb-4">Sales by Category</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>

        <div class="row">
          <!-- Top Performing Products -->
          <div class="col-md-6">
            <div class="li-panel">
              <h3 class="li-panel-title">Top Performing Products</h3>
              <div class="tp-list">
                <div class="tp-row">
                  <div class="tp-thumb"></div>
                  <div class="tp-info">
                    <div class="tp-name">Wireless Headphones Pro</div>
                    <div class="tp-units">56 units sold</div>
                  </div>
                  <div class="tp-stats">
                    <div class="tp-amount li-green">$8,450</div>
                    <div class="tp-growth li-green">+15%</div>
                  </div>
                </div>
                <div class="tp-row">
                  <div class="tp-thumb"></div>
                  <div class="tp-info">
                    <div class="tp-name">Smart Watch Ultra</div>
                    <div class="tp-units">21 units sold</div>
                  </div>
                  <div class="tp-stats">
                    <div class="tp-amount li-green">$6,230</div>
                    <div class="tp-growth li-green">+22%</div>
                  </div>
                </div>
                <div class="tp-row">
                  <div class="tp-thumb"></div>
                  <div class="tp-info">
                    <div class="tp-name">Bluetooth Speaker</div>
                    <div class="tp-units">61 units sold</div>
                  </div>
                  <div class="tp-stats">
                    <div class="tp-amount li-green">$4,890</div>
                    <div class="tp-growth li-green">+8%</div>
                  </div>
                </div>
                <div class="tp-row">
                  <div class="tp-thumb"></div>
                  <div class="tp-info">
                    <div class="tp-name">USB-C Cable 6ft</div>
                    <div class="tp-units">180 units sold</div>
                  </div>
                  <div class="tp-stats">
                    <div class="tp-amount li-green">$2,340</div>
                    <div class="tp-growth li-green">+5%</div>
                  </div>
                </div>
                <div class="tp-row">
                  <div class="tp-thumb"></div>
                  <div class="tp-info">
                    <div class="tp-name">Laptop Stand</div>
                    <div class="tp-units">40 units sold</div>
                  </div>
                  <div class="tp-stats">
                    <div class="tp-amount li-green">$1,990</div>
                    <div class="tp-growth li-green">+12%</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <!-- Top Performing Products -->
          <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>

          <div class="col-md-12">
            <div class="li-panel">
              <div class="li-panel-header flex-wrap">
                <h3 class="li-panel-title">Recent Transactions</h3>
                <div class="tx-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 transactions...">
                  </div>
                  <button class="li-btn-outline">Filter</button>
                  <button class="li-btn-brand">Export</button>
                </div>
              </div>

              <div class="tx-table">
                <div class="tx-head">
                  <div class="tx-col-id">Transaction ID</div>
                  <div class="tx-col-customer">Customer</div>
                  <div class="tx-col-product">Product</div>
                  <div class="tx-col-date">Date &amp; Time</div>
                  <div class="tx-col-amount">Amount</div>
                  <div class="tx-col-payment">Payment</div>
                  <div class="tx-col-status">Status</div>
                </div>

                <div class="tx-row">
                  <div class="tx-col-id"><span class="tx-id">TXN-20480</span></div>
                  <div class="tx-col-customer">
                    <div class="tx-avatar">SJ</div>
                    <span class="tx-customer-name">Sarah Johnson</span>
                  </div>
                  <div class="tx-col-product"><span class="tx-product">Wireless Headphones</span></div>
                  <div class="tx-col-date">
                    <div class="tx-date">Jun 17, 2026</div>
                    <div class="tx-time">09:42 AM</div>
                  </div>
                  <div class="tx-col-amount"><span class="tx-amount">$149.99</span></div>
                  <div class="tx-col-payment">
                    <div class="tx-pay">
                      <span class="tx-pay-mark--visa">VISA</span>
                      <span class="tx-pay-num">****4521</span>
                    </div>
                  </div>
                  <div class="tx-col-status"><span class="li-status-badge li-status-success">Completed</span></div>
                </div>

                <div class="tx-row tx-row--alt">
                  <div class="tx-col-id"><span class="tx-id">TXN-20477</span></div>
                  <div class="tx-col-customer">
                    <div class="tx-avatar">JS</div>
                    <span class="tx-customer-name">John Smith</span>
                  </div>
                  <div class="tx-col-product"><span class="tx-product">USB-C Cable 6ft (&times;3)</span></div>
                  <div class="tx-col-date">
                    <div class="tx-date">Jun 16, 2026</div>
                    <div class="tx-time">03:22 PM</div>
                  </div>
                  <div class="tx-col-amount"><span class="tx-amount">$38.97</span></div>
                  <div class="tx-col-payment">
                    <div class="tx-pay">
                      <span class="tx-pay-mark--applepay">
                        <svg width="10" height="12" viewBox="0 0 14 16" fill="#fff"><path d="M7.4 2.4c.4-.5.7-1.2.6-1.9-.6 0-1.3.4-1.7.9-.4.4-.7 1.1-.6 1.8.7.1 1.3-.3 1.7-.8zM8.2 2.6c-1 0-1.8.6-2.3.6-.5 0-1.2-.5-2-.5-1 0-2 .6-2.5 1.5-1.1 1.9-.3 4.7.8 6.2.5.8 1.1 1.6 1.9 1.6.7 0 1-.5 1.9-.5.9 0 1.1.5 1.9.5.8 0 1.4-.8 1.9-1.6.3-.5.5-.9.7-1.4-1.8-.7-2-3.2-.3-4.1-.5-.7-1.3-1.1-2-1.2z"/></svg>
                        Pay
                      </span>
                    </div>
                  </div>
                  <div class="tx-col-status"><span class="li-status-badge li-status-success">Completed</span></div>
                </div>

                <div class="tx-row">
                  <div class="tx-col-id"><span class="tx-id">TXN-20476</span></div>
                  <div class="tx-col-customer">
                    <div class="tx-avatar">PP</div>
                    <span class="tx-customer-name">Priya Patel</span>
                  </div>
                  <div class="tx-col-product"><span class="tx-product">Laptop Stand</span></div>
                  <div class="tx-col-date">
                    <div class="tx-date">Jun 16, 2026</div>
                    <div class="tx-time">11:47 AM</div>
                  </div>
                  <div class="tx-col-amount"><span class="tx-amount">$49.99</span></div>
                  <div class="tx-col-payment">
                    <div class="tx-pay">
                      <span class="tx-pay-mark--visa">VISA</span>
                      <span class="tx-pay-num">****7703</span>
                    </div>
                  </div>
                  <div class="tx-col-status"><span class="li-status-badge li-status-error">Refunded</span></div>
                </div>

                <div class="tx-row tx-row--alt">
                  <div class="tx-col-id"><span class="tx-id">TXN-20473</span></div>
                  <div class="tx-col-customer">
                    <div class="tx-avatar">AH</div>
                    <span class="tx-customer-name">Ahmed Hassan</span>
                  </div>
                  <div class="tx-col-product"><span class="tx-product">Smart Watch Ultra</span></div>
                  <div class="tx-col-date">
                    <div class="tx-date">Jun 15, 2026</div>
                    <div class="tx-time">10:05 AM</div>
                  </div>
                  <div class="tx-col-amount"><span class="tx-amount">$299.00</span></div>
                  <div class="tx-col-payment">
                    <div class="tx-pay">
                      <span class="tx-pay-mark--paypal">PayPal</span>
                    </div>
                  </div>
                  <div class="tx-col-status"><span class="li-status-badge li-status-success">Completed</span></div>
                </div>

                <div class="tx-row">
                  <div class="tx-col-id"><span class="tx-id">TXN-20474</span></div>
                  <div class="tx-col-customer">
                    <div class="tx-avatar">LC</div>
                    <span class="tx-customer-name">Lily Chen</span>
                  </div>
                  <div class="tx-col-product"><span class="tx-product">Phone Stand + Cable Bundle</span></div>
                  <div class="tx-col-date">
                    <div class="tx-date">Jun 15, 2026</div>
                    <div class="tx-time">02:10 PM</div>
                  </div>
                  <div class="tx-col-amount"><span class="tx-amount">$64.49</span></div>
                  <div class="tx-col-payment">
                    <div class="tx-pay">
                      <svg class="tx-pay-mark--mastercard" width="28" height="16" viewBox="0 0 28 16"><circle cx="10" cy="8" r="8" fill="#EB001B"/><circle cx="18" cy="8" r="8" fill="#F79E1B" fill-opacity="0.85"/></svg>
                      <span class="tx-pay-num">****3310</span>
                    </div>
                  </div>
                  <div class="tx-col-status"><span class="li-status-badge li-status-approved">Processing</span></div>
                </div>

                <div class="tx-row tx-row--alt">
                  <div class="tx-col-id"><span class="tx-id">TXN-20473</span></div>
                  <div class="tx-col-customer">
                    <div class="tx-avatar">AH</div>
                    <span class="tx-customer-name">Ahmed Hassan</span>
                  </div>
                  <div class="tx-col-product"><span class="tx-product">Smart Watch Ultra</span></div>
                  <div class="tx-col-date">
                    <div class="tx-date">Jun 15, 2026</div>
                    <div class="tx-time">10:05 AM</div>
                  </div>
                  <div class="tx-col-amount"><span class="tx-amount">$299.00</span></div>
                  <div class="tx-col-payment">
                    <div class="tx-pay">
                      <span class="tx-pay-mark--paypal">PayPal</span>
                    </div>
                  </div>
                  <div class="tx-col-status"><span class="li-status-badge li-status-success">Completed</span></div>
                </div>
              </div>

              <div class="pagination-section">
                <div class="pagination-info">
                  <span>Showing 8 of 234 transactions</span>
                </div>
                <div class="pagination">
                  <button class="pagination-btn" id="txPrevBtn">&larr; Prev</button>
                  <button class="pagination-btn active" data-page="1">1</button>
                  <button class="pagination-btn" data-page="2">2</button>
                  <button class="pagination-btn" data-page="3">3</button>
                  <span class="pagination-ellipsis">&hellip;</span>
                  <button class="pagination-btn" data-page="12">12</button>
                  <button class="pagination-btn" id="txNextBtn">Next &rarr;</button>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Recent Transactions -->
</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>

  <script>
    const revenueTrendData = {
      '30d': { labels: ['Mar 21', 'Mar 28', 'Apr 04', 'Apr 11', 'Apr 18', 'Apr 25'], values: [9800, 9800, 9800, 9800, 9800, 9800] },
      '90d': { labels: ['Feb', 'Mar', 'Apr'], values: [27800, 31200, 38900] },
      '1y': { labels: ['May', 'Jul', 'Sep', 'Nov', 'Jan', 'Mar'], values: [29500, 33200, 35100, 38400, 41700, 45250] }
    };

    const revenueTrendCtx = document.getElementById('revenueTrendChart').getContext('2d');
    const revenueTrendGradient = revenueTrendCtx.createLinearGradient(0, 0, 0, 220);
    revenueTrendGradient.addColorStop(0, 'rgba(149, 175, 252, 0.55)');
    revenueTrendGradient.addColorStop(1, 'rgba(149, 175, 252, 0.05)');

    const revenueTrendChart = new Chart(revenueTrendCtx, {
      type: 'line',
      data: {
        labels: revenueTrendData['30d'].labels,
        datasets: [{
          data: revenueTrendData['30d'].values,
          borderColor: '#7C93F5',
          backgroundColor: revenueTrendGradient,
          fill: true,
          tension: 0.35,
          pointRadius: 0,
          borderWidth: 2
        }]
      },
      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 }
          },
          y: {
            display: false,
            grid: { display: false },
            border: { display: false }
          }
        }
      }
    });

    document.querySelectorAll('.rt-range-btn').forEach(function (btn) {
      btn.addEventListener('click', function () {
        document.querySelectorAll('.rt-range-btn').forEach(function (b) { b.classList.remove('active'); });
        btn.classList.add('active');

        const data = revenueTrendData[btn.dataset.range];
        revenueTrendChart.data.labels = data.labels;
        revenueTrendChart.data.datasets[0].data = data.values;
        revenueTrendChart.update();
      });
    });
</script>
@endsection