@extends('layouts.adminlayout')

@section('content')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<div class="container my-5">
    <div class="row">
        <div class="col-3 px-4">
            <div class="abordr row pb-2">
                <div class="col-6 dflx">
                    <div class="index_tab">
                        <i class="fas fa-calendar-alt "></i>
                    </div>
                </div>
                <div class="col-6">
                    <div class="index_desc mt-2">
                        <h2>{{ $totalissue }}</h2>
                        <h6>Total Issues</h6>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-3 px-4">
            <div class="abordr row pb-2">
                <div class="col-6 dflx">
                    <div class="index_tab">
                        <i class="fas fa-wrench"></i>
                    </div>
                </div>
                <div class="col-6">
                    <div class="index_desc mt-2">
                        <h2>{{ $openissue }}</h2>
                        <h6>Open Issues</h6>
                    </div>
                </div>
            </div>
        </div>
        
         <div class="col-3 px-4">
            <div class="abordr row pb-2">
                <div class="col-6 dflx">
                    <div class="index_tab">
                       <i class="fas fa-check-square"></i>
                    </div>
                </div>
                <div class="col-6">
                    <div class="index_desc mt-2">
                        <h2>{{ $closedissue }}</h2>
                        <h6>Closed Issues</h6>
                    </div>
                </div>
            </div>
        </div>
       
         <div class="col-3 px-4">
            <div class="abordr row pb-2">
                <div class="col-6 dflx">
                    <div class="index_tab">
                       <i class="fas fa-user-secret"></i>
                    </div>
                </div>
                <div class="col-6">
                    <div class="index_desc mt-2">
                        <h2>{{ $unauthoriseduser }}</h2>
                        <h6>Un-authenticate Users</h6>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container mt-5">
    <div class="row">
        <div class="col-6">
            <div class="shadw br">
                <h4 class="px-4 pt-3 pb-2">Month Wise Issues</h4>
                
                <div class="p-4">
                 

 <canvas id="myMonthlyChart"></canvas>



<script>
    
    let labels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'];
let data = {
  labels: labels,
  datasets: [{
    label: 'Issues',
    data: {{ json_encode($issuecount)}},
    backgroundColor: [
      'rgba(255, 99, 132, 0.2)',
      'rgba(255, 159, 64, 0.2)',
      'rgba(255, 205, 86, 0.2)',
      'rgba(75, 192, 192, 0.2)',
      'rgba(54, 162, 235, 0.2)',
      'rgba(153, 102, 255, 0.2)',
      'rgba(255, 159, 64, 0.2)',
      'rgba(255, 205, 86, 0.2)',
      'rgba(75, 192, 192, 0.2)',
      'rgba(54, 162, 235, 0.2)',
      'rgba(153, 102, 255, 0.2)',
      'rgba(201, 203, 207, 0.2)'
    ],
    borderColor: [
      'rgb(255, 99, 132)',
      'rgb(255, 159, 64)',
      'rgb(255, 205, 86)',
      'rgb(75, 192, 192)',
      'rgb(54, 162, 235)',
      'rgb(153, 102, 255)',
      'rgb(255, 159, 64)',
      'rgb(255, 205, 86)',
      'rgb(75, 192, 192)',
      'rgb(54, 162, 235)',
      'rgb(153, 102, 255)',
      'rgb(201, 203, 207)'
    ],
    borderWidth: 1
  }]
};

let config = {
  type: 'bar',
  data: data,
  options: {
    scales: {
      y: {
        beginAtZero: true
      }
    }
  },
};


let ctx = document.getElementById('myMonthlyChart');
  new Chart(ctx, config);
</script>                </div>
                
            </div>
        </div>
        
        <div class="col-6">
            <div class="shadw br">
                <h4 class="px-4 pt-3 pb-2">Department Wise Issues</h4>
                
                <div class="p-4">
                 



 <canvas id="myChart"></canvas>



<script>

 data = {
  labels: [],
  datasets: [{
    label: 'Department Wise Issues',
    data: {{ json_encode($deptissuecount) }},
    backgroundColor: [
      'rgb(255, 99, 132)',
      'rgb(54, 162, 235)',
      'rgb(255, 205, 86)',
      'rgb(127, 205, 86)',
      'rgb(86, 255, 205)',
      'rgb(205, 86, 255)',
      'rgb(255, 86, 127)',
      'rgb(86, 235, 162)',
      'rgb(162, 86, 235)',
      'rgb(99, 132, 255)',
      'rgb(132, 255, 99)',
      'rgb(205, 127, 86)',
      'rgb(86, 205, 255)',
      'rgb(255, 162, 86)',
      'rgb(235, 99, 162)'
    ],
    hoverOffset: 4,
  }]
};

config = {
  type: 'doughnut',
  data: data,
};


 ctx = document.getElementById('myChart');
  new Chart(ctx, config);
  
</script>                </div>
            </div>
        </div>
        
        <div class="col-6 my-4">
            <div class="shadw br">
                <h4 class="px-4 pt-3 pb-2">Type Wise Issues</h4>
                <div class="p-4" >
                 

 <canvas id="myTypeChart"></canvas>



<script>
    
  labels = [
		];
  data = {
  labels: labels,
  datasets: [{
    label: 'Type Wise Issue ',
    data: {{ json_encode($issuetypecount)}},
    backgroundColor: [
      'rgba(255, 99, 132, 0.2)',
      'rgba(255, 159, 64, 0.2)',
      'rgba(255, 205, 86, 0.2)',
      'rgba(75, 192, 192, 0.2)',
      'rgba(54, 162, 235, 0.2)'
    ],
    borderColor: [
      'rgb(255, 99, 132)',
      'rgb(255, 159, 64)',
      'rgb(255, 205, 86)',
      'rgb(75, 192, 192)',
      'rgb(201, 203, 207)'
    ],
    borderWidth: 1
  }]
};

 config = {
  type: 'bar',
  data: data,
  options: {
    scales: {
      y: {
        beginAtZero: true
      }
    }
  },
};


 ctx = document.getElementById('myTypeChart');
  new Chart(ctx, config);
</script>                </div>
                  
            </div>
        </div>
        
          <div class="col-6 my-4">
            <div class="shadw br">       
                <h4 class="px-4 pt-3 pb-2">Serverity Wise Issues</h4>
                <div class="p-4">
                 

 <canvas id="myseverityChart"></canvas>



<script>
    
  labels = ["Low", "Moderate", "High","Very High"];
  data = {
  labels: labels,
  datasets: [{
    label: 'Severity Wise Issue ',
    data: {{ json_encode($serverity)}},
    backgroundColor: [
      'rgba(255, 99, 132, 0.2)',
      'rgba(255, 159, 64, 0.2)',
      'rgba(255, 205, 86, 0.2)',
      'rgba(75, 192, 192, 0.2)',
      'rgba(54, 162, 235, 0.2)'
    ],
    borderColor: [
      'rgb(255, 99, 132)',
      'rgb(255, 159, 64)',
      'rgb(255, 205, 86)',
      'rgb(75, 192, 192)',
      'rgb(201, 203, 207)'
    ],
    borderWidth: 1
  }]
};

 config = {
  type: 'bar',
  data: data,
  options: {
    scales: {
      y: {
        beginAtZero: true
      }
    }
  },
};


 ctx = document.getElementById('myseverityChart');
  new Chart(ctx, config);
</script>                </div>
                
            </div>
        </div>
        

    </div>
</div>

<!--monthly chart-->


       </div>
    </div>
</div>

@endsection