@extends('admin.template.layout')

@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;
}


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


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

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

}

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


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


.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>
  @if(GetUserPermissions("dashboard_view"))
    <div class="row d-none">
        <div class="col-lg-12 mb-4">
            <div class="row">
                <div class="col-xl-3 col-lg-4 col-md-6 mb-3">
                    <a href="{{url('admin/customers')}}">
                        <div class="card custom-card">
                            <div class="widget">
                                <div class="widget-icon widget-bg-red">
                                    <i class='bx bx-user' ></i>
                                </div>
                                <div class="widget-info">
                                    <span>{{$users}}</span>
                                    <h6>Users</h6>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-xl-3 col-lg-4 col-md-6 mb-3">
                    <a href="{{url('admin/customers')}}">
                        <div class="card custom-card">
                            <div class="widget">
                                <div class="widget-icon widget-bg-red-light text-white">
                                    <i class='bx bx-cog'></i>
                                </div>
                                <div class="widget-info">
                                    <span>{{$service_josbs}}</span>
                                    <h6>Service Job</h6>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-xl-3 col-lg-4 col-md-6 mb-3">
                    <a href="{{url('admin/customers')}}">
                        <div class="card custom-card">
                            <div class="widget">
                                <div class="widget-icon widget-bg-yellow-light">
                                    <i class='bx bx-file' ></i>
                                </div>
                                <div class="widget-info">
                                    <span>{{$contract_maintanence_count}}</span>
                                    <h6>Contract Maintenance Jobs</h6>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                
            </div>
             <ul class="nav nav-pills mb-3 custom-pills justify-content-around" id="pills-tab" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" id="pills-user-tab" href="{{url('admin/customers')}}" role="tab" aria-controls="pills-user" aria-selected="true">
                        <i class='bx bx-user' ></i> <span>Users</span>
                        <span>10</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="pills-vendors-tab" href="{{url('admin/vendors')}}" role="tab" aria-controls="pills-vendors" aria-selected="false">
                        <i class='bx bx-user-circle' ></i> <span>Vendors</span>
                        <span>10</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="pills-product-tab" href="{{url('admin/products')}}" role="tab" aria-controls="pills-product" aria-selected="false">
                    <i class='bx bx-list-check'></i> <span>Service provider</span>
                    <span>15</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="pills-stores-tab" href="{{url('admin/store')}}" role="tab" aria-controls="pills-stores" aria-selected="false">
                        <i class='bx bx-store' ></i> <span>Sales</span>
                        <span>30</span>
                    </a>
                </li>

                 <li class="nav-item">
                    <a class="nav-link" id="pills-stores-tab" href="{{url('admin/store')}}" role="tab" aria-controls="pills-stores" aria-selected="false">
                        <i class='bx bx-store' ></i> <span>Commission</span>
                        <span>300</span>
                    </a>
                </li>
            </ul> 
        </div>
        
    </div>

        <div class="row">
            <div class="col-xl-3 col-lg-4 col-md-6 mb-3">
              <a href="{{url('admin/vendors')}}"><div class="icon-card height-100 text-center Tomato h-100">
                 <div class="icon">
                    <i class="fas fa-shopping-cart"></i>
                 </div>
                 <div class="content m-0 text-center">
                    <h6 class="m m-1 text-center">Vendors</h6>
                    <h3>{{$vendors}}</h3>
                 </div>
              </div></a>
           </div>

           <div class="col-xl-3 col-lg-4 col-md-6 mb-3">
              <a href="{{url('admin/customers')}}"><div class="icon-card height-100 text-center yellow h-100">
                 <div class="icon">
                    <i class="fa-solid fa-users"></i>
                 </div>
                 <div class="content m-0 text-center">
                    <h6 class="m m-1 text-center">Customers</h6>
                    <h3>{{$users}}</h3>
                 </div>
              </div></a>
           </div>

           <div class="col-xl-3 col-lg-4 col-md-6 mb-3">
              <a href="{{url('admin/orders')}}"><div class="icon-card height-100 text-center Orchid h-100">
                 <div class="icon">
                    <i class="fa-solid fa-boxes-stacked"></i>
                 </div>
                 <div class="content m-0 text-center">
                    <h6 class="m m-1 text-center">Orders</h6>
                    <h3>{{$sales}}</h3>
                 </div>
              </div></a>
           </div>

           <div class="col-xl-3 col-lg-4 col-md-6 mb-3">
              <a href="{{url('admin/products')}}"><div class="icon-card height-100 text-center orange h-100">
                 <div class="icon">
                 <i class="fa-solid fa-dolly"></i>
                 </div>
                 <div class="content m-0 text-center">
                    <h6 class="m m-1 text-center">Products</h6>
                    <h3>{{$productscount}}</h3>
                 </div>
              </div></a>
           </div>

           <!-- <div class="col-xl-3 col-lg-4 col-md-6 mb-3">
              <a href="{{url('admin/products')}}"><div class="icon-card height-100 text-center Green h-100">
                 <div class="icon">
                    <i class="fa-solid fa-gift"></i>
                 </div>
                 <div class="content m-0 text-center">
                    <h6 class="m m-1 text-center">Gifts</h6>
                    <h3>{{$food}}</h3>
                 </div>
              </div></a>
           </div> -->

           <!-- <div class="col-xl-3 col-lg-4 col-md-6 mb-3">
              <a href="{{url('admin/workshops')}}"><div class="icon-card height-100 text-center LightSeaGreen h-100">
                 <div class="icon">
                 <i class="fa-solid fa-users-gear"></i>
                 </div>
                 <div class="content m-0 text-center">
                    <h6 class="m m-1 text-center">Workshop</h6>
                    <h3>{{$services}}</h3>
                 </div>
              </div></a>
           </div> -->

           <!-- <div class="col-xl-3 col-lg-4 col-md-6 mb-3">
              <a href="{{url('admin/bookings')}}"><div class="icon-card height-100 text-center chocklate h-100">
                 <div class="icon">
                 <i class="fa-solid fa-list-check"></i>
                 </div>
                 <div class="content m-0 text-center">
                    <h6 class="m m-1 text-center">Bookings</h6>
                    <h3>{{$bookings}}</h3>
                 </div>
              </div></a>
           </div> -->
        
           <!-- <div class="col-xl-3 col-lg-4 col-md-6 mb-3">
               <a href="{{url('admin/vendors')}}">
              <div class="icon-card height-100 text-center red h-100">
                 <div class="icon">
                    <i class="fa-solid fa-briefcase"></i>
                 </div>
                 <div class="content m-0 text-center">
                    <h6 class="m m-1 text-left">Vendors @if($vendors_new > 0)<span class="badge badge-danger" style="border-radius: 5px; padding: 4px 6px; width: auto; font-size: 11px;">New ({{$vendors_new}})</span>@endif </h6>
                    <h3>{{$vendors}}</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 </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 </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 h-100">
                  <h5 class="card-header">Latest Orders</h5>
                  <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-condensed table-striped mb-0">
                          <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Order No</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 11:46 PM</td>
                                <td class="text-center">
                                    <a href="https://handwi.com/public/portal/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>210</td>
                                <td>Pending</td>
                                <td>06-May-25 07:50 PM</td>
                                <td class="text-center">
                                    <a href="https://handwi.com/public/portal/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>4182.95</td>
                                <td>Accepted</td>
                                <td>06-May-25 01:41 PM</td>
                                <td class="text-center">
                                    <a href="https://handwi.com/public/portal/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>609</td>
                                <td>Accepted</td>
                                <td>01-May-25 10:02 AM</td>
                                <td class="text-center">
                                    <a href="https://handwi.com/public/portal/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>735</td>
                                <td>Delivered</td>
                                <td>23-Apr-25 07:49 PM</td>
                                <td class="text-center">
                                    <a href="https://handwi.com/public/portal/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">
              <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"
                    style="">
                    <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>
                          
                          
                          <!-- <th scope="col" width="10%">View</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>