@extends('layouts.backapp')

@section('content')
<div class="kt-portlet kt-portlet--mobile" id="kt_blockui_datatable">
    <div class="kt-portlet__head kt-portlet__head--lg">
        <div class="kt-portlet__head-label">
            <span class="kt-portlet__head-icon">
                <i class="kt-font-brand flaticon2-list-1"></i>
            </span>
            <h3 class="kt-portlet__head-title">
            Opname {{ $opname->dealer->name }} Tanggal {{ Carbon\Carbon::parse($opname->opname_date)->format('d M Y') }}
            </h3>
        </div>
        <div class="kt-portlet__head-toolbar">
            <a href="{{ route('opnames.index') }}" class="btn btn-secondary">
                <i class="la la-arrow-left"></i> Kembali
            </a>
        </div>
    </div>

  <div class="kt-portlet__body">
      <div class="table-responsive">
          <!--begin: Datatable -->
          <table class="table table-striped table-bordered table-hover" id="opname-detail-table" data-url="{{ route("opnames.show", $opname->id) }}">
            <thead>
                <tr>
                    <th>Tanggal</th>
                    <th>Pengguna</th>
                    <th>Produk</th>
                    <th>Sistem</th>
                    <th>Fisik</th>
                    <th>Selisih</th>
                </tr>
            </thead>
          </table>
          <!--end: Datatable -->
      </div>
  </div>
</div>  
@endsection

@section('javascripts')
<script>
    $.ajaxSetup({
    headers: {
        "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
    },
});
let tableContainer = $("#opname-detail-table");
let url = tableContainer.data("url");
let table = $("#opname-detail-table").DataTable({
    processing: true,
    serverSide: true,
    ajax: url,
    columns: [
        { data: "opname_date", name: "opname_date" },
        { data: "user_name", name: "user.name" },
        { data: "product_name", name: "product.name" },
        { data: "system_stock", name: "system_stock" },
        { data: "physical_stock", name: "physical_stock" },
        { data: "difference", name: "difference" },
    ],
});

</script>
@endsection