@extends('layout.dashboard.index')

@section('content')
    <div class="container-fluid">
        <div class="row my-5">
            <div class="col-md-8 my-auto">
                <p class="text-muted fw-medium mb-0">Gambaran strategis penjualan.</p>
            </div>
            <div class="col-md-4">
                <div class="row justify-content-end">
                    <div class="col-md-6">
                        <div class="d-flex gap-4">
                            <i class="bi bi-calendar-date-fill my-auto" style="font-size: 15pt"></i>
                            <select class="form-select form-select-sm" aria-label="Default select example" id="filterYear">
                                <option value="">Tahun</option>
                                @for ($year = date('Y'); $year >= date('Y') - 3; $year--)
                                    <option value="{{ $year }}" @selected($year == $selectedYear)>
                                        {{ $year }}
                                    </option>
                                @endfor
                            </select>
                        </div>
                    </div>
                    @if (Auth::user()->role->code !== 'OTH' && Auth::user()->role->code !== 'SLS')
                        <div class="col-md-6">
                            <div class="d-flex gap-4">
                                <i class="bi bi-layers-fill my-auto" style="font-size: 15pt"></i>
                                <select class="form-select form-select-sm" aria-label="Default select example"
                                    name="filterDivision" id="filterDivision">
                                    <option value="">Semua Toko</option>
                                    @foreach ($storeOptions as $storeOption)
                                        <option value="{{ $storeOption->id }}" @selected((string) $selectedStore === (string) $storeOption->id)>
                                            {{ $storeOption->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
        <div class="row g-4">
            <!-- Total Budget -->
            <div class="col-md-6 col-xl">
                <div class="card shadow-sm border-0 h-100">
                    <div class="card-body d-flex justify-content-between align-items-start">
                        <div>
                            <p class="text-muted mb-3">Total Pesanan</p>
                            <h2 class="fw-bold mb-0" id="totalOrder">Rp 0</h2>
                        </div>
                        <div class="icon-box bg-light-primary text-primary">
                            <i class="bi bi-cart-check" style="font-size: 25px"></i>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Realisasi Budget -->
            <div class="col-md-6 col-xl">
                <div class="card shadow-sm border-0 h-100">
                    <div class="card-body d-flex justify-content-between align-items-start">
                        <div>
                            <p class="text-muted mb-3">Total Penghasilan</p>
                            <h2 class="fw-bold mb-1" id="totalIncome">Rp 0</h2>
                        </div>
                        <div class="icon-box bg-light-info text-info">
                            <i class="bi bi-wallet2" style="font-size: 25px"></i>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Sisa Anggaran -->
            <div class="col-md-6 col-xl">
                <div class="card shadow-sm border-0 h-100">
                    <div class="card-body d-flex justify-content-between align-items-start">
                        <div>
                            <p class="text-muted mb-3">Total Beban</p>
                            <h2 class="fw-bold mb-0" id="totalCost">Rp 0</h2>
                        </div>
                        <div class="icon-box bg-light-warning text-warning">
                            <i class="bi bi-minecart-loaded" style="font-size: 25px"></i>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Tingkat Pemakaian -->
            <div class="col-md-6 col-xl">
                <div class="card shadow-sm border-0 h-100">
                    <div class="card-body d-flex justify-content-between align-items-start">
                        <div>
                            <p class="text-muted mb-3">Keuntungan Bersih</p>
                            <h2 class="fw-bold mb-1" id="netProfit">Rp 0
                            </h2>
                        </div>
                        <div class="icon-box bg-light-success text-success">
                            <i class="bi bi-arrow-up-right-circle" style="font-size: 25px"></i>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-8">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-start mb-5">
                            <div>
                                <h3 class="card-title">Revenue Over Time</h3>
                                <span class="text-muted">Penghasilan vs Beban vs Net Profit</span>
                            </div>
                        </div>

                        <div style="height: 350px;">
                            <canvas id="revenueOverTimeChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-4">
                <div class="card shadow-sm border-0 rounded-4 mb-4">
                    <div class="card-body p-4">
                        <h5 class="fw-bold mb-1">Status Pesanan</h5>
                        <p class="text-muted mb-3">
                            Distribusi <span id="statusOrderTotalText">0</span> pesanan
                        </p>

                        <div id="chartStatusPesanan" style="min-height: 280px;"></div>

                        <div id="statusOrderLegend" class="mt-3"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        let revenueOverTimeChart = null;

        function formatToLt(value) {
            if (!value) return '0Jt';

            const juta = value / 1000000;
            return juta.toLocaleString('id-ID', {
                minimumFractionDigits: 0,
                maximumFractionDigits: 1
            }) + 'Jt';
        }

        function updateRevenueChart(data) {
            const ctx = document.getElementById('revenueOverTimeChart').getContext('2d');

            if (revenueOverTimeChart) {
                revenueOverTimeChart.destroy();
            }

            const gradient = ctx.createLinearGradient(0, 0, 0, 350);
            gradient.addColorStop(0, 'rgba(54, 153, 255, 0.25)');
            gradient.addColorStop(1, 'rgba(54, 153, 255, 0.02)');

            revenueOverTimeChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: data.labels,
                    datasets: [{
                            label: 'Penghasilan',
                            data: data.penghasilan,
                            borderColor: '#3B82F6',
                            backgroundColor: gradient,
                            fill: true,
                            tension: 0.4,
                            pointRadius: 3,
                            pointHoverRadius: 5,
                            borderWidth: 2
                        },
                        {
                            label: 'Net Profit',
                            data: data.net_profit,
                            borderColor: '#10B981',
                            backgroundColor: 'transparent',
                            fill: false,
                            tension: 0.4,
                            pointRadius: 3,
                            pointHoverRadius: 5,
                            borderWidth: 2
                        },
                        {
                            label: 'Beban',
                            data: data.beban,
                            borderColor: '#F87171',
                            backgroundColor: 'transparent',
                            fill: false,
                            tension: 0.4,
                            pointRadius: 3,
                            pointHoverRadius: 5,
                            borderWidth: 2
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    interaction: {
                        mode: 'index',
                        intersect: false
                    },
                    plugins: {
                        legend: {
                            position: 'top',
                            align: 'end',
                            labels: {
                                usePointStyle: true,
                                pointStyle: 'circle',
                                boxWidth: 8
                            }
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    return context.dataset.label + ': Rp ' + Number(context.raw).toLocaleString(
                                        'id-ID');
                                }
                            }
                        }
                    },
                    scales: {
                        x: {
                            grid: {
                                display: false
                            },
                            border: {
                                display: false
                            }
                        },
                        y: {
                            beginAtZero: true,
                            ticks: {
                                callback: function(value) {
                                    return formatToLt(value);
                                }
                            },
                            grid: {
                                color: '#E5E7EB',
                                borderDash: [4, 4]
                            },
                            border: {
                                display: false
                            }
                        }
                    }
                }
            });
        }

        let statusOrderChart = null;

        function formatNumber(number) {
            return new Intl.NumberFormat('id-ID').format(number);
        }

        function hexToRgba(hex, alpha = 0.12) {
            hex = hex.replace('#', '');

            if (hex.length === 3) {
                hex = hex.split('').map(x => x + x).join('');
            }

            const r = parseInt(hex.substring(0, 2), 16);
            const g = parseInt(hex.substring(2, 4), 16);
            const b = parseInt(hex.substring(4, 6), 16);

            return `rgba(${r}, ${g}, ${b}, ${alpha})`;
        }

        function renderStatusLegend(details) {
            let html = '';

            details.forEach(item => {
                html += `
                <div class="status-legend-item">
                    <div class="status-legend-left">
                        <span class="status-dot" style="background:${item.color}"></span>
                        <span class="status-label">${item.label}</span>
                    </div>
                    <div class="status-legend-right">
                        <span class="status-total">${formatNumber(item.total)}</span>
                        <span class="status-badge" style="background:${hexToRgba(item.color, 0.12)}; color:${item.color}">
                            ${item.percentage}%
                        </span>
                    </div>
                </div>
            `;
            });

            $('#statusOrderLegend').html(html);
        }

        function updateStatusOrderChart(data) {
            $('#statusOrderTotalText').text(formatNumber(data.total));

            const colors = data.details.map(item => item.color);

            const options = {
                series: data.series,
                chart: {
                    type: 'donut',
                    height: 280
                },
                labels: data.labels,
                colors: colors,
                legend: {
                    show: false
                },
                dataLabels: {
                    enabled: false
                },
                stroke: {
                    width: 0
                },
                plotOptions: {
                    pie: {
                        donut: {
                            size: '72%',
                            labels: {
                                show: true,
                                name: {
                                    show: false
                                },
                                value: {
                                    show: true,
                                    fontSize: '38px',
                                    fontWeight: 700,
                                    color: '#111827',
                                    formatter: function() {
                                        return formatNumber(data.total);
                                    }
                                },
                                total: {
                                    show: true,
                                    label: 'Total',
                                    fontSize: '16px',
                                    color: '#94a3b8',
                                    formatter: function() {
                                        return '';
                                    }
                                }
                            }
                        }
                    }
                },
                tooltip: {
                    y: {
                        formatter: function(value) {
                            return formatNumber(value) + ' pesanan';
                        }
                    }
                }
            };

            if (statusOrderChart) {
                statusOrderChart.updateOptions(options);
                statusOrderChart.updateSeries(data.series);
            } else {
                statusOrderChart = new ApexCharts(document.querySelector("#chartStatusPesanan"), options);
                statusOrderChart.render();
            }

            renderStatusLegend(data.details);
        }

        $(document).ready(function() {
            loadChartData();

            function loadChartData() {
                // const year = $('#filterYear').val();
                // const divisionId = $('#filterDivision').val();

                $('#loading').addClass('active');
                $('#errorMessage').removeClass('active');

                $.ajax({
                    url: "{{ route('dashboard-sales.chart') }}",
                    method: 'GET',
                    success: function(response) {
                        updateMatric(response.matric);
                        updateRevenueChart(response.revenue_over_time);
                        updateStatusOrderChart(response.order_status);
                    },
                    error: function(xhr, status, error) {
                        $('#loading').removeClass('active');
                        $('#errorMessage')
                            .addClass('active')
                            .text('Error loading data: ' + error);
                    }
                });
            }

            function updateMatric(data) {
                $('#totalOrder').text('Rp ' + formatNumber(data.total_order));
                $('#totalIncome').text('Rp ' + formatNumber(data.total_income));
                $('#totalCost').text('Rp ' + formatNumber(data.total_cost));
                $('#netProfit').text('Rp ' + formatNumber(data.net_profit));
            }

            function formatNumber(amount) {
                if (amount >= 1000000000) {
                    return (amount / 1000000000).toFixed(2) + 'M';
                } else if (amount >= 1000000) {
                    return (amount / 1000000).toFixed(2) + 'Jt';
                } else if (amount >= 1000) {
                    return (amount / 1000).toFixed(2) + 'Rb';
                }
                return amount.toString();
            }

            function updateCharts() {
                loadChartData();
            }

            // Auto refresh setiap 5 menit
            setInterval(loadChartData, 300000);
        });
    </script>
@endsection