@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 Acess</h4>
            <p class="font-14   ">Manage, monitor and maximise 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 class='login-form' >
                <div class='inter '>
                    <h4 class="font-24 fw-bold  text-dak-blue">Business Sign Up</h4>
                    <p class="font-14 text-dak-gray ">Enter the email address associated with your account and we will send you a single use OTP.</p>
                </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-envelope"></i></span>
                    <input type="email" required class="form-control border-0 ps-0 rounded-4 fw-semibold">
                </div>
                <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'>Continue</Button>
                    
                </div>
                <div class="text-center  mt-4">
                    <a href="{{ route('login') }}">
                    <span class="font-16 fw-bold cursor-pointer admin-text-blue inter">Back to Sign In</span>
                    </a>
                </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