@extends('app-new')@push('head-script') 
<!-- BEGIN: Vendor CSS-->
<link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/charts/apexcharts.css">
<link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/extensions/toastr.min.css">
<!-- END: Vendor CSS-->

<!-- BEGIN: Page CSS-->
<link rel="stylesheet" type="text/css" href="/app-assets/css/style.css">
<link rel="stylesheet" type="text/css" href="/app-assets/css/pages/dashboard-ecommerce.css">
<link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/charts/chart-apex.css">
<link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/extensions/ext-component-toastr.css">

@endpush @section('content')
<section id="dashboard-ecommerce">
    <div class="row match-height">
        <!-- Medal Card -->
        <div class="col-lg-8 col-md-12 col-12" id="apexchart">
            <div class="card">
                <div class="row">
                    <div class="col-lg-6">
                        <div class="device-admin-card-header d-flex justify-content-between align-items-end">
                            <h4 class="card-title">{{trans("admin/dashboard.subscription_details")}}</h4>
                            <!-- <div class="dropdown chart-dropdown pb-2">
                                <button class="btn btn-sm border-0 dropdown-toggle px-50" type="button"
                                    id="dropdownItem3" data-bs-toggle="dropdown" aria-haspopup="true"
                                    aria-expanded="false">
                                    Last 7 Days
                                </button>
                                <div class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownItem3">
                                    <a class="dropdown-item" href="#">Last 28 Days</a>
                                    <a class="dropdown-item" href="#">Last Month</a>
                                    <a class="dropdown-item" href="#">Last Year</a>
                                </div>
                            </div> -->
                        </div>
                        <div class="card-body">
                            <div id="license-chart" class="mt-2 mb-1"></div>
                            <div class="pt-25">
                                <!-- <div class="d-flex justify-content-between mb-1">
                                    <div class="d-flex align-items-center">
                                        <i data-feather="circle" class="font-medium-1 text-danger"></i>
                                        <span class="fw-bold ms-75">Total License</span>
                                    </div>
                                    <span>43%</span>
                                </div> -->
                                <div class="d-flex justify-content-between mb-1">
                                    <div class="d-flex align-items-center">
                                        <i data-feather="circle" class="font-medium-1 text-primary"></i>
                                        <span class="fw-bold ms-75">{{trans("admin/dashboard.consumed_license")}}</span>
                                    </div>
                                    <span>{{$consumedPercentage}}%</span>
                                </div>
                                <div class="d-flex justify-content-between">
                                    <div class="d-flex align-items-center">
                                        <i data-feather="circle" class="font-medium-1 text-warning"></i>
                                        <span class="fw-bold ms-75">{{trans("admin/dashboard.balance_license")}}</span>
                                    </div>
                                    <span>{{$balancePercentage}}%</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-6">

                        <div class="card-body mt-3">
                            <div class="meetup-header d-flex align-items-center">
                                <div class="avatar bg-light-primary p-50 m-0">
                                    <div class="avatar-content">
                                        <img class="device-png"
                                            src="/app-assets/images/illustration/Subscriptiondate.svg" alt="devices"
                                            height="40" width="40" />
                                    </div>
                                </div>
                                <div class="my-auto">
                                    <p class="card-text mb-0 ms-2">{{trans("admin/dashboard.subscription_date")}} </p>
                                    <h4 class="card-title mb-25 ms-2">{{date('d F Y', strtotime($organization->created_at))}}</h4>
                                </div>
                            </div>
                        </div>
                        <div class="card-body mt-3">
                            <div class="meetup-header d-flex align-items-center">
                                <div class="avatar bg-light-primary p-50 m-0">
                                    <div class="avatar-content">
                                        <img class="device-png" src="/app-assets/images/illustration/Expirationdate.svg"
                                            alt="devices" height="40" width="40" />
                                    </div>
                                </div>
                                <div class="my-auto">
                                    <p class="card-text mb-0 ms-2">{{trans("admin/dashboard.expiration_date")}}</p>
                                    <h4 class="card-title mb-25 ms-2">{{date('d F Y', strtotime($organization->licence_expire_on))}}</h4>
                                </div>
                            </div>
                        </div>
                        <div class="card-header mt-2">
                            <div class="my-auto d-flex">
                                <span class="bullet bullet-sm bullet-danger "></span>

                                <h4 class="card-title mb-25 ms-2">{{trans("admin/dashboard.total_license")}}</h4>
                            </div>
                            <div>
                                <h4>{{ $licences }}</h4>
                            </div>
                        </div>
                        <div class="card-header ">
                            <div class="my-auto d-flex">

                                <span class="bullet bullet-sm bullet-primary "></span>
                                <h4 class="card-title mb-25 ms-2">{{trans("admin/dashboard.consumed_license")}}</h4>

                            </div>
                            <div>
                                <h4>{{ $licences - $balance }}</h4>
                            </div>
                        </div>
                        <div class="card-header ">
                            <div class="my-auto d-flex">
                                <span class="bullet bullet-sm bullet-warning "></span>

                                <h4 class="card-title mb-25 ms-2">{{trans("admin/dashboard.balance_license")}}</h4>
                            </div>
                            <div>
                                <h4>{{ $balance }}</h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- People Count -->

        <div class="col-lg-4 col-md-12 col-sm-12">
            <div class="card">
                <div class="device-admin-card-header ">
                    <h4>{{trans("admin/dashboard.people_count")}}</h4>
                </div>

                <div class="row">
                    @if(Auth::user()->can_role('On-Roll Employees View'))
                        {{-- <div class="col-lg-12 col-sm-12 col-12">
                            <div class="card peoplecount-admin-outline ">
                                <div class="card-header">
                                    <div>
                                        <a href="/{{$organization->alias}}/managers"><h2 class="fw-bolder mb-0">{{$organization->getUsersCount()}}</h2></a>
                                        <p class="card-text">{{trans("admin/dashboard.total_sub_admins")}}</p>
                                    </div>
                                    <div class="avatar bg-light-primary p-50 m-0">
                                        <div class="avatar-content">
                                            <a href="/{{$organization->alias}}/managers"><img class="device-png" src="/app-assets/images/illustration/admin.svg"
                                                alt="devices" height="40" width="40" /></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div> --}}
                        <div class="col-lg-12 col-sm-12 col-12">
                            <div class="card peoplecount-onroll-outline ">
                                <div class="card-header">
                                    <div>
                                        <a href="/{{$organization->alias}}/employees"><h2 class="fw-bolder mb-0">{{$organization->getEmployeeCount()}}</h2></a>
                                        <p class="card-text">{{trans("admin/dashboard.total_on_roll")}}</p>
                                    </div>
                                    <div class="avatar bg-light-danger p-50 m-0">
                                        <div class="avatar-content">
                                            <a href="/{{$organization->alias}}/employees"><img class="device-png" src="/app-assets/images/illustration/onroll.svg"
                                                alt="devices" height="40" width="40" /></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-12 col-sm-12 col-12">
                            <div class="card  peoplecount-oncontract-outline">
                                <div class="card-header">
                                    <div>
                                    <a href="/{{$organization->alias}}/workmans"><h2 class="fw-bolder mb-0">{{$organization->getContractualEmployeeCount()}}</h2></a>
                                        <p class="card-text">{{trans("admin/dashboard.total_on_conrtract")}}</p>
                                    </div>
                                    <div class="avatar bg-light-success p-50 m-0">
                                        <div class="avatar-content">
                                        <a href="/{{$organization->alias}}/workmans"><img class="device-png" src="/app-assets/images/illustration/oncontract.svg"
                                                alt="devices" height="40" width="40" /></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif
                    {{-- @if(Auth::user()->can_role('Today Unknown Users View'))
                        <div class="col-lg-12 col-sm-12 col-12">
                            <div class="card peoplecount-count-outline ">
                                <div class="card-header">
                                    <div>
                                        <a href="/{{$organization->alias}}/unknown-users"><h2 class="fw-bolder mb-0">{{count($invalidUsers)}}</h2></a>
                                        <p class="card-text">{{trans("admin/dashboard.unknown_counts")}}</p>
                                    </div>
                                    <div class="avatar bg-light-warning p-50 m-0">
                                        <div class="avatar-content">
                                            <a href="/{{$organization->alias}}/unknown-users"><img class="device-png" src="/app-assets/images/illustration/unknowncount.svg"
                                                alt="devices" height="40" width="40" /></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif --}}

                    <div class="col-lg-12 col-sm-12 col-12 px-2">
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Total</th>
                                    <th>Consumed</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <th>App Login</th>
                                    <td>{{$organization->no_of_app_login}}</td>
                                    <td>{{$appLoginCount}}</td>
                                </tr>
                                <tr>
                                    <th>Attendance Access</th>
                                    <td>{{$organization->no_of_attendance_access}}</td>
                                    <td>{{$attAccCount}}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <div class="col-lg-12 col-sm-12 col-12 px-2 my-1">
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>On-Boarded</th>
                                    <th>Active</th>
                                    <th>Inactive</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <th>{{$employeeCount->total}}</th>
                                    <th>{{$employeeCount->active}}</th>
                                    <th>{{$employeeCount->inactive}}</th>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <!-- / people count -->
    </div>

    <div class="row match-height">
        <!-- Department wise license consumed-->
        <div class="col-lg-8 col-md-6 col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row flex-column">
                    <div class="header-left">
                        <h4 class="card-title">{{trans("admin/dashboard.department_wise_license_consumed")}}
                        </h4>
                    </div>
                    <!-- <div class="header-right d-flex align-items-center mt-sm-0 mt-1">
                        <i data-feather="calendar"></i>
                        <input type="text" value="{{$dateRange}}" id="departmentWise" 
                            class="form-control flatpickr-range border-0 shadow-none bg-transparent pr-0"
                            placeholder="YYYY-MM-DD to YYYY-MM-DD" onchange="departmentWise.call(this)" />
                    </div> -->
                </div>
                <div class="card-body mt-3" id="barchart-canvas" style="height:300px;">
                    <canvas class="bar-chart-ex-2 chartjs2" id="barchartex2" data-height="300"></canvas>
                </div>
            </div>
        </div>
        <!--/ Goal Overview Card -->
        <!-- Emp Details -->
        <div class="col-lg-4 col-12">
            <div class="card ">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row flex-column">
                        <div class="header-left">
                            <h4 class="card-title">{{date('l d M', strtotime($fromDate))}}</h4>
                        </div>
                        <div class="header-right d-flex align-items-center mt-sm-0 mt-1">
                            <i data-feather="calendar"></i>
                            <input type="text" value="{{$fromDate}}" id="totalInOutDate"
                                class="form-control flatpickr-basic border-0 shadow-none bg-transparent pr-0 pe-0"  style="width:96px;"
                                placeholder="YYYY-MM-DD" onchange="totalInOut.call(this)" />
                        </div>
                    </div>
                    <div class="card-body">
                        <div id="product-order-chart2"></div>
                        <div class="d-flex justify-content-between mb-1">
                            <div class="d-flex align-items-center">
                                <i data-feather="circle" class="font-medium-1 text-primary"></i>
                                <span class="fw-bold ms-75">{{trans("admin/dashboard.total")}}</span>
                            </div>
                            <span id="total">0</span>
                        </div>
                        <div class="d-flex justify-content-between mb-1">
                            <div class="d-flex align-items-center">
                                <i data-feather="circle" class="font-medium-1 text-warning"></i>
                                <span class="fw-bold ms-75">{{trans("admin/dashboard.total_in")}}</span>
                            </div>
                            <span id="total_in">0</span>
                        </div>
                        <div class="d-flex justify-content-between">
                            <div class="d-flex align-items-center">
                                <i data-feather="circle" class="font-medium-1 text-danger"></i>
                                <span class="fw-bold ms-75">{{trans("admin/dashboard.total_out")}}</span>
                            </div>
                            <span id="total_out">0</span>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <!--/ Emp Details-->
    </div>
    <div class="row match-height">
        @if(Auth::user()->can_role('Locations View'))
        <!-- Browser States Card -->
        <div class="col-lg-3 col-md-6 col-12">
            <div class="card ">
                <div class="card-header flex-column align-items-start pb-0 ">
                    <div class="avatar bg-light-danger p-50 m-0">
                        <div class="avatar-content">
                            <a href="/{{$organization->alias}}/locations">
                                <i data-feather='map-pin'></i>
                            </a>
                        </div>
                    </div>
                    <a href="/{{$organization->alias}}/locations"><h2 class="fw-bolder mt-1">{{count($organization->locations)}}</h2></a>
                    <p class="card-text">{{trans("admin/dashboard.location")}}</p>
                </div>
                <div id="line-area-chart-3"></div>
            </div>
        </div>
        <!--/ Browser States Card -->
        <!-- Goal Overview Card -->
        <div class="col-lg-3 col-md-6 col-12">
            <div class="card">
                <div class="card-header flex-column align-items-start pb-0">
                    <div class="avatar bg-light-primary p-50 m-0">
                        <div class="avatar-content">
                            <a href="/{{$organization->alias}}/sub-locations">
                                <i data-feather='map' class="icon-sizes"></i>
                            </a>
                        </div>
                    </div>
                    <a href="/{{$organization->alias}}/sub-locations"><h2 class="fw-bolder mt-1">{{count($organization->subLocations)}}</h2></a>
                    <p class="card-text ">{{trans("admin/dashboard.sub_location")}}</p>
                </div>
                <div id="line-area-chart-1"></div>
            </div>
        </div>
        @endif
        <!--/ Goal Overview Card -->

        <!-- Birthday Of the Month-->
        @if(Auth::user()->can_role('Device Installed View') || Auth::user()->can_role('Android Kiosk Devices View') || Auth::user()->can_role('iOS Kiosk Devices View'))
        <div class="col-lg-6 col-md-6 col-12">
            <div class="card p-1">
                <div class="device-admin-card-header ">
                    <h5>Devices</h5>
                </div>
                <div class="row ">
                    @if(Auth::user()->can_role('Device Installed View'))
                    <div class="col-xl-4 col-md-4 col-sm-6">
                        <div class="card text-center devices-total-card-border ">
                            <div class="card-body">
                                <div class="avatar bg-light-info p-1 mb-1">
                                    <a href="/{{$organization->alias}}/devices">
                                    <img class="device-png" src="/app-assets/images/illustration/Totaldevices.svg"
                                        alt="devices" height="40" width="40" /></a>

                                </div>
                                <a href="/{{$organization->alias}}/devices"><h2 class="fw-bolder">{{count($organization->devices)}}</h2></a>
                                <p class="card-text">{{trans("admin/dashboard.total_devices")}}</p>
                            </div>
                        </div>
                    </div>
                    @endif
                    @if(Auth::user()->can_role('Android Kiosk Devices View'))
                    <div class="col-xl-4 col-md-4 col-sm-6">
                        <div class="card text-center devices-active-card-border ">
                            <div class="card-body">
                                <div class="avatar bg-light-warning p-1 mb-1">
                                    <a href="/{{$organization->alias}}/devices?device=android">
                                    <img class="device-png" src="/app-assets/images/illustration/activedevices.svg"
                                        alt="devices" height="40" width="40" /></a>

                                </div>
                                <a href="/{{$organization->alias}}/devices?device=android"><h2 class="fw-bolder">{{$androidDev}}</h2></a>
                                <p class="card-text">{{trans("admin/dashboard.kiosk_devices")}}</p>
                            </div>
                        </div>
                    </div>
                    @endif
                    @if(Auth::user()->can_role('iOS Kiosk Devices View'))
                    <div class="col-xl-4 col-md-4 col-sm-6">
                        <div class="card text-center devices-inactive-card-border ">
                            <div class="card-body">
                                <div class="avatar bg-light-danger p-1 mb-1">
                                    <a href="/{{$organization->alias}}/devices?device=ios">
                                    <img class="device-png" src="/app-assets/images/illustration/inactivedevices.svg"
                                        alt="devices" height="40" width="40" /></a>

                                </div>
                                <a href="/{{$organization->alias}}/devices?device=ios"><h2 class="fw-bolder">{{$iosDev}}</h2></a>
                                <p class="card-text">{{trans("admin/dashboard.ios_devices")}}</p>
                            </div>
                        </div>
                    </div>
                    @endif
                </div>
            </div>
        </div>
        @endif
        <!--/ Birthday of the month -->


    </div>
    <div class="row match-height">
        <!-- Enrollment Limit Card -->
        <div class="col-sm-12 col-12">
            <div class="card">
                <div class="card-header newheader  ">
                    <div class="header-left">
                        <h4 class="card-title">{{trans("admin/dashboard.org_license")}}</h4> 
                    </div> 
                </div>
                <div class="card-body">
                    <div class="card-employee-tasknew card-employee-tasknew3">
                        <div class="">
                            <table class="table border">
                                <thead>
                                    <tr> 
                                        <th>{{trans('manager/manager_create.enrollment_limit')}} </th>
                                        <th>{{trans('manager/manager_create.enrollment_buffer_limit')}} </th>
                                        <th>{{trans('manager/manager_create.daily_attendance_limit')}} </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @php
                                        $organizationEnrollmentLimit = ($organization->enrollment_limit)?$organization->enrollment_limit:0;
                                        $organizationEnrollmentBufferLimit = ($organization->enrollment_buffer_limit)?$organization->enrollment_buffer_limit:0;
                                        $organizationDailyAttendanceLimit = ($organization->daily_attendance_limit)?$organization->daily_attendance_limit:0;

                                    @endphp
                                    <tr>
                                        <td class="text-dark fw-bolder">{{$organizationEnrollmentLimit}}</td> 
                                        <td class="text-dark fw-bolder">{{$organizationEnrollmentBufferLimit}}</td> 
                                        <td class="text-dark fw-bolder">{{$organizationDailyAttendanceLimit}}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-12 col-12">
            <div class="card">
                <div class="card-header newheader  ">
                    <div class="header-left">
                        <h4 class="card-title">{{trans("admin/dashboard.contractor_license")}}</h4> 
                    </div> 
                </div>
                <div class="card-body">
                    <div class="card-employee-tasknew card-employee-tasknew3">
                        <div class="">
                            <table class="table border">
                                <thead>
                                    <tr> 
                                        <th>{{trans('admin/dashboard.assigned_to')}}</th>
                                        <th>{{trans('manager/manager_create.enrollment_limit')}}</th>
                                        <th>{{trans('manager/manager_create.enrollment_buffer_limit')}}</th>
                                        <th>{{trans('manager/manager_create.daily_attendance_limit')}}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @php
                                    $totalEnrollmentLimit = $totalEnrollmentBufferLimit = $totalDailyAttendanceLimit = 0;
                                @endphp
                                    @foreach ($contractors as $contractor)
                                    @php
                                        $enrollmentLimit = ($contractor->userDetail)? $contractor->userDetail->enrollment_limit :0;
                                        $totalEnrollmentLimit = $totalEnrollmentLimit+$enrollmentLimit; 

                                        $enrollmentBufferLimit = ($contractor->userDetail)? $contractor->userDetail->enrollment_buffer_limit:0;
                                        $totalEnrollmentBufferLimit = $totalEnrollmentBufferLimit+$enrollmentBufferLimit;

                                        $dailyAttendanceLimit = ($contractor->userDetail)? $contractor->userDetail->daily_attendance_limit:0;
                                        $totalDailyAttendanceLimit = $totalDailyAttendanceLimit+$dailyAttendanceLimit;

                                    @endphp
                                    <tr>
                                        <td class="text-dark fw-bolder">{{ucfirst($contractor->name)}}({{trans('admin/dashboard.contractor')}})</td>
                                        <td class="text-dark fw-bolder">{{$enrollmentLimit}}</td> 
                                        <td class="text-dark fw-bolder">{{$enrollmentBufferLimit}}</td> 
                                        <td class="text-dark fw-bolder">{{$dailyAttendanceLimit}}</td>
                                    </tr>
                                    @endforeach
                                    <tr>
                                        <td class="text-dark fw-bolder">On Roll Employee</td>
                                        <td class="text-dark fw-bolder">{{$organizationEnrollmentLimit-$totalEnrollmentLimit}}</td> 
                                        <td class="text-dark fw-bolder">{{$organizationEnrollmentBufferLimit-$totalEnrollmentBufferLimit}}</td> 
                                        <td class="text-dark fw-bolder">{{$organizationDailyAttendanceLimit-$totalDailyAttendanceLimit}}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection @push('footer-script')
