<div class="main-panel">
      <!-- Navbar -->
      <nav class="navbar navbar-expand-lg navbar-transparent navbar-absolute fixed-top ">
        <div class="container-fluid">
          <div class="navbar-wrapper">
            <a class="navbar-brand" href="#pablo">Tickets</a>
          </div>
          <button class="navbar-toggler" type="button" data-toggle="collapse" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
            <span class="sr-only">Toggle navigation</span>
            <span class="navbar-toggler-icon icon-bar"></span>
            <span class="navbar-toggler-icon icon-bar"></span>
            <span class="navbar-toggler-icon icon-bar"></span>
          </button>
          <div class="collapse navbar-collapse justify-content-end">
            <form class="navbar-form">
              <?= $this->session->userdata('nm_peg');?>
              <input type="text" id="id_biro_sess" value="<?= $this->session->userdata('id_biro');?>">
            </form>
            <ul class="navbar-nav">
              <li class="nav-item dropdown">
                <a class="nav-link" href="#pablo" id="navbarDropdownProfile" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  <i class="material-icons">person</i>
                  <p class="d-lg-none d-md-block">
                    Account
                  </p>
                </a>
                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownProfile">
                  <a class="dropdown-item" href="<?=base_url();?>index.php/admin/logout">Log out</a>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </nav>
      <!-- End Navbar -->
      <div class="content">
        <div class="container-fluid">
          <div class="row">
            <div class="col-md-12">
              <div class="card">
                <div class="card-header card-header-primary">
                  <h4 class="card-title ">Daftar Ticket</h4>
                </div>
                <div class="card-body">
                  <div class="table-responsive">
                  <select name="" class="form-control" id="myInput" onkeyup="myFunction()">
                    <option value="">-- Filter Status --</option>
                    <option value="open">Open</option>
                    <option value="answered">Answered</option>
                    <option value="closed">Closed</option>
                  </select>
                    <table id="example" class="table">
                      <thead class=" text-primary">
                        <tr>
                            <th width="5"><center><b>No</b></center></th>
                            <th><center><b>User</b></center></th>
                            <th><center><b>Biro</b></center></th>
                            <th><center><b>Kategori</b></center></th>
                            <th><center><b>Priority</b></center></th>
                            <th><center><b>Tanggal Open</b></center></th>
                            <th><center><b>Tanggal Close</b></center></th>
                            <th><center><b>Status</b></center></th>
                            <th><center><b>Aksi</b></center></th>
                        </tr>
                    </thead>
                    <tbody id="table-row">

                    </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
        <script>
            function myFunction() {
            // Declare variables
            var input, filter, table, tr, td, i, txtValue;
            input = document.getElementById("myInput");
            filter = input.value.toUpperCase();
            table = document.getElementById("example");
            tr = table.getElementsByTagName("tr");

            // Loop through all table rows, and hide those who don't match the search query
                for (i = 0; i < tr.length; i++) {
                    td = tr[i].getElementsByTagName("td")[7];
                    if (td) {
                    txtValue = td.textContent || td.innerText;
                    if (txtValue.toUpperCase().indexOf(filter) > -1) {
                        tr[i].style.display = "";
                    } else {
                        tr[i].style.display = "none";
                        }
                    }
                }
            }
        </script>
      <script>
      function getTickets() {
          var id_biro = $('#id_biro_sess').val();
            $.get("http://localhost/winnerhelpdesk/index.php/WEB/TicketsBiro/" + id_biro, function(data, status){
                console.log(data, status)
                if (status) {
                    $('#table-row').html("")
                    let no = 0;
                    // data.forEach(element => {
                    var t = $('#example').DataTable();
                    no++;
                    t.row.add( [
                        "<center>"+no+"</center>",
                        "<center>"+data.nm_peg+"</center>",
                        "<center>"+data.nama_biro+"</center>",
                        "<center>"+data.nama_kategori+"</center>",
                        "<center>"+data.priority+"</center>",
                        "<center>"+data.tanggal_open+"</center>",
                        "<center>"+data.tanggal_close+"</center>",
                        "<center>"+data.status_ticket+"</center>",
                        "<center><a id='btn_delete' data-id="+data.id+" class='btn btn-danger'><i class='fa fa-trash'></i></a><a id='btn_edit' data-idedit="+data.id+" class='btn btn-info' data-toggle='modal' data-target='#editUser'><i class='fa fa-pencil'></i></a></center>"
                    ] ).draw( false );
                    // });
                }
                else {
                    alert('Load Data Failed')
                }
            });
        }

            function clearTable() {
                var table = $('#example').DataTable();
                table
                    .clear()
                    .draw();
            }

            function clearModalEdit(){
                $('#nama_Tickets_u').val('');
            }

   ////////////////////////////////////document ready/////////////////////////////////////////////////////////////
        $(document).ready(function() {

            $('#example').DataTable( {
                dom: 'Bfrtip',
                buttons: [
                    'copy', 'csv', 'excel', 'pdf', 'print'
                ]
            } );

            getTickets()

        } );

            $(document).on('click', '#btn_add' ,function(){
                var nama_Tickets                   = $('#nama_Tickets').val();
                var id_biro                         = $('#id_biro').val();
                console.log(id_biro)


                $.post("http://localhost/winnerhelpdesk/index.php/WEB/Tickets", {
                    nama_Tickets                   : nama_Tickets,
                    id_biro                         : id_biro,
                    },
                    function(data, status){
                    if (status) {
                        toastr.success('Insert Data Success')
                        clearTable()
                        $('#addTickets').modal('hide')
                        clearModalAdd()
                        getTickets()
                    }
                    else {
                        toastr.error('Insert Data Failed!')
                    }
                });

            });

            $(document).on('click', '#btn_delete' ,function(){
                var id = $(this).data("id");
                jQuery.ajax({
                url: 'http://localhost/winnerhelpdesk/index.php/WEB/Tickets/' + id,
                type: 'DELETE',
                success: function(data) {
                    toastr.info('Delete Data Success!')
                    clearTable()
                    getTickets();
                    }
                });
            });

            $(document).on('click', '#btn_edit' ,function(){
                clearModalEdit()
                $('#editTickets').modal('show')
                var id =  $(this).data("idedit");

                $.ajax({
                    type: "GET",
                    url: 'http://localhost/winnerhelpdesk/index.php/WEB/Tickets/'+id,
                    dataType: 'json',
                    success: function(resp) {
                    // console.log(resp)
                    $("#nama_Tickets_u").val(resp.nama_Tickets);
                    $("#id_u").val(resp.id_Tickets);

                    },
                    error: function (jqXHR, exception) {
                    }
                });
            });

            $(document).on('click', '#btn_update' ,function(){
                var id                              = $("#id_u").val();
                var nama_Tickets                   = $("#nama_Tickets_u").val();
                var id_biro                         = $("#id_biro_u").val();
                console.log(id)
                var data = {
                    nama_Tickets : nama_Tickets,
                    id_biro : id_biro,
                    }

                jQuery.ajax({
                url: 'http://localhost/winnerhelpdesk/index.php/WEB/Tickets/' + id,
                type: 'PUT',
                data : data,
                success: function(data) {
                    $('#editTickets').modal('hide')
                    clearModalEdit()
                    clearTable()
                    getTickets();
                    toastr.success('Update Data Success!')
                    }
                });

            });


      </script>