@extends('layouts.head')

  

@section('content')
<br>
  <div class="container-fluid py-4">
      <div class="row">
        <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
          <div class="card">
            <div class="card-body p-3">
              <div class="row">
                <div class="col-8">
                  <div class="numbers">
                    <p class="text-sm mb-0 text-uppercase font-weight-bold">Today's Sale</p>
                    <h5 class="font-weight-bolder">
                      £ {{$total_sale_price_today}}
                    </h5>
                    <p class="mb-0">
                      <span class="text-success text-sm font-weight-bolder">£ {{$total_sale_price}}</span>
                      this month
                    </p>
                  </div>
                </div>
                <div class="col-4 text-end">
                  <div class="icon icon-shape bg-gradient-primary shadow-primary text-center rounded-circle">
                    <i class="ni ni-money-coins text-lg opacity-10" aria-hidden="true"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>


         <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
          <div class="card">
            <div class="card-body p-3">
              <div class="row">
                <div class="col-8">
                  <div class="numbers">
                    <p class="text-sm mb-0 text-uppercase font-weight-bold">Today's Profits</p>
                    <h5 class="font-weight-bolder">
                      {{$total_sale_price_today - $total_cost_price_today}}
                    </h5>
                    <p class="mb-0">
                      <span class="text-danger text-sm font-weight-bolder">£ {{$total_sale_price - $total_cost_price}}</span>
                      this month
                    </p>
                  </div>
                </div>
                <div class="col-4 text-end">
                  <div class="icon icon-shape bg-gradient-success shadow-success text-center rounded-circle">
                    <i class="ni ni-paper-diploma text-lg opacity-10" aria-hidden="true"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>



        <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
          <div class="card">
            <div class="card-body p-3">
              <div class="row">
                <div class="col-8">
                  <div class="numbers">
                    <p class="text-sm mb-0 text-uppercase font-weight-bold">Today's Users</p>
                    <h5 class="font-weight-bolder">
                      {{$todaysNewMembers}}
                    </h5>
                    <p class="mb-0">
                      <span class="text-success text-sm font-weight-bolder">{{$MonthNewMembers}}</span>
                       new added this month.
                    </p>
                  </div>
                </div>
                <div class="col-4 text-end">
                  <div class="icon icon-shape bg-gradient-danger shadow-danger text-center rounded-circle">
                    <i class="ni ni-world text-lg opacity-10" aria-hidden="true"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
       
        <div class="col-xl-3 col-sm-6">
          <div class="card">
            <div class="card-body p-3">
              <div class="row">
                <div class="col-8">
                  <div class="numbers">
                    <p class="text-sm mb-0 text-uppercase font-weight-bold">Products</p>
                    <h5 class="font-weight-bolder">
                      {{$todaysNewProduct}}
                    </h5>
                    <p class="mb-0">
                      <span class="text-success text-sm font-weight-bolder">{{$MonthNewProduct}}</span> new added this month.
                    </p>
                  </div>
                </div>
                <div class="col-4 text-end">
                  <div class="icon icon-shape bg-gradient-warning shadow-warning text-center rounded-circle">
                    <i class="ni ni-cart text-lg opacity-10" aria-hidden="true"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="row mt-4">
        <div class="col-lg-12 mb-lg-0 mb-4">
          <div class="card z-index-2 h-100">
            <div class="card-header pb-0 pt-3 bg-transparent">
              <h6 class="text-capitalize">Sales overview</h6>
              <p class="text-sm mb-0">
                <i class="fa fa-arrow-up text-success"></i>
                <span class="font-weight-bold">Sales data.</span>
              </p>
            </div>
            <div class="card-body p-3">
              <div class="chart">
                <canvas id="chart-line" class="chart-canvas" height="300"></canvas>
              </div>
            </div>
          </div>
        </div>



    
      </div>


      <div class="row mt-4">
        <div class="col-lg-7 mb-lg-0 mb-4">
          <div class="card ">
            <div class="card-header pb-0 p-3">
              <div class="d-flex justify-content-between">
                <h6 class="mb-2">Latest Orders (5)</h6>
              </div>
            </div>
            <div class="table-responsive">
              <table class="table align-items-center ">
                  <thead>
                    <tr>
                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Sr. No.</th>
                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Order No.</th>
                        <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Amount</th>
                        <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Date</th>
                        <th class="text-secondary opacity-7"></th>
                    </tr>
                  </thead>
                <tbody>
                         @php
                            $counter = 1; // Initialize the counter variable
                    @endphp

                  @foreach($orderhistory as $orders)
                    <tr>
                        <td>{{ $counter++ }}</td>
                      <td>
                        <div class="d-flex px-2 py-1">
                          <div class="d-flex flex-column justify-content-center">
                            <h6 class="mb-0 text-sm">{{$orders->id}}</h6>
                          </div>
                        </div>
                      </td>
                    
                     
                      <td class="align-middle text-center">
                        <span class="badge badge-sm bg-gradient-info">{{$orders->total_price}}</span>
                      </td>
                      
                      <td class="align-middle text-center">
                        <span class="text-secondary text-xs font-weight-bold">{{ $orders->created_at->format('d/m/y') }}</span>
                      </td>
                      <td class="align-middle">
                          <a href="javascript:;" class="badge badge-sm bg-gradient-success" data-toggle="tooltip" data-original-title="Edit user" onclick="orderdetail({{ $orders->id }})">
                              <i class="fas fa-edit"></i> Order Details
                          </a>

                       
                      </td>

                    </tr>




                    <script>
                        function orderdetail(orderid) {
                                var editUrl = '{{ url('/singleorderhistory') }}/' + orderid;
                                console.log(editUrl);
                                window.location.href = editUrl;
                        }

                       function deleteUser(orderid) {
                            // Show a confirmation dialog
                            if (window.confirm('Are you sure you want to delete this Order?')) {
                                // If user clicks OK, proceed with the deletion
                              
                                 var editUrl = '{{ url('/delete-orderhistory') }}/' + orderid;
                                console.log(editUrl);
                                window.location.href = editUrl;
                                
                                
                            }
                        }
                    </script>

                  @endforeach
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div class="col-lg-5">
          <div class="card">
            <div class="card-header pb-0 p-3">
              <h6 class="mb-0">Latest Products (5)</h6>
            </div>
            <div class="card-body p-3">
              <ul class="list-group">

                @foreach($latestproducts as $product)
                <li class="list-group-item border-0 d-flex justify-content-between ps-0 mb-2 border-radius-lg">
                  <div class="d-flex align-items-center">
                    <div class="d-flex flex-column">
                      <h6 class="mb-1 text-dark text-sm">{{$product->name}}</h6>
                      <span class="text-xs">£ {{$product->sale_price}}</span>
                    </div>
                  </div>
                </li>
                @endforeach
              
             
             
              </ul>
            </div>
          </div>
        </div>
      </div>
     
    </div>



