@extends('dashboard.layouts.main')

@section('container')
    <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
        <h1 class="h2">Rekap Produk Olahan</h1>
    </div>

    @if(session()->has('success'))
      <div class="alert alert-success col-lg-8" role="alert">
        {{ session('success') }}
      </div>
    @endif

    <div class="table-responsive col-lg-8">
        <table id="tabelProdukOlahan" class="table table-striped table-sm">
          <thead>
            <tr>
              <th scope="col">#</th>
              <th scope="col">Nama Bank</th>
              <th scope="col">Barang</th>
              <th scope="col">Jumlah</th>
              <th scope="col">Harga</th>
              <th scope="col">Keterangan</th>
            </tr>
          </thead>
          <tbody>
            @foreach($data as $p)
            <tr>
              <td>{{ $loop->iteration }}</td>
              <td>{{ $p->bank->nama_banks }}</td>
              <td>{{ $p->nm_barang }}</td>
              <td>{{ $p->jml }}</td>
              <td>{{ $p->harga }}</td>
              <td>{!! $p->ket !!}</td>
            </tr>
            @endforeach
          </tbody>
        </table>
      </div>

    


      <!-- DataTables CSS -->
      <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">

      <!-- jQuery & DataTables JS -->
      <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
      <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
  <script>
        $(document).ready(function() {
            $('#tabelProdukOlahan').DataTable({
                paging: true,
                searching: true,
                info: true,
                ordering: true,
                language: {
                    search: "Cari:",
                    lengthMenu: "Tampilkan _MENU_ data",
                    info: "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",
                    paginate: {
                        previous: "Sebelumnya",
                        next: "Berikutnya"
                    },
                    zeroRecords: "Tidak ditemukan data yang sesuai"
                }
            });
        });
      </script>

@endsection