@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="#!">Finance</a></li>
      <li class="breadcrumb-item active" aria-current="page">Periode Penutupan</li>
    </ol>
  </nav>

  <div class="row">
    <div class="col-md-12 grid-margin stretch-card">
      <div class="card">
        <div class="card-body">
          <div class="col-12">
            <h6 class="card-title">Data Periode Penutupan</h6>
          </div>
          {{-- <div class="row">
            <div class="col-12 col-md-4">
              <div class="mb-2">
                <input type="text" name="tanggal" id="tanggal" class="form-control daterange-picker" placeholder="Tanggal Transaksi" readonly>
              </div>
            </div>
            <div class="col-12 col-md-3">
                <div class="row">
                    <div class="col-6 pe-1">
                        <button type="button" id="btnFilter" class="btn btn-primary btn-custom2 w-100">Filter</button>
                    </div>
                    <div class="col-6 ps-1">
                        <button type="button" class="btn btn-light btn-custom8 w-100" onclick="filterReset()">Reset</button>
                    </div>
                </div>
            </div>
          </div> --}}
          <div class="table-responsive">
            <table id="datatable-serverside" class="table" style="width: 100%">
              <thead>
                <tr>
                  <th class="kolomNomor">No.</th>
                  <th>Tanggal</th>
                  <th>Sisa Qty</th>
                  {{-- <th>Hpp</th> --}}
                  <th>Sisa Stok</th>
                  <th>Qty Keluar</th>
                  <th>Total Cost</th>
                  <th class="kolomAksi">Aksi</th>
                </tr>
              </thead>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>

  @include('pages.finance.periode-penutupan.modal')
@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>
    let datatable = $('#datatable-serverside').DataTable({
      lengthMenu: lengthMenuDatatable(),
      processing: true,
      serverSide: true,
      ajax: "{{ route('finance.periode-penutupan.index') }}",
      columns: [
        {
          data: 'DT_RowIndex',
          name: 'id'
        },
        {
          data: 'tanggal',
          name: 'tanggal'
        },
        {
          data: 'sisa_qty',
          name: 'sisa_qty',
          className: 'text-end'
        },
        // {
        //   data: 'hpp_periodic',
        //   name: 'hpp_periodic'
        // },
        {
          data: 'sisa_stok_periodic',
          name: 'sisa_stok_periodic',
          className: 'text-end'
        },
        {
          data: 'total_qty_keluar',
          name: 'total_qty_keluar',
          className: 'text-end'
        },
        {
          data: 'total_cost_periodic',
          name: 'total_cost_periodic',
          className: 'text-end'
        },
        {
          data: 'aksi',
          name: 'aksi',
          searchable: false,
          orderable: false
        },
      ],
      order: [
        [1, 'desc']
      ]
    });

    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/periode-penutupan') }}",
        data: {
          periode_penutupan_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