@extends('dashboard.base')

@section('content')

          <div class="container-fluid">
            <div class="fade-in">
              <div class="row">
                <div class="col-sm-6 col-lg-3">
                  <div class="card text-white bg-primary">
                    <div class="card-body pb-0">
                      <button class="btn btn-transparent p-0 float-right" type="button">
                        <svg class="c-icon">
                          <use xlink:href="assets/icons/coreui/free-symbol-defs.svg#cui-location-pin"></use>
                        </svg>
                      </button>
                      <div class="text-value-lg">{{number_format($jumlahPegawaiAktif,0,',','.')}}</div>
                      <div>Total Pegawai</div>
                    </div>
                    <div class="c-chart-wrapper mt-3 mx-3" style="height:70px;">
                      <canvas class="chart" id="card-chart1" height="70"></canvas>
                    </div>
                  </div>
                </div>
                <!-- /.col-->
                <div class="col-sm-6 col-lg-3">
                  <div class="card text-white bg-info">
                    <div class="card-body pb-0">
                      <button class="btn btn-transparent p-0 float-right" type="button">
                        <svg class="c-icon">
                          <use xlink:href="assets/icons/coreui/free-symbol-defs.svg#cui-location-pin"></use>
                        </svg>
                      </button>
                      <div class="text-value-lg">{{number_format($jumlahJenisPotongan,0,',','.')}}</div>
                      <div>Jenis Potongan</div>
                    </div>
                    <div class="c-chart-wrapper mt-3 mx-3" style="height:70px;">
                      <canvas class="chart" id="card-chart2" height="70"></canvas>
                    </div>
                  </div>
                </div>
                <!-- /.col-->
                <div class="col-sm-6 col-lg-3">
                  <div class="card text-white bg-warning">
                    <div class="card-body pb-0">
                      <div class="btn-group float-right">
                        <button class="btn btn-transparent dropdown-toggle p-0" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                          <svg class="c-icon">
                            <use xlink:href="assets/icons/coreui/free-symbol-defs.svg#cui-settings"></use>
                          </svg>
                        </button>
                        <div class="dropdown-menu dropdown-menu-right"><a class="dropdown-item" href="#">Action</a><a class="dropdown-item" href="#">Another action</a><a class="dropdown-item" href="#">Something else here</a></div>
                      </div>
                      <div class="text-value-lg">{{number_format($jumlahDaftarDicetak,0,',','.')}}</div>
                      <div>Daftar Gaji Dicetak</div>
                    </div>
                    <div class="c-chart-wrapper mt-3" style="height:70px;">
                      <canvas class="chart" id="card-chart3" height="70"></canvas>
                    </div>
                  </div>
                </div>
                <!-- /.col-->
                <div class="col-sm-6 col-lg-3">
                  <div class="card text-white bg-danger">
                    <div class="card-body pb-0">
                      <div class="btn-group float-right">
                        <button class="btn btn-transparent dropdown-toggle p-0" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                          <svg class="c-icon">
                            <use xlink:href="assets/icons/coreui/free-symbol-defs.svg#cui-settings"></use>
                          </svg>
                        </button>
                        <div class="dropdown-menu dropdown-menu-right"><a class="dropdown-item" href="#">Action</a><a class="dropdown-item" href="#">Another action</a><a class="dropdown-item" href="#">Something else here</a></div>
                      </div>
                      <div class="text-value-lg">{{number_format($jumlahInstasi,0,',','.')}}</div>
                      <div>Instansi Terdaftar</div>
                    </div>
                    <div class="c-chart-wrapper mt-3 mx-3" style="height:70px;">
                      <canvas class="chart" id="card-chart4" height="70"></canvas>
                    </div>
                  </div>
                </div>
                <!-- /.col-->
              </div>

              {{-- Carousel promo --}}
              <div id="carousel-promo" class="carousel slide mb-4" data-ride="carousel">
                <div class="carousel-inner">
                  @foreach ($promoImages as $key => $promo)
                    <div class="carousel-item {{ $key == 0 ? 'active' : '' }}" style="height: 400px">
                      <a href="#" class="btn-promo" data-toggle="modal" data-target="#modal-promo" data-id="{{ $promo->id }}">
                        <img class="d-block mx-auto mh-100 mw-100 w-auto" src="{{ asset("uploads/".$promo->image) }}" alt="promo">
                      </a>
                    </div>
                  @endforeach
                </div>
                <a class="carousel-control-prev" href="#carousel-promo" role="button" data-slide="prev">
                  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                  <span class="sr-only">Previous</span>
                </a>
                <a class="carousel-control-next" href="#carousel-promo" role="button" data-slide="next">
                  <span class="carousel-control-next-icon" aria-hidden="true"></span>
                  <span class="sr-only">Next</span>
                </a>
              </div>

              <!-- Modal -->
              <div class="modal fade" id="modal-promo" tabindex="-1" role="dialog" aria-labelledby="modal-promo" aria-hidden="true">
                <div class="modal-dialog modal-lg" role="document">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h5 class="modal-title" id="modal-promo">Detail Promo</h5>
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                      </button>
                    </div>
                    <div id="modal-loading" class="m-4 d-flex justify-content-center">
                      <div class="spinner-border" role="status">
                        <span class="sr-only">Loading...</span>
                      </div>                    
                    </div>
                    <div class="modal-body d-none">
                      <img id="detail-promo-image" src="" alt="" class="w-100 mb-3"><br>
                      <small>Deskripsi</small>
                      <p id="detail-promo-desc"></p>
                      <small>Kontak</small>
                      <p id="detail-promo-kontak"></p>
                    </div>
                  </div>
                </div>
              </div>

              <!-- /.row-->
              <div class="row">
                <div class="col-md-12">
                  <div class="card">
                    <div class="card-header">Statistik Pegawai</div>
                    <div class="card-body">
                      <div class="row">
                        <div class="col-sm-6">
                          <div class="c-chart-wrapper">
                            <canvas id="canvas-5"></canvas>
                          </div>
                        </div>
                        <!-- /.col-->
                        <div class="col-sm-6">
                          <div class="c-chart-wrapper">
                            <canvas id="canvas-2"></canvas>
                          </div>
                        </div>
                      </div>
                      <br>
                      <table class="table table-hover table-responsive-sm table-outline mb-0">
                        <thead class="thead-light">
                          <tr>
                            <th class="text-center">
                              <svg class="c-icon">
                                <use xlink:href="assets/icons/coreui/free-symbol-defs.svg#cui-people"></use>
                              </svg>
                            </th>
                            <th class="text-center">Nama Pegawai</th>
                            <th class="text-center">Login Terakhir</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr>
                            <td class="text-center">
                              <div class="c-avatar">
                                <img class="c-avatar-img" src="/images/avatars/1.jpg" alt="user@email.com">
                                <span class="c-avatar-status bg-success"></span>
                              </div>
                            </td>
                            <td>
                              <div>Arya Maharta</div>
                              <div class="small text-muted"><span>No. Pegawai /  NIP</span> : 517101233343434</div>
                            </td>
                            <td class="text-center">
                              <div>21 Oktober 2020</div>
                              <div class="small text-muted">08:00</div>
                            </td>
                          </tr>
                          <tr>
                            <td class="text-center">
                              <div class="c-avatar">
                                <img class="c-avatar-img" src="/images/avatars/5.jpg" alt="user@email.com">
                                <span class="c-avatar-status bg-success"></span>
                              </div>
                            </td>
                            <td>
                              <div>Arya Maharta</div>
                              <div class="small text-muted"><span>No. Pegawai /  NIP</span> : 517101233343434</div>
                            </td>
                            <td class="text-center">
                              <div>21 Oktober 2020</div>
                              <div class="small text-muted">08:00</div>
                            </td>
                          </tr>
                          <tr>
                            <td class="text-center">
                              <div class="c-avatar">
                                <img class="c-avatar-img" src="/images/avatars/3.jpg" alt="user@email.com">
                                <span class="c-avatar-status bg-success"></span>
                              </div>
                            </td>
                            <td>
                              <div>Arya Maharta</div>
                              <div class="small text-muted"><span>No. Pegawai /  NIP</span> : 517101233343434</div>
                            </td>
                            <td class="text-center">
                              <div>21 Oktober 2020</div>
                              <div class="small text-muted">08:00</div>
                            </td>
                          </tr>
                          <tr>
                            <td class="text-center">
                              <div class="c-avatar">
                                <img class="c-avatar-img" src="/images/avatars/2.jpg" alt="user@email.com">
                                <span class="c-avatar-status bg-success"></span>
                              </div>
                            </td>
                            <td>
                              <div>Arya Maharta</div>
                              <div class="small text-muted"><span>No. Pegawai /  NIP</span> : 517101233343434</div>
                            </td>
                            <td class="text-center">
                              <div>21 Oktober 2020</div>
                              <div class="small text-muted">08:00</div>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
                <!-- /.col-->
              </div>
              <!-- /.row-->
            </div>
          </div>

