@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_closed == date('Y')){
                                    <option value="{{ $year->year_closed }}" selected>{{ $year->year_closed }}</option>
                                @else
                                    <option value="{{ $year->year_closed }}">{{ $year->year_closed }}</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-2 col-lg-2">
                    <div class="form-group">
                       <a class="btn btn-outline-success" onclick="updateData();" style="width: 100%; margin-top: 5%">Update Data</a>
                    </div>
                </div>
            </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="platform">Marketplace</label>
                        <select class="form-control" id="platform" >
                            <option value="0" selected>ALL</option>
                            <option value="1">Tokopedia</option>
                            <option value="2">Blibli</option>
                            <option value="3">Shopee</option>
                            <option value="4">Bukalapak</option>
                            <option value="5">Lazada</option>
                            <option value="6">Tiktok</option>
                            <option value="7">Internal</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-3 col-lg-3">
                    <div class="form-group">
                        <label for="orderby">Sort By</label>
                        <select class="form-control" id="orderby" >
                            <option value="1" selected>Name</option>
                            <option value="2">Total</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-2 col-lg-2">
                    <div class="form-group">
                       <a class="btn btn-outline-success" onclick="downloadExcel();" style="width: 100%; margin-top: 5%">Download Excel</a>
                    </div>
                </div>
            </div>
            <br>
        </div>
        <div class="block">
            <br>
            <h5>Sales Order</h5>
            <div class="row" style="margin-right: 14px;margin-left: 14px;">
                <table class="table table-striped table-bordered nowrap table-sm table-vcenter js-dataTable-simple" style="width:100%">
                    <thead class="thead-dark">
                        <tr>
                            <th style="text-align: center;">Platform</th>
                            <th style="text-align: center;">Shop</th>
                            <th style="text-align: center;">Total Sales</th>
                            <th style="text-align: center;">Total Return</th>
                            <th style="text-align: center;">Total Net</th>
                            <th style="text-align: center;">Target</th>
                            <th style="text-align: center;">Last Updated</th>
                        </tr>
                    </thead>
                    <tbody  id="table_view_detail">
                    </tbody>
                </table>
            </div>
            <br>
            <br>
        </div>
    </div>
    <!-- END Page Content -->
    <!-- Page Modal -->
        @include('dashboard2.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('dashboardclosing.function')
@endsection