@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