<?php $__env->startSection('content'); ?>
<style>
.circle { 
   width: 140px;
   height: 140px;
   background: lightgray; 
   -moz-border-radius: 70px; 
   -webkit-border-radius: 70px; 
   border-radius: 70px;
}

.showtime-pill-wrapper {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}
.showtime-pill-container {
    margin: 8px;
}
.showtime-pill-container .showtime-pill {
    border: 1px solid #999;
    color: #4abd5d;
    padding: 4px;
    border-radius: 4px;
    width: 120px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
    font-size: 80%;
}
.showtime-pill-container .showtime-pill .__details .__text {
    margin: 0 auto;
}
.showtime-pill-container .showtime-pill .__details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 2px;
    height: 14px;
}

.oval {
 background-color: ghostwhite;
}

.seat {
  
}

.seat.selected {
  
}

.seat.occupied {
  
}

.seata {
    display: inline-block;
    font-size: 10px;
    line-height: 25px;
    font-weight: 400;
    background: #fff;
    vertical-align: top;

    border: 1px solid #1ea83c;

    width: 25px;
    height: 25px;
    border-radius: 2px;
    color: #1ea83c;
    text-align: center;
    font-size: 10px;
}

a._available {
    display: inline-block;
    font-size: 11px;
    line-height: 25px;
    font-weight: 400;
    background: #fff;
    vertical-align: top;

    border: 1px solid #1ea83c;

    width: 25px;
    height: 25px;
    border-radius: 2px;
    color: #1ea83c;
    text-align: center;
    font-size: 11px;
}

a._available:hover {
  background-color: yellow;
}

a._blocked {

    display: inline-block;
    font-size: 11px;
    line-height: 25px;
    font-weight: 400;
    background: #fff;
    vertical-align: top;

    border: 1px solid grey;

    width: 25px;
    height: 25px;
    border-radius: 2px;
    color: #1ea83c;
    text-align: center;
    font-size: 11px;

    background: #eee!important;
    cursor: default;
    color: #fff!important;
}

a._selected {
    display: inline-block;
    font-size: 11px;
    line-height: 25px;
    font-weight: 400;
    vertical-align: top;


    width: 25px;
    height: 25px;
    border-radius: 2px;
    text-align: center;
    font-size: 11px;

    color: #fff;
    background-color: #1ea83c!important;
    border-color: #1ea83c;
}

td {
    padding:  10px 5px 5px 5px !important;
}

</style>
<script src="<?php echo e(asset('/vendor/apexchart/apexchart.js')); ?>" type="text/javascript"></script>
<script>
      const facilitiesarray = [];
      const facilitynamearray = [];
      const facilitynamelinegrapharray = [];
      const  organisationnamearray = [];
      const organisation_tickets_array = [];
      const org_facility_name_arr = [];


