@extends('admin.layouts.adminpanel')

@section('page_header')
    @php
        $page_title = 'Panel';

        $currentYear = now()->year;
        $lastYear = $currentYear - 1;

    @endphp

    @include('admin.partials.page_header')
@endsection

@section('content')
    <div class="container-fluid">
        <div class="col-md-9">
            <div class="row">
                <div class="col-md-4">
                    <div class="info-box">
                        <span class="info-box-icon bg-success elevation-1"><i class="fas fa-users"></i></span>
                        <div class="info-box-content">
                            <span class="info-box-text">{{ __('Active Clients') }}</span>
                            <span class="info-box-number">
                                {{ $client_counts['Activo'] ?? 0 }}
                            </span>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="info-box">
                        <span class="info-box-icon bg-primary elevation-1"><i class="fas fa-users"></i></span>
                        <div class="info-box-content">
                            <span class="info-box-text">{{ __('On Trial Period') }}</span>
                            <span class="info-box-number">
                                {{ $client_counts['Prueba'] ?? 0 }}
                            </span>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="info-box">
                        <span class="info-box-icon bg-secondary elevation-1"><i class="fas fa-users"></i></span>
                        <div class="info-box-content">
                            <span class="info-box-text">{{ __('Inactive Clients') }}</span>
                            <span class="info-box-number">
                                {{ $client_counts['Inactivo'] ?? 0 }}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-9">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title" style="font-weight:bold">{{ __('Current Month') }}</h3>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-4">
                                <div class="description-block border-right">
                                    <span>{{ __('New Subscriptions') }}</span>
                                    <h5 class="description-header">{{ $client_counts_month['Subscriptions'] ?? 0 }}</h5>
                                </div>
                                <!-- /.description-block -->
                            </div>
                            <div class="col-4">
                                <div class="description-block border-right">
                                    <span>{{ __('On Trial Period') }}</span>
                                    <h5 class="description-header">{{ $client_counts_month['Prueba'] }}</h5>
                                </div>
                                <!-- /.description-block -->
                            </div>
                            <div class="col-4">
                                <div class="description-block">
                                    <span>{{ __('Inactive') }}</span>
                                    <h5 class="description-header">
                                        {{ is_array($client_counts_month) ? $client_counts_month['Inactivo'] ?? 0 : 0 }}
                                    </h5>
                                </div>
                                <!-- /.description-block -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-9">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title" style="font-weight:bold">{{ __('Revenue') }}</h3>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-4">
                                <div class="description-block border-right">
                                    <span>{{ __('Last Month') }}</span>
                                    <h5 class="description-header">${{ number_format($revenue['last_month'], 2) }}</h5>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="description-block border-right">
                                    <span>{{ __('Current Month') }}</span>
                                    <h5 class="description-header">${{ number_format($revenue['current_month'], 2) }}</h5>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="description-block">
                                    <span>{{ __('Year') }} {{ $currentYear }}</span>
                                    <h5 class="description-header">${{ number_format($revenue['total'], 2) }}</h5>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-12">
                                <div class="row justify-content-center pt-2">
                                    <canvas id="sales-chart" height="200"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        var monthlyRevenue = @json($monthly_revenue);
        var currentYear = {{ $currentYear }};
        var lastYear = {{ $lastYear }};

        drawChart();

        function drawChart() {

            const months = ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio',
                'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'
            ];

            // If chart already exists, destroy it before re-creating
            if (chart) {
                chart.destroy();
            }

            // Create a new chart
            const colors = [
                'rgba(60,141,188,0.9)', // blue
                'rgba(210, 214, 222, 1)', // grey
                'rgba(0, 166, 90, 0.9)', // green
                'rgba(243, 156, 18, 0.9)' // orange (optional for more years)
            ];

            const datasets = Object.entries(monthlyRevenue).map(([year, data]) => {
                let color;

                if (parseInt(year) === currentYear) {
                    color = 'rgba(60,141,188,0.9)'; // blue
                } else if (parseInt(year) === lastYear) {
                    color = 'rgba(210,214,222,1)'; // grey
                } else {
                    color = 'rgba(0,166,90,0.9)'; // green fallback for other years
                }

                return {
                    label: year,
                    data: Object.values(data),
                    backgroundColor: color,
                    barThickness: 20
                };
            });

            const ctx = document.getElementById('sales-chart').getContext('2d');
            new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: months,
                    datasets: datasets
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    tooltips: {
                        callbacks: {
                            label: function(tooltipItem, data) {
                                const dataset = data.datasets[tooltipItem.datasetIndex];
                                const label = dataset.label || '';
                                const value = Number(tooltipItem.yLabel || 0);

                                const formattedValue = currencyFormat(value);

                                return `${label}: ${formattedValue}`;
                            }
                        }
                    },
                    scales: {
                        xAxes: [{
                            categoryPercentage: 0.6,
                            barPercentage: 1.0
                        }],
                        yAxes: [{
                            ticks: {
                                beginAtZero: true,
                                callback: function(value, index, values) {
                                    return currencyFormat(value);
                                }
                            }
                        }]
                    }
                }
            });
        }
    </script>
@endsection