@extends('layouts.main')

@push('stack-head')
    <link rel="stylesheet" href="{{ asset('assets/plugins/chart.js/Chart.min.css') }}">
@endpush
@push('stack-script')
    <script src="{{ asset('assets/plugins/chart.js/Chart.min.js') }}"></script>
    <script>
        $(function() {
            var areaChartData = $.get('/admin/dashboard/chart').done(data => data.result).fail(err => console.log(err))
            console.log(areaChartData)
            var areaChartData = {
                //   labels  : ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
                datasets: [{
                        label: 'Digital Goods',
                        backgroundColor: 'rgba(60,141,188,0.9)',
                        borderColor: 'rgba(60,141,188,0.8)',
                        pointRadius: false,
                        pointColor: '#3b8bba',
                        pointStrokeColor: 'rgba(60,141,188,1)',
                        pointHighlightFill: '#fff',
                        pointHighlightStroke: 'rgba(60,141,188,1)',
                        data: [28, 48, 40, 19, 86, 27, 90]
                    },
                    {
                        label: 'Electronics',
                        backgroundColor: 'rgba(210, 214, 222, 1)',
                        borderColor: 'rgba(210, 214, 222, 1)',
                        pointRadius: false,
                        pointColor: 'rgba(210, 214, 222, 1)',
                        pointStrokeColor: '#c1c7d1',
                        pointHighlightFill: '#fff',
                        pointHighlightStroke: 'rgba(220,220,220,1)',
                        data: [65, 59, 80, 81, 56, 55, 40]
                    },
                ]
            }
            var areaChartOptions = {

                maintainAspectRatio: false,
                responsive: true,
                legend: {
                    display: true
                },
                scales: {
                    xAxes: [{
                        gridLines: {
                            display: false,
                        }
                    }],
                    yAxes: [{
                        gridLines: {
                            display: false,
                        }
                    }]
                }
            }
            var lineChartCanvas = $('#lineChart').get(0).getContext('2d')
            var lineChartOptions = $.extend(true, {}, areaChartOptions)
            var lineChartData = $.extend(true, {}, areaChartData)
            // lineChartData.datasets[0].fill = false;
            // lineChartData.datasets[1].fill = false;
            lineChartOptions.datasetFill = false
            const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July']
            const data = {
                labels: labels,
                datasets: [{
                    label: 'My First dataset',
                    backgroundColor: 'rgba(54, 162, 235, 0.5)',
                    borderColor: 'rgb(54, 162, 235)',
                    borderWidth: 1,
                    data: [10, 20, 30, 40, 50, 0, 5],
                }]
            };
            var lineChart = new Chart(lineChartCanvas, {
                type: 'line',
                data,
                options: {
                    scales: {
                        x: {
                            grid: {
                                borderColor: 'red'
                            }
                        }
                    }
                }
            })
        })
    </script>
@endpush

