@extends('login.main')

@section('content')
<div class='row h-100'>
    <div class="col-lg-6 col-md-6 col-12" style="background-color: #2563EB;">
        <a href="">
            <img src="{{ asset('admin/assets/imges/LogoWhite.png') }}" alt="w8" class='mt-3' width="150">
        </a>
        <div class="text-center">
            <img src="{{ asset('admin/assets/imges/LoginActivity.png') }}" alt="w8" class='w-75 mt-4'>
        </div>
        <div class='text-white inter text-center mb-5'>
            <h4 class="font-24 fw-bold">Admin Console Access</h4>
            <p class="font-14">Manage, monitor, and maximize your TimeLink experience.</p>
        </div>
    </div>
    <div class='col-lg-6 col-md-6 col-12  align-items-center justify-content-center d-flex mt-lg-0 mt-md-0 mt-4'>
        <div class="col-lg-9 col-md-9 col-12">
            <form method="POST" action="business_user" class='login-form'>
                @csrf
                <div class='inter'>
                    <h4 class="font-24 fw-bold text-dak-blue">Create your free account</h4><br>
                </div>
                <div class="input-group p-0 rounded-4">
                    <span class="input-group-text border-0" style="background-color: transparent;" id="basic-addon1"><i class="fa-regular fa-user"></i></span>
                    <input id="name" type="name" required class="form-control border-0 ps-0 rounded-4 fw-semibold" name="name" value="{{ old('name') }}" autocomplete="name" autofocus>
                </div><br>
                <div class="input-group p-0 rounded-4">
                    <span class="input-group-text border-0" style="background-color: transparent;" id="basic-addon1"><i class="fa-regular fa-envelope"></i></span>
                    <input id="email" type="email" required class="form-control border-0 ps-0 rounded-4 fw-semibold" name="email" value="{{ old('email') }}" autocomplete="email" autofocus>
                </div>
                <div class="input-group p-0 rounded-4 mt-3">
                    <span class="input-group-text border-0" style="background-color: transparent;" id="basic-addon2"><i class="fas fa-lock"></i></span>
                    <input id="password" type="password" class="form-control border-0 ps-0 rounded-4 fw-semibold" name="password" required autocomplete="current-password">
                </div>
                <p class="font-14 text-dak-gray">Your password must have at least 8 characters</p>

                <div class="mt-3 text-center">
                    <button type='submit' class='btn-blue rounded-4 inter px-3 p-3 w-50 fw-bold font-16 text-capitalize'>Sign Up</button>
                </div>

            </form>
        </div>
    </div>
</div>
@endsection
@section('scripts')
    <script>
        const ctx = document.getElementById('myChart');
        new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ['1 am', '2 am', ' 3 am', '4 am', ' 5 am', ' 6 am', '7 am', '8 am', '9 am', '10 am',
                    '11 am', '12 am'
                ],
                datasets: [{
                    label: '#D99BFF',
                    data: [4, 6, 8, 9, 7, 5, 12, 7, 10, 4, 7, 5],
                    backgroundColor: '#E9EDF7', // Bar color
                    hoverBackgroundColor: '#4318FF', // Bar color on hover
                    borderWidth: 0,
                    borderRadius: {
                        topLeft: 12,
                        topRight: 12,
                        bottomLeft: 12,
                        bottomRight: 12
                    }
                }]
            },
            options: {
                scales: {
                    y: {
                        display: false, // Hide the y-axis labels (left side data)
                        beginAtZero: true
                    },
                    x: {
                        grid: {
                            display: false // Hide grid lines on the x-axis if needed
                        },
                        ticks: {
                            color: '#A3AED0', // Change label color to blue
                            font: {
                                family: 'Inter', // Change the font family
                            }
                        }
                    }
                },
                plugins: {
                    legend: {
                        display: false // Hide legend if needed
                    },
                    datalabels: {
                        display: false // Hide data labels on top of bars
                    },
                    tooltip: {
                        callbacks: {
                            title: function(tooltipItem, data) {
                                // You can customize the tooltip title here
                                return 'Custom Title';
                            },
                            label: function(tooltipItem, data) {
                                // You can customize the tooltip label here
                                return 'Value: ' + tooltipItem.yLabel;
                            }
                        }
                    }
                },

            }
        });

        const ctx2 = document.getElementById('myChart2');
        new Chart(ctx2, {
            type: 'bar',
            data: {
                labels: ['18-25', '26-35', ' 36-46', '47-60', ' 60+'],
                datasets: [{
                    label: '#D99BFF',
                    data: [100, 300, 20, 30, 15],
                    backgroundColor: '#d99bff', // Bar color
                    hoverBackgroundColor: '#d99bff', // Bar color on hover
                    borderWidth: 0,
                    borderRadius: {
                        topLeft: 0,
                        topRight: 0,
                        bottomLeft: 0,
                        bottomRight: 0
                    }
                }]
            },
            options: {
                scales: {
                    y: {
                        display: true, // Hide the y-axis labels (left side data)
                        beginAtZero: true
                    },
                    x: {
                        grid: {
                            display: false // Hide grid lines on the x-axis if needed
                        },
                        ticks: {
                            color: 'black', // Change label color to blue
                            font: {
                                family: 'Inter', // Change the font family
                            }
                        }
                    }
                },
                plugins: {
                    legend: {
                        display: false // Hide legend if needed
                    },
                    datalabels: {
                        display: false // Hide data labels on top of bars
                    },
                    tooltip: {
                        callbacks: {
                            title: function(tooltipItem, data) {
                                // You can customize the tooltip title here
                                return 'Custom Title';
                            },
                            label: function(tooltipItem, data) {
                                // You can customize the tooltip label here
                                return 'Value: ' + tooltipItem.yLabel;
                            }
                        }
                    }
                },

            }
        });





        //  Create a custom plugin for rounded bars
        //  Chart.pluginService.register({
        //      beforeRender: function (chart) {
        //          if (chart.config.type === 'bar') {
        //              chart.config.data.datasets.forEach(function (dataset) {
        //                  dataset.backgroundColor = dataset.backgroundColor.map(function () {
        //                      return 'rgba(67, 24, 255, 0.2)';
        //                  dataset.hoverBackgroundColor = dataset.hoverBackgroundColor.map(function () {
        //                      return '#4318FF';
        //                  });
        //              });
        //          }
        //      }
        //  });
    </script>
@endsection