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


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

<body>

  <?php $this->load->view("kepaladinas/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">List Libur</h4>
            <div class="card-content">
              <div style="overflow-x: auto">
                <table id="table_list_perjalanan_dinas" class="table table-striped table-bordered display" style="width:100%">
                  <thead>
                    <tr>
                      <th>No</th>
                      <th>Range Tanggal</th>
                      <th>List Pegawai</th>
                      <th>Created At</th>
                      <th>Aksi</th>
                    </tr>
                  </thead>

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

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

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

  <div class="modal fade" id="modal_informasi_perjalanan_dinas" tabindex="-1" role="dialog" aria-labelledby="myModalLabel-1">
    <div class="modal-dialog modal-lg" role="document">
      <form 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"> Informasi Perjalanan Dinas</h4>
          <!-- <p style="font-size: 10px;"><i>(Geserkan marker ke titik kordinat dinas)</i></p> -->
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label for="nik">Range Tanggal</label>
            <input type="text" class="form-control" id="range_tanggal" disabled>
          </div>
          <div class="form-group">
            <label for="nik">List Pegawai</label>
            <textarea name="list_karyawan" class="form-control" id="list_karyawan" cols="30" rows="10" style="resize: none;" disabled></textarea>
          </div>
          <div class="form-group">
            <label for="nama">Keterangan</label>
            <textarea name="keterangan" class="form-control" id="keterangan" cols="30" rows="10" style="resize: none;" disabled></textarea>
          </div>
          <div class="form-group">
            <label for="nama">Created At</label>
            <input type="text" class="form-control" id="created_at" disabled>
          </div>

          <div class="form-group" id="isi_surat"></div>

        </div>

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

  <?php $this->load->view('kepaladinas/scripts') ?>
  <!-- Select2 -->
  <script src="<?= base_url() ?>assets/plugin/select2/js/select2.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>

  <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 table;

    function datatables() {
      table = $('#table_list_perjalanan_dinas').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 + "kepaladinas/perjalanan_dinas",
          "type": "POST",
          data: {
            proses: 'table_dinas'
          },

        },

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

    async function check_info(id_perjalanan_dinas) {
      // console.log(id_perjalanan_dinas)
      let data
      try {
        data = await $.ajax({
          url: server_url_api + "perjalanan_dinas?id_perjalanan_dinas=" + id_perjalanan_dinas + "&id_dinas=" + id_dinas,
          type: 'get',
          async: false,
          beforeSend: function(res) {
            block_ui("Mengambil Data Informasi Perjalanan Dinas");
          },
        });
        data = data.data
        console.log(data);

        await $.unblockUI();
        $("#range_tanggal").val(data.range_tanggal)
        $("#keterangan").val(data.ket)
        $("#list_karyawan").val(data.list_karyawan)
        $("#created_at").val(data.created_at)
        const laporan = `<embed src="${server_url}${data.sppd}" frameborder="1" width="100%" height="500px">`;
        $("#isi_surat").empty();
        $("#isi_surat").append(laporan);
        $('#modal_informasi_perjalanan_dinas').modal('show');
      } 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);


      }
      // $('#modal_informasi_perjalanan_dinas').modal('show');
    }
  </script>



</body>

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

</html>