<!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">List Surat </h4>
            <!-- /.dropdown js__dropdown -->
            <div class="card-content">
              <div class="form-group">
                <button type="button" class="btn btn-primary btn-sm waves-effect waves-light" onclick="buka_modal_input_surat()">Input Surat</button>
              </div>
              <div style="overflow-x: auto">
                <table id="table_list_surat" class="table table-striped table-bordered display" style="width:100%">
                  <thead>
                    <tr>
                      <th>No Surat</th>
                      <th>Tanggal Pengiriman</th>
                      <th>Tanggal Diterima</th>
                      <th>No Agenda</th>
                      <th>Created At</th>
                      <th>Updated At</th>
                      <th>Aksi</th>
                    </tr>
                  </thead>

                </table>
              </div>
              <br>

            </div>

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



      </div>

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

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

  <div class="modal fade" id="modal_surat_masuk" tabindex="-1" role="dialog" aria-labelledby="myModalLabel-1">
    <div class="modal-dialog modal-lg" role="document">
      <form class="modal-content" onsubmit="return tambah_surat(event)" id="form_input_surat">
        <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"></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" />
          </div> -->
          <!-- <div class="form-group">
            <label for="nik">Foto</label>
            <input type="file" class="form-control" id="foto" required="true">
          </div> -->
          <div class="form-group">
            <label for="asal_surat">Asal Surat</label>
            <!-- <input type="hidden" id="status_form"> -->
            <input type="text" class="form-control" id="asal_surat" placeholder="Masukkan Asal Surat" required>
          </div>
          <div class="form-group">
            <label for="no_surat">No. Surat</label>
            <input type="text" class="form-control" id="no_surat" placeholder="000/0000.0/00/0000" required>
          </div>
          <div class="form-group">
            <label for="tanggal_pengiriman">Tanggal Pengiriman</label>
            <input type="date" class="form-control" id="tanggal_pengiriman" required>
          </div>
          <div class="form-group">
            <label for="tanggal_diterima">Tanggal Diterima</label>
            <input type="date" class="form-control" id="tanggal_diterima" required>
          </div>
          <div class="form-group">
            <label for="no_agenda">No. Agenda</label>
            <input type="text" class="form-control" id="no_agenda" placeholder="000" minlength="1" maxlength="3" onkeypress="return isNumberKey(event)" required>
          </div>
          <div class="form-group">
            <label for="sifat">Sifat</label>
            <select name="sifat" id="sifat" class="form-control">
              <option value="" disabled selected>-Pilih Sifat</option>
              <option value="Segera">Segera</option>
              <option value="Rahsia">Rahsia</option>
              <option value="Sangat Rahsia">Sangat Rahsia</option>
              <!-- <option value="I C">I C</option>
              <option value="I D">I D</option>
              <option value="II A">II A</option>
              <option value="II B">II B</option>
              <option value="II C">II C</option>
              <option value="II D">II D</option>
              <option value="III A">III A</option>
              <option value="III B">III B</option>
              <option value="III C">III C</option>
              <option value="III D">III D</option>
              <option value="IV A">IV A</option>
              <option value="IV B">IV B</option>
              <option value="IV C">IV C</option>
              <option value="IV D">IV D</option> -->
            </select>
          </div>
          <div class="form-group">
            <label for="perihal">Perihal</label>
            <textarea name="perihal" id="perihal" cols="30" rows="10" class="form-control" style="resize: none;" placeholder="Masukkan Perihal" required></textarea>
          </div>
          <div class="form-group">
            <label for="diteruskan_kepada">Diteruskan Kepada</label>
            <select name="diteruskan_kepada" id="diteruskan_kepada" class="form-control">
              <option value="" disabled selected>-Pilih Opsi</option>
              <option value="Sekretaris">Sekretaris</option>
              <option value="Bidang Pemuda">Bidang Pemuda</option>
              <option value="Bidang Olahraga">Bidang Olahraga</option>
              <option value="Bidang Pariwisata">Bidang Pariwisata</option>
              <option value="Bidang Ekonomi Kreatif">Bidang Ekonomi Kreatif</option>
              <option value="Sub Bagian Perencanaan">Sub Bagian Perencanaan</option>
              <option value="Sub Bagian Keuangan Dan Kepegawaian">Sub Bagian Keuangan Dan Kepegawaian</option>
              <option value="Sub Bagian Umum Dan Perlengkapan">Sub Bagian Umum Dan Perlengkapan</option>
              <option value="Kasi Sarana Dan Prasarana Olahraga">Kasi Sarana Dan Prasarana Olahraga</option>
            </select>
          </div>
          <div class="form-group">
            <label for="respon">Respon</label>
            <select name="respon" id="respon" class="form-control">
              <option value="" disabled selected>-Pilih Opsi</option>
              <option value="Tanggapan dan Saran">Tanggapan dan Saran</option>
              <option value="Proses Lebih Lanjut">Proses Lebih Lanjut</option>
              <option value="Koordinasi dan Konfirmasi">Koordinasi dan Konfirmasi</option>
              <option value="Didampingi / Diwakili">Didampingi / Diwakili</option>
            </select>
          </div>
          <div class="form-group" id="div_file_surat">
            <label for="file">Upload File PDF Surat </label>
            <input type="file" class="form-control" id="file_surat" required>
          </div>
          <!-- <div class="form-group">
            <label for="file">URL File PDF Surat</label>
            <input type="text" class="form-control" id="url_surat" placeholder="http://">
          </div> -->
          <div class="form-group">
            <label for="catatan">Catatan</label>
            <textarea name="catatan" id="catatan" cols="30" rows="10" class="form-control" style="resize: none;" placeholder="Masukkan Catatan"></textarea>
          </div>
        </div>
        <div class="modal-footer">
          <button type="submit" id="button_simpan" class="btn btn-primary btn-xs waves-effect waves-light">Upload Surat</button>
          <button type="button" class="btn btn-danger btn-xs waves-effect waves-light" data-dismiss="modal">Batalkan</button>
        </div>
      </form>
    </div>
  </div>

  <!-- create modal for who pdf -->
  <div class="modal fade" id="modal_pdf" tabindex="-1" role="dialog" aria-labelledby="modal_pdf" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" id="modal_pdf">Isi Surat</h4>

        </div>
        <div class="modal-body" id="isi_laporan">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary btn-xs" 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 ?>;

    var table;

    function datatables() {
      table = $('#table_list_surat').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/surat_masuk",
          "type": "POST",
          data: {
            proses: 'table_surat_masuk'
          },

        },

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

    function buka_modal_input_surat() {
      // clear form
      $('#form_input_surat')[0].reset();
      $("#myModalLabel-1").html('Form Input Surat Masuk');
      $("#form_input_surat :input").prop("disabled", false);
      $('#modal_surat_masuk').modal('show');
    }

    document.getElementById("file_surat").onchange = function() {
      let file_surat = document.getElementById('file_surat').files[0];
      check_file_surat(file_surat)
    }

    function tambah_surat(e) {
      e.preventDefault();

      const asal_surat = $('#asal_surat').val();
      const no_surat = $('#no_surat').val();
      const tanggal_pengiriman = $('#tanggal_pengiriman').val();
      const tanggal_diterima = $('#tanggal_diterima').val();
      const no_agenda = $('#no_agenda').val();
      const sifat = $('#sifat').val();
      const perihal = $('#perihal').val();
      const diteruskan_kepada = $('#diteruskan_kepada').val();
      const respon = $('#respon').val();
      const file_surat = document.getElementById('file_surat').files[0]
      const catatan = $('#catatan').val();

      console.log(asal_surat, no_surat, tanggal_pengiriman, tanggal_diterima, no_agenda, sifat, perihal, diteruskan_kepada, respon, file_surat, catatan)


      var formData = new FormData();

      formData.append('asal_surat', asal_surat);
      formData.append('no_surat', no_surat);
      formData.append('tanggal_pengiriman', tanggal_pengiriman);
      formData.append('tanggal_diterima', tanggal_diterima);
      formData.append('no_agenda', no_agenda);
      formData.append('sifat', sifat ?? '');
      formData.append('perihal', perihal);
      formData.append('diteruskan_kepada', diteruskan_kepada ?? '');
      formData.append('respon', respon ?? '');
      formData.append('file_surat', file_surat);
      formData.append('catatan', (catatan == '') ? '' : catatan);
      formData.append('id_dinas', id_dinas);

      // create swal ask before submit
      swal({
        title: 'Apakah Anda Yakin?',
        text: "Data yang sudah diinput tidak dapat diubah kembali!",
        icon: 'info',
        buttons: {
          cancel: {
            text: "Batal",
            value: null,
            visible: true,
            className: "btn btn-danger",
            closeModal: true,
          },
          confirm: {
            text: "Ya, Simpan",
            value: true,
            visible: true,
            className: "btn btn-primary",
            closeModal: true
          }
        }
      }).then((result) => {
        if (result) {
          $.ajax({
            url: server_url_api + "surat_masuk",
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            beforeSend: function(res) {
              // $('#modal_karyawan').modal('hide');
              block_ui("Sedang Proses");
            },
            success: function(data) {
              $.unblockUI();
              // hide modal
              $('#modal_surat_masuk').modal('hide');
              // console.log(data)
              // destroy table
              $('#table_list_surat').DataTable().destroy();
              // reload table
              datatables();
              // close modal
              toastr.success(data.message);
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
              $.unblockUI();
              // console.log(errorThrown)
              // console.log(textStatus)
              const statusCode = XMLHttpRequest.status;
              const responseJSON = XMLHttpRequest.responseJSON;
              console.log(statusCode);
              console.log(responseJSON)
              if (statusCode != 500 || statusCode != 0) {
                toastr.error(responseJSON.message);
              } else {
                toastr.error("Jaringan atau server bermasalah, sila refresh kembali halaman");
              }


            }
          });
        }
      })



    }

    async function check_info(id) {
      // console.log(id)

      let data;

      try {
        data = await $.ajax({
          url: server_url_api + "surat_masuk?id_surat=" + id + "&id_dinas=" + id_dinas,
          type: 'get',
          async: false,
          beforeSend: function(res) {
            block_ui("Mengambil Data Surat Masuk");
          },
        });
        data = data.data;
        console.log(data)
        $("#asal_surat").val(data.asal_surat);
        $("#no_surat").val(data.no_surat);
        $("#tanggal_pengiriman").val(data.tanggal_pengiriman);
        $("#tanggal_diterima").val(data.tanggal_diterima);
        $("#no_agenda").val(data.no_agenda);
        selectElement('sifat', data.sifat);
        $("#perihal").val(data.perihal);
        selectElement('diteruskan_kepada', data.diteruskan_kepada);
        selectElement('respon', data.respon);
        $("#catatan").val(data.catatan ?? ' ');
        // hide div_file_surat
        $("#div_file_surat").hide();

        $("#myModalLabel-1").html('Detail Surat Masuk');

        // disable all input in form_input_surat
        $("#form_input_surat :input").prop("disabled", true);


        // show modal
        $('#modal_surat_masuk').modal('show');

        await $.unblockUI();
      } catch (e) {
        // console.log(e)
        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);
      }

    }


    async function lihat_surat(id) {

      let data;

      try {
        data = await $.ajax({
          url: server_url_api + "surat_masuk?id_surat=" + id + "&id_dinas=" + id_dinas,
          type: 'get',
          async: false,
          beforeSend: function(res) {
            block_ui("Mengambil Data Surat Masuk");
          },
        });
        data = data.data;
        console.log(server_url+data.fail)
        const laporan = `<embed src="${server_url}${data.fail}" frameborder="1" width="100%" height="600px">`;

        $("#isi_laporan").empty();
        $("#isi_laporan").append(laporan);
        $("#modal_pdf").modal("show");

        await $.unblockUI();
      } catch (e) {
        // console.log(e)
        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>