first initial

resources/views/back/report/transaction_dealer.blade.php

@@ -0,0 +1,144 @@
+@extends('layouts.backapp')
+
+@section('content')
+<div class="kt-portlet kt-portlet--mobile" id="kt_blockui_datatable">
+    <div class="kt-portlet__head kt-portlet__head--lg">
+        <div class="kt-portlet__head-label">
+            <span class="kt-portlet__head-icon">
+                <i class="kt-font-brand flaticon2-line-chart"></i>
+            </span>
+            <h3 class="kt-portlet__head-title">
+                Laporan Performa Dealer
+            </h3>
+        </div>
+        <div class="kt-portlet__head-toolbar">
+            <div class="kt-portlet__head-wrapper">
+                <div class="kt-portlet__head-actions mt-2 mb-2">
+                    <a href="{{ route('report.transaction.bulkclose') }}" id="bulk-close" class="btn btn-warning">Close Terpilih</a>
+                    <button id="export" class="btn btn-success">Export</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="kt-portlet__body">
+        <ul class="nav nav-tabs" role="tablist">
+            <li class="nav-item">
+                <a class="nav-link active" data-toggle="tab" href="#" data-target="#kt_tabs_1_1">Tabel</a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" data-toggle="tab" href="#kt_tabs_1_2">Diagram</a>
+            </li>
+        </ul>       
+
+        <div class="tab-content">
+            <div class="tab-pane active" id="kt_tabs_1_1" role="tabpanel">
+                <div class="table-responsive">
+                    <!--begin: Datatable -->
+                    <table class="table table-striped table-responsive table-bordered table-hover table-checkable" id="kt_table">
+                        <thead>
+                            <tr>
+                                {{-- <th><input type="checkbox" onclick="$('input[name*=\'selected\']').prop('checked', this.checked);" /></th> --}}
+                                <th rowspan="2">No</th>
+                                <th rowspan="2">SA</th>
+                                <th colspan="{{ $work_count }}" class="text-center">Pekerjaan</th>
+                            </tr>
+                            <tr>
+                                @foreach ($works as $work)
+                                    <th>{{ $work['name'] }}</th>
+                                @endforeach
+                            </tr>
+                        </thead>
+                        <tbody>
+                            @foreach ($trxs as $index => $transaction)
+                                <tr>
+                                    <td>{{ $index + 1 }}</td>
+                                    <td>{{ $transaction['sa_name'] }}</td>
+                                    @foreach ($transaction['works'] as $item)
+                                    <td>{{ $item['qty'] }}</td>
+                                    @endforeach
+                                </tr>
+                            @endforeach
+                        </tbody>
+                    </table>
+                    <!--end: Datatable -->
+                </div>
+            </div>
+            <div class="tab-pane" id="kt_tabs_1_2" role="tabpanel">
+                <div style="margin-top: 100px"><canvas id="sa-chart"></canvas></div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<input type="hidden" name="ajax_url" value="{{ route('report.transaction_sa') }}">
+@endsection
+
+@section('javascripts')
+<script>
+    $.ajaxSetup({
+    headers: {
+        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
+    }
+});
+
+    function random_rgba(alpha) {
+        var o = Math.round, r = Math.random, s = 255;
+        return 'rgba(' + o(r()*s) + ',' + o(r()*s) + ',' + o(r()*s) + ','+ alpha +')';
+    }
+
+    let labels = JSON.parse('{{ $sa_names }}'.replace(/(&quot\;)/g,"\""));
+    let labels2 = []
+    labels.forEach(function(label) {
+        if (/\s/.test(label)) {
+            labels2.push(label.split(" "))
+        }else{
+            labels2.push(label)
+        } 
+    })
+
+    const trx_data = JSON.parse('{{ $trx_data }}'.replace(/(&quot\;)/g,"\""));
+    let trxs = []
+    trx_data.forEach(trx => {
+        let data = {
+            label : trx['work_name'],
+            data: trx[['qty']],
+            fill: false,
+            backgroundColor: random_rgba(0.2),
+            borderColor: random_rgba(1),
+            borderWidth: 1
+        }
+        
+        trxs.push(data)
+    });
+    
+    const data = {
+        labels: labels2,
+        datasets: trxs
+    };
+
+    new Chart($("#sa-chart"), {
+        type: 'bar',
+        data: data,
+        options: {
+            indexAxis: 'y',
+            maintainAspectRatio: false, 
+            scales: {
+                xAxis: {
+                    position: 'top'
+                }
+            },
+            plugins: {
+                legend: {
+                    display: true,
+                    labels: {
+                        color: 'rgb(255, 99, 132)'
+                    },
+                    position: 'bottom'
+                }
+            }
+        }
+    });
+$('#kt_table').DataTable();
+</script>
+@endsection