@extends('adminlte::page')

@section('title', 'Dashboard')

@section('content_header')
    <h1>{{DB::table('settings')->where('name','company_name')->first()->value}}</h1>
    
@stop

@section('content')
<!-- Main content -->
    <section class="content">
      <div class="container-fluid">
        <!-- Info boxes -->
        <div class="row">
          <div class="col-12 col-sm-6 col-md-3">
          	<a href="{{url('order/list')}}">
            <div class="info-box">
              <span class="info-box-icon bg-info elevation-1"><i class="fas fa-shopping-cart"></i></span>

              <div class="info-box-content">
                <span class="info-box-text">Order</span>
                <span class="info-box-number">
                  {{$order->total}}
                </span>
              </div>
              <!-- /.info-box-content -->
            </div>
        	</a>
            <!-- /.info-box -->
          </div>
          <!-- /.col -->
          <div class="col-12 col-sm-6 col-md-3">
          	<a href="{{url('order/list')}}">
            <div class="info-box mb-3">
              <span class="info-box-icon bg-success elevation-1"><i class="fas fa-users"></i></span>

              <div class="info-box-content">
                <span class="info-box-text">Order Checkout</span>
                <span class="info-box-number">{{$order_checkout->total}}</span>
              </div>
              <!-- /.info-box-content -->
            </div>
        	</a>
            <!-- /.info-box -->
          </div>
          <!-- /.col -->
          <div class="col-12 col-sm-6 col-md-3">
          	<a href="{{url('return/list')}}">
            <div class="info-box mb-3">
              <span class="info-box-icon bg-warning elevation-1"><i class="fa fa-arrow-circle-left"></i></span>

              <div class="info-box-content">
                <span class="info-box-text">Returned Order</span>
                <span class="info-box-number">{{$return_order->total}}</span>
              </div>
              <!-- /.info-box-content -->
            </div>
        </a>
            <!-- /.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">
          	<a href="{{url('return/problem/list')}}">
            <div class="info-box mb-3">
              <span class="info-box-icon bg-danger elevation-1"><i class="fas fa-info"></i></span>

              <div class="info-box-content">
                <span class="info-box-text">Return Problem</span>
                <span class="info-box-number">{{$return_problem->total}}</span>
              </div>
              <!-- /.info-box-content -->
            </div>
        </a>
            <!-- /.info-box -->
          </div>
          <!-- /.col -->
          
        </div>
        <!-- /.row -->
 <div class="row">

          <div class="col-12">
            <div class="card collapsed-card">
            <div class="card-header">
            <h3 class="card-title">Stock Chart</h3>
                 <div class="card-tools">
                  <button type="button" class="btn btn-tool" data-card-widget="collapse">
                    <i class="fas fa-plus"></i>
                  </button>
                </div>
              </div>
              <div class="card-body">
                <canvas id="myChart"></canvas>
              </div>
            </div>
            
          </div>
          <div class="col-6">
            <div class="card">

              <div class="card-header">
                <h3 class="card-title">Generate Laporan Pengiriman Bulanan</h3>
              </div>
              <div class="card-body">
                <div class="form-group">
                  <label>Bulan</label>
                    <select name="month_report" class="form-control">
                      <option value="01">Januari</option>
                      <option value="02">Februari</option>
                      <option value="03">Maret</option>
                      <option value="04">April</option>
                      <option value="05">Mei</option>
                      <option value="06">Juni</option>
                      <option value="07">Juli</option>
                      <option value="08">Agustus</option>
                      <option value="09">September</option>
                      <option value="10">Oktober</option>
                      <option value="11">November</option>
                      <option value="12">Desember</option>
                    </select>
                </div>
                 <div class="form-group">
                  <label>Tahun</label>
                    <select name="year_report" class="form-control">
                      @foreach($report_year as $ry)
                      <option value="{{$ry->year}}">{{$ry->year}}</option>
                      @endforeach
                    </select>
                </div>
                
              </div>
              <div class="card-footer">
                <button class="btn btn-primary btn-generate-delivery-report" style="float: right;"><i class="fa fa-print"></i> Generate</button>
              </div>
              
            </div>

            <div class="card card-primary card-outline card-outline-tabs">
              <div class="card-header p-0 border-bottom-0">
                <ul class="nav nav-tabs" id="custom-tabs-four-tab" role="tablist">
                  <li class="nav-item">
                    <a class="nav-link active" id="custom-tabs-four-home-tab" data-toggle="pill" href="#custom-tabs-four-home" role="tab" aria-controls="custom-tabs-four-home" aria-selected="true">Harian</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" id="custom-tabs-four-profile-tab" data-toggle="pill" href="#custom-tabs-four-profile" role="tab" aria-controls="custom-tabs-four-profile" aria-selected="false">Bulanan</a>
                  </li>
                </ul>
              </div>
              <div class="card-body">
                <div class="tab-content" id="custom-tabs-four-tabContent">
                  <h3 class="card-title">Generate Laporan Produk Laku Terjual</h3><br>
                  <hr>
                  <div class="tab-pane fade show active" id="custom-tabs-four-home" role="tabpanel" aria-labelledby="custom-tabs-four-home-tab">
                  <div class="form-group">
                  <label>Tanggal</label>
                    <div class="input-group date" id="item-sold-date" data-target-input="nearest">
                        <input type="text" name="item_sold_date_report" class="form-control datetimepicker-input" data-target="#item-sold-date" value="{{date('Y-m-d')}}"/>
                        <div class="input-group-append" data-target="#item-sold-date" data-toggle="datetimepicker">
                            <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                        </div>
                    </div>
                </div>

                    <button class="btn btn-primary btn-generate-item-sold-report-daily" style="float: right;"><i class="fa fa-print"></i> Generate</button>
                  </div>
                  <div class="tab-pane fade" id="custom-tabs-four-profile" role="tabpanel" aria-labelledby="custom-tabs-four-profile-tab">
                  <div class="form-group">
                  <label>Bulan</label>
                    <select name="item_sold_month_report" class="form-control">
                      <option value="01">Januari</option>
                      <option value="02">Februari</option>
                      <option value="03">Maret</option>
                      <option value="04">April</option>
                      <option value="05">Mei</option>
                      <option value="06">Juni</option>
                      <option value="07">Juli</option>
                      <option value="08">Agustus</option>
                      <option value="09">September</option>
                      <option value="10">Oktober</option>
                      <option value="11">November</option>
                      <option value="12">Desember</option>
                    </select>
                </div>
                 <div class="form-group">
                  <label>Tahun</label>
                    <select name="item_sold_year_report" class="form-control">
                      @foreach($report_year as $ry)
                      <option value="{{$ry->year}}">{{$ry->year}}</option>
                      @endforeach
                    </select>
                </div>
                <button class="btn btn-primary btn-generate-item-sold-report-monthly" style="float: right;"><i class="fa fa-print"></i> Generate</button>

                  </div>
                  
                </div>
              </div>
              <!-- /.card -->
            </div>

            <div class="card">

              <div class="card-header">
                <h3 class="card-title">Generate Laporan Produk Retur</h3>
              </div>
              <div class="card-body">
                 <div class="form-group">
                  <label>Tanggal Mulai</label>
                    <div class="input-group date" id="start-date-return" data-target-input="nearest">
                        <input type="text" name="start_date_return_report" class="form-control datetimepicker-input" data-target="#start-date-return" readonly="true" value="{{date('Y-m-d')}}"/>
                        <div class="input-group-append" data-target="#start-date-return" data-toggle="datetimepicker">
                            <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                  <label>Tanggal Berakhir</label>
                    <div class="input-group date" id="end-date-return" data-target-input="nearest">
                        <input type="text" name="end_date_return_report" class="form-control datetimepicker-input" data-target="#end-date-return" readonly="true" value="{{date('Y-m-d')}}"/>
                        <div class="input-group-append" data-target="#end-date-return" data-toggle="datetimepicker">
                            <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                        </div>
                    </div>
                </div>
              </div>
              <div class="card-footer">
                <button class="btn btn-primary btn-generate-return-report" style="float: right;"><i class="fa fa-print"></i> Generate</button>
              </div>
              
            </div>

            <div class="card">

              <div class="card-header">
                <h3 class="card-title">Generate Laporan Produk Kadaluarsa</h3>
              </div>
              <!-- <div class="card-body">
                 <div class="form-group">
                  <label>Tanggal</label>
                    <div class="input-group date" id="date-expired" data-target-input="nearest">
                        <input type="text" name="date_expired_report" class="form-control datetimepicker-input" data-target="#date-expired" readonly="true" value="{{date('Y-m-d')}}"/>
                        <div class="input-group-append" data-target="#date-expired" data-toggle="datetimepicker">
                            <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                        </div>
                    </div>
                </div>
              </div> -->
              <div class="card-footer">
                <button class="btn btn-primary btn-generate-expired-report" style="float: right;"><i class="fa fa-print"></i> Generate</button>
                <button class="btn btn-success btn-generate-expired-excel" style="float: right; margin-right: 8px;"><i class="fa fa-print"></i> Export Excel</button>
              </div>
              
            </div>

          </div>
          <div class="col-6">
            

            <div class="card">
              <div class="card-header">
                <h3 class="card-title">Item List</h3>
                 <div class="card-tools">
                  <button type="button" class="btn btn-tool" data-card-widget="collapse">
                    <i class="fas fa-minus"></i>
                  </button>
                </div>
              </div>
              <!-- /.card-header -->
              <div class="card-body">
                <table id="item-table" class="table table-bordered table-striped">
                  <thead>
                  <tr>
                    <th>No.</th>
                    <th>Item Code</th>
                    <th>Item Name</th>
                    <th>Stock</th>
                    <th>Stock Ordered</th>
                    <th>Stock Expired</th>
                    <th>Stock Opname</th>
                  </tr>
                  </thead>
                  <tbody>
                    
                  </tbody>
                </table>
              </div>
              <!-- /.card-body -->
            </div>
            <!-- /.card -->

            <div class="card">
              <div class="card-header">
                <h3 class="card-title card-warning">Item Expired List (in 3 Months)</h3>
                 <div class="card-tools">
                  <button type="button" class="btn btn-tool" data-card-widget="collapse">
                    <i class="fas fa-minus"></i>
                  </button>
                </div>
              </div>
              <!-- /.card-header -->
              <div class="card-body">
                <table id="item-expired-table" class="table table-bordered table-striped">
                  <thead>
                  <tr>
                    <th>No.</th>
                    <th>Item Code</th>
                    <th>Item Name</th>
                    <th>Stock Code</th>
                    <th>Expired Date</th>
                  </tr>
                  </thead>
                  <tbody>
                    
                  </tbody>
                </table>
              </div>
              <!-- /.card-body -->
            </div>
            <!-- /.card -->


          </div>
          <!-- /.col -->
        </div>
        
      </div><!--/. container-fluid -->
    </section>
    <!-- /.content -->
