@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="container-fluid py-4">
        <div class="row mt-4">
            <div class="col-12">
                <div class="card bg-white border-0">
                    <div class="card-body p-4">
                        <div class="row align-items-center">
                            <div class="col-lg-6">
                                <h5 class="text-dark mb-1">
                                    Dashboard {{ session('nama_perusahaan') ?? 'Nama Perusahaan' }}
                                </h5>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row mt-4">
            <div class="mb-lg-0 mb-4">
                <div class="card z-index-2 h-100">
                    <div class="card-header pb-0 pt-3 bg-transparent">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="text-capitalize mb-1">Cashflow Perusahaan</h6>
                                <p class="text-sm mb-0">Arus kas masuk dan keluar per bulan.</p>
                            </div>
                            <div class="d-flex align-items-center gap-3">
                                <div class="d-flex align-items-center">
                                    <span class="badge badge-sm bg-gradient-primary me-2">&nbsp;</span>
                                    <span class="text-xs text-muted">Kas masuk</span>
                                </div>
                                <div class="d-flex align-items-center">
                                    <span class="badge badge-sm bg-danger me-2">&nbsp;</span>
                                    <span class="text-xs text-muted">Kas keluar</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-body p-3">
                        <div class="chart">
                            <canvas id="chart-line" class="chart-canvas" height="300"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>  
        <div class="row mt-4">
            <div class="col-lg-7 mb-lg-0 mb-4">
                <div class="card h-100">
                    <div class="card-header pb-0 p-3">
                        <div class="d-flex justify-content-between align-items-start">
                            <div>
                                <h6 class="mb-0">Profit &amp; Loss</h6>
                                <p class="text-sm mb-0">Pergerakan laba dan rugi perusahaan.</p>
                            </div>
                            <div class="ms-3">
                                <select id="profit-loss-range" class="form-select form-select-sm" style="padding-right: 2rem;">
                                    <option value="1">1 bulan</option>
                                    <option value="3">3 bulan</option>
                                    <option value="6">6 bulan</option>
                                    <option value="12" selected>1 tahun</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="card-body p-3">
                        <div class="chart">
                            <canvas id="chart-profit-loss" class="chart-canvas" height="260"></canvas>
                        </div>
                        <div class="d-flex align-items-center gap-3 mt-3">
                            <div class="d-flex align-items-center">
                                <span class="badge badge-sm bg-gradient-primary me-2">&nbsp;</span>
                                <span class="text-xs text-muted">Profit</span>
                            </div>
                            <div class="d-flex align-items-center">
                                <span class="badge badge-sm bg-dark me-2">&nbsp;</span>
                                <span class="text-xs text-muted">Loss</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-5">
                <div class="card h-100">
                    <div class="card-header pb-0 p-3">
                        <div class="d-flex justify-content-between align-items-start">
                            <div>
                                <h6 class="mb-0">Top Expense COA</h6>
                                <p class="text-sm mb-0">Komposisi beban terbesar perusahaan</p>
                            </div>
                            <div class="ms-3">
                                <select id="top-expense-range" class="form-select form-select-sm" style="padding-right: 2rem;">
                                    <option value="1">1 bulan</option>
                                    <option value="3">3 bulan</option>
                                    <option value="6">6 bulan</option>
                                    <option value="12" selected>1 tahun</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="card-body p-3">
                        <div class="chart">
                            <canvas id="chart-top-expense" class="chart-canvas" height="260"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script src="./assets/js/plugins/chartjs.min.js"></script>
    <script>
        var ctx1 = document.getElementById("chart-line").getContext("2d");

        var chartLabels = @json($dashboard['cashflow_labels'] ?? []);
        var chartIn = @json($dashboard['cashflow_in'] ?? []);
        var chartOut = @json($dashboard['cashflow_out'] ?? []);
        var profitLossRanges = @json($dashboard['profit_loss'] ?? []);
        var topExpenseRanges = @json($dashboard['top_expenses'] ?? []);

        var gradientStroke1 = ctx1.createLinearGradient(0, 230, 0, 50);
        var gradientStroke2 = ctx1.createLinearGradient(0, 230, 0, 50);

        gradientStroke1.addColorStop(1, 'rgba(2, 130, 132, 0.2)');
        gradientStroke1.addColorStop(0.2, 'rgba(2, 130, 132, 0.0)');
        gradientStroke1.addColorStop(0, 'rgba(2, 130, 132, 0)');

        gradientStroke2.addColorStop(1, 'rgba(245, 54, 92, 0.2)');
        gradientStroke2.addColorStop(0.2, 'rgba(245, 54, 92, 0.0)');
        gradientStroke2.addColorStop(0, 'rgba(245, 54, 92, 0)');
        new Chart(ctx1, {
            type: "line",
            data: {
                labels: chartLabels,
                datasets: [{
                    label: "Kas masuk",
                    tension: 0.4,
                    borderWidth: 0,
                    pointRadius: 0,
                    borderColor: "#028284",
                    backgroundColor: gradientStroke1,
                    borderWidth: 3,
                    fill: true,
                    data: chartIn,
                    maxBarThickness: 6

                }, {
                    label: "Kas keluar",
                    tension: 0.4,
                    borderWidth: 0,
                    pointRadius: 0,
                    borderColor: "#f5365c",
                    backgroundColor: gradientStroke2,
                    borderWidth: 3,
                    fill: true,
                    data: chartOut,
                    maxBarThickness: 6
                }],
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false,
                    }
                },
                interaction: {
                    intersect: false,
                    mode: 'index',
                },
                scales: {
                    y: {
                        grid: {
                            drawBorder: false,
                            display: true,
                            drawOnChartArea: true,
                            drawTicks: false,
                            borderDash: [5, 5]
                        },
                        ticks: {
                            display: true,
                            padding: 10,
                            color: '#8898aa',
                            font: {
                                size: 11,
                                family: "Open Sans",
                                style: 'normal',
                                lineHeight: 2
                            },
                        }
                    },
                    x: {
                        grid: {
                            drawBorder: false,
                            display: false,
                            drawOnChartArea: false,
                            drawTicks: false,
                            borderDash: [5, 5]
                        },
                        ticks: {
                            display: true,
                            color: '#8898aa',
                            padding: 20,
                            font: {
                                size: 11,
                                family: "Open Sans",
                                style: 'normal',
                                lineHeight: 2
                            },
                        }
                    },
                },
            },
        });

        var profitLossSelect = document.getElementById("profit-loss-range");
        var topExpenseSelect = document.getElementById("top-expense-range");
        var profitLossCtx = document.getElementById("chart-profit-loss").getContext("2d");
        var topExpenseCtx = document.getElementById("chart-top-expense").getContext("2d");

        function resolveColor(value, fallback) {
            var color = value ? value.trim() : "";
            return color.length ? color : fallback;
        }

        function toRgba(color, alpha) {
            if (color.indexOf("rgb") === 0) {
                return color.replace("rgb", "rgba").replace(")", ", " + alpha + ")");
            }

            if (color.charAt(0) === "#") {
                var hex = color.replace("#", "");
                if (hex.length === 3) {
                    hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
                }
                var r = parseInt(hex.substring(0, 2), 16);
                var g = parseInt(hex.substring(2, 4), 16);
                var b = parseInt(hex.substring(4, 6), 16);
                return "rgba(" + r + ", " + g + ", " + b + ", " + alpha + ")";
            }

            return color;
        }

        var rootStyles = getComputedStyle(document.documentElement);
        var primaryColor = resolveColor(rootStyles.getPropertyValue("--bs-primary"), "#028284");
        var darkColor = resolveColor(rootStyles.getPropertyValue("--bs-dark"), "#172b4d");
        var dangerColor = resolveColor(rootStyles.getPropertyValue("--bs-danger"), primaryColor);
        var warningColor = resolveColor(rootStyles.getPropertyValue("--bs-warning"), darkColor);
        var successColor = resolveColor(rootStyles.getPropertyValue("--bs-success"), primaryColor);
        var infoColor = resolveColor(rootStyles.getPropertyValue("--bs-info"), darkColor);

        function getRangeData(source, range) {
            return source && source[range] ? source[range] : { labels: [], values: [] };
        }

        function buildDonutColors(count) {
            var palette = [
                toRgba(dangerColor, 0.85),
                toRgba(warningColor, 0.85),
                toRgba(primaryColor, 0.85),
                toRgba(infoColor, 0.85),
                toRgba(successColor, 0.85),
                toRgba(darkColor, 0.85)
            ];
            var colors = [];
            for (var i = 0; i < count; i++) {
                colors.push(palette[i % palette.length]);
            }
            return colors;
        }

        var profitRange = profitLossSelect ? profitLossSelect.value : "12";
        var profitSeries = getRangeData(profitLossRanges, profitRange);

        var profitLossChart = new Chart(profitLossCtx, {
            type: "bar",
            data: {
                labels: profitSeries.labels,
                datasets: [{
                    label: "Laba / Rugi",
                    borderWidth: 1,
                    borderColor: function (context) {
                        var value = context.raw || 0;
                        return value >= 0 ? primaryColor : darkColor;
                    },
                    backgroundColor: function (context) {
                        var value = context.raw || 0;
                        return value >= 0 ? toRgba(primaryColor, 0.7) : toRgba(darkColor, 0.7);
                    },
                    borderRadius: 4,
                    borderSkipped: false,
                    data: profitSeries.values,
                    maxBarThickness: 16
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false
                    }
                },
                interaction: {
                    intersect: false,
                    mode: "index"
                },
                scales: {
                    y: {
                        grid: {
                            drawBorder: false,
                            display: true,
                            drawOnChartArea: true,
                            drawTicks: false,
                            borderDash: [5, 5]
                        },
                        ticks: {
                            display: true,
                            padding: 10,
                            color: darkColor,
                            font: {
                                size: 11,
                                family: "Open Sans",
                                style: "normal",
                                lineHeight: 2
                            }
                        }
                    },
                    x: {
                        grid: {
                            drawBorder: false,
                            display: false,
                            drawOnChartArea: false,
                            drawTicks: false
                        },
                        ticks: {
                            display: true,
                            color: darkColor,
                            padding: 10,
                            font: {
                                size: 11,
                                family: "Open Sans",
                                style: "normal",
                                lineHeight: 2
                            }
                        }
                    }
                }
            }
        });

        var expenseRange = topExpenseSelect ? topExpenseSelect.value : "12";
        var expenseSeries = getRangeData(topExpenseRanges, expenseRange);

        var topExpenseChart = new Chart(topExpenseCtx, {
            type: "doughnut",
            data: {
                labels: expenseSeries.labels,
                datasets: [{
                    data: expenseSeries.values,
                    backgroundColor: buildDonutColors(expenseSeries.values.length),
                    borderWidth: 0
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                cutout: "65%",
                plugins: {
                    legend: {
                        display: true,
                        position: "bottom",
                        labels: {
                            color: darkColor,
                            boxWidth: 8,
                            boxHeight: 8
                        }
                    }
                }
            }
        });

        if (profitLossSelect) {
            profitLossSelect.addEventListener("change", function (event) {
                var selectedRange = event.target.value;
                var selectedSeries = getRangeData(profitLossRanges, selectedRange);
                profitLossChart.data.labels = selectedSeries.labels;
                profitLossChart.data.datasets[0].data = selectedSeries.values;
                profitLossChart.update();
            });
        }

        if (topExpenseSelect) {
            topExpenseSelect.addEventListener("change", function (event) {
                var selectedRange = event.target.value;
                var selectedSeries = getRangeData(topExpenseRanges, selectedRange);
                topExpenseChart.data.labels = selectedSeries.labels;
                topExpenseChart.data.datasets[0].data = selectedSeries.values;
                topExpenseChart.data.datasets[0].backgroundColor = buildDonutColors(selectedSeries.values.length);
                topExpenseChart.update();
            });
        }
    </script>
@endpush