@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-header">
          <h4>Data Barang Keluar (Rusak)</h4>
        </div>
        <div class="card-body">
          <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>
  <div class="modal fade" id="JurnalModal">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title h4">Laporan Jurnal</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
        </div>
        <div class="modal-body"></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);
    }
    function lihatJurnal(id) {
      $('#JurnalModal').modal('show');
      let modal = $('#JurnalModal');
      modal.find('.modal-body').html('<div class="text-center"><div class="spinner-border" role="status"><span class="visually-hidden">Loading...</span></div></div>');

      $.ajax({
        method: "GET",
        url: "{{ url('jurnal/barang-rusak') }}",
        data: {
          barang_rusak_id: id,
        },
        success: function(result) {
          if(result.type == 'error'){
            modal.find('.modal-body').html(result.response);
          }else{
            modal.find('.modal-body').html(result)
          }
        },
        error: function(xhr, status, error) {
          console.log(xhr);
          modal.find('.modal-body').html(xhr.responseText);
        }
      })
    }
  </script>
@endpush