@extends('portal.template.layout')
@php use Illuminate\Support\Facades\DB; @endphp
@section('header')
    <link href="{{ asset('') }}admin-assets/assets/css/support-chat.css" rel="stylesheet" type="text/css" />
    <link href="{{ asset('') }}admin-assets/plugins/maps/vector/jvector/jquery-jvectormap-2.0.3.css" rel="stylesheet"
        type="text/css" />
    <link href="{{ asset('') }}admin-assets/plugins/charts/chartist/chartist.css" rel="stylesheet" type="text/css">
    <link href="{{ asset('') }}admin-assets/assets/css/default-dashboard/style.css" rel="stylesheet" type="text/css" />
@stop


@section('content')


<style>

.home-section footer{
    bottom: auto !important;
}
.custom-container{
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
/*body.dark{*/
/*    background: url('{{ asset('') }}admin-assets/assets/img/laconcierge-bg.jpg');*/
/*    background-size: 100% 100%;*/
/*    background-position: center;*/
/*    background-repeat: no-repeat;*/
/*}*/
.custom-wl{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    
}
.custom-wl li{
    width: calc(25% - 30px);
    list-style-type: none;
}

@media(max-width:1200px){
    .custom-wl li{
        width: calc(33.33% - 30px);
        list-style-type: none;
    }
}

@media(max-width:1200px){
    .custom-wl li{
        width: calc(33.33% - 30px);
        list-style-type: none;
    }
}


.custom-wl li .icon-card{
    /*max-width: 320px;*/
    margin: auto;
    min-height: 230px;
    overflow-hidden
}


.icon-card{
    background: #121212;
    padding: 20px 15px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    transition: 0.5s all ease-in-out !important;
    overflow: hidden !important;
}


.icon-card .icon{
    max-width: 70px;
    min-width: 70px;
    height: 70px; 
    font-size: 30px;
}

.icon-card .content h6{
    color: #fff;
    margin: 0 !important;
    text-align: left !important;
    margin-bottom: 10px !important;


}

.icon-card .content h3{
    color: #fff;
    margin-bottom: 0 !important;
    font-size: 26px !important;

    
}


.icon-card .content.text-center{
    text-align: left !important;
    overflow-wrap: anywhere;
}


.icon-card .icon {
    color: #ffff !important;
    background-color: #252525 !important;
    box-shadow: rgba(255, 255, 255, 0.25) 0px 30px 60px -12px inset, rgba(255, 255, 255, 0.3) 0px 18px 36px -18px inset;
}

.icon-card:hover{
    box-shadow: rgba(255, 255, 255, 0.25) 0px 30px 60px -12px inset, rgba(255, 255, 255, 0.3) 0px 18px 36px -18px inset;
}

/* .icon-card.yellow .icon {
    color: #FF8C00;
    background-color: #ffdeda;
}

.icon-card.yellow:hover .icon {
  background-color: #FF8C00;
  color: #fff;
}

.icon-card.Orchid .icon {
    color: #BA55D3;
    background-color: #ffdeda;
}

.icon-card.Orchid:hover .icon {
  background-color: #BA55D3;
  color: #fff;
}

.icon-card.BlueViolet .icon {
    color: #7B68EE;
    background-color: #ffdeda;
}


.icon-card.BlueViolet:hover .icon {
  background-color: #7B68EE;
  color: #fff;
}

.icon-card.Green .icon {
    color: #2E8B57;
    background-color: #ffdeda;
}


.icon-card.Green:hover .icon {
  background-color: #2E8B57;
  color: #fff;
}

.icon-card.Tomato .icon {
    color: #FF6347;
    background-color: #ffdeda;
}

.icon-card.Tomato:hover .icon {
  background-color: #FF6347;
  color: #fff;
}


.icon-card.LightSeaGreen .icon {
    color: #20B2AA;
    background-color: #ffdeda;
}

.icon-card.LightSeaGreen:hover .icon {
  background-color: #20B2AA;
  color: #fff;
}


.icon-card.chocklate .icon {
    color: #D2691E;
    background-color: #ffdeda;
}

.icon-card.chocklate:hover .icon {
  background-color: #D2691E;
  color: #fff;
} */


</style>


    <div class="row mb-4">
       <div class="col-lg-3 col-md-6 mb-4">
          <a href="{{url('portal/orders')}}"><div class="icon-card height-100 text-center orange h-100">
             <div class="icon">
             <i class="fa-solid fa-boxes-stacked"></i>
             </div>
             <div class="content m-0 text-center">
                <h6 class="mb-1 text-center">All Orders</h6>
                <h3>{{$all}}</h3>
             </div>
          </div></a>
       </div>
       <div class="col-lg-3 col-md-6 mb-4">
          <a href="{{url('portal/orders')}}?status=0"><div class="icon-card height-100 text-center green h-100">
             <div class="icon">
                <i class="fas fa-cart-arrow-down"></i>
             </div>
             <div class="content m-0 text-center">
                <h6 class="mb-1 text-center">Pending Orders</h6>
                <h3>{{$pending}}</h3>
             </div>
          </div></a>
       </div>

       <div class="col-lg-3 col-md-6 mb-4">
          <a href="{{url('portal/orders')}}?status=1"><div class="icon-card height-100 text-center blue h-100">
             <div class="icon">
                
             <i class="fa-solid fa-clipboard-check"></i>
             </div>
             <div class="content m-0 text-center">
                <h6 class="mb-1 text-center">Accepted Orders</h6>
                <h3>{{$accepted}}</h3>
             </div>
          </div></a>
       </div>
       <div class="col-lg-3 col-md-6 mb-4">
          <a href="{{url('portal/orders')}}?status=2"><div class="icon-card height-100 text-center blue h-100">
             <div class="icon">
                
             <i class="fa-solid fa-truck-ramp-box"></i>
             </div>
             <div class="content m-0 text-center">
                <h6 class="mb-1 text-center">Ready For Delivery</h6>
                <h3>{{$ready_for_delivery}}</h3>
             </div>
          </div></a>
       </div>
       <div class="col-lg-3 col-md-6 mb-4">
          <a href="{{url('portal/orders')}}?status=3"><div class="icon-card height-100 text-center blue h-100">
             <div class="icon">
                
             <i class="fa-solid fa-truck"></i>
             </div>
             <div class="content m-0 text-center">
                <h6 class="mb-1 text-center">Dispatched</h6>
                <h3>{{$dispatched}}</h3>
             </div>
          </div></a>
       </div>
       <div class="col-lg-3 col-md-6 mb-4">
          <a href="{{url('portal/orders')}}?status=4"><div class="icon-card height-100 text-center green h-100">
             <div class="icon">
                <i class="fa-solid fa-check-to-slot"></i>
             </div>
             <div class="content m-0 text-center">
                <h6 class="mb-1 text-center">Delivered Orders</h6>
                <h3>{{$delivered}}</h3>
             </div>
          </div></a>
       </div>
       <div class="col-lg-3 col-md-6 mb-4">
          <a href="{{url('portal/orders')}}?status=10"><div class="icon-card height-100 text-center red h-100">
             <div class="icon">
                <i class="fas fa-times"></i>
             </div>
             <div class="content m-0 text-center">
                <h6 class="mb-1 text-center">Cancelled Orders</h6>
                <h3>{{$rejected}}</h3>
             </div>
          </div></a>
       </div>
       
    </div>
    
<div class="row mb-4" style="display:none;">
    <div class="col-lg-12">
    <div class="row">
                <div class="col-12 mb-4">
                    <div class="card custom-card">
                      <div class="card-header "> <b style="color: black;">Latest Orders</b></div>
                    <table class="table table-responsive recent-orders-table mb-0" width="100%">
                        <thead>
                           <tr>
                              <th scope="col" width="22%">Order ID</th>
                              <th scope="col" width="27%">Customer</th>
                              <th scope="col" width="22%">Order Date</th>
                              <th scope="col" width="22%">Total</th>
                              <th scope="col" width="17%">Status</th>
                              
                           </tr>
                        </thead>
                        <tbody id="newdata">
                           @if($latest_orders)
                           <tr>
                              <td colspan="6"> No Data</td>
                           </tr>
                           @endif
                           @foreach ($latest_orders as $item)
                           <tr>
                              <td>