@extends('layouts.master')

@section('title', 'Dashboard Dokumen')

@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-Loading"></i>
                            <div class="content">
                                <p class="text-muted mt-2 mb-0">Asset Proses</p>
                                <a href="{{ route('assets.index') }}?status=1">
                                    <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-Financial"></i>
                            <div class="content">
                                <p class="text-muted mt-2 mb-0">Asset Dipinjam</p>
                                <a href="{{ route('assets.index') }}?status=3">
                                    <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-Post-Sign-2-ways"></i>
                            <div class="content">
                                <p class="text-muted mt-2 mb-0">Asset belum ditemukan</p>
                                <a href="{{ route('assets.index') }}?status=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-Money-2"></i>
                            <div class="content">
                                <p class="text-muted mt-2 mb-0">Asset dijual</p>
                                <a href="{{ route('assets.index') }}?status=5">
                                    <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-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">{{ __('lang.totalasset') }}</p>
                                <a href="{{ route('assets.index') }}">
                                    <p class="text-primary text-18 line-height-1 mb-2 totalasset"></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-Building"></i>
                            <div class="content">
                                <p class="text-muted mt-2 mb-0">{{ __('lang.totalcompany') }}</p>
                                <a href="{{ route('companies.index') }}">
                                    <p class="text-primary text-18 line-height-1 mb-2 totalcompany"></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-Map-Marker"></i>
                            <div class="content">
                                <p class="text-muted mt-2 mb-0">{{ __('lang.totalcity') }}</p>
                                <a href="{{ route('locations.index') }}">
                                    <p class="text-primary text-18 line-height-1 mb-2 totalcity"></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-Big-Data"></i>
                            <div class="content">
                                <p class="text-muted mt-2 mb-0">{{ __('lang.luastanah') }}</p>
                                <a href="{{ route('assets.index') }}">
                                    <p class="text-primary text-18 line-height-1 mb-2 luastanah"></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.assetbycertificatetype') }}<h5>
                        </div>
                        <div class="content d-flex justify-content-center" style="height: 300px;">
                            <canvas id="assetbycertificatetype"></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.assetbystatus') }}<h5>
                        </div>
                        <div class="content d-flex justify-content-center" style="height: 400px;">
                            <canvas id="assetbystatus"></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.assetbyalashak') }}<h5>
                        </div>
                        <div class="content d-flex justify-content-center" style="height: 400px;">
                            <canvas id="assetbyalashak"></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">Asset Proses<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.assettag') }}</th>
                                            <th>{{ __('lang.name') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <th>{{ __('lang.assettag') }}</th>
                                            <th>{{ __('lang.name') }}</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 Dipinjam<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.assettag') }}</th>
                                            <th>{{ __('lang.name') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <th>{{ __('lang.assettag') }}</th>
                                            <th>{{ __('lang.name') }}</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">Asset belum ditemukan<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.assettag') }}</th>
                                            <th>{{ __('lang.name') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <th>{{ __('lang.assettag') }}</th>
                                            <th>{{ __('lang.name') }}</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 dijual<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.assettag') }}</th>
                                            <th>{{ __('lang.name') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <th>{{ __('lang.assettag') }}</th>
                                            <th>{{ __('lang.name') }}</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/recentasset') }}?status=1",
                columns: [{
                    data: 'assettag'
                }, {
                    data: 'name'
                }],
                dom: 'lfrtip',
            });

            $('#recentasset3').DataTable({
                bFilter: false,
                paging: false,
                bInfo: false,
                ajax: "{{ url('home/recentasset') }}?status=3",
                columns: [{
                    data: 'assettag'
                }, {
                    data: 'name'
                }],
                dom: 'lfrtip',
            });

            $('#recentasset2').DataTable({
                bFilter: false,
                paging: false,
                bInfo: false,
                ajax: "{{ url('home/recentasset') }}?status=2",
                columns: [{
                    data: 'assettag'
                }, {
                    data: 'name'
                }],
                dom: 'lfrtip',
            });

            $('#recentasset5').DataTable({
                bFilter: false,
                paging: false,
                bInfo: false,
                ajax: "{{ url('home/recentasset') }}?status=5",
                columns: [{
                    data: 'assettag'
                }, {
                    data: 'name'
                }],
                dom: 'lfrtip',
            });

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

            // asset by tipe sertifikat
            $.ajax({
                type: "GET",
                url: "{{ url('home/assetbycertificatetype') }}",
                dataType: "json",
                success: function(data) {
                    let certificatetype = [];
                    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) {
                        certificatetype.push(data[i].certificate_type);
                        amount.push(data[i].amount);
                        color.push(colors[i] ?? dynamicColors());
                    }

                    let databycertificatetype = document.getElementById("assetbycertificatetype");
                    let bycertificatetype = new Chart(databycertificatetype, {
                        type: 'doughnut',
                        data: {
                            labels: certificatetype,
                            datasets: [{
                                // label: "{{ __('lang.certificate_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 type
            $.ajax({
                type: "GET",
                url: "{{ url('home/assetbytype') }}",
                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
            $.ajax({
                type: "GET",
                url: "{{ url('home/assetbystatus') }}",
                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());

                        if (data[i].status == 1) {
                            $('.totalasset1').text(data[i].amount);
                        } else if (data[i].status == 3) {
                            $('.totalasset3').text(data[i].amount);
                        } else if (data[i].status == 2) {
                            $('.totalasset2').text(data[i].amount);
                        } else if (data[i].status == 5) {
                            $('.totalasset5').text(data[i].amount);
                        }
                    }

                    let databystatus = document.getElementById("assetbystatus");
                    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 alas hak
            $.ajax({
                type: "GET",
                url: "{{ url('home/assetbyalashak') }}",
                dataType: "json",
                success: function(data) {
                    let alashak = [];
                    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) {
                        alashak.push(data[i].name);
                        amount.push(data[i].amount);
                        color.push(colors[i] ?? dynamicColors());
                    }

                    let databyalashak = document.getElementById("assetbyalashak");
                    let byalashak = new Chart(databyalashak, {
                        type: 'doughnut',
                        data: {
                            labels: alashak,
                            datasets: [{
                                // label: "{{ __('lang.alashak') }}",
                                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]
                    });
                }
            });
        });

        // get total balance
        $.ajax({
            type: "GET",
            url: "{{ url('home/totalbalance') }}",
            dataType: "JSON",
            success: function(html) {
                $(".totalasset").html(html.totalasset);
                $(".totalcompany").html(html.totalcompany);
                $(".totalcity").html(html.totalcity);
                $(".totalemployee").html(html.totalemployee);
                $(".luastanah").html(html.luastanah);
                $(".jumlahsertifikatasli").html(html.jumlahsertifikatasli);
                $(".jumlahsertifikatfotocopy").html(html.jumlahsertifikatfotocopy);
            }
        });
    </script>

    {{-- <script>
        // Data untuk chart
        const data = {
            labels: ['Kategori A', 'Kategori B', 'Kategori C'],
            datasets: [{
                data: [30, 50, 20], // Data angka untuk masing-masing bagian
                backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'], // Warna
            }]
        };

        // Konfigurasi Pie Chart
        const config = {
            type: 'pie',
            data: data,
            options: {
                plugins: {
                    datalabels: {
                        color: '#fff', // Warna label
                        font: {
                            size: 14, // Ukuran font
                        },
                        formatter: (value, ctx) => {
                            return value; // Menampilkan angka langsung
                        }
                    }
                }
            },
            plugins: [ChartDataLabels], // Aktifkan plugin Data Labels
        };

        // Render Chart
        new Chart(document.getElementById('myPieChart'), config);
    </script> --}}
@endpush