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

@section('content')

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

{{-- ================= DASHBOARD SUMMARY ================= --}}
<div class="row">

<div class="col-md-3">
<div class="card">
<div class="card-body d-flex justify-content-between">
<div>
<p class="text-muted">Today Revenue</p>
<h4 class="text-success">₹ {{ number_format($todayRevenue,2) }}</h4>
</div>
<div class="avatar-md bg-soft-success rounded">
<iconify-icon icon="solar:wallet-bold-duotone"
class="avatar-title fs-32 text-success"></iconify-icon>
</div>
</div>
</div>
</div>

<div class="col-md-3">
<div class="card">
<div class="card-body d-flex justify-content-between">
<div>
<p class="text-muted">Today Orders</p>
<h4>{{ $todayOrders }}</h4>
</div>
<div class="avatar-md bg-soft-primary rounded">
<iconify-icon icon="solar:cart-5-bold-duotone"
class="avatar-title fs-32 text-primary"></iconify-icon>
</div>
</div>
</div>
</div>

<div class="col-md-3">
<div class="card">
<div class="card-body d-flex justify-content-between">
<div>
<p class="text-muted">Monthly Revenue</p>
<h4 class="text-success">₹ {{ number_format($monthlyRevenue,2) }}</h4>
</div>
<div class="avatar-md bg-soft-info rounded">
<iconify-icon icon="solar:chart-bold-duotone"
class="avatar-title fs-32 text-info"></iconify-icon>
</div>
</div>
</div>
</div>

<div class="col-md-3">
<div class="card">
<div class="card-body d-flex justify-content-between">
<div>
<p class="text-muted">Active Projects</p>
<h4>{{ $activeProjects }}</h4>
</div>
<div class="avatar-md bg-soft-warning rounded">
<iconify-icon icon="solar:buildings-bold-duotone"
class="avatar-title fs-32 text-warning"></iconify-icon>
</div>
</div>
</div>
</div>

</div>

{{-- ================= SECOND ROW ================= --}}
<div class="row">

<div class="col-md-3">
<div class="card">
<div class="card-body">
<p class="text-muted">Pending Quotations</p>
<h4>{{ $pendingQuotations }}</h4>
</div>
</div>
</div>

<div class="col-md-3">
<div class="card">
<div class="card-body">
<p class="text-muted">Low Stock Products</p>
<h4 class="text-danger">{{ $lowStockProducts }}</h4>
</div>
</div>
</div>

<div class="col-md-3">
<div class="card">
<div class="card-body">
<p class="text-muted">Pending Approvals</p>
<h4 class="text-warning">{{ $pendingApprovals }}</h4>
</div>
</div>
</div>

<div class="col-md-3">
<div class="card">
<div class="card-body">
<p class="text-muted">Total Customers</p>
<h4>{{ $totalCustomers }}</h4>
</div>
</div>
</div>

</div>

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

<div class="col-lg-8">
<div class="card">
<div class="card-body">
<h4>Sales Snapshot</h4>
<div id="salesChart" style="height:320px;"></div>
</div>
</div>
</div>

<div class="col-lg-4">
<div class="card">
<div class="card-body">
<h5>Top Selling Products</h5>

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

@foreach($topProducts as $product)
<li class="list-group-item d-flex justify-content-between">
{{ $product->name }}
<span class="badge bg-success">{{ $product->total }}</span>
</li>
@endforeach

</ul>
</div>
</div>

</div>

</div>

{{-- ================= ORDERS QUICK VIEW ================= --}}
<div class="row">

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

<div class="card">
<div class="card-body">
<h4>Orders Quick View</h4>

<div class="row text-center">

<div class="col">
<a href="{{ route('orders.index') }}">
<h5>{{ $todayOrders }}</h5>
<p>Today</p>
</a>
</div>

<div class="col">
<a href="{{ route('orders.index',['status'=>'pending']) }}">
<h5>{{ $pendingOrders }}</h5>
<p>Pending</p>
</a>
</div>

<div class="col">
<a href="{{ route('orders.index',['status'=>'processing']) }}">
<h5>{{ $processingOrders }}</h5>
<p>Processing</p>
</a>
</div>

<div class="col">
<a href="{{ route('orders.index',['status'=>'completed']) }}">
<h5>{{ $completedOrders }}</h5>
<p>Completed</p>
</a>
</div>

</div>
</div>
</div>

</div>

{{-- ================= PROJECT STATUS ================= --}}
<div class="col-lg-6">

<div class="card">
<div class="card-body">
<h4>Project Status</h4>

<ul class="list-group">

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

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

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

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

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

</ul>

</div>
</div>

</div>

</div>

{{-- ================= QUOTATION SECTION ================= --}}
<div class="row">

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

<div class="card">
<div class="card-body">
<h4>Quotation Quick View</h4>

<ul class="list-group">

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

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

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

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

</ul>

</div>
</div>

</div>

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

<div class="card">
<div class="card-body">

<h4>Activity Feed</h4>

<ul class="timeline">

@foreach($activities as $activity)

<li class="mb-2">
<strong>{{ $activity->event_type }}</strong><br>
<small class="text-muted">{{ $activity->description }}</small>
</li>

@endforeach

</ul>

</div>
</div>

</div>

</div>

{{-- ================= ALERTS ================= --}}
<div class="row">

<div class="col-12">

<div class="card border-danger">

<div class="card-body">

<h4 class="text-danger">Alerts</h4>

<ul>

@if($pendingQuotations>0)
<li class="text-danger">⚠ Quotations Pending Approval</li>
@endif

@if($projectDelays>0)
<li class="text-danger">⚠ Project Delays</li>
@endif

@if($lowStockProducts>0)
<li class="text-danger">⚠ Low Stock Products</li>
@endif

</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 },

series: [
{
name: 'Sales',
data: {!! json_encode($salesData) !!}
}
],

xaxis: {
categories: {!! json_encode($salesDates) !!}
}
};

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

</script>

@endsection