@extends('admin.layout')

@section('title', 'Dashboard')

@section('header')

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

<style>

.chart-wrapper {

    height: 400px; /* Increased from 180px to 400px */

    padding: 0;

    margin: 0;

}

.chart-wrapper canvas {

    height: 100% !important;

    width: 100% !important;

    display: block;

}

</style>

</style>

@endsection

@section('content')

    <div class="container-fluid page-wrapper dashboard-section">

        <div class="row">

            <div class="col-12 col-sm-6 col-md-6 col-lg-3 col-xl-3">

                <div class="card border-0 dashboard-widget-card">

                    <div class="card-body">

                        <div class="d-flex justify-content-between">

                            <div class="me-4 text-start">

                                <p class="mb-0 d-card-para-title">Total Users</p>

                            </div>

                            <div>

                                <img class="dashboard-icon-img" src="{{ asset('/assets') }}/images/icons/total-users.svg"

                                    alt="total-agent">

                            </div>

                        </div>

                        <div class="mt-3">

                            <h2 class="mb-0 d-card-inner-head"> {{ $total_users  }}</h2>

                        </div>

                    </div>

                </div>

            </div>

            <div class="col-12 col-sm-6 col-md-6 col-lg-3 col-xl-3">

                <div class="card border-0 dashboard-widget-card">

                    <div class="card-body">

                        <div class="d-flex justify-content-between">

                            <div class="me-4 text-start">

                                <p class="mb-0 d-card-para-title">Total Business</p>

                            </div>

                            <div>

                                <img class="dashboard-icon-img" src="{{ asset('/assets') }}/images/icons/total-business.svg"

                                    alt="total-business">

                            </div>

                        </div>

                        <div class="mt-3">

                            <h2 class="mb-0 d-card-inner-head">{{ $total_business }}</h2>

                        </div>

                    </div>

                </div>

            </div>

            <div class="col-12 col-sm-6 col-md-6 col-lg-3 col-xl-3">

                <div class="card border-0 dashboard-widget-card">

                    <div class="card-body">

                        <div class="d-flex justify-content-between">

                            <div class="me-4 text-start">

                                <p class="mb-0 d-card-para-title">Total Subscription</p>

                            </div>

                            <div>

                                <img class="dashboard-icon-img"

                                    src="{{ asset('/assets') }}/images/icons/total-subscription.svg"

                                    alt="total-subscription">

                            </div>

                        </div>

                        <div class="mt-3">

                            <h2 class="mb-0 d-card-inner-head">{{ $total_subscription }}</h2>

                        </div>

                    </div>

                </div>

            </div>

            <div class="col-12 col-sm-6 col-md-6 col-lg-3 col-xl-3">

                <div class="card border-0 dashboard-widget-card">

                    <div class="card-body">

                        <div class="d-flex justify-content-between">

                            <div class="me-4 text-start">

                                <p class="mb-0 d-card-para-title">Total Approved Buisness</p>

                            </div>

                            <div>

                                <img class="dashboard-icon-img" src="{{ asset('/assets') }}/images/icons/total-payout.svg"

                                    alt="total-payout">

                            </div>

                        </div>

                        <div class="mt-3">

                            <h2 class="mb-0 d-card-inner-head">{{ $total_approved }}</h2>

                        </div>

                    </div>

                </div>

            </div>

        </div>

        <!-- Chart Row -->
<div class="row">
    <div class="col-lg-12">
        <div class="card dashboard-chart-card">
            <div class="card-header dashboard-card-header p-3">
                <h4 class="card-title mb-0">User Registered</h4>
            </div>
            <div class="card-body">
                <div class="d-flex justify-content-end align-items-center mb-4"></div>

                <div class="chart-wrapper" style="height: 500px; width: 100%;">
                    <canvas id="canvas"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    var dates = @json($dates);
    var userData = @json($user_data);

    document.addEventListener('DOMContentLoaded', function () {
        var ctx = document.getElementById('canvas').getContext('2d');

        var myChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: dates,
                datasets: [{
                    label: 'User Registrations',
                    data: userData,
                    backgroundColor: 'rgba(75, 192, 192, 0.2)',
                    borderColor: 'rgba(75, 192, 192, 1)',
                    borderWidth: 3,
                    pointRadius: 6,            // Make the data points bigger
                    pointHoverRadius: 8,       // Bigger when hovered
                    tension: 0.4               // Smooth curve
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,   // Allow custom height/width
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            font: { size: 14 }
                        }
                    },
                    x: {
                        ticks: {
                            font: { size: 14 }
                        }
                    }
                },
                plugins: {
                    legend: {
                        display: true,
                        labels: {
                            color: '#343a40',
                            font: { size: 16 }
                        }
                    },
                    tooltip: {
                        bodyFont: { size: 14 },
                        titleFont: { size: 16 },
                        callbacks: {
                            title: function(tooltipItems) {
                                return 'Day: ' + tooltipItems[0].label;
                            }
                        }
                    }
                }
            }
        });
    });
</script>


    </div>

@endsection

@section('footer')

    <!-- Chart.js CDN -->

    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>

    <!-- JQuery CDN -->

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"

        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

{{-- <script>

$(document).ready(function () {

    const labels = @json($labels);

    const userData = @json($data);

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

    const chart = new Chart(ctx, {

        type: 'line',

        data: {

            labels: labels,

            datasets: [{

                label: 'Users Joined',

                data: userData,

                backgroundColor: 'rgba(59, 130, 246, 0.1)',

                borderColor: '#3b82f6',

                pointBackgroundColor: '#1e3a8a',

                borderWidth: 2,

                fill: true,

                tension: 0.4

            }]

        },

        options: {

            responsive: true,

            maintainAspectRatio: false,

            scales: {

                y: {

                    beginAtZero: true,

                    ticks: {

                        stepSize: 1

                    }

                }

            },

            plugins: {

                legend: {

                    display: false

                }

            }

        }

    });

});

</script> --}}

@endsection