@extends('layout.app')
@section('content')
<div class="main-content">
  <div class="page-content">
    <div class="container-fluid">
      <!-- start page title -->
      <div class="row">
        <div class="col-12">
          <div class="page-title-box align-items-center justify-content-between">
            <center><h4>Welcome To Feedback Dashboard</h4></center>
          </div>
        </div>
      </div>
      <!-- end page title -->
      <div class="row">
        <div class="col-xl-4">
          <div class="card overflow-hidden">
            <div class="row">
              <div class="col-12">
                <div class="text-primary p-3">
                  <h5 class="text-primary">Total Restrooms</h5>
                  <p>{{$categories}}</p>
                  <!-- <p style="text-transform:uppercase;"> HI, {{ Auth::user()->name }}</p> -->
                </div>
              </div>
              <div class="col-4 align-self-end"> 
              </div>
            </div>
          </div>
          <div class="card">
          
          </div>
        </div>
        <div class="col-xl-8">
          <div class="row">
             <div class="col-md-4">
              <div class="card mini-stats-wid">
                <div class="card-body">
                  <div class="d-flex">
                    <div class="flex-grow-1">
                      <p class="text-muted fw-medium">Total Complaints Received </p>
                      <h4 class="mb-0">{{$positive}}</h4>
                    </div>
                    <div class="flex-shrink-0 align-self-center">
                      <div class="mini-stat-icon avatar-sm rounded-circle bg-primary">
                        <span class="avatar-title">
                        <i class="bx bx-copy-alt font-size-24"></i>
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div> 
             <div class="col-md-4">
              <div class="card mini-stats-wid">
                <div class="card-body">
                  <div class="d-flex">
                    <div class="flex-grow-1">
                      <p class="text-muted fw-medium">Complaints Resolved</p>
                      <h4 class="mb-0">{{$negative}}</h4>
                    </div>
                    <div class="flex-shrink-0 align-self-center ">
                      <div class="avatar-sm rounded-circle bg-primary mini-stat-icon">
                        <span class="avatar-title rounded-circle bg-primary">
                        <i class="bx bx-archive-in font-size-24"></i>
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div> 
             <div class="col-md-4">
              <div class="card mini-stats-wid">
                <div class="card-body">
                  <div class="d-flex">
                    <div class="flex-grow-1">
                      <p class="text-muted fw-medium">Non Action Complaints</p>
                      <h4 class="mb-0">{{$actions}}</h4>
                    </div>
                    <div class="flex-shrink-0 align-self-center">
                      <div class="avatar-sm rounded-circle bg-primary mini-stat-icon">
                        <span class="avatar-title rounded-circle bg-primary">
                        <i class="bx bx-purchase-tag-alt font-size-24"></i>
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div> 
          </div>
          <!-- end row -->
          <div class="card">
            <div class="card-body">
            <div class="container px-4 mx-auto">
        {!! $chart->container() !!}
  
      <div class="">
        <script src="{{ $chart->cdn() }}"></script>
        {{ $chart->script() }}
      </div>
    </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.min.js" integrity="sha512-L0Shl7nXXzIlBSUUPpxrokqq4ojqgZFQczTYlGjzONGTDAcLremjwaWv5A+EDLnxhQzY5xUZPWLOLqYRkY0Cbw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> 
  </div>
</div>

</div>
<script>
  var ctx = document.getElementById('lineChart').getContext('2d');
  var myChart = new Chart(ctx, {
      type: 'bar',
      data: {
          labels: @json($data['labels']),
          datasets: [
              {
                  label: 'Yes Count',
                  data: @json($data['data'][0]), 
                  borderColor: 'rgba(52,195,143)',
                  borderWidth: 0.5,
                  fill: false
              },
              {
                  label: 'No Count',
                  data: @json($data['data'][1]), // 'no_count' data
                  borderColor: 'rgba(255, 0, 0)',
                  borderWidth: 0.5,
                  fill: false
              }
          ]
      },
      options: {
          scales: {
              y: {
                  beginAtZero: true
              }
          }
      }
  });
</script>
<!-- apexcharts -->
<script src="assets/libs/apexcharts/apexcharts.min.js"></script>
<!-- apexcharts init -->
<script src="assets/js/pages/apexcharts.init.js"></script>
@endsection