</script>
<!-- row -->
<div class="container-fluid">
    <div class="row">
        <?php $n=0; ?>
        <?php $__currentLoopData = $organisations; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $org): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            <script>
                organisationnamearray.push("<?php echo e($org->short_code); ?>");
                organisation_tickets_array.push("<?php echo e($organisation_tickets_count[$org->id]); ?>");
            </script>
            <?php
                $n++;
                if($n==1)
                {
                    $bgcolour = "bg-primary";
                }
                if($n==2)
                {
                    $bgcolour = "bg-warning";
                }
                if($n==3)
                {
                    $bgcolour = "bg-secondary";
                }
            ?>
            <!-- visitor count -->
            <div class="col-xl-3 col-lg-6 col-sm-6">
                <div class="widget-stat card <?php echo e($bgcolour); ?>">
                    <div class="card-body  p-4">
                        <div class="media">
                            <span class="mr-3">
                                <svg id="icon-orders" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text">
                                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                                    <polyline points="14 2 14 8 20 8"></polyline>
                                    <line x1="16" y1="13" x2="8" y2="13"></line>
                                    <line x1="16" y1="17" x2="8" y2="17"></line>
                                    <polyline points="10 9 9 9 8 9"></polyline>
                                </svg>
                            </span>
                            <div class="media-body text-white">
                                <p class="mb-1">Monthly Visitor Count</p>
                                <h3 class="text-white"><?php echo e($tickets_count_org[$org->id]); ?></h3>
                                <div class="progress mb-2 bg-secondary">
                                    <div class="progress-bar progress-animated bg-light" style="width: "></div>
                                </div>
                                <small><?php echo e($org->organisation_name); ?></small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

             <div class="col-xl-3 col-lg-6 col-sm-6">
                <div class="widget-stat card <?php echo e($bgcolour); ?>">
                    <div class="card-body  p-4">
                        <div class="media">
                            <span class="mr-3">
                                <svg id="icon-orders" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text">
                                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                                    <polyline points="14 2 14 8 20 8"></polyline>
                                    <line x1="16" y1="13" x2="8" y2="13"></line>
                                    <line x1="16" y1="17" x2="8" y2="17"></line>
                                    <polyline points="10 9 9 9 8 9"></polyline>
                                </svg>
                            </span>
                            <div class="media-body text-white">
                                <p class="mb-1">Daily Visitor Count</p>
                                <h3 class="text-white"><?php echo e($tickets_count_org_daily[$org->id]); ?></h3>
                                <div class="progress mb-2 bg-secondary">
                                    <div class="progress-bar progress-animated bg-light" style="width: "></div>
                                </div>
                                <small><?php echo e($org->organisation_name); ?></small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- end -->
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        <!-- total visitors in a month -->
        <div class="col-xl-3 col-lg-6 col-sm-6">
            <div class="widget-stat card bg-danger">
                <div class="card-body p-4">
                    <div class="media">
                        <span class="mr-3">
                            <svg id="icon-orders" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text">
                                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                                    <polyline points="14 2 14 8 20 8"></polyline>
                                    <line x1="16" y1="13" x2="8" y2="13"></line>
                                    <line x1="16" y1="17" x2="8" y2="17"></line>
                                    <polyline points="10 9 9 9 8 9"></polyline>
                            </svg>
                        </span>
                        <div class="media-body text-white">
                            <p class="mb-1">Total Visitor Count (Monthly)</p>
                            <h3 class="text-white"><?php echo e($total_ticket_count); ?></h3>
                            <div class="progress mb-2 bg-secondary">
                               <!-- <div class="progress-bar progress-animated bg-light" style="width: 30%"></div>-->
                            </div>
                            <!--<small>30% Increase in 30 Days</small>-->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- end -->
        <!-- sales revenue blockwise -->
        <?php $cnt = 0; ?>
        <?php $__currentLoopData = $organisations; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $org_sales_revenue): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            <?php
                $cnt++;
                if($cnt==1)
                {
                    $bgcolour_s = "bg-primary";
                }
                if($cnt==2)
                {
                    $bgcolour_s = "bg-warning";
                }
                if($cnt==3)
                {
                    $bgcolour_s = "bg-secondary";
                }
            ?>
            <!-- sales revenue -->
            <div class="col-xl-3 col-lg-6 col-sm-6">
                <div class="widget-stat card <?php echo e($bgcolour_s); ?>">
                    <div class="card-body  p-4">
                        <div class="media">
                            <span class="mr-3">
                                <svg id="icon-orders" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text">
                                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                                    <polyline points="14 2 14 8 20 8"></polyline>
                                    <line x1="16" y1="13" x2="8" y2="13"></line>
                                    <line x1="16" y1="17" x2="8" y2="17"></line>
                                    <polyline points="10 9 9 9 8 9"></polyline>
                                </svg>
                            </span>
                            <div class="media-body text-white">
                                <p class="mb-1">Daily Sales Revenue</p>
                                <h3 class="text-white">
                                    <?php if(isset($sales_revenue_organisation[$org_sales_revenue->id])): ?>
                                        <?php echo e($sales_revenue_organisation[$org_sales_revenue->id]); ?>

                                    <?php else: ?>
                                        <?php echo 0; ?>
                                    <?php endif; ?>
                                </h3>
                                <div class="progress mb-2 bg-secondary">
                                    <div class="progress-bar progress-animated bg-light" style="width: ">

                                    </div>
                                </div>
                                <small><?php echo e($org_sales_revenue->organisation_name); ?></small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- end -->
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        <!-- end-->
        <!-- total sales revenue in a month -->
        <div class="col-xl-3 col-lg-6 col-sm-6">
            <div class="widget-stat card bg-danger">
                <div class="card-body p-4">
                    <div class="media">
                        <span class="mr-3">
                            <svg id="icon-orders" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text">
                                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                                    <polyline points="14 2 14 8 20 8"></polyline>
                                    <line x1="16" y1="13" x2="8" y2="13"></line>
                                    <line x1="16" y1="17" x2="8" y2="17"></line>
                                    <polyline points="10 9 9 9 8 9"></polyline>
                            </svg>
                        </span>
                        <div class="media-body text-white">
                            <p class="mb-1">Total Sales Revenue (Daily)</p>
                            <h3 class="text-white"><?php echo e($total_sales_revenue); ?></h3>
                            <div class="progress mb-2 bg-secondary">
                               <!-- <div class="progress-bar progress-animated bg-light" style="width: 30%"></div>-->
                            </div>
                            <!--<small>30% Increase in 30 Days</small>-->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- end -->
        <!-- check seat availability for a facility -->
        <div class="col-12">
            <div class="card card-body">
                <div class="table-responsive">
                    <div class="card-header">
                        <span style="color: blue;">Check Seat Availability</span>
                    </div>
                    <table>
                        <tr>
                            <td style="color: brown;height: 50px;" colspan="3">
                                <div class="form-row">
                                    <div class="form-group col-12">
                                        <div class="form-check form-check-inline">
                                           <span style="width: 100%"> Date of Visit : &nbsp;&nbsp;</span>
                                           <input name="showDate" class="form-control" id="showDate" type="date" value="<?php echo e(date('Y-m-d')); ?>" onchange="loadshowdetails(this.value);">
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="3" id="showdet">
                                <table width="100%" class="table table-sm table-responsive-lg mb-0" style="font-size:90%">
                                    <?php
                                        $n= 0;
                                    ?>
                                    <?php $__currentLoopData = $facilities_org; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $facilities): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                        <?php
                                            $facility_id = $facilities->id;
                                            $n++;
                                        ?>
                                        <script>
                                            facilitiesarray.push(<?php echo e($facilities->id); ?>)
                                        </script>
                                        <tr class="btn-reveal-trigger">
                                            <td class="py-2" style="height: 50px;">
                                                <?php echo e($facilities->facility_name); ?>

                                            </td>
                                            <td class="py-2" style="height: 50px;">
                                                <div class="showtime-pill-wrapper">
                                                    <?php $__currentLoopData = $facilities->showtimings; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $show): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>     
                                                        <?php if($showon[$show->id]): ?>                                                       
                                                        <div class="showtime-pill-container <?php echo e($facilities->id); ?>" onclick="showselect(this, '<?php echo e($facilities->id); ?>', '<?php echo e($show->id); ?>');">
                                                            <a class="showtime-pill" href="#!"  data-attributes=""  >
                                                                <div class="__details">
                                                                    <div class="__text"><?php echo e(date("g:i A", strtotime($show->from_time))); ?>

                                                                    <?php if(!$show->dont_show_to_time): ?>
                                                                    -<?php echo e(date("g:i A", strtotime($show->to_time))); ?>

                                                                    <?php endif; ?>
                                                                    </div>
                                                                </div>
                                                            </a>
                                                        </div> 
                                                        <?php endif; ?>                                                            
                                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                                </div>
                                            </td>
                                            <td>
                                                <span id="available<?php echo e($facilities->id); ?>" style="color:blue; font-size: small; font-weight: bold;"></span></p> 
                                            </td>
                                        </tr>
                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                </table>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <!-- end -->
        <!-- sales revenue line chart-->
        <div class="col-6">
            <div id="user-activity" class="card">
                <div class="card-header border-0 pb-0 d-sm-flex d-block">
                    <div>
                        <h4 class="card-title mb-1">Sales Revenue</h4>
                    </div>
                </div>
                <div class="card-header border-0 pb-0 d-sm-flex d-block">
                    <div class="card-action card-tabs mt-3 mt-sm-0">
                        <select name="organisation_id" id="organisation_id" class="form-control" required onchange="load_details();">
                            <?php if($user_organisation_id==""): ?>
                                <option value="All">All</option>
                            <?php endif; ?>
                            <?php $__currentLoopData = $organisations; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $organisation): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <option value="<?php echo e($organisation->id); ?>"><?php echo e($organisation->organisation_name); ?>&nbsp;&nbsp;<?php echo e($organisation->city); ?></option>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </select>
                    </div>
                </div>
                <div class="card-header border-0 pb-0 d-sm-flex d-block">
                    <div class="card-action card-tabs mt-3 mt-sm-0" id="tab_content">
                        <ul class="nav nav-tabs" role="tablist" id="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" data-toggle="tab" href="monthly" id="mon" role="tab" aria-selected="true" onclick="load_details('monthly');">
                                    Monthly
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" data-toggle="tab" href="weekly" id="week" role="tab" aria-selected="false" onclick="load_details('weekly');">
                                    Weekly
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" data-toggle="tab" href="today" id="tday" role="tab" aria-selected="false" onclick="load_details('today');">
                                    Today
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="card-body">
                    <div class="tab-content" id="myTabContent">
                        <div class="tab-pane fade active show" id="user" role="tabpanel">
                            <div class="chartjs-size-monitor">
                                <div class="chartjs-size-monitor-expand">
                                    <div class=""></div>
                                </div>
                                <div class="chartjs-size-monitor-shrink">
                                    <div class=""></div>
                                </div>
                            </div>
                            <div id="canvasdiv">
                                <canvas id="activityLinechart" class="chartjs chartjs-render-monitor" height="350" style="display: block; width: 1041px; height: 350px;" width="1041"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- end -->
        <!-- facility wise visitor count donut chart -->
        <div class="col-6">
            <div class="card">
                <div class="card-header border-0 pb-3 d-sm-flex d-block ">
                    <h4 class="card-title">Facilitywise Visitor Count</h4>
                </div>
                <div class="card-header border-0 pb-3 d-sm-flex d-block ">
                    
                    <select name="organisation_id_tickets" id="organisation_id_tickets" class="form-control" required onchange="load_tickets()">
                          <?php $__currentLoopData = $organisations; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $organisation): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <?php
                                $orgid = $organisation->id;
                            ?>
                            <?php if(isset($facility_name_arr[$orgid])): ?>
                                <?php $__currentLoopData = $facility_name_arr[$orgid]; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $fac_name): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <script>
                                        facilitynamearray.push("<?php echo e($fac_name); ?>");
                                    </script>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            <?php endif; ?>                                
                            <option value="<?php echo e($organisation->id); ?>"><?php echo e($organisation->organisation_name); ?>&nbsp;&nbsp;<?php echo e($organisation->city); ?></option>
                          <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </select>
                </div>
                <div class="card-header border-0 pb-3 d-sm-flex d-block ">
                    <div class="d-flex mt-3 mt-sm-0">
                        <?php
                            $todate = date("Y-m-d");
                        ?>
                        <input type="date" name="date_sel" id="date_sel" class="form-control" onchange="load_tickets();" value="<?php echo e($todate); ?>">
                    </div>
                </div>
                <div class="card-body">
                    <div class="row mx-0 align-items-center">
                        <div class="col-sm-8 col-md-7 col-xxl-7 px-0 text-center mb-3 mb-sm-0">
                            <div  id="dchartdiv">   
                                <div id="dchart" class="d-inline-block"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>  
        <!-- end -->
        <!-- weekly visitor count line graph-->
        <div class="col-xl-6 col-lg-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Weekly Visitor Count</h4>
                </div>
                <div class="card-header border-0 pb-0 d-sm-flex d-block">
                    <div class="card-action card-tabs mt-3 mt-sm-0">
                        <select name="organisation_id_weekly" id="organisation_id_weekly" class="form-control" required onchange="load_weekly_tickets();">
                              <?php $__currentLoopData = $organisations; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $organisation): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <?php
                                    $orgid = $organisation->id;
                                ?>
                                <?php if(isset($facility_name_arr[$orgid])): ?>
                                    <?php $__currentLoopData = $facility_name_arr[$orgid]; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $fac_name): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                        <script>
                                            facilitynamelinegrapharray.push("<?php echo e($fac_name); ?>");
                                        </script>
                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                <?php endif; ?>  
                                <option value="<?php echo e($organisation->id); ?>"><?php echo e($organisation->organisation_name); ?>&nbsp;&nbsp;<?php echo e($organisation->city); ?></option>
                              <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </select>
                    </div>
                </div>
                <div id="linediv">
                    <div id="simple-line-chart" class="ct-chart ct-golden-section chartlist-chart" ></div>
                </div>
            </div>
        </div>
        <!-- end -->
        <!-- org wise visitor count bar chart -->
        <div class="col-xl-6 col-lg-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Organisation wise Visitor Count</h4>
                </div>
                <div class="card-header border-0 pb-3 d-sm-flex d-block ">
                    <div class="d-flex mt-3 mt-sm-0">
                        <?php
                            $todate = date("Y-m-d");
                        ?>
                        <input type="date" name="date_sel_bargraph" id="date_sel_bargraph" class="form-control" onchange="load_tickets_bargraph();" value="<?php echo e($todate); ?>">
                    </div>
                </div>
                <div id="bargraphdiv">
                    <canvas id="barChart_1"></canvas>
                </div>
            </div>
        </div>
        <!-- end -->
    </div>
    <div class="row modal-dialog modal-dialog-centered" id="spinnerdiv" style="display: none;">
        <div class="col-xl-12" style="text-align: center;">
            <div class="spinner-border"></div>
            <h3>Please wait while we load</h3>
        </div>
    </div>

        <div class="col-xl-12 col-lg-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Weekly Visitor Count(Statistics)</h4>
                </div>
                <div class="card-body">
                    <table border="1" width="100%" cellpadding="0" cellspacing="0">
                       
                        
                        <tr><td><b>Facility</b></td><td><?php echo e($date_show[0]); ?></td><td><?php echo e($date_show[1]); ?></td><td><?php echo e($date_show[2]); ?></td><td><?php echo e($date_show[3]); ?></td><td><?php echo e($date_show[4]); ?></td><td><?php echo e($date_show[5]); ?></td><td><?php echo e($date_show[6]); ?></td></tr>

                       

                      
                        <?php
                            $org_ticket_array = json_decode($org_facility_tickets);
                            foreach($org_ticket_array as $org_ticket)
                            {
                         ?>
                         
                            <tr><td><?php echo e($org_ticket->name); ?></td><td style="text-align:center;"><?php echo e($org_ticket->data[0]); ?></td><td style="text-align:center;"><?php echo e($org_ticket->data[1]); ?></td><td style="text-align:center;"><?php echo e($org_ticket->data[2]); ?></td><td style="text-align:center;"><?php echo e($org_ticket->data[3]); ?></td><td style="text-align:center;"><?php echo e($org_ticket->data[4]); ?></td><td style="text-align:center;"><?php echo e($org_ticket->data[5]); ?></td><td style="text-align:center;"><?php echo e($org_ticket->data[6]); ?></td></tr>

                         <?php       

                            }
                        ?>
                    </table>
                </div>
               
            </div>
        </div>
