@extends('layouts.backend.index')
@section('title', $label)

@section('content')
    <div class="card">
        <div class="card-body">
            <x-section-header action="list" :icon="$icon" :label="$label" />

            <form method="get">
                <div class="row mt-4">
                    <div class="col-sm-6 col-md-2">
                        <x-form.date-picker id="year" name='year' label="Tahun" picker-type="year" :old="$year" />
                    </div>


                </div>

                <button type="submit" id="btn-search" class="btn btn-dark btn-sm">
                    <i class="mdi mdi-magnify"></i> &nbsp;SEARCH
                </button>
            </form>
            <hr />
            <div class="row">
                <div class="col-sm-6 col-md-4 stretch-card grid-margin">
                    <div class="card bg-primary card-img-holder text-white" id="counter-salary">
                        <div class="card-body p-3" style="cursor: pointer;">
                            <img src="{{ asset('images/circle.svg') }}" class="card-img-absolute" alt="circle-image">
                            <h4 class="font-weight-normal mb-3">
                                <i class="mdi mdi-cash card-icon float-right"></i>
                                <b>Jumlah Gaji</b>
                            </h4>
                            <h2 class="counter-number counters" data-from="0" data-to="{{ $counts['total_gaji'] }}"
                                data-number="{{ $counts['total_gaji'] }}">
                                {{ number_format($counts['total_gaji'], 0, ',', '.') }}</h2>

                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-md-4 stretch-card grid-margin">
                    <div class="card bg-warning card-img-holder text-white" id="counter-overtime">
                        <div class="card-body p-3" style="cursor: pointer;">
                            <img src="{{ asset('images/circle.svg') }}" class="card-img-absolute" alt="circle-image">
                            <h4 class="font-weight-normal mb-3">
                                <i class="mdi mdi-clock-time-eight card-icon float-right"></i>
                                <b>Jumlah Lembur</b>
                            </h4>
                            <h2 class="counter-number counters" data-from="0" data-to="{{ $counts['total_lembur'] }}"
                                data-number="{{ $counts['total_lembur'] }}">
                                {{ number_format($counts['total_lembur'], 0, ',', '.') }}</h2>

                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-md-4 stretch-card grid-margin">
                    <div class="card bg-info card-img-holder text-white" id="counter-meals">
                        <div class="card-body p-3" style="cursor: pointer;">
                            <img src="{{ asset('images/circle.svg') }}" class="card-img-absolute" alt="circle-image">
                            <h4 class="font-weight-normal mb-3">
                                <i class="mdi mdi-coffee card-icon float-right"></i>
                                <b>Uang Makan</b>
                            </h4>
                            <h2 class="counter-number counters" data-from="0" data-to="{{ $counts['total_makan'] }}"
                                data-number="{{ $counts['total_makan'] }}">
                                {{ number_format($counts['total_makan'], 0, ',', '.') }}</h2>

                        </div>
                    </div>
                </div>
            </div>


            <div class="clearfix mb-1">

                <h5>
                    <b>Grafik Total Payroll</b> &nbsp;|&nbsp; Tahun <span
                        id="chart-payroll-year">{{ $year }}</span><br>
                </h5>
            </div>

            <div class="text-center mt-5" id="chart-payroll-loading" style="height: 25px;">
                <img src="{{ asset('images/loading.gif') }}" style="height: 50px;">
            </div>
            <canvas id="chart-payroll" height="96"></canvas>

            <div class="table-responsive mt-3">
                <table class="table table-striped" id="table-payroll">
                    <thead>
                        <tr>
                            <th class="text-center" style="width: 50px;">No</th>
                            <th>Bulan</th>
                            <th>Total Gaji</th>
                            <th>Total Gaji Lembur</th>
                            <th>Total Uang Makan</th>
                            <th>Total Potongan</th>
                            <th>Total</th>
                            <th style="width: 10px;">#</th>

                        </tr>
                    </thead>
                    <tbody>
                        @for ($i = 1; $i <= 12; $i++)
                        <tr>
                            <td>{{ $i }}</td>
                            <td>{{ Common::monthFormat($i) }}</td>
                            <td>{{ number_format(@$payroll[$i]['total_salary']??0, 0, ',', '.') }}</td>
                            <td>{{ number_format(@$payroll[$i]['total_salary_overtime']??0, 0, ',', '.') }}</td>
                            <td>{{ number_format(@$payroll[$i]['total_allowance_meal']??0, 0, ',', '.') }}</td>
                            <td>{{ number_format(@$payroll[$i]['total_salary_cuts']??0, 0, ',', '.') }}</td>
                            <td>{{ number_format(@$payroll[$i]['total']??0, 0, ',', '.') }}</td>
                            <td><a href="#" class="btn btn-dark btn-xs set-tooltip mb-1 mr-1" title="Detail">
                                <i class="mdi mdi-magnify"></i></td>
                        </tr>
                        @endfor

                    </tbody>
                </table>
            </div>
            <hr />

            <div class="clearfix mb-1 mt-3">

                <h5>
                    <b>Grafik Total Lembur</b> &nbsp;|&nbsp; Tahun <span
                        id="chart-overtime-year">{{ $year }}</span><br>
                </h5>
            </div>

            <div class="text-center mt-5" id="chart-overtime-loading" style="height: 25px;">
                <img src="{{ asset('images/loading.gif') }}" style="height: 50px;">
            </div>
            <canvas id="chart-overtime" height="96"></canvas>
            <div class="table-responsive mt-3">
                <table class="table table-striped" id="table-overtimve">
                    <thead>
                        <tr>
                            <th class="text-center" style="width: 50px;">No</th>
                            <th>Bulan</th>
                            <th>Jam Lembur</th>
                            <th>Rata2 Lembur</th>
                            <th>Total Lembur</th>
                            <th style="width: 10px;">#</th>

                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($lembur as $key => $item)
                            <tr>
                                <td>{{ $key + 1 }}</td>
                                <td>{{ $item['month'] }}</td>
                                <td>{{ number_format($item['overtime'],0,',','.') }} Jam</td>
                                <td>{{ $item['employee'] }}</td>
                                <td>{{ number_format($item['salary_overtime'],0,',','.') }}</td>
                                <td><a href="#" class="btn btn-dark btn-xs set-tooltip mb-1 mr-1" title="Detail">
                                    <i class="mdi mdi-magnify"></i></td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>

