@extends('layouts.app')

@section('content')
    @include('layouts.headers.header-content')
    
    <div class="container-fluid mt--6">
      <div class="row">
        <div class="col">
          <div class="card">
            <!-- Card header -->
            <div class="card-header border-0">
              <h3 class="mb-0">{{ $current_page }}</h3>
              <div class="d-flex flex-row-reverse">
              <a class="btn btn-md btn-primary justify-content-end text-white modal_add" ><i class="fas fa-plus"></i> Tambah</a>
                </div>
            </div>
         
            @if ($message = Session::get('sukses'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
    <span class="alert-inner--icon"><i class="ni ni-like-2"></i></span>
    <span class="alert-inner--text"><strong>{{ $message }}</strong> </span>
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>
    @endif
        
    @if ($message = Session::get('error'))
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
    <span class="alert-inner--icon"><i class="ni ni-like-2"></i></span>
    <span class="alert-inner--text"><strong>{{ $message }}</strong> </span>
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>
    @endif
           
            <!-- Light table -->
            <div class="table-responsive">
              <table class="table align-items-center table-flush" id="table_data">
                <thead class="thead-light">
                  <tr>
                    <th scope="col" class="sort" data-sort="name">Nomor</th>
                    <th scope="col" class="sort" data-sort="budget">Nama Pengguna</th>
                    <th scope="col" class="sort" data-sort="budget">No Identitas </th>
                    <th scope="col" class="sort" data-sort="budget">Jumlah barang </th>
                    <th scope="col"> Action</th>
                  </tr>
                </thead>
                <tbody class="list">
              
                @foreach($pengguna as $i)
                  <tr>
                    <th scope="row">
                      <div class="media align-items-center">
                        
                        <div class="media-body">
                          <span class="name mb-0 text-sm">{{ $loop->iteration }}</span>
                        </div>
                      </div>
                    </th>
                    <td class="budget">
                    {{ $i->nama }} <br>
                    <span class="badge badge-primary">{{ $i->nama_divisi }}</span>
                    </td>
                    <td class="budget">
                    {{ $i->no_identitas }}
                    </td>
                    <td class="budget">
                        {{ \Helperku::get_jumlah_pinjam($i->id) }}
                    </td>
                    <td class="text-right">
                        
                    <a data-id="{{ $i->id }}" href="{{ route('pengguna.show',$i->id) }}"  data-toggle="tooltip" data-placement="top" title="Detail Pengguna" href="#" class="btn btn-md btn-outline-primary"><i class="fas fa-address-book"></i> </a>
                          <a data-id="{{ $i->id }}" data-toggle="tooltip" data-placement="top" title="Edit" href="#" class="modal_edit btn btn-md btn-outline-success"><i class="fas fa-edit"></i> </a>
                          <a data-toggle="tooltip" data-placement="top" title="Hapus"  onclick="return confirm('Pengguna ini akan di delete ... ?')" href="{{ route('pengguna.hapus',$i->id) }}" class="btn btn-md btn-outline-danger"><i class="fas fa-trash"></i> </a>
                          <!-- <a class="dropdown-item" href="#">Something else here</a> -->
                      
                    </td>
                  </tr>     
                  @endforeach
                  
                </tbody>
              </table>
            </div>
            <!-- Card footer -->
           
          </div>
        </div>
      </div>
</div>


@include('admin.pengguna.modal_add')
@include('admin.pengguna.modal_edit')
@include('layouts.footers.auth')
    </div>
@endsection

@push('js')
    <script src="{{ asset('argon') }}/vendor/chart.js/dist/Chart.min.js"></script>
    <script src="{{ asset('argon') }}/vendor/chart.js/dist/Chart.extension.js"></script>
    <script>

$(document).ready(function () {
    $('#table_data').DataTable();
});
        $(".modal_add").click(function(e){

            e.preventDefault();

            $("#modal_add").modal('show');
        })

        $(".modal_edit").click(function(e){

e.preventDefault();
var id = $(this).attr('data-id');
$("#modal_edit").modal('show');

console.log(id);  
            $.ajaxSetup({
                  headers: {
                      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                  }
              })
            $.ajax({
                url:"{{ secure_url('get_pengguna') }}",
                method:"post",
                data:{id:id},
                success:function(data){

                    var obj = JSON.parse(data);
                    // console.log(obj);

                    $("[name=nama]").val(obj.nama);
                    $("[name=no_identitas]").val(obj.no_identitas);
                    $("[name=id]").val(id);


                }


            })

})


$(".modal_detail").click(function(e){

e.preventDefault();
var id = $(this).attr('data-id');
$("#modal_detail").modal('show');

console.log(id);  
            $.ajaxSetup({
                  headers: {
                      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                  }
              })
            $.ajax({
                url:"{{ secure_url('get_detail_pengguna') }}",
                method:"post",
                data:{id:id},
                success:function(data){

                    var obj = JSON.parse(data);
                    // console.log(obj);

                    $("[name=nama]").val(obj.nama);
                    $("[name=no_identitas]").val(obj.no_identitas);
                    $("[name=id]").val(id);


                }


            })

})
        
        </script>
@endpush