@extends('admin.layout.template')
@section('title','Dashboard')

@section('content')

<div class="page-content">
<div class="container-fluid">

{{-- ================= KPI CARDS ================= --}}
<div class="row">

<div class="col-xl-3 col-md-6">
<div class="card shadow-sm border-0">
<div class="card-body d-flex justify-content-between align-items-center">
<div>
<p class="text-muted mb-1">Today Revenue</p>
<h3 class="text-success">₹ {{ number_format($todayRevenue,2) }}</h3>
</div>
<div class="avatar-md bg-soft-success rounded-circle">
<iconify-icon icon="solar:wallet-bold-duotone"
class="avatar-title fs-32 text-success"></iconify-icon>
</div>
</div>
</div>
</div>

<div class="col-xl-3 col-md-6">
<div class="card shadow-sm border-0">
<div class="card-body d-flex justify-content-between align-items-center">
<div>
<p class="text-muted mb-1">Today Orders</p>
<h3>{{ $todayOrders }}</h3>
</div>
<div class="avatar-md bg-soft-primary rounded-circle">
<iconify-icon icon="solar:cart-5-bold-duotone"
class="avatar-title fs-32 text-primary"></iconify-icon>
</div>
</div>
</div>
</div>

<div class="col-xl-3 col-md-6">
<div class="card shadow-sm border-0">
<div class="card-body d-flex justify-content-between align-items-center">
<div>
<p class="text-muted mb-1">Monthly Revenue</p>
<h3 class="text-info">₹ {{ number_format($monthlyRevenue,2) }}</h3>
</div>
<div class="avatar-md bg-soft-info rounded-circle">
<iconify-icon icon="solar:chart-2-bold-duotone"
class="avatar-title fs-32 text-info"></iconify-icon>
</div>
</div>
</div>
</div>

<div class="col-xl-3 col-md-6">
<div class="card shadow-sm border-0">
<div class="card-body d-flex justify-content-between align-items-center">
<div>
<p class="text-muted mb-1">Customers</p>
<h3>{{ $totalCustomers }}</h3>
</div>
<div class="avatar-md bg-soft-warning rounded-circle">
<iconify-icon icon="solar:users-group-rounded-bold-duotone"
class="avatar-title fs-32 text-warning"></iconify-icon>
</div>
</div>
</div>
</div>

</div>


{{-- ================= SALES GRAPH ================= --}}
<div class="row">

<div class="col-lg-8">

<div class="card shadow-sm border-0">
<div class="card-body">

<h4 class="card-title mb-3">Sales & Revenue Snapshot</h4>

<div id="salesChart" style="height:320px;"></div>

</div>
</div>

</div>


{{-- ================= ALERTS ================= --}}
<div class="col-lg-4">

<div class="card border-0 shadow-sm">
<div class="card-body">

<h5 class="card-title text-danger mb-3">⚠ Alerts</h5>

<ul class="list-group list-group-flush">

@if($quotationPending > 0)
<li class="list-group-item d-flex justify-content-between">
Pending Quotations
<span class="badge bg-danger">{{ $quotationPending }}</span>
</li>
@endif

@if($pendingInstallation > 0)
<li class="list-group-item d-flex justify-content-between">
Pending Installation
<span class="badge bg-danger">{{ $pendingInstallation }}</span>
</li>
@endif

@if($lowStockProducts > 0)
<li class="list-group-item d-flex justify-content-between">
Low Stock Products
<span class="badge bg-danger">{{ $lowStockProducts }}</span>
</li>
@endif

</ul>

</div>
</div>

</div>

</div>



{{-- ================= QUICK VIEWS ================= --}}
<div class="row">


{{-- Orders Quick View --}}
<div class="col-lg-4">

<div class="card border-0 shadow-sm">
<div class="card-body">

<h5 class="card-title mb-3">Orders Quick View</h5>

<div class="row text-center">

<div class="col-6 mb-3">
<h4>{{ $ordersToday }}</h4>
<p class="text-muted mb-0">Today</p>
</div>

<div class="col-6 mb-3">
<h4>{{ $pendingOrders }}</h4>
<p class="text-muted mb-0">Pending</p>
</div>

