@extends('layouts.app')

@section('title', 'Dashboard')
@section('page', 'dashboard')

@push('styles')
  <link href="{{ asset('assets/css/pages/dashboard.css') }}" rel="stylesheet">
@endpush

@section('content')
  <div class="pos-dash">
    <div class="pos-dash__header">
      <div>
        <h1 class="pos-dash__title">Dashboard</h1>
        <p class="pos-dash__welcome mb-0">Welcome back, {{ $userName }}!</p>
      </div>
      <div class="dropdown">
        <button class="pos-dash__datebtn dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
          <i class="bi bi-calendar3" aria-hidden="true"></i>
          <span>{{ $displayDate }}</span>
        </button>
        <ul class="dropdown-menu dropdown-menu-end">
          <li><a class="dropdown-item {{ $period === 'today' ? 'active' : '' }}" href="{{ route('dashboard', ['period' => 'today']) }}">Today</a></li>
          <li><a class="dropdown-item {{ $period === 'week' ? 'active' : '' }}" href="{{ route('dashboard', ['period' => 'week']) }}">This week</a></li>
          <li><a class="dropdown-item {{ $period === 'month' ? 'active' : '' }}" href="{{ route('dashboard', ['period' => 'month']) }}">This month</a></li>
        </ul>
      </div>
    </div>

    <div class="row g-3 mb-3">
      <div class="col-12 col-sm-6 col-xl-3">
        <div class="pos-kpi">
          <div class="pos-kpi__main">
            <span class="pos-kpi__icon pos-kpi__icon--blue"><i class="bi bi-currency-dollar"></i></span>
            <div>
              <p class="pos-kpi__label">Total Sales</p>
              <p class="pos-kpi__value">{{ money($kpis['sales']['value']) }}</p>
              <p class="pos-kpi__trend pos-kpi__trend--{{ $kpis['sales']['trend']['direction'] }}">
                {{ $kpis['sales']['trend']['label'] }} <span>{{ $trendCompareLabel }}</span>
              </p>
            </div>
          </div>
          <div class="pos-kpi__spark" id="spark-sales"></div>
        </div>
      </div>
      <div class="col-12 col-sm-6 col-xl-3">
        <div class="pos-kpi">
          <div class="pos-kpi__main">
            <span class="pos-kpi__icon pos-kpi__icon--green"><i class="bi bi-bag-check"></i></span>
            <div>
              <p class="pos-kpi__label">Total Orders</p>
              <p class="pos-kpi__value">{{ number_format($kpis['orders']['value']) }}</p>
              <p class="pos-kpi__trend pos-kpi__trend--{{ $kpis['orders']['trend']['direction'] }}">
                {{ $kpis['orders']['trend']['label'] }} <span>{{ $trendCompareLabel }}</span>
              </p>
            </div>
          </div>
          <div class="pos-kpi__spark" id="spark-orders"></div>
        </div>
      </div>
      <div class="col-12 col-sm-6 col-xl-3">
        <div class="pos-kpi">
          <div class="pos-kpi__main">
            <span class="pos-kpi__icon pos-kpi__icon--purple"><i class="bi bi-people"></i></span>
            <div>
              <p class="pos-kpi__label">Total Customers</p>
              <p class="pos-kpi__value">{{ number_format($kpis['customers']['value']) }}</p>
              <p class="pos-kpi__trend pos-kpi__trend--{{ $kpis['customers']['trend']['direction'] }}">
                {{ $kpis['customers']['trend']['label'] }} <span>{{ $trendCompareLabel }}</span>
              </p>
            </div>
          </div>
          <div class="pos-kpi__spark" id="spark-customers"></div>
        </div>
      </div>
      <div class="col-12 col-sm-6 col-xl-3">
        <div class="pos-kpi">
          <div class="pos-kpi__main">
            <span class="pos-kpi__icon pos-kpi__icon--orange"><i class="bi bi-graph-up-arrow"></i></span>
            <div>
              <p class="pos-kpi__label">Gross Profit</p>
              <p class="pos-kpi__value">{{ money($kpis['profit']['value']) }}</p>
              <p class="pos-kpi__trend pos-kpi__trend--{{ $kpis['profit']['trend']['direction'] }}">
                {{ $kpis['profit']['trend']['label'] }} <span>{{ $trendCompareLabel }}</span>
              </p>
            </div>
          </div>
          <div class="pos-kpi__spark" id="spark-profit"></div>
        </div>
      </div>
    </div>

    <div class="row g-3 mb-3">
      <div class="col-xl-8">
        <div class="pos-card h-100">
          <div class="pos-card__head">
            <h2 class="pos-card__title">Sales Overview</h2>
            <div class="dropdown">
              <button class="pos-card__filter dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                {{ $period === 'week' ? 'This Week' : ($period === 'month' ? 'This Month' : 'Today') }}
              </button>
              <ul class="dropdown-menu dropdown-menu-end">
                <li><a class="dropdown-item" href="{{ route('dashboard', ['period' => 'today']) }}">Today</a></li>
                <li><a class="dropdown-item" href="{{ route('dashboard', ['period' => 'week']) }}">This Week</a></li>
                <li><a class="dropdown-item" href="{{ route('dashboard', ['period' => 'month']) }}">This Month</a></li>
              </ul>
            </div>
          </div>
          <div id="dash-sales-chart" class="pos-chart"></div>
          <div class="pos-summary-grid">
            <div>
              <p class="pos-summary-grid__label">Today</p>
              <p class="pos-summary-grid__value">{{ money($summaryCards['today']) }}</p>
            </div>
            <div>
              <p class="pos-summary-grid__label">Yesterday</p>
              <p class="pos-summary-grid__value">{{ money($summaryCards['yesterday']) }}</p>
            </div>
            <div>
              <p class="pos-summary-grid__label">This Week</p>
              <p class="pos-summary-grid__value">{{ money($summaryCards['week']) }}</p>
            </div>
            <div>
              <p class="pos-summary-grid__label">This Month</p>
              <p class="pos-summary-grid__value">{{ money($summaryCards['month']) }}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="col-xl-4">
        <div class="pos-card h-100">
          <div class="pos-card__head">
            <h2 class="pos-card__title">Sales by Payment Method</h2>
          </div>
          <div id="dash-payment-chart" class="pos-chart pos-chart--donut"></div>
          <div class="pos-pay-legend">
            @forelse ($paymentMix as $row)
              <div class="pos-pay-legend__row">
                <span class="pos-pay-legend__dot" style="background: {{ $row->color }}"></span>
                <div class="pos-pay-legend__meta">
                  <strong>{{ $row->label }}</strong>
                  <span>{{ money($row->revenue) }}</span>
                </div>
                <span class="pos-pay-legend__pct">{{ number_format($row->share, 0) }}%</span>
              </div>
            @empty
              <p class="text-muted small mb-0">No payments in this period.</p>
            @endforelse
          </div>
        </div>
      </div>
    </div>

    <div class="row g-3">
      <div class="col-lg-4">
        <div class="pos-card h-100">
          <div class="pos-card__head">
            <h2 class="pos-card__title">Top Products</h2>
            <a href="{{ route('products.index') }}" class="pos-card__link">View all</a>
          </div>
          <div class="pos-list">
            @forelse ($topProducts as $product)
              <div class="pos-list__item">
                <div class="pos-thumb">
                  @if ($product->image_url)
                    <img src="{{ $product->image_url }}" alt="">
                  @else
                    <i class="bi bi-box-seam"></i>
                  @endif
                </div>
                <div class="pos-list__body">
                  <p class="pos-list__title">{{ $product->product_name }}</p>
                  <p class="pos-list__meta">Sold: {{ number_format((float) $product->total_qty, 0) }}</p>
                </div>
                <strong class="pos-list__side">{{ money((float) $product->revenue) }}</strong>
              </div>
            @empty
              <p class="text-muted small mb-0">No product sales yet.</p>
            @endforelse
          </div>
        </div>
      </div>

      <div class="col-lg-4">
        <div class="pos-card h-100">
          <div class="pos-card__head">
            <h2 class="pos-card__title">Low Stock Alerts</h2>
            <a href="{{ route('products.index') }}" class="pos-card__link">Inventory</a>
          </div>
          <div class="pos-list">
            @forelse ($lowStock as $product)
              <div class="pos-list__item">
                <div class="pos-thumb">
                  @if ($product->imageUrl())
                    <img src="{{ $product->imageUrl() }}" alt="">
                  @else
                    <i class="bi bi-exclamation-triangle"></i>
                  @endif
                </div>
                <div class="pos-list__body">
                  <p class="pos-list__title">{{ $product->name }}</p>
                  <p class="pos-list__meta">{{ $product->stock }} units left</p>
                </div>
                <span class="pos-stock-badge">{{ $product->stock }}</span>
              </div>
            @empty
              <p class="text-muted small mb-0">Stock levels look healthy.</p>
            @endforelse
          </div>
        </div>
      </div>

      <div class="col-lg-4">
        <div class="pos-card mb-3">
          <div class="pos-card__head">
            <h2 class="pos-card__title">Recent Orders</h2>
            <a href="{{ route('sales.index') }}" class="pos-card__link">View all</a>
          </div>
          <div class="pos-list">
            @forelse ($recentSales as $sale)
              <div class="pos-list__item">
                <div class="pos-thumb pos-thumb--soft">
                  <i class="bi bi-receipt"></i>
                </div>
                <div class="pos-list__body">
                  <p class="pos-list__title">{{ $sale->invoice_no ?: '#ORD-'.str_pad((string) $sale->id, 5, '0', STR_PAD_LEFT) }}</p>
                  <p class="pos-list__meta">{{ $sale->customer?->name ?? 'Walk-in' }} · {{ money((float) $sale->total) }}</p>
                </div>
                <div class="pos-list__end">
                  <span class="pos-paid">Paid</span>
                  <small>{{ $sale->sale_date?->diffForHumans(short: true) }}</small>
                </div>
              </div>
            @empty
              <p class="text-muted small mb-0">No recent orders.</p>
            @endforelse
          </div>
        </div>

        <div class="pos-card">
          <div class="pos-card__head">
            <h2 class="pos-card__title">Quick Actions</h2>
          </div>
          <div class="pos-actions">
            <a href="{{ route('pos.index') }}" class="pos-action pos-action--blue" target="_blank" rel="noopener noreferrer">
              <i class="bi bi-cart-plus"></i>
              <span>New Sale</span>
            </a>
            <a href="{{ route('products.index') }}" class="pos-action pos-action--green">
              <i class="bi bi-box-seam"></i>
              <span>Add Product</span>
            </a>
            <a href="{{ route('purchases.index') }}" class="pos-action pos-action--purple">
              <i class="bi bi-truck"></i>
              <span>Purchase</span>
            </a>
            <a href="{{ route('account.expenses') }}" class="pos-action pos-action--orange">
              <i class="bi bi-wallet2"></i>
              <span>Expenses</span>
            </a>
            @if (can_permission('reports.view'))
              <a href="{{ route('reports.index') }}" class="pos-action pos-action--cyan">
                <i class="bi bi-bar-chart"></i>
                <span>Reports</span>
              </a>
            @else
              <a href="{{ route('sales.index') }}" class="pos-action pos-action--cyan">
                <i class="bi bi-bar-chart"></i>
                <span>Sales</span>
              </a>
            @endif
            <a href="{{ route('customers.index') }}" class="pos-action pos-action--pink">
              <i class="bi bi-people"></i>
              <span>Customers</span>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
@endsection

@push('scripts')
  <script>
    window.DASHBOARD_CHARTS = {
      salesOverview: @json($salesOverview),
      paymentMix: @json($paymentMixChart),
      sparks: {
        sales: @json($kpis['sales']['spark']),
        orders: @json($kpis['orders']['spark']),
        customers: @json($kpis['customers']['spark']),
        profit: @json($kpis['profit']['spark']),
      },
    };
  </script>
  <script src="https://cdn.jsdelivr.net/npm/apexcharts@3.54.1/dist/apexcharts.min.js"></script>
  <script src="{{ asset('assets/js/pages/dashboard.js') }}"></script>
@endpush