@extends('layout.master')

@push('plugin-styles')
  <link href="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.css') }}" rel="stylesheet" />
  <link href="{{ asset('assets/plugins/@mdi/css/materialdesignicons.min.css') }}" rel="stylesheet" />
@endpush

@section('content')
  <nav class="page-breadcrumb">
    <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="#">Logistik</a></li>
      <li class="breadcrumb-item active" aria-current="page">Barang Keluar (Rusak)</li>
    </ol>
  </nav>

  <div class="row">
    <div class="col-md-12 grid-margin stretch-card">
      <div class="card">
        <div class="card-body">
          <h6 class="card-title">Data Barang Keluar (Rusak)</h6>
          <table id="datatable-serverside" class="table table-sm" style="width: 100%;">
            <thead>
              <tr>
                <th class="kolomNomor">No.</th>
                <th>Nomor</th>
                <th>Gudang</th>
                <th>Tanggal</th>
                <th>Pelaksana</th>
                <th class="text-end">Total</th>
                <th class="kolomAksi">Aksi</th>
              </tr>
            </thead>
          </table>
        </div>
        <div class="card-footer" style="text-align: right;">
          @can('barang-rusak.create')
            <a class="btn btn-info btn-custom1" href="{{ url('/logistik/barang-rusak/create') }}">Tambah Data</a>
          @endcan
        </div>
      </div>
    </div>
  </div>
@endsection

@push('plugin-scripts')
  <script src="{{ asset('assets/plugins/datatables-net/jquery.dataTables.js') }}"></script>
  <script src="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.js') }}"></script>
@endpush

@push('custom-scripts')
  <script src="{{ asset('assets/js/data-table.js') }}"></script>
  <script src="{{ asset('assets/js/sweet-alert.js') }}"></script>

  <script>
    $(document).ready(function() {
      $('#datatable-serverside').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ url('/logistik/barang-rusak') }}",
        columns: [
          { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
          { data: 'nomor', name: 'nomor' },
          { data: 'gudang.nama', name: 'gudang.nama' },
          { data: 'tanggal', name: 'tanggal' },
          { data: 'creator.name', name: 'creator.name' },
          { data: 'total', name: 'total', className: 'text-end' },
          { data: 'aksi', name: 'aksi', orderable: false, searchable: false }
        ]
      });
    });

    const datatableReload = () => {
      $('#datatable-serverside').DataTable().ajax.reload();
      swal.close();
    }
    const destroy = (id) => {
      const url = `/logistik/barang-rusak/${id}/delete`;
      hapusData(url, datatableReload);
    }
  </script>
@endpush