@stop

@section('css')
   <link rel="stylesheet" href="{{asset('plugins/datatables-bs4/css/dataTables.bootstrap4.min.css')}}">
    <link rel="stylesheet" href="{{asset('plugins/datatables-responsive/css/responsive.bootstrap4.min.css')}}">
    <link rel="stylesheet" href="{{asset('plugins/datatables-buttons/css/buttons.bootstrap4.min.css')}}">
    <link rel="stylesheet" href="{{asset('plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css')}}">

    <style type="text/css">
      .hidden{
        display: none !important;
      }
    </style>
  @stop
  
  @section('js')
  <!-- <script src="{{asset('plugins/datatables/jquery.dataTables.min.js')}}"></script> -->
  <script src="{{asset('plugins/datatables/jquery.dataTables.min.js')}}"></script>
  
  <script src="{{asset('plugins/datatables-bs4/js/dataTables.bootstrap4.min.js')}}"></script>
  <script src="{{asset('plugins/datatables-responsive/js/dataTables.responsive.min.js')}}"></script>
<script src="{{asset('plugins/datatables-responsive/js/responsive.bootstrap4.min.js')}}"></script>
<script src="{{asset('plugins/datatables-buttons/js/dataTables.buttons.min.js')}}"></script>
<script src="{{asset('plugins/datatables-buttons/js/buttons.bootstrap4.min.js')}}"></script>

