@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 KETUA REMBUG"
          @endphp
          {{ strtoupper($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">
            {{ ucfirst($title) }}
          </li>
        </ol>
      </nav>
    </div>
  </div>
@endsection

@section('content')
  <div class="block block-rounded">
    <div class="block-header block-header-default">
      <h3 class="block-title">{{ $title }}</h3>
      {{-- <a href="{{ url('anggota-ketua-rembug') }}/edit/{{ session()->get('kantor') }}/{{ $item['IDMAJELIS']}}" class="btn btn-sm btn-alt-secondary">
        <i class="fa fa-pencil-alt"></i>
      </a> --}}
    </div>
    <div class="block-content block-content-full">

      <div class="row mb-3">
         <div class="col-md-6">
            <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>
      </div>
        

      <div id="success_message"></div>

      <div id="rumpun"></div>

    </div>
  </div>

  <!-- Edit Modal -->
  <div class="modal fade" id="EditKetua" 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 RUMPUN</label>
              <input type="text" id="idmajelis" class="name form-control" readonly >
              <br>
              <label>NAMA RUMPUN</label>
              <input type="text" id="namamajelis" class="name form-control" readonly >
              <br>
              <label>KETUA ANGGOTA RUMPUN</label>
              <select name="ketua" id="ketua" class="form-control mb-4">
               
             </select>
            </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_ketua">SIMPAN</button>
            </div>
         
        </div>
      </div>
    </div>
  </div>
<!-- End Modal Tambah Data -->

  <script type='text/javascript'>
    $('#desa').change(function(){
      var id = $(this).val();  
      if(id){
        $.ajax({
          type:"GET",
          url:"{{url('getKetuaRumpun')}}/{{ 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();
         }   
      });

      $('#desa').focus(function(){
      var id = $(this).val();  
      if(id){
        $.ajax({
          type:"GET",
          url:"{{url('getKetuaRumpun')}}/{{ 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();
         }   
      });

  
      function checkInput(obj) {
      alert(obj.value); 
      }
      
      $(document).on('click', '.update_ketua', function(e) {
        e.preventDefault();
  
        $(this).text("UPDATING");
        var id = $('#idmajelis').val();
        var data = {
            'idmajelis' : $('#idmajelis').val(),
            'ketua' : $('#ketua').val(),
        }
  
        $.ajaxSetup({
        headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          }
        });
        
        $.ajax({
        type:"PUT",
        url:"{{url('updateKetuaRumpun')}}/{{ session()->get('kantor') }}/"+id,
        data: data,
        dataType:"json",
        success:function(res)
        { 
          
          if(res)
          {
            $('updateform_errList').html("");
            $('success_message').text('Sukses di Update');
            $('#EditKetua').modal('hide');
            $('.update_ketua').text("SIMPAN");
       
            Swal.fire('Berhasil Diedit..!')
            $('#desa').focus();
            //$('#example-1').change().ajax.reload();
            
          }
        }
      });
      
      });
  
      $(document).on('click', '.edit_ketua', function(e) {
      e.preventDefault();
      var id=$(this).val();
      var desa = $('#desa').val();
      //console.log(desa,id);
      $('#EditKetua').modal('show');
      $.ajax({
        type:"GET",
        url:"{{url('getKetuaRumpunEdit')}}/{{ session()->get('kantor') }}/"+desa+"/"+id,
        success:function(res){ 
           //console.log(res);
          if(res){
            $("#ketua").empty();
            $.each(res, function(key, value) {
              $('#idmajelis').val(id);
              $('#namamajelis').val(value.NAMAMAJELIS);
              //$('#idmajelis').focus();
              $("#ketua").append('<option value="'+value.IDANGGOTA+'">'+value.NAMA+'</option>');
              $('#idmajelis').focus();

            });
            
          }

        }
      });
    });

    $('#idmajelis').focus(function(){
      var id = $('#idmajelis').val();
      if(id){
        $.ajax({
          type:"GET",
          url:"{{url('getAnggotaRumpun')}}/{{ session()->get('kantor') }}/"+id,
          success:function(res){      
            //console.log(res);  
          if(res){
            //$("#ketua").empty();
            $.each(res,function(key,value){
                 $("#ketua").append('<option value="'+value.IDANGGOTA+'">'+value.NAMA+'</option>');
              });
           
          }else{
            $("#ketua").empty();
          }
          }
        });
      }else{
        $("#ketua").empty();
         }   
      });
  
     
  </script>

@endsection