@extends('layouts.admin')

@section('breadcrumb')
<div class="main-breadcrumb d-flex flex-wrap align-items-center my-4 position-relative gap-3">
    <h2 class="breadcrumb-title mb-0 flex-grow-1 fs-16">{{ tr('dashboard') }}</h2>
    <div class="flex-shrink-0">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb justify-content-end mb-0">
                <li><i class="ri-home-4-line fs-16 me-2 lh-sm text-primary"></i></li>
                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Home</a></li>
            </ol>
        </nav>
    </div>
</div>
@endsection

@section('content')
<div class="row">
    <div class="col-md-3">
        <div class="card">
            <div class="card-body">
                <div class="px-5 py-6 bg-light bg-opacity-30 rounded-3 d-flex align-items-center">
                    <div class="flex-grow-1">
                        <p class="mb-3 text-muted">{{tr('total_registered_users')}}</p>
                        <h5 class="mb-0 fw-bold">{{ $users->total_users ?: 0 }}</h5>
                    </div>
                    <div class="avatar-item avatar-lg rounded-2 avatar-title text-primary bg-primary-subtle border-0 shadow-inset-primary">
                        <i class="uil uil-user fs-3"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-3">
        <div class="card">
            <div class="card-body">
                <div class="px-5 py-6 bg-light bg-opacity-30 rounded-3 d-flex align-items-center">
                    <div class="flex-grow-1">
                        <p class="mb-3 text-muted">{{tr('total_individual_users')}}</p>
                        <h5 class="mb-0 fw-bold">{{ $users->total_individual_users ?: 0 }}</h5>
                    </div>
                    <div class="avatar-item avatar-lg rounded-2 avatar-title text-warning bg-warning-subtle border-0 shadow-inset-warning">
                        <i class="uil uil-user-minus fs-3"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-3">
        <div class="card">
            <div class="card-body">
                <div class="px-5 py-6 bg-light bg-opacity-30 rounded-3 d-flex align-items-center">
                    <div class="flex-grow-1">
                        <p class="mb-3 text-muted">{{tr('total_business_users')}}</p>
                        <h5 class="mb-0 fw-bold">{{ $users->total_business_users ?: 0 }}</h5>
                    </div>
                    <div class="avatar-item avatar-lg rounded-2 avatar-title text-info bg-info-subtle border-0 shadow-inset-info">
                        <i class="uil uil-user-check fs-3"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-3">
        <div class="card">
            <div class="card-body">
                <div class="px-5 py-6 bg-light bg-opacity-30 rounded-3 d-flex align-items-center">
                    <div class="flex-grow-1">
                        <p class="mb-3 text-muted">{{tr('admin_bank_accounts')}}</p>
                        <h5 class="mb-0 fw-bold">{{ $admin_bank_accounts ?: 0 }}</h5>
                    </div>
                    <div class="avatar-item avatar-lg rounded-2 avatar-title text-warning bg-warning-subtle border-0 shadow-inset-warning">
                        <i class="uil uil-university fs-3"></i>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>   
