
<?= $this->extend('Page_layout') ?>
<?= $this->section('content') ?>
  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1>Talent Performance Report</h1>
          </div>
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
            
              <li class="breadcrumb-item active">Talent Performance Report</li>
            </ol>
          </div>
        </div>
      </div><!-- /.container-fluid -->
    </section>

    <!-- Main content -->
    <section class="content">

      <!-- Default box -->
      <div class=" card card-primary ">
        <div class="bg-olive card-header">
          <h3 class="card-title">Talent Performance Report</h3>

          <div class="card-tools">
            <button type="button" class="btn btn-tool" data-card-widget="collapse" title="Collapse">
              <i class="fas fa-minus"></i>
            </button>
            <button type="button" class="btn btn-tool" data-card-widget="remove" title="Remove">
              <i class="fas fa-times"></i>
            </button>
          </div>
        </div>
        <div class="card-body">
          <p>Talent Performance Report filter</p>
         
                <div class="card-body">
                  <div class="form-group row">
                    <label for="names" class="col-sm-2 col-form-label">Talent name</label>
                    <div class="col-sm-4">
                      <input type="text" class="form-control" id="nama" placeholder="Input Name">
                    </div>
                  </div>
                  <div class="form-group row">
                    <label for="names" class="col-sm-2 col-form-label">Year</label>
                    <div class="col-sm-4">
                      <input type="number" class="form-control" id="tahun" placeholder="Input Year">
                    </div>
                  </div>
               
                  

                  
                   <button type="button" class="btn btn-info search-data">Search</button>
             
                </div>

             <div class="col-12" style="overflow-x:scroll">
             <table id="table-data" style="width:1000px;" class="table table-bordered table-hover">
                  <thead>
                  <tr>
                   
                    <th>Talent name</th>
                    <th>Year</th>
                    <th>Month</th>
                    <th>Followr IG</th>
                    <th>Montly Progress</th>
                    <th>Follower Tiktok</th>
                    <th>Monthly Progress</th>
                     <th>Follower Twitter</th>
                    <th>Monthly Progress</th>
                     <th>Subs youtube</th>
                    <th>Monthly Progress</th>
                      <th>EG IG %</th>
                    <th>Monthly Progress</th>
                     <th>EG Tiktok %</th>
                    <th>Monthly Progress</th>
                     <th>ER  Twitter %</th>
                    <th>Monthly Progress</th>
                     <th>ER Tiktok %</th>
                    <th>Monthly Progress</th>
                 
                    
                  </tr>
                  </thead>
                  <tbody>
                 
                  
                  </tbody>
                 
                </table>
                 </div>
                
        </div>
        <!-- /.card-body -->
        <div class="card-footer">
            </div>
        <!-- /.card-footer-->
      </div>
      <!-- /.card -->

    </section>
    <!-- /.content -->
    <!-- Main content -->
    <section class="content">
      <div class="container-fluid">
        <div class="row">
          <div class="col-md-6">
            <!-- AREA CHART -->
            <div class="card card-primary">
              <div class="card-header">
                <h3 class="card-title">Follower Chart</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">
                <div class="chart">
                  
                  <canvas id="followerchart" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
                </div>
              </div>
              <!-- /.card-body -->
            </div>
            <!-- /.card -->

            
            

          </div>
          <!-- /.col (LEFT) -->
          <div class="col-md-6">
            <!-- LINE CHART -->
            <div class="card card-info">
              <div class="card-header">
                <h3 class="card-title">Engagement Chart</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">
                <div class="chart">
                  <canvas id="enggagementchart" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
                </div>
              </div>
              <!-- /.card-body -->
            </div>
            <!-- /.card -->

           

           

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

     <!-- Main content -->
     <section class="content">
      <div class="container-fluid">
        <div class="row">
          
        
          <div class="col-md-12">
            <!-- LINE CHART -->
            <div class="card card-danger">
              <div class="card-header">
                <h3 class="card-title">Progress Chart</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="progresschart" style="min-height: 250px; height: 250px; max-width: 100%;"></canvas>
              </div>
              <!-- /.card-body -->
            </div>
            <!-- /.card -->

           

           

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



   <?= $this->endSection() ?> 

  <?=$this->section("scripts")?>
