@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/vendors/css/forms/select/select2.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/form-wizard.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">
    <style>
        .fetch-spinner {
            width: 40px;
            height: 40px;
            border: 4px solid rgba(0, 0, 0, 0.2);
            border-top-color: #3498db;
            /* Blue color */
            border-radius: 50%;
            animation: spin 1s linear infinite;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        #dashboard-ecommerce * {
            font-size: small;
        }

        @keyframes spin {
            0% {
                transform: translate(-50%, -50%) rotate(0deg);
            }

            100% {
                transform: translate(-50%, -50%) rotate(360deg);
            }
        }
    </style>
    <!-- END: Page CSS-->
@endpush
@section('content')

    <section id="dashboard-ecommerce" class="dasboardnewbody hrnewdashboard">
        <!-- Filters -->
        <div class="content-header row">
            <div class="content-header-left col-md-7 col-12 mb-2"></div>
            <div class="content-header-right text-md-end col-md-5 col-12 d-md-block d-none">
                <div class="mb-1 breadcrumb-right dash-top-switch-filter ">
                    <div class="dropdown">
                        <button class="btn-icon btn btn-primary btn-round btn-sm dropdown-toggle" type="button"
                            data-bs-toggle="offcanvas" data-bs-target="#offcanvasEnd" aria-controls="offcanvasEnd"
                            type="button"><i data-feather='filter'></i></button>
                    </div>
                </div>
            </div>
        </div>
        <form method="get">
            <div class="offcanvas-end-example">
                <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasEnd" aria-labelledby="offcanvasEndLabel">
                    <div class="offcanvas-header">
                        <h5 id="offcanvasEndLabel" class="offcanvas-title">Filter</h5>
                        <div>
                            <button type="button" class="btn" title="Reset"
                                onclick="window.location='/{!! $alias !!}/home'" aria-label=""><i
                                    data-feather="rotate-cw"></i></button>
                            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"
                                aria-label="Close"></button>
                        </div>
                    </div>
                    <div class="offcanvas-body my-auto mx-0 flex-grow-0">


                        <div class="col-sm-12">
                            <div class="form-label-group">
                                @if (
                                    $authSessionUser->organizations &&
                                        !$authSessionUser->organizations->isEmpty() &&
                                        count($authSessionUser->organizations) > 1)
                                    <label class="form-label" for="organization_ids">Organizations</label>
                                    <select class="form-select select2" name="organization_ids[]" id="organization_ids"
                                        onchange="orgUpdate()" multiple>
                                        @foreach ($authSessionUser->organizations as $organizationData)
                                            <option value="{{ $organizationData->id }}"
                                                {{ in_array($organizationData->id, request()->input('organization_ids', [$organization->id])) ? 'selected' : '' }}>
                                                {{ $organizationData->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                @else
                                    <label class="form-label" for="organization_ids">Organizations</label>
                                    <select class="form-select select2" name="organization_ids[]" id="organization_ids"
                                        onchange="orgUpdate()" multiple>
                                        @foreach ($organizations as $organizationData)
                                            <option value="{{ $organizationData->id }}"
                                                {{ in_array($organizationData->id, request()->input('organization_ids', [$organization->id])) ? 'selected' : '' }}>
                                                {{ $organizationData->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                @endif
                            </div>
                        </div>
                        <div class="col-sm-12">
                            <div class="form-label-group">
                                <label class="form-label" for="date">Date</label>
                                <input type="text" id="date" name="date" id="date"
                                    value="{{ dateFormat($fromDate) }}" class="form-control flatpickr-basic-custom">
                            </div>
                        </div>
                        <label class="form-label mt-2" for="employee_type">Employee Type</label>
                        @if (Auth::user()->is_contractor == 0)
                            <select class="form-control mb-2 select2" name="employee_type[]" id="employee_type" multiple>
                                <option value="employee" @if (in_array('employee', request()->input('employee_type', []))) selected @endif>Employee
                                </option>
                                <option value="workman" @if (in_array('workman', request()->input('employee_type', []))) selected @endif>Workman
                                </option>

                            </select>
                        @else
                            <select class="form-control mb-2 select2" name="employee_type[]" id="employee_type" multiple>
                                <option value="{{ $employeesType }}">{{ $employeesType }}</option>
                            </select>
                        @endif
                        <label class="form-label mt-2" for="location_id">Location</label>
                        <select class="form-control mb-2 select2" name="location_id[]" id="location_id"
                            onchange="getsubLocations(this,'sublocations')" multiple>
                            @foreach ($locations as $location)
                                <option value="{{ $location->id }}" @if (in_array($location->id, request()->input('location_id', []))) selected @endif>
                                    {{ $location->name }}
                                </option>
                            @endforeach
                        </select>
                        <label class="form-label mt-2" for="sublocation_id">Sub Location</label>
                        <select class="form-control mb-2 select2" name="sublocation_id[]" id="sublocation_id" multiple>
                            @foreach ($subLocations as $subLocation)
                                <option value="{{ $subLocation->id }}" @if (in_array($subLocation->id, request()->input('sublocation_id', []))) selected @endif>
                                    {{ $subLocation->name }}
                                </option>
                            @endforeach
                        </select>
                        <label class="form-label mt-2" for="area_id">{{ trans('master/master.workstation') }}</label>
                        <select class="form-control mb-2 select2" name="work_station_id[]" id="work_station_id" multiple>
                            @foreach ($workstations as $workstation)
                                <option value="{{ $workstation->id }}" @if (in_array($workstation->id, request()->input('work_station_id', []))) selected @endif>
                                    {{ $workstation->name }}
                                </option>
                            @endforeach
                        </select>

                        <label class="form-label mt-2" for="department_id">Department</label>
                        <select class="form-control mb-2 select2" name="department_id[]" id="department_id" multiple>
                            @foreach ($departments as $department)
                                <option value="{{ $department->id }}" @if (in_array($department->id, request()->input('department_id', []))) selected @endif>
                                    {{ $department->name }}
                                </option>
                            @endforeach
                        </select>
                        <label class="form-label mt-2" for="sub_department_id"> Sub Department</label>
                        <select class="form-control mb-2 select2" name="sub_department_id[]" id="sub_department_id"
                            multiple>
                            @foreach ($subDepartments as $subDepartment)
                                <option value="{{ $subDepartment->id }}"
                                    @if (in_array($subDepartment->id, request()->input('sub_department_id', []))) selected @endif>
                                    {{ $subDepartment->name }}
                                </option>
                            @endforeach
                        </select>
                        <label class="form-label mt-2" for="designation_id">Designation</label>
                        <select class="form-control mb-2 select2" name="designation_id[]" id="designation_id" multiple>
                            @foreach ($designations as $designation)
                                <option value="{{ $designation->id }}" @if (in_array($designation->id, request()->input('designation_id', []))) selected @endif>
                                    {{ $designation->name }}
                                </option>
                            @endforeach
                        </select>
                        <label class="form-label mt-2" for="area_id">{{ trans('master/master.company_code') }}</label>
                        <select class="form-control mb-2 select2" name="company_code_id[]" id="company_code_id" multiple>
                            @foreach ($companyCodes as $companyCode)
                                <option value="{{ $companyCode->id }}" @if (in_array($companyCode->id, request()->input('company_code_id', []))) selected @endif>
                                    {{ $companyCode->number }}
                                </option>
                            @endforeach
                        </select>
                        <label class="form-label mt-2" for="shift_id">Shift</label>
                        <select class="form-control mb-2 select2" name="shift_id[]" id="shift_id"multiple>
                            @foreach ($shifts as $shift)
                                <option value="{{ $shift->id }}" @if (in_array($shift->id, request()->input('shift_id', []))) selected @endif>
                                    {{ $shift->name }}
                                </option>
                            @endforeach
                        </select>
                        <label class="form-label mt-2" for="area_id">Area</label>
                        <select class="form-control mb-2 select2" name="area_id[]" id="area_id" multiple>
                            @foreach ($areas as $area)
                                <option value="{{ $area->id }}" @if (in_array($area->id, request()->input('area_id', []))) selected @endif>
                                    {{ $area->name }}
                                </option>
                            @endforeach
                        </select>
                        @if (Auth::user()->is_contractor != 1)
                            <label class="form-label mt-2" for="contractor_id">Contractor</label>
                            <select class="form-control mb-2 select2" name="contractor_id[]" id="contractor_id" multiple>
                                @foreach ($contractors as $contractor)
                                    <option value="{{ $contractor->id }}"
                                        @if (in_array($contractor->id, request()->input('contractor_id', []))) selected @endif>
                                        {{ $contractor->name }}
                                    </option>
                                @endforeach
                            </select>
                        @endif

                        <button type="submit"
                            class="btn btn-primary mt-2 mb-1 d-grid w-100 d-flex justify-content-center"
                            data-bs-dismiss="offcanvas" aria-label="Close"><i data-feather='search' class="me-2"></i>
                            Search</button>
                    </div>
                </div>
            </div>
        </form>
        <!-- // Filters // -->
        @if ($announcements)
            <div class="row">
                <div class="col-md-12 col-12">
                    <div class="card">
                        <div class="card-header pb-1 newheader d-flex justify-content-between align-items-start">
                            <div class="header-left">
                                <span class="badge badge-light-danger badgeborder-radius"
                                    style="font-size: 13px; font-weight: bold; padding: 0.3rem 0.7rem">{{ trans('admin/dashboard.announcement') }}</span>
                            </div>
                            <span class="badge badge-light-primary"
                                style="font-size: 13px; font-weight: bold; padding: 0.3rem 0.7rem; background-color: rgba(115, 103, 240, 0.12); color: #6B12B7 !important">{{ dateFormat(date('Y-m-d')) }}</span>
                        </div>
                        <div class="card-body d-flex justify-content-start align-items-center">
                            <div class="me-25">
                                <!-- <img src="/app-assets/images/svg/megaphone.png"></div> -->
                                <img src="/assets/img/notification-icon.png">
                            </div>

                            <p class="mb-0 ms-1 notification-txt">
                                @if ($announcements)
                                    <b>{{ $announcements->title }} - </b>
                                    {{ $announcements->description }}
                                @else
                                    <b>{{ trans('admin/dashboard.no_announcments') }}</b>
                                @endif
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        <div class="row match-height">
            <!-- Attendance Information On Roll Card -->
            <div class="col-lg-3 col-md-6 col-12">
                <div class="card">
                    <div class="card-header newheader d-flex justify-content-between align-items-start">
                        <div class="header-left">
                            <h4 class="card-title">{{ trans('admin/dashboard.on_roll_employees') }}</h4>
                            <p class="card-text">Info Details</p>
                        </div>
                        <div class="header-right rightdateformat" style="width: 100%">
                            <input type="text" value="{{ dateFormat($fromDate) }}" id="attendanceOnRollInfo"
                                style="text-align: left; margin: 0;"
                                class="form-control flatpickr-basic-custom border-0 shadow-none bg-transparent pr-0"
                                placeholder="YYYY-MM-DD" onchange="attendanceOnRollInfo.call(this)" />
                        </div>
                    </div>
                    <div class="card-body px-0">
                        <div id="donut-chartonroll"></div>
                    </div>
                </div>
            </div>
            <!--/ Attendance Information On Roll Card -->

            <!-- Attendance Information Contractual Card -->
            <div class="col-lg-3 col-md-6 col-12">
                <div class="card">
                    <div class="card-header newheader d-flex justify-content-between align-items-start">
                        <div class="header-left">
                            <h4 class="card-title">{{ trans('admin/dashboard.contractual_employees') }}</h4>
                            <p class="card-text">Info Details</p>
                        </div>
                        <div class="header-right rightdateformat">
                            <input type="text" value="{{ dateFormat($fromDate) }}" id="attendanceContractualInfo"
                                class="form-control flatpickr-basic-custom border-0 shadow-none bg-transparent pr-0"
                                style="text-align: left; margin: 0;" placeholder="YYYY-MM-DD"
                                onchange="attendanceContractualInfo.call(this)" />
                        </div>
                    </div>
                    <div class="card-body px-0">
                        <div id="donut-chart-contractual"></div>
                    </div>
                </div>
            </div>
            <!--/ Attendance Information Contractual Card -->

            <!-- Attendance Information On Roll Card -->
            <div class="col-lg-3 col-md-6 col-12">
                <div class="card">
                    <div class="card-header newheader d-flex justify-content-between align-items-start">
                        <div class="header-left">
                            <h4 class="card-title">Present {{ trans('admin/dashboard.on_roll_employees') }}</h4>
                            <p class="card-text">Info Details Shift Wise</p>
                        </div>
                        <div class="header-right rightdateformat" style="width: 100%">
                            <input type="text" value="{{ dateFormat($fromDate) }}" id="attendanceOnRollInfoShiftWise"
                                style="text-align: left; margin: 0;"
                                class="form-control flatpickr-basic-custom border-0 shadow-none bg-transparent pr-0"
                                placeholder="YYYY-MM-DD" onchange="attendanceOnRollInfoShiftWise.call(this)" />
                        </div>
                    </div>
                    <div class="card-body px-0">
                        <div id="donut-chartonroll-shift-wise"></div>
                    </div>
                </div>
            </div>
            <!--/ Attendance Information On Roll Card -->

            <!-- Attendance Information Contractual Card -->
            <div class="col-lg-3 col-md-6 col-12">
                <div class="card">
                    <div class="card-header newheader d-flex justify-content-between align-items-start">
                        <div class="header-left">
                            <h4 class="card-title">Present {{ trans('admin/dashboard.contractual_employees') }}</h4>
                            <p class="card-text">Info Details Shift Wise</p>
                        </div>
                        <div class="header-right rightdateformat">
                            <input type="text" value="{{ dateFormat($fromDate) }}"
                                id="attendanceContractualInfoShiftWise"
                                class="form-control flatpickr-basic-custom border-0 shadow-none bg-transparent pr-0"
                                style="text-align: left; margin: 0;" placeholder="YYYY-MM-DD"
                                onchange="attendanceContractualInfoShiftWise.call(this)" />
                        </div>
                    </div>
                    <div class="card-body px-0">
                        <div id="donut-chart-contractual-shift-wise"></div>
                    </div>
                </div>
            </div>
            <!--/ Attendance Information Contractual Card -->

            <!-- Department Wise Card -->
            <div class="col-lg-6 col-md-6 col-12">
                <div class="card" id="departmentCategoryShiftCard">
                    <div class="card-header newheader" style="position: relative;">
                        <ul class="nav nav-tabs card-header-tabs" id="myTab" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="department-tab" data-bs-toggle="tab"
                                    data-bs-target="#department" type="button" role="tab"
                                    data-export="department-attendance"
                                    aria-controls="department"
                                    aria-selected="true">{{ trans('admin/dashboard.department_list') }}</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="shift-tab" data-bs-toggle="tab" data-bs-target="#shift"
                                    type="button" role="tab" aria-controls="shift"
                                    data-export="shift-attendance"
                                    aria-selected="false">{{ trans('admin/dashboard.shift_list') }}</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="category-tab" data-bs-toggle="tab" data-bs-target="#category"
                                    type="button" role="tab" aria-controls="category"
                                    data-export="category-attendance"
                                    aria-selected="false">{{ trans('admin/dashboard.category_list') }}</button>
                            </li>
                        </ul>

                        <div style="position: absolute; top: 8px; right: 8px">
                            <div class="dropdown">
                                <a class="pe-1 dropdown-toggle hide-arrow text-primary"
                                    data-bs-toggle="dropdown">
                                    <i style="width: 20px; height: 20px;" data-feather="download"
                                        aria-hidden="true"></i>
                                </a>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" target="_blank" id="departmentCategoryShiftExportPdf"
                                        href="/{!! $alias !!}/department-attendance/export?{{ request()->getQueryString() }}&file_type=pdf">
                                        <span>{{ trans('common/common.pdf') }}</span>
                                    </a>
                                    <a class="dropdown-item" id="departmentCategoryShiftExportExcel"
                                        href="/{!! $alias !!}/department-attendance/export?{{ request()->getQueryString() }}&file_type=excel">
                                        <span>{{ trans('common/common.excel') }}</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="tab-content" id="myTabContent">
                            <div class="tab-pane fade show active" id="department" role="tabpanel"
                                aria-labelledby="department-tab">
                                <div class="card-employee-tasknew card-employee-tasknew3" id="scrollpart">
                                    <table class="table border">
                                        <thead>
                                            <tr>
                                                <th>{{ trans('admin/dashboard.department') }}</th>
                                                <th>{{ trans('admin/dashboard.total_employees') }}</th>
                                                <th>{{ trans('admin/dashboard.present') }}</th>
                                                <th>{{ trans('admin/dashboard.absent') }}</th>
                                            </tr>
                                        </thead>
                                        <tbody id="departmentCardsBody">
                                            <tr>
                                                <td colspan="4" class="text-center text-secondary">{{ trans('admin/dashboard.no_record_found') }}</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="shift" role="tabpanel" aria-labelledby="shift-tab">
                                <div class="card-employee-tasknew card-employee-tasknew3" id="scrollpart">
                                    <table class="table border">
                                        <thead>
                                            <tr>
                                                <th>{{ trans('admin/dashboard.shift') }}</th>
                                                <th>{{ trans('admin/dashboard.present') }}</th>
                                            </tr>
                                        </thead>
                                        <tbody id="shiftCardsBody">
                                            <tr>
                                                <td colspan="2" class="text-center text-secondary">{{ trans('admin/dashboard.no_record_found') }}</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="category" role="tabpanel"
                                aria-labelledby="category-tab">
                                <div class="card-employee-tasknew card-employee-tasknew3" id="scrollpart">
                                    <table class="table border">
                                        <thead>
                                            <tr>
                                                <th>{{ trans('admin/dashboard.category') }}</th>
                                                <th>{{ trans('admin/dashboard.total_employees') }}</th>
                                                <th>{{ trans('admin/dashboard.present') }}</th>
                                                <th>{{ trans('admin/dashboard.absent') }}</th>
                                            </tr>
                                        </thead>
                                        <tbody id="categoryCardsBody">
                                            <tr>
                                                <td colspan="4" class="text-center text-secondary">{{ trans('admin/dashboard.no_record_found') }}</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /Department Wise Card -->

            <!-- Total IN Out Card -->
            <div class="col-lg-3 col-md-6 col-12">
                <div class="card">
                    <div class="card-header newheader flex-column align-items-start">
                        <div class="header-left">
                            <h4 class="card-title">{{ trans('admin/dashboard.employee_in_out') }}</h4>
                        </div>
                        <div class="centerdateformat mt-2">
                            <input type="text" value="{{ dateFormat($fromDate) }}" id="employeeInOut"
                                class="form-control flatpickr-basic-custom border-0 shadow-none bg-transparent pr-0"
                                placeholder="YYYY-MM-DD" onchange="employeeInOut.call(this)" />
                        </div>
                    </div>

                    <div class="card-body">
                        <div class="emploutbox">
                            <div class="cursor-pointer holiday-box" onclick="toEmployeePage('all')">
                                <div><span>{{ trans('admin/dashboard.total') }}</span></div>
                                <div>
                                    <h3 id="employee_total_in_out">0</h3>
                                </div>
                            </div>
                            <div class="cursor-pointer holiday-box" onclick="toEmployeePage('in')">
                                <div><span>{{ trans('admin/dashboard.in') }}</span></div>
                                <div>
                                    <h3 id="employee_total_in">0</h3>
                                </div>
                            </div>
                            <div class="cursor-pointer holiday-box" onclick="toEmployeePage('out')">
                                <div><span>{{ trans('admin/dashboard.out') }}</span></div>
                                <div>
                                    <h3 id="employee_total_out">0</h3>
                                </div>
                            </div>
                        </div>
                    </div>


                </div>
            </div>
            <!-- /Total IN Out Card -->

            <!-- Average Working Hours -->
            <div class="col-lg-3 col-md-4 col-6">
                <div class="card">
                    <div class="card-header newheader">
                        <div class="header-left">
                            <h4 class="card-title">{{ trans('admin/dashboard.total_average_working_hour') }}</h4>
                        </div>
                        <div class="centerdateformat mb-1 mt-2">
                            <input type="text" value="{{ $dateRange }}" id="totalWorkingHour"
                                class="form-control flatpickr-range-custom border-0 shadow-none bg-transparent pr-0"
                                placeholder="YYYY-MM-DD to YYYY-MM-DD" onchange="totalWorkingHour.call(this)" />
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="flex-column align-items-start pb-0">
                            <div class="avatar bg-light-success p-50 m-0">
                                <div class="avatar-content">
                                    <i data-feather="server" class="font-medium-5"></i>
                                </div>
                            </div>
                            <h2 class="fw-bolder mt-1" id="average_working_hr"></h2>
                            <p class="card-text">{{ trans('admin/dashboard.average_working_hour') }}</p>
                        </div>
                    </div>
                    <div id="line-area-chart-2"></div>
                </div>
            </div>
            <!--/ Average Working Hours -->

            <!-- Incomplete Day Status Card -->
            <div class="col-lg-6 col-md-6 col-12">
                <div class=" card card-browser-states">
                    <div class="card-header newheader">
                        <div id="incomplete_day_statusHead">
                            <div class="header-left">
                                <h4 class="card-title">{{ trans('admin/dashboard.incomplete_day_status') }}</h4>
                            </div>
                            <div class="centerdateformat mb-1 mt-2">
                                <input type="text" value="{{ dateFormat($fromDate) }}" id="inCompleteDayStatus"
                                    class="form-control flatpickr-basic-custom border-0 shadow-none bg-transparent pr-0"
                                    style="width: 96px" placeholder="YYYY-MM-DD"
                                    onchange="inCompleteDayStatus.call(this)" />
                            </div>
                        </div>
                    </div>
                    <div class="match-height card-body pt-1">
                        <div class="row card-employee-tasknew" id="inCompleteDayStatusDiv" style="max-height:310px">
                            <div class="employee-task text-center pb-2 col-lg-12">
                                <h4 class="text-secondary">{{ trans('admin/dashboard.no_record_found') }}</h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--/ Incomplete Day Status Card -->

            @if ($configService->viewPeopleOnLeaveDashboard())
                <!-- People On leave-->
                <div class="col-lg-3 col-md-4 col-6">
                    <div class="card card-browser-states" id="peopleOnLeaveCard">
                        <div class="card-header newheader">
                            <div id="people_on_leave">
                                <div class="header-left">
                                    <h4 class="card-title">{{ trans('admin/dashboard.people_on_leave') }}</h4>
                                </div>
                                <p class="card-text font-small-2">Counter {{ date('F Y') }} </p>
                            </div>
                            <div style="float: right">
                                <a
                                    href="/{!! $alias !!}/leave-approvals?tab2=approved&date_range={{ date('Y-m-d') }} to {{ \Carbon\Carbon::now()->addDays(7)->format('Y-m-d') }}&{{ http_build_query(request()->except(['auth_user', 'date'])) }}">
                                    <u>View All</u>
                                </a>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="card-employee-task card-employee-tasknew" id="peopleOnLeaveDiv"
                                style="max-height: 310px;">
                                <div class='employee-task text-center pb-2'>
                                    <h4 class='text-secondary'>No records found</h4>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--/ People On Leave -->
            @endif

            @if ($configService->viewPresentOnWeekOffDashboard())
                <!-- Week Offs -->
                <div class="col-lg-3 col-md-4 col-6">
                    <div class="card card-browser-states">
                        <div class="card-header newheader">
                            <div id="employees_present_on_week_offHead">
                                <div class="header-left">
                                    <h4 class="card-title">{{ trans('admin/dashboard.employees_present_on_week_off') }}
                                    </h4>
                                </div>
                                <p class="card-text font-small-2">Counter {{ date('F Y') }}</p>
                                <div class="centerdateformat mt-1">
                                    <input type="text" value="{{ $dateRange }}" id="presentOnWeekOff"
                                        class="form-control flatpickr-range-custom border-0 shadow-none bg-transparent pr-0"
                                        placeholder="YYYY-MM-DD to YYYY-MM-DD" onchange="presentOnWeekOff.call(this)" />
                                </div>
                            </div>
                            <div id="employees_present_on_week_of_view_all" style="float: right">
                                <a href="/{!! $alias !!}/attendance-logs?{{ http_build_query(request()->except(['auth_user', 'date'])) }}&attendace_type=POW"
                                    class="rounded-pill shadow-sm px-3 py-1">
                                    <i class="bi bi-eye me-1"></i> View All
                                </a>
                            </div>
                        </div>

                        <div class="card-body scrollpart" style="max-height: 310px;">
                            <div class="card-employee-task card-employee-tasknew" id="presentOnWeekOffDiv">
                                <div class='employee-task text-center pb-2'>
                                    <h4 class='text-secondary'>No records found</h4>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--/ Week Offs -->
            @endif

            @if ($configService->viewOvertimeDashboard())
            <!-- Most Frequest Overtime List -->
            <div class="col-md-6 col-12">
                <div class="card card-browser-states">
                    <div class="card-header newheader d-flex justify-content-between align-items-start">
                        <div class="header-left">
                            <h4 class="card-title">{{ trans('admin/dashboard.most_frequest_overtime') }}</h4>
                        </div>
                        <div class="rightdateformat header-right d-flex align-items-center mt-sm-0 mt-1">
                            <input type="text" value="{{ $dateRange }}" id="overtimeRange"
                                class="form-control flatpickr-range-custom border-0 shadow-none bg-transparent pr-0"
                                placeholder="YYYY-MM-DD to YYYY-MM-DD" onchange="overTimeEmployees.call(this)" />
                        </div>
                    </div>

                    <div class="match-height card-body pt-1">
                        <div class="row" id="mostFrequestOvertimeDiv">

                        </div>
                    </div>
                </div>
            </div>
            <!--/ Most Frequest Overtime List -->
            @endif

            <!-- Late Comers Card -->
            <div class="col-md-3 col-12">
                <div class="card">
                    <div class="card-header newheader">
                        <div id="latecomersHead">
                            <div class="header-left">
                                <h4 class="card-title">Late duty check-in</h4>
                            </div>
                            <div class="centerdateformat mb-1 mt-2">
                                <input type="text" value="{{ dateFormat($fromDate) }}" id="lateComers"
                                    class="form-control flatpickr-basic-custom border-0 shadow-none bg-transparent pr-0"
                                    placeholder="YYYY-MM-DD" onchange="lateComers.call(this)" />
                            </div>
                        </div>
                    </div>
                    <div class="card-body" id="lateComersDiv">
                        <div class="employee-task text-center pb-2">
                            <h4 class="text-secondary">{{ trans('admin/dashboard.no_record_found') }}</h4>
                        </div>
                    </div>
                </div>
            </div>
            <!--/ Late Comers Card -->

            <!-- Early Departs Card -->
            <div class="col-md-3 col-12">
                <div class="card">
                    <div class="card-header newheader">
                        <div id="earlyDepartsHead">
                            <div class="header-left">
                                <h4 class="card-title">Early duty check-out</h4>
                            </div>
                            <div class="centerdateformat mb-1 mt-2">
                                <input type="text" value="{{ dateFormat($fromDate) }}" id="earlyDeparts"
                                    class="form-control flatpickr-basic-custom border-0 shadow-none bg-transparent pr-0"
                                    placeholder="YYYY-MM-DD" onchange="earlyDeparts.call(this)" />
                            </div>
                        </div>
                    </div>
                    <div class="card-body" id="earlyDepartsDiv">
                        <div class="employee-task text-center pb-2">
                            <h4 class="text-secondary">{{ trans('admin/dashboard.no_record_found') }}</h4>
                        </div>
                    </div>
                </div>
            </div>
            <!--/ Early Departs Card -->

            @if ($configService->viewMinMaxAttDashboard())
            <!-- Min/Max Attendance Card -->
            <div class="col-lg-6 col-12">
                <div class="card" id="minMaxAttendanceCard">
                    <div class="card-header newheader d-flex justify-content-between align-items-start">
                        <table class="table table-bordered" style="width: 100%;">
                            <thead>
                                <tr>
                                    <th></th>
                                    <th>Date</th>
                                    <th>Count</th>
                                </tr>
                            </thead>
                            <tbody id="minMaxAttendanceBody">
                                <tr>
                                    <td>{{ trans('admin/dashboard.max_attendance') }}</td>
                                    <td class="text-dark">-</td>
                                    <td class="text-dark">-</td>
                                </tr>
                                <tr>
                                    <td>{{ trans('admin/dashboard.min_attendance') }}</td>
                                    <td class="text-dark">-</td>
                                    <td class="text-dark">-</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <!--/ Min/Max Attendance Card -->
            @endif

            <!-- Offline/Fake Attendance Card -->
            @if(@$configData['offline_attendance_access'])
            <div class="col-lg-6 col-12">
                <div class="card" id="offlineFakeAttendanceCard">
                    <div class="card-header newheader d-flex justify-content-between align-items-start">
                        <table class="table table-bordered" style="width: 100%;">
                            <thead>
                                <tr>
                                    <th></th>
                                    <th>Date</th>
                                    <th>Count(%)</th>
                                </tr>
                            </thead>
                            <tbody id="offlineFakeAttendanceBody">
                                <tr>
                                    <td>{{ trans('admin/dashboard.offline_attendance') }}</td>
                                    <td class="text-dark">{{ dateFormat($fromDate) }}</td>
                                    <td class="text-dark">-</td>
                                </tr>
                                <tr>
                                    <td>{{ trans('admin/dashboard.fake_attendance') }}</td>
                                    <td class="text-dark">{{ dateFormat($fromDate) }}</td>
                                    <td class="text-dark">-</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            @endif
            <!--/ Offline/Fake Attendance Card -->
        </div>

        <div class="row match-height">
            <!-- Holidays -->
            <div class="col-lg-3 col-md-4 col-6">
                <div class=" card card-browser-states">
                    <div
                        class="card-header newheader 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.upcoming_holidays') }}</h4>
                        </div>
                        <div class="centerdateformat mb-1 mt-2">
                            <select class="form-control form-select" name="holiday_list_id" id="holiday_list_id"
                                onchange="upcomingHolidays()">
                                <option value="">All</option>
                                @foreach ($holidayListIds as $holidayList)
                                    <option value="{{ $holidayList->id }}">{{ $holidayList->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="card-body">
                        <div id="upcomingHolidaysDiv">
                            <div class='employee-task text-center pb-2'>
                                <h4 class='text-secondary'>No records found</h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--/ Holidays -->

            <!-- User Timeline Card -->
            <div class="col-lg-9 col-12">
                <div class="card card-user-timeline" id="auditLogsCard">
                    <div class="card-header newheader d-flex justify-content-between align-items-start">
                        <div class="header-left">
                            <h4 class="card-title">{{ trans('admin/dashboard.activity_stream') }}</h4>
                        </div>
                    </div>

                    <div class="card-body pt-1">
                        <div class="card-usertimeline card-employee-tasknew timelinescroll" id="scrollpart">
                            <ul class="timeline ms-50 newdashtimline" id="auditLogsDiv"></ul>
                        </div>
                    </div>
                </div>
            </div>
            <!--/ User Timeline Card -->

            <!-- Birthday List -->
            <div class="col-md-4 col-12">
                <div class="card birthday-section" id="birthdaysCard">
                    <div class="card-header newheader flex-column align-items-center" style="position: relative;">
                        <div class="header-left text-center">
                            <img src="/assets/img/bthday-icon.png" class="bimage" />
                            <h4 class="card-title">{{ trans('admin/dashboard.birthday') }}</h4>
                            <p>{{ date('F') }} - {{ date('Y') }}</p>
                        </div>

                    <div style="position: absolute; top: 8px; right: 8px">
                        <div class="dropdown">
                            <a class="pe-1 dropdown-toggle hide-arrow text-primary" data-bs-toggle="dropdown">
                                <i style="width: 20px; height: 20px;" data-feather="download" aria-hidden="true"></i>
                            </a>
                            <div class="dropdown-menu" style="text-align: center; width:10px">
                                {{-- <a class="dropdown-item" target="_blank" href="/{!! $alias !!}/total-employees?birthday={{date('F')}}&{{ request()->getQueryString() }}">
                                <span>VIEW</span>
                            </a> --}}
                                <a class="dropdown-item" target="_blank"
                                    href="/{!! $alias !!}/event-employees/export?{{ request()->getQueryString() }}&event_type=birthday&file_type=pdf">
                                    <span>{{ trans('common/common.pdf') }}</span>
                                </a>
                                <a class="dropdown-item"
                                    href="/{!! $alias !!}/event-employees/export?{{ request()->getQueryString() }}&event_type=birthday&file_type=excel">
                                    <span>{{ trans('common/common.excel') }}</span>
                                </a>
                            </div>
                        </div>
                    </div>
                    </div>

                    <div class="card-body bg-light p-2">
                        <div class="card-employee-task card-employee-tasknew" id="birthdaysDiv">
                            <div class='employee-task text-center pb-2'>
                                <h4 class='text-secondary'>No records found</h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--/ Birthday List -->

            <!-- Work Anniversary List -->
            <div class="col-md-4 col-12">
                <div class="card birthday-section annivesection" id="workAnniversariesCard">
                    <div class="card-header newheader flex-column align-items-center" style="position: relative;">
                        <div class="header-left text-center">
                            <img src="/assets/img/ann-icon-new.png" class="bimage" />
                            <h4 class="card-title">{{ trans('admin/dashboard.work_anniversary') }}</h4>
                            <p>{{ date('F') }} - {{ date('Y') }}</p>
                        </div>

                    <div style="position: absolute; top: 8px; right: 8px">
                        <div class="dropdown">
                            <a class="pe-1 dropdown-toggle hide-arrow text-primary" data-bs-toggle="dropdown">
                                <i style="width: 20px; height: 20px;" data-feather="download" aria-hidden="true"></i>
                            </a>
                            <div class="dropdown-menu">
                                {{-- <a class="dropdown-item" target="_blank" href="/{!! $alias !!}/total-employees?work_anniversary={{date('F')}}&{{ request()->getQueryString() }}">
                                <span>VIEW</span>
                            </a> --}}
                                <a class="dropdown-item" target="_blank"
                                    href="/{!! $alias !!}/event-employees/export?{{ request()->getQueryString() }}&event_type=work-anniversary&file_type=pdf">
                                    <span>{{ trans('common/common.pdf') }}</span>
                                </a>
                                <a class="dropdown-item"
                                    href="/{!! $alias !!}/event-employees/export?{{ request()->getQueryString() }}&event_type=work-anniversary&file_type=excel">
                                    <span>{{ trans('common/common.excel') }}</span>
                                </a>
                            </div>
                        </div>
                    </div>
                    </div>

                    <div class="card-body bg-light p-2">
                        <div class="card-employee-task card-employee-tasknew" id="workAnniversariesDiv">
                            <div class='employee-task text-center pb-2'>
                                <h4 class='text-secondary'>No records found</h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--/ Work Anniversary List -->

            <!-- New Joinee List -->
            <div class="col-md-4 col-12">
                <div class="card birthday-section new-joinee-section" id="newJoineesCard">
                    <div class="card-header newheader flex-column align-items-center" style="position: relative;">
                        <div class="header-left text-center">
                            <img src="/assets/img/new-join-icon.png" class="bimage" />
                            <h4 class="card-title">{{ trans('admin/dashboard.new_joinee') }}</h4>
                            <p>{{ date('F') }} - {{ date('Y') }}</p>
                        </div>

                    <div style="position: absolute; top: 8px; right: 8px">
                        <div class="dropdown">
                            <a class="pe-1 dropdown-toggle hide-arrow text-primary" data-bs-toggle="dropdown">
                                <i style="width: 20px; height: 20px;" data-feather="download" aria-hidden="true"></i>
                            </a>
                            <div class="dropdown-menu">
                                {{-- <a class="dropdown-item" target="_blank" href="/{!! $alias !!}/total-employees?new-joinee={{date('F')}}&{{ request()->getQueryString() }}">
                                <span>VIEW</span>
                            </a> --}}
                                <a class="dropdown-item" target="_blank"
                                    href="/{!! $alias !!}/event-employees/export?{{ request()->getQueryString() }}&event_type=new-joinee&file_type=pdf">
                                    <span>{{ trans('common/common.pdf') }}</span>
                                </a>
                                <a class="dropdown-item"
                                    href="/{!! $alias !!}/event-employees/export?{{ request()->getQueryString() }}&event_type=new-joinee&file_type=excel">
                                    <span>{{ trans('common/common.excel') }}</span>
                                </a>
                            </div>
                        </div>
                    </div>
                    </div>

                    <div class="card-body bg-light p-2">
                        <div class="card-employee-task card-employee-tasknew" id="newJoineesDiv">
                            <div class='employee-task text-center pb-2'>
                                <h4 class='text-secondary'>No records found</h4>
                            </div>
                        </div>
                    </div>


                </div>
            </div>
            <!-- New Joinee List -->

            <!-- Absent alert Card -->
            <div class="col-sm-6 col-12">
                <div class="card" id="absentAlertsCard">
                    <div class="card-header newheader  ">
                        <div class="header-left">
                            <h4 class="card-title">{{ trans('admin/dashboard.absent_alerts') }}</h4>
                        </div>
                    </div>

                    <div class="card-body">
                        <div class="card-employee-tasknew card-employee-tasknew3" id="scrollpart">

                            <div class="">
                                <table class="table border">
                                    <thead>
                                        <tr>
                                            <th>{{ trans('admin/dashboard.absent_alert_type') }}</th>
                                            <th>{{ trans('admin/dashboard.total_employees') }}</th>

                                        </tr>
                                    </thead>
                                    <tbody id="absentAlertsBody">
                                        <tr>
                                            <td class="text-dark fw-bolder" colspan="2">{{ trans('admin/dashboard.no_record_found') }}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            @if ($configService->viewConfigRuleExpiryDashboard())
                <div class="col-sm-6 col-12">
                    <div class="card" id="otRulesCard">
                        <div class="card-header newheader  ">
                            <div class="header-left">
                                <h4 class="card-title">Config Rules - Expiry Date</h4>
                            </div>
                        </div>

                        <div class="card-body">
                            <div class="card-employee-tasknew card-employee-tasknew3" id="scrollpart">

                                <div class="">
                                    <table class="table border">
                                        <thead>
                                            <tr>
                                                <th>Rule Name</th>
                                                <th>Expiry Date</th>
                                            </tr>
                                        </thead>
                                        <tbody id="otRulesBody">
                                            <tr>
                                                <td class="text-dark fw-bolder" colspan="2">Record not found.</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endif
            <!-- /Department Wise Card -->
        </div>
    </section>

    <style>
        input.flatpickr-range-custom {
            width: 210px !important;
        }

        .apexcharts-legend {
            max-height: 60px !important;
            overflow-y: auto !important;
        }
    </style>
@endsection

@push('footer-script')
    <!-- BEGIN: Page Vendor JS-->
    <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/vendors/js/forms/select/select2.full.min.js"></script>
    <script src="/app-assets/vendors/js/charts/chart.min.js"></script>
    <script src="/app-assets/js/scripts/forms/form-wizard.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/chart-scripts.js"></script>
    <script src="/app-assets/js/scripts/charts/chart-chartjs.js"></script>
    <script src="/app-assets/js/scripts/charts/chart-apex.js"></script>
    {{-- <script src="/app-assets/js/scripts/cards/card-statistics.js"></script> --}}
    <!-- END: Page JS-->

    <script>
        function toEmployeePage(type) {
            date = $("#employeeInOut").val();
            url = window.location.origin;

            switch (type) {
                case 'all':
                    window.open(url + "/{!! $alias !!}/attendance-logs?{!! $queryString !!}&type=" + type +
                        "&date=" + date + "&" + orgids());
                    break;
                case 'in':
                    window.open(url + "/{!! $alias !!}/attendance-logs?{!! $queryString !!}&type=" + type +
                        "&date=" + date + "&" + orgids());
                    break;
                case 'out':
                    window.open(url + "/{!! $alias !!}/attendance-logs?{!! $queryString !!}&type=" + type +
                        "&date=" + date + "&" + orgids());
                    break;
            }
        }

        function orgUpdate() {
            clearTimeout(debounceTimer);
            debounceTimer = setTimeout(async () => {
                const selectedIds = $orgSelect.val();
                if (!selectedIds.length) return;

                try {
                    const response = await $.ajax({
                        url: apiUrl,
                        method: "POST",
                        contentType: "application/json",
                        data: JSON.stringify({
                            organization_ids: selectedIds
                        }),
                    });

                    updateDropdowns(response);
                } catch (error) {
                    console.error("Error fetching support filters:", error);
                }
            }, 500);
        }

        function updateDropdowns(data) {
            const dropdowns = {
                designation_id: "designations",
                company_code_id: "companyCodes",
                department_id: "departments",
                sub_department_id: "subDepartments",
                workstation_id: "workstations",
                shift_id: "shifts",
                area_id: "areas",
                location_id: "locations",
                sublocation_id: "subLocations",
                contractor_id: "contractors",
            };

            Object.entries(dropdowns).forEach(([id, key]) => {
                $(`#${id}`).html(
                    data[key]
                    ?.map((item) => `<option value="${item.id}">${item.name}</option>`)
                    .join("") || ""
                );
            });
        }

        function callAjax() {
            ajaxEndpoints.forEach(({
                fn
            }) => fn());
        }

        function orgids() {
            return queryString = $("#organization_ids").val().map(id => `organization_ids[]=${id}`).join("&");
        }

        function showCardLoader($cardBody) {
            $cardBody.css({
                'position': 'relative',
            }).fadeTo(200, 0.3);

            const $loader = $(`
                <div class="fetch-spinner"></div>
                <style>
                    @keyframes revolve {
                        0% { transform: translate(-50%, -50%) rotate(0deg); }
                        100% { transform: translate(-50%, -50%) rotate(360deg); }
                    }
                </style>
            `).css({
                "position": "absolute",
                "top": "50%",
                "left": "50%",
                "transform": "translate(-50%, -50%)",
                "z-index": "10",
                "width": "50px",
                "height": "50px",
                "border": "5px solid transparent",
                "border-top": "5px solid #007bff",
                "border-right": "5px solid #00d4ff",
                "border-radius": "50%",
                "animation": "revolve 0.8s linear infinite"
            });

            $cardBody.append($loader);
        }

        function hideCardLoader($cardBody) {
            $(".preloader").hide();
            $("body").css("visibility", "visible");
            $cardBody.find('.fetch-spinner').remove();
            $cardBody.fadeTo(200, 1);
        }

        async function fetchData(endpoint, dateSelector, callback) {
            try {
                const $dateInput = $(dateSelector);
                const date = $dateInput.val();
                const $cardBody = $dateInput.closest('.card').find('.card-body');

                showCardLoader($cardBody);

                const response = await fetch(
                    `/{!! $alias !!}/home/${endpoint}?date=${date}&${orgids()}&filters=${encodeURIComponent(JSON.stringify(filters))}`,
                    {
                        method: 'GET',
                        credentials: 'same-origin',
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest',
                            'Accept': 'application/json'
                        },
                    }
                );

                if (!response.ok) {
                    throw new Error(`HTTP error! Status: ${response.status}`);
                }

                const data = await response.json();

                hideCardLoader($cardBody);

                callback(data);
            } catch (error) {
                console.error(`Error fetching ${endpoint} data:`, error);
            }
        }

        // Cards that don't carry their own per-card date picker (they follow the
        // dashboard's global date filter) go through this instead of fetchData().
        async function fetchCardData(endpoint, cardSelector, callback, bodySelector) {
            const $card = $(cardSelector);
            if ($card.length === 0) {
                // Card isn't rendered for this organization's config (e.g. gated by
                // viewMinMaxAttDashboard()) — skip the network call entirely.
                return;
            }

            try {
                const date = $('#date').val();
                // A bodySelector lets multiple independent fetches into the same card (e.g. the
                // department/shift/category tabs) each show their own loader instead of fighting
                // over one shared .card-body overlay.
                const $cardBody = bodySelector ? $(bodySelector) : $card.find('.card-body').first();

                showCardLoader($cardBody);

                const response = await fetch(
                    `/{!! $alias !!}/home/${endpoint}?date=${date}&${orgids()}&filters=${encodeURIComponent(JSON.stringify(filters))}`,
                    {
                        method: 'GET',
                        credentials: 'same-origin',
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest',
                            'Accept': 'application/json'
                        },
                    }
                );

                if (!response.ok) {
                    throw new Error(`HTTP error! Status: ${response.status}`);
                }

                const data = await response.json();

                hideCardLoader($cardBody);

                callback(data, date);
            } catch (error) {
                console.error(`Error fetching ${endpoint} data:`, error);
            }
        }

        function defaultProfileImage(url) {
            return url ? url : "/assets/img/default-profile-3.png";
        }

        function noRecordsHtml() {
            return `<div class='employee-task text-center pb-2'><h4 class='text-secondary'>No records found</h4></div>`;
        }

        function employeeListHtml(items) {
            return items.length > 0 ?
                items.map(item => `
                    <div class="employee-task d-flex justify-content-between align-items-center">
                        <div class="d-flex flex-row">
                            <div class="avatar me-75">
                                <img src="${defaultProfileImage(item.image)}" width="42" height="42" alt="Avatar" />
                            </div>
                            <div class="my-auto">
                                <h6 class="mb-0">${item.name ?? '-'}</h6>
                                <small>${item.displayDate}</small>
                            </div>
                        </div>
                    </div>`).join("") :
                noRecordsHtml();
        }

        function isMasterLabel(orgId, organizationId) {
            return orgId != organizationId ? ' (Master)' : '';
        }

        async function departmentCardsHome() {
            await fetchCardData("department-cards", "#departmentCategoryShiftCard", (data, date) => {
                document.getElementById("departmentCardsBody").innerHTML = data.departmentCards.length > 0 ?
                    data.departmentCards.map(dept => `
                        <tr>
                            <td class="text-dark">${dept.name}${isMasterLabel(dept.organization_id, data.organizationId)}</td>
                            <td class="text-dark">${dept.total_members}</td>
                            <td><a href="/{!! $alias !!}/attendance-logs?${orgids()}&ispresent=1&department_id[]=${dept.id}&date=${date}&status=active"><span class="badge rounded-pill badge-light-primary me-1">${dept.present_members}</span></a></td>
                            <td><a href="/{!! $alias !!}/total-employees?${orgids()}&dep_absent=1&department_id[]=${dept.id}&date=${date}&status=active"><span class="badge rounded-pill badge-light-primary me-1">${dept.absent_members}</span></a></td>
                        </tr>`).join("") :
                    `<tr><td colspan="4" class="text-center text-secondary">No record found</td></tr>`;
            }, "#department .card-employee-tasknew3");
        }

        async function shiftCardsHome() {
            await fetchCardData("shift-cards", "#departmentCategoryShiftCard", (data, date) => {
                document.getElementById("shiftCardsBody").innerHTML = data.shiftCards.length > 0 ?
                    data.shiftCards.map(shift => `
                        <tr>
                            <td class="text-dark">${shift.name}</td>
                            <td><a href="/{!! $alias !!}/attendance-logs?${orgids()}&ispresent=1&shift_id[]=${shift.id}&date=${date}&status=active"><span class="badge rounded-pill badge-light-primary me-1">${shift.present_employees}</span></a></td>
                        </tr>`).join("") :
                    `<tr><td colspan="2" class="text-center text-secondary">No record found</td></tr>`;
            }, "#shift .card-employee-tasknew3");
        }

        async function categoryCardsHome() {
            await fetchCardData("category-cards", "#departmentCategoryShiftCard", (data, date) => {
                document.getElementById("categoryCardsBody").innerHTML = data.categoryCards.length > 0 ?
                    data.categoryCards.map(cat => `
                        <tr>
                            <td class="text-dark">${cat.name}${isMasterLabel(cat.organization_id, data.organizationId)}</td>
                            <td class="text-dark">${cat.total_members}</td>
                            <td><a href="/{!! $alias !!}/attendance-logs?${orgids()}&ispresent=1&department_id[]=${cat.id}&date=${date}&status=active"><span class="badge rounded-pill badge-light-primary me-1">${cat.present_members}</span></a></td>
                            <td><a href="/{!! $alias !!}/total-employees?${orgids()}&dep_absent=1&department_id[]=${cat.id}&date=${date}&status=active"><span class="badge rounded-pill badge-light-primary me-1">${cat.absent_members}</span></a></td>
                        </tr>`).join("") :
                    `<tr><td colspan="4" class="text-center text-secondary">No record found</td></tr>`;
            }, "#category .card-employee-tasknew3");
        }

        async function peopleOnLeaveHome() {
            await fetchCardData("people-on-leave", "#peopleOnLeaveCard", (data) => {
                document.getElementById("peopleOnLeaveDiv").innerHTML = data.length > 0 ?
                    data.map(val => `
                        <div class="employee-task d-flex justify-content-between align-items-center">
                            <div class="media d-flex align-items-center">
                                <div class="avatar mr-75">
                                    <img src="${defaultProfileImage(val.image)}" width="42" height="42" alt="Avatar" />
                                </div>
                                <div class="media-body my-auto ms-1">
                                    <h6 class="mb-0">${val.name ?? '-'}</h6>
                                    <small>${val.displayDate}</small>
                                </div>
                            </div>
                        </div>`).join("") :
                    noRecordsHtml();
            });
        }

        async function auditLogsHome() {
            await fetchCardData("audit-logs", "#auditLogsCard", (data) => {
                const dots = ['', 'timeline-point-warning', 'timeline-point-info', 'timeline-point-danger'];
                document.getElementById("auditLogsDiv").innerHTML = data.map((log, i) => `
                    <li class="timeline-item">
                        <span class="timeline-point ${dots[i % 4]} timeline-point-indicator"></span>
                        <div class="timeline-event">
                            <div class="d-flex justify-content-between flex-sm-row flex-column mb-sm-0 mb-1">
                                <h6>${log.comment ?? ''}</h6>
                                <span class="timeline-event-time me-1">${log.displayDate}</span>
                            </div>
                            <p>${log.action ?? ''}</p>
                        </div>
                    </li>`).join("");
            });
        }

        async function birthdaysHome() {
            await fetchCardData("birthdays", "#birthdaysCard", (data) => {
                document.getElementById("birthdaysDiv").innerHTML = employeeListHtml(data);
            });
        }

        async function workAnniversariesHome() {
            await fetchCardData("work-anniversaries", "#workAnniversariesCard", (data) => {
                document.getElementById("workAnniversariesDiv").innerHTML = employeeListHtml(data);
            });
        }

        async function newJoineesHome() {
            await fetchCardData("new-joinees", "#newJoineesCard", (data) => {
                document.getElementById("newJoineesDiv").innerHTML = employeeListHtml(data);
            });
        }

        async function absentAlertsHome() {
            await fetchCardData("absent-alerts", "#absentAlertsCard", (data) => {
                const rows = data.absentAlerts.map(alert => `
                    <tr>
                        <td class="text-dark fw-bolder"><strong>${alert.title}</strong></td>
                        <td>
                            <a href="/{!! $alias !!}/total-employees?${orgids()}&absent_alert=${alert.absent_alert}" target="_blank">
                                <span class="badge rounded-pill badge-light-primary me-1">${alert.count}</span>
                            </a>
                        </td>
                    </tr>`).join("");

                document.getElementById("absentAlertsBody").innerHTML = rows + `
                    <tr>
                        <td class="text-dark fw-bolder"><strong>Daily Inactive Employees</strong></td>
                        <td>
                            <a href="/{!! $alias !!}/total-employees?${orgids()}&inactive_date=${data.filterDate}" target="_blank">
                                <span class="badge rounded-pill badge-light-danger me-1">${data.dailyInactiveemps}</span>
                            </a>
                        </td>
                    </tr>`;
            });
        }

        async function overtimeRulesHome() {
            await fetchCardData("overtime-rules", "#otRulesCard", (data) => {
                document.getElementById("otRulesBody").innerHTML = data.length > 0 ?
                    data.map(rule => `
                        <tr>
                            <td class="text-dark fw-bolder"><strong>${rule.title} (OT)</strong></td>
                            <td><span class="badge rounded-pill badge-light-primary me-1">${rule.displayValidTo}</span></td>
                        </tr>`).join("") :
                    `<tr><td class="text-dark fw-bolder" colspan="2">Record not found.</td></tr>`;
            });
        }

        async function minMaxAttendanceHome() {
            await fetchCardData("min-max-attendance", "#minMaxAttendanceCard", (data) => {
                const row = (label, entry) => entry ?
                    `<tr>
                        <td>${label}</td>
                        <td class="text-dark">${entry.displayDate}</td>
                        <td class="text-dark"><a target="__blank" href="/{!! $alias !!}/attendance-logs?${orgids()}&status=active&date=${entry.attendance_date}"><span class="badge rounded-pill badge-light-primary me-1">${entry.attendance_count}</span></a></td>
                    </tr>` :
                    `<tr><td>${label}</td><td class="text-dark">-</td><td class="text-dark">-</td></tr>`;

                document.getElementById("minMaxAttendanceBody").innerHTML =
                    row("{{ trans('admin/dashboard.max_attendance') }}", data.maxAttendanceDate) +
                    row("{{ trans('admin/dashboard.min_attendance') }}", data.minAttendanceDate);
            });
        }

        async function offlineFakeAttendanceHome() {
            await fetchCardData("offline-fake-attendance", "#offlineFakeAttendanceCard", (data) => {
                const perc = data.fakeOfflinePerc;
                const displayDate = $('#date').val();
                document.getElementById("offlineFakeAttendanceBody").innerHTML = perc ? `
                    <tr>
                        <td>{{ trans('admin/dashboard.offline_attendance') }}</td>
                        <td class="text-dark">${displayDate}</td>
                        <td class="text-dark"><strong>${perc.offline_logs} / ${perc.total_logs}</strong> (${perc.offline_percentage}%)</td>
                    </tr>
                    <tr>
                        <td>{{ trans('admin/dashboard.fake_attendance') }}</td>
                        <td class="text-dark">${displayDate}</td>
                        <td class="text-dark"><strong>${perc.fake_logs} / ${perc.total_logs}</strong> (${perc.fake_percentage}%)</td>
                    </tr>` :
                    `<tr><td>{{ trans('admin/dashboard.offline_attendance') }}</td><td class="text-dark">${displayDate}</td><td class="text-dark">-</td></tr>
                     <tr><td>{{ trans('admin/dashboard.fake_attendance') }}</td><td class="text-dark">${displayDate}</td><td class="text-dark">-</td></tr>`;
            });
        }

        async function attendanceOnRollInfo() {
            await fetchData("attendance-info-on-roll", "#attendanceOnRollInfo", (data) => {
                donutChartOnRoll(data, "{!! $alias !!}", `{!! http_build_query(request()->except('auth_user', 'auth_type')) !!}`);
            });
        }

        async function attendanceContractualInfo() {
            await fetchData(
                "attendance-info-contractual",
                "#attendanceContractualInfo",
                (data) => {
                    donutChartContractual(data, "{!! $alias !!}", `{!! http_build_query(request()->except('auth_user', 'auth_type')) !!}`);
                }
            );
        }

        async function attendanceOnRollInfoShiftWise() {
            await fetchData("attendance-info-on-roll-shift-wise", "#attendanceOnRollInfoShiftWise", (data) => {
                donutChartOnRollShiftWise(data, "{!! $alias !!}", `{!! http_build_query(request()->except('auth_user', 'auth_type')) !!}`);
            });
        }

        async function attendanceContractualInfoShiftWise() {
            await fetchData("attendance-info-contractual-shift-wise", "#attendanceContractualInfoShiftWise", (data) => {
                donutChartContractualShiftWise(data, "{!! $alias !!}", `{!! http_build_query(request()->except('auth_user', 'auth_type')) !!}`);
            });
        }

        async function employeeInOut() {
            await fetchData("total-in-out", "#employeeInOut", (data) => {
                $("#employee_total_in_out").text(data.total);
                $("#employee_total_in").text(data.total_in);
                $("#employee_total_out").text(data.total_out);
            });
        }

        async function totalWorkingHour() {
            await fetchData("total-working-hour", "#totalWorkingHour", (data) => {
                $("#average_working_hr").text(data.totalAvgWorkingHour);
            });
        }

        async function presentOnWeekOff() {
            await fetchData("present-on-week-off", "#presentOnWeekOff", (data) => {
                var date = $('#presentOnWeekOff').val();
                $("#employees_present_on_week_offHead").next("div").remove();
                $("#employees_present_on_week_offHead").after(
                    '<div id="employees_present_on_week_of_view_all" style="float: right"><a href="/{!! $alias !!}/attendance-logs?' +
                    orgids() + '&date=' + date + '&attendace_type=POW"><u>View All</u></a></div>');

                let content = data.length > 0 ?
                    `<div class='card-employee-task card-employee-tasknew' id='scrollpart' style='max-height: 310px;'>` +
                    data.map(emp =>
                        `<div class='employee-task d-flex align-items-center mb-1'>
                        <div class='avatar mr-75'>
                            <img src='${emp.image ?? "/assets/img/default-profile-3.png"}' width='42' height='42' alt='Avatar'>
                        </div>
                        <div class='media-body ms-1'>
                            <h6 class='mb-0'>${emp.employee}</h6>
                        </div>
                    </div>`
                    ).join("") + `</div>` :
                    `<div class='employee-task text-center pb-2'><h4 class='text-secondary'>No records found</h4></div>`;
                document.getElementById("presentOnWeekOffDiv").innerHTML = content;
            });
        }

        async function dutyInfo() {
            await fetchData("duty-info", "#dutyInfo", (data) => {
                document.getElementById("barchart-canvas").innerHTML =
                    '<canvas class="bar-chart-ex chartjs" id="barchartex" data-height="250"></canvas>';
                barChartExample(data);
            });
        }

        async function lateComers() {
            await fetchData("late-comers", "#lateComers", (data) => {
                var date = $('#lateComers').val();
                $("#latecomersHead").next("div").remove();
                $("#latecomersHead").after(
                    '<div style="float: right"><a href="/{!! $alias !!}/attendance-logs?' +
                    orgids() + '&date=' +
                    date +
                    '&late=true"><u>View All</u></a></div>'
                );
                let content = data.length > 0 ?
                    `<div class='card-employee-task card-employee-tasknew' id='scrollpart' style='max-height: 310px;'>` +
                    data.map(value => `
                        <div class='employee-task d-flex justify-content-between align-items-center'>
                            <div class='media d-flex align-items-center'>
                                <div class='avatar mr-75'>
                                    <img src='${value.image ? value.image : "/assets/img/default-profile-3.png"}' width='42' height='42' alt='Avatar' />
                                </div>
                                <div class='media-body my-auto ms-1'>
                                    <h6 class='mb-0'>${value.name}</h6>
                                    <small class='checkin-timesmall'>
                                        <span class='text-danger'>${value.attendances[0]?.in_time ?? ""}</span>
                                        ${value.attendances[0]?.out_time ? " - " + value.attendances[0].out_time : ""}
                                    </small>
                                </div>
                            </div>
                        </div>`).join("") + `</div>` :
                    `<div class='employee-task text-center pb-2'><h4 class='text-secondary'>No records found</h4></div>`;
                document.getElementById("lateComersDiv").innerHTML = content;
            });
        }

        async function earlyDeparts() {
            await fetchData("early-departs", "#earlyDeparts", (data) => {
                var date = $('#earlyDeparts').val();
                $("#earlyDepartsHead").next("div").remove();
                $("#earlyDepartsHead").after(
                    '<div style="float: right"><a href="/{!! $alias !!}/attendance-logs?' +
                    orgids() + '&date=' +
                    date +
                    '&early=true"><u>View All</u></a></div>'
                );
                let content = data.length > 0 ?
                    `<div class='card-employee-task card-employee-tasknew' id='scrollpart' style='max-height: 310px;'>` +
                    data.map(value => `
                        <div class='employee-task d-flex justify-content-between align-items-center'>
                            <div class='media d-flex align-items-center'>
                                <div class='avatar mr-75'>
                                    <img src='${value.image ? value.image : "/assets/img/default-profile-3.png"}' width='42' height='42' alt='Avatar' />
                                </div>
                                <div class='media-body my-auto ms-1'>
                                    <h6 class='mb-0'>${value.name}</h6>
                                    <small class='checkin-timesmall'>
                                        ${value.attendances[0]?.in_time ? value.attendances[0].in_time + " - " : ""}
                                        <span class='text-danger'>${value.attendances[0]?.out_time ?? ""}</span>
                                    </small>
                                </div>
                            </div>
                        </div>`).join("") + `</div>` :
                    `<div class='employee-task text-center pb-2'><h4 class='text-secondary'>No records found</h4></div>`;
                document.getElementById("earlyDepartsDiv").innerHTML = content;
            });
        }



        async function overTimeEmployees() {
            await fetchData("over-time-employees", "#overtimeRange", (data) => {
                let content = data.length > 0 ?
                    data.map(value => `
                        <div class="browser-states col-lg-6 mt-0 mb-2">
                            <div class="media d-flex">
                                <div class="avatar pull-up me-2 ms-1">
                                    <img src="${value.employee.image ?? '/assets/img/default-profile-3.png'}" width="33" height="33" alt="" />
                                </div>
                                <h6 class="align-self-center mb-0">${value.employee.name}</h6>
                            </div>
                            <div class="d-flex align-items-center">
                                <div class="font-weight-bold text-body-heading mr-2">
                                    ${value.overtime ? value.overtime.substr(0, 5) : "0"} Hr
                                </div>
                            </div>
                        </div>`).join("") :
                    `<div class='employee-task text-center pb-2'><h4 class='text-secondary'>No records found</h4></div>`;
                document.getElementById("mostFrequestOvertimeDiv").innerHTML = content;
            });
        }

        async function upcomingHolidays() {
            await fetchData("upcoming-holidays", "#holiday_list_id", (data) => {
                let content = data.length > 0 ?
                    `<div class="card-employee-tasknew" id="scrollpart">` +
                    data.map(value => `
                            <div class="holiday-box">
                                <div><span>${value.name}</span></div>
                                <div><h3>${value.date}</h3><h5>${value.day}</h5></div>
                            </div>`).join("") + `</div>` :
                    `<div class='employee-task text-center pb-2'><h4 class='text-secondary'>No records found</h4></div>`;
                document.getElementById("upcomingHolidaysDiv").innerHTML = content;
            });
        }

        async function inCompleteDayStatus() {
            await fetchData("in-complete-day-status", "#inCompleteDayStatus", (data) => {
                var date = $('#inCompleteDayStatus').val();
                $("#incomplete_day_statusHead").next("div").remove();
                $("#incomplete_day_statusHead").after(
                    '<div style="float: right"><a href="/{!! $alias !!}/attendance-logs?' +
                    orgids() + '&date=' +
                    date +
                    '&incomplete_att=all"><u>View All</u></a></div>'
                );

                let content = data.length > 0 ?
                    data.map(value => `
                        <div class="browser-states col-lg-6 mt-0 mb-2">
                            <div class="media d-flex">
                                <div class="avatar pull-up me-2 ms-1">
                                    <img src="${value.image ? value.image : '/assets/img/default-profile-3.png'}" width="33" height="33" alt="Avatar" />
                                </div>
                                <h6 class="align-self-center mb-0">${value.name}</h6>
                            </div>
                            <div class="d-flex align-items-center">
                                <div class="font-weight-bold text-body-heading mr-2">
                                    ${value.attendances?.[0]?.working_time ? value.attendances[0].working_time.substr(0, 5) : "0"} Hr
                                </div>
                            </div>
                        </div>`).join("") :
                    `<div class='employee-task text-center pb-2'><h4 class='text-secondary'>No records found</h4></div>`;
                document.getElementById("inCompleteDayStatusDiv").innerHTML = content;
            });
        }

        function filterData() {
            return {
                'date': $('#date').val(),
                'employee_type': $('#employee_type').val(),
                'location_id': $('#location_id').val(),
                'sublocation_id': $('#sublocation_id').val(),
                'work_station_id': $('#work_station_id').val(),
                'department_id': $('#department_id').val(),
                'sub_department_id': $('#sub_department_id').val(),
                'designation_id': $('#designation_id').val(),
                'company_code_id': $('#company_code_id').val(),
                'shift_id': $('#shift_id').val(),
                'area_id': $('#area_id').val(),
                'contractor_id': $('#contractor_id').val(),
                'status': $('#status').val(),
            }
        }

        let debounceTimer;
        let filters = filterData();
        const $orgSelect = $("#organization_ids");
        const $filterApplyBtn = $("#filterApplyBtn");
        const $datePickers = $(".flatpickr-basic-custom, .flatpickr-range-custom");
        const apiUrl = "/{!! $alias !!}/get-support-filters";
        const ajaxEndpoints = [{
                fn: attendanceOnRollInfo,
                endpoint: "attendance-info-on-roll",
                selector: "#attendanceOnRollInfo",
            },
            {
                fn: attendanceContractualInfo,
                endpoint: "attendance-info-contractual",
                selector: "#attendanceContractualInfo",
            },
            {
                fn: attendanceOnRollInfoShiftWise,
                endpoint: "attendance-info-on-roll-shift-wise",
                selector: "#attendanceOnRollInfoShiftWise",
            },
            {
                fn: attendanceContractualInfoShiftWise,
                endpoint: "attendance-info-contractual-shift-wise",
                selector: "#attendanceContractualInfoShiftWise",
            },
            {
                fn: employeeInOut,
                endpoint: "total-in-out",
                selector: "#employeeInOut"
            },
            {
                fn: totalWorkingHour,
                endpoint: "total-working-hour",
                selector: "#totalWorkingHour",
            },
            // {
            //     fn: dutyInfo,
            //     endpoint: "duty-info",
            //     selector: "#dutyInfo"
            // },
            {
                fn: lateComers,
                endpoint: "late-comers",
                selector: "#lateComers"
            },
            {
                fn: earlyDeparts,
                endpoint: "early-departs",
                selector: "#earlyDeparts"
            },
            {
                fn: overTimeEmployees,
                endpoint: "over-time-employees",
                selector: "#overtimeRange"
            },
            {
                fn: upcomingHolidays,
                endpoint: "upcoming-holidays",
                selector: "#holiday_list_id"
            },
            {
                fn: inCompleteDayStatus,
                endpoint: "in-complete-day-status",
                selector: "#inCompleteDayStatusDiv"
            },
            {
                fn: presentOnWeekOff,
                endpoint: "present-on-week-off",
                selector: "#presentOnWeekOff",
            },
            {
                fn: departmentCardsHome,
                endpoint: "department-cards",
                selector: "#departmentCategoryShiftCard",
            },
            {
                fn: shiftCardsHome,
                endpoint: "shift-cards",
                selector: "#departmentCategoryShiftCard",
            },
            {
                fn: categoryCardsHome,
                endpoint: "category-cards",
                selector: "#departmentCategoryShiftCard",
            },
            {
                fn: peopleOnLeaveHome,
                endpoint: "people-on-leave",
                selector: "#peopleOnLeaveCard",
            },
            {
                fn: auditLogsHome,
                endpoint: "audit-logs",
                selector: "#auditLogsCard",
            },
            {
                fn: birthdaysHome,
                endpoint: "birthdays",
                selector: "#birthdaysCard",
            },
            {
                fn: workAnniversariesHome,
                endpoint: "work-anniversaries",
                selector: "#workAnniversariesCard",
            },
            {
                fn: newJoineesHome,
                endpoint: "new-joinees",
                selector: "#newJoineesCard",
            },
            {
                fn: absentAlertsHome,
                endpoint: "absent-alerts",
                selector: "#absentAlertsCard",
            },
            {
                fn: overtimeRulesHome,
                endpoint: "overtime-rules",
                selector: "#otRulesCard",
            },
            {
                fn: minMaxAttendanceHome,
                endpoint: "min-max-attendance",
                selector: "#minMaxAttendanceCard",
            },
            {
                fn: offlineFakeAttendanceHome,
                endpoint: "offline-fake-attendance",
                selector: "#offlineFakeAttendanceCard",
            },
        ];

        $datePickers.each(function() {
            $(this).flatpickr({
                mode: $(this).hasClass("flatpickr-range-custom") ? "range" : "single",
                dateFormat: APP_DATE_FORMAT,
            });
        });

        $orgSelect.on("change", orgUpdate);

        $('#myTab button').on('shown.bs.tab', function(e) {
            const exportPath = $(e.target).data('export');
            if (!exportPath) return;
            $('#departmentCategoryShiftExportPdf, #departmentCategoryShiftExportExcel').each(function() {
                this.href = this.href.replace(/\/(department|shift|category)-attendance\/export/, `/${exportPath}/export`);
            });
        });

        $(document).ready(function() {
            if (
                "{{ isset($_COOKIE['first_visit']) ? $_COOKIE['first_visit'] : false }}"
            ) {
                toastr.success(
                    `You have successfully logged in to {{ Auth::user()->organization->name }}. Now you can start to explore!`,
                    `👋 Welcome {{ ucwords(Auth::user()->name) }}!`, {
                        closeButton: true,
                        tapToDismiss: false,
                        rtl: $("html").attr("data-textdirection") === "rtl",
                    }
                );
            }
            ("{{ setcookie('first_visit', false, time() + 86400 * 30, '/') }}");

            $(".preloader").hide();
            $("body").css("visibility", "visible");

            callAjax();
        });
    </script>

@endpush