@extends('layouts.app')

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

@section('content')
<div class="card mb-3">
  <div class="bg-holder d-none d-lg-block bg-card" style="background-image:url({{ asset('assets/img/icons/spot-illustrations/corner-4.png') }});"></div>
  <div class="card-body position-relative">
    <div class="row">
      <div class="col-lg-8">
        <h3>ERP Dashboard Center</h3>
        <p class="mt-2">Choose from our comprehensive dashboard modules to monitor and manage your business operations.</p>
      </div>
    </div>
  </div>
</div>

<!-- Dashboard Categories -->
<div class="row g-3 mb-4">
  <!-- Main Dashboard -->
  <div class="col-lg-6 col-xxl-4">
    <div class="card h-100 hover-shadow">
      <div class="card-body text-center">
        <div class="mb-3">
          <span class="fas fa-tachometer-alt fa-3x text-primary"></span>
        </div>
        <h5 class="card-title">Main Dashboard</h5>
        <p class="card-text text-muted">Overview of key metrics, quick actions, and recent activities</p>
        <a href="{{ route('dashboard') }}" class="btn btn-primary">
          <span class="fas fa-arrow-right me-1"></span>Go to Dashboard
        </a>
      </div>
    </div>
  </div>

  <!-- Executive Overview -->
  <div class="col-lg-6 col-xxl-4">
    <div class="card h-100 hover-shadow">
      <div class="card-body">
        <div class="text-center mb-3">
          <span class="fas fa-chart-line fa-3x text-success"></span>
        </div>
        <h5 class="card-title text-center">Executive Overview</h5>
        <p class="card-text text-muted text-center">High-level business insights and performance metrics</p>

        <div class="list-group list-group-flush">
          <a href="{{ route('dashboard.executive-overview.financial-summary') }}" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
            Financial Summary
            <span class="fas fa-dollar-sign text-success"></span>
          </a>
          <a href="{{ route('dashboard.executive-overview.inventory-health') }}" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
            Inventory Health
            <span class="fas fa-boxes text-info"></span>
          </a>
          <a href="{{ route('dashboard.executive-overview.sales-performance') }}" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
            Sales Performance
            <span class="fas fa-chart-bar text-primary"></span>
          </a>
          <a href="{{ route('dashboard.executive-overview.purchase-analytics') }}" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
            Purchase Analytics
            <span class="fas fa-shopping-cart text-warning"></span>
          </a>
        </div>
      </div>
    </div>
  </div>

  <!-- KPI Monitoring -->
  <div class="col-lg-6 col-xxl-4">
    <div class="card h-100 hover-shadow">
      <div class="card-body">
        <div class="text-center mb-3">
          <span class="fas fa-analytics fa-3x text-info"></span>
        </div>
        <h5 class="card-title text-center">KPI Monitoring</h5>
        <p class="card-text text-muted text-center">Track key performance indicators and business metrics</p>

        <div class="list-group list-group-flush">
          <a href="{{ route('dashboard.kpi-monitoring.revenue-trends') }}" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
            Revenue Trends
            <span class="fas fa-trending-up text-success"></span>
          </a>
          <a href="{{ route('dashboard.kpi-monitoring.cost-analysis') }}" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
            Cost Analysis
            <span class="fas fa-calculator text-danger"></span>
          </a>
          <a href="{{ route('dashboard.kpi-monitoring.inventory-turnover') }}" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
            Inventory Turnover
            <span class="fas fa-sync-alt text-primary"></span>
          </a>
          <a href="{{ route('dashboard.kpi-monitoring.production-efficiency') }}" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
            Production Efficiency
            <span class="fas fa-cogs text-info"></span>
          </a>
        </div>
      </div>
    </div>
  </div>

  <!-- Alerts & Notifications -->
  <div class="col-lg-6 col-xxl-4">
    <div class="card h-100 hover-shadow">
      <div class="card-body">
        <div class="text-center mb-3">
          <span class="fas fa-bell fa-3x text-warning"></span>
        </div>
        <h5 class="card-title text-center">Alerts & Notifications</h5>
        <p class="card-text text-muted text-center">Monitor critical system alerts and notifications</p>

        <div class="list-group list-group-flush">
          <a href="{{ route('dashboard.alerts.low-stock-alerts') }}" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
            Low Stock Alerts
            <span class="badge badge-soft-warning">23</span>
          </a>
          <a href="{{ route('dashboard.alerts.pending-approvals') }}" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
            Pending Approvals
            <span class="badge badge-soft-info">8</span>
          </a>
          <a href="{{ route('dashboard.alerts.payment-due') }}" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
            Payment Due
            <span class="badge badge-soft-danger">5</span>
          </a>
          <a href="{{ route('dashboard.alerts.quality-issues') }}" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
            Quality Issues
            <span class="badge badge-soft-secondary">2</span>
          </a>
        </div>
      </div>
    </div>
  </div>

  <!-- Quick Actions -->
  <div class="col-lg-6 col-xxl-4">
    <div class="card h-100 hover-shadow">
      <div class="card-body">
        <div class="text-center mb-3">
          <span class="fas fa-rocket fa-3x text-danger"></span>
        </div>
        <h5 class="card-title text-center">Quick Actions</h5>
        <p class="card-text text-muted text-center">Fast access to common business operations</p>

        <div class="list-group list-group-flush">
          <a href="{{ route('dashboard.quick-actions.new-sales-order') }}" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
            New Sales Order
            <span class="fas fa-plus-circle text-primary"></span>
          </a>
          <a href="{{ route('dashboard.quick-actions.new-purchase-order') }}" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
            New Purchase Order
            <span class="fas fa-plus-circle text-success"></span>
          </a>
          <a href="{{ route('dashboard.quick-actions.stock-entry') }}" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
            Stock Entry
            <span class="fas fa-plus-circle text-info"></span>
          </a>
          <a href="{{ route('dashboard.quick-actions.payment-entry') }}" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
            Payment Entry
            <span class="fas fa-plus-circle text-warning"></span>
          </a>
        </div>
      </div>
    </div>
  </div>

  <!-- Product Management -->
  <div class="col-lg-6 col-xxl-4">
    <div class="card h-100 hover-shadow">
      <div class="card-body">
        <div class="text-center mb-3">
          <span class="fas fa-box fa-3x text-secondary"></span>
        </div>
        <h5 class="card-title text-center">Product Management</h5>
        <p class="card-text text-muted text-center">Manage products, categories, and inventory items</p>

        <div class="list-group list-group-flush">
          <a href="{{ route('product.masters') }}" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
            Product Masters
            <span class="fas fa-cube text-primary"></span>
          </a>
          <a href="{{ route('product.variants') }}" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
            Variant Masters
            <span class="fas fa-cubes text-success"></span>
          </a>
          <a href="{{ route('category.management') }}" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
            Categories
            <span class="fas fa-tags text-info"></span>
          </a>
          <a href="{{ route('attribute.masters') }}" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
            Attributes
            <span class="fas fa-list text-warning"></span>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Recent Activity Summary -->
