@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 = "Anggota"
          @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="#">Dashboard</a>
          </li>
          <li class="breadcrumb-item">
            {{ $title }}
          </li>

        </ol>
      </nav>
    </div>
  </div>
@endsection

@section('content')

<div class="col">


    <div class="block block-rounded mb-3">
        <div class="block-header block-header-default">
            <h3 class="block-title">{{ $title }}</h3>
        </div>
    <div class="block-content block-content-full">
        <div class="form-group">
            <label>Desa</label>
            <select name="iddesa" id="desa" class="form-control mb-4">
                <option value="" hidden>-- Pilih --</option>
                @foreach($desa as $data)
                <option value="{{ $data['IDDESA'] }}">{{ $data['NAMADESA'] }}</option>
                @endforeach
            </select>
        </div>
        <div class="form-group">
            <label>Rumpun</label>
            <select name="rumpun" id="rumpun" class="form-select form-select-lg" >
            </select>
        </div>
    </div>
</div>
</div>

  <div class="block block-rounded">
    <div class="block-header block-header-default">
      <h3 class="block-title">{{ $title }}</h3>
      <div class="block-options">
        <button type="button" class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#tambah">
          <i class="fa fa-plus"></i> Tambah
        </button>
      </div>
    </div>
    <div class="block-content block-content-full">
        <select name="rumpun" id="rumpun" class="form-select form-select-lg" >
        </select>
  </div>

  <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();
         }   
      });
  
      $('#desa').focus(function(){
      var id = $(this).val();  
      if(id){
        $.ajax({
          type:"GET",
          url:"{{url('getAnggota')}}/{{ session()->get('kantor') }}/"+id,
          success:function(res){        
          if(res){
            $("#rumpun").empty();
            $("#rumpun").append("<table class='table table-striped' id='example'> <thead> <tr><th>ID RUMPUN</th><th>NAMA RUMPUN </th><th>NAMA KETUA RUMPUN </th><th>AKSI </th></tr> </thead> <tbody id='majelis'></tbody> </table>");
            $.each(res, function(key, value) {
              //$('#example').DataTable( {
                //INSERTING ROWS INTO TABLE 

                $(document).ready(function() {
                  $('#example').DataTable();
                } );
               
                $("#rumpun table tbody").append('<tr>\
                  <td>' + value.IDMAJELIS + '</td>\
                  <td>' + value.NAMAMAJELIS + '</td>\
                  <td>' + value.NAMA + '</td>\
                  <td><button type="button" value="' + value.IDMAJELIS +'" class="edit_ketua btn btn-primary"> UBAH</button></td>\
                  </tr>');
                  
            });
            
          }else{
            $("#rumpun").empty();
          }
          }
        });
      }else{
        $("#rumpun").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