<script src="{{asset('plugins/bootstrap/js/bootstrap.bundle.min.js')}}"></script>
<!-- overlayScrollbars -->
<script src="{{asset('plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js')}}"></script>
<!-- AdminLTE App -->
<script src="{{asset('vendor/adminlte/dist/js/adminlte.js')}}"></script>

<!-- PAGE PLUGINS -->
<!-- jQuery Mapael -->
<script src="{{asset('plugins/jquery-mousewheel/jquery.mousewheel.js')}}"></script>
<script src="{{asset('plugins/raphael/raphael.min.js')}}"></script>
<!-- <script src="{{asset('plugins/jquery-mapael/jquery.mapael.min.js')}}"></script> -->
<!-- <script src="{{asset('plugins/jquery-mapael/maps/usa_states.min.js')}}"></script> -->
<!-- ChartJS -->
<!-- <script src="{{asset('plugins/chart.js/Chart.min.js')}}"></script> -->

<!-- AdminLTE for demo purposes -->
<!-- <script src="{{asset('vendor/adminlte/dist/js/demo.js')}}"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2"></script>

<script src="{{asset('plugins/moment/moment.min.js')}}"></script>
<script src="{{asset('plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js')}}"></script>
<script src="{{asset('plugins/daterangepicker/daterangepicker.js')}}"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.min.js" integrity="sha512-7U4rRB8aGAHGVad3u2jiC7GA5/1YhQcQjxKeaVms/bT66i3LVBMRcBI9KwABNWnxOSwulkuSXxZLGuyfvo7V1A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> -->

<script type="text/javascript">

  $(document).ready(function(){
      $('#item-sold-date').datetimepicker({
        format: 'YYYY-MM-DD'
    });

    $('#start-date-return').datetimepicker({
        format: 'YYYY-MM-DD'
    });

    $('#end-date-return').datetimepicker({
        format: 'YYYY-MM-DD'
    });

    $('#date-expired').datetimepicker({
        format: 'YYYY-MM-DD'
    });

    $('#expdate').datetimepicker({
        format: 'YYYY-MM-DD'
    });



    });
  $(function () {
   Chart.register(ChartDataLabels);


$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});
    $.ajax({
      type: 'GET',
      url: "