@extends("layouts.master")

@section('content')
        <!-- Content Header (Page header) -->
    <div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1 class="m-0">Visuaisasi Data WhatsApp</h1>
          </div><!-- /.col -->
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="#">Home</a></li>
              <li class="breadcrumb-item active">Data WhatsApp</li>
            </ol>
          </div><!-- /.col -->
        </div><!-- /.row -->
      </div><!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->

    <!-- Main content -->
     <section class="content">
      <div class="container-fluid">
        <div class="row">
          <div class="col">

            <!-- DONUT CHART -->
            <div class="card card-danger">
              <div class="card-header">
                <h3 class="card-title">Data WhatsApp Klasifikasi Manual</h3>

                <div class="card-tools">
                  <button type="button" class="btn btn-tool" data-card-widget="collapse">
                    <i class="fas fa-minus"></i>
                  </button>
                  <button type="button" class="btn btn-tool" data-card-widget="remove">
                    <i class="fas fa-times"></i>
                  </button>
                </div>
              </div>
              <div class="card-body">
                <canvas id="donutChart" style="min-height: 250px; height: 350px; max-height: 350px; max-width: 100%;"></canvas>
              </div>
              <!-- /.card-body -->
            </div>
            <!-- /.card -->

            <!-- PIE CHART -->
            <div class="card card-primary">
              <div class="card-header">
                <h3 class="card-title">Data WhatsApp Klasifikasi Model</h3>

                <div class="card-tools">
                  <button type="button" class="btn btn-tool" data-card-widget="collapse">
                    <i class="fas fa-minus"></i>
                  </button>
                  <button type="button" class="btn btn-tool" data-card-widget="remove">
                    <i class="fas fa-times"></i>
                  </button>
                </div>
              </div>
              <div class="card-body">
                <canvas id="pieChart" style="min-height: 250px; height: 350px; max-height: 350px; max-width: 100%;"></canvas>
              </div>
              <!-- /.card-body -->
            </div>
            <!-- /.card -->

            <div class="card card-success">
              <div class="card-header">
                <h3 class="card-title">Wordcloud Data WhatsApp</h3>

                <div class="card-tools">
                  <button type="button" class="btn btn-tool" data-card-widget="collapse">
                    <i class="fas fa-minus"></i>
                  </button>
                  <button type="button" class="btn btn-tool" data-card-widget="remove">
                    <i class="fas fa-times"></i>
                  </button>
                </div>
              </div>
              <div class="card-body">
                <img src="{{ asset('wordcloud_wa.png') }}" alt="WordCloud" style="min-height: 250px; height: 550px; max-height: 550px; max-width: 100%;">
                {{-- <img src="app/public/wordcloud_tele.png" style="min-height: 250px; height: 350px; max-height: 350px; max-width: 100%;"></img> --}}
              </div>
              <!-- /.card-body -->
            </div>

          </div>
          <!-- /.col (LEFT) -->
 
          <!-- /.col (RIGHT) -->
        </div>
        <!-- /.row -->
      </div><!-- /.container-fluid -->
    </section>

    {{-- Visuaisasi DATA WhatsApp --}}

    <!-- /.content -->
@endsection

@section('grafikwa')
     <script>

  var manualData = @json($manualCounts);
  var svmData = @json($svmCounts);

     var donutChartCanvas = $('#donutChart').get(0).getContext('2d')
     var donutData = {
         labels: [
             'Fitur',
             'Performa',
             'Tampilan',
         ],
         datasets: [{
             data: manualData,
             backgroundColor: ['#f56954', '#00a65a', '#f39c12'],
         }]
     }
     var donutOptions = {
         maintainAspectRatio: false,
         responsive: true,
     }
     //Create pie or douhnut chart
     // You can switch between pie and douhnut using the method below.
     new Chart(donutChartCanvas, {
         type: 'pie',
         data: donutData,
         options: donutOptions
     })

     //-------------
     //- PIE CHART -
     //-------------
     // Get context with jQuery - using jQuery's .get() method.
     var pieChartCanvas = $('#pieChart').get(0).getContext('2d')
         var pieData = {
         labels: [
             'Fitur',
             'Performa',
             'Tampilan',
         ],
         datasets: [{
             data: svmData,
             backgroundColor: ['#f56954', '#00a65a', '#f39c12'],
         }]
     }
     var pieOptions = {
         maintainAspectRatio: false,
         responsive: true,
     }
     //Create pie or douhnut chart
     // You can switch between pie and douhnut using the method below.
     new Chart(pieChartCanvas, {
         type: 'pie',
         data: pieData,
         options: pieOptions
     })
 </script>
@endsection