<?php $this->load->view('meta') ?>
<div class="wrapper">
  <?php $this->load->view('sidebar') ?>
  <?php $this->load->view('navbar') ?>
  <?php
  $width = "33";
  ?>

  <style>
    ul {
      list-style: none outside none;
      padding-left: 0;
      margin: 0;
      padding-top: 0px;
    }

    .demo .item {
      margin-bottom: 20px;
    }

    .content-slider li {
      background-color: white;
      text-align: left;
      color: #FFF;
      height: 130px;
      box-shadow: 0 0 3px grey;
      border-radius: 5px;
      padding-bottom: 10px;
    }

    .content-slider h3 {
      margin: 0;
      padding: 70px 0;
    }

    .demo {
      width: 100%;
    }
  </style>
  <link rel="stylesheet" href="<?php echo base_url(); ?>assets/themes/default/default.css" type="text/css" media="screen" />
  <link rel="stylesheet" href="<?php echo base_url(); ?>assets/themes/nivo-slider.css" type="text/css" media="screen" />


  <!-- Begin Page Content -->
  <div class="container-fluid">

    <!-- Page Heading -->
    <div class="text-center">
      <img src="<?php echo base_url(); ?>assets/images/logohrm.png" style="max-width:60%;">
      <br />
    </div>

    <div id="wrapper" style="padding-right:5px; padding-left:5px;" class="d-xs-block d-sm-block d-md-none">
      <div class="slider-wrapper theme-default">
        <div id="slider" class="nivoSlider">
          <?php
          $no = 1;
          foreach ($slide as $slide) {
          ?>
            <img src="<?= base_url() ?>assets/images/slide/<?= $slide->gambar_slide ?>" data-thumb="<?= base_url() ?>assets/images/slide/<?= $slide->gambar_slide ?>" alt="" />
          <?php
          }
          ?>



        </div>
      </div>

    </div>

    <table style="width:100%; text-align:center; font-size:10px; color:black; padding-top:5px;" class="table_icon">
      <tr>
        <?php
        $no = 1;
        foreach ($kategori_aspirasi as $kategori_aspirasi) {

        ?>
          <td style="width:<?php echo "$width"; ?>%; padding:0px 5px 0px 5px; text-align:center;">
            <div style="box-shadow: 0px 5px 20px grey; margin-bottom:20px; padding: 10px;">
              <a onclick="add('<?= encrypt($kategori_aspirasi->id_kategori_aspirasi) ?>','<?= $kategori_aspirasi->nama_kategori_aspirasi ?>');"><img src="<?= base_url() ?>assets/images/fav.png" style="width:70%; margin-bottom:5px;"></a><br />
              <?= $kategori_aspirasi->nama_kategori_aspirasi ?>
            </div>
          </td>

        <?php
          if ($no % 3 == 0 and $no != 1) echo "</tr><tr>";
          $no++;
        }


        ?>
      </tr>
    </table>



  </div>
  <!-- /.container-fluid -->

</div>
<!-- End of Main Content -->

<div id="modalAdd" class="modal fade" role="dialog">
  <div class="modal-dialog modal-lg">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
        <h6 class="m-0 font-weight-bold text-primary">Input Aspirasi - <span id="nama_kategori_aspirasi"></span></h6>
        <div class="dropdown no-arrow">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
      </div>
      <form id="formAdd" class="form-horizontal" method="post" enctype="multipart/form-data">
        <input type="hidden" name="id_kategori_aspirasi" id="id_kategori_aspirasi" class="form-control" required />
        <div class="modal-body">
          <div class="container-fluid">
            <div class="row">
              <div class="col-md-3">Aspirasi Anda</div>
              <div class="col-md-8">
                <textarea class="form-control" name="deskripsi_aspirasi" required placeholder="Masukkan Aspirasi anda disini.."></textarea>
              </div>
            </div>
            <div class="row">
              <div class="col-md-3">Foto</div>
              <div class="col-md-8">
                <input type="file" name="foto_aspirasi" id="foto_aspirasi_add" class="form-control" onchange="return validasiFile()" />
              </div>
            </div>
            <div class="row">
              <div class="col-md-3"></div>
              <div class="col-md-8">
                <div id="pratinjauGambar"></div>
                <br />
              </div>
              <br />
            </div>

          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal">Batal</button>
          <button id="btnSubmitAdd" type="submit" class="btn btn-success">Submit</button>
        </div>
      </form>
    </div>
  </div>
</div>

<?php $this->load->view('footer') ?>
</div><!-- ./wrapper -->
<?php $this->load->view('js') ?>
<script>
  function add(id, nama) {
    $('#id_kategori_aspirasi').val(id);
    document.getElementById('nama_kategori_aspirasi').innerHTML = nama;
    $('#modalAdd').modal('show');
  }

  $('#formAdd').submit(function(e) {
    e.preventDefault();
    //var data = $(this).serialize();
    $('#btnSubmitAdd').html('<i class="fa fa-spinner spinner"></i> Loading...');
    $('#btnSubmitAdd').attr('disabled', true);
    var formData = new FormData($(this)[0]);

    $.ajax({
      type: 'post',
      enctype: 'multipart/form-data',
      url: '<?php echo base_url(); ?>aspirasi/add',
      data: formData,
      async: false,
      cache: false,
      contentType: false,
      processData: false
    }).done(function(res) {
      $('#btnSubmitAdd').html('Submit');
      $('#btnSubmitAdd').removeAttr('disabled');
      if (res == '1') {
        $("#modalAdd").modal('toggle');
        swal({
          title: 'Data Aspirasi Behasil Disimpan',
          text: 'Kami akan segera memberikan respon',
          type: 'success',
          closeOnConfirm: false
        }, function(isConfirm) {
          if (isConfirm) {
            location.reload();
          }
        })
      } else {
        swal("Kesalahan!", "Masukkan data dengan lengkap!", 'error');
      }
    }).fail(function(res) {
      console.log(res);
    });
  });
</script>
<script type="text/javascript">
  function validasiFile() {
    var inputFile = document.getElementById('foto_aspirasi_add');
    var pathFile = inputFile.value;
    var ekstensiOk = /(\.jpg|\.jpeg|\.png|\.gif)$/i;
    if (!ekstensiOk.exec(pathFile)) {
      alert('Silakan upload file yang memiliki ekstensi .jpeg/.jpg/.png/.gif');
      inputFile.value = '';
      return false;
    } else {
      //Pratinjau gambar
      if (inputFile.files && inputFile.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
          document.getElementById('pratinjauGambar').innerHTML = '<img src="' + e.target.result + '" width="100%"/>';
        };
        reader.readAsDataURL(inputFile.files[0]);
      }
    }
  }
</script>
</body>

</html>