<script src="<?=base_url('public/plugins/jquery-ui/jquery-ui.js')?>"></script>  
<script src="<?=base_url('public/plugins/datatables/jquery.dataTables.min.js')?>"></script>
<script src="<?=base_url('public/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js')?>"></script>
<script src="<?=base_url('public/plugins/datatables-responsive/js/dataTables.responsive.min.js')?>"></script>
<script src="<?=base_url('public/plugins/datatables-responsive/js/responsive.bootstrap4.min.js')?>"></script>
<script src="<?=base_url('public/plugins/datatables-buttons/js/dataTables.buttons.min.js')?>"></script>
<script src="<?=base_url('public/plugins/datatables-buttons/js/buttons.bootstrap4.min.js')?>"></script>
<script src="<?=base_url('public/plugins/jszip/jszip.min.js')?>"></script>
<script src="<?=base_url('public/plugins/pdfmake/pdfmake.min.js')?>"></script>
<script src="<?=base_url('public/plugins/pdfmake/vfs_fonts.js')?>"></script>
<script src="<?=base_url('public/plugins/datatables-buttons/js/buttons.html5.min.js')?>"></script>
<script src="<?=base_url('public/plugins/datatables-buttons/js/buttons.print.min.js')?>"></script>
<script src="<?=base_url('public/plugins/datatables-buttons/js/buttons.colVis.min.js')?>"></script>
<script src="<?=base_url('public/plugins/chart.js/Chart.min.js')?>"></script>