@endsection

@section('javascript')
    <script src="{{ asset('js/Chart.min.js') }}"></script>
    <script src="{{ asset('js/coreui-chartjs.bundle.js') }}"></script>
    <script src="{{ asset('js/main.js') }}" defer></script>
    <script>
      $(document).ready(function(){
        var pegawai_gender = @json($pegawaiByGender);
        const random = () => Math.round(Math.random() * 100);
        const barChart = new Chart(document.getElementById('canvas-2'), {
          type: 'bar',
          data: {
            labels : ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
            datasets : [
              {
                backgroundColor : 'rgba(220, 220, 220, 0.5)',
                borderColor : 'rgba(220, 220, 220, 0.8)',
                highlightFill: 'rgba(220, 220, 220, 0.75)',
                highlightStroke: 'rgba(220, 220, 220, 1)',
                data : [random(), random(), random(), random(), random(), random(), random()]
              },
              {
                backgroundColor : 'rgba(151, 187, 205, 0.5)',
                borderColor : 'rgba(151, 187, 205, 0.8)',
                highlightFill : 'rgba(151, 187, 205, 0.75)',
                highlightStroke : 'rgba(151, 187, 205, 1)',
                data : [random(), random(), random(), random(), random(), random(), random()]
              }
            ]
          },
          options: {
            responsive: true
          }
        })


        const pieChart = new Chart(document.getElementById('canvas-5'), {
          type: 'pie',
          data: {
            labels: ['Laki - laki', 'Perempuan'],
            datasets: [{
              data: pegawai_gender,
              backgroundColor: ['#FF6384', '#36A2EB'],
              hoverBackgroundColor: ['#FF6384', '#36A2EB']
            }]
          },
          options: {
            responsive: true
          }
        })

        $('#carousel-promo').on('click', '.carousel-inner .carousel-item .btn-promo', function (e) {
          console.log($(this).data('id'));
          var id = $(this).data('id');
          $.ajax({
            url: "/get-promo/"+id,
            method: "GET",
            beforeSend: function() {
              $("#modal-loading").addClass("d-flex").removeClass("d-none");
              $(".modal-body").addClass("d-none");
            },
            success: function(res){
              $("#detail-promo-image").attr("src", "uploads/"+res.image);
              $("#detail-promo-desc").text(res.description);
              $("#detail-promo-kontak").text(res.kontak);
              
              console.log(res);
            },
            error: function(err){
              console.log(err);
            },
            complete: function() {
              $("#modal-loading").removeClass("d-flex").addClass("d-none");
              $(".modal-body").removeClass("d-none");
            }
          });
        })
      });
    </script>
@endsection