<div class="row">
    <div class="col-md-3">
        <div class="card">
            <div class="card-body">
                <div class="px-5 py-6 bg-light bg-opacity-30 rounded-3 d-flex align-items-center">
                    <div class="flex-grow-1">
                        <p class="mb-3 text-muted">{{tr('today_registered_users')}}</p>
                        <h5 class="mb-0 fw-bold">{{ $users->today_total_users ?: 0 }}</h5>
                    </div>
                    <div class="avatar-item avatar-lg rounded-2 avatar-title text-primary bg-primary-subtle border-0 shadow-inset-primary">
                        <i class="uil uil-user-square fs-3"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-3">
        <div class="card">
            <div class="card-body">
                <div class="px-5 py-6 bg-light bg-opacity-30 rounded-3 d-flex align-items-center">
                    <div class="flex-grow-1">
                        <p class="mb-3 text-muted">{{tr('today_individual_users')}}</p>
                        <h5 class="mb-0 fw-bold">{{ $users->today_individual_users ?: 0 }}</h5>
                    </div>
                    <div class="avatar-item avatar-lg rounded-2 avatar-title text-warning bg-warning-subtle border-0 shadow-inset-warning">
                        <i class="uil uil-user-circle fs-3"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-3">
        <div class="card">
            <div class="card-body">
                <div class="px-5 py-6 bg-light bg-opacity-30 rounded-3 d-flex align-items-center">
                    <div class="flex-grow-1">
                        <p class="mb-3 text-muted">{{tr('today_business_users')}}</p>
                        <h5 class="mb-0 fw-bold">{{ $users->today_business_users ?: 0 }}</h5>
                    </div>
                    <div class="avatar-item avatar-lg rounded-2 avatar-title text-info bg-info-subtle border-0 shadow-inset-info">
                       <i class="uil uil-user-nurse fs-3"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-3">
        <div class="card">
            <div class="card-body">
                <div class="px-5 py-6 bg-light bg-opacity-30 rounded-3 d-flex align-items-center">
                    <div class="flex-grow-1">
                        <p class="mb-3 text-muted">{{tr('treasury_members')}}</p>
                        <h5 class="mb-0 fw-bold">{{ $total_treasury_members ?: 0 }}</h5>
                    </div>
                    <div class="avatar-item avatar-lg rounded-2 avatar-title text-warning bg-warning-subtle border-0 shadow-inset-warning">
                       <i class="uil uil-user-plus fs-3"></i>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div> 
<div class="row">

    
    <div class="col-md-6 col-xl-6 col-xxl-6">
        <div class="card card-h-100">
            <div class="card-header">
                <h6 class="card-title">{{tr('user_type_counts')}}</h6>
            </div>

            <div class="card-body">
                <canvas id="myPieChart" style="height:300px;"></canvas>
            </div>
        </div>
    </div>

@include('admin.dashboard.transaction-count')

</div>

@include('admin.dashboard.transaction-analytics')

@endsection



@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

<script>
    const last7Dates = @json($last7Dates);
    const last7Counts = @json($last7Counts);

    let revenueChart;

    function renderRevenueChart() {
        const options = {
            chart: {
                type: 'line',
                height: 330,
                toolbar: { show: false }
            },
            series: [{
                name: "Users",
                data: last7Counts
            }],
            stroke: {
                width: 3,
                curve: "smooth"
            },
            xaxis: {
                categories: last7Dates,
                labels: { rotate: -45 }
            },
            colors: ["#1e90ff"],
            tooltip: {
                y: {
                    formatter: (val) => val.toLocaleString()
                }
            }
        };

        if (revenueChart) revenueChart.destroy();

        revenueChart = new ApexCharts(document.querySelector("#revenueChart"), options);
        revenueChart.render();

        document.getElementById("rev-amount").innerText =
            last7Counts.reduce((a, b) => a + b, 0).toLocaleString();
    }

    document.addEventListener("DOMContentLoaded", function () {
        renderRevenueChart();
    });
</script>


<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>


<script>
document.addEventListener("DOMContentLoaded", function () {

    const ctx = document.getElementById('myPieChart').getContext('2d');

    const totalUsers = @json($users->total_users);
    const individualUsers = @json($users->total_individual_users);
    const businessUsers = @json($users->total_business_users);

    new Chart(ctx, {
        type: 'pie',
        data: {
            labels: [
                "Total Users",
                "Individual Users",
                "Business Users"
            ],
            datasets: [{
                data: [
                    totalUsers,
                    individualUsers,
                    businessUsers
                ],
                backgroundColor: [
                    'rgba(54, 162, 235, 0.7)',
                    'rgba(255, 206, 86, 0.7)',
                    'rgba(75, 192, 192, 0.7)'
                ]
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false
        }
    });

});
</script>
@endsection