@endsection

@push('scripts')
    <script src="{{ asset('vendor/chartjs/Chart.bundle.min.js') }}"></script>
    <script src="{{ asset('js/jquery-countTo.js') }}"></script>

    <script>
        const ctx_payroll = $("#chart-payroll").get(0).getContext("2d")
        const ctx_overtime = $("#chart-overtime").get(0).getContext("2d")
        $(document).ready(function() {
            $("#chart-payroll-loading").hide()
            $("#chart-overtime-loading").hide()
            let chart_payroll = new Chart(ctx_payroll, {
                type: 'line',
                data: {
                    labels: {!!json_encode($chart['month'])!!},
                    datasets: [{
                            label: 'Payroll',
                            data: {!!json_encode($chart['payroll'])!!},
                            backgroundColor: 'rgb(48, 142, 224, 0.3)',
                            borderColor: 'rgb(48, 142, 224)',
                            borderWidth: 2,
                            fill: false,
                            pointBackgroundColor: 'rgb(48, 142, 224)'
                        },

                    ]
                },
                options: {
                    scales: {
                        yAxes: [{
                            gridLines: {
                                drawBorder: false,
                                zeroLineColor: "rgba(235,237,242,1)"
                            },
                            ticks: {
                                callback: function(value, index, values) {
                                    if (value < 100000)
                                        var money = moneyFormat(value)
                                    else if (value < 1000000) {
                                        var sum = parseFloat(value) / 1000
                                        var money = moneyFormat(sum) + "rb"
                                    } else {
                                        var sum = parseFloat(value) / 1000000
                                        var money = moneyFormat(sum) + "jt"
                                    }

                                    return money;
                                }
                            }
                        }],
                        xAxes: [{
                            gridLines: {
                                display: false,
                                drawBorder: false
                            },
                            ticks: {
                                padding: 5,
                                autoSkip: true,
                            }
                        }]
                    },
                    legend: {
                        display: false
                    },
                    tooltips: {
                        callbacks: {
                            label: function(tooltipItem, data) {
                                var label = data.datasets[tooltipItem.datasetIndex]
                                    .label || ""

                                return " " + label + " : " + Number(tooltipItem.yLabel)
                                    .toFixed(0).replace(/./g, function(c, i, a) {
                                        return i > 0 && c !== "." && (a.length -
                                            i) % 3 === 0 ? "." + c : c;
                                    });
                            }
                        }
                    }
                }
            })

            let chart_overtime = new Chart(ctx_overtime, {
                type: 'line',
                data: {
                    labels: {!!json_encode($chart['month'])!!},
                    datasets: [{
                            label: 'Lembur',
                            data: {!!json_encode($chart['overtime'])!!},
                            backgroundColor: 'rgb(48, 142, 224, 0.3)',
                            borderColor: 'rgb(48, 142, 224)',
                            borderWidth: 2,
                            fill: false,
                            pointBackgroundColor: 'rgb(48, 142, 224)'
                        },

                    ]
                },
                options: {
                    scales: {
                        yAxes: [{
                            gridLines: {
                                drawBorder: false,
                                zeroLineColor: "rgba(235,237,242,1)"
                            },
                            ticks: {
                                callback: function(value, index, values) {
                                    if (value < 100000)
                                        var money = moneyFormat(value)
                                    else if (value < 1000000) {
                                        var sum = parseFloat(value) / 1000
                                        var money = moneyFormat(sum) + "rb"
                                    } else {
                                        var sum = parseFloat(value) / 1000000
                                        var money = moneyFormat(sum) + "jt"
                                    }

                                    return money;
                                }
                            }
                        }],
                        xAxes: [{
                            gridLines: {
                                display: false,
                                drawBorder: false
                            },
                            ticks: {
                                padding: 5,
                                autoSkip: true,
                            }
                        }]
                    },
                    legend: {
                        display: false
                    },
                    tooltips: {
                        callbacks: {
                            label: function(tooltipItem, data) {
                                var label = data.datasets[tooltipItem.datasetIndex]
                                    .label || ""

                                return " " + label + " : " + Number(tooltipItem.yLabel)
                                    .toFixed(0).replace(/./g, function(c, i, a) {
                                        return i > 0 && c !== "." && (a.length -
                                            i) % 3 === 0 ? "." + c : c;
                                    });
                            }
                        }
                    }
                }
            })
        });
    </script>
@endpush