<div class="row">
    <div class="col-sm-12">
        <p><a href="<?= base_url('admin/dashboard'); ?>"><i class="fa fa-arrow-left" aria-hidden="true"></i> Kembali ke Beranda</a></p><br>
        <h2>Halaman Career</h2>
        <?= $this->session->flashdata('success'); ?> 
    </div><!-- end class="col-sm-12" -->
</div> <!-- end row -->

<div class="row">
    <div class="col-sm-12">
        <br>
        <p>
            <?= anchor('admin/career/add', '<i class="fa fa-plus" aria-hidden="true"></i> BUAT CAREER BARU'); ?>&nbsp;
            <button data-toggle="modal" data-target="#modal_add_tipe_career" title="optional" type="button" class="btn btn-sm btn-default">Tambah Tipe Career</button>
        </p> 
    </div>
</div> 

<div class="row">
    <div class="col-sm-12">
       <div class="table-responsive">  
       <table class="table table-striped">
        <thead> 
            <tr>
                <th>Nama Career</th>  
                <th>Tipe Career</th>
                <th>Tampilkan ?</th>
                <th>Edit</th>
                <th>Hapus</th> 
            </tr>
        </thead>
        <tbody>
            <?php if(count($career)) : ?> 
            <?php foreach($career as $key): ?>
                <tr>
                    <td><?= ucfirst($key->name); ?></td> 
                    <td>
                        <?php 
                        $q_career_type = $this->db->get_where("career_type",array(
                            "id"=>$key->career_type
                        ))->row();
                        ?>
                        <?= $q_career_type->name; ?>
                    </td> 
                    <td>
                        <?php if ($key->active == 'yes') { ?>

                            <button onclick="exchangeStatusAct('tidak',<?= $key->id; ?>);" type="button" style="border:none; background: transparent;">
                                <span style="padding: 5px; border-radius: 5px; background: silver;">Ya</span>
                                <span style="padding: 5px; border-radius: 5px; ">Tidak</span>                           
                            </button>

                        <?php } else { ?>

                            <button onclick="exchangeStatusAct('ya',<?= $key->id; ?>);" type="button" style="border:none; background: transparent;">
                                <span style="padding: 5px; border-radius: 5px; ">Ya</span>
                                <span style="padding: 5px; border-radius: 5px; background: silver;">Tidak</span>                           
                            </button>

                        <?php } ?> 
                    </td>
                    
                    <td>
                        <?= bt_edit('admin/career/edit/' . $key->id); ?> 
                    </td>
                    <td> 
                        <?= bt_delete('admin/career/delete/' . $key->id); ?>
                    </td>
                </tr>
            <?php endforeach; ?>
            <?php else: ?>
                <tr>
                <td colspan="3">Halaman tidak ditemukan.</td>
                </tr>
            <?php endif; ?>

        </tbody> 
    </table>
    </div><!-- end table class responsive -->
    </div><!-- end class="col-sm-12" -->
</div> <!-- end row -->    
 
<?php 
  $q_career_type = $this->db->get("career_type")->result(); 
?>

<div class="row">
    <div class="col-sm-12">
        <?php
        //create pagination...
        echo '<p style="text-align:center;">' . $this->pagination->create_links() . '</p>';
        ?>
    </div><!-- end class="col-sm-12" -->
