@extends('templates.master')

@section('breadcrumb')
  <div class="content content-full">
    <div class="d-flex flex-column flex-sm-row justify-content-sm-between align-items-sm-center py-2">
      <div class="flex-grow-1">
        <h1 class="h3 fw-bold mb-2">
          @php
          $title = "PENENTUAN KELOMPOK RUMPUN"
          @endphp
          {{ $title }}
        </h1>
      </div>
      <nav class="flex-shrink-0 mt-3 mt-sm-0 ms-sm-3" aria-label="breadcrumb">
        <ol class="breadcrumb breadcrumb-alt">
          <li class="breadcrumb-item">
            <a class="link-fx" href="javascript:void(0)">Dashboard</a>
          </li>
          <li class="breadcrumb-item" aria-current="page">
            {{ $title }}
          </li>
        </ol>
      </nav>
    </div>
  </div>
@endsection

@section('content')

  <div class="block block-rounded">
    <div class="block-header block-header-default">
      <div class="col-md-6">
        <div class="form-group">
            <label>DESA</label>

            <select class="form-select form-select-lg" name="desa" id="desa">
              <option selected>----- PILIH DESA -----</option>
              @foreach($desa as $item)
                  <option value="{{ $item['IDDESA'] }}">{{ $item['NAMADESA'] }}</option>
                  @endforeach
            </select>
        </div>
      </div>
    
    <div class="col-md-6" id="Buka_rumpun">
      <label>RUMPUN</label>
      <select name="rumpun" id="rumpun" class="form-select form-select-lg" >
      </select>
    </div>
  </div>


    <div class="block-content block-content-full">
      <div id="success_message"></div>

      <div id="chk"></div>
    </div>
  </div>

  <!-- Edit Modal -->
  <div class="modal fade" id="EditKelompok" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">EDIT {{ $title }}</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <ul id="updateform_errList"></ul>
        
            <div class="form-group">
              <label>ID ANGGOTA</label>
              <input type="text" id="idanggota" class="name form-control" readonly >
              <br>
              <label>KELOMPOK</label>
              <input type="number" id="kelomp" class="name form-control" >
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-danger" data-bs-dismiss="modal">BATAL</button>
              <button type="button" class="btn btn-primary update_kelompok">SIMPAN</button>
            </div>
         
        </div>
      </div>
    </div>
  </div>
<!-- End Modal Tambah Data -->

<!-- Script -->
<script type='text/javascript'>
  $('#desa').change(function(){
    var id = $(this).val();  
    if(id){
      $.ajax({
        type:"GET",
        url:"{{url('getRumpun')}}/{{ session()->get('kantor') }}/"+id,
        success:function(res){        
        if(res){
          $("#rumpun").empty();
          $("#rumpun").append('<option>----- PILIH RUMPUN -----</option>');
          $.each(res,function(key,value){
            //$("#rumpun").append('<option value="'+key+'">'+value+'</option>');
            $("#rumpun").append('<option value="'+value.IDMAJELIS+'">'+value.NAMAMAJELIS+'</option>');
          });
          
        
        }else{
          $("#rumpun").empty();
        }
        }
      });
    }else{
      $("#rumpun").empty();
       }   
    });

    $('#rumpun').change(function(){
    var id = $(this).val();  
    if(id){
      $.ajax({
        type:"GET",
        url:"{{url('getAnggota')}}/{{ session()->get('kantor') }}/"+id,
        success:function(res){        
        if(res){
          
          //$("tbody").html("");
          $(document).ready(function() {
            $('#example').DataTable();
          } );
          $("#chk").empty();
          $("#chk").append("<table class='table table-striped' id='example'> <thead> <tr><th>ID ANGGOTA</th><th>NAMA </th><th>KELOMPOK </th><th>AKSI </th></tr> </thead> <tbody id='anggota'></tbody> </table>");

          $.each(res, function(key, value) {
            //$('#example').DataTable( {
              //INSERTING ROWS INTO TABLE 
             
              $("#chk table tbody").append('<tr>\
                <td>' + value.IDANGGOTA + '</td>\
                <td>' + value.NAMA + '</td>\
                <td><input type="number" id="kelompok" name="kelompok" value="' + value.KELOMP + '" readonly></td>\
                <td><button type="button" value="' + value.IDANGGOTA +'" class="edit_kelompok btn btn-primary"> UBAH</button></td>\
                </tr>');
                
          });
        
        }else{
          $("#chk").empty();
        }
        }
      });
    }else{
      $("#chk").empty();
       }   
    });

    $('#rumpun').focus(function(){
    var id = $(this).val();  
    if(id){
      $.ajax({
        type:"GET",
        url:"{{url('getAnggota')}}/{{ session()->get('kantor') }}/"+id,
        success:function(res){        
        if(res){
          //$("tbody").html("");
          $(document).ready(function() {
            $('#example').DataTable();
          } );
          $("#chk").empty();
          $("#chk").append("<table class='table table-striped' id='example'> <thead> <tr><th>ID ANGGOTA</th><th>NAMA </th><th>KELOMPOK </th><th>AKSI </th></tr> </thead> <tbody id='anggota'></tbody> </table>");

          $.each(res, function(key, value) {
            
            $("#chk table tbody").append('<tr>\
                <td>' + value.IDANGGOTA + '</td>\
                <td>' + value.NAMA + '</td>\
                <td><input type="number" id="kelompok" name="kelompok" value="' + value.KELOMP + '" readonly></td>\
                <td><button type="button" value="' + value.IDANGGOTA +'" class="edit_kelompok btn btn-primary"> UBAH</button></td>\
                </tr>');
          });
        
        }else{
          $("#chk").empty();
        }
        }
      });
    }else{
      $("#chk").empty();
       }   
    });

    function checkInput(obj) {
    alert(obj.value); 
    }
    
    $(document).on('click', '.update_kelompok', function(e) {
      e.preventDefault();

      $(this).text("UPDATING");
      var id_anggota = $('#idanggota').val();
      var data = {
          'kelomp' : $('#kelomp').val(),
          'idanggota' : $('#idanggota').val(),
      }

      $.ajaxSetup({
      headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
      });
      

      $.ajax({
        type:"PUT",
        url:"{{url('updateKelomp')}}/{{ session()->get('kantor') }}/"+id_anggota,
        data: data,
        dataType:"json",
        success:function(res)
        { 
          if(res)
          {
            $('updateform_errList').html("");
            $('success_message').text('Sukses di Update');
            $('#EditKelompok').modal('hide');
            $('.update_kelompok').text("SIMPAN");
            //Swal.fire({
            //    position: 'top-end',
            //    icon: 'success',
            //    title: 'Berhasil Diedit..!',
            //    showConfirmButton: false,
            //    timer: 1500
            //  });
            Swal.fire('Berhasil Diedit..!')
            $('#rumpun').focus();
            //$('#example-1').change().ajax.reload();
            
          }
        }
      });
      
    
    });

    $(document).on('click', '.edit_kelompok', function(e) {
      e.preventDefault();
      var id_anggota=$(this).val();
      //console.log(id_anggota);
      $('#EditKelompok').modal('show');
      $.ajax({
        type:"GET",
        url:"{{url('getAnggotaEdit')}}/{{ session()->get('kantor') }}/"+id_anggota,
        success:function(res){ 
           //console.log(res);
          if(res){
            $.each(res, function(key, value) {
              $('#idanggota').val(id_anggota);
              $('#kelomp').val(value.KELOMP);
            });
          }

        }
      });
    });

   
</script>


@endsection