@extends('user.layouts')

@section('title', 'Dashboard')

@section('header')

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

@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">

    <a href="{{ route('users') }}" class="text-decoration-none text-dark">

        <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 Agent</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_agent }}</h2>

                </div>

            </div>

        </div>

    </a>

</div>

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

    <a href="{{ route('all_business') }}" class="text-decoration-none text-dark">

        <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">All 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>

    </a>

</div>

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

    <a href="{{ route('transaction') }}" class="text-decoration-none text-dark">

        <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">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>

    </a>

</div>

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

    <a href="{{ route('withdraw_request_history') }}" class="text-decoration-none text-dark">

        <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">Payout</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_payout }}
    </h2>

    

</div>

            </div>

        </div>

    </a>

</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">

                            Booking

                        </h4>

                    </div>

                    <div class="card-body">

                        <div class="d-flex justify-content-end align-items-center mb-4">

                            <div class="me-3">

                              

                            </div>

                            <div>

                               

                            </div>

                        </div>

                       

                        <div class="chart-wrapper">

                            <canvas id="canvas"></canvas>

                        </div>

                    </div>

                </div>

            </div>

        </div>

        <script>

            // Get the dates and user data from the server-side

            var dates = @json($dates);

            var userData = @json($user_data);

            document.addEventListener('DOMContentLoaded', function () {

                // Get the canvas element

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

                // Create a new chart instance

                var myChart = new Chart(ctx, {

                    type: 'line', // You can change this to 'bar', 'pie', etc.

                    data: {

                        labels: dates, // X-axis labels

                        datasets: [{

                            label: 'User Registrations', // Dataset label

                            data: userData, // Y-axis data

                            backgroundColor: 'rgba(75, 192, 192, 0.2)', // Background color

                            borderColor: 'rgba(75, 192, 192, 1)', // Border color

                            borderWidth: 1 // Border width

                        }]

                    },

                    options: {

                        scales: {

                            y: {

                                beginAtZero: true // Start y-axis at 0

                            }

                        },

                        plugins: {

                            legend: {

                                display: true,

                                labels: {

                                    color: '#343a40' // Change legend text color

                                }

                            },

                            tooltip: {

                                callbacks: {

                                    title: function(tooltipItems) {

                                        return 'Day: ' + tooltipItems[0].label; // Customize tooltip title

                                    }

                                }

                            }

                        }

                    }

                });

            });

        </script>

    </div>

    <!-- container fluid -->

@endsection

@section('footer')

    <!-- Chart.js CDN -->

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

    {{-- <script type="text/javascript" src="{{ asset('/assets') }}/js/chart.js"></script> --}}

    <!-- JQuery CDN -->

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

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

@endsection