<script>

   

  $(document).ready(function () {


   

    $(document).on('click','.search-data', function () {
      $("#table-data").DataTable().destroy();
          $("#table-data tbody").html("");
          var $data = {
            'nama' : $("#nama").val(),
            'tahun' : $("#tahun").val()
           
          };
          const  $ctwitter = [];
          const  $cyoutube = [];
          const  $cinstagram = [];
          const  $ctiktok = [];
          const  $arr_month = [];


          const  $ptwitter = [];
          const  $pyoutube = [];
          const  $pinstagram = [];
          const  $ptiktok = [];


          const  $etwitter = [];
          const  $eyoutube = [];
          const  $einstagram = [];
          const  $etiktok = [];
         


          $.ajax({
            type: "POST",
            url: "<?= site_url('report/search-performance')?>",
            data: $data,
           
            success: function (response) {
              
             $.each(response.data, function (key, value) { 
              $ctwitter.push(value['FW_TWITTER']);
              $cyoutube.push(value['FW_YOUTUBE']);
              $cinstagram.push(value['FW_IG']);
              $ctiktok.push(value['FW_TIKTOK']);


              $ptwitter.push(value['PROG_TWITTER']);
              $pyoutube.push(value['PROG_YOUTUBE']);
              $pinstagram.push(value['PROG_IG']);
              $ptiktok.push(value['PROG_TIKTOK']);

              $etwitter.push(value['ER_TWITTER']);
              $eyoutube.push(value['ER_YOUTUBE']);
              $einstagram.push(value['ER_IG']);
              $etiktok.push(value['ER_TIKTOK']);

              $arr_month.push(value['PERFORM_MONTH'] + '-' + value['PERFORM_YEAR']);
             
               var body = "<tr>";
              
              
              body += "<td>"+value['talent_name']+"</td>";
              body += "<td>"+value['PERFORM_YEAR']+"</td>";
              body += "<td>"+value['PERFORM_MONTH']+"</td>";
              body += "<td>"+value['FW_IG']+"</td>";
              body += "<td>"+value['PROG_IG']+"%</td>";
              body += "<td>"+value['FW_TIKTOK']+"</td>";
              body += "<td>"+value['PROG_TIKTOK']+"%</td>";
              body += "<td>"+value['FW_TWITTER']+"</td>";
              body += "<td>"+value['PROG_TWITTER']+"%</td>";
              body += "<td>"+value['FW_YOUTUBE']+"</td>";
              body += "<td>"+value['PROG_YOUTUBE']+"</td>";
              body += "<td>"+value['ER_IG']+"</td>";
              body += "<td>"+value['ER_PROG_IG']+"%</td>";
              body += "<td>"+value['ER_TIKTOK']+"</td>";
              body += "<td>"+value['ER_PROG_TIKTOK']+"%</td>";
              body += "<td>"+value['ER_TWITTER']+"</td>";
              body += "<td>"+value['ER_PROG_TWITTER']+"%</td>";
              body += "<td>"+value['ER_YOUTUBE']+"</td>";
              body += "<td>"+value['ER_PROG_YOUTUBE']+"%</td>";
             
              body += "</tr>";
              $("#table-data tbody").append(body);
               
             });
              $("#table-data").DataTable({
                dom: 'Bfrtip',
                buttons: [
                
                    'excelHtml5'
                   
                ]
             } );
             
              followerchart($arr_month,$ctwitter,$cyoutube,$cinstagram,$ctiktok);
              progresschart($arr_month,$ptwitter,$pyoutube,$pinstagram,$ptiktok);
              enggagementchart($arr_month,$etwitter,$eyoutube,$einstagram,$etiktok);
          
            
            }
         
         
          });

          

  
         

      
    });

   


  }); // end of document ready function

  function followerchart($month,$twitter,$youtube,$instagram,$tiktok){
        const labels = $month;

              const data = {
                labels: labels,
                datasets: [{
                  label: 'Twitter',
            
                  borderColor: 'rgb(31, 134, 237)',
                  backgroundColor:'rgb(31, 134, 237)',
                  data: $twitter,
                },
                {
                  label: 'Youtube',
            
                  borderColor: 'rgb(189, 2, 2)',
                  backgroundColor:'rgb(189, 2, 2)',
                  data: $youtube,
                },
                {
                  label: 'Instagram',
            
                  borderColor: 'rgb(189, 2, 136)',
                  backgroundColor:'rgb(189, 2, 136)',
                  data: $instagram,
                },
                {
                  label: 'Tiktok',
            
                  borderColor: 'rgb(0, 0, 0)',
                  backgroundColor:'rgb(0, 0, 0)',
                  data: $tiktok,
                }
            ]
              };

              const config = {
                type: 'line',
                data: data,
                options: {}
              };

                const myChart = new Chart(
                document.getElementById('followerchart'),
                config
              );

  }


  function progresschart($month,$twitter,$youtube,$instagram,$tiktok){
        const labels = $month;

              const data = {
                labels: labels,
                datasets: [{
                  label: 'Twitter',
            
                  borderColor: 'rgb(31, 134, 237)',
                  backgroundColor:'rgb(31, 134, 237)',
                  data: $twitter,
                },
                {
                  label: 'Youtube',
            
                  borderColor: 'rgb(189, 2, 2)',
                  backgroundColor:'rgb(189, 2, 2)',
                  data: $youtube,
                },
                {
                  label: 'Instagram',
            
                  borderColor: 'rgb(189, 2, 136)',
                  backgroundColor:'rgb(189, 2, 136)',
                  data: $instagram,
                },
                {
                  label: 'Tiktok',
            
                  borderColor: 'rgb(0, 0, 0)',
                  backgroundColor:'rgb(0, 0, 0)',
                  data: $tiktok,
                }
            ]
              };

              const config = {
                type: 'line',
                data: data,
                options: {}
              };

                const myChart = new Chart(
                document.getElementById('progresschart'),
                config
              );

  }


  function enggagementchart($month,$twitter,$youtube,$instagram,$tiktok){
        const labels = $month;

              const data = {
                labels: labels,
                datasets: [{
                  label: 'Twitter',
            
                  borderColor: 'rgb(31, 134, 237)',
                  backgroundColor:'rgb(31, 134, 237)',
                  data: $twitter,
                },
                {
                  label: 'Youtube',
            
                  borderColor: 'rgb(189, 2, 2)',
                  backgroundColor:'rgb(189, 2, 2)',
                  data: $youtube,
                },
                {
                  label: 'Instagram',
            
                  borderColor: 'rgb(189, 2, 136)',
                  backgroundColor:'rgb(189, 2, 136)',
                  data: $instagram,
                },
                {
                  label: 'Tiktok',
            
                  borderColor: 'rgb(0, 0, 0)',
                  backgroundColor:'rgb(0, 0, 0)',
                  data: $tiktok,
                }
            ]
              };

              const config = {
                type: 'line',
                data: data,
                options: {}
              };

                const myChart = new Chart(
                document.getElementById('enggagementchart'),
                config
              );

  }


  
</script>

<?=$this->endSection()?>