</div> <!-- end row -->  
<div id="modal_add_tipe_career" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">
          Tambah Tipe Career
        </h4> 
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-12 alert_op">
            
          </div>
          <div style="max-height: 245px;overflow-x: auto;" class="col-md-12">
            <table class="table">
              <thead>
                <tr>
                  <th style="width: 80%;">
                    Tipe Career
                  </th>
                  <th>
                    Ubah | Hapus
                  </th>
                </tr>
              </thead>
              <tbody>
                <?php foreach ($q_career_type as $key): ?>
                <tr>
                  <td>
                    <?= ucwords($key->name); ?>
                  </td>
                  <td style="text-align: center;"> 
                    <button onclick="btn_tipe_edit($(this));" data-id="<?= $key->id; ?>" type="button" class="btn_tipe_edit btn btn-sm btn-default">
                      <i class="fa fa-pencil-square-o"></i>
                    </button> | 
                    <button onclick="btn_tipe_delete($(this));" data-id="<?= $key->id; ?>" type="button" class="btn_tipe_delete btn btn-sm btn-default">
                      <i class="fa fa fa-trash-o"></i>
                    </button>
                  </td>
                </tr>
                <?php endforeach; ?> 
              </tbody>
            </table>
          </div>
          
          <div class="col-md-12">
            <h4 class="last_info">Tambah Baru</h4>
          </div>
          <div class="col-md-9">
            <input type="hidden" id="inp_id_tipe_career">
            <input placeholder="Tipe Career" type="text" class="form-control" id="inp_tipe_career">
          </div>
          <div class="col-md-3">
            <button id="btn_tipe_save" style="width: 100%;" type="button" class="btn btn-primary">Save</button>
          </div>
        </div>
      </div>
      <div class="modal-footer"> 
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<script>
  $(document).ready(function(){ 

    $("#modal_add_tipe_career #btn_tipe_save").click(function(ev){
      var t = $(this);
      var alert_op = $("#modal_add_tipe_career .alert_op");
      var inp_id_tipe_career = $("#modal_add_tipe_career #inp_id_tipe_career");
      var inp_tipe_career = $("#modal_add_tipe_career #inp_tipe_career");
      var data_ar = {
        name : inp_tipe_career.val()
      };

      if (inp_tipe_career.val() == '') {
        alert("Isi nama tipe career");
        ev.preventDefault();
        return false;
      }
      if (t.text().toLowerCase() != 'save') {
        data_ar.id = inp_id_tipe_career.val();
      } 

      if (confirm("Yakin?")) {
        c_ajax('admin/career/career_type_save',data_ar,function(res){
          alert_op.html(res.alert_op);
          setTimeout(function(){
            alert_op.html('');
          },3000);
          clr_table_tipe().find("tbody").html(res.data_op);
           
          change_to_save();
          inp_tipe_career.val('');
          inp_id_tipe_career.val('');
        }); 
      }
    });
  

  });

  function btn_tipe_edit(t){
    var check_con = t.find("i");

    if (check_con.hasClass("fa-pencil-square-o")) {
      change_to_update(t);
    }else{
      change_to_save();
    }
  }

  function change_to_save(){
    var btn_tipe_save = $("#modal_add_tipe_career #btn_tipe_save");
    var last_info = $("#modal_add_tipe_career .last_info");
    var inp_id_tipe_career = $("#modal_add_tipe_career #inp_id_tipe_career");
    var inp_tipe_career = $("#modal_add_tipe_career #inp_tipe_career");

    inp_tipe_career.val('');
    inp_id_tipe_career.val('');

    last_info.html("Tambah Baru"); 
    btn_tipe_save.text("Save");
    reset_btn_tipe_edit();

  }
  function change_to_update(t){
    var t_id = t.data("id"); 
    var t_name = t.parents("tr").find("td:eq(0)").text();
    var btn_tipe_save = $("#modal_add_tipe_career #btn_tipe_save");
    var inp_id_tipe_career = $("#modal_add_tipe_career #inp_id_tipe_career");
    var last_info = $("#modal_add_tipe_career .last_info");
    var inp_tipe_career = $("#modal_add_tipe_career #inp_tipe_career");

    inp_id_tipe_career.val(t_id);
    btn_tipe_save.text("Update");
    
    inp_tipe_career.val(t_name.trim());
    last_info.html(`
      Ubah Tipe Career : ${t_name.trim()}
    `);

    reset_btn_tipe_edit();

    t.removeClass("btn-default").addClass("btn-danger");
    t.html(`
      <i class="fa fa-remove"></i>
    `);
  }

  function reset_btn_tipe_edit(){
    var btn_tipe_edit = $("#modal_add_tipe_career .btn_tipe_edit");

    btn_tipe_edit.removeClass("btn-danger").addClass("btn-default");
    btn_tipe_edit.html(`
      <i class="fa fa-pencil-square-o"></i>
    `);
  }

  function btn_tipe_delete(t){
    var t_id = t.data("id");
    var tbl = $("#modal_add_tipe_career table.table");
    var alert_op = $("#modal_add_tipe_career .alert_op");
    var inp_id_tipe_career = $("#modal_add_tipe_career #inp_id_tipe_career");
    var inp_tipe_career = $("#modal_add_tipe_career #inp_tipe_career");

    if (confirm("Yakin?")) {
      c_ajax('admin/career/career_type_delete',{
        id:t_id,
      },function(res){
        alert_op.html(res.alert_op);
        setTimeout(function(){
          alert_op.html('');
        },3000);
        clr_table_tipe().find("tbody").html(res.data_op);
         
        change_to_save();
        inp_tipe_career.val('');
        inp_id_tipe_career.val('');
      }); 
    }
  }

  function clr_table_tipe(){
    var tbl = $("#modal_add_tipe_career table.table");
    tbl.find("tbody").html("");
    return tbl;
  } 
  function c_ajax(t_url,data_ar = {},c_back){
    var csrfHash = '<?= $this->security->get_csrf_hash(); ?>';
    if (data_ar.csrftestname == undefined) {
      data_ar.csrftestname = csrfHash;
    }
    $.ajax({
        'url'  : "<?= base_url(); ?>"+t_url,
        'type' : 'POST',  
        'dataType' :'json', 
        'data' : data_ar, 
        'success'   : function(res) {
          c_back(res);
        }
    });
  }
</script>
<script>
    function exchangeStatusAct(earlyStat,this_id){
        var toStat = '';
        var csrfHash = '<?= $this->security->get_csrf_hash(); ?>';

        if (earlyStat == 'ya') {
            toStat = 'Ya';
        }else{
            toStat = 'Tidak';
        }
        
        $.ajax({
            'url'  : "<?= base_url('admin/career/changeStatusAct'); ?>",
            'type' : 'POST',  
            'dataType' :'json', 
            'data' : {
                      'this_id' : this_id,
                      'toStat' : toStat,   
                      'csrftestname' : csrfHash
                    }, 
            'success'   : function(res) {
                if (res.res == 'sukses') { 
                    location.reload();
                }
            }
        });
    }
</script>