@extends('layout.master')

@push('plugin-styles')
  <link href="{{ asset('assets/plugins/flatpickr/flatpickr.min.css') }}" rel="stylesheet" />
@endpush

@section('content')
<div class="d-flex justify-content-between align-items-center flex-wrap grid-margin">
  <div>
    <h4 class="mb-3 mb-md-0">Welcome to Dashboard</h4>
  </div>
</div>

<div class="row">
  <div class="col-12 col-xl-12 stretch-card">
    <div class="row flex-grow-1">
      <div class="col-md-4 grid-margin stretch-card">
        <div class="card">
          <div class="card-body">
            <div class="d-flex justify-content-between align-items-baseline">
              <h6 class="card-title mb-0">Jumlah Pelanggan</h6>
            </div>
            <div class="row">
              <div class="col-12 col-md-12 col-xl-12 h-50">
                <center>
                  <h1 class="mt-4">{{ formatNumber($jmlPelanggan) }}</h1>
                </center>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-4 grid-margin stretch-card">
        <div class="card">
          <div class="card-body">
            <div class="d-flex justify-content-between align-items-baseline">
              <h6 class="card-title mb-0">Jumlah Supplier</h6>
            </div>
            <div class="row">
              <div class="col-12 col-md-12 col-xl-12 h-50">
                <center>
                  <h1 class="mt-4">{{ formatNumber($jmlSupplier) }}</h1>
                </center>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-4 grid-margin stretch-card">
        <div class="card">
          <div class="card">
            <div class="card-body">
              <div class="d-flex justify-content-between align-items-baseline">
                <h6 class="card-title mb-0">Jumlah Produk</h6>
              </div>
              <div class="row">
                <div class="col-12 col-md-12 col-xl-12 h-50">
                  <center>
                    <h1 class="mt-4">{{ $jmlProduk }}</h1>
                  </center>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div> <!-- row -->

<div class="row">
  <div class="col-12 col-xl-12 stretch-card">
    <div class="row flex-grow-1">
      <div class="col-md-6 grid-margin stretch-card">
        <div class="card">
          <div class="card-body">
            <div class="d-flex justify-content-between align-items-baseline">
              <h6 class="card-title mb-0">Penjualan Belum Lunas ({{ date('Y') }})</h6>
            </div>
            <div class="row">
              <div class="col-12 col-md-12 col-xl-12 h-50">
                <center>
                  <h1 class="mt-4"><a href="/penjualan/kasir">{{ formatNumber($jmlPenjualanBL) }}</a></h1>
                </center>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-6 grid-margin stretch-card">
        <div class="card">
          <div class="card">
            <div class="card-body">
              <div class="d-flex justify-content-between align-items-baseline">
                <h6 class="card-title mb-0">Penjualan Lunas ({{ date('Y') }})</h6>
              </div>
              <div class="row">
                <div class="col-12 col-md-12 col-xl-12 h-50">
                  <center>
                    <h1 class="mt-4"><a href="/penjualan/kasir/history">{{ formatNumber($jmlPenjualanL) }}</a></h1>
                  </center>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div> <!-- row -->

<div class="row">
  <div class="col-lg-12 col-xl-12 grid-margin stretch-card">
    <div class="card">
      <div class="card-body">
        <div class="d-flex justify-content-between align-items-baseline mb-2">
          <h6 class="card-title mb-0">Jumlah Penjualan Bulan Ini ({{ date('F Y') }})</h6>
        </div>
        <div id="monthlySalesChart"></div>
      </div>
    </div>
  </div>
</div> <!-- row -->

<div class="row">
  <div class="col-lg-12 col-xl-12 grid-margin stretch-card">
    <div class="card">
      <div class="card-body">
        <div class="d-flex justify-content-between align-items-baseline mb-2">
          <h6 class="card-title mb-0">Nominal Penjualan Bulan Ini ({{ date('F Y') }})</h6>
        </div>
        <div id="monthlySalesChart2"></div>
      </div>
    </div>
  </div>
</div> <!-- row -->

<div class="row">
  <div class="col-lg-12 col-xl-12 stretch-card">
    <div class="card">
      <div class="card-body">
        <div class="d-flex justify-content-between align-items-baseline mb-2">
          <h6 class="card-title">PENJUALAN HARI INI</h6>
        </div>
        <div class="table-responsive">
          <table class="table table-hover mb-0">
            <thead>
              <tr>
                <th class="pt-0">NO</th>
                <th class="pt-0">NOMOR TERIMA ORDER</th>
                <th class="pt-0">PELANGGAN</th>
                <th class="pt-0">STATUS</th>
              </tr>
            </thead>
            <tbody>
                                <tr>
                    <td colspan="4" class="text-center">Belum Terdapat Data</td>
                  </tr>
                              </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div> <!-- row -->

<div class="row mt-4">
  <div class="col-lg-12 col-xl-12 stretch-card">
    <div class="card">
      <div class="card-body">
        <div class="d-flex justify-content-between align-items-baseline mb-2">
          <h6 class="card-title">PRODUK STOK AKAN HABIS</h6>
        </div>
        <div class="table-responsive">
          <table id="datatable-serverside-stok" class="table" style="width: 100%;">
              <thead>
                  <tr>
                    <th class="kolomNomor">No.</th>
                    <th>Nama Barang</th>
                    <th>Supplier / Alias</th>
                    <th>Keterangan</th>
                  </tr>
              </thead>
          </table>
        </div>
      </div>
    </div>
  </div>
</div> <!-- row -->
@endsection

@push('plugin-scripts')
  <script src="{{ asset('assets/plugins/flatpickr/flatpickr.min.js') }}"></script>
  <script src="{{ asset('assets/plugins/apexcharts/apexcharts.min.js') }}"></script>
  <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/dashboard.js') }}"></script>
  <script src="{{ asset('assets/js/data-table.js') }}"></script>
  <script>
    var dataGrafik = @json($dataGrafik);
    var dataGrafik2 = @json($dataGrafik2);

    var URLs = "{{ url('dashboard') }}";

    let datatable = $('#datatable-serverside-stok').DataTable({
      lengthMenu: lengthMenuDatatable(),
      processing: true,
      serverSide: true,
      ajax: URLs+'/get-data-stok',
      searching: false,
      columns: [
        {data: 'DT_RowIndex', name: 'id'},
        {data: 'nama_barang', name: 'nama_barang'},
        {data: 'supplier', name: 'supplier'},
        {data: 'keterangan', name: 'keterangan', searchable: false, orderable: false, class: 'text-center'},
      ],
    });
  </script>
@endpush