@extends('layouts.master')
@section('content')
<div class="row page-titles">
	<div class="col-md-5 align-self-center">
	    <h4 class="text-themecolor">Master Role</h4>
	</div>
	<div class="col-md-7 align-self-center text-right">
	    <div class="d-flex justify-content-end align-items-center">	        
	        <button type="button" class="btn btn-info btn-rounded" data-toggle="modal" data-target="#modal-edit" id="#AddUser"><i class="fa fa-plus-circle"></i> Create New Role</button>
	    </div>
	</div>
</div>
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                 <div class="table-responsive col-12">
                      <table id="" class="table table-striped table-bordered"  >
                          <thead>
                              <tr>
                                  <th width="5%">No</th>                                 
                                  <th>Nama Role</th>
                                  <th>Action</th>
                              </tr>
                          </thead>
                          <tbody>
                            @php
                            $no=1;
                            @endphp
                            @foreach($role as $row)
                            <tr>
                                <td>{{$no++}}</td>
                                <td>{{$row->nama}}</td>
                                <td><a class="btn btn-warning btn-sm" href="{{ route('role-akses.edit',$row->id) }}" ><i class="fa fa-pencil" data-toggle="modal" data-target="#modal-edit" ></i></a></td>
                            </tr>
                            @endforeach
                           
                            
                            
                          </tbody>
                      </table>
                  </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('js')
<script>
    var save_method = 'add';
    var token = $("meta[name='csrf-token']").attr("content");
    var table = $("#dtable").DataTable({
         processing : true,
          serverSide : true,
          ordering    : false,
          
          ajax: {
            url :'modulData',
            type : 'get'
            },
          columns    : [
          
          
          {data : null, name : 'no'},
        //   {data : 'head_modul', name : 'head_modul'},
          {data : 'nama_modul', name : 'nama_modul'},
          {data : 'idparent', name : 'idparent'},
          {data : 'icon', name : 'icon'},
          {data : 'url', name : 'url'},
          {data : 'urut', name : 'urut'},
          {data : 'action',  orderable: false, searchable: false},

          ],

    });
    table.on('draw.dt', function () {
        var info = table.page.info();
        table.column(0, { search: 'applied', order: 'applied', page: 'applied' }).nodes().each(function (cell, i) {
            cell.innerHTML = i + 1 + info.start;
        });
	});
    $('.modal').on('hidden.bs.modal', function(){
        $(this).find('form')[0].reset();
        save_method = 'add';

        // $('.switchery').prop('checked', true).trigger("click");
    });
    function editModul(id){
        $('#modal-edit').modal('show');
        $.ajax({
            url : 'modul'+'/'+id+'/edit',
            type: 'get',
            
            success:function(response){
                
               
                $('#id_modul').val(response.modul.id);
                $('#nama_modul').val(response.modul.nama_modul);
                $('#idparent').val(response.modul.idparent).trigger('change');
                $('#url').val(response.modul.url);
                $('#urutan').val(response.modul.urut);
                $('#preview_icon').empty();
                if(response.path_icon){
                    $('#preview_icon').append('<img src="'+response.path_icon+'" style="display: block;  margin-left: auto;  margin-right: auto;  width: 15%;">')
                }
	     		
                

                save_method = 'edit';
            },
            error:function(xhr){
                console.log(xhr)
            }
        })
    }
    $('#submit_modul').click(function(){
        var form =  $("#form_modul");
        var formData = new FormData($("#form_modul")[0]);
        formData.append('_token', token);

        if(save_method == 'add'){
            var urls ='modul' ;
            var method = 'post';
        }
        else if(save_method == 'edit'){
        var urls ='modul'+'/'+$('#id_modul').val();
        var method = 'put';
        formData.append('_method', 'PUT');
        }

        

        console.log(formData)
        $.ajax({
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        url : urls,
        type : 'POST',
        data : formData,
        contentType: false,
        processData: false,
        success: function(response){
        
        localStorage.setItem("swal",
                                        swal({
                                            title: 'success',
                                            text:  'Data berhasil disimpan',
                                            type: 'success',
                                            timer: 3500,
                                            showConfirmButton: false
                                        })
                                );
        $('#form_modul')[0].reset();
        $('#modal-edit').modal('hide');
        table.ajax.reload();
        },
        error: function (xhr){
            console.log(xhr);
        }
        });
    })
</script>
@endsection