<div class="row">
    <div class="col-sm-12">
        <p><a href="<?= base_url('admin/career'); ?>"><i class="fa fa-arrow-left" aria-hidden="true"></i> Kembali ke Halaman</a></p><br>
        <h4><?= empty($career->id) ? 'Tambah career baru' : 'Edit career: ' 
	. $career->name; ?></h4>
        <?= $this->session->flashdata('success'); //to display success message ?> 
        <?= $this->session->flashdata('result'); //to display result message ?>
    </div><!-- end class="col-sm-12" --> 
</div> <!-- end row --> 
 

<?= form_open_multipart(); ?>
<?php 
  $q_career_type = $this->db->get("career_type")->result(); 
?>
<div class="row"> 
    <div class="col-sm-3">
        <p>Nama Career</p>
    </div><!-- end class="col-sm-3" -->

     <div class="col-sm-9"> 
        <div class="tabbable">

          <ul class="nav nav-tabs">
              <li class="active"><a href="#name_id" data-toggle="tab">Indonesian</a></li>
              <!-- <li><a href="#name_en" data-toggle="tab">English</a></li> -->
          </ul>

          <div class="tab-content">
            
            <div class="tab-pane active" id="name_id">
              <p>
              <?php
              $data = array( 
                  'name'        => 'inp_name',
                  'value'       => $career->name,
                  'class'       => 'form-control'
              );
              echo form_input($data); ?>
              <?= form_error('inp_name'); ?></p>
            </div> 

            <!-- <div class="tab-pane" id="name_en">
             <p>
              <?php
              $data = array( 
                  'name'        => 'page_title_en',
                  'value'       => $career->name_en,
                  'class'       => 'form-control'
              );
              echo form_input($data); ?>
              <?= form_error('page_title_en'); ?></p>
            </div>  -->
          </div><!-- end class tab-content-->  

        </div><!-- end tabbable -->
        
    </div><!-- end class="col-sm-9" -->
</div> <!-- end row --> 

<div class="row"> 
    <div class="col-sm-3">
      <p>
        Tipe Career &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><!-- end class="col-sm-3" --> 

    <div class="col-sm-9">
      <?php
        $options = array();
        foreach ($q_career_type as $key) {
          $options[$key->id] = $key->name;
        }
        echo form_dropdown('career_type', $options, $career->career_type, 'class="form-control" id="dropdown_tipe_career"'); 
      ?>
    </div><!-- end class="col-sm-9" -->
</div> 
<hr>

<div class="row" style=""> 
    <div class="col-sm-3">
        <p>Detail Requirements</p>
    </div><!-- end class="col-sm-3" -->

     <div class="col-sm-9"> 
        <div class="tabbable">

          <ul class="nav nav-tabs">
              <li class="active"><a href="#description_id" data-toggle="tab">Indonesian</a></li>
              <!-- <li><a href="#description_en" data-toggle="tab">English</a></li> -->
          </ul>

          <div class="tab-content">
            
             <div class="tab-pane active" id="description_id">
                <?php echo form_textarea('detail_reqs', set_value('detail_reqs', $career->detail_reqs, FALSE)); ?>
                <?php echo form_error('detail_reqs'); ?>
             </div><!-- end  id="#description_id" -->

              <!-- <div class="tab-pane" id="description_en">
               <?php echo form_textarea('body_text_en', set_value('body_text_en', $career->detail_reqs_en, FALSE)); ?>
                <?php echo form_error('body_text_en'); ?>
              </div>  -->
          </div> 

        </div> 

    </div><!-- end class="col-sm-9" -->
</div> <!-- end row --> 
<hr>

<div class="row" style=""> 
    <div class="col-sm-3">
        <p>Display</p>
    </div><!-- end class="col-sm-3" -->

     <div class="col-sm-9"> 
       <?php
            $options = array(
                'yes'  => 'Iya',
                'no'  => 'Tidak'
            );
            echo form_dropdown('status', $options, $career->active, 'class="form-control"'); ?>
    </div><!-- end class="col-sm-9" -->
</div> <!-- end row -->   

<div class="row"> 
    <div class="col-sm-3">
    </div><!-- end class="col-sm-3" -->

     <div class="col-sm-9"> 
      
        <p>
<?= form_submit('submit', 'Update', 'class="btn btn-primary btn-success button-brown"'); ?>
            &nbsp;&nbsp;&nbsp;<?= anchor('admin/career', 'Batal'); ?></p>
          
    </div><!-- end class="col-sm-9" -->
</div> <!-- end row -->  

<?= form_close(); ?>

<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);
          var data_dd = '';
          $.each(res.data_dd,function(idx,key){
            data_dd += `
              <option value="${key.id}">${key.name}</option>
            `;
          });
          clr_dropdown_tipe().html(data_dd);
          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);
        var data_dd = '';
        $.each(res.data_dd,function(idx,key){
          data_dd += `
            <option value="${key.id}">${key.name}</option>
          `;
        });
        clr_dropdown_tipe().html(data_dd);
        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 clr_dropdown_tipe(){
    var dropdown_tipe_career = $("#dropdown_tipe_career");
    dropdown_tipe_career.html("");
    return dropdown_tipe_career;
  }
  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>