@extends('layouts.backend')

@section('css_after')
    <style type="text/css">
        .easy-pie-canvas-jun {
          height: 35%;
          width: 100%;
        }
        .chart-container {
            height:1000px
        }
        .canvas-jun{
              width:100% !important;
              height:800px !important;
        }
    </style>
    <link href="{{ asset('plugins/jquery-file-upload/css/jquery.fileupload.css')}}" rel="stylesheet"/>
    <link href="{{ asset('plugins/jquery-file-upload/css/jquery.fileupload.css')}}" rel="stylesheet"/>
    <link href="{{ asset('plugins/jquery-file-upload/css/jquery.fileupload-ui.css')}}" rel="stylesheet"/>
    <link href="{{ asset('js/plugins/slick-carousel/slick.css')}}"  rel="stylesheet"/>
    <link href="{{ asset('js/plugins/slick-carousel/slick-theme.css')}}"  rel="stylesheet"/>
@endsection

@section('content')
    <!-- Page Content -->
    <div class="content">
        <div class="block">
            <div class="block-header">
                <h1 class="block-title">Dashboard</h1>
            </div>
            <div class="row" style="margin-right: 14px;margin-left: 14px;">
                <div class="col-md-3 col-lg-3">
                    <div class="form-group">
                        <label for="year">Year</label>
                        <select class="form-control" id="year">
                            <option value="">Please Choose ...</option>
                            @foreach($data["year"] as $year)
                                @if($year->year == date('Y')){
                                    <option value="{{ $year->year }}" selected>{{ $year->year }}</option>
                                @else
                                    <option value="{{ $year->year }}">{{ $year->year }}</option>
                                @endif
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-md-3 col-lg-3">
                    <div class="form-group">
                        <label for="month">Month</label>
                        <select class="form-control" id="month" >
                            <option value="">Please Choose ...</option>
                            <option value="1" @if(date('n') == 1) selected @endif>January</option>
                            <option value="2" @if(date('n') == 2) selected @endif>February</option>
                            <option value="3" @if(date('n') == 3) selected @endif>March</option>
                            <option value="4" @if(date('n') == 4) selected @endif>April</option>
                            <option value="5" @if(date('n') == 5) selected @endif>May</option>
                            <option value="6" @if(date('n') == 6) selected @endif>June</option>
                            <option value="7" @if(date('n') == 7) selected @endif>July</option>
                            <option value="8" @if(date('n') == 8) selected @endif>August</option>
                            <option value="9" @if(date('n') == 9) selected @endif>September</option>
                            <option value="10" @if(date('n') == 10) selected @endif>October</option>
                            <option value="11" @if(date('n') == 11) selected @endif>November</option>
                            <option value="12" @if(date('n') == 12) selected @endif>December</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-6 col-lg-6">
                    <div class="form-group">
                       <a class="btn btn-outline-success" onclick="updateData();" style="width: 25%; margin-top: 5%">Update Data</a>
                    </div>
                </div>
            </div>
            <br>
        </div>
        <div class="row">
            <div class="col-8 col-md-4 col-lg-8 col-xl-4">
                <div class="block">
                    <div class="block-header">
                        <h3 class="block-title">Sales</h3>
                    </div>
                    <a class="block block-rounded block-link-pop border-left border-primary border-4x" href="javascript:void(0)">
                        <div class="block-content block-content-full">
                            <div class="font-size-sm font-w600 text-uppercase text-muted">Order Sales</div>
                            <div class="font-size-h4 font-w400 text-dark" id="sales_invoice">0</div>
                            <br>
                            <div class="font-size-sm font-w600 text-uppercase text-muted">Value Sales</div>
                            <div class="font-size-h4 font-w400 text-dark" id="sales_value_sales">Rp. 0</div>
                        </div>
                    </a>
                </div>
            </div>
            <div class="col-8 col-md-4 col-lg-8 col-xl-4">
                <div class="block">
                    <div class="block-header">
                        <h3 class="block-title">Return</h3>
                    </div>
                    <a class="block block-rounded block-link-pop border-left border-primary border-4x" href="javascript:void(0)">
                        <div class="block-content block-content-full">
                            <div class="font-size-sm font-w600 text-uppercase text-muted">Order Return</div>
                            <div class="font-size-h4 font-w400 text-dark" id="return_invoice">0</div>
                            <br>
                            <div class="font-size-sm font-w600 text-uppercase text-muted">Value Return</div>
                            <div class="font-size-h4 font-w400 text-dark" id="return_value_sales">Rp. 0</div>
                        </div>
                    </a>
                </div>
            </div>
            <div class="col-8 col-md-4 col-lg-8 col-xl-4">
                <div class="block">
                    <div class="block-header">
                        <h3 class="block-title">Cancel</h3>
                    </div>
                    <a class="block block-rounded block-link-pop border-left border-primary border-4x" href="javascript:void(0)">
                        <div class="block-content block-content-full">
                            <div class="font-size-sm font-w600 text-uppercase text-muted">Order Cancel</div>
                            <div class="font-size-h4 font-w400 text-dark" id="cancel_invoice">0</div>
                            <br>
                            <div class="font-size-sm font-w600 text-uppercase text-muted">Value Cancel</div>
                            <div class="font-size-h4 font-w400 text-dark" id="cancel_value_sales">Rp. 0</div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12 col-md-6 col-lg-6 col-xl-6">
                <div class="block">
                    <a class="block block-rounded block-link-pop border-left border-primary border-4x" href="javascript:void(0)">
                        <div class="block-content block-content-full">
                            <div class="font-size-sm font-w600 text-uppercase text-muted">Discount</div>
                            <div class="font-size-h4 font-w400 text-dark" id="sales_discount">0</div>
                        </div>
                    </a>
                </div>
            </div>
            <div class="col-12 col-md-6 col-lg-6 col-xl-6">
                <div class="block">
                    <a class="block block-rounded block-link-pop border-left border-primary border-4x" href="javascript:void(0)">
                        <div class="block-content block-content-full">
                            <div class="font-size-sm font-w600 text-uppercase text-muted">Total Sales</div>
                            <div class="font-size-h4 font-w400 text-dark" id="sales_total">0</div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-4 col-md-4 col-lg-4 col-xl-4">
                <div class="block">
                    <a class="block block-rounded block-link-pop border-left border-primary border-4x" href="javascript:void(0)">
                        <div class="block-content block-content-full">
                            <div class="font-size-sm font-w600 text-uppercase text-muted">Total Sales Unsettled</div>
                            <div class="font-size-h4 font-w400 text-dark" id="sales_total_unsettled">0</div>
                        </div>
                    </a>
                </div>
            </div>
            <div class="col-4 col-md-4 col-lg-4 col-xl-4">
                <div class="block">
                    <a class="block block-rounded block-link-pop border-left border-primary border-4x" href="javascript:void(0)">
                        <div class="block-content block-content-full">
                            <div class="font-size-sm font-w600 text-uppercase text-muted">order Unsettled</div>
                            <div class="font-size-h4 font-w400 text-dark" id="qty_total_unsettled">0</div>
                        </div>
                    </a>
                </div>
            </div>
            <div class="col-4 col-md-4 col-lg-4 col-xl-4">
                <div class="block">
                    <a class="block block-rounded block-link-pop border-left border-primary border-4x" href="javascript:void(0)">
                        <div class="block-content block-content-full">
                            <div class="font-size-sm font-w600 text-uppercase text-muted">Total Sales Settled</div>
                            <div class="font-size-h4 font-w400 text-dark" id="sales_total_settled">0</div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-6 col-md-6 col-lg-6 col-xl-6">
                <div class="block">
                    <a class="block block-rounded block-link-pop border-left border-primary border-4x" href="javascript:void(0)">
                        <div class="block-content block-content-full">
                            <div class="font-size-sm font-w600 text-uppercase text-muted">Cost</div>
                            <div class="font-size-h4 font-w400 text-dark" id="sales_cost">0</div>
                        </div>
                    </a>
                </div>
            </div>
            <div class="col-6 col-md-6 col-lg-6 col-xl-6">
                <div class="block">
                    <a class="block block-rounded block-link-pop border-left border-primary border-4x" href="javascript:void(0)">
                        <div class="block-content block-content-full">
                            <div class="font-size-sm font-w600 text-uppercase text-muted">Income</div>
                            <div class="font-size-h4 font-w400 text-dark" id="sales_income">0</div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
        <div class="block">
            <h5>Orders</h5>
            <div class="row" style="margin-right: 14px;margin-left: 14px;">
                <div class="col-md-12">
                    <canvas id="myChart" class="canvas-jun"></canvas>
                </div>
            </div>
            <br>
            <br>
            <h5>Channels</h5>
            <div class="row" style="margin-right: 14px;margin-left: 14px;">
                <table class="table table-striped  nowrap table-sm table-vcenter js-dataTable-simple" id="list_data" style="width:100%">
                    <thead>
                        <tr>
                            <th>Channel</th>
                            <th>Sales</th>
                            <th>Cancel&Return</th>
                            <th>Income</th>
                            <th>Qty<br>Sales</th>
                            <th>Order/Day</th>
                            <th>Percent</th>
                        </tr>
                    </thead>
                    <tbody id="table_view_detail">
                    </tbody>
                </table>
            </div>
            <br>
            <br>
            <h5>Top 10 Product</h5>
            <div class="row" style="margin-right: 14px;margin-left: 14px;">
                <div class="col-md-12">
                    <div class="js-slider text-center" data-autoplay="true" data-dots="true" data-arrows="true" data-slides-to-show="5" id="slider_product">
                    </div>
                </div>
                
            </div>
            {{-- <h5>Target User</h5> --}}
            {{-- <div class="row" style="margin-right: 14px;margin-left: 14px;">
                <div class="col-md-6">
                    <label>Sales</label>
                    <div id="myChart2" data-percent="70"><span id="target_sales">70.000.000/100.000.000<span></div>
                </div>
                <div class="col-md-6">
                    <label>Transaction</label>
                    <div id="myChart3" data-percent="50"><span id="target_transaction">500/1000<span></div>
                </div>
            </div> --}}
        </div>
    </div>
    <!-- END Page Content -->
    <!-- Page Modal -->
        @include('dashboard.modal')
    <!-- END Page Modal -->
@endsection

@section('js_after')
    <script src="{{ asset('js/plugins/easy-pie-chart/jquery.easypiechart.min.js')}}"  type="text/javascript"></script>
    <script src="{{ asset('js/plugins/jquery-sparkline/jquery.sparkline.min.js')}}"  type="text/javascript"></script>
    <script src="{{ asset('js/plugins/chart.js/Chart.bundle.min.js')}}"  type="text/javascript"></script>
    <script src="{{ asset('js/plugins/slick-carousel/slick.min.js')}}"  type="text/javascript"></script>
     {{-- <script>jQuery(function(){ One.helpers('slick'); });</script> --}}
    @include('dashboard.function')
@endsection