<script src="/app-assets/vendors/js/charts/apexcharts.min.js"></script>
<script src="/app-assets/vendors/js/extensions/toastr.min.js"></script>
<!-- END: Page Vendor JS-->

<!-- END: chart js-->
<script src="/app-assets/js/scripts/charts/chart-apex.js"></script>
<script src="/app-assets/vendors/js/charts/chart.min.js"></script>
<script src="/app-assets/js/chart-scripts.js"></script>

<script src="/app-assets/js/scripts/charts/chart-chartjs.js"></script>
<script src="/app-assets/js/scripts/pages/dashboard-analytics.js"></script>

<!-- BEGIN: Page JS-->
<script src="/app-assets/js/scripts/pages/dashboard-ecommerce.js"></script>
<script src="/app-assets/js/scripts/cards/card-statistics.js"></script>
<script src="/app-assets/js/scripts/cards/card-analytics.js"></script>
<script src="/app-assets/js/scripts/charts/chart-chartjs.js"></script>

<script type="text/javascript">
    $(document).ready(function(){
        totalInOut();
        licenseChartEx();
        barChartExample();
        departmentWiseChart();
    })

    function getFormat(format)
    {
        var url = "/format";
        $.easyAjax({
            url: url,
            type: "POST",
            data: {
                "_token": "{{ csrf_token() }}",
                "format": format},
            success: function (data) {}
        });
    }

    $(window).on('load', function() {
        if (feather) {
            feather.replace({
                width: 14,
                height: 14
            });
        }
    })

    function totalInOut(){
        var date = $('#totalInOutDate').val();
        $.ajax({
            url: "/home/total-in-out",
            type: "GET",
            data: {
                'date': date,
            },
            success: function(dataResult){
                attendanceChart(dataResult);
                $('#total').html(dataResult['total_count']);
                $('#total_in').html(dataResult['total_in_count']);
                $('#total_out').html(dataResult['total_out_count']);
            }
        });
    }

    function departmentWiseChart(){
        var chartWrapper =  $('.chartjs2'),
        barChartEx = $('.bar-chart-ex-2');
        var successColorShade = '#FB9934',
            tooltipShadow = 'rgba(0, 0, 0, 0.25)',
            labelColor = '#6e6b7b',
            grid_line_color = 'rgba(200, 200, 200, 0.2)'; // RGBA color helps in dark layout

        if (chartWrapper.length) {
            chartWrapper.each(function () {
                $(this).wrap($('<div style="height:' + this.getAttribute('data-height') + 'px"></div>'));
            });
        }
        if (barChartEx.length) {
            var barChartExample = new Chart(barChartEx, {
                type: 'bar',
                options: {
                elements: {
                    rectangle: {
                    borderWidth: 2,
                    borderSkipped: 'bottom'
                    }
                },
                responsive: true,
                maintainAspectRatio: false,
                responsiveAnimationDuration: 500,
                legend: {
                    display: false
                },
                tooltips: {
                    // Updated default tooltip UI
                    shadowOffsetX: 1,
                    shadowOffsetY: 1,
                    shadowBlur: 8,
                    shadowColor: tooltipShadow,
                    backgroundColor: window.colors.solid.white,
                    titleFontColor: window.colors.solid.black,
                    bodyFontColor: window.colors.solid.black
                },
                scales: {
                    xAxes: [
                    {
                        display: true,
                        gridLines: {
                        display: true,
                        color: grid_line_color,
                        zeroLineColor: grid_line_color
                        },
                        scaleLabel: {
                        display: false
                        },
                        ticks: {
                        fontColor: labelColor
                        }
                    }
                    ],
                    yAxes: [
                    {
                        display: true,
                        gridLines: {
                        color: grid_line_color,
                        zeroLineColor: grid_line_color
                        },
                        ticks: {
                        stepSize: 50,
                        min: 0,
                        fontColor: labelColor
                        }
                    }
                    ]
                }
                },
                data: {
                labels: [
                    @foreach($departments as $department)
                        '{{$department}}',
                    @endforeach 
                ],
                datasets: [
                    {
                    barThickness: 25,
                    data: [
                        @foreach($departmentWiseEmployees as $emp)
                            '{{$emp}}',
                        @endforeach 
                    ],
                    backgroundColor: successColorShade,
                    borderColor: 'transparent'
                    }
                ]
                }
            });
        }
    }

    function attendanceChart(data){
        var $productOrderChart = document.querySelector('#product-order-chart2');
        $('#product-order-chart2').html('');
        var orderChartOptions = {
            chart: {
            height: 325,
            type: 'radialBar'
            },
            colors: [window.colors.solid.primary, window.colors.solid.warning, window.colors.solid.danger],
            stroke: {
            lineCap: 'round'
            },
            plotOptions: {
            radialBar: {
                size: 150,
                hollow: {
                size: '20%'
                },
                track: {
                strokeWidth: '100%',
                margin: 15
                },
                dataLabels: {
                value: {
                    fontSize: '1rem',
                    colors: '#5e5873',
                    fontWeight: '500',
                    offsetY: 5
                },
                total: {
                    show: true,
                    label: 'Total',
                    fontSize: '1.286rem',
                    colors: '#5e5873',
                    fontWeight: '500',

                    formatter: function (w) {
                    // By default this function returns the average of all series. The below is just an example to show the use of custom formatter function
                    return data['total'];
                    }
                }
                }
            }
            },
            series: [data['total'], data['total_in'], data['total_out']],
            labels: ['Total', 'In', 'Out']
        };
        orderChart = new ApexCharts($productOrderChart, orderChartOptions);
        orderChart.render();
    }

    function licenseChartEx(){
        var licenseChart;
        $licenseChart = document.querySelector('#license-chart');
        $('#license-chart').html('');
        licenseChartOptions = {
            chart: {
            type: 'pie',
            height: 325,
            toolbar: {
                show: false
            }
            },
            labels: ['Consumed', 'Balanced'],
            series: [{{ $licences - $balance}}, {{$balance}}],
            dataLabels: {
            enabled: false
            },
            legend: { show: false },
            stroke: {
            width: 4
            },
            colors: [window.colors.solid.primary, window.colors.solid.warning]
        };
        licenseChart = new ApexCharts($licenseChart, licenseChartOptions);
        licenseChart.render();
    }

</script>
@endpush