@if(!empty($monthlySales) && count($monthlySales) > 0)
    @push('scripts')
    <script>
        var ctx1 = document.getElementById("chart-line").getContext("2d");

        var gradientStroke1 = ctx1.createLinearGradient(0, 230, 0, 50);

        gradientStroke1.addColorStop(1, 'rgba(94, 114, 228, 0.2)');
        gradientStroke1.addColorStop(0.2, 'rgba(94, 114, 228, 0.0)');
        gradientStroke1.addColorStop(0, 'rgba(94, 114, 228, 0)');
        
        new Chart(ctx1, {
          type: "line",
          data: {
            labels: ["Jan", "Feb", "March", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
            datasets: [{
              label: "Monthly Sales",
              tension: 0.4,
              borderWidth: 0,
              pointRadius: 0,
              borderColor: "#5e72e4",
              backgroundColor: gradientStroke1,
              borderWidth: 3,
              fill: true,
              data: @json($monthlySales),
              maxBarThickness: 6
            }],
          },
          options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
              legend: {
                display: false,
              }
            },
            interaction: {
              intersect: false,
              mode: 'index',
            },
            scales: {
              y: {
                grid: {
                  drawBorder: false,
                  display: true,
                  drawOnChartArea: true,
                  drawTicks: false,
                  borderDash: [5, 5]
                },
                ticks: {
                  display: true,
                  padding: 10,
                  color: '#fbfbfb',
                  font: {
                    size: 11,
                    family: "Open Sans",
                    style: 'normal',
                    lineHeight: 2
                  },
                }
              },
              x: {
                grid: {
                  drawBorder: false,
                  display: false,
                  drawOnChartArea: false,
                  drawTicks: false,
                  borderDash: [5, 5]
                },
                ticks: {
                  display: true,
                  color: '#ccc',
                  padding: 20,
                  font: {
                    size: 11,
                    family: "Open Sans",
                    style: 'normal',
                    lineHeight: 2
                  },
                }
              },
            },
          },
        });
    </script>
    @endpush
@endif


@endsection