<!DOCTYPE html>
<html lang="en">


<?php $this->load->view("admin/header"); ?>

<body>

  <?php $this->load->view("admin/side_topbar"); ?>

  <div id="wrapper">
    <div class="main-content">
      <div class="row small-spacing">
        <div class="col-xs-12">
          <div class="box-content card">
            <h4 class="box-title" id="title_laporan">Laporan Kegiatan Pegawai </h4>
            <!-- /.dropdown js__dropdown -->
            <div class="card-content">

              <div style="overflow-x: auto">
                <table id="table_list_laporan" class="table table-striped table-bordered display" style="width:100%">
                  <thead>
                    <tr>
                      <th>No</th>
                      <th>Tanggal Upload</th>
                      <th>Judul</th>
                      <th>Aksi</th>
                    </tr>
                  </thead>

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

            <!-- /#flot-chart-1.flot-chart -->
          </div>
          <!-- /.box-content -->
        </div>
        <!-- /.col-xs-12 -->



      </div>
      <!-- /.row -->

      <?php $this->load->view('admin/footer') ?>

    </div>
    <!-- /.main-content -->
  </div>

  <div class="modal fade" id="modal_detail_laporan" tabindex="-1" role="dialog" aria-labelledby="myModalLabel-1" >
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content" >
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="myModalLabel-1">Detail Kegiatan</h4>
          <!-- <p style="font-size: 10px;"><i>(Geserkan marker ke titik kordinat dinas)</i></p> -->
        </div>
        <div class="modal-body">
          <div class="form-group text-center" id="div_img" style="display: none;">
            <img src="" class="avatar" id="img_container" width="250px" height="250px" alt="avatar">
          </div>

          <div class="form-group">
            <label for="waktu">Waktu Kegiatan</label>
            <input type="text" class="form-control" id="waktu" disabled>
          </div>

          <div class="form-group">
            <label for="judul">Judul Kegiatan</label>
            <input type="text" class="form-control" id="judul" disabled>
          </div>

          <div class="form-group">
            <label for="keterangan">Keterangan Kegiatan</label>
            <textarea name="keterangan" id="keterangan" cols="30" rows="10" class="form-control" style="resize: none;"  disabled></textarea>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-danger btn-xs waves-effect waves-light" data-dismiss="modal">Tutup</button>
        </div>
      </div>
    </div>
  </div>

  <?php $this->load->view('admin/scripts') ?>

  <script src="<?= base_url() ?>assets/plugin/datatables/media/js/jquery.dataTables.min.js"></script>
  <script src="<?= base_url() ?>assets/plugin/datatables/media/js/dataTables.bootstrap.min.js"></script>

  <script>
    var id_dinas = <?= $id_dinas ?>;

    $("#title_laporan").html("Laporan Kegiatan Pegawai <?= $nama ?> | <i><?= $nik ?></i>");

    function datatables() {
      table = $('#table_list_laporan').DataTable({
        // "searching": false,
        "lengthMenu": [
          [5, 10, 15, -1],
          [5, 10, 15, "All"]
        ],
        "pageLength": 10,
        "ordering": true,
        "processing": true,
        "serverSide": true,
        // "order": [[ 4, 'desc' ]], 

        "ajax": {
          "url": server_url + "admin/karyawan",
          "type": "POST",
          data: {
            proses: 'table_laporan',
            nik: '<?= $nik ?>'
          },

        },

        "columnDefs": [{
          "targets": [0],
          "orderable": false,
        }, ],
      });
    }
    datatables()

    async function cek_laporan(id_lapoaran) {
      // console.log(id_lapoaran)
      let data;

      try {
        data = await $.ajax({
          url: server_url_api + "detail_kegiatan?id_laporan=" + id_lapoaran,
          type: 'get',
          async: false,
          beforeSend: function(res) {
            block_ui("Mengambil Data Detail Laporan")
          },
        });
        data = data.data
        console.log(data)
        $("#waktu").val(data.created_at)
        $("#judul").val(data.nama_laporan)
        $("#keterangan").val(data.ket_laporan)
        if(data.image == null) {
          $("#div_img").hide()
          $("#img_container").attr("src", "")
        } else {
          $("#div_img").show()
          console.log
          $("#img_container").attr("src", server_url  + data.image)
        }
        await $.unblockUI();
        // show modal
        $("#modal_detail_laporan").modal("show")
        // console.log(data)
      } catch (error) {
        await $.unblockUI();
        const statusCode = error.status;
        console.log(error)
        console.log(statusCode)
        if (statusCode == 0 || statusCode == 500) return toastr.error("Jaringan atau server bermasalah, sila refresh kembali halaman");

        const message = error.responseJSON.message
        toastr.error(message);
      }
    }
  </script>

</body>

<!-- Dibuat oleh Kicap Karan. https://www.kicap-karan.com -->

</html>