@extends('layouts.backapp')
@section('styles')
<style>
    .kt-spinner--info {
        width: 100%;
        height: 100%;
    }
    .kt-spinner--info::before {
        width: 300px;
        height: 300px;
        top: 30%;left: 30%;
    }
</style>
@endsection
@section('content')
<div class="row">
    <div class="col-12">
        <div class="kt-portlet kt-portlet--mobile" id="kt_blockui_datatable">
            <div class="kt-portlet__head kt-portlet__head--lg row pt-4">
                <div class="col-6">
                    <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 Dealers
                        </h3>
                    </div>
                </div>
                <div class="col-6">
                    <form action="{{ route('dashboard') }}" method="get" class="row" style="display: flex; justify-content:right;">
                        <div class="col-lg-5 col-4">
                            <div class="form-group float-right" >
                                <label for="dealer">Dealer</label>
                                <select name="dealer" id="dealer" class="form-control">
                                    <option value="all" @if($dealer == 'all') selected @endif>Semua Dealer</option>
                                    @foreach ($dealers_data as $dealer_data)
                                    <option value="{{ $dealer_data->id }}" @if($dealer == $dealer_data->id) selected @endif>{{ $dealer_data->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-3 col-4">
                            <div class="form-group float-right" >
                                <label for="month">Bulan</label>
                                <select name="month" id="month" class="form-control">
                                    <option value="01" @if($month == '01') selected @endif>Januari</option>
                                    <option value="02" @if($month == '02') selected @endif>Februari</option>
                                    <option value="03" @if($month == '03') selected @endif>Maret</option>
                                    <option value="04" @if($month == '04') selected @endif>April</option>
                                    <option value="05" @if($month == '05') selected @endif>Mei</option>
                                    <option value="06" @if($month == '06') selected @endif>Juni</option>
                                    <option value="07" @if($month == '07') selected @endif>Juli</option>
                                    <option value="08" @if($month == '08') selected @endif>Agustus</option>
                                    <option value="09" @if($month == '09') selected @endif>September</option>
                                    <option value="10" @if($month == '10') selected @endif>Oktober</option>
                                    <option value="11" @if($month == '11') selected @endif>November</option>
                                    <option value="12" @if($month == '12') selected @endif>Desember</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-2 col-4">
                            <button class="btn btn-primary float-right">Cari</button>
                        </div>
                    </form>
                </div>
                {{-- <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 Dealers
                    </h3>
                </div>
                <div class="kt-portlet__head-toolbar">
                    <div class="kt-portlet__head-wrapper">
                        <div class="kt-portlet__head-actions mt-4">
                            <form action="{{ route('dashboard') }}" method="get">
                                    <div class="form-group">
                                        <label for="month">Bulan</label>
                                        <select name="month" id="month" class="form-control">
                                            <option value="01" @if($month == '01') selected @endif>Januari</option>
                                            <option value="02" @if($month == '02') selected @endif>Februari</option>
                                            <option value="03" @if($month == '03') selected @endif>Maret</option>
                                            <option value="04" @if($month == '04') selected @endif>April</option>
                                            <option value="05" @if($month == '05') selected @endif>Mei</option>
                                            <option value="06" @if($month == '06') selected @endif>Juni</option>
                                            <option value="07" @if($month == '07') selected @endif>Juli</option>
                                            <option value="08" @if($month == '08') selected @endif>Agustus</option>
                                            <option value="09" @if($month == '09') selected @endif>September</option>
                                            <option value="10" @if($month == '10') selected @endif>Oktober</option>
                                            <option value="11" @if($month == '11') selected @endif>November</option>
                                            <option value="12" @if($month == '12') selected @endif>Desember</option>
                                        </select>
                                    </div>
                                    <button class="btn btn-primary">Cari</button>
                            </form>
                        </div>
                    </div>
                </div> --}}
            </div>

            <div class="kt-portlet__body" id="data">
                {{-- <div id="spinner-data" style="height: 400px;" class="kt-spinner kt-spinner--info"></div> --}}
                <!--begin: Datatable -->
                <style>
                    .table-responsive {
                        height: 60vh;
                        overflow: auto;
                    }

                    .nav-link-tab {
                        font-weight: bold !important;
                    }

                    .nav-link-tab.active {
                        font-weight: normal !important;
                    }

                    .dataTables_wrapper .dataTable td, .dataTables_wrapper .dataTable th {
                        background: #fff;
                    }
                </style>

                <ul class="nav nav-tabs" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link nav-link-tab active btn-primary text-light" data-toggle="tab" href="#kt_tabs_1_2"><i class="flaticon2-pie-chart-4 text-light"></i> Diagram</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link nav-link-tab btn-primary text-light" data-toggle="tab" href="#" data-target="#kt_tabs_1_1"><i class="flaticon-squares-1 text-light"></i> Tabel</a>
                    </li>
                </ul>      
                <div class="tab-content">
                    <div class="tab-pane active" id="kt_tabs_1_2" role="tabpanel">
                        <div>
                            <canvas id="dealer-chart"></canvas>
                        </div>
                    </div>
                    <div class="tab-pane" id="kt_tabs_1_1" role="tabpanel">
                        <div class="table-responsive" id="table">
                            <table class="table" id="kt_table">
                                <thead>
                                    <tr>
                                        <th rowspan="2" style="width: 18%; z-index: 99;">Dealer</th>
                                        @if ($works)
                                        <th colspan="{{ count($works) }}" class="text-center">Pekerjaan</th>
                                        @endif
                                        <th rowspan="2" style="width: 18%; z-index: 99;">Aksi</th>
                                    </tr>
                                    @if ($works)
                                    <tr>
                                        @foreach ($works as $work)
                                            <th>{{ $work->name }}</th>
                                        @endforeach
                                    </tr>
                                    @endif
                                </thead>
                                <tbody> 
                                    
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <th style="background: #C5CEFF !important;">
                                            <p>Total Bulan Ini</p><hr>
                                            <p>Total Bulan Kemarin</p>
                                        </th>
                                        @foreach ($totals as $total)
                                        <th style="background: #C5CEFF !important;">
                                            <p>{{ $total['now'] }} @if($total['now'] > $total['prev']) <i class="ml-3 fa fa-caret-up text-success"></i> @else <i class="ml-3 fa fa-caret-down text-danger"></i> @endif</p><hr>
                                            <p>{{ $total['prev'] }}</p>    
                                        </th>
                                        @endforeach
                                        <th style="background: #C5CEFF !important;"></th>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('javascripts')
<script src="{{ url('js/pages/doublescroll.js') }}" type="text/javascript"></script>
<script>
    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 +')';
    }


    // var table = $("#kt_table").DataTable({
    //     paging: false,
    //     fixedColumns:   {
    //         left: 1,
    //         right: 1
    //     }
    // })

    const options = {
        indexAxis: 'y',
        maintainAspectRatio: false, 
        scales: {
            x: {
                position: 'top'
            }
        },
        plugins: {
            legend: {
                display: true,
                labels: {
                    color: 'rgb(255, 99, 132)'
                },
                position: 'top'
            }
        }
    }
    
    var chart = new Chart($("#dealer-chart"), {
        type: 'bar',
        data: {
            labels: [],
            datasets: []
        },
        plugins: [ChartDataLabels],
        options: options
    });

    $.ajax({
        url: '{{ route("get_dealer_has_transactions") }}',
        type: 'POST',
        data: {
            _token: '{{ csrf_token() }}',
            month: '{{ $month }}',
            dealer: '{{ $dealer }}'
        },
        success: function(res) {
            res.forEach(function(dealer, i) {
                $.ajax({
                    url: '{{ route("dealer_work_trx") }}',
                    type: 'POST',
                    data: {
                        '_token': '{{ csrf_token() }}',
                        'month' : '{{ $month }}',
                        'dealer_filter' : '{{ $dealer }}',
                        'dealer' : dealer.id
                    },
                    success: function(resWork) {
                        if (/\s/.test(dealer.name)) {
                            chart.data.labels.push(dealer.name.split(" "))
                            if(res.length == 1) {
                                chart.update()
                            }
                        }else{
                            chart.data.labels.push(dealer.name)
                            if(res.length == 1) {
                                chart.update()
                            }
                        }

                        let tds = `<td id="row-${dealer.id}">${dealer.name}</td>`;
                        
                        resWork.forEach(function(work, j) {
                            if(i == 0) {
                                $.when(addTrxData(work)).then(function() {
                                    chart.data.datasets[j].data.push(work.qty)
                                    if(res.length == 1) {
                                        chart.update()
                                    }
                                })
                            }else{
                                chart.data.datasets[j].data.push(work.qty)
                                if(res.length == 1) {
                                    chart.update()
                                }
                            }
                            
                            tds += `<td>${work.qty}</td>`
                        })
                        var url = '{{ route("dealer_recap", ":id") }}';
                        url = url.replace(':id', dealer.id);
        
                        $("#kt_table tbody").append(`
                            <tr>
                                ${tds}
                                <td><a href="${url}" class="btn btn-info btn-sm">Detail</a></td>
                            </tr>
                        `)
                    }
                }).done(function() {
                    if(res.length > 1) {
                        chart.update()
                    }
                })
                
                $("#dealer-chart").parent().height($("#dealer-chart").parent().height() + 650)
            })
        }
    }).done(function(res) {
        if(res.length == 0) {
            $("#dealer-chart").parent().append(`
                <div class="alert" role="alert">
                    <div class="alert-text">
                        <h4 class="alert-heading">Data Kosong!</h4>
                        <p>Belum ada data pekerjaan masuk untuk bulan  
                            @if($month == '01')
                                januari
                            @elseif($month == '02')
                                februari
                            @elseif($month == '03')
                                maret
                            @elseif($month == '04')
                                april
                            @elseif($month == '05')
                                mei
                            @elseif($month == '06')
                                juni
                            @elseif($month == '07')
                                juli
                            @elseif($month == '08')
                                agustus
                            @elseif($month == '09')
                                september
                            @elseif($month == '10')
                                oktober
                            @elseif($month == '11')
                                november
                            @elseif($month == '12')
                                desember
                            @endif
                        </p>
                        <hr>
                    </div>
                </div>
            `)
            $("#dealer-chart").parent().css('height', '100%')
            $("#dealer-chart").remove()
        }
    })

    function addTrxData(work) {
        let data = {
            label : work['work_name'],
            data: [],
            fill: false,
            backgroundColor: random_rgba(0.2),
            borderColor: random_rgba(1),
            borderWidth: 1,
            barPercentage: 0.5,
            categoryPercentage: 1
        }

        chart.data.datasets.push(data)
    }

    $(".nav-link-tab.active").removeClass('btn-primary')
    $(".nav-link-tab.active").removeClass('text-light')
    $(".nav-link-tab.active i").toggleClass('text-light')
    $(".nav-link-tab").parent().click(function() {
        $(".nav-link-tab").toggleClass('btn-primary')
        $(".nav-link-tab").toggleClass('text-light')
        $(".nav-link-tab i").toggleClass('text-light')
    })
</script>
@endsection