</div>
<!-- line chart -- weekly ticket chart -->
<?php
    $org_ticket_array = json_decode($org_facility_tickets);
    //dd($org_ticket_array);
    $cnt=0;
?>
<?php $__currentLoopData = $org_ticket_array; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $org_ticket): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
    <script>
        org_facility_name_arr[<?php echo e($cnt); ?>] = {};
        org_facility_name_arr[<?php echo e($cnt); ?>]['data'] = new Array();
    </script>
    <script>org_facility_name_arr[<?php echo e($cnt); ?>]['name'] = '<?php echo e($org_ticket->name); ?>'; </script>
    <?php
        $cnt_data =0;
    ?>
    <?php $__currentLoopData = $org_ticket->data; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $data): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
        <script>org_facility_name_arr[<?php echo e($cnt); ?>]['data'][<?php echo e($cnt_data); ?>] = <?php echo e($data); ?>; </script>
        <?php
            $cnt_data++;
        ?>
    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
    <?php
        $cnt++;
    ?>
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
<script>
    var orgticketlinegraphjson = JSON.stringify(org_facility_name_arr);
    //console.log(orgticketlinegraphjson);
</script>
<!-- end -->
<script>
    function showselect(obj, facilityid, showid)
    {
        $('#spinnerdiv').show();
        $("."+facilityid).css('background-color', '');

        if(obj.style.backgroundColor == 'lightgreen')
        {
            obj.style.backgroundColor = '';
            obj.style.color = '#4abd5d';
        }
        else
        {
            obj.style.backgroundColor = 'lightgreen';
            
        }
        //select this facility
        //fetch available seats for this facility
        var showdate = $('#showDate').val();
        $.ajax({
              type: "GET",
              url: "<?php echo e(url('fetchAvailableSeatsOffline')); ?>/"+facilityid+"/"+showid+"/"+showdate,
              success: function( result ) 
              {  
                $('#available'+facilityid).html("Available: "+result);
                $('#spinnerdiv').hide();
            }
        }); 
    }
    function clearselection()
    {
        for(let i = 0; i < facilitiesarray.length; i++)
        {    
            var facilityid = facilitiesarray[i];
            $('#available'+facilityid).html('');
            $('.showtime-pill-container').css('background-color', '');
            //$('#showdiv'+facilityid).html('');
        }
    }
    function getRandomColor() 
    {
        var letters = '0123456789ABCDEF'.split('');
        var color = '#';
        for (var i = 0; i < 6; i++ ) {
            color += letters[Math.floor(Math.random() * 16)];
        }
        return color;
    }
    function loadshowdetails(dateofvisit)
    {
        clearselection();
        $.ajax({
           type:'GET',
           url: "<?php echo e(url('get_showdetails')); ?>/"+dateofvisit,
           success:function(data)
           {
                document.getElementById("showdet").innerHTML = data;
           }
        });
    }
    ///////////////activity line chart and donut chart and simple line chart///////////////////////////////////
    (function($) {
        /* "use strict" */
        var dzChartlist = function(){
        var screenWidth = $(window).width();
        ///////////////sales revenue chart///////////////////////////////////
        var activityBar = function(){
            var activity = document.getElementById("activityLinechart");
            var inputs = {
                min: 20,
                max: 80,
                count: 8,
                decimals: 2,
                continuity: 1
            };

            if (activity !== null) {
                var activityData = [
                    {
                        first: ["<?php echo e($invoice_amt_count); ?>"]
                    }
                ];
                
                activity.height = 350;
                
                var config = {
                    type: "line",
                    data: {
                        labels: [
                            "January",
                            "February",
                            "March",
                            "April",
                            "May",
                            "June",
                            "July",
                            "August",
                            "September",
                            "October",
                            "November",
                            "December",
                            "",
                            ""
                        ],
                        datasets: [
                            {
                                label: "Monthly Invoice",
                                data:  [<?php echo e($invoice_amt_count); ?>],
                                borderColor: '#2130b8',
                                borderWidth: "5",
                                barThickness:'flex',
                                backgroundColor: 'rgba(47, 76, 221, 0.05)',
                                minBarLength:10
                            }
                        ]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        
                        legend: {
                            display: false
                        },
                        scales: {
                            yAxes: [{
                                 gridColor: "navy",
                                gridLines: {
                                    color: "rgba(0,0,0,0.1)",
                                    height: 50,
                                    drawBorder: true
                                },
                                ticks: {
                                    fontColor: "#585858",
                                    max: <?php echo e($invoice_amt_max); ?>,
                                    min: 0,
                                    stepSize: <?php echo e($invoice_step_size); ?>

                                },
                            }],
                            xAxes: [{
                                barPercentage: 0.3,
                                
                                gridLines: {
                                    display: false,
                                    zeroLineColor: "transparent"
                                },
                                ticks: {
                                    stepSize: 20,
                                    fontColor: "#585858",
                                    fontFamily: "Nunito, sans-serif"
                                }
                            }]
                        },
                        tooltips: {
                            mode: "index",
                            intersect: false,
                            titleFontColor: "#888",
                            bodyFontColor: "#555",
                            titleFontSize: 12,
                            bodyFontSize: 15,
                            backgroundColor: "rgba(255,255,255,1)",
                            displayColors: true,
                            xPadding: 10,
                            yPadding: 7,
                            borderColor: "rgba(220, 220, 220, 1)",
                            borderWidth: 1,
                            caretSize: 6,
                            caretPadding: 10
                        }
                    }
                };

                var ctx = document.getElementById("activityLinechart").getContext("2d");
                var myLine = new Chart(ctx, config);
                console.log(activityData);
                var items = document.querySelectorAll("#user-activity .nav-tabs .nav-item");
                items.forEach(function(item, index) {
                    item.addEventListener("click", function() {
                        //config.data.datasets[0].data = activityData[index].first;
                        myLine.update();
                    });
                });
            }
        } 
        //////////////////////////////////////////////////
        
        ////////////facility wise donut chart//////////////////////////////////////
        var donutChart = function(){
            //alert(facilitynamearray);            
            var options = {
                series: [<?php echo e($ticket_facility); ?>],
                labels: facilitynamearray,
                
                chart: {
                    width: 220,
                    height: 220,
                    type: 'donut',
                    sparkline: {
                        enabled: true,
                    },
                    
                },
                plotOptions: {
                    pie: {
                        customScale: 1,
                        donut: {
                            size: '40%'
                            
                        }
                    }
                },
                dataLabels: {
                    enabled: true,
                    colors : getRandomColor(),
                },
                responsive: [{
                    breakpoint: 1300,
                    options: {
                        chart: {
                            width: 120,
                            height: 120
                        },
                    }
                }],
                legend: {
                    show: false
                }
            };
            var chart = new ApexCharts(document.querySelector("#dchart"), options);
            chart.render();
        } 
        //////////////////////////////////////////////////   

        ////facility wise ticket - line chaty////////////////////
        var simpleLineChart = function(){
            //Simple line chart            
            new Chartist.Line('#simple-line-chart', 
                {
                    labels: ['Sunday','Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday',''],
                    series:  org_facility_name_arr,
                }, 
                {
                    fullWidth: true,
                    chartPadding: 
                    {
                      right: 40
                    },
                    plugins: [
                      Chartist.plugins.tooltip()
                    ]
                }
            );
            
        }
        //////////////////////////////////////////////////

        //////organisation wise bar chart//////////////
        var barChart1 = function(){
            var organisation_tickets = new Array();
            var j=0;
            for (var key in organisation_tickets_array) 
            {
                organisation_tickets[j] = organisation_tickets_array[key]; 
                j++;                     
            }
            //console.log(organisationnamearray);
            if(jQuery('#barChart_1').length > 0 ){
                const barChart_1 = document.getElementById("barChart_1").getContext('2d');
        
                barChart_1.height = 100;

                new Chart(barChart_1, {
                    type: 'bar',
                    data: {
                        defaultFontFamily: 'Poppins',
                        labels: organisationnamearray,
                        datasets: [
                            {
                                label: "Organisation wise Ticket Count",
                                data: organisation_tickets,
                                barThickness: 6,
                                maxBarThickness: 8,
                                minBarLength: 3,
                                borderColor: 'rgba(34, 47, 185, 1)',
                                borderWidth: 1,
                                backgroundColor: 'rgba(34, 47, 185, 1)'
                            }
                        ]
                    },
                    options: {
                        legend: false, 
                        scales: {
                            yAxes: [{
                                ticks: {
                                    beginAtZero: true
                                }
                            }],
                            xAxes: [{
                                // Change here
                                barPercentage: 0.5
                            }]
                        }
                    }
                });
            }
        }
        //////////////////////////////////////////////////

        /* Function ============ */
            return {
                init:function(){
                },
                load:function(){
                    activityBar();
                    donutChart();
                    simpleLineChart();
                    barChart1();
                },   
                resize:function(){
                }
            }
        }();
        jQuery(document).ready(function(){
        });
        jQuery(window).on('load',function(){
            setTimeout(function(){
                dzChartlist.load();
            }, 1000); 
        });
        jQuery(window).on('resize',function(){ 
        });     
    })(jQuery);

    function load_details(page="")
    {
        $('#activityLinechart').remove(); // this is my <canvas> element
        $('#canvasdiv').append('<canvas id="activityLinechart" class="chartjs chartjs-render-monitor" height="350" style="display: block; width: 1041px; height: 350px;" width="1041"></canvas>');

        if(page=="")
        {
            page = "monthly";
            $('#week').removeClass('active');
            $('#tday').removeClass('active');
            $('#mon').addClass('active');
        }

        
        var organisation_id = document.getElementById("organisation_id").value;
        var csrf = "<?php echo e(csrf_token()); ?>";
        $.ajax({
           type:'GET',
           url: "<?php echo e(url('get_details')); ?>/"+organisation_id+"/"+page,
           success:function(data)
           {
                var invoice_amt_count = new Array();
                var invoice_amt_max = 0;
                var dataarr = JSON.parse(data);
                //console.log(dataarr);
                var i = 0;
                for (var key in dataarr) 
                {

                    if(invoice_amt_max < dataarr[key])
                    {
                        invoice_amt_max  = parseInt(dataarr[key]); 
                    }
                    invoice_amt_count[i] = parseInt(dataarr[key]);    
                    i++;                     
                }
                var invoice_step_size = invoice_amt_max/5;
                var activity = document.getElementById("activityLinechart");
                var inputs = {
                    min: 20,
                    max: 80,
                    count: 8,
                    decimals: 2,
                    continuity: 1
                };
                if (activity !== null) {
                    var activityData = [
                        {
                            first: invoice_amt_count
                        }
                    ];
                    activity.height = 350;
                    if(page=="monthly")
                    {
                        var labelstr = new Array( "January","February","March","April","May","June","July","August","September","October","November","December","","" );
                    }
                    if(page=="weekly")
                    {
                        var labelstr = new Array( "Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday","" );
                    }
                    if(page=="today")
                    {
                        const todate = new Date();
                        const yyyy = todate.getFullYear();
                        let mm = todate.getMonth() + 1; // Months start at 0!                        
                        let dd = todate.getDate();
                        if (dd < 10) 
                            { dd = '0'+dd; }
                        if (mm < 10) 
                            { mm = '0'+mm; }
                        var currentdate = dd+'-'+mm+'-'+yyyy;
                        var labelstr = new Array("10:00","12:00","14:00","16:00","18:00","");
                    }
                    //console.log(invoice_amt_count);
                    var config = {
                        type: "line",
                        data: {
                            labels: labelstr,
                            datasets: [
                                {
                                    label: "Sales Invoice",
                                    data:  invoice_amt_count,
                                    borderColor: '#2130b8',
                                    borderWidth: "5",
                                    barThickness:'flex',
                                    backgroundColor: 'rgba(47, 76, 221, 0.05)',
                                    minBarLength:10
                                }
                            ]
                        },
                        options: {
                            responsive: true,
                            maintainAspectRatio: false,
                            
                            legend: {
                                display: false
                            },
                            scales: {
                                yAxes: [{
                                     gridColor: "navy",
                                    gridLines: {
                                        color: "rgba(0,0,0,0.1)",
                                        height: 50,
                                        drawBorder: true
                                    },
                                    ticks: {
                                        fontColor: "#585858",
                                        max: invoice_amt_max,
                                        min: 0,
                                        stepSize: invoice_step_size
                                    },
                                }],
                                xAxes: [{
                                    barPercentage: 0.3,
                                    
                                    gridLines: {
                                        display: false,
                                        zeroLineColor: "transparent"
                                    },
                                    ticks: {
                                        stepSize: 20,
                                        fontColor: "#585858",
                                        fontFamily: "Nunito, sans-serif"
                                    }
                                }]
                            },
                            tooltips: {
                                mode: "index",
                                intersect: false,
                                titleFontColor: "#888",
                                bodyFontColor: "#555",
                                titleFontSize: 12,
                                bodyFontSize: 15,
                                backgroundColor: "rgba(255,255,255,1)",
                                displayColors: true,
                                xPadding: 10,
                                yPadding: 7,
                                borderColor: "rgba(220, 220, 220, 1)",
                                borderWidth: 1,
                                caretSize: 6,
                                caretPadding: 10
                            }
                        }
                    };

                    var ctx = document.getElementById("activityLinechart").getContext("2d");
                    var myLine = new Chart(ctx, config);
                    ////update the monthly,weekly and today links
                    var items = document.querySelectorAll("#user-activity .nav-tabs .nav-item");
                    //console.log(items);
                    //console.log(activityData);
                    items.forEach(function(item, index) {
                        //console.log(item);
                        //console.log(index);
                        item.addEventListener("click", function() {
                            config.data.datasets[0].data = activityData[index].first;
                            myLine.update();
                        });
                    });
                    ///////////////////////////////////////////////////////
                }
           }
        });    
    }

    function load_tickets()
    {
        $('#dchartdiv').html(""); // this is my <canvas> element
        $('#dchartdiv').html('<div id="dchart" class="d-inline-block"></div>');
        var organisation_id_tickets = document.getElementById("organisation_id_tickets").value;
        var csrf = "<?php echo e(csrf_token()); ?>";
        var date_sel = document.getElementById("date_sel").value;
        $.ajax({
           type:'GET',
           url: "<?php echo e(url('get_tickets')); ?>/"+organisation_id_tickets+"/"+date_sel,
           success:function(data)
           {
                var ticket_facility = new Array();
                var dataarr = JSON.parse(data);
                var j=0;
                for (var key in dataarr) 
                {
                    ticket_facility[j] = dataarr[key]; 
                    j++;                     
                }
                var options = {
                    series: ticket_facility,
                    labels : facilitynamearray,
                    chart: 
                    {
                        width: 220,
                        height: 220,
                        type: 'donut',
                        sparkline: 
                        {
                            enabled: true,
                        },
                        
                    },
                    plotOptions: 
                    {
                        pie: 
                        {
                            customScale: 1,
                            donut: 
                            {
                                size: '40%'
                                
                            }
                        }
                    },
                    dataLabels: 
                    {
                        enabled: true,
                        colors : getRandomColor(),
                    },
                    responsive: [{
                        breakpoint: 1300,
                        options: 
                        {
                            chart: 
                            {
                                width: 120,
                                height: 120
                            },
                        }
                    }],
                    legend: 
                    {
                        show: false
                    }
                };
                var chart = new ApexCharts(document.querySelector("#dchart"), options);
                chart.render();
           }
        });
    }

    function load_weekly_tickets()
    {
        $('#linediv').html(""); // this is my <canvas> element
        $('#linediv').html('<div id="simple-line-chart" class="ct-chart ct-golden-section chartlist-chart" ></div>');
        var organisation_id_weekly = document.getElementById("organisation_id_weekly").value;
        //alert(organisation_id_weekly);
        var csrf = "<?php echo e(csrf_token()); ?>";
        $.ajax({
           type:'GET',
           url: "<?php echo e(url('get_weekly_tickets')); ?>/"+organisation_id_weekly,
           success:function(data)
           {
                new Chartist.Line('#simple-line-chart', 
                    {
                        labels: ['Sunday','Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', ''],
                        series: data,
                    },
                    {
                        fullWidth: true,
                        chartPadding: {
                            right: 40
                        },
                        plugins: [

                          Chartist.plugins.tooltip()
                        ]
                    }
                );
                
           }
        });
    }

    function load_tickets_bargraph()
    {
        //$('#barChart_1').remove(); // this is my <canvas> element
        //$('#bargraphdiv').append('<canvas id="barChart_1"></canvas>');

        var date_sel_bargraph = document.getElementById("date_sel_bargraph").value;
        //alert(date_sel_bargraph);
        $.ajax({
           type:'GET',
           url: "<?php echo e(url('get_organisation_tickets')); ?>/"+date_sel_bargraph,
           success:function(data)
           {
                var organisation_tickets = new Array();
                var j=0;
                for (var key in data) 
                {
                    organisation_tickets[j] = data[key]; 
                    j++;                     
                }
                //console.log(organisationnamearray);
                //console.log(organisation_tickets);
                if(jQuery('#barChart_1').length > 0 ){
                    const barChart_1 = document.getElementById("barChart_1").getContext('2d');
            
                    barChart_1.height = 100;

                    new Chart(barChart_1, {
                        type: 'bar',
                        data: {
                            defaultFontFamily: 'Poppins',
                            labels: organisationnamearray,
                            datasets: [
                                {
                                    label: "Organisation wise Ticket Count",
                                    data: organisation_tickets,
                                    barThickness: 6,
                                    maxBarThickness: 8,
                                    minBarLength: 2,
                                    borderColor: 'rgba(34, 47, 185, 1)',
                                    borderWidth: 1,
                                    backgroundColor: 'rgba(34, 47, 185, 1)'
                                }
                            ]
                        },
                        options: {
                            legend: false, 
                            scales: {
                                yAxes: [{
                                    ticks: {
                                        beginAtZero: true
                                    }
                                }],
                                xAxes: [{
                                    // Change here
                                    barPercentage: 0.5
                                }]
                            }
                        }
                    });
                }
           }
        });
    }

//////////////////////////////////////////////

</script>
<?php $__env->stopSection(); ?>         
<?php echo $__env->make('layout.dashboard', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /var/www/html/ksstmorg/resources/views/home.blade.php ENDPATH**/ ?>