<div class="col-6">
<h4>{{ $processingOrders }}</h4>
<p class="text-muted mb-0">Processing</p>
</div>

<div class="col-6">
<h4>{{ $completedOrders }}</h4>
<p class="text-muted mb-0">Completed</p>
</div>

</div>

</div>
</div>

</div>



{{-- Project Status --}}
<div class="col-lg-4">

<div class="card border-0 shadow-sm">
<div class="card-body">

<h5 class="card-title mb-3">Project Status</h5>

<ul class="list-group list-group-flush">

<li class="list-group-item d-flex justify-content-between">
Total Projects
<strong>{{ $totalProjects }}</strong>
</li>

<li class="list-group-item d-flex justify-content-between">
In Progress
<strong>{{ $projectsInProgress }}</strong>
</li>

<li class="list-group-item d-flex justify-content-between">
Completed
<strong>{{ $projectsCompleted }}</strong>
</li>

<li class="list-group-item d-flex justify-content-between">
Pending Material
<strong>{{ $pendingMaterial }}</strong>
</li>

<li class="list-group-item d-flex justify-content-between">
Pending Installation
<strong>{{ $pendingInstallation }}</strong>
</li>

</ul>

</div>
</div>

</div>



{{-- Quotation Status --}}
<div class="col-lg-4">

<div class="card border-0 shadow-sm">
<div class="card-body">

<h5 class="card-title mb-3">Quotation Status</h5>

<ul class="list-group list-group-flush">

<li class="list-group-item d-flex justify-content-between">
Sent Today
<strong>{{ $quotationToday }}</strong>
</li>

<li class="list-group-item d-flex justify-content-between">
Pending Approval
<strong>{{ $quotationPending }}</strong>
</li>

<li class="list-group-item d-flex justify-content-between">
Approved
<strong>{{ $quotationApproved }}</strong>
</li>

<li class="list-group-item d-flex justify-content-between">
Converted Orders
<strong>{{ $quotationConverted }}</strong>
</li>

</ul>

</div>
</div>

</div>

</div>



{{-- ================= RECENT ORDERS ================= --}}
<div class="row">

<div class="col-lg-8">

<div class="card border-0 shadow-sm">

<div class="card-body">
<h4 class="card-title">Recent Orders</h4>
</div>

<div class="table-responsive">

<table class="table table-hover">

<thead class="bg-light">
<tr>
<th>Order</th>
<th>Customer</th>
<th>Total</th>
<th>Status</th>
<th>Date</th>
</tr>
</thead>

<tbody>

@foreach($recentOrders as $order)

<tr>

<td>#{{ $order->order_number }}</td>

<td>{{ $order->user->name ?? '-' }}</td>

<td>₹ {{ number_format($order->total,2) }}</td>

<td>
<span class="badge bg-{{ $order->status=='delivered'?'success':'warning' }}">
{{ ucfirst($order->status) }}
</span>
</td>

<td>{{ $order->created_at->format('d M Y') }}</td>

</tr>

@endforeach

</tbody>

</table>

</div>

</div>

</div>



{{-- ================= ACTIVITY FEED ================= --}}
<div class="col-lg-4">

<div class="card border-0 shadow-sm">

<div class="card-body">

<h4 class="card-title mb-3">Activity Feed</h4>

<ul class="list-group list-group-flush">

@foreach($activities as $activity)

<li class="list-group-item">

{{ $activity->description }}

<br>

<small class="text-muted">
{{ $activity->created_at->diffForHumans() }}
</small>

</li>

@endforeach

</ul>

</div>

</div>

</div>

</div>

</div>
</div>


{{-- ================= CHART ================= --}}
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

<script>

var options = {

chart: {
type: 'area',
height: 320,
toolbar: { show:false }
},

series: [
{
name: 'Sales',
data: [12,22,18,32,25,40,45]
}
],

stroke:{
curve:'smooth'
},

xaxis: {
categories: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun']
},

colors:['#1f3c88'],

dataLabels:{ enabled:false }

};

new ApexCharts(document.querySelector("#salesChart"), options).render();

</script>

@endsection