@extends('admin.layouts.admin-master')
@section('page-title')
    {{__('Tenant Analytics')}}
@endsection
@section('content')
    <div class="dashboard__inner__item dashboard__card bg__white padding-20 radius-10 margin-30">
        <div class="dashboard__card__header d-flex justify-content-between">
            <h4 class="dashboard__card__header__title">Tenant Analytics</h4>
        </div>

        <div class="mt-4 mb-4">
            <x-admin.flash-msg.error/>
            <x-admin.flash-msg.msg/>
        </div>

        <div class="row g-4 mb-5">
            <div class="col-md-4">
                <div class="dashboard__card p-4">
                    <div class="dashboard__card__body">
                        <h2 class="dashboard__card__title">{{ number_format($activeTenants) }}</h2>
                        <p class="dashboard__card__para">Active Tenants (Last 15min)</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="dashboard__card p-4">
                    <div class="dashboard__card__body">
                        <h2 class="dashboard__card__title">{{ number_format($moduleStats->api_requests_count ?? 0) }}</h2>
                        <p class="dashboard__card__para">Total API Requests</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mb-5">
            <div class="col-xl-8">
                <div class="dashboard__card p-4">
                    <div class="dashboard__card__header">
                        <h4 class="dashboard__card__title">Module Usage Statistics</h4>
                    </div>
                    <div class="dashboard__card__body">
                        <canvas id="moduleUsageChart" height="300"></canvas>
                    </div>
                </div>
            </div>

            <div class="col-xl-4">
                <div class="dashboard__card p-4">
                    <div class="dashboard__card__header">
                        <h4 class="dashboard__card__title">Module Usage Summary</h4>
                    </div>
                    <div class="dashboard__card__body">
                        <ul class="custom__list p-0 m-0">
                            @php
                                $modules = [
                                    'workflow' => 'Workflow',
                                    'support_ticket' => 'Support Ticket',
                                    'sales_pipeline' => 'Sales Pipeline',
                                    'proposal' => 'Proposal',
                                    'meeting' => 'Meeting',
                                    'project' => 'Project',
                                    'form' => 'Form',
                                    'inbox' => 'Inbox',
                                    'folder' => 'Folder',
                                    'company' => 'Company',
                                    'contact' => 'Contact',
                                    'invoice' => 'Invoice',
                                    'quotation' => 'Quotation',
                                    'discussion' => 'Discussion',
                                    'document' => 'Document',
                                    'task' => 'Task'
                                ];
                            @endphp

                            @foreach($modules as $key => $label)
                                <li class="d-flex justify-content-between my-2">
                                    <span>{{ $label }}</span>
                                    <span
                                        class="badge bg-primary">{{ number_format($moduleStats->{$key.'_count'} ?? 0) }}</span>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div class="dashboard__card p-4">
            <div class="dashboard__card__header">
                <h4 class="dashboard__card__title">Real-time Activity</h4>
            </div>
            <div class="dashboard__card__body mt-2">
                <div id="realTimeUpdates"></div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        (function ($) {
            "use strict";

            const moduleData = {!! json_encode(array_map(function($key) use ($moduleStats) {
                return $moduleStats->{$key.'_count'} ?? 0;
            }, array_keys($modules))) !!};

            const ctx = document.getElementById('moduleUsageChart');
            new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: {!! json_encode(array_values($modules)) !!},
                    datasets: [{
                        label: 'Usage Count',
                        data: moduleData,
                        backgroundColor: 'rgba(0, 123, 255, 0.5)',
                        borderColor: 'rgb(0, 123, 255)',
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });

            function fetchRealTimeData() {
                fetch(`{{route('admin.tenant.analytics.realtime.stats')}}`)
                    .then(response => response.json())
                    .then(data => {
                        document.getElementById('realTimeUpdates').innerHTML = `
                            <div class="alert alert-info">
                                <div class="d-flex justify-content-between align-items-center">
                                    <span>Currently Active Tenants: ${data.active_tenants}</span>
                                    <span class="small">Last updated: ${new Date().toLocaleTimeString()}</span>
                                </div>
                            </div>
                        `;
                    });
            }

            fetchRealTimeData();
            setInterval(fetchRealTimeData, 30000);

        })(jQuery);
    </script>
@endsection