@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">Satuan Barang</th>
                    <th scope="col"> Action</th>
                  </tr>
                </thead>
                <tbody class="list">

                @foreach($satuan_barang as $i)
                  <tr>
                    <th scope="row">
                      <div class="media align-items-center">
                        <a href="#" class="avatar rounded-circle mr-3">
                          <img alt="Image placeholder" src="../assets/img/theme/bootstrap.jpg">
                        </a>
                        <div class="media-body">
                          <span class="name mb-0 text-sm">{{ $loop->iteration }}</span>
                        </div>
                      </div>
                    </th>
                    <td class="budget">
                    {{ $i->nama_satuan }}
                    </td>
                    
                    <td class="text-right">
                     
                          <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('Jenis barang ini akan di delete ... ?')" href="{{ route('satuan.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>
<div class="modal fade" id="modal_add" tabindex="-1" role="dialog" aria-labelledby="modal_add" aria-hidden="true">
    <div class="modal-dialog modal-lg  modal-" role="document">
        <div class="modal-content">
        	
            <div class="modal-header">
                <h2 class="modal-title" id="modal-title-default">Tambah Satuan barang</h2>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            
            <div class="modal-body">
            	
            <div class="text-center text-muted mb-4">
            <small></small>
        </div>
        <form role="form" action="<?= route('satuan.store') ?>" method="post">
        @csrf
            <div class="form-group mb-3">
                <div class="input-group input-group-alternative">
                    <div class="input-group-prepend">
                        <span class="input-group-text"><i class="fas fa-list"></i></span>
                    </div>
                    <input class="form-control" required placeholder="inputkan Satuan barang ..." type="text" name="satuan_barang">
                </div>
            </div>
      
      
    
            </div>
            
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary">Simpan </button>
                  
        </form>
            </div>
            
        </div>
    </div>
</div>

<div class="modal fade" id="modal_edit" tabindex="-1" role="dialog" aria-labelledby="modal_add" aria-hidden="true">
    <div class="modal-dialog modal-lg  modal-" role="document">
        <div class="modal-content">
        	
            <div class="modal-header">
                <h2 class="modal-title" id="modal-title-default">Update Satuan barang</h2>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            
            <div class="modal-body">
            	
            <div class="text-center text-muted mb-4">
            <small></small>
        </div>
        
        <form role="form" action="<?= route('satuan.updates') ?>" method="post">
            @csrf
            @method('put')
            <input type="hidden" name="id" />
            <div class="form-group mb-3">
                <div class="input-group input-group-alternative">
          
                    <div class="input-group-prepend">
                        <span class="input-group-text"><i class="fas fa-list"></i></span>
                    </div>
                    <input class="form-control" required placeholder="inputkan Satuan barang ..." type="text" name="satuan_barang">
                </div>
            </div>
      
      
    
            </div>
            
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary">Simpan </button>
                  
        </form>
            </div>
            
        </div>
    </div>
</div>
        @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();

$("#modal_edit").modal('show');
var id = $(this).attr('data-id');
// console.log(id_jenis);  
            $.ajaxSetup({
                  headers: {
                      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                  }
              })
            $.ajax({
                url:"{{ secure_url('get_satuan_barang') }}",
                method:"post",
                data:{id:id},
                success:function(data){

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

                    $("[name=satuan_barang]").val(obj.nama_satuan);
                    $("[name=id]").val(obj.id);


                }


            })

})
        
        </script>
@endpush