@extends('layouts.admin')

@section('title', 'Dashboard')

@section('content')
    <div class="main-content">
        <div class="main-content-inner">
            <div class="breadcrumbs ace-save-state" id="breadcrumbs">
                <ul class="breadcrumb">
                    <li>
                        <i class="ace-icon fa fa-home home-icon"></i>
                        <a href="{{route('admin.dashboard')}}">Home</a>
                    </li>
                    <li class="active">Dashboard</li>
                </ul><!-- /.breadcrumb -->
            </div>

            <div class="page-content">

                <div class="page-header">
                    <h1>
                        Dashboard
                        <small>
                            <i class="ace-icon fa fa-angle-double-right"></i>
                            overview &amp; stats
                        </small>
                    </h1>
                </div><!-- /.page-header -->

                <div class="row">
                    <div class="col-xs-12">
                        <!-- PAGE CONTENT BEGINS -->
                        <div class="row">
                            <div class="space-6"></div>

                            <div class="col-sm-12 infobox-container">
                                @php
                                    $colr = ['green','blue','pink','red','orange2','blue2']
                                @endphp
                                @foreach($products_counts as $k=>$pCount)
                                    <div class="infobox infobox-{{ $colr[$k % count($colr)] }}" style="margin: 3px;height: 75px;border-color: {{ $colr[$k % count($colr)] }}">
                                        <div class="infobox-data">
                                            <div style="font-size: 12px">{{$pCount->name}} ({{$pCount->cat_name}})</div>
                                            <div style="display: flex; justify-content: space-between;font-size: 10px">
                                                <span>Items : {{$pCount->total_items}}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                <span>Out of stock : {{$pCount->out_of_stock_items}}</span>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach

                            </div>

                            <div class="vspace-12-sm"></div>
                        </div><!-- /.row -->

                        <!-- PAGE CONTENT ENDS -->
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.page-content -->
        </div>
    </div><!-- /.main-content -->
@endsection