@extends('layout.tokomain')
@section('activenav', '1')    
@section('head-content-title', 'Dashboard')
@section('head-back-nav')
  <li class="breadcrumb-item active">Dashboard</li>
@endsection
@section("container")
    <div class="row">
        <div class="col-12 col-sm-6 col-md-3">
          <div class="info-box">
            <span class="info-box-icon bg-info elevation-1"><i class="fas fa-briefcase"></i></span>

            <div class="info-box-content">
              <span class="info-box-text">Barang Tersedia</span>
              <span class="info-box-number" id="barang-tersedia">
                
              </span>
            </div>
            <!-- /.info-box-content -->
          </div>
          <!-- /.info-box -->
        </div>
        <!-- /.col -->
        <div class="col-12 col-sm-6 col-md-3">
          <div class="info-box mb-3">
            <span class="info-box-icon bg-danger elevation-1"><i class="fas fa-book"></i></span>

            <div class="info-box-content">
              <span class="info-box-text">Pesanan Saat Ini</span>
              <span class="info-box-number" id="pesanan-saat-ini">

              </span>
            </div>
            <!-- /.info-box-content -->
          </div>
          <!-- /.info-box -->
        </div>
        <!-- /.col -->

        <!-- fix for small devices only -->
        <div class="clearfix hidden-md-up"></div>

        <div class="col-12 col-sm-6 col-md-3">
          <div class="info-box mb-3">
            <span class="info-box-icon bg-success elevation-1"><i class="fas fa-money-check-alt"></i></span>

            <div class="info-box-content">
              <span class="info-box-text">Barang Terjual</span>
              <span class="info-box-number" id="barang-terjual">

              </span>
            </div>
            <!-- /.info-box-content -->
          </div>
          <!-- /.info-box -->
        </div>
        <!-- /.col -->
        <div class="col-12 col-sm-6 col-md-3">
          <div class="info-box mb-3">
            <span class="info-box-icon bg-warning elevation-1"><i class="fas fa-shopping-cart"></i></span>

            <div class="info-box-content">
              <span class="info-box-text">Pembelian Bulan Ini</span>
              <span class="info-box-number" id="pembelian-bulan-ini">

              </span>
            </div>
            <!-- /.info-box-content -->
          </div>
          <!-- /.info-box -->
        </div>
        <!-- /.col -->
    </div>
    <div class="row">
      {{-- persediaan barang dagang saat ini --}}
      <div class="col-sm-6">
        <div class="card card-primary card-outline gugus-info">
          <div class="card-header">
            <span style="font-size: 18px; font-weight: 600;">Persediaan tersisa</span>
          </div> <!-- /.card-body -->
          <div class="card-body">
            <table class="table" id="persediaan-tersisa">

            </table>
          </div><!-- /.card-body -->
          <div class="card-footer text-right">
            <button class="btn btn-default">more</button>
          </div>
        </div>
      </div>

      {{-- pesanan urgent --}}
      <div class="col-sm-6">
        <div class="card card-primary card-outline gugus-info">
          <div class="card-header">
            <h3 class="card-title">Pesanan Urgent</h3>
          </div> <!-- /.card-body -->
          <div class="card-body">
            <table class="table" id="pesanan-urgent">

            </table>
          </div><!-- /.card-body -->
          <div class="card-footer text-right">
            <a href="{{url('toko/pesanan')}}" class="btn btn-default">more</a>
          </div>
        </div>
      </div>
    </div>
      <!-- /.row -->


    <script>
      
      $(document).ready(function(){

        
        $.ajaxSetup({
            headers: {
            'X-CSRF-TOKEN': $('meta[name=csrf-token]').attr('content')
            }
        })


        


        $.ajax({
          url: '{{url("toko/total_barang_tersedia")}}',
          type: 'POST',
          dataType: 'text',
          data: {},
        })
        .done(function(response) {
          
          $("#barang-tersedia").html(response);

        })

        $.ajax({
          url: '{{ url("toko/total_pesanan_saat_ini") }}',
          type: 'POST',
          dataType: 'text',
          data: {},
        })
        .done(function(response) {
          
          $("#pesanan-saat-ini").html(response);

        })

        $.ajax({
          url: '{{ url("toko/total_penjualan") }}',
          type: 'POST',
          dataType: 'text',
          data: {},
        })
        .done(function(response) {
          
          $("#barang-terjual").html(response);

        })

        $.ajax({
          url: '{{ url("toko/pembelian_bulan_ini") }}',
          type: 'POST',
          dataType: 'text',
          data: {},
        })
        .done(function(response) {
          
          $("#pembelian-bulan-ini").html(response);

        })

          // end of info -------------------------------------------------------------

        $.ajax({
          url: '{{url("toko/sisa_barang")}}',
          type: 'POST',
          dataType: 'text',
          data: {},
        })
        .done(function(response) {
          
          $("#persediaan-tersisa").html(response);

        })
        .then(function(){
          $.ajax({
            url: '{{url("toko/pesanan/urgent")}}',
            type: 'POST',
            dataType: 'text',
            data: {},
          })
          .done(function(response) {
            
            $("#pesanan-urgent").html(response);

          })
          .then(function(){
            let arr = [];
            $(".gugus-info").each(function(){
              arr.push($(this).height());
            })

            let MaxHeight = Math.max(...arr);
            
            $(".gugus-info").height(MaxHeight);
          })
        })

        setInterval(function(){
        
          $.ajax({
            url: '{{url("toko/total_barang_tersedia")}}',
            type: 'POST',
            dataType: 'text',
            data: {},
          })
          .done(function(response) {
            
            $("#barang-tersedia").html(response);

          })

          $.ajax({
            url: '{{ url("toko/total_pesanan_saat_ini") }}',
            type: 'POST',
            dataType: 'text',
            data: {},
          })
          .done(function(response) {
            
            $("#pesanan-saat-ini").html(response);

          })

          $.ajax({
            url: '{{ url("toko/total_penjualan") }}',
            type: 'POST',
            dataType: 'text',
            data: {},
          })
          .done(function(response) {
            
            $("#barang-terjual").html(response);

          })

          $.ajax({
            url: '{{ url("toko/pembelian_bulan_ini") }}',
            type: 'POST',
            dataType: 'text',
            data: {},
          })
          .done(function(response) {
            
            $("#pembelian-bulan-ini").html(response);

          })

            // end of info -------------------------------------------------------------

          $.ajax({
            url: '{{url("toko/sisa_barang")}}',
            type: 'POST',
            dataType: 'text',
            data: {},
          })
          .done(function(response) {
            
            $("#persediaan-tersisa").html(response);

          })
          .then(function(){
            $.ajax({
              url: '{{url("toko/pesanan/urgent")}}',
              type: 'POST',
              dataType: 'text',
              data: {},
            })
            .done(function(response) {
              
              $("#pesanan-urgent").html(response);

            })
            .then(function(){
              let arr = [];
              $(".gugus-info").each(function(){
                arr.push($(this).height());
              })

              let MaxHeight = Math.max(...arr);
              
              $(".gugus-info").height(MaxHeight);
            })
          })
        
        }, 50000);


      })
    
    </script>


@endsection