@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%);
        }

        @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='/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 (
                                   $organizations)
                                    <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>
                                @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 -->

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


        <div class="row match-height">
            <!-- Department Wise Card -->
            <div class="col-sm-6 col-12">
                <div class="card">
                    <div class="card-header newheader">
                        <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"
                                    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"
                                    aria-selected="false">{{ trans('admin/dashboard.shift_list') }}</button>
                            </li>
                        </ul>
                    </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">
                                    @if ($departmentCards->isEmpty())
                                        <p>No record found</p>
                                    @else
                                        <div style="position: absolute; top: 14px; right: 17px">
                                            <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="/department-attendance/export?{{ request()->getQueryString() }}&file_type=pdf">
                                                        <span>{{ trans('common/common.pdf') }}</span>
                                                    </a>
                                                    <a class="dropdown-item"
                                                        href="/department-attendance/export?{{ request()->getQueryString() }}&file_type=excel">
                                                        <span>{{ trans('common/common.excel') }}</span>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                        <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>
                                                @foreach ($departmentCards as $department)
                                                    <tr>
                                                        <td class="text-dark fw-bolder">
                                                            <strong>{{ $department->name }} @if ($department->organization_id != $organization->id)
                                                                    (Master)
                                                                @endif
                                                            </strong>
                                                        </td>
                                                        <td class="text-dark">{{ $department->total_members }}</td>
                                                        <td><a
                                                                href="{{ url( '/attendance-logs?' . $queryString . 'ispresent=1&department_id[]=' . $department->id . '&date=' . $fromDate . '&status=active') }}"><span
                                                                    class="badge rounded-pill badge-light-primary me-1">{{ $department->present_members }}</span></a>
                                                        </td>
                                                        <td><a
                                                                href="{{ url( '/total-employees?' . $queryString . 'dep_absent=1&department_id[]=' . $department->id . '&date=' . $fromDate . '&status=active') }}"><span
                                                                    class="badge rounded-pill badge-light-primary me-1">{{ $department->absent_members }}</span></a>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    @endif
                                </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">
                                    @if ($shiftCards->isEmpty())
                                        <p>No record found</p>
                                    @else
                                        <div style="position: absolute; top: 14px; right: 17px">
                                            <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="/shift-attendance/export?{{ request()->getQueryString() }}&file_type=pdf">
                                                        <span>{{ trans('common/common.pdf') }}</span>
                                                    </a>
                                                    <a class="dropdown-item"
                                                        href="/shift-attendance/export?{{ request()->getQueryString() }}&file_type=excel">
                                                        <span>{{ trans('common/common.excel') }}</span>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                        <table class="table border">
                                            <thead>
                                                <tr>
                                                    <th>{{ trans('admin/dashboard.shift') }}</th>
                                                    <th>{{ trans('admin/dashboard.total_employees') }}</th>
                                                    <th>{{ trans('admin/dashboard.present') }}</th>
                                                    {{-- <th>{{trans("admin/dashboard.absent")}}</th> --}}
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($shiftCards as $shift)
                                                    <tr>
                                                        <td class="text-dark fw-bolder">
                                                            <strong>{{ $shift->name }}</strong>
                                                        </td>
                                                        <td class="text-dark">{{ $shift->total_employees }}</td>
                                                        <td><a
                                                                href="{{ url( '/attendance-logs?' . $queryString . 'ispresent=1&shift_id[]=' . $shift->id . '&date=' . $fromDate . '&status=active') }}"><span
                                                                    class="badge rounded-pill badge-light-primary me-1">{{ $shift->present_employees }}</span></a>
                                                        </td>
                                                        {{-- <td><a href="{{url($alias.'/total-employees?'.$queryString.'dep_absent=1&shift_id[]='.$shift->id.'&date='.$fromDate.'&status=active')}}"><span class="badge rounded-pill badge-light-primary me-1">{{$shift->absent_employees}}</span></a></td>  --}}
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /Department Wise Card -->

            <!-- People On leave-->
            <div class="col-lg-3 col-md-4 col-6">
                <div class="card card-browser-states">
                    <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="/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>
                        {{-- @if (count($employeesOnLeave) > 0)
                        @endif --}}
                    </div>
                    <div class="card-body">
                        @if (count($employeesOnLeave) > 0)
                            <div class="card-employee-task card-employee-tasknew" id="scrollpart"
                                style="max-height: 310px;">
                                @foreach ($employeesOnLeave as $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 @if (isset($val->leave->employee->image) ? $val->leave->employee->image : '') src="{{ $val->leave->employee->image }}" @else src="/assets/img/default-profile-3.png" @endif
                                                    width="42" height="42" alt="Avatar" />
                                            </div>
                                            <div class="media-body my-auto ms-1">
                                                <h6 class="mb-0">
                                                    {{ isset($val->leave->employee->name) ? $val->leave->employee->name : '-' }}
                                                </h6>
                                                <small>{{ date('d-F-Y', strtotime($val->date)) }}</small>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @else
                            <div class='employee-task text-center pb-2'>
                                <h4 class='text-secondary'>No records found</h4>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
            <!--/ People On Leave -->

            <!-- 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="/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 -->
        </div>

        <div class="row match-height">
            <!-- Incomplete Day Status Card -->
            <div class="col-lg-6">
                <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 -->

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

        <div class="row match-height">
            <!-- Pending Request Card -->
            {{-- <div class="col-lg-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.pending_request")}}</h4>
                    </div>
                    <div class="header-right">
                        <p class="card-text">Till Date</p>
                    </div>
                </div>
                <div class="card-body"  id="horizontal-barchart-canvas" style="min-height:350px;">
                    <canvas class="horizontal-bar-chart-ex chartjs" data-height="400"></canvas>
                </div>
            </div>
        </div> --}}
            <div class="col-lg-6 col-12">
                <div class="card">
                    <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>
                                <tr>
                                    <td>{{ trans('admin/dashboard.max_attendance') }}</td>
                                    @if (isset($maxAttendanceDate) && $maxAttendanceDate)
                                        <td class="text-dark">{{ dateFormat($maxAttendanceDate->attendance_date) }}
                                        </td>
                                        <td class="text-dark">
                                            <a target="__blank"
                                                href="{{ url( '/attendance-logs?' . $queryString . '&status=active&date=' . $maxAttendanceDate->attendance_date) }}">
                                                </strong>
                                                <span class="badge rounded-pill badge-light-primary me-1">
                                                    {{ $maxAttendanceDate->attendance_count }}
                                                </span>
                                                <strong>
                                            </a>
                                        </td>
                                    @else
                                        <td class="text-dark">-</td>
                                        <td class="text-dark">-</td>
                                    @endif
                                </tr>
                                <tr>
                                    <td>{{ trans('admin/dashboard.min_attendance') }}</td>
                                    @if (isset($minAttendanceDate) && $minAttendanceDate)
                                        <td class="text-dark">{{ dateFormat($minAttendanceDate->attendance_date) }}
                                        </td>
                                        <td class="text-dark">
                                            <a target="__blank"
                                                href="{{ url( '/attendance-logs?' . $queryString . '&status=active&date=' . $minAttendanceDate->attendance_date) }}">
                                                </strong>
                                                <span class="badge rounded-pill badge-light-primary me-1">
                                                    {{ $minAttendanceDate->attendance_count }}
                                                </span>
                                                <strong>
                                            </a>
                                        </td>
                                    @else
                                        <td class="text-dark">-</td>
                                        <td class="text-dark">-</td>
                                    @endif
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>


            <!--/ Pending Request Card -->

            <!-- Most Frequest Overtime List -->
            <div class="col-lg-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 -->
        </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">
                    <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">
                                                                @foreach ($auditLogs as $auditLog)
                                    <li class="timeline-item">
                                        <span
                                            class="timeline-point {{ $dots[($loop->iteration - 1) % 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>{{ $auditLog->comment }}</h6>
                                                <span
                                                    class="timeline-event-time me-1">{{ dateFormat($auditLog->updated_at) }}</span>
                                            </div>
                                            <p>{{ $auditLog->action }}</p>
                                        </div>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <!--/ User Timeline Card -->
        </div>
        <div class="row match-height">
            <!-- Birthday List -->
            <div class="col-md-4 col-12">
                <div class="card birthday-section">
                    <div class="card-header newheader flex-column align-items-center">
                        <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>

                    <div style="position: absolute; top: 125px; right: 10px">
                        <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="/event-employees/export?{{ request()->getQueryString() }}&event_type=birthday&file_type=pdf">
                                    <span>{{ trans('common/common.pdf') }}</span>
                                </a>
                                <a class="dropdown-item"
                                    href="/event-employees/export?{{ request()->getQueryString() }}&event_type=birthday&file_type=excel">
                                    <span>{{ trans('common/common.excel') }}</span>
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="card-body bg-light p-2">
                        @if (count($birthdays) > 0)
                            <div class="card-employee-task card-employee-tasknew" id="scrollpart">
                                @foreach ($birthdays as $birthday)
                                    <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="@if ($birthday->image) {{ $birthday->image }} @else /assets/img/default-profile-3.png @endif"
                                                    width="42" height="42" alt="Avatar" />
                                            </div>
                                            <div class="my-auto">
                                                <h6 class="mb-0">{{ $birthday->name }}</h6>
                                                <small>{{ dateFormat(date('Y-') . date('m-d', strtotime($birthday->dob))) }}</small>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @else
                            <div class='employee-task text-center pb-2'>
                                <h4 class='text-secondary'>No records found</h4>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
            <!--/ Birthday List -->

            <!-- Work Anniversary List -->
            <div class="col-md-4 col-12">
                <div class="card birthday-section annivesection">
                    <div class="card-header newheader flex-column align-items-center">
                        <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>

                    <div style="position: absolute; top: 125px; right: 10px">
                        <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="/event-employees/export?{{ request()->getQueryString() }}&event_type=work-anniversary&file_type=pdf">
                                    <span>{{ trans('common/common.pdf') }}</span>
                                </a>
                                <a class="dropdown-item"
                                    href="/event-employees/export?{{ request()->getQueryString() }}&event_type=work-anniversary&file_type=excel">
                                    <span>{{ trans('common/common.excel') }}</span>
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="card-body bg-light p-2">
                        @if (count($workAnniversaries) > 0)
                            <div class="card-employee-task card-employee-tasknew" id="scrollpart">
                                @foreach ($workAnniversaries as $workAnniversary)
                                    <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="@if ($workAnniversary->image) {{ $workAnniversary->image }} @else /assets/img/default-profile-3.png @endif"
                                                    width="42" height="42" alt="Avatar" />
                                            </div>
                                            <div class="my-auto">
                                                <h6 class="mb-0">{{ $workAnniversary->name }}</h6>
                                                <small>{{ dateFormat(date('Y-') . date('m-d', strtotime($workAnniversary->date_of_joining))) }}</small>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @else
                            <div class='employee-task text-center pb-2'>
                                <h4 class='text-secondary'>No records found</h4>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
            <!--/ Work Anniversary List -->

            <!-- New Joinee List -->
            <div class="col-md-4 col-12">
                <div class="card birthday-section new-joinee-section">
                    <div class="card-header newheader flex-column align-items-center">
                        <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>

                    <div style="position: absolute; top: 125px; right: 10px">
                        <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="/event-employees/export?{{ request()->getQueryString() }}&event_type=new-joinee&file_type=pdf">
                                    <span>{{ trans('common/common.pdf') }}</span>
                                </a>
                                <a class="dropdown-item"
                                    href="/event-employees/export?{{ request()->getQueryString() }}&event_type=new-joinee&file_type=excel">
                                    <span>{{ trans('common/common.excel') }}</span>
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="card-body bg-light p-2">
                        @if (count($newJoinees) > 0)
                            <div class="card-employee-task card-employee-tasknew" id="scrollpart">
                                @foreach ($newJoinees as $newJoinee)
                                    <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="@if ($newJoinee->image) {{ $newJoinee->image }} @else /assets/img/default-profile-3.png @endif"
                                                    width="42" height="42" alt="Avatar" />
                                            </div>
                                            <div class="my-auto">
                                                <h6 class="mb-0">{{ $newJoinee->name }}</h6>
                                                <small>{{ dateFormat(date('Y-') . date('m-d', strtotime($newJoinee->date_of_joining))) }}</small>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @else
                            <div class='employee-task text-center pb-2'>
                                <h4 class='text-secondary'>No records found</h4>
                            </div>
                        @endif
                    </div>


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

        <div class="row match-height">
            <!-- Absent alert Card -->
            <div class="col-sm-6 col-12">
                <div class="card">
                    <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>
                                        @foreach ($absentAlerts as $key => $absentAlert)
                                            <tr>
                                                <td class="text-dark fw-bolder">
                                                    <strong>{{ $absentAlert['title'] }}</strong>
                                                </td>

                                                <td><a href="/total-employees?{!! $queryString !!}absent_alert={{ $absentAlert['absent_alert'] }}"
                                                        target="_blank">
                                                        <span
                                                            class="badge rounded-pill badge-light-primary me-1">{{ $absentAlert['count'] }}</span>
                                                </td>
                                                </a>
                                            </tr>
                                        @endforeach
                                        @if (empty($absentAlerts))
                                            <tr>
                                                <td class="text-dark fw-bolder" clospan="2"> Record not found.</td>
                                            </tr>
                                        @endif
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-sm-6 col-12">
                <div class="card">
                    <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>
                                        @foreach ($otRules as $key => $otRule)
                                            <tr>
                                                <td class="text-dark fw-bolder"><strong>{{ $otRule->title }}
                                                        (OT)
                                                    </strong></td>

                                                <td><a href="#">
                                                        <span
                                                            class="badge rounded-pill badge-light-primary me-1">{{ dateFormat($otRule->valid_to) }}</span>
                                                </td>
                                                </a>
                                            </tr>
                                        @endforeach
                                        @if (empty($otRules))
                                            <tr>
                                                <td class="text-dark fw-bolder" clospan="2"> Record not found.</td>
                                            </tr>
                                        @endif
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /Department Wise Card -->
        </div>
    </section>

    <style>
        input.flatpickr-range-custom {
            width: 210px !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 + "/attendance-logs?{!! $queryString !!}&type=" + type +
                        "&date=" + date + "&" + orgids());
                    break;
                case 'in':
                    window.open(url + "/attendance-logs?{!! $queryString !!}&type=" + type +
                        "&date=" + date + "&" + orgids());
                    break;
                case 'out':
                    window.open(url + "/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("&");
        }

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

                $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);

                const response = await fetch(
                    `/home/${endpoint}?date=${date}&${orgids()}&filters=${encodeURIComponent(JSON.stringify(filters))}`
                );

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

                const data = await response.json();

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

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

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

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

        async function employeeInOut() {
            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() {
            fetchData("total-working-hour", "#totalWorkingHour", (data) => {
                $("#average_working_hr").text(data.totalAvgWorkingHour);
            });
        }

        async function presentOnWeekOff() {
            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="/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() {
            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() {
            fetchData("late-comers", "#lateComers", (data) => {
                var date = $('#lateComers').val();
                $("#latecomersHead").next("div").remove();
                $("#latecomersHead")
                // .after(
                //     '<div style="float: right"><a href="/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 ?? "/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() {
            fetchData("early-departs", "#earlyDeparts", (data) => {
                var date = $('#earlyDeparts').val();
                $("#earlyDepartsHead")
                // .next("div").remove();
                // $("#earlyDepartsHead").after(
                //     '<div style="float: right"><a href="/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 ?? "/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() {
            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() {
            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() {
            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="/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 ?? '/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(),
                'shift_id': $('#company_code_id').val(),
                'area_id': $('#shift_id').val(),
                'contractor_id': $('#area_id').val(),
                'company_code_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 = "/get-support-filters";
        const ajaxEndpoints = [{
                fn: attendanceOnRollInfo,
                endpoint: "attendance-info-on-roll",
                selector: "#attendanceOnRollInfo",
            },
            {
                fn: attendanceContractualInfo,
                endpoint: "attendance-info-contractual",
                selector: "#attendanceContractualInfo",
            },
            {
                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",
            },
        ];

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

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

        $(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