@extends('business.main')
@section('content')
<div class='row align-items-center justify-content-center d-flex   mt-lg-4 mt-md-3 mt-3' >
    <div class="col-4 col-md-6 col-12" >
        <form method="POST" action="submit_business_profile" class='business-login-form rounded-4 d-flex justify-content-between flex-divumn p-3'>
          @csrf
            <div >
                <input type="hidden" name="user_id" value="{{ session('userId') }}">

                <div class='inter text-center mt-2'>
                    <h4 class="font-24 fw-bold  text-dak-blue">Start Building your Business Profile</h4>
                    <p class="font-14 text-dak-gray ">Providing this information ensures the best TimeLink experience for your business and helps us understand and serve you better. </p>
                </div>
                <div class='login-form' >

                    <div class="input-group my-3 rounded-4">
                        <span class="input-group-text border-0 ps-3" id="basic-addon1"><i class="fa-regular fa-envelope"></i></span>
                        <input type="text" name="business_name" required class="form-control border-0 p-3 ps-0 rounded-4 fw-semibold" placeholder='Business name*' />
                    </div>
                    <div class="input-group my-3 rounded-4">
                        <span class="input-group-text border-0 ps-3" id="basic-addon1"><i class="fa-regular fa-envelope"></i></span>
                        <input type="text" name="business_category" required class="form-control border-0 p-3 ps-0 rounded-4 fw-semibold" placeholder='Business category*' />
                    </div>


                    <p class="font-14 text-dak-gray inter mt-3">By continuing, you’re agreeing to these <u class='text-blue fw-semibold cursor-pointer'>Terms of Service</u> and <u class='text-blue fw-semibold cursor-pointer'> Privacy Policy</u></p>
                   <a href="BusinessEssentials.html">

                       <div>
                           <Button type='submit' class='btn-blue rounded-4 inter px-3 mt-2 p-3 w-100 fw-bold font-16 text-capitalize'>Continue</Button>
                       </div>
                   </a>
                </div>
            </div>

        </form>


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