@section('dashboard-sales')
    @includeIf('admin.dashboard.widgets.summary', ['option' => $option_sales])
    <div class="row">

        <div class="col-md-6 d-none">
            <div class="card card-info">
                <div class="card-header">
                    <h3 class="card-title">Line Chart</h3>
                    <div class="card-tools">
                        <button type="button" class="btn btn-tool" data-card-widget="collapse">
                            <i class="fas fa-minus"></i>
                        </button>
                        <button type="button" class="btn btn-tool" data-card-widget="remove">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    <div class="chart">
                        <div class="chartjs-size-monitor">
                            <div class="chartjs-size-monitor-expand">
                                <div class=""></div>
                            </div>
                            <div class="chartjs-size-monitor-shrink">
                                <div class=""></div>
                            </div>
                        </div>
                        <canvas id="lineChart"
                            style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%; display: block; width: 408px;"
                            width="408" height="250" class="chartjs-render-monitor"></canvas>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <div class="card card-success card-outline">
        <div class="card-header">
            <div class="h3 mb-2">Aktivitas Sales</div>
        </div>

        <div class="card-body">
            <form action="{{ route('admin.dashboard') }}" class="mb-3 data-table-change" id="selectdate" method="get">
                <div class="row" style="">
                    <div class="form-group col-3 col-md-3" style="margin-bottom: 10px;">
                        <label id="year">Tahun</label>
                        <select name="year" id="year" class="form-control form-control-sm">
                            @for ($i = 2019; $i <= now()->year; $i++)
                                <option value="{{ $i }}"
                                    {{ $report_data['config']['yearInNumber'] == $i ? 'selected' : '' }}>
                                    {{ $i }}</option>
                            @endfor
                        </select>
                    </div>
                    <div class="col-4 col-md-3" style="margin-bottom: 10px;">
                        <label id="month">Bulan</label>
                        <select name="month" id="month" class="form-control form-control-sm">
                            @for ($i = 1; $i <= 12; $i++)
                                <option value="{{ $i }}"
                                    {{ $report_data['config']['monthInNumber'] == $i ? 'selected' : '' }}>
                                    {{ monthLocale($i) }}</option>
                            @endfor
                        </select>
                    </div>
                    <div class="col-3 col-md-3" style="margin-bottom: 10px;">
                        <label id="sum_by">Berdasarkan</label>
                        <select name="sum_by" id="sum_by" class="form-control form-control-sm">
                            <option value="poin">Poin</option>
                            <option value="qty">Kuantitas</option>
                        </select>
                    </div>
                    <div class="col-3 col-md-3" style="margin-bottom: 10px;">
                        <label id="month">Sales</label>
                        <select name="sales_id" id="sales_id" class="form-control form-control-sm">
                            <option value="">- Semua -</option>
                            @foreach (\App\Models\User::where('is_sales', 1)->pluck('name', 'id') as $id => $name)
                                <option value="{{ $id }}">{{ $name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-3 col-md-3" style="margin-bottom: 10px;">
                        <label for="">&nbsp;</label>
                        <a href="javascript:window.location.href='{{ route('admin.dashboard.activity_export') }}?'+$.param($('#selectdate').serializeArray());"
                            class="btn btn-success">Excel</a>
                    </div>

                </div>
            </form>
            <div class="table-responsive">
                <table class="table scroll-x-table table-bordered table-condensed datatable-ajax"
                    data-ajax-context="showroom" data-table-paging="false" data-table-sort="false"
                    data-search-source="#selectdate" data-table-method="POST" data-table-order="false"
                    data-ajax-url="{{ route('admin.dashboard.activity_list') }}" width="100%">
                    <thead>
                        <tr>
                            <th rowspan="2" class="no-sort" style="vertical-align: middle">Aktivitas</th>
                            <th colspan="31" class="no-sort">Laporan Bulan {{ $report_data['config']['reportDate'] }}
                            </th>
                            <th rowspan="2" class="no-sort" style="vertical-align: middle">Total</th>
                        </tr>
                        <tr class="text-capitalize">
                            @for ($i = 1; $i <= 31; $i++)
                                <th class="no-sort">{{ $i }}</th>
                            @endfor
                        </tr>
                    </thead>
                    <tbody id="htmldata-sales" class="text-capitalize"></tbody>
                </table>
            </div>
        </div>
    </div>
@endsection
@section('dashboard-showroom')
    @includeIf('admin.dashboard.widgets.summary', ['option' => $option_showroom])

    <div class="card card-success card-outline">
        <div class="card-header">
            <div class="h3 mb-2">Aktivitas Showroom</div>
        </div>

        <div class="card-body">
            <form action="{{ route('admin.dashboard.showroom_export') }}" class="mb-3 data-table-change"
                id="selectdate-showroom" method="get">
                <div class="row" style="">
                    <div class="form-group col-4 col-md-3" style="margin-bottom: 10px;">
                        <label id="year">Tahun</label>
                        <select name="year" id="year" class="form-control form-control-sm">
                            @for ($i = 2019; $i <= now()->year; $i++)
                                <option value="{{ $i }}"
                                    {{ $report_data['config']['yearInNumber'] == $i ? 'selected' : '' }}>
                                    {{ $i }}</option>
                            @endfor
                        </select>
                    </div>
                    <div class="col-4 col-md-3" style="margin-bottom: 10px;">
                        <label id="month">Bulan</label>
                        <select name="month" id="month" class="form-control form-control-sm">
                            @for ($i = 1; $i <= 12; $i++)
                                <option value="{{ $i }}"
                                    {{ $report_data['config']['monthInNumber'] == $i ? 'selected' : '' }}>
                                    {{ monthLocale($i) }}</option>
                            @endfor
                        </select>
                    </div>
                    <div class="col-4 col-md-3" style="margin-bottom: 10px;">
                        <label for="">&nbsp;</label>
                        <a href="javascript:window.location.href='{{ route('admin.dashboard.showroom_export') }}?'+$.param($('#selectdate-showroom').serializeArray());"
                            class="btn btn-success">Excel</a>
                    </div>
                </div>
            </form>
            <div class="table-responsive">
                <table class="table scroll-x-table table-bordered table-condensed datatable-ajax"
                    data-ajax-context="showroom" data-table-paging="false" data-table-sort="false"
                    data-search-source="#selectdate-showroom" data-table-method="POST" data-table-order="false"
                    data-ajax-url="{{ route('admin.dashboard.showroom_list') }}" width="100%">
                    <thead>
                        <tr>
                            <th rowspan="2" class="no-sort" style="vertical-align: middle">Aktivitas</th>
                            <th colspan="31" class="no-sort">Laporan Bulan {{ $report_data['config']['reportDate'] }}
                            </th>
                            <th rowspan="2" class="no-sort" style="vertical-align: middle">Total</th>
                        </tr>
                        <tr class="text-capitalize">
                            @for ($i = 1; $i <= 31; $i++)
                                <th class="no-sort">{{ $i }}</th>
                            @endfor
                        </tr>
                    </thead>
                    <tbody id="htmldata-showroom" class="text-capitalize"></tbody>
                </table>
            </div>
        </div>
    </div>
@endsection
@section('dashboard-product')
    @includeIf('admin.dashboard.widgets.summary', ['option' => $option_product])

    {{-- <div class="card card-success card-outline">
        <div class="card-header">
            <div class="h3 mb-2">Aktivitas Pengunjung</div>
        </div>

        <div class="card-body">
            <form action="{{ route('admin.dashboard') }}" class="mb-3 data-table-change" id="selectdate" method="get">
                <div class="row" style="">
                    <div class="form-group col-4 col-md-3" style="margin-bottom: 10px;">
                        <label id="year">Tahun</label>
                        <select name="year" id="year" class="form-control form-control-sm">
                            @for ($i = 2019; $i <= now()->year; $i++)
                                <option value="{{ $i }}"
                                    {{ $report_data['config']['yearInNumber'] == $i ? 'selected' : '' }}>
                                    {{ $i }}</option>
                            @endfor
                        </select>
                    </div>
                    <div class="col-4 col-md-3" style="margin-bottom: 10px;">
                        <label id="month">Bulan</label>
                        <select name="month" id="month" class="form-control form-control-sm">
                            @for ($i = 1; $i <= 12; $i++)
                                <option value="{{ $i }}"
                                    {{ $report_data['config']['monthInNumber'] == $i ? 'selected' : '' }}>
                                    {{ monthLocale($i) }}</option>
                            @endfor
                        </select>
                    </div>
                    <div class="col-4 col-md-3" style="margin-bottom: 10px;">
                        <label id="sum_by">Berdasarkan</label>
                        <select name="sum_by" id="sum_by" class="form-control form-control-sm">
                            <option value="poin">Poin</option>
                            <option value="qty">Kuantitas</option>
                        </select>
                    </div>
                    <div class="col-4 col-md-3" style="margin-bottom: 10px;">
                        <label id="month">Sales</label>
                        <select name="sales_id" id="sales_id" class="form-control form-control-sm">
                            <option value="">- Semua -</option>
                            @foreach (\App\Models\User::where('is_sales', 1)->pluck('name', 'id') as $id => $name)
                                <option value="{{ $id }}">{{$name}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </form>
            <div class="uwu">
                <table class="table scroll-x-table table-bordered table-condensed datatable-ajax" data-ajax-context="showroom"
                    data-table-paging="false" data-table-sort="false" data-search-source="#selectdate" data-table-method="POST"
                    data-table-order="false"
                    data-ajax-url="{{ route('admin.dashboard.activity_list') }}" width="100%">
                    <thead>
                        <tr>
                            <th rowspan="2" class="no-sort" style="vertical-align: middle">Aktivitas</th>
                            <th colspan="31" class="no-sort">Laporan Bulan {{ $report_data['config']['reportDate'] }}</th>
                            <th rowspan="2" class="no-sort" style="vertical-align: middle">Total</th>
                        </tr>
                        <tr class="text-capitalize">
                            @for ($i = 1; $i <= 31; $i++)
                                <th class="no-sort">{{ $i }}</th>
                            @endfor
                        </tr>
                    </thead>
                    <tbody id="htmldata" class="text-capitalize"></tbody>
                </table>
            </div>
        </div>
    </div> --}}
@endsection

@section('container')
    <div class="card col-12">
        <div class="card-header">
            <ul class="nav nav-pills ">
                <li class="nav-item"><a href="#sales" class="nav-link active" data-toggle="tab" role="button"
                        aria-expanded="false">Dashboard Sales</a></li>
                <li class="nav-item"><a href="#showroom" class="nav-link" data-toggle="tab" role="button"
                        aria-expanded="false">Dashboard Showroom</a></li>
                <li class="nav-item"><a href="#product" class="nav-link" data-toggle="tab" role="button"
                        aria-expanded="false">Dashboard Product</a></li>
            </ul>
        </div>
    </div>

    <div class="tab-content">
        <div class="tab-pane fade in active show" id="sales">
            @yield('dashboard-sales')
        </div>
        <div class="tab-pane fade" id="showroom">
            @yield('dashboard-showroom')
        </div>
        <div class="tab-pane fade" id="product">
            @yield('dashboard-product')
        </div>
    </div>

    {{-- @include('admin.dashboard.widgets.summary') --}}
    {{-- @include('admin.dashboard.widgets.user_chart') --}}
    {{-- @include('admin.dashboard.widgets.sales_performance') --}}
@endsection