@extends('vendor.layouts.app')

@section('title', 'Inventory 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">Inventory Analytics</h2>
            <p class="sr-sub">Monitor stock levels and inventory health</p>
          </div>
        </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">Total SKUs</div>
          </div>
          <div class="stl-stat-card">
            <div class="stl-stat-num li-green">12,456</div>
            <div class="stl-stat-title">Total Units</div>
          </div>
          <div class="stl-stat-card">
            <div class="stl-stat-num li-amber">23</div>
            <div class="stl-stat-title">Low Stock Items</div>
          </div>
          <div class="stl-stat-card">
            <div class="stl-stat-num li-red">5</div>
            <div class="stl-stat-title">Out of Stock</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">Customer Acquisition</h3>
              </div>
              <div class="stl-chart-box ia">
                <canvas id="settlementChart"></canvas>
              </div>
            </div>
          </div>

          <div class="col-md-6">
            <div class="li-panel">
              <h3 class="li-panel-title">Stock Value Distribution</h3>
              <div class="order-status-list ia  ">
                <div class="order-status-item">
                  <div class="dot-title">
                    <span class="os-label">Electronics</span>
                    <div class="percentage-count">$45,200</div>
                  </div>
                  <div class="prograce-count">
                    <div class="os-bar-wrap"><div class="os-bar os-bar--orange" style="width:15%"></div></div>
                  </div>
                </div>

                <div class="order-status-item">
                  <div class="dot-title">
                    <span class="os-label">Accessories</span>
                    <div class="percentage-count">$28,500</div>
                  </div>
                  <div class="prograce-count">
                    <div class="os-bar-wrap"><div class="os-bar os-bar--orange" style="width:38%"></div></div>
                  </div>
                </div>
                <div class="order-status-item">
                  <div class="dot-title">
                    <span class="os-label">Cables & Adapters</span>
                    <div class="percentage-count">$18,900</div>
                  </div>
                  <div class="prograce-count">
                    <div class="os-bar-wrap"><div class="os-bar os-bar--orange" style="width:28%"></div></div>
                  </div>
                </div>
                <div class="order-status-item">
                  <div class="dot-title">
                    <span class="os-label">Audio Equipment</span>
                    <div class="percentage-count">$15,200</div>
                  </div>
                  <div class="prograce-count">
                    <div class="os-bar-wrap"><div class="os-bar os-bar--orange" style="width:12%"></div></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

          <!-- Low Stock Alerts / Slow Moving Inventory -->
        <div class="row">
          <div class="col-md-6">
            <div class="li-panel">
              <div class="li-panel-header">
                <h3 class="li-panel-title">Low Stock Alerts</h3>
                <span class="li-status-badge li-status-pending">23 Items</span>
              </div>
              <div class="ia-alert-list">
                <div class="ia-alert-item">
                  <div class="ia-alert-info">
                    <div class="ia-alert-name">Wireless Headphones Pro</div>
                    <div class="ia-alert-sub">Current: 8 units &bull; Min: 15 units</div>
                  </div>
                  <div class="ia-alert-actions">
                    <span class="li-status-badge li-status-pending">Low</span>
                    <button class="ia-btn-reorder" type="button">Reorder</button>
                  </div>
                </div>
                <div class="ia-alert-item">
                  <div class="ia-alert-info">
                    <div class="ia-alert-name">USB-C Cable 6ft</div>
                    <div class="ia-alert-sub">Current: 12 units &bull; Min: 20 units</div>
                  </div>
                  <div class="ia-alert-actions">
                    <span class="li-status-badge li-status-pending">Low</span>
                    <button class="ia-btn-reorder" type="button">Reorder</button>
                  </div>
                </div>
                <div class="ia-alert-item">
                  <div class="ia-alert-info">
                    <div class="ia-alert-name">Smart Watch Ultra</div>
                    <div class="ia-alert-sub">Current: 5 units &bull; Min: 10 units</div>
                  </div>
                  <div class="ia-alert-actions">
                    <span class="li-status-badge li-status-error">Critical</span>
                    <button class="ia-btn-reorder" type="button">Reorder</button>
                  </div>
                </div>
                <div class="ia-alert-item">
                  <div class="ia-alert-info">
                    <div class="ia-alert-name">Phone Stand</div>
                    <div class="ia-alert-sub">Current: 14 units &bull; Min: 25 units</div>
                  </div>
                  <div class="ia-alert-actions">
                    <span class="li-status-badge li-status-pending">Low</span>
                    <button class="ia-btn-reorder" type="button">Reorder</button>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="col-md-6">
            <div class="li-panel">
              <h3 class="li-panel-title">Slow Moving Inventory</h3>
              <div class="ia-slow-list">
                <div class="ia-slow-item">
                  <div class="ia-slow-info">
                    <div class="ia-slow-name">Vintage Camera Lens</div>
                    <div class="ia-slow-sub">45 units in stock</div>
                    <div class="ia-slow-price">$2,250</div>
                  </div>
                  <div class="ia-slow-meta">
                    <div class="ia-slow-days">87 days since sale</div>
                    <a href="#" class="ia-slow-promo">Create Promotion</a>
                  </div>
                </div>
                <div class="ia-slow-item">
                  <div class="ia-slow-info">
                    <div class="ia-slow-name">Retro Gaming Controller</div>
                    <div class="ia-slow-sub">32 units in stock</div>
                    <div class="ia-slow-price">$1,280</div>
                  </div>
                  <div class="ia-slow-meta">
                    <div class="ia-slow-days">62 days since sale</div>
                    <a href="#" class="ia-slow-promo">Create Promotion</a>
                  </div>
                </div>
                <div class="ia-slow-item">
                  <div class="ia-slow-info">
                    <div class="ia-slow-name">Limited Edition Mouse Pad</div>
                    <div class="ia-slow-sub">28 units in stock</div>
                    <div class="ia-slow-price">$560</div>
                  </div>
                  <div class="ia-slow-meta">
                    <div class="ia-slow-days">54 days since sale</div>
                    <a href="#" class="ia-slow-promo">Create Promotion</a>
                  </div>
                </div>
                <div class="ia-slow-item">
                  <div class="ia-slow-info">
                    <div class="ia-slow-name">Premium Phone Case</div>
                    <div class="ia-slow-sub">18 units in stock</div>
                    <div class="ia-slow-price">$540</div>
                  </div>
                  <div class="ia-slow-meta">
                    <div class="ia-slow-days">41 days since sale</div>
                    <a href="#" class="ia-slow-promo">Create Promotion</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Inventory Health Score -->
        <div class="li-panel last">
          <h3 class="li-panel-title">Inventory Health Score</h3>
          <div class="ci-feedback-grid ia-health-grid">
            <div class="ci-feedback-item">
              <div class="ci-feedback-num">85</div>
              <div class="ci-feedback-label">Turnover Rate</div>
              <span class="li-status-badge li-status-error">Good</span>
            </div>
            <div class="ci-feedback-item">
              <div class="ci-feedback-num">94</div>
              <div class="ci-feedback-label">Stock Accuracy</div>
              <span class="li-status-badge li-status-success">Excellent</span>
            </div>
            <div class="ci-feedback-item">
              <div class="ci-feedback-num">78</div>
              <div class="ci-feedback-label">Fill Rate</div>
              <span class="li-status-badge li-status-pending">Fair</span>
            </div>
            <div class="ci-feedback-item">
              <div class="ci-feedback-num">72</div>
              <div class="ci-feedback-label">Carrying Cost</div>
              <span class="li-status-badge li-status-pending">Fair</span>
            </div>
            <div class="ci-feedback-item">
              <div class="ci-feedback-num">82</div>
              <div class="ci-feedback-label">Overall Health</div>
              <span class="li-status-badge li-status-error">Good</span>
            </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>

  <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