<div class="row g-3">
  <div class="col-12">
    <div class="card">
      <div class="card-header">
        <div class="row flex-between-center">
          <div class="col-6 col-sm-auto d-flex align-items-center pe-0">
            <h5 class="fs-0 mb-0 text-nowrap py-2 py-xl-0">System Overview</h5>
          </div>
        </div>
      </div>
      <div class="card-body">
        <div class="row g-3">
          <div class="col-md-3 text-center">
            <h4 class="text-primary">1,248</h4>
            <p class="mb-0 text-muted">Total Products</p>
          </div>
          <div class="col-md-3 text-center">
            <h4 class="text-success">$125K</h4>
            <p class="mb-0 text-muted">Monthly Revenue</p>
          </div>
          <div class="col-md-3 text-center">
            <h4 class="text-warning">23</h4>
            <p class="mb-0 text-muted">Pending Alerts</p>
          </div>
          <div class="col-md-3 text-center">
            <h4 class="text-info">98%</h4>
            <p class="mb-0 text-muted">System Uptime</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

@endsection

@push('styles')
<style>
.hover-shadow {
  transition: box-shadow 0.3s ease-in-out;
}

.hover-shadow:hover {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
  transform: translateY(-2px);
}

.card {
  transition: transform 0.2s ease-in-out;
}
</style>
@endpush