@extends('layouts.master')

@section('title', 'Dashboard Asset Berjalan')

@push('css')
    @include('layouts.datatable_css')
    <style>
        .card-icon-bg .card-body .content {
            max-width: 150px;
        }
    </style>
@endpush

@section('content')
    <section class="">
        <div class="content p-4">
            <div class="row">
                <div class="col-lg-3 col-sm-6">
                    <div class="card card-icon-bg card-icon-bg-primary o-hidden mb-4">
                        <div class="card-body text-center">
                            <i class="i-Big-Data"></i>
                            <div class="content">
                                <p class="text-muted mt-2 mb-0">Total Semua</p>
                                <a href="{{ route('asset_current.index') }}">
                                    <p class="text-primary text-18 line-height-1 mb-2 totalasset1"></p>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-3 col-sm-6">
                    <div class="card card-icon-bg card-icon-bg-primary o-hidden mb-4">
                        <div class="card-body text-center">
                            <i class="i-Money-2"></i>
                            <div class="content">
                                <p class="text-muted mt-2 mb-0">Total Harga</p>
                                <a href="{{ route('asset_current.index') }}">
                                    <p class="text-primary text-18 line-height-1 mb-2 totalasset3"></p>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-3 col-sm-6">
                    <div class="card card-icon-bg card-icon-bg-primary o-hidden mb-4">
                        <div class="card-body text-center">
                            <i class="i-Warning-Window"></i>
                            <div class="content">
                                <p class="text-muted mt-2 mb-0">Total STNK Expired</p>
                                <a href="{{ route('asset_current.index') }}?status_stnk_id=2">
                                    <p class="text-primary text-18 line-height-1 mb-2 totalasset2"></p>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-3 col-sm-6">
                    <div class="card card-icon-bg card-icon-bg-primary o-hidden mb-4">
                        <div class="card-body text-center">
                            <i class="i-Warning-Window"></i>
                            <div class="content">
                                <p class="text-muted mt-2 mb-0">Total BPKB Expired</p>
                                <a href="{{ route('asset_current.index') }}?status_bpkb_id=2">
                                    <p class="text-primary text-18 line-height-1 mb-2 totalasset5"></p>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6 col-sm-6">
                    <div class="card mb-4">
                        <div class="header mt-3">
                            <h5 class="title text-center">{{ __('lang.assetbycompany') }}<h5>
                        </div>
                        <div class="content d-flex justify-content-center" style="height: 300px;">
                            <canvas id="assetbycompany"></canvas>
                        </div>
                    </div>
                </div>

                <div class="col-lg-6 col-sm-6">
                    <div class="card mb-4">
                        <div class="header mt-3">
                            <h5 class="title text-center">{{ __('lang.assetbytype') }}<h5>
                        </div>
                        <div class="content d-flex justify-content-center" style="height: 300px;">
                            <canvas id="assetbytype"></canvas>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-6 col-sm-6">
                    <div class="card mb-4">
                        <div class="header mt-3">
                            <h5 class="title text-center">{{ __('lang.assetbystatusstnk') }}<h5>
                        </div>
                        <div class="content d-flex justify-content-center" style="height: 400px;">
                            <canvas id="assetbystatusstnk"></canvas>
                        </div>
                    </div>
                </div>

                <div class="col-lg-6 col-sm-6">
                    <div class="card mb-4">
                        <div class="header mt-3">
                            <h5 class="title text-center">{{ __('lang.assetbystatusbpkb') }}<h5>
                        </div>
                        <div class="content d-flex justify-content-center" style="height: 400px;">
                            <canvas id="assetbystatusbpkb"></canvas>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <div class="card mb-4">
                        <div class="header mt-3">
                            <h5 class="title text-center">STNK Expired<h5>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table id="recentasset1" class="table table-striped" cellspacing="0" width="100%">
                                    <thead>
                                        <tr>
                                            <th>{{ __('lang.name') }}</th>
                                            <th>{{ __('lang.company') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <th>{{ __('lang.name') }}</th>
                                            <th>{{ __('lang.company') }}</th>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="card mb-4">
                        <div class="header mt-3">
                            <h5 class="title text-center">BPKB Expired<h5>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table id="recentasset3" class="table table-striped" cellspacing="0" width="100%">
                                    <thead>
                                        <tr>
                                            <th>{{ __('lang.name') }}</th>
                                            <th>{{ __('lang.company') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <th>{{ __('lang.name') }}</th>
                                            <th>{{ __('lang.company') }}</th>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <div class="card mb-4">
                        <div class="header mt-3">
                            <h5 class="title text-center">{{ __('lang.assetbycompany') }}<h5>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table id="recentasset2" class="table table-striped" cellspacing="0" width="100%">
                                    <thead>
                                        <tr>
                                            <th>{{ __('lang.name') }}</th>
                                            <th>{{ __('lang.amountofasset') }}</th>
                                            <th>{{ __('lang.price') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <th>{{ __('lang.name') }}</th>
                                            <th>{{ __('lang.amountofasset') }}</th>
                                            <th>{{ __('lang.price') }}</th>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="card mb-4">
                        <div class="header mt-3">
                            <h5 class="title text-center">Asset Harga Tertinggi<h5>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table id="recentasset5" class="table table-striped" cellspacing="0" width="100%">
                                    <thead>
                                        <tr>
                                            <th>{{ __('lang.name') }}</th>
                                            <th>{{ __('lang.price') }}</th>
                                            <th>{{ __('lang.company') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <th>{{ __('lang.name') }}</th>
                                            <th>{{ __('lang.price') }}</th>
                                            <th>{{ __('lang.company') }}</th>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('js')
    <script src="{{ asset('plugin/chartjs/chart.js') }}"></script>
    <script src="{{ asset('plugin/chartjs/chartjs-plugin-datalabels.js') }}"></script>
    @include('layouts.datatable_js')
@endpush

@push('scripts')
    <script>
        $(document).ready(function() {
            $('#recentasset1').DataTable({
                bFilter: false,
                paging: false,
                bInfo: false,
                ajax: "{{ url('home/stnkexpired') }}",
                columns: [{
                    data: 'name'
                }, {
                    data: 'company_name'
                }],
                dom: 'lfrtip',
            });

            $('#recentasset3').DataTable({
                bFilter: false,
                paging: false,
                bInfo: false,
                ajax: "{{ url('home/bpkbexpired') }}",
                columns: [{
                    data: 'name'
                }, {
                    data: 'company_name'
                }],
                dom: 'lfrtip',
            });

            $('#recentasset2').DataTable({
                bFilter: false,
                paging: false,
                bInfo: false,
                ajax: "{{ url('home/recentassetcurrentbycompany') }}",
                columns: [{
                    data: 'name'
                }, {
                    data: 'amount'
                }, {
                    data: 'price'
                }],
                dom: 'lfrtip',
            });

            $('#recentasset5').DataTable({
                bFilter: false,
                paging: false,
                bInfo: false,
                ajax: "{{ url('home/recentassetcurrentbyprice') }}",
                columns: [{
                    data: 'name'
                }, {
                    data: 'price'
                }, {
                    data: 'company_name'
                }],
                dom: 'lfrtip',
            });

            let colors = [
                '#213555',
                '#3E5879',
                '#D8C4B6',
                '#F5EFE7',
                '#4C585B',
                '#7E99A3',
                '#A5BFCC',
                '#F4EDD3',
                '#65647C',
                '#8B7E74',
                '#C7BCA1',
                '#F1D3B3',
            ];

            // get asset current stat
            $.ajax({
                type: "GET",
                url: "{{ url('home/assetcurrentstat') }}",
                dataType: "JSON",
                success: function(html) {
                    $(".totalasset1").text(html.asset_current_count);
                    $(".totalasset3").text(html.asset_current_price);
                    $(".totalasset2").text(html.stnk_expired);
                    $(".totalasset5").text(html.bpkb_expired);
                    // $(".totalcompany").html(html.totalcompany);
                    // $(".totalcity").html(html.totalcity);
                    // $(".totalemployee").html(html.totalemployee);
                    // $(".luastanah").html(html.luastanah);
                    // $(".jumlahsertifikatasli").html(html.jumlahsertifikatasli);
                    // $(".jumlahsertifikatfotocopy").html(html.jumlahsertifikatfotocopy);
                }
            });

            // get asset current type
            $.ajax({
                type: "GET",
                url: "{{ url('home/assetcurrenttypestat') }}",
                dataType: "JSON",
                success: function(data) {
                    let box_type = document.getElementById("box_type");
                    let html = '';
                    for (let i in data) {
                        html += `
                            <div class="col-lg-3 col-sm-6">
                                <div class="card color-white" style="background-color: ${colors[i]}">
                                    <div class="content">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="numbers">
                                                    <p class="fs-13">Tipe ${data[i].type}</p>
                                                    <span class="totalhead">${data[i].amount}</span>
                                                    <div class="totalhead">${data[i].price}</div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="footer">
                                            <hr>
                                            <div class="stats">
                                                <i class="fa fa-angle-double-right color-white"></i>
                                                <span class="color-white">
                                                    <a class="color-white" href="{{ route('asset_current.index') }}?typeid=${data[i].id}">{{ __('lang.moreinfo') }}</a>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        `;
                    }
                    box_type.innerHTML = html;
                }
            });

            // asset by company
            $.ajax({
                type: "GET",
                url: "{{ url('home/assetcurrentbycompany') }}",
                dataType: "json",
                success: function(data) {
                    let company = [];
                    let amount = [];
                    let color = [];

                    let dynamicColors = function() {
                        let r = Math.floor(Math.random() * 255);
                        let g = Math.floor(Math.random() * 255);
                        let b = Math.floor(Math.random() * 255);
                        return "rgb(" + r + "," + g + "," + b + ")";
                    };

                    for (let i in data) {
                        company.push(data[i].name);
                        amount.push(data[i].amount);
                        color.push(colors[i] ?? dynamicColors());
                    }

                    let databycompany = document.getElementById("assetbycompany");
                    let bycompany = new Chart(databycompany, {
                        type: 'doughnut',
                        data: {
                            labels: company,
                            datasets: [{
                                // label: "{{ __('lang.company') }}",
                                data: amount,
                                backgroundColor: color,
                                borderWidth: 1
                            }]
                        },
                        options: {
                            plugins: {
                                legend: {
                                    position: 'bottom',
                                },
                                datalabels: {
                                    color: '#fff',
                                    labels: {
                                        title: {
                                            font: {
                                                size: 12
                                            }
                                        }
                                    },
                                    formatter: (value, ctx) => {
                                        return value;
                                    }
                                }
                            },
                        },
                        plugins: [ChartDataLabels]
                    });
                }
            });

            // asset by type
            $.ajax({
                type: "GET",
                url: "{{ url('home/assetcurrentbytype') }}",
                dataType: "json",
                success: function(data) {
                    let type = [];
                    let amount = [];
                    let color = [];

                    let dynamicColors = function() {
                        let r = Math.floor(Math.random() * 255);
                        let g = Math.floor(Math.random() * 255);
                        let b = Math.floor(Math.random() * 255);
                        return "rgb(" + r + "," + g + "," + b + ")";
                    };

                    for (let i in data) {
                        type.push(data[i].type);
                        amount.push(data[i].amount);
                        color.push(colors[i] ?? dynamicColors());
                    }

                    let databytype = document.getElementById("assetbytype");
                    let bytype = new Chart(databytype, {
                        type: 'doughnut',
                        data: {
                            labels: type,
                            datasets: [{
                                // label: "{{ __('lang.type') }}",
                                data: amount,
                                backgroundColor: color,
                                borderWidth: 1
                            }]
                        },
                        options: {
                            plugins: {
                                legend: {
                                    position: 'bottom',
                                },
                                datalabels: {
                                    color: '#fff',
                                    labels: {
                                        title: {
                                            font: {
                                                size: 12
                                            }
                                        }
                                    },
                                    formatter: (value, ctx) => {
                                        return value;
                                    }
                                }
                            }
                        },
                        plugins: [ChartDataLabels]
                    });
                }
            });

            // asset by status stnk
            $.ajax({
                type: "GET",
                url: "{{ url('home/assetcurrentbystatusstnk') }}",
                dataType: "json",
                success: function(data) {
                    let status = [];
                    let amount = [];
                    let color = [];
                    let statusdata = [];

                    let dynamicColors = function() {
                        let r = Math.floor(Math.random() * 255);
                        let g = Math.floor(Math.random() * 255);
                        let b = Math.floor(Math.random() * 255);
                        return "rgb(" + r + "," + g + "," + b + ")";
                    };

                    for (let i in data) {
                        status.push(data[i].status_name);
                        amount.push(data[i].amount);
                        color.push(colors[i] ?? dynamicColors());
                    }

                    let databystatus = document.getElementById("assetbystatusstnk");
                    let bystatus = new Chart(databystatus, {
                        type: 'doughnut',
                        data: {
                            labels: status,
                            datasets: [{
                                // label: "{{ __('lang.status') }}",
                                data: amount,
                                backgroundColor: color,
                                borderWidth: 1
                            }]
                        },
                        options: {
                            plugins: {
                                legend: {
                                    position: 'bottom',
                                },
                                datalabels: {
                                    color: '#fff',
                                    labels: {
                                        title: {
                                            font: {
                                                size: 12
                                            }
                                        }
                                    },
                                    formatter: (value, ctx) => {
                                        return value;
                                    }
                                }
                            }
                        },
                        plugins: [ChartDataLabels]
                    });
                }
            });

            // asset by status bpkb
            $.ajax({
                type: "GET",
                url: "{{ url('home/assetcurrentbystatusbpkb') }}",
                dataType: "json",
                success: function(data) {
                    let status = [];
                    let amount = [];
                    let color = [];
                    let statusdata = [];

                    let dynamicColors = function() {
                        let r = Math.floor(Math.random() * 255);
                        let g = Math.floor(Math.random() * 255);
                        let b = Math.floor(Math.random() * 255);
                        return "rgb(" + r + "," + g + "," + b + ")";
                    };

                    for (let i in data) {
                        status.push(data[i].status_name);
                        amount.push(data[i].amount);
                        color.push(colors[i] ?? dynamicColors());
                    }

                    let databystatus = document.getElementById("assetbystatusbpkb");
                    let bystatus = new Chart(databystatus, {
                        type: 'doughnut',
                        data: {
                            labels: status,
                            datasets: [{
                                // label: "{{ __('lang.status') }}",
                                data: amount,
                                backgroundColor: color,
                                borderWidth: 1
                            }]
                        },
                        options: {
                            plugins: {
                                legend: {
                                    position: 'bottom',
                                },
                                datalabels: {
                                    color: '#fff',
                                    labels: {
                                        title: {
                                            font: {
                                                size: 12
                                            }
                                        }
                                    },
                                    formatter: (value, ctx) => {
                                        return value;
                                    }
                                }
                            }
                        },
                        plugins: [ChartDataLabels]
                    });
                }
            });
        });
    </script>
@endpush