<?php $__env->startSection('content'); ?>
    <main class="main-content">
        <div class="container">
            <!-- begin::page header -->
            <div class="page-header d-md-flex align-items-center justify-content-between">
                <div>
                    <h3>Admin</h3>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="javascript:;">Dashboard</a></li>
                        </ol>
                    </nav>
                </div>
            </div>
            <!-- end::page header -->
            <?php if (isset($component)) { $__componentOriginal8a5ba9c90b64d384232e9948b1023e746ba08e74 = $component; } ?>
<?php $component = $__env->getContainer()->make(App\View\Components\FlashMessage::class, []); ?>
<?php $component->withName('flashMessage'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php $component->withAttributes([]); ?>
<?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal8a5ba9c90b64d384232e9948b1023e746ba08e74)): ?>
<?php $component = $__componentOriginal8a5ba9c90b64d384232e9948b1023e746ba08e74; ?>
<?php unset($__componentOriginal8a5ba9c90b64d384232e9948b1023e746ba08e74); ?>
<?php endif; ?>

            
            <div class="card">
                <div class="card-body px-5">
                <div class="" id="chart_div" style="width: 100%; height:auto;"></div>
                   
                </div>
            </div>

        <div class="row">
            <div class="col-3" >
                <a href="<?php echo e(asset('location-list')); ?>"><div style="height:120px;" class="card d-flex cursor p-4 align-items-center justify-content-center">
                    <h6 class="card-title">LOCATION</h6>
                    <h6 class="font-size-23"><?php echo e($location); ?></h6>
                </div></a>
            </div>

            <div class="col-3" >
                <div style="height:120px;" class="card d-flex cursor p-4 align-items-center justify-content-center">
                    <h6 class="card-title">USHER</h6>
                    <h6 class="font-size-23"><?php echo e($usher); ?></h6>
                </div>
            </div>

            <div class="col-3" >
                <div style="height:120px;" class="card d-flex cursor p-4 align-items-center justify-content-center">
                    <h6 class="card-title">HOST</h6>
                    <h5 class="font-size-23"><?php echo e($hosts); ?></h5>
                </div>
            </div>

            <div class="col-3" >
                <div style="height:120px;" class="card d-flex cursor p-4 align-items-center justify-content-center">
                    <h6 class="card-title">VISITORS</h6>
                    <h5 class="font-size-23"><?php echo e($visitor); ?></h5>
                </div>
            </div>       
        </div>

        <div class="row d-flex justify-content-end">
            <div class="col-6">
                <div class="card">
                    <h3 class="text-center" style="position: relative;top:15px;">How to create organization</h3>
                    <div class="p-3 pt-4">
                        <iframe  src="https://www.youtube.com/embed/gl7HG0w3cLk?si=i3k6KGHgvtTqImCg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen style="width:100%;height: 300px;border-radius:2px;"></iframe>
                    </div>
                </div>
            </div>
        </div>

        </div>
        <?php if(Auth::user()->hasRole('admin')): ?>
        <p class="d-none has-role" roledata="admin"></p>
        <?php endif; ?>
        <?php if(Auth::user()->hasRole('usher')): ?>
        <p class="d-none has-role" roledata="usher"></p>
        <?php endif; ?>
        <?php if(Auth::user()->hasRole('visitor')): ?>
        <p class="d-none has-role" roledata="visitor"></p>
        <?php endif; ?>
    </main>
<?php $__env->stopSection(); ?>
<?php $__env->startPush('footer-script'); ?>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script>
    var role = $(".has-role").attr("roledata");
    //console.log(role);
    if(role=="admin")
    {   
        var visits = "<?php echo $monthly_visits ?>";
        var hosts = "<?php echo $monthly_hosts ?>";
        var users = "<?php echo $monthly_users ?>";
        var usher = "<?php echo $monthly_usher ?>";
        visits = (Number(visits));
        hosts = (Number(hosts));
        users = (Number(users));
        usher = (Number(usher));
        //console.log(hosts);
        var title_date = new Date();
        var year = title_date.getFullYear();
        var month = ('0' + (title_date.getMonth() + 1)).slice(-2); // Adding leading zero if needed
        var day = ('0' + title_date.getDate()).slice(-2); // Adding leading zero if needed

        // Concatenate the year, month, and day with hyphens
        var c_date = year + '-' + month + '-' + day;

        var date = new Date();

        var options = { 
            year: 'numeric', 
            month: 'long' 
        };
        var formattedDate = date.toLocaleDateString('en-US', options);

        //console.log(formattedDate);

        google.charts.load('current', {'packages':['corechart']});
        google.charts.setOnLoadCallback(drawChart);

      function drawChart() 
      {
        var data = google.visualization.arrayToDataTable([
          ['invoiced', 'Visits','Users','Hosts','Usher'],
          [c_date,  visits,users,hosts,usher]        
          
        ]);

        

        var options = {
            title: formattedDate,
            hAxis: {title: c_date,  titleTextStyle: {color: '#333'}},
            vAxis: {minValue: 0},
            areaOpacity: 0,
            chartArea: {
                bottom: 30 // Adjust the bottom margin as needed
            }
        };

        var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    }
    if(role=="usher" || role=="visitor")
    {
        var visits = "<?php echo $monthly_visits ?>";
       
        visits = (Number(visits)+1);
        
        //console.log(visits);
        var title_date = new Date();
        var year = title_date.getFullYear();
        var month = ('0' + (title_date.getMonth() + 1)).slice(-2); // Adding leading zero if needed
        var day = ('0' + title_date.getDate()).slice(-2); // Adding leading zero if needed

        // Concatenate the year, month, and day with hyphens
        var c_date = year + '-' + month + '-' + day;

        var date = new Date();

        var options = { 
            year: 'numeric', 
            month: 'long' 
        };
        var formattedDate = date.toLocaleDateString('en-US', options);

        //console.log(formattedDate);

        google.charts.load('current', {'packages':['corechart']});
        google.charts.setOnLoadCallback(drawChart);

      function drawChart() 
      {
        var data = google.visualization.arrayToDataTable([
          ['invoiced', 'Visits'],
          [c_date,  visits]        
          
        ]);

        

        var options = {
            title: formattedDate,
            hAxis: {title: c_date,  titleTextStyle: {color: '#333'}},
            vAxis: {minValue: 0},
            areaOpacity: 0,
            chartArea: {
                bottom: 30 // Adjust the bottom margin as needed
            }
        };

        var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    }
</script>
<?php $__env->stopPush(); ?>

<?php echo $__env->make('layout', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH F:\xampp\htdocs\visitor_management\resources\views/dashboard/dashboard.blade.php ENDPATH**/ ?>