@extends('layouts.frontapp')
@section('styles')
<style>
    .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;
    }

    /* tr th:nth-child(1) {
        z-index: 99999;
    } */

</style>
@endsection
@section('content')
<div class="mobile-container">
    <div class="container">
        <div class="row mb-4 mt-4">
            <div class="col-4 my-auto">
                <a href="{{ route('transaction') }}" class="mt-4 btn btn-danger"><i class="fa fa-chevron-left"></i> Kembali</a>
            </div>
            <div class="col-8">
                {{-- <h5 class="text-center mt-4">Cipta Kreasi Baru</h5> --}}
                <a href=""><img src="{{ asset('logo-ckb.png') }}" style="width: 100%" alt="LOGO CKB"></a>
            </div>
        </div>
        
        <div class="kt-portlet kt-portlet--mobile" id="kt_blockui_datatable">
            <div class="kt-portlet__head">
                <h5 class="mt-4">Laporan Rekap</h5>
            </div>
            <div class="kt-portlet__body">
                <div class="row">
                    <div class="col-12">
                        <form action="{{ route('transaction.recap') }}" method="GET">
                            <div class="row">
                                <div class="col-5">
                                    <label>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 class="col-lg-5 col-12">
                                    <label for="year">Tahun</label>
                                    <input type="number" class="form-control" name="year" id="year" value="{{ $year }}">
                                </div>
                                <div class="col-2">
                                    <br>
                                    <button type="submit" class="btn btn-success mt-2 btn-block">Cari</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <p><button id="share" type="button" class="btn btn-info btn-block mt-4">Bagikan Data Bulan Ini</button></p>
                        <p class="result"></p>
                    </div>
                </div>
            </div>
        </div>

        <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">
                    <h3 class="kt-portlet__head-title">
                        Rekap per tanggal {{ $dealer->name }}
                    </h3>
                </div>
            </div>

            <div class="kt-portlet__body">
                <div class="row">
                    <div class="col-12">
                        <div class="table-responsive">
                            <!--begin: Datatable -->
                            <table class="table" id="kt_table_date">
                                <thead>
                                    <tr>
                                        <th rowspan="2" style="width: 18%; z-index: 99;">Tanggal</th>
                                        <th colspan="{{ $works_count }}" class="text-center">Pekerjaan</th>
                                    </tr>
                                    <tr>
                                        @foreach ($works as $work)
                                            <th>{{ $work->name }}</th>
                                        @endforeach
                                    </tr>
                                </thead>
                                <tbody> 
                                    @if (count($month_trxs))
                                    @foreach ($month_trxs as $trx)
                                    <tr>
                                        <td>{{ $trx['date'] }}</td>
                                        @foreach ($trx['works'] as $item)
                                        <td>{{ $item['qty'] }}</td>
                                        @endforeach
                                    </tr>
                                    @endforeach
                                    @else
                                    <tr>
                                        <td colspan="3" class="text-center">Tidak Ada Data</td>
                                    </tr>
                                    @endif
                                    {{-- <tr>
                                        <td>Pt B</td>
                                        <td>2</td>
                                        <td>9</td>
                                        <td>9</td>
                                        <td><a href="#" class="btn btn-info btn-sm">Detail</a></td>
                                    </tr> --}}
                                </tbody>
                                <tfoot style="background: rgba(93, 120, 255, .2) !important;">
                                    <tr>
                                        <th style="background: rgba(93, 120, 255, .2) !important;">
                                            <p>Total Bulan Ini</p><hr>
                                            <p>Total Bulan Kemarin</p>
                                        </th>
                                        @foreach ($totals as $total)
                                        <th style="background: rgba(93, 120, 255, .2) !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
                                    </tr>
                                </tfoot>
                            </table>
                            <!--end: Datatable -->
                        </div>
                    </div>
                </div> 
            </div>
        </div>
                
        <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">
                    <h3 class="kt-portlet__head-title">
                        Rekap per SA {{ $dealer->name }}
                    </h3>
                </div>
            </div>

            <div class="kt-portlet__body">
                <ul class="nav nav-tabs" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link nav-link-tab btn-primary text-light active" 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="sa-chart"></canvas></div>
                    </div>
                    <div class="tab-pane" id="kt_tabs_1_1" role="tabpanel">
                        <!--begin: Datatable -->
                        <div class="table-responsive">
                            <table class="table" id="kt_table_dealer">
                                <thead>
                                    <tr>
                                        <th rowspan="2" style="z-index: 99;">SA</th>
                                        <th colspan="{{ $works_count }}" class="text-center">Pekerjaan</th>
                                    </tr>
                                    <tr>
                                        @foreach ($works as $work)
                                            <th>{{ $work->name }}</th>
                                        @endforeach
                                    </tr>
                                </thead>
                                <tbody> 
                                    @if (count($trxs))
                                    @foreach ($trxs as $trx)
                                    <tr>
                                        <td>{{ $trx['sa_name'] }}</td>
                                        @foreach ($trx['works'] as $item)
                                        <td>{{ $item['qty'] }}</td>
                                        @endforeach
                                    </tr>
                                    @endforeach
                                    @else
                                        <tr>
                                            <td colspan="3" class="text-center">Tidak Ada Data</td>
                                        </tr>
                                    @endif
                                </tbody>
                            </table>
                        </div>
                        <!--end: Datatable -->
                        {{-- <div class="table-responsive">
                        </div> --}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<textarea id="shareThis" style="display: none;">
    @php
        $string = "\n*[Laporan SA ". $dealer->name ." ]*\n";
        $string .= "*[".$share['today_date']." ]*\n\n";
        $sum_today_trx = 0;

        foreach ($share['today_trxs'] as $trx) {
            $string .= $trx->name.":".$trx->qty;
            $sum_today_trx += $trx->qty;
        }

        $string .= "\n";
        $string .= "*TOTAL : ".$sum_today_trx." Unit*\n\n";
        $string .= "*[PERIODE 1 - ". $share['today_date'] ."]*\n\n";
        
        $sum_this_month_trx = 0;
        foreach ($share['this_month_trxs'] as $trx) {
            $string .= $trx->name ." : ". $trx->qty ." Unit\n";
            $sum_this_month_trx += $trx->qty;
        }
        $string .= "\n\n*TOTAL : ".$sum_this_month_trx." Unit*"
    @endphp
    
    {!! $string !!}
</textarea>

@endsection
@section('javascripts')
<script>
    const shareData = {
        title: 'Dealer',
        text: $("#shareThis").val().replaceAll("\\n", "\n")
    }

    const btn = $('#share');
    const resultPara = $('.result');
        // Share must be triggered by "user activation"
    btn.click(async function() {
        console.log($("#shareThis").val())
        try {
            await navigator.share(shareData)
            console.log('Dealer shared successfully')
        } catch(err) {
            console.log('Error: ' + err)
        }
    })

    $("#kt_table_date").DataTable({
        paging: false,
        // scrollY:        "true",
        // scrollX:        true,
        // scrollCollapse: true,
        fixedColumns:   {
            left: 1
        }
    })

    $("#kt_table_dealer").DataTable({
        paging: false,
        // scrollY:        "300px",
        // scrollX:        true,
        // scrollCollapse: true,
        fixedColumns:   {
            left: 1
        }
    })

    
    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
    };

    if(labels2.length && trxs.length) {
        new Chart($("#sa-chart"), {
            type: 'bar',
            data: data,
            plugins: [ChartDataLabels],
            options: {
                indexAxis: 'y',
                maintainAspectRatio: false,
                scales: {
                    x: {
                        position: 'top',
                    }
                },
                plugins: {
                    legend: {
                        display: true,
                        labels: {
                            color: 'rgb(255, 99, 132)'
                        },
                        position: 'top'
                    }
                }
            },
            
        });

        $("#sa-chart").parent().height($("#sa-chart").parent().height() + 500)
    }else{
        $("#sa-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</p>
                    <hr>
                </div>
            </div>
        `)
        $("#sa-chart").parent().css('height', '100%')
        $("#sa-chart").remove()
    }
    
    $(".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