@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">
            <div class="col-lg-4 mb-4">
                <div class="card w-100 h-100">
                    <h5 class="card-header">Orders & Bookings</h5>
                    <div class="card-body">
                        <canvas id="myPieChart"></canvas>
                    </div>
                </div>
            </div>
            <div class="col-lg-8 mb-4">
                <div class="card w-100 h-100">
                    <h5 class="card-header">Daily Orders & Bookings</h5>
                    <div class="card-body">
                        <canvas id="ordersBookingsChart"></canvas>
                    </div>
                </div>
            </div>
            <div class="col-lg-8 mb-4 d-none">
            <div class="card w-100">
                <h5 class="card-header">Latest Orders</h5>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-condensed table-striped">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Order ID</th>
                                    <th>Customer</th>
        
                                    <th>Total</th>
                                    <th>Status</th>
                                    <th>Booking Date</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>HA20250506169</td>
                                    <!-- <td>169</td> -->
                                    <td>Nasrullah khan</td>
                                    <td>1207.5</td>
                                    <td>Pending</td>
                                    <!-- <td>06-May-25 23:46 PM</td> -->
                                    <td>06-May-25 11:46 PM</td>
                                    <td class="text-center">
                                        <a href="https://handwi.com/public/admin/order_details/169" class="btn btn-info btn-sm">Details</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td>HA20250506168</td>
                                    <!-- <td>168</td> -->
                                    <td>Nasrullah khan</td>
                                    <td>1207.5</td>
                                    <td>Pending</td>
                                    <!-- <td>06-May-25 19:50 PM</td> -->
                                    <td>06-May-25 07:50 PM</td>
                                    <td class="text-center">
                                        <a href="https://handwi.com/public/admin/order_details/168" class="btn btn-info btn-sm">Details</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>3</td>
                                    <td>HA20250506167</td>
                                    <!-- <td>167</td> -->
                                    <td>anil navis</td>
                                    <td>1207.5</td>
                                    <td>Accepted</td>
                                    <!-- <td>06-May-25 13:41 PM</td> -->
                                    <td>06-May-25 01:41 PM</td>
                                    <td class="text-center">
                                        <a href="https://handwi.com/public/admin/order_details/167" class="btn btn-info btn-sm">Details</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>4</td>
                                    <td>HA20250501166</td>
                                    <!-- <td>166</td> -->
                                    <td>anil</td>
                                    <td>1207.5</td>
                                    <td>Accepted</td>
                                    <!-- <td>01-May-25 10:02 AM</td> -->
                                    <td>01-May-25 10:02 AM</td>
                                    <td class="text-center">
                                        <a href="https://handwi.com/public/admin/order_details/166" class="btn btn-info btn-sm">Details</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>5</td>
                                    <td>HA20250423165</td>
                                    <!-- <td>165</td> -->
                                    <td>Ajesh Kumar</td>
                                    <td>1207.5</td>
                                    <td>Delivered</td>
                                    <!-- <td>23-Apr-25 19:49 PM</td> -->
                                    <td>23-Apr-25 07:49 PM</td>
                                    <td class="text-center">
                                        <a href="https://handwi.com/public/admin/order_details/165" class="btn btn-info btn-sm">Details</a>
                                    </td>
                                </tr>
                            </tbody>
                </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    
    
    
<div class="row mb-4" >
    <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="20%">Order ID</th>
                            <th scope="col" width="25%">Customer</th>
                            <th scope="col" width="20%">Total</th>
                            <th scope="col" width="20%">Payment Mode</th>
                            <th scope="col" width="15%">Order Status</th>
                            <th scope="col" width="20%">Booking Date</th>
                              
                           </tr>
                        </thead>
                        <tbody id="newdata">
                           @if($latest_orders->isEmpty())
                           <tr>
                                <td colspan="6"> No Data</td>
                            </tr>
                            @endif
                            @foreach ($latest_orders as $item)
                            <tr>
                                <td>