@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 Transaksi Produk</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="tabelTransaksiProduk" class="table table-striped table-sm">
          <thead>
              <tr>
                  <th>#</th>
                  <th>Nama Bank</th>
                  <th>Nama Barang</th>
                  <th>Jumlah Terjual</th>
                  <th>Total Penjualan</th>
              </tr>
          </thead>
          <tbody>
              @foreach ($data as $i => $row)
                  <tr>
                      <td>{{ $i + 1 }}</td>
                      <td>{{ $banks[$row->bank_id] ?? 'Tidak Diketahui' }}</td>
                      <td>{{ $produks[$row->produk_id] ?? 'Tidak Diketahui' }}</td>
                      <td>{{ number_format($row->jml_jual) }}</td>
                      <td>Rp {{ number_format($row->total_jual, 0, ',', '.') }}</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() {
            $('#